One of the killer features of Web Components is true encapsulation of styling through Shadow DOM.
This means that the internal CSS of a Web Component can be completely isolated from the surrounding document without the need for a particular naming convention.
All styling defined inside the component is for the component only and doesn’t leak out of it and, except for inherited CSS properties, styles defined outside of the component don’t apply to it.
In practice this means that only properties that apply to text like
text-align (among others) and
visibility are inherited. …
You simply can’t beat the platform
Why do we build single-page apps? Two main reasons really.
We want our web apps to feel “instant”, without any ugly blank screens in between pages that remind us our app is not really like an app.
Blank screens make for a bad user-experience. Users don’t want to wait for content to arrive from a server when they click a link or a button. They expect websites to be fast like native apps.
So we build single-page apps, where only the content that changes in the page is replaced, avoiding a full page reload…
Why Lea Verou’s criticism of Web Components is misdirected
Here’s my response to Lea Verou’s article “The failed promise of Web Components” that was published last Thursday.
I was pointed to the article by someone on Twitter and first thought I was pointed to the article “The broken promise of Web Components” that was published in 2017, but that was not the case.
Verou make some good points in her criticism of Web Components, but why this leads her to dismiss Web Components as “a failed promise” is frankly beyond me.
She states that the promise of Web Components was…
When standard HTML is not enough
Ever since the days of XML we have tried to extend HTML with our own tags.
The standard library of HTML tags is fairly limited and intentionally consists of low-level building blocks, meant to be composed by developers into more high-level functionality.
Now that all modern browsers support Web Components (or more specifically Custom Elements) you can create your very own HTML elements that you can use anywhere by just loading a script and adding the tag to the document.
It’s really as simple as that.
If you have created your own image gallery…
No transpiling needed
Web apps are nowadays more capable than ever and can easily compete with native apps when it comes to features.
These are certainly exciting times.
The W3C develops new standards to be implemented by browser vendors and naturally, this takes time. I’ve always been a fan of experimenting with cutting-edge functionality so I’m really excited about Chrome origin trials.
Origin trials allow developers to try out…
How to get ready for a passwordless future with Web Authentication
Imagine you had some very valuable jewellery stashed away in a safe somewhere.
The only way to open this safe is to give the code to another person who will then open it for you. You write the code on a piece of paper, put it in an envelope, close it and then give it to this person.
This person also has to walk all the way down the street to get to your safe. On the way there, the code could get lost or even be stolen.
Apple once again received a lot of criticism last month after announcing that the latest Safari release will now erase all locally stored data by a website after a user hasn’t interacted with that website for seven days.
Although Apple later clarified that this doesn’t apply to apps installed on the home screen (PWAs), many people were still outraged and claimed that Apple is trying to kill PWAs.
Apple has always been the bad guy in the PWA story since they’re notoriously slow in implementing features that developers want to use in PWAs. …
There’s no way back, but we’re not there yet.
When Steve Jobs introduced the very first iPhone in 2007, he spoke of how developers would be able to create amazing apps for the iPhone, using only web technologies. There was no App Store yet at that time and no notion of native apps.
What Jobs envisioned is the concept we now know as Progressive Web Apps, basically websites that have an app-like behavior and are able to work offline.
Unfortunately that idea never took off and a couple of months later the App Store was launched. …
Your dynamic content can be made available offline as well
In my previous article I showed you how you can easily make your static website work offline by using a service worker.
But most websites today don’t only exist of static content, but dynamic content as well. This content can come from a REST API for example and this type of content won’t normally be available when a client is offline.
Luckily, browsers provide a solution for that and service workers have got you covered because you can cache that too.
Whenever a request to the API is made we…
Better performance and user experience in one easy step
Did you ever open a native app on your phone to be greeted with the picture of a dinosaur, telling you that you need to connect to the internet before you can even use the app?
No. Most native apps give you a much better user experience and show you at least something until you’re connected again.
But if you disconnect from the internet and visit a random website then that’s usually what you get: nothing.