I have a specific pet peeve with user interfaces: things that draw my attention when they don’t need to. In any graphical interface, movement is distraction. Our eyes are naturally drawn to anything in motion.
Motion is a powerful tool. We can abuse this distraction to attract our users to a certain place: a notification, an added list item after a background refresh, etc. Let’s look into the movement behind a form submission. Below are three dummy forms, each with a different server response time.
Read more
In my most recent project at work, I’m experimenting with JSX templates in Vue. Vue offers
first-party support for JSX with near-zero configuration, but it doesn’t seem to be commonly used in the ecosystem.
Read more
Maintaining a number of open source projects comes with a number of issues. Reporting a good issue will result in a more engaged approach from project maintainers. Don’t forget: there’s a human behind every project.
Read more
Code splitting is bundler feature—if you’re using Laravel Mix, you’re bundling your assets with Webpack—that allows you to split application scripts in multiple files. These can then conditionally be loaded at a later stage.
Read more
In a recent Design Details podcast, Guillermo Rauch (@rauchg) shares his thoughts on the web, design, the value of code, type systems, cryptocurrencies and much much more.
I have a lot of respect for Guillermo’s philosophies, and what he’s building with Zeit. An early quote from the interview (paraphrased):
I’ve always had this passion for the hyperlink. My whole thesis is everything that has not yet been hyperlinked, will be hyperlinked. If we step back and take that thesis a little further—you look at GitHub and they but a hyperlink on everything. They put a hyperlink on every per-character diff of your codebase. Every line of code. Every changeset. Everything.
Listen to the full podcast on Spec.fm.
Server side rendering is a hot topic when it comes to client side applications. Unfortunately, it’s not an easy thing to do, especially if you’re not building things in a Node.js environment.
I published two libraries to enable server side rendering JavaScript from PHP: spatie/server-side-rendering and spatie/laravel-server-side-rendering for Laravel apps.
Let’s review some server side rendering concepts, benefits and tradeoffs, and build a server renderer in PHP from first principles.
Read more
One of the hardest (and sometimes frustrating) tasks in a programmer’s day-to-day workload is naming things. When I have a hard time finding that perfect word, I generally wind up in one of two situations:
- I have a plausible name in mind, but I’m not entirely satisfied with it
- I have no idea what I could possibly name it
Luckily, there are tools out there that can be of help.
Read more
Laravel 5.6 adds the ability to register alias directives for Blade components. Let’s review some background information and examples.
Read more
Laravel quick tip! The
@extends Blade directive accepts a second (undocumented) parameter to pass data to the parent layout.
Read more
Christoph Rumpel published his revamped site last week, built with Laravel and Tailwind CSS. He based the site’s architecture on my personal site (yeah, the one you’re reading now). I open sourced it about a year ago, and I’m glad to see that it provided value to someone!
Read the full article on Christoph Rumpel’s new blog.
Every now and then I come accross a Class log does not exist exception in Laravel. This particular exception is thrown when something goes wrong really early in the application, before the exception handler is instantiated.
Whenever I come across this issue I’m stumped. Mostly it’s related to an invalid configuration issue or an early service provider that throws an exception. I always forget how to debug this, so it’s time to document my solution for tracking down the underlying error.
Read more
Last month I travelled up north to my first JavaScript conference: Nordic.js. The entire conference was a great experience: the speakers, the location, the food (
kanelbullar!), … Here’s a quick recap of my favorite talks.
Read more
I love this post! requestAnimationFrame is a primitive browser API that doesn’t sound too interesting at first, but once you’ve grasped some basic concepts, it becomes an extremely powerful tool for dealing with animations in JavaScript.
At its core, requestAnimationFrame doesn’t do much: it’s basically just a method that executes a callback. In fact, there are very few differences between doing requestAnimationFrame(doSomething) and doSomething(). So, what’s so special about it? I’m glad you asked! In short:
requestAnimationFrame schedules the callback call on the next repaintrequestAnimationFrame passes the callback the current time
There are a few other distinctions, but these are the main benefits. Now, requestAnimationFrame doesn’t create an animation on its own, it’s the sequence of successive callbacks that will make things move on the screen.
My favorite part: since a large part of animating with requestAnimationFrame consists of composing small mathematical expressions, you can apply all sorts of functional programming tricks to your code.
Learn all about it on Benjamin De Cock’s blog.
I’m building a multi-tenant Laravel application. One of the requirements of the project is that every client can have their own theme based on their corporate guidelines. By default a few css adjustments will suffice, but some clients request a completely different template.
Conditionally loading a different stylesheet per client is pretty trivial, but in order to use a completely different view per theme you quickly end up typing the same thing over and over across various parts of your application.
Read more
We just open sourced our company guidelines site! We previously kept the contents in a private wiki on GitHub, but I’m glad we finally put the time in giving the contents a real home.
Like our docs site, the content is stored in markdown files, which can directly be edited on GitHub. The site deploys whenever something’s pushed to the master branch.
As for why we decided to open source it all…
This site contains a set of guidelines we use to bring our projects to a good end. We decided to document our workflow because consistency is one of the most valuable traits of maintainable software.
The contents of this site exist for ourselves—more importantly, our future selves—and for giving future collegues a reference to our way of doing things and their quirks. The guidelines cover workflow, code style, and other little things we consider worth documenting.
The guidelines are available on guidelines.spatie.be.