Freek.dev

Laravel / PHP / AI

Posts tagged with javascript

Building complex forms with Laravel Livewire in Oh Dear

by Freek Van der Herten – 16 minute read

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.

Read more

Join thousands of developers

Every two weeks, I share practical tips, tutorials, and behind-the-scenes insights from maintaining 300+ open source packages.

No spam. Unsubscribe anytime. You can also follow me on X.

Exciting new features in Vue 3

– vueschool.io

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]

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

– jessarcher.com

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.dev

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

– sebastiandedeyne.com

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]

Reducing Complexity with Guard Clauses in PHP and JavaScript

– engineering.helpscout.com

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]

Advanced internationalization system for Vuex

– nicolas-beauvais.com

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]

Forget about component lifecycles and start thinking in effects

– sebastiandedeyne.com

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 useEffect hook. Translating lifecycle methods to useEffect calls 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]