Christian Heilmann

Author Archive

Web development is like assembling IKEA furniture

Friday, July 1st, 2022

IKEA instruction style illustration showing a person trying to assemble CSS, HTML and JavaScript and calling MDN for help

I’m currently putting things together for a new flat and I realised that there are a lot of similarities between assembling IKEA furniture and doing web development.

  • You get a huge bag of seemingly random parts and you should sort them before you start
  • Everything is standardised and uses building blocks
  • The manual is meant to be universally understandable and such needs some effort to grasp
  • Forcing something to fit means you’re doing it wrong
  • Leftover items mean you skipped a step
  • You can use power tools to speed things up but you are likely to break things if you do
  • Plan to assemble it right the first time, because taking it apart will mean you break it.
  • Some parts are impossible to put together on your own – partner with another person and get a second pair of eyes to prevent you from doing something stupid
  • Things look small and easy to handle when flat packed, but once you assembled them they take up a lot more space and are harder to move elsewhere

Taking screenshots of streaming video services using Browser Developer Tools

Tuesday, June 28th, 2022

One of the more overly strict features of video players in modern operating systems is that you can not use screen recording or screenshot tools to record content from streaming video platforms like Netflix or Disney+. Whilst I understand the need for DRM and preventing recording a streaming program, taking screenshots is a different matter. Often pointing out goofs in programs with a screenshot makes for good viral web content and people aren’t really likely to stitch a silent movie together from screenshots. Although I am sure some have tried.

Now, if you want to take a screenshot of a streaming service video, you can do that using the developer tools built into the browser.

Screenshot using the Elements tool and the node context menu.

In order to take a screenshot of a video, you can do this:

  • Pause the video and wait for the controls to vanish.
  • Open the Developer Tools (using F12).
  • Go to the Elements tool , active the Inspector and pick the video (it shows a coloured overlay).
  • Activate the context menu on the … of the highlighted node in the Elements tool and pick “capture node screenshot”

Context menu item on Element nodes 'Capture Node Screenshot'

And that’s it. Here’s how that looks as a screencast:

Taking a screenshot of a video using the Elements tool

Screenshot using Device Emulation

Alternatively, you can also use the Device Emulation Tool .

  • Pause the video and wait for the controls to vanish.
  • Open the Developer Tools (using F12).
  • Activate Device emulation
  • Activate the … menu and select “Capture Screenshot”

Capture screenshot item in the Device emulation

You can see this in action in the following screencast.

Taking a screenshot using the device emulation

The main difference to the other way is that this will take a screenshot with black borders around it.

But there is the browser extension “Superscreenshotwowtotallylegit” that does the same!

Now, I know that there are probably dozens of browser extensions that do the same thing, but I just don’t trust extensions that offer a “way around limitations of service X” as they are likely to be a front for malicious code or ad supported themselves. Why install something when your browser already has everything you need?

One line of CSS to add basic dark/light mode

Monday, June 20th, 2022

When you have your OS set up in dark mode seeing bright form elements is grating. By starting your style sheet with a single line of CSS, you can make sure that people using dark mode get dark form elements and backgrounds and those using light mode, light ones.

Codepen showing the difference the line of CSS makes - offering the page in a dark and light mode

You can see it in this codepen

See the Pen
by Christian Heilmann (@codepo8)
on CodePen.

You can also use the browser developer tools to simulate the different modes to see the difference.

Emulating different modes in browser developer tools

Read more about color-scheme on the MDN web docs.

GitHub Copilot explaining code and translating it from one language to another

Tuesday, June 7th, 2022

GitHub Copilot is already the dog’s bollocks, but I just installed the GitHub Labs extension and my jaw is still open.

Code explanation

This one allows you to highlight a piece of code and get explanations of what it does:

Screencast showing the explanation feature in action

For example:

async function downloadZipFile(downloadUrl) {
  await fs.remove('out/edge');
  const file = fs.createWriteStream('');
  https.get(downloadUrl, function(response) {
    response.on('end', async ()=>{
      await fs.createReadStream('').pipe(unzipper.Extract({path: 'out/edge/'}));
      await fs.unlink('', () => {} );
      const outdir = path.join(__dirname, 'out', 'edge');
      console.log(`Edge files extracted to: ${outdir}`);

Turns into:

  1. We first delete the ‘out/edge’ folder.
  2. We downoad the file from the GitHub release page.
  3. We unzip the Edge zip file to the ‘out/edge’ folder.
  4. We print a message to the console.

Code translation

You can also highlight a piece of code and it gets translated to another language. For example, JavaScript to PHP.

Screencast of GitHub Copilot translating JavaScript to PHP

I am so looking forward to where this is all going!

Do we have a lack of developers or a false assumption what the job is?

Tuesday, May 31st, 2022

Worker drilling a hole into a metal bar

Last week I was at build Europe and talked to a lot of people about the developer market. The general consensus was that there is a huge lack of developers to hire. That there is not enough talent. When I poked further and asked about how people assess talent, it boiled down to people having the right degrees. We are desperate to have more computer scientists.

But do we really need computer scientists? I’m not saying a solid foundation in computing isn’t great and there are for sure a lot of tasks that need experts. But I also see that the down-to-the-metal work is a tiny percentage of the market. People who build web sites or apps are hardly ever starting from scratch.

Instead we build using packages of other people, frameworks to fail fast and re-iterate, reusable components and build systems. None of these are taught in schools in universities for the main reason that they are short-lived and constantly evolving. What stack a company uses changes over time and depending on the project. How we apply the stack is decided by the lead engineers and architects in the company.

Considering that we – for better or worse – build on the work of others aren’t the people we really look for another skillset than computer scientists? We need flexible implementors, people who can learn a new environment quickly and assess the quality of components they use. We hardly ever get the chance or find the need to write code from scratch. Digital librarians, so to say. A good librarian doesn’t know the content of all the books in the library but where to look to find the right information.

The quality of people like these is harder to assess, for sure. But a diploma also doesn’t mean people are effective developers either. Being someome without a degree myself I always loved that our market is accessible to many people. Maybe that should be a thing we should strive to celebrate and embrace more in our search for new people.

Retention of people in our market is terrible. By the time you are used to how a colleague ticks, they are likely to leave. Often the reason is that we hire programmers to build products using off-the-shelf components. No wonder they get bored.

Maybe we can turn that around by training people on the job better and lower the barrier to entry instead.