Debug/Inspect z-index stacking with the “CSS Stacking Context Inspector” DevTools extension

The Stacking Contexts Inspector is a DevTools extension for Google Chrome that allows you to analyse the stacking contexts available on a webpage. This extension will add a new panel to the DevTools and a new sidebar on the elements panel.

Handy for when you’re having stacking issues.

CSS Stacking Context Inspector →
Stacking Contexts Inspector →

☝️ If you’re running “Edgium”, you can use it’s built-in 3D View to visualize the stacking contexts.

Hat tip, Josh!

Visual Studio Code “Custom Editors”

An exciting new feature that shipped with Visual Studio Code 1.44 is support for Custom Editors.

Custom editors let extensions provide custom editing experiences using HTML, CSS, and JavaScript in place of VS Code’s normal text based editor. Custom editors support both text based files and binary files, and enable some neat new scenarios such as wysiwyg editors, previews, and even image editors!

The true power behind Custom Editors is the fact that these editors have both read and write support, and offer way more than simply “an alternate view of a certain file type”. Changes in the original source file are immediately reflected in the custom editor, and vice versa.

I’m quite excited for the Custom Text Editors feature, as it opens up a ton of possibilities. Here’s a few examples the docs hint at:

  • Previewing assets, such as shaders or 3D models, directly in VS Code.
  • Creating WYSIWYG editors for languages such as Markdown or XAML.
  • Offering alternative visual renderings for data files such as CSV or JSON or XML.
  • Building fully customizable editing experiences text files.


An example editor is vscode-asciiflow2, a tool to easily draw ASCII diagrams. Thanks to the Custom Editor API it can be used directly inside of Visual Studio Code


To get started with creating your own Custom Editor, be sure to check this video:

Custom Editor API →
Custom Editor Examples →

💁‍♂️ For a project I’m working on I’ve created a “Pump Configurator” in React. It allows a user to visually define the tanks and pumps layout of a Petrol Station (see video below). The generated configuration is stored as JSON. If we wanted, we could use the Custom Editors API to bring this editor into VS Code.

Chrome Extension Webpack Boilerplate

If you ever want to create a Chrome Extension, this repo might come in handy:

A basic foundation boilerplate for rich Chrome Extensions using Webpack to help you write modular and modern Javascript code, load CSS easily and automatic reload the browser on code changes.

Chrome Extension Webpack Boilerplate →

GitLens – Git Supercharged Extension for Visual Studio Code

GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.

Just installed it and must say it’s really nice. Here’s an introductory video walking you through the extension:

GitLens — Git Supercharged →
GitLens on the Visual Studio Marketplace →

Visual Studio Code: Visually Hide Secrets in Environment Files with Cloak

Sparked by an idea by Wes Bos, John Papa has created and released a first version of Cloak:

Cloak hides/shows your secrets in environment files, to avoid accidentally sharing them with everyone who sees your screen.

Handy when doing screencasts and the like.

Do note that it only visually hides the secrets, no changes are made. Only ENV files are supported for now.

Visual Studio Marketplace: Cloak →

GitHub Toggle Chrome Extension – Quickly toggle between a GitHub Repo and its GitHub Pages by the click of a button.

Last week Christian Heilmann (codepo8) released a handy bookmarklet that lets on switch between the GitHub Pages URL of a repo hosted on GitHub and the repo contents itself. This afternoon I took the liberty of transforming it into a Chrome Extension, mainly as an exercise to myself.

The extension adds a small button which becomes active whenever you are visiting a * or * domain. Upon clicking the button you toggle between the two URLs.

To create this plugin I started out with the core of Christian’s script and decorated the required Chrome Extension stuff around it. A few notes on the latter though:

GitHub Toggle Chrome Extension on the Chrome Web Store →
GitHub Toggle Chrome Extension Source (GitHub) →

🙇‍♂️ Manipulating Chrome through a JavaScript API reminds me of controlling Photoshop using JavaScript which has excellent scripting capabilities … using its Scripting API you can create a script for Photoshop to cut up a large image into tiles for use with Google Maps or a script that allows one to export/import translations from a Photoshop file.

php-timecop – A PHP extension providing “time travel” capabilities

Now this looks handy, especially when you’re writing/testing code that’s dependent on the system’s time:

php-timecop is a PHP extension providing “time travel” and “time freezing” capabilities

  • Freeze time to a specific point.
  • Travel back to a specific point in time, but allow time to continue moving forward from there.
  • Scale time by a given scaling factor that will cause time to move at an accelerated pace.
  • Override time-related PHP stock functions and methods, which supports freezing or traveling time.
var_dump(date("Y-m-d")); // todays date
var_dump(gmdate("Y-m-d H:i:s")); // string(19) "1970-01-01 00:00:00"
var_dump(strtotime("+100000 sec")); // int(100000)

Stub PHP date() and the crew with php-timecop

React Food Truck – A curated set of Visual Studio Code extensions for React Developers

Burke Holland:

I spent a lot of time combing the depths of the VS Code Extension Marketplace to find the tastiest and most delicious extensions that are guaranteed to make your life as a React developer 129% more enjoyable. All you have to do is install the React Food Truck extension and it will automatically install my handpicked extension smorgasbord.

Introducing React Food Truck →
React Food Truck →

Improve the GitHub Website with “Refined GitHub”

Refined GitHub is a browser extension for Chrome and Firefox “that simplifies the GitHub interface and adds useful features”. The nice list of additions includes URL Condensing (pictured above) and Markdown preservation when copying comments (pictured below).

The extension is also able to add a few extra views, filters, and links (such as linking to issue references from the code view); but what I even like most of all is Refined GitHub’s goal:

Our hope is that GitHub will notice and implement some of these much needed improvements. So if you like any of these improvements, please email GitHub support about doing it.

The goal of Refined GitHub is to make itself obsolete.

Refined GitHub →
What’s new in Refined GitHub →