Front-end Dev Meeting — May 2017
At Q42 we organize internal meetings on different spectra of (web) development. Meetups about iOS, RX, accessibility and also about front-end development. This allows knowledge to spread more quickly throughout our teams. We share a summary of each front-end development meeting publicly.
This time we have a broad selection of subjects, and even a short essay from one of the other meeting groups.
CSS variables have recently shipped in all major browsers, and now is a great time to start using them. While we’ve had variables in CSS for quite some time using preprocessors, having variables in native CSS has some advantages. One of them being that native variables are dynamic. Let me explain that with an example. Wait, I should explain the basic syntax, right?
Here you see three new things, the first one is the
:root pseudo class, this is like targeting
html. You could use
html for this, but
:root provides a nice isolation for defining global variables. Next you see a property starting with two dashes, that’s a custom property. Custom properties can have any valid CSS value like an int (10), dimension (10px), keyword (left) or string (“content”). And lastly the value of that custom property is assigned to a regular property by using the
var(--variable-name) value method.
On to the example:
See that gutter variable? That variable changes values based on a media query. So, by declaring your responsive behaviour in one place, all styles adjust accordingly. Eat that Sass!
Working example of the previous example: codepen.io/guidobouman/pen/KqPjyp
Building progressive web-apps can be a very interesting way to provide your users with a near-native app experience. However, the web-apps had one major drawback compared to their native counterparts; Developers were unable to control their applications when the user is not online or the application is not running.
With the introduction of the new service worker web standard, this will no longer be an obstacle. As the name suggests the service worker is a ‘service’ that runs in the background, even when your website/web-app is not being visited or used. This enables the app to send notifications, cache assets and pages (so they work offline) and synchronize data in the background.
See this simple explanatory guide:
There are some limitations to service workers. For starters it is sand-boxed, so there is no way to really interact between the service worker and your web-app. Basically you are interacting with the browser, allowing you to enhance the browser behaviour. Other than that a HTTPS connection is a requirement (unless you are running on localhost).
In short; The service worker is a great new web standard to make your application accessible without a working internet connection and it allows some behaviour of your app to run in the background.
The Observable pattern has been available for quite some time. The Rx (Reactive Extensions) framework makes great use of it and allows you to model promises as streams of future values allowing you to use functional operators.
For example this stock ticker:
(live code can be found here)
People who are fluent in Rx or just start using it acknowledge that the learning curve of Rx is steep. This is because it handles a complex problem; asynchronicity. Rx makes it easy to test what happens when future values arrive. It’s a powerful tool and invaluable when working with Promises in a larger application.