I like this JS typewriter effect: The HTML that goes along with that is really simple: <h1>This pen is <span class="txt-rotate" data-period="2000" data-rotate='[ "nerdy.", "simple.", "pure JS.", "pretty.", "fun!" ]'></span> </h1> Simple Typing Carousel →
Category Archives: Elsewhere
Harry Roberts: FaCSSt – CSS and Performance
A Frontend United I was lucky to see Harry Roberts give this talk on CSS and Performance. You can watch it to, as the recording has been published to YouTube Ahh… CSS and performance. Two of my favourite things! But how well do they play together? It depends… In this very matter-of-fact talk, we’ll be …
Continue reading “Harry Roberts: FaCSSt – CSS and Performance”
How CSS works: Parsing and painting CSS in the critical rendering path
Insightful post by the folks over at LogRocket on the rendering pipeline: If your site takes forever to load, chances are your users aren’t gonna wait for it to finish, even if there’s valuable content to be found there. Some studies have shown that up to 50% of users leave a page after 3 seconds …
Continue reading “How CSS works: Parsing and painting CSS in the critical rendering path”
Implementing Web Push Notifications
Alexander Zlatkov from SessionStack on how to implement Web Push Notifications: There are three general steps to implementing a push: The UI — adding the necessary client-side logic to subscribe a user to a push. This is the JavaScript logic that your web app UI needs in order to enable the user to register himself to push …
yett – A small webpage library to control the execution of (third party) scripts like analytics
In order to provide GDPR compliant consent-first-analytics (and other stuff), you can use yett: Blocking execution of analytics script (until consent is given) can be done manually, but the problem is that analytics providers often provide minified code embeds that you have to include in your html as they are. If you want to exercise …
CSS Perspective Text Hover
DNS over HTTPS (DoH), a cartoon intro
I like the cartoons that have been appearing for some time now over at Mozilla Hacks, in which they explain technical things in layman’s terms. The latest article again is a good one: first it explains regular DNS (pictured above), and then continues on to DNS over HTTPS. A cartoon intro to DNS over HTTPS …
Side-channel attacking browsers through CSS3 features
Ruslan Habalov and Dario Weißer found a way to read contents from an iframe, using CSS3: Accessing the DOM of an iframe that includes a cross-origin resource is forbidden by default. However, the content of the iframe was displayed in the same context as the rest of the site so we wanted to verify if …
Continue reading “Side-channel attacking browsers through CSS3 features”
Awesome Talks
Great site developed by Sara Vieira (@NikkitaFTW): Awesome Talks is an awesome list of tech talks to watch that is constantly updated by the community and is a great way to find an interesting talk to watch during downtime. The talks are categorised, and one can submit talks themselves (if they’re on YouTube that is). …
React Native Parallax Scroll Header with Tabs
Nice writeup on how to create a typical screen where there’s a header image that fades out and disappears as you start scrolling. Essentially, everything but the header is put into a scrollview. In order to keep elements ‘fixed’ (i.e. the tab bar), I use the transform property with a translateY that is set to …
Continue reading “React Native Parallax Scroll Header with Tabs”