Recent content in Blog posts on Simon Wicki — Frontend Engineer from Berlin
When you optimise your web app, your goal is to make the experience better for the user: That means usually ‘faster’ by transferring and parsing less data. But caution: The same web app can cause Cumulative Layout Shift (CLS) on slower connections but runs without CLS on faster connection. If you’d like a refresher about Core Web Vitals, I explained them with GIFs in this post.…
The German court has ruled last month that Google Fonts is not in compliance with GDPR. The integration of dynamic web content such as Google Fonts from US web services is illegal without the consent of the visitor. A website operator received a fine of 100€. The Munich court clearly wanted to set an example. They even mentioned the next fine will be 250.000€ for the website operator if they…
In remembrance of my first love. Your LTS came finally to an end. You retired on 31st December 2021. You will always have a special place in my heart. You arrived with great anticipation, Put the web dev world upside down; Model, View and Controller were in separation, Even Javascript beginners didn’t frown. Be it JavaScript, CoffeeScript or SCSS, You handled them all in a snap; Grunt helped…
This can be confusing for anyone working with TypeScript—beginner or seasoned programmer. Both ways can cover similar needs. In this post you’ll quickly see what Typescript feature is possible to implement as Type Alias or Interface. I stayed brief and spicy to give the post an overview character. 👉 TLDR: You don’t care about each difference? What should you use? Use interface until…
Learn why WOFF2, and WOFF as a fallback, is the only font format you need. If you’ve been around as a web developer for some time, you’ve seen these font formats in your CSS. Here’s an example for a self-hosted Raleway font: @font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400; src: url('../fonts/raleway-v22-latin-regular.eot'); /* IE9 Compat Modes */ src:…
Are you a developer who is concerned about the size of newly added libraries? Or do you want to find a culprit in a rather big Javascript bundle? If you’re like me, then you answered yes to both questions. In this post I’ll cover a few tools that come in handy for a quick analysis of bundle sizes without changing or ejecting your build architecture. VS Code extension: Import Cost…
Have you ever optimised your website for the Core Web Vitals (CWV)? Did you want to check your changes the next day—but Google’s various tools don’t give you current daily CWV metrics due to the rolling 28-day window? In this post I’ll review Google’s toolset for measuring CWV and explain how to see if your changes had any effect on CWV day by day with Google Analytics…
JS frameworks like Vue can give elements a unique key. In a list rendering they might be able to reuse these keyed list items, when the list is changing. The already created DOM nodes don’t need to be recreated. This is a great performance gain. But when a list changes and the nodes merely switch their position, the keyed items can be considered as a shift in the DOM (CLS) by Core Web Vitals…
Passing your Core Web Vitals and google will reward you with visibility. With Google’s June 2021 update Core Web Vitals (CWV) will become a factor in SEO ranking. It measures the quality of a site by these three metrics: LCP, FID and CLS. If you pass all of them them, Google will reward you with more visibility. You can check how well you do on these metrics via several ways:
Keep the books you read in sync with your GitHub profile README In this post I’d like to show you how to use GitHub Actions to automatically sync your Goodreads books you read in your GitHub profile README. I created goodreads-profile-workflow for devs that love to read and like to share what they read. You can customise the input parameters to your liking: list the books you’re…
Npm comes with a neat tool called npx that lets you directly execute packages from the npm registry. It temporarily downloads it behind the scene and won’t pollute your local or global npm environment. In this post I’ll skip useful packages that are bound to libraries and frameworks like Angular’s ng, react’s create-react-app or capacitor’s cap. I focus on packages…
I’ve used Google Fonts in prototypes and in 10M+ MAU products. It’s incredibly easy to get started with and provides an amazing font discovery. That’s also why it’s currently still used on over 42M websites! This convenience has its price: Performance. Many have already pointed out the cost of multiple requests. If you want the remaining speed boost, then you’re best…
I love reading books—I read through 1-4 books a month. That wasn’t always the case. If you saw my home just two years ago you wouldn’t have found any books. Back then I read a few blog posts online and that was it. I never felt the need to read pieces of paper bundled together. …Until I tried it. I first tried it with a book called Factfulness by Hans Rosling.
I launched Notyfy on Product Hunt on 7th of May. My first Product Hunt Launch 🎉—a lot of time went into the preparation together with my friend Peter 👋. Read on to see what stats and learnings finishing #11 on Product Hunt brings. Notyfy Let me quickly run you through what the product is that I launched on Product Hunt: Notyfy is a browser extension that aggregates web notifications from…
…and other things I’ve heard regarding Hybrid App development. Let’s talk about the elephant in the room: Performance. Let me just show you how fast and smooth Hybrid apps can be based on this footage of my last work: JustWatch, a streaming search engine with 12M monthly active users. It’s been recorded on a OnePlus 6 (May 2018). “Hybrid Apps will never be faster than native” Yes, this…
MARCH 2020 UPDATE: The new Firebase JS SDK Alpha makes your bundle up to 80% smaller! It now fully adopts tree-shaking and lets you import only what you truly need. In a lot of tutorials I came across the comfortable solution of just adding import * as firebase from ‘firebase’ for your firebase import. As it turns out, there are 4 modular packages for Firebase. Here they are along with…
Nearly all evergreen browsers support Async/Await natively Async/Await has been around the block already some time. Now that it is in stage-4 since July 2016 (stage finished in the ECMAScript proposals) and nearly all evergreen browsers support it natively, too (except IE is late to the party as usual 😪) — it’s definitely time to take a second look. TL;DR I WANT ASYNC/AWAIT SUPPORT NAO!!1 use…
New Update available popup. PWAs are getting more and more coverage and support. They improve the web experience and can load your app instantly with their great ability for HTTP caching (among other things, but this post only covers caching). The thing with Offline-First is, that you cache all the resources that are needed for launching up the webapp — even your index.html! Note: No sweat!
Lately I encountered some native build errors that slowed me down quite a bit. Here is an overview of some of them, their issue and solution which might save you some time if you come across one of the following native errors: iOS: ‘GoogleCloudMessaging.h’ file not found iOS: Duplicate Symbols Android: safeparcel.AbstractSafeParcelable not found Android: Force Close due to phonegap-push-plugin…
Demo https://jsbin.com/gutahovufe/1/edit?html,js,output Explanation Sometimes you need to execute code after your list has been rendered on the client side. // js angular.module('ngRepeatDemo', []) .controller('AppCtrl', function() { var vm = this; vm.alphabet = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z' ];…
For external redirection The use case here is to redirect the user to another domain. I haven’t come across Redirect::away() before, even though it’s been added in Laravel 4.0.8. Redirect::to() Redirect::away() Difference Redirect::to() does additional URL checks and generations. Those additional steps are done in Illuminate\Routing\UrlGenerator and do the following, if the passed URL is not a…
$_ — last output maybe you don’t want to store results in a variable for quick calculations and just want to chain those computations. $0 — currently inspected element useful if you want to output or alter the selected element. angular.element($0).scope() — get AngularJS’s scope combined with $(0) this makes a great use to inspect a specific element and then check what it’s scope…
Short answer: No, not really. You want to have the following code: <script src="js/bootstrap.js"></script> Now you can achieve this using blade syntax: // using URL::to() <script src="{{ URL::to('js/bootstrap.js') }}"></script> // using URL::asset() <script src="{{ URL::asset('js/bootstrap.js') }}"></script> URL::to() The method is implemented like this: URL::asset() The method is implemented like…
Every dev at some point has made decisions how his backend API should look like. If you’re coming from the web, then mostly for ajax calls. But what if that API should also address calls from other sources and clients. To fill that gap i was watching an informative talk by Les Hazlewood about beautiful RESTful. I’ll cut this in several sections. This is merely an overview, the full coverage you…