Getting your VS Code extension ready for the Web.
A few years ago I developed Nightlight for Visual Studio Code that switches the color theme based on the time of day. By providing your GPS coordinates, you can use it to automatically switch to dark mode when the sun sets and switch to light mode when the sun rises.
Over the years VS Code has transformed into almost a de facto standard when it comes to (code) editing. With extensions, like Nighlight, you can basically transorm it into a full-fledged IDE. Since it has been largely built using Web technologies, it would’ve always been theoritically possible to have a version running in your browser. That day has now come, with vscode.dev and github.dev, you can use VS Code without having to install it.
Extensions also work, but not always right out the box. Some work has to be done. And, luckily, this summer a pull request for Nightlight came in. Someone did the research and made Nightlight ready to be built for the Web. Let me take you through the main tasks you’d have to perform in order to transform your regular extension into a Web extension.
1. Add Webpack
For building the VS Code extension for the Web. The build system relies on Webpack. Add it to your project:
npm install --save-dev webpack webpack-cli ts-loader
2. Add the browser entry point to the package.json
The package.json already has a main
entry. Next to that, you can add your browser entry point:
"browser": "./out/web/extension.js",
It points to the same file, only it is now also found in the /out/web/
directory.
3. Add two scripts
To be able to build the extension, add these two scripts to your package.json:
scripts: {
...
"compile-web": "webpack --mode production --devtool hidden-source-map",
"watch-web": "webpack --watch",
...
}
and then alter the vscode:prepublish script
"vscode:prepublish": "npm run compile && npm run compile-web",
4. Make necessary changes to your main file.
Nightlight did not require any changes, because it only uses API’s that are also available on the Web. If your extension uses different API’s, like the file system. It is good to go through this list of recommendations.
5. Create a webpack.config.js
VS Code uses WebPack to pack your complete extension into a single file that will be loaded by the browser. The webpack.config.js for Nightlight is close to the default provided in the docs.
6. Test your extension
There are three ways to now test your extension:
- Test normally using VS Code for the desktop, like you did before;
- Test it inside a browser running on localhost;
- Test it on vscode.dev.
I recommend to test all three cases, but at least option 1 and 2. For the second option, some additional configuration is required. First you’d have to install another package:
npm install --save-dev @vscode/test-web
And then add one more script to your package.json
scripts: {
...
"open-in-browser": "vscode-test-web --extensionDevelopmentPath=. ."
...
}
To trigger the Web version from VS Code you may want to add a new launch configuration to your launch.json:
{
"name": "Run Web Extension in VS Code",
"type": "pwa-extensionHost",
"debugWebWorkerHost": true,
"request": "launch",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}",
"--extensionDevelopmentKind=web"
],
"outFiles": [
"${workspaceFolder}/out/web/**/*.js"
],
"preLaunchTask": "npm: watch-web"
}
That should do it! If everything works as you’d expect, you can publish your extension and then install it in VS Code for the Web. Once you’re there, give Nightlight a spin.
To conclude, a quick tip: did you know that when you press dot (.
) when you’re viewing a GitHub repo, it automatically opens the repository in VS Code for the Web?!
BookBucket for Android.
BookBucket for iOS has been available for quite a while now and by popular request, earlier this year I started developing BookBucket for Android. I can now announce that it’s here! It’s packed with the same features as the iOS app, including the following
- Keep track of the books you’ve read and want to read
- Organize your books with lists
- Share lists with your friends and follow their lists
- Use the bar code scanner to quikly find information about a physical book
- Easily discover new books
- Add your personal notes to a book
- Synchronize your library between multiple devices
- Privacy by design. This means you don’t need to create an account, we do not store your personal information and don’t track your usage of the app.
Screenshots from the BookBucket app for Android
You can download BookBucket for free in the Google Play Store.
Follow your friends' book lists.
In the latest version of BookBucket I added a feature that allows you to organize your books into lists. Especially the superorganizers among us love to make lists of things. Use it in whatever way you like. You can be creative. Some people use it to organize books by genre, others use it to keep track of their favorites or to remember which books you have lent to someone.
Creating lists is one thing, but what really gets me excited is the fact that you now can share these lists with your friends and family. So for example I have created a list of the books recommended by BookBucket. When you open this link on your iPhone or iPad it automatically opens BookBucket and shows you the list. Click “follow” to add the list to your library. When the list is updated, you’ll automatically see the new books that were added. It’s an easy way to discover new books.
You can now try this feature yourself. Just download BookBucket (it’s free) and start creating and sharing your own lists. To get you started here’s a few lists you can start following:
BookBucket: your personal bookshelf on which you keep discovering new books.
The last couple of months I’ve been working in my spare time on a new app called BookBucket. I love reading books, both fiction and non-fiction. I also like to stay organized, so keeping track of the books I’ve read and the books I want to read is what I used to do in a simple note in my note taking app. As an app developer I always want to make things a little faster by automating it. For instance, if you look at the covers of some thrillers by a single author, they tend to look a lot alike. So I am often asking myself: have I read this one yet? This triggered me into thinking: what if I could scan the cover or barcode of the book and see if I had read it. Well, now there’s an app for that: BookBucket.
Baldacci is making my point with a similar cover for each book
BookBucket allows you to search for books by title, author and barcode using the device’s camera. The app shows you all kinds of information about the book. And, of course, for each book you can indicate if you’ve read it or want to read it. Rating the book and leaving a note allows you to look back at a book and know what your thoughts were while reading it.
The other problem I was facing was that it sometimes takes time to discover a new book. Therefore I am working on ways to discover new books based on the books you’ve been reading. Currently this is done by presenting you suggestions based on the book you are viewing. A warning: this may lead you in never ending rabbit hole, since you can easily navigate from one book to the next while when you keep discovering new additions for your reading list.
Please give BookBucket a go. It is still in development, so many feature to come. You can get it in the iOS App Store in the Netherlands. It’s free to use and you do not have to create an account to get started.
New website built with Jekyll.
I really needed to dust off this website, which is always a good reason to look for the best technology available to create a new one. I started with listing what I wanted the website to do. First and foremost, it had to be simple. Simple to create and simple to maintain. Otherwise, I would always feel like there’s a hurdle to add or change something. I wanted a place to portray the things that I create, like a portfolio, but also a place to write about the things I am learning. Since social media is in a downward spiral lately, I felt that a personal blog was the best way to go. And the last real requirement was that it should be fast. I think that too many websites tend to not pay attention to this last aspect, while it greatly improve the usability.
Static site generator
I found that a static site generator would fit all of my needs. For those who don’t know, a static site generator allows you to develop your website with dynamic elements such as variables, but before publishing, the generator will process it and create a static version of it. The static version consists of pure HTML, CSS and, optionally, Javascript. The advantage is that you don’t need a database and no server side code. Now, that’s only one part of the choice, the second part is: which one?
Making a choice
There are many different options when it comes to a static site generator. Popular ones are GatsbyJS, Hugo, Jekyll, Next.js, Nuxt and much more. After trying several, I went with Jekyll. Jekyll is simple, allows you to write posts in Markdown format, supports Liquid to create dynamic templates and has first class support for a blog. The fact that the output is simple HTML and CSS, makes it fast as well. More on that later.
The building blocks
Jekyll has several content building blocks. These include pages, posts and front matter. Pages are the main building block. These include the home page, about page, contact page, etc. Blog posts go into _posts
folder. Both pages and posts can be written in HTML, Markdown or even a combination of the two. In this case, I write the pages in HTML and the posts in Markdown. At the top of a page or post is the front matter. This is a YAML block with meta data for that file. It includes the title, applied layout (more on that later), post tags and permalink. You can also define your own variables. An example of front matter is shown below:
---
layout: post
title: "New website built with Jekyll"
date: 2020-03-01-09:20:00 +0100
categories: website
---
Structure
To structure your website you can define several layouts. Layouts can be seen as HTML templates that define where particular content goes. For instance I’ve defined a default.html
which includes the basic HTML for each page. There’s a page.html
, post.html
and a home.html
. Layouts have an inheritance structure. Each layout may contain several components, reusable elements. These are called includes. Examples of includes for this site are the header.html
, footer.html
and post.html
. The latter is included on both the home page and the post page.
Styling of your Jekyll website is typically done with SASS. I structured this in such a way that it matches the layouts and includes and generic styles go into a base SASS-file.
Dynamic content
Even though we’re talking about a static site generator, there’s some form of dynamic content. That is, not while browsing the site, but while generating it. Meaning you can define variables and data to be included in the content of the site. For instance, looking at the front matter above, you see a variable called title
. To use this inside your layout you can simply use {{ post.title }}
and the generator will replace it with the contents of the variable. Liquid, which is the template language being used, has a lot of possibilities, including loops, if-statements and filters.
Generating your website
While developing, Jekyll allows you to run a dev server equipped with live reload, which automatically refreshes the page when you make changes. Run jekyll serve -l
to start the dev server. And when you are ready for deployment, run jekyll build
and upload the contents of the _site
folder to your web server.
Performance
As is to be expected from a static generated site, the performance is great. The Lighthouse audit result speaks for itself.
A great developer experience
Overall I had a great experience developing my new website with Jekyll. It was easy to understand, fast to build and outputs exactly what I need: a fast and responsive website that is easy to maintain. Now I only have to do so…
Nightlight, a VS Code extension.
I’ve created an extension for Visual Studio Code that switches the color theme based on the time of day. By providing your GPS coordinates, you can use it to automatically switch to dark mode when the sun sets and switch to light mode when the sun rises. You can get it at the Visual Studio Marketplace.
Features
Nightlight has the following features:
- Set a night and day theme, for instance Night Owl at night and Atom One Light when it’s daytime.
- Switch themes when the sun rises or sets.
- Switch themes on predefined times.
- Switch themes manually by using your own shortcut (CTRL+ALT+N by default).
- Switch icon themes along with the color theme (since v1.3).
Configuration
Nightlight can be configured by setting the following settings:
nightlight.nightTheme
: The theme to be displayed when it’s nightnightlight.nightIconTheme
: The icon theme to be displayed when it’s night (default = your current icon theme)nightlight.dayTheme
: The theme to be displayed when it’s daynightlight.dayIconTheme
: The icon theme to be displayed when it’s day (default = your current icon theme)nightlight.dayTimeStart
: The time (format HH:mm) at which day time starts (if no GPS coordinates are configured)nightlight.dayTimeEnd
: The time (format HH:mm) at which day time ends (if no GPS coordinates are configured)nightlight.gpsLong
: The GPS longitude coordinate. This is used to determine the sunrise and sunset locally on your device.nightlight.gpsLat
: The GPS latitude coordinate. This is used to determine the sunrise and sunset locally on your device.
You can download the extension here and find the source code on GitHub.