Service Workers

A List Apart runs an excellent article “Going Offline“.  In it, among other things, there’s one of the simplest explanations of the Service Workers technology that I’ve seen so far:

A service worker is like a cookie. Cookies are downloaded from a web server and installed in a browser. You can go to your browser’s preferences and see all the cookies that have been installed by sites you’ve visited. Cookies are very small and very simple little text files. A website can set a cookie, read a cookie, and update a cookie. A service worker script is much more powerful. It contains a set of instructions that the browser will consult before making any requests to the site that originally installed the service worker.

A service worker is like a virus. When you visit a website, a service worker is surreptitiously installed in the background. Afterwards, whenever you make a request to that website, your request will be intercepted by the service worker first. Your computer or phone becomes the home for service workers lurking in wait, ready to perform man-in-the-middle attacks. Don’t panic. A service worker can only handle requests for the site that originally installed that service worker. When you write a service worker, you can only use it to perform man-in-the-middle attacks on your own website.

A service worker is like a toolbox. By itself, a service worker can’t do much. But it allows you to access some very powerful browser features, like the Fetch API, the Cache API, and even notifications. API stands for Application Programming Interface, which sounds very fancy but really just means a tool that you can program however you want. You can write a set of instructions in your service worker to take advantage of these tools. Most of your instructions will be written as “when this happens, reach for this tool.” If, for instance, the network connection fails, you can instruct the service worker to retrieve a backup file using the Cache API.

How JavaScript works: the mechanics of Web Push Notifications

“How JavaScript works” is a series of articles on SessionStack, describing some of the lesser known bits and pieces of JavaScript.  One particular chapter that caught my attention is “The Mechanics of Web Push Notifications“.

Push and notification are two different APIs.

  • Push — it is invoked when the server supplies information to a Service Worker.
  • Notification — this is the action of a Service Worker or a script in a web app that shows information to the user.

Lesser known CSS quirks & advanced tips

Lesser known CSS quirks & advanced tips” is a collection of some really weird CSS features and behaviors.  These are good to know, as sometimes they can shed some light on strange results or help with implementation of a particular design feature, where no other options are applicable.

On browser’s User-Agent string

Crooked Style Sheets

Crooked Style Sheets is a proof of concept for website tracking/analytics using only CSS and without Javascript.

What can we do with this method?

We can gather some basic information about the user, like the screen resolution (when the browser is maximized) and which browser (or engine) is used. Further we can detect if a user opens a link or hovers with the mouse over an element. This can be used to track which (external) links a user visits and using the hover method. It should be even possible to track how the user moved their mouse (using an invisible table of fields in the page background). However, using my method it’s only possible to track when a user visits a link the first time or hovers over a field the first time. Maybe it’s possible to modify the method so that it is possible to track every click.

Furthermore it is possible to detect if a user has installed a specific font. Based on this information it should be possible to detect, which OS a users uses (because different operating systems ship different fonts, e.g. “Calibri” on Windows).

Firefox : The Quantum Era

Entering the Quantum Era—How Firefox got fast again and where it’s going to get faster” is an insightful article showcasing the big changes happening with the Firefox browser.  It seems, the pendulum is swinging back towards the browser that almost became irrelevant.  I think that competition is good for everyone, and it has proven much more so in the end-user applications.  New ideas, new approaches, new technologies, and plenty of stimuli for the Google Chrome and other browser teams to respond with something even better.

Markdown Here – a browser extension for quick Markdown

Markdown Here Screenshot.

Markdown Here is a browser extension (for all sorts of browsers too) that enables quick and easy rendering of the Markdown text into the HTML.  This works well in a number of scenarios – Gmail email composition, WordPress post editing, and a few other.

Clockwork – PHP developer tools integration for Google Chrome

Clockwork is a PHP library and a Google Chrome extension that work together to provide a new tab in the Google Chrome DevTools for PHP developers.  The tab contains all sorts of useful information such as variable values, application tracing, timing, and more.

Google Chrome color profile

My good friend and colleague Michael Stepanov has been recently annoyed by some weird color offsets on his external screen in Fedora 26.  Turns out, it wasn’t the external monitor, video card, or cable issue.  The problem was with the new Google Chrome and its choice of the color profile.  The solution was found in this Reddit thread:

  • Open new tab and type there chrome://flags
  • Find option “Force color profile” and set it to “sRGB”
  • Restart Chrome and enjoy blue as blue 🙂