Chris Coyier consolidated an array of opinions about what it means to be a frontend developer today.

On one side, an army of developers whose interests, responsibilities, and skill sets are heavily revolved around JavaScript.

On the other, an army of developers whose interests, responsibilities, and skill sets are focused on other areas of the front end, like HTML, CSS, design, interaction, patterns, accessibility, etc.

It's that other side that seems to really be feeling this divide. A quote from Mandy Michael:

What I don’t understand is why it’s okay if you can “just write JS”, but somehow you’re not good enough if you “just write HTML and CSS”.

When every new website on the internet has perfect, semantic, accessible HTML and exceptionally executed, accessible CSS that works on every device and browser, then you can tell me that these languages are not valuable on their own. Until then we need to stop devaluing CSS and HTML.

A lot of these excerpts really hit home. I'm looking forward to the conversation this might spark.

Read the full piece on css-tricks.com.

The last year or two, I've been playing around with Elixir. Chris McCord, author of the Phoenix web framework, is working on a new feature for Phoenix: LiveView.

Phoenix LiveView is an exciting new library which enables rich, real-time user experiences with server-rendered HTML. LiveView powered applications are stateful on the server with bidrectional communication via WebSockets, offering a vastly simplified programming model compared to JavaScript alternatives.

In short, LiveView enables you to enable interactive, real-time app, without touching any JavaScript, as the application logic lives on the server.

LiveView looks like an interesting alternative to the current SPA trend. You can read Chris' entire walkthrough on dockyard.com. Even if you're not familiar with Elixir yet, LiveView's proposed programming model is an interesting topic on it's own.

As a short follow-up to Everyone has JavaScript, right?, there's more to JavaScript than availability, there are also the performance implications.

I don’t think most people are saying, “don’t use JavaScript.” That would be absurd.

But use less, use it wisely, and don’t depend on a giant framework for simple stuff. Use as little JS as possible to get the experience you want. You can do that and still have a great, immersive app.

I believe we're reaching for JavaScript more often because of its ecosystem, not because it's the better solution. The JavaScript ecosystem simply has incredible tools to build interfaces, and I hope server side solutions will still be able to compete.

I don't have a conclusion ready, I'm just interested in the topic. To be explored in 2019. Meanwhile, read Chris Ferdinandi's thoughts on the matter.

Well since you asked, Mohamed 🙃, a little retrospective on this past year…

I realized my passion lies with designing and building interfaces. I don't care about the language; PHP, JavaScript, CSS and HTML are all equally fun for me to be working with. As long as I'm actively shaping to the end user experience.

I wrote 11 full-length articles on my blog. Unfortunately one shy of my one-per-month goal, although I suppose this post makes 12!

I started a newsletter to share links. Soon after that, I stopped the newsletter and started sharing links on my blog instead ¯\_(ツ)_/¯ However, I'm very happy with the current state of my site, and I'm glad it also became a place to share things with more context and longevity than Twitter.

I got started with public speaking. I spoke at the unconference at PHP Benelux, and won a prize for it being the best unconference talk (hooray!) I also spoke at the Full Stack Antwerp meetup. I enjoyed both experiences, despite the fact that preparing a talk requires an excruciating amount of work, but I'm still undecided whether it's something I want to pursue more of in the future.

I got better at organizing, both for work and life in general. Things is a godsend!

I got a dog! Probably the best and most influential decision I've made in my personal life this year. What a lovely little creature he is.

In 2019, the area I want to improve most on professionally is design. I also want to write more and read more. I want to improve my communication skills. I want to get better at budgeting my personal finances. I want to cook more. Maybe start baking things too. Most importantly, I want to finish things more often. Either way, I'm looking forward to what 2019 brings.

I used to think disabled JavaScript went hand in hand with visitors explicitly blocking it. I came to the conclusion that I don't necessarily need to cater to that crowd, because the degraded user experience was by choice. After reading through this chart, I realized how wrong I was.

Sometimes your JavaScript just won’t work. Be prepared.

Read the flowchart on kryogenix.org.

iA Writer is one of my favorite pieces of software, and I can't even say why. It just feels so good. In the upcoming 5.2 release, iA Writer will replace the current iA Writer Duo font with iA Writer Quattro, a variable font.

While traditional fonts offer in a limited number of weights, variable fonts offer an infinite scale between the weights and features.

Variable fonts have different "axis" which allow an infinite amount of variations.

Gingham variable font. Taken from Get started with variable fonts by Richard Rutter.

In iA Writer 5.2 we automatically adjust the optical weight depending on the type size you use. Weights change depending on size. The font is getting thinner and tighter spaced as we increase the type size. This has not been possible in the past.

Not just size, but different screens demand different weights, too. Fonts look different on screens; some screens have more or fewer pixels, like retina and high-density retina. Depending on what device you use, we apply different gradings.

Our job would almost be boring if type size, pixel density, and screen type were the only challenges of modern typography. As you might have noticed, dark backgrounds make white text shine brighter. That’s why iA Writer 5.2 tones the optical weight down another 5% for night mode. Who does such crazy things? Crazy people.

I, for one, welcome our new variable font overlords. More words and pictures on ia.net.

If you want to learn more about variable fonts in general, or play around with a few specimens, check out Axis-Praxis.

Robert Heaton shares 39 bullets to improve your blogging. A few of my favorites:

Choose a few people whose style you like and copy it as hard as you can without infringing on any intellectual property. I aim for a combination of the Economist, Paul Krugman, and Terry Pratchett.

