Christian Heilmann

You are currently browsing the archives for the General category.

Archive for the ‘General’ Category

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
color-scheme
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('edge.zip');
  https.get(downloadUrl, function(response) {
    response.pipe(file);
    response.on('end', async ()=>{
      await fs.createReadStream('edge.zip').pipe(unzipper.Extract({path: 'out/edge/'}));
      await fs.unlink('edge.zip', () => {} );
      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 Edge.zip 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.

What people think that web developers do vs. what we really do

Friday, May 27th, 2022

What people think web developers do:

Chart showing what people think web developers do

  • Code, deploy and use, with coding being the main task

What web developers really do:

Chart showing the real tasks

  • Coding
  • Require random 3rd party framework code
  • Updating Node/NPM
  • Try the last command again with `sudo`
  • Checking on mobile
  • Shaking fist towards Cupertino
  • Looking things up on the web
  • Pasting Stack Overflow solutions
  • Resize the browser/use emulation
  • Discover that a browser extension was the problem all along
  • Explain again that things can’t look the same everywhere
  • Add ARIA till everything is fine
  • Trace performance issues back to analytics/ad code
  • Convert content to usable formats
  • Adding/Removing console.log()
  • Invalidate caches
  • Using
  • Summon Imhotep using blood magic to help with a rendering bug

TL;DR: Learning to code isn’t the main skill you need as a developer

A teleprompter script for video recordings

Wednesday, May 25th, 2022

Currently I am recording a lot of videos and I found the fastest way to do them is to write the script and read it out to my camera and then record screencasts and edit them to fit the narration. In order to make sure I read from the top of the screen and reading into the camera I had to scroll my scripts a lot, which was annoying so I wrote a small teleprompter script to work around that problem.

You get a text box to write or paste your script and pressing the “show as prompt” button will display one paragraph at a time at the top of the screen in a large font. You can click the document or press the right arrow key to move forward and Escape to go back to editing.

The prompter script in action

If you go to https://codepo8.github.io/prompter/ you can see it in action and the source is also on GitHub. It is nothing fancy and a lot was written by GitHub CoPilot for me anyways.