Christian Heilmann

Author Archive

Tabs vs. Spaces show on Developer tools

Friday, April 16th, 2021

If you got 25 minutes to spare, here’s a great episode of Matt Wojciakowski ’s “Tabs vs. Spaces” show where I talk together with my colleagues Erica Draud and Rachel Simone Weil about Edge Developer tools, accessibility, PWAs and what we’re doing to make it easier for beginners to get started.

Quick VS Code tip: Automatically add image width and height to images

Wednesday, April 14th, 2021

Command Menu in VS Code to trigger the Emmet image size script

One thing that keeps amazing me about Visual Studio Code is how much it helps you automate annoying tasks when you write code. For example, if you add an img tag to the document you need to know the src and find out the width and height to avoid reflow issues when the image was loaded. You also need to add an alt attribute either to provide an alternative text or to prevent assistive technology to read out the src attribute instead.

You can do this by following these steps:

  • Start the img tag
  • As soon as you write src=” VS Code gives you an autocomplete for local images.
  • Close the img tag (this is important)
  • Use the Command Palette” (CMD + Shift + P on Mac or Ctrl + Shift + P on Linux / Windows) and type “size” to trigger the Emmet size script that automatically adds width and height.

You can see it in this screencast:

Automatic addition of width and height on images in VS Code using emmet

My setup also warns me when I have images without any alt attribute. It puts a wavy line under any element with a problem like the img tag and shows the error right next to it. I am using two extensions for this: webhint for VS Code and Error Lens.

Quick Tip: Save Twitter GIFs as MP4 without any add-on or service

Monday, April 12th, 2021

When you want to save a GIF from Twitter, the interface plays a cruel joke on you. If you context-click the GIF you get a menu that states “Copy GIF address”.

Copy GIF address context menu on Twitter

All it does though is copy a link to the tweet with the GIF in it, which is pretty pointless. Under the hood Twitter also converts any GIF to MP4 because it is a much more effective file format.

Knowing this, the easiest way to save the GIF is to open DevTools, go to the Console and type/copy:

window.open(document.querySelector('video').src)

This opens the GIF as a video in a new tab and you can save it there as shown in this screencast:

saving a GIF from Twitter

Of course there are a myriad of web services, Twitter bots and other things that do the same for you and also in more advanced fashion, but I think it is always a very good idea to not trust any service that offers to save protected content from the web for you. I’ve seen far too many malware browser extensions in that arena.

Quick Visual Studio Code tip: Expand/Shrink selection

Tuesday, March 23rd, 2021

The “expand/shrink” selection keyboard shortcut in Visual Studio Code βŒƒβ‡§βŒ˜→ / ← isn’t the easiest to remember, but ridiculously powerful. It recognises code block boundaries and selects accordingly!

Expand and shrink a selection in Visual Studio Code

Batch cropping of screenshots on MacOS

Wednesday, March 17th, 2021

I’m currently upgrading the Console documentation for Microsoft Edge and I needed to create a lot of screenshots for it. I wanted to make sure that they all are the same size, so I fixed a browser window to a certain size and instead of trying to screenshot a part of the screen, I thought it wiser to take full window screenshots. You do this by pressing CMD + Shift + 4, move your mouse on the window you want to take a screenshot of and press Space to save it to your Desktop.

MacOS by default ads a gorgeous drop shadow on any windows and puts some padding around it.

Screenshot of browser with chrome, dropshadow and padding around it

You can get rid of that on the command line or by selecting an even more complex keyboard combination.

However, I also wanted to get rid of the browser Chrome. The final result should be something like this.

cropped screenshot

So I tried to find a way to crop all the screenshots I have taken in a batch process using Automator. Turns out it can crop, but only from the centre. What I needed was a way to say “crop a rectangle of sx by sy from the image starting at x and y”. The solution was the Swiss army knife of images, ImageMagick. After installing it (via Homebrew), I was able to crop part of an image and create a new one on Terminal using the following syntax (with the bits in {} being the values):

convert sourceimage.png -crop {width}x{height}+{left}+{top} resultimage.png

I created a folder called “nochrome” on my Desktop and wrote this small shell script to batch convert all of them:

for filename in *.png; do\
  convert $filename -crop 1842x918+123+234 "nochrome/$filename"
  echo "$filename done"
done

There are probably easier ways, but that did the trick for me.