End-to-End Encryption in the Browser
A nice explanation of the window.crypto functions that are available in all major browsers.
Read more [blog.excalidraw.com]
Building complex forms with Laravel Livewire in Oh Dear original
Together with my buddy Mattias Geniar, I run Oh Dear, an uptime checker service on steroids.
Unlike most uptime trackers, Oh Dear doesn't only check your homepage, but every single page of your site. When we detect a broken link or some mixed content, we send a notification. Oh, and we provide status pages, like this one from Laravel and Flare too.
In this blog post, I'd like to show you how we use Livewire to render some complex forms in the UI of Oh Dear.
Join 9,500+ smart developers
Get my monthly newsletter with what I learn from running Spatie, building Oh Dear, and maintaining 300+ open source packages. Practical takes on Laravel, PHP, and AI that you can actually use.
No spam. Unsubscribe anytime. You can also follow me on X.
"As a Laravel developer, this is the one newsletter I most look forward to. Freek has a talent for distilling packages or techniques down to something immediately useful - one tip can save you hours and even weeks. It's concise and practical and highly relevant."
Introducing Yarn 2
– dev.to
A good overview of new things Yarn has to offer.
Read more [dev.to]
ES6 modules made simple
– dev.to
A good overview on how to import stuff in the JavaScript world.
Read more [dev.to]
Design Principles of Vue 3.0
Evan You explains the principles behind the changes coming in Vue 3.0
Exciting new features in Vue 3
Filip Rakowski goes over all the shiney new feature that are coming in Vue 3
As you could expect, Vue 3 brings a lot of new exciting features. Thankfully Vue team mostly introduced additions and improvements over current APIs rather than major changes so people that already know Vue 2 should quickly feel comfortable with new syntaxes.
Read more [vueschool.io]
Cherry pick the keys for JSON.stringify to serialize
? In case you haven’t used it yet, the second argument of JSON.stringify lets you cherry-pick ? keys to serialize. ? pic.twitter.com/bBgYKSne4S
— Tejas Kumar (@TejasKumar_) November 12, 2019
Read more [twitter.com]
Build your own React
– pomb.us
In a very cool post, Rodrigo Pombo explains the internals of React by rewriting it's core from scratch.
We are going to rewrite React from scratch. Step by step. Following the architecture from the real React code but without all the optimizations and non-essential features.
Read more [pomb.us]
Closing Modals with the Back Button in a Vue SPA
Jess Archer recently gave an excellent talk at Laracon AU. In a new blogpost she explains one one tips given during her talk: how to close modals in a Vue app by using the back button.
On most web apps, pressing the back button while a modal dialog is open will navigate to the previous page, rather than closing the modal. This can be very frustrating! It might not seem like a huge deal on a desktop app, but on a mobile, where a modal like this will often be full-screen, and with phones having back buttons and back gestures, I believe it's a huge user experience improvement.
Read more [jessarcher.com]
Client Side PHP
Atymic (real name unknown to me), a developer hailing from Sydnex, wrote a blogpost on how he managed to get PHP running in the browser via WebAssembly.
I'm sure you've come across plenty of sites that use javascript on the front end, but what about using PHP as a client side language? How, you ask? Since PHP is C based, it's actually possible to compile a version that's able to run inside your web browser using web assembly.
Read more [atymic.dev]
Live updating Oh Dear! status pages
Sebastian De Deyne explains how the live updating on Oh Dear status pages works.
We were originally going to use Vue for the pages, so we could make the entire view reactive so we could easily fetch and update data with AJAX or websockets. I started building the status page view, but quickly became hesitant about the decision to use Vue. It didn’t feel like the right tool for the job.
Read more [sebastiandedeyne.com]
How much JavaScript do we really need?
An interesting opinion written by my colleague Seb.
Over the years I’ve experimented with different strategies to build user interfaces. From sprinkling JavaScript over server side templates to full-blown SPAs. My conclusion up until now: we can do better.
Read more [sebastiandedeyne.com]
Reducing Complexity with Guard Clauses in PHP and JavaScript
In this old, but still relevant, blog post Craig Davis explains what guard clauses are and how they can be used to clean up your code.
We’ll first explore several versions of a sample method from a hypothetical billing system. For these purposes, we’ll assume this is code in an existing system and we’ll look at refactoring it to reduce complexity and make it easier for a programmer to understand. The first example will be trivial enough to easily understand, but we’ll build on it in the final examples.
Read more [engineering.helpscout.com]
Creating beautiful status pages using Oh Dear! original
My buddy Mattias and I are running an uptime checker service called Oh Dear. Earlier this week, we've launched a new major feature: status pages.
In this blog post, I'd like to walk you through what status pages have to offer. We'll also dive deep in some technical details of the underlying Laravel app.
Browser APIs as React Hooks
Via the excellent bram.us blog I stumbled on this neat colletion of Reacht hooks.
Read more [www.bram.us]
Algebraic Effects for the Rest of Us
You can think of algebraic effects as resumeable try catch blocks ?. In a new post on his blog React dev Dan Abramov explains the concept.
Read more [overreacted.io]
Advanced internationalization system for Vuex
Nicolas Beauvais wrote a nice blogpost on how he went about adding support for internationalization to his app.
When working on web applications, translation strings are typically stored in the backend of your app while they’re mostly used in the frontend. This is the main challenge because you need to communicate the translations from your backend to your frontend code.
Read more [nicolas-beauvais.com]
Consider using JSON.parse
? Perf tip: if your web app ships large JSON-like configuration as JavaScript object literals, consider using JSON.parse instead. It’s much faster, especially for cold loads! https://t.co/C0oQ4BLnfz pic.twitter.com/p0WICUm7zx
— Mathias Bynens (@mathias) June 25, 2019
Read more [twitter.com]
Forget about component lifecycles and start thinking in effects
In a new blogpost, my colleague Seb explains why you should and how you can use useEffect.
React recently introduced a new way to deal with side effects: the
useEffecthook. Translating lifecycle methods touseEffectcalls can be confusing at first. It’s confusing because we shouldn’t be translating imperative lifecycle methods to declarative useEffect calls in the first place.
Read more [sebastiandedeyne.com]
