Technical Skills Workshops
The CCI technical team runs a program of technical skills workshops focused on developing essential skills for working in the CCI, and learning about tools, tips and techniques that might not be covered in your classes. These cover various practical topics, including electronics, fabrication, networking, server programming and more.
Workshops are currently every Wednesday, 2:30-4:30pm, with one workshop per week in South London (normally in Greencoat, sometimes Peckham Road 5th floor), and one every 2 weeks in High Holborn (map below). The subject of each weeks' workshop is announced on Mondays, in the #technical channel on Slack and on the noticeboard by the lifts in Peckham Road. Each workshop is walk-in (no registration required), and doesn't depend on coming to any of the other workshops. All students and staff are welcome. These workshops are now being recorded and are available on Panopto here.
If you would like to suggest a future workshop (or suggest someone you think should run one) you can do so using this form. The only way to acquire a sticker is to attend a workshop :)
If you have any further questions about these workshops, you can email Agnes on a.cameron@arts.ac.uk.
- About
- Autumn 2024 Tech Skills Calendar
- 20/11/2024 Debugging Code
- Archived Workshops
- 11/10/23: Unix Command Line Programming
- 18/10/23: Intro to Git
- 25/10/23: 3D Sprinting
- 01/11/23: Blender for Beginners
- 08/11/2023: Electronics Concepts...
- 15/11/2023: 3D scanning
- 29/11/2023: Data Processing in Python
- 14/02/2024 Putting work on the web
- 17/04/2024 Debugging Code
- Summer 2024 Programme
- Exploration Workshops
About
The CCI technical team runs a program of technical skills workshops focused on developing essential skills for working in the CCI. These cover various practical topics, including electronics, fabrication, networking, server programming and more.
Workshops are currently held every Wednesday, 2:30-4:30pm, weekly in South London (almost always in the Greencoat Building) and once every 2 weeks at High Holborn. For a map of the sites, please see below.
The subject of each weeks' workshop is normally announced on Mondays, in the #technical channel on Slack and on the noticeboard by the lifts in Peckham Road. Each workshop is walk-in (no registration required), and doesn't depend on coming to any of the other workshops. All students and staff are welcome. These workshops are now being recorded and are available on Panopto here.
If you would like to suggest a future workshop (or suggest someone you think should run one) you can do so using this form. The only way to acquire a sticker is to attend a workshop :)
Autumn 2024 Tech Skills Calendar
Welcome new students and welcome back returning ones! This term we are holding one tech skills workshop per week in South London (mostly Greencoat building and some at Peckham Road), and one every two weeks at High Holborn.
Do get in touch if you have questions about the program. As ever, no prerequisites and no signup needed! We do record these and put them on Moodle, but you can also ask us about the content.
20/11/2024 Debugging Code
Your code is broken but you don’t know why! What gives? The internet won’t help?? What’s a console? A breakpoint?!
This session covers the philosophy and practice of debugging, across a range of different languages and tools. We work through a series of practical examples contained in this repository. Learning to debug is pretty much the essential skill of learning to write code -- nobody writes code without bugs in it, and the skill of programming is knowing how to recognise, diagnose and fix things when they don't work.
A great reading that sums up a lot of the ideas in this workshop is Eric Lippert's How to debug small programs. It gives a nice overview of the steps and frame of mind needed to debug code.
JS example walkthrough
For the JS example, we will use this sample website from the examples repository. We want to open the folder (we will need to edit the HTML, CSS and JS files) in a code editor. We will be using the browser's debugging tools to fix this code, so also either open the html page in your browser, or use the VSCode 'launch' button to serve the files.
When we load this in the browser we can see that the title (which describes the page) doesn't match what we can see. No rabbit is flashing! Where's the pink overlay? The counter doesn't work!
First of all, we want to check that all our files are included properly. This is a common issue in making websites when we are linking multiple things together! We add in a console.log statement to the JS to check if it's getting called at all... it's not!
There's a bunch of issues with this line! mian.js is a misspelling (we change it to main.js), and we want to use src rather than href to link the file. This second error is more subtle, and found out by googling.
We also realise we haven't linked the CSS file at all!
before:
after:
That's all fine, but it's still not working! Now, we can see we have an error. It's telling us our element is null.
The error is telling us the issue is on line 4, so let's take a look at what's there. We can see that it's referencing an element with an id counter.
We can see that the element id is spelt wrong! However, when we correct it, the error remains. The error we're now getting is actually quite subtle and to do with the order in which the page is constructed. If we move our script tag to after the body (e.g. after all the elements have been made), that error will go away.
Now we get the following error. Note that the issue is still on line 4! At this point you might be getting a bit depressed, but a new error normally fixed the last one, so you should actually be really pleased :)
For this one, we're going to google to get the correct syntax.
Now that's fixed, we're getting something very weird:
To find out what's going on, we're going to log the counter variable and see what's getting written to the element. This seems super mysterious -- we've never set the variable counter! What's happening here is that counter is initially undefined, so when we reference it in the code it gets set to what it should be being set equal to.
If we initialise the variable properly, it goes away. To make it look nice, we also prepend a string to the text we're adding.
Now that's all sorted, it's time to solve the mystery of where the divs are. We can't see them at all! If we click on the '#top-layer' element we can see that it's currently 0 height. We can also see that there's no style information in the sidebar! We can tell our css is loaded by changing the body colour, and that a height is specified for this element, so what gives?
Here we can see that instead of referencing the elements by id (with a '#'), they are addressed by a '.', which represents the class. (Agnes does this basically every time she makes a website). Changing the dots to hashes fixes the error.
Now we have an overlay but still no rabbit. When we look at the css for #bottom-layer, we can see it also has a height of zero. When we change that in the bottom layer, the CSS changes but we still can't see a rabbit!
Let's go back to the JS. We can add some logging to try and discover what's happening with our code:
The display is always none! How come? The reason is that we're using a single equals sign in the if statement. This sets the display value to one, rather than checking it. To correct the code, we use the '===' strict equality (for more info on strict and loose equality, e.g. '===' vs '==', see here).
Now, nothing happens! We can also see that there's nothing in the log. If we log the value of rabbitDiv.style.display, we can see that initially it's <empty string>. We can fix this by initialising this property.
We still can't see a rabbit though! Let's go back to looking at the CSS, this time at the background-img property. We can see that the image isn't loaded. This indicates that we can't find the file!
If we look at our folder, we can see that it's a png not a jpg. If we change the path in the CSS, we see the bunny!
However, the pink isn't overlaid. If we go back to the #top-layer element in the inspector, the browser will give us a clue why!
If we change the position value to absolute (more info on CSS layout here), we now get the overlay.
Archived Workshops
Notes and resources for workshops from the academic year 2023-24.
11/10/23: Unix Command Line Programming
Technician: Agnes
The 'command line' (AKA terminal on mac) is a way to interact with your computer using text. To do this workshop on a Windows computer, you will want to install a Unix-type command line (instead of the default Command Prompt), the one I recommend is Git Bash. On mac and linux you don't need anything new.
This workshop was based on the carpentries workshop on the Unix command line, which provides a thorough set of notes to work through. Other interesting links for command line resources include:
- Agnes' collection of interesting command line tools
- Melanie Hoff's Folder Poetry workshop
18/10/23: Intro to Git
Technician: Agnes
This workshop is to introduce git, using the Command Line. This isn't the only way to interact with git, and lots of people at the CCI also like to use Github Desktop. This workshop is based on the carpentries intro to git workshop. If you have a windows computer, you will want to install Git Bash.
25/10/23: 3D Sprinting
Technician: Chris
3D Sprinting! The fastest print wins... Learn the ins and outs of using Ultimaker Cura to slice 3D models finishing with a race to create the fastest printing cube possible. Bring a laptop and download the latest version of Ultimaker Cura here.
01/11/23: Blender for Beginners
Technician: Lieven
Blender is a super awesome, free and open source software for 3D modelling, sculpting, rendering, animation and more! Whether it is for creating game assets, installation sketches, motion / infographics, 3D scans, robotics, virtual production, fabrication or just having fun. This workshop uses the free Blender software: on the CCI MacBooks you can use 'UAL Self Service' to install it, or 'Zenworks' on the CCI Windows PC's. A three-button mouse is definitely recommended, but not strictly required.
08/11/2023: Electronics Concepts...
Technician: Agnes
How do you go from breadboard spaghetti to durable, reliable and re-usable electronics?
This week I’ll be talking about (and demonstrating) a range of electronics design and fabrication techniques, looking at different steps to take your prototype boards to the next level, whatever level you are working at.
15/11/2023: 3D scanning
Technician: Lieven
Using the 3d scanning equipment at the cci! this is a great way to use real-world objects in your 3d models, and will cover techniques including: Photogrammetry (on your phone!) our handheld & turntable 3D object scanners £20K LiDAR scanner 3D Gaussian Splatting please come to this workshop with an object you would like to scan!
29/11/2023: Data Processing in Python
Technician: Mayra
This workshop will cover the basics of loading data files into Python, and give an intro to the Matplotlib and Pandas libraries, and explore common issues encountered in using these tools.
Watch the workshop again - Sorry Mayra forgot to put on the Microphone!
14/02/2024 Putting work on the web
Looking at a range of different ways to deploy and host websites, use custom domain names, and set up servers. Talking about both web technologies, and different approaches to hosting.
17/04/2024 Debugging Code
Your code is broken but you don’t know why! What gives? The internet won’t help?? What’s a console? A breakpoint?!
This session covers the philosophy and practice of debugging, across a range of different languages and tools. We work through a series of practical examples contained in this repository. Learning to debug is pretty much the essential skill of learning to write code -- nobody writes code without bugs in it, and the skill of programming is knowing how to recognise, diagnose and fix things when they don't work.
A great reading that sums up a lot of the ideas in this workshop is Eric Lippert's How to debug small programs. It gives a nice overview of the steps and frame of mind needed to debug code.
JS example walkthrough
For the JS example, we will use this sample website from the examples repository. We want to open the folder (we will need to edit the HTML, CSS and JS files) in a code editor. We will be using the browser's debugging tools to fix this code, so also either open the html page in your browser, or use the VSCode 'launch' button to serve the files.
When we load this in the browser we can see that the title (which describes the page) doesn't match what we can see. No rabbit is flashing! Where's the pink overlay? The counter doesn't work!
First of all, we want to check that all our files are included properly. This is a common issue in making websites when we are linking multiple things together! We add in a console.log statement to the JS to check if it's getting called at all... it's not!
There's a bunch of issues with this line! mian.js is a misspelling (we change it to main.js), and we want to use src rather than href to link the file. This second error is more subtle, and found out by googling.
We also realise we haven't linked the CSS file at all!
before:
after:
That's all fine, but it's still not working! Now, we can see we have an error. It's telling us our element is null.
The error is telling us the issue is on line 4, so let's take a look at what's there. We can see that it's referencing an element with an id counter.
We can see that the element id is spelt wrong! However, when we correct it, the error remains. The error we're now getting is actually quite subtle and to do with the order in which the page is constructed. If we move our script tag to after the body (e.g. after all the elements have been made), that error will go away.
Now we get the following error. Note that the issue is still on line 4! At this point you might be getting a bit depressed, but a new error normally fixed the last one, so you should actually be really pleased :)
For this one, we're going to google to get the correct syntax.
Now that's fixed, we're getting something very weird:
To find out what's going on, we're going to log the counter variable and see what's getting written to the element. This seems super mysterious -- we've never set the variable counter! What's happening here is that counter is initially undefined, so when we reference it in the code it gets set to what it should be being set equal to.
If we initialise the variable properly, it goes away. To make it look nice, we also prepend a string to the text we're adding.
Now that's all sorted, it's time to solve the mystery of where the divs are. We can't see them at all! If we click on the '#top-layer' element we can see that it's currently 0 height. We can also see that there's no style information in the sidebar! We can tell our css is loaded by changing the body colour, and that a height is specified for this element, so what gives?
Here we can see that instead of referencing the elements by id (with a '#'), they are addressed by a '.', which represents the class. (Agnes does this basically every time she makes a website). Changing the dots to hashes fixes the error.
Now we have an overlay but still no rabbit. When we look at the css for #bottom-layer, we can see it also has a height of zero. When we change that in the bottom layer, the CSS changes but we still can't see a rabbit!
Let's go back to the JS. We can add some logging to try and discover what's happening with our code:
The display is always none! How come? The reason is that we're using a single equals sign in the if statement. This sets the display value to one, rather than checking it. To correct the code, we use the '===' strict equality (for more info on strict and loose equality, e.g. '===' vs '==', see here).
Now, nothing happens! We can also see that there's nothing in the log. If we log the value of rabbitDiv.style.display, we can see that initially it's <empty string>. We can fix this by initialising this property.
We still can't see a rabbit though! Let's go back to looking at the CSS, this time at the background-img property. We can see that the image isn't loaded. This indicates that we can't find the file!
If we look at our folder, we can see that it's a png not a jpg. If we change the path in the CSS, we see the bunny!
However, the pink isn't overlaid. If we go back to the #top-layer element in the inspector, the browser will give us a clue why!
If we change the position value to absolute (more info on CSS layout here), we now get the overlay.
Summer 2024 Programme
For summer 2024, we are alternating workshops between Peckham Road and High Holborn. As ever, if you have questions, send them to Agnes.
Exploration Workshops
We are experimenting with running a series of more advanced 'exploration workshops' alongside the tech skills workshops, which use sound as a basis for developing creative coding and physical computing skills.
Exploration workshops run in Peckham Road, once every 2 weeks, on Monday nights. The sessions include regular meetings of the Circuit Diagram Reading Group (CDRG), a regular session that focusses on building synthesisers from scratch, and one-off sessions on skills including live coding and DIY radio. In all sessions, attendees will use computers and/or electronics to produce new sounds, exploring hardware and software for audio and performance.
Sessions involving hardware (e.g. the CDRG and radio workshops) are limited to 25 attendees, and require a signup to guarantee a space, as they require components and resources to take place. Other sessions, such as the live coding workshop, are more flexible.
