Serg Hospodarets Blog

This is the first of articles where I want to describe how to migrate/extend your web app to being a Progressive Web App

Main points of a Progressive Web App are:

• it’s secure (uses HTTPS)
• app install banners give users an easy way to add the app to their home screen/launchpad
• service worker makes the app load nearly instantly and work offline
• application is responsive (phones, tablets and laptops)
• ability to send users web push notifications
• smooth and great user experience

Let’s start from the first item and add security (HTTPS).

In my previous article CSS custom properties (variables) In-Depth I described CSS custom properties (variables) and variations of their usages.

If you started thinking to move from CSS preprocessors to plain CSS after that- next your question might be: “what about mixins”?

And voilà- there is not only an editor’s draft- https://tabatkins.github.io/specs/css-apply-rule/

but even working implementation in Chrome- https://www.chromestatus.com/feature/5753701012602880

Before continuing reading, make sure you understand the terms of CSS custom properties and CSS mixins.

I thought to start from explaining the purpose of having variables in CSS but actually popularity of CSS pre/postprocessors already did that.

Couple examples:

• color variables for branding
• consistent components properties (layout, positioning etc.)
• avoid code duplications

Yes, of course, you still can search and find/replace all you need manually in your codebase but it’s like not having variables in JS- pain. Having dynamic and scoped CSS variables provides even more abilities for your experiments and applications- you can read, set and update them on the fly! Also you can prevent code duplications around your codebase as recently Webkit guys did in their Web Inspector.

And finally you have an interface to easily pass data from CSS to JS (for example media breakpoint values).

Here is the short-list of features CSS properties have:

• they are dynamic and can be changed at runtime
• they are easily to read/write from JS
• they inherit, cascade and have scopes

So let’s dive deeper what CSS properties are and how to use them.

After a long time using usual the Mac terminal I came to understanding that more advanced tool is needed for many common aspects of daily work.

For example: some commands autosuggestions which will remember your previous commands and be smart enough to repeat them depending on a situation. Another requirement from a UI-lover part of my soul- good syntax highlighting.

The best, if such tool wouldn’t require much time for setup and configuration to start working out of the box.

After some research I settled on 2 options: fish shell and Z shell (zsh). Either are worth and have their advantages/disadvantages.

I decided to try Fish Shell as one of my biggest requirements installation without need of long configuration. It’s really something Fish was designed for.