If you need a quick name for a generic fictional character, consider using one from a culture or gender that you usually wouldn't. Even if you don't believe that representation in the media matters, you've surely got to concede that there's still a chance that it might, and that the cost of sometimes calling your imaginary computer programmers Julianna is zero.

It's fine to spend 10, 20, 30 minutes staring into space when your plan for the day says that you're meant to be writing.

It is admittedly even better to spend that 30 minutes spamming down any old nonsense that you can refine later, or that at least helps get you mentally unblocked.

Read all 39 tips on robertheating.com.

I've been reading up on SVG and Bézier curves for a side project that involves a custom-made chart (blog post about that later!). Funnily enough, this article on Bézier curves popped up on Hacker News earlier this week.

One little animation in the article totally stands out, and helped me make sense of what the control points of a Bézier curve actually do.

Taken from cormullion.github.io

While you’re waiting, have a look at another animation; this is my artist’s impression of the De Casteljau algorithm dividing the control polygons around a Bézier curve as the parameter n moves from 0 to 1. The idea is that as p1 divides A to A1, p2 divides A1 to B1 and p3 divides B1 to B. So, pp1 divides p1 to p2, and pp2 divides p2 to p3. And you keep doing this until you can’t divide any more, and eventually the point P plots the course of the final Bézier curve. The red and blue parts of the curve show that this technique is also a good way to split a single Bézier curve into two separate ones, and the red and blue parts are separate control polygons.

Read the full article on cormullion.github.io.

When I write a library that's going to be used by others, I strive for a gentle learning curve. When someone reads code that uses my library, I want them to understand what's happening without reading a bunch of documentation first. I tend to keep my API's as explicit as possible, and try to stay away from odd or foreign notations.

My colleague Brent is writing a library to deal with date & time periods in PHP. There was a discussion whether a period's boundaries should be included in the range or not.

Read more

There are a few fleshed-out articles about why utility-first CSS is a good thing. However, if you're just a little curious and want a brief introduction, Chris Ferdinandi has your back.

In JavaScript, we create small, modular functions that can be reused throughout the code base to keep our code DRY. In CSS, for some reason, it’s not seen as weird in the slightest to repeat yourself a lot.

Utility classes help keep CSS DRY.

The stylesheet for my website is so small that I can inline all of my CSS still send most of the page in a single HTTP request.

Read the rest of Chris' article on gomakethings.com.

Hungry for more? Check out In Defense of Utility-First CSS by Sarah Dayan or CSS Utility Classes and "Separation of Concerns" by Adam Wathan.

Since the first iteration of my blog—some time around 2016—I've used highlight.js to highlight code blocks. With highlight.js being so popular, I never really second guessed the idea. It was a given to use JavaScript.

A few weeks ago, TJ Miller introduced me to highlight.php by writing a Parsedown extension for it. Highlight.php does the exact same thing as highlight.js: they both add tags and classes to your code blocks, which enables them to be highlighted with CSS. The difference is, highlight.php does this on the server.

Read more

One of the best things about Vue templates is the special v-model prop. v-model allows you two quickly map prop getters and setters without breaking unidirectional data flow. Props down, events up. But v-model has it's limitations. When dealing with more complex components, the sync modifier might be a better fit.

Read more

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

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.

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.

Read more

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. All I had to do was make some layout tweaks to make everything printer-friendly.

Read more

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.

Read more

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.

Read the full article on SitePoint, or check out phpunit-snapshot-assertions on GitHub.

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 entire thread on @sebmck's Twitter.

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

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!)

Read more

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

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

Read more

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.

Read more

When admins create or update a news item—or any other entity—in our homegrown CMS, a url slug is generated based on it's title. The downside here is that when the title changes, the old url would break. If we wouldn't regenerate the url on updates, edited titles would still have an old slug in the url, which isn't an ideal situation either.

Our solution: add a unique identifier to the url that will never change, while keeping the slug intact. This creates links that are both readable and unbreakable.

Read more

Vue 2.0 introduced it's own virtual DOM implementation. At first sight, this doesn't seem to have a large effect on the way you write templates.

Read more

When building a website for a client that wants to be able to manage content, Laravel's language files aren't ideal since you can't edit them without diving into a bundle of text files. We recently decided to drop all the lang files in our custom CMS in favor of persisting translations in the database, which allows us to build a custom interface for managing them.

This post is a quick overview on overwriting Laravel's default translation loader, which means you can keep using the lang method while fetching the translations from a database. Writing a custom loader is easier than it sounds. First we'll set up our translation models, then we'll write our loader, and finally register it in our application.

Read more

Dynamic languages allow us to pass anything as a parameter without requiring a specific type. In turn, this means we often need to handle some extra validation for the data that comes in to our objects.

This is a lightweight post on handling your incoming values effectively by normalizing them as soon as possible. It's a simple guideline worth keeping in mind which will help you keep your code easier to reason about.

Read more

Over the past few weeks I've been migrating our asset pipeline at Spatie from Laravel Elixir (a gulp wrapper) to webpack. Between having endless possibilities, the occasional incomplete section in the docs, and the fact that everyone has slightly different needs for their asset pipeline (which makes examples hard), it has surely been an adventure.

I'm going to do a quick summary of my goals, and how I achieved them with webpack. Hopefully there will be some useful snippets in here for when you're setting up your own webpack configuration.

Read more