Server side rendering JavaScript from PHP

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 in PHP: spatie/server-side-rendering and spatie/laravel-server-side-rendering to streamline SSR in a Laravel app.

Let's review some server side rendering concepts, benefits and tradeoffs, and build a server renderer in PHP from first principles.

Read more

A pair of helping hands when naming things

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

Blade component aliases in Laravel 5.6

Laravel 5.6 adds the ability to register alias directives for Blade components. Let's review some background information and examples.

Read more

Passing data to layouts in Blade through extends

Laravel quick tip! The @extends Blade directive accepts a second (undocumented) parameter to pass data to the parent layout.

Read more

Christoph Rumpel on rebuilding his site with Laravel

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

Debugging the dreaded "Class log does not exist" error in Laravel

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

Nordic.js 2017 recap

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, ... Here's a quick recap of my favorite talks.

Read more

Diving into requestAnimationFrame with Benjamin De Cock

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 repaint
  • requestAnimationFrame 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

Theme-based views in Laravel using vendor namespaces

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

Introducing our company guidelines site

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.

Check out the guidelines site

What's in our .babelrc?

A lot has been going in in JavaScript the past few years. One of my favorite things has been the usage of babel, which allows us to write future JavaScript syntax today. The babel ecosystem has tons of plugins and configuration options, I'd like to elaborate on our usage at Spatie.

To provide some context on what we're using this for: we generally build medium-sized, non-SPA projects with Laravel. We're using Laravel Mix to build our assets, which uses Webpack under the hood.

Read more

Generate pdfs with Google Chrome on a Forge provisioned server

This week I needed to export some charts generated with HTML & JavaScript as a pdf file. I already had implemented the charts on a webpage so I wanted a solution that allowed me to use my existing code for the pdfs.

Headless Chrome to the rescue! Chrome can run as a cli tool, and print a pdf file from a url. Al I had to do was make some layout tweaks to make everything printer-friendly.

Read more

Using registered event listeners as conditionals in Vue

Today I was writing a form component that needed an optional back button. Since the form component is generic, the back button could point to anything.

I decided to use a component event, so the parent can listen to a back event and do it's own thing. Also: The back button isn't always necessary, so I needed some sort of prop to decide if it should be rendered.

Read more

Is snapshot testing viable in PHP?

Christopher Pitt wrote a pretty comprehensive article on one of our latest packages, which is one of my favorite packages I've written at Spatie to date, phpunit-snapshot-assertions.

Ah-ha moments are beautiful and rare in programming. Every so often, we’re fortunate enough to discover some trick or facet of a system that forever changes how we think of it. For me, that’s what snapshot testing is.

You can check out the package on GitHub!

Read the full article on SitePoint

Fragmentation is fabulous

In a recent Twitter thread, Sebastian McKenzie (Yarn and Babel author) shared his thoughts on the current state of open source. This tweet stood out for me (and he later ironically dubbed it his "most thoughtleader tweet ever"):

Revel in fragmentation and duplication because without it there's stagnation and it stifles innovation.

When someone shares their latest pet project library, it's often met with responses like "What a waste of time, you can already do this with library X!".

There's no need for justification here. Maybe the author wants something that fully matches their use case instead of the 80% that library X does, maybe they want a different internal architecture. Maybe they have bigger future plans in mind, or most importantly, maybe they just want to experiment, learn, and have fun.

Read the full thread on @sebmck's Twitter

Exposing multiple Vue components as a plugin

Quick Vue tip for package authors! If you publish a package that exposes multiple Vue components, you can write a small plugin to install them all at once.

Read more

TypeScript with Laravel Mix

In a recent Spatie project we decided to give TypeScript a shot for the business critical part of a new application. TypeScript provides static analysis to reduce the chance of introducing bugs, to have self-documenting code, and to improve our tooling (autocompletion!)

We've been happily using Laravel Mix since it's release with Laravel 5.4. Luckily, extending Mix isn't too hard with some webpack knowledge. One of my favorite features of webpack is the ability to import a module in your application without caring about what kind of file it actually is. As long as you've configured an appropriate loader, you could import anything from a plain old JavaScript file to an animated gif. This means that if we want to support TypeScript with Laravel Mix, we don't need to change any configuration, we only need to add the ability to bundle TypeScript files.

Since writing this post, TypeScript has become officially supported in Laravel Mix (version 0.12 and up). There's still some informative stuff in here if you're new to TypeScript, but use the official method if you're on a newer version of Mix!

Read more

The list function & practical uses of array destructuring in PHP

PHP 7.1 introduced a new syntax for the list() function. I've never really seen too much list() calls in the wild, but it enables you to write some pretty neat stuff.

This post is a primer of list() and it's PHP 7.1 short notation, and an overview of some use cases I've been applying them to.

Read more

Automatically running PHPUnit with Watchman

A little bash script to run tests when a file has been changed.

Since writing this post, we've realeased a pretty awesome PHPUnit watcher CLI tool that's easier to set up and has an interactive interface. You might want to use that instead!

Read more

A package for snapshot testing in PHPUnit

The gist of snapshot testing is asserting that a set of data hasn't changed compared to a previous version, which is a snapshot of the data, to prevent regressions. The difference between a classic and an is that you don't write the expectation yourself when snapshot testing.

When a snapshot assertion happens for the first time, it creates a snapshot file with the actual output, and marks the test as incomplete. Every subsequent run will compare the output with the existing snapshot file to check for regressions.

Snapshot testing is most useful larger datasets that can change over time, like serializing an object for an XML export or a JSON API endpoint.

Our package, which exposes a trait to add snapshot testing capabilities to your tests, can be installed via composer and is available on GitHub.

Read more