Latest articles https://simonblackbourn.net Kirby Thu, 25 Jul 2019 00:00:00 +0000 Posts by Simon Blackbourn A list of my VS Code extensions https://simonblackbourn.net/blog/vscode-extensions blog/vscode-extensions Thu, 25 Jul 2019 00:00:00 +0000 Shock, horror - I voluntarily use a Microsoft product, I love it, and it's even open source.

There's a huge ecosystem of VS Code extensions available, and I've found that as a WordPress/PHP developer I do need several of these for essential functionality such as code completion, debugging, etc. (VS Code was initially built with JavaScript developers in mind). There are also loads that add functionality I never knew I needed but now can't imagine how I lived without.

So here's a list of my current must-have extensions, in alphabetical order. I'll try to keep this list updated as I add/remove extensions.

And please do let me know via Twitter if I've missed any that you love.

(Props to my brother John for encouraging me to switch, and for publishing his list of extensions, many of which are in my list too).

Better Align

I'm very nerdy about having my equals signs all neatly aligned. This is by far the best extension I've tried, because you don't have to select all the lines you wish to align. You simply put the cursor anywhere on one line within a group and it figures it all out for you.

Screenshot of some PHP code showing aligned equals signs

Bookmarks

I use bookmarks a lot, especially for reminding myself where I've got to when I finish at the end of the day. With this extension you can create bookmarks anywhere in your project, then quickly navigate through them via the keyboard, or view them in the sidebar.

Bracket Pair Colorizer

This extension has changed my life! I've always struggled with seeing where the start and end of logical sections of code are, especially when scrolling through long files. By using bright, distinct colours, this extension makes it a doddle to see exactly where each set of brackets starts and ends. It's also great when you have nested brackets, for example in if statements. And it makes me happy to see my code looking so colourful!

Screenshot of some PHP code showing coloured brackets

Dash

Dash is a documentation app that works offline. You can look up functions for PHP, WordPress, JavaScript, and pretty much every other language imaginable. With this extension, you put the cursor anywhere on a function name, hit the Ctrl-H shortcut, and the definition is opened up in Dash.

Dracula Official

My favourite VS Code theme - a nice dark background, but with bold, bright colours that make code super easy to read.

ESLint

Integrates the ESLint library, so you don't make silly mistakes in your painfully cool modern JavaScript.

HTML Tag Wrap

Super handy when writing front-end HTML - select any text, hit Alt-W, and it wraps the selected text in the HTML tag of your choosing.

Intellisense for Class Names in HTML

Autocompletion of HTML element class names based on the definitions in your workspace.

Markdown Preview Github Styling

Makes the VS Code built-in Markdown preview pane use the same styles as GitHub.

Screenshot of VS Code showing Github-style markdown preview

PHP Debug

Allows you to use XDebug with PHP. Absolutely essential unless for some bizarre reason you love to type out then later delete var_dump and error_log over and over.

PHP DocBlocker

Put the cursor on the line before a function or class, type /** then hit Tab, and it creates a DocBlock comment intelligently prefilled that you can tab through to complete.

PHP Intelephense

Absolutely essential. Code completion, parameter help, go to definition, diagnostics, etc, etc.

Polacode

Creates a nifty PNG image from selected lines of code.

SCSS Intellisense

Sass code completion, navigation and help.

SVG Viewer

Does what it says on the tin.

VS Code Icons

A much nicer icon set for the sidebar file explorer than the default ones.

]]>
Styling selected text with CSS https://simonblackbourn.net/blog/color-selected-text-with-css blog/color-selected-text-with-css Thu, 18 Apr 2019 00:00:00 +0000 Sometimes it's the little touches that make a design feel truly finished, that make visitors to your website feel that you've paid attention to every last detail. Styling selected text with CSS is one of those things.

By default, most browsers highlight selected text with a blue background, which very often clashes with the other colours used on the website. Here's a screenshot from my own company website:

Screenshot of a website showing some highlighted text with the default blue background

The ::selection pseudo-element

Using the ::selection pseudo-element in CSS allows us to target selected text. Most commonly, I change the background colour and font colour, but you could change the case, font weight, etc. Personally, I prefer to keep it simple and not overdo things.

::selection {
    background-color: #f7d500;
}

Here's the result, showing the selected text now matching the primary branding colour:

Screenshot of a website showing highlighted text styled using CSS with a background colour that matches the primary branding colour

See it in action

Select any text here on this website, or on my company website as shown in the example above, to see this in action.

Browser support

Browser support for the ::selection pseudo-element is extremely good (even IE9 supports it), with Safari on iOS being the only major exception. This doesn't matter however, as the rule is ignored by any browser that doesn't understand it.

]]>
Highlighting images with missing alt tags https://simonblackbourn.net/blog/highlight-images-missing-alt-attribute blog/highlight-images-missing-alt-attribute Tue, 10 Jul 2018 00:00:00 +0000 Every image on your website should have an alt tag (pedantically speaking, it's actually an alt attribute, but it's widely known as alt tag).

Here's an example:

<img src="sunset.jpg" alt="Sunset over Dartmoor">

Why are alt tags needed?

Alt tags are a crucial accessibility feature used by screen readers to describe images to visually impaired and blind users. Without alt tags, those people will not know what your images are. They will have a substantially degraded experience of using your website, so may not return.

Missing alt tags will cause your website to fail various accessibility standards, such as WCAG (Web Content Accessibility Guidelines). In many countries, if your website is in certain sectors (e.g. government or public sector), meeting accessibility standards is a legal requirement.

What about decorative images?

If an image is purely for decorative purposes, it has no editorial purpose whatsoever, then the alt text is not needed. However, the alt tag must still be present, but you should set it to be empty:

<img src="image.png" alt="">

Using CSS to highlight missing alt tags

Add the following one line of CSS (which utilises the very handy :not selector) to your website's stylesheet. It highlights all images without alt tags by adding a bright red, dashed border to them:

img:not([alt]) {border: 4px red dashed !important;}

Bear in mind that if you use this on your live website all your visitors will see it!

An image with a dashed red border

WordPress plugin

When adding images to posts and pages in WordPress, it's all to easy to forget to add the alt text, so I've written a WordPress plugin to highlight images with no alt tag. The highlight is only shown to logged in administrators, your regular visitors won't see anything, so you can safely use it on your live website.

Download the WordPress plugin

The plugin is on GitHub at the moment, I'll submit it to the WordPress plugin repository and update this post with the link when it's available from there.

Other tools

My favourite tool for accessibility testing is Pa11y. It's a command line tool that gives all sorts of useful information about the accessibility of your website, including missing alt tags, text contrast, missing input field labels, and lots more. You pass in your website URL and it outputs a list of warnings:

pa11y https://example.org

Axe does a very similar job, it's a question of personal preference.

]]>
Setting the title bar colour in VS Code https://simonblackbourn.net/blog/vs-code-title-bar-colour-macos blog/vs-code-title-bar-colour-macos Mon, 25 Jun 2018 00:00:00 +0000 Workspaces are an incredibly useful feature of VS Code, especially if you are working on multiple projects. A workspace can contain one or more root folders that contain your project's code; VS Code will remember the state of the workspace on startup, such as which files you had open, the position of the cursor, etc.; and you can enable and disable extensions on a per-workspace basis.

The problem

It can be difficult to tell at a quick glance which workspace you've currently got open. And if you have multiple windows open, each for a different workspace, it's hard to differentiate them.

In the screenshot below, the only thing that tells us which workspace we're in is the name appended to the filename in the title bar.

Screenshot of a VS Code workspace with the default uncoloured title bar

The solution

VS Code has a couple of settings that allow you to specify the title bar background and foreground colours on a per-workspace basis, so that each workspace is visually distinct. By using a different colour for each of your workspaces, you can instantly see which one you're currently in.

Here's the same workspace as above, but with a coloured title bar:

Screenshot of a VS Code workspace with a bright red title bar

How-to

The title bar colours are defined in the workspace settings (which override your user settings). Open up the command palette and find Open Workspace Settings (or type ⌘, then click the Workspace Settings tab).

You can see your workspace folder path(s) in the folders option, then a settings option (which may or may not be empty). Within the settings section, add a workbench.colorCustomizations option with four sub-options like this:

{
    "folders": [
        {
            "path": "/path/to/my/workspace/folder"
        }
    ],
    "settings": {
        "workbench.colorCustomizations": {
            "titleBar.activeBackground": "#d12229",
            "titleBar.activeForeground": "#ffffff",
            "titleBar.inactiveBackground": "#811519",
            "titleBar.inactiveForeground": "#cccccc"
        }
    }
}

View on Gist

I tend to use a bold colour taken from the theme of the website I am working on for the active background, with either white or dark grey for the text colour, whichever is most readable. VS Code provides a handy colour picker when you click on a hex colour code, so adusting the colours is easy.

The inactive colours are used when the VS Code window is not currently focused. For these I darken both colours slightly, just enough to show it's unfocused but still recognisable as that workspace. If you are happy with the same colours for active and inactive, you can delete the two inactive options.

Customising other elements

There are many other elements of the VS Code interface you can customise in addition to the title bar. See the official documentation page for a complete list.

]]>