Freek.dev

Laravel / PHP / AI

Posts tagged with frontend

TypeScript With Laravel Mix

In a new post on his blog Sebastian De Deyne, multi disciplinary wizard at Spatie, explains how to set up TypeScript in a typical Laravel app.

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

Adding TypeScript support is pretty straight forward and is done in three steps: install the necessary dependencies, configure TypeScript, and finally configure Laravel Mix.

https://sebastiandedeyne.com/posts/2017/typescript-with-laravel-mix

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.

Polyfills: everything you ever wanted to know, or maybe a bit less

David Gilbertson tells you all about polyfills.

Faced with the reality that you can’t write modern code and expect it to work for all users, you have exactly two choices:
  1. Only use language features available in all the browsers you support
  2. Write modern code, then do something to make it work in older browsers

If you have decided on option one then I respectfully suggest that you are bonkers, and insist that you state your case in the comments. I believe that developers who are able to explore all the new stuff and use it in their day-to-day jobs stay happy, and being happy is important.

https://hackernoon.com/polyfills-everything-you-ever-wanted-to-know-or-maybe-a-bit-less-7c8de164e423

Read more

10 things I learned making the fastest site in the world

David Gilbertson made a lighting fast site and wrote a fantastic article about it.

Writing a fast website is like raising a puppy, it requires constancy and consistency (both over time and from everyone involved). You can do a great job keeping everything lean and mean, but if you get sloppy and use an 11 KB library to format a date and let the puppy shit in the bed just one time, you’ve undone a lot of hard work and have some cleaning up to do.

https://hackernoon.com/10-things-i-learned-making-the-fastest-site-in-the-world-18a0e1cdf4a7

Read more

Dealing With Templates in Vue.js 2.0

Sebastian De Deyne, my colleague at Spatie, wrote a very nice overview of all different methods in Vue to define a template.

This article isn't about Vue's template syntax, but about where and how to define your templates. I wrote this because at the time of writing there aren't really resources that consolidate all the different manners to manage your templates.

I've divided the different ways to define templates in three different categories, each with their own drawbacks:

  • Writing templates that compile at runtime (lesser performance)
  • Using single file .vue components (requires a build step)
  • Manually writing render functions (pure JavaScript, no html-like template syntax)

https://sebastiandedeyne.com/posts/2016/dealing-with-templates-in-vue-20

Read more

A full web request may be faster than a SPA

At this years Chrome Dev Summit Jake Archibald gave an excellent talk on some new features that are coming to the service worker. In case you don't know, a service worker is a piece of JavaScript that sits between the network request sent by the JavaScript in your browser and the browser itself. A common use case for a service is to display a custom page when there is no internet connection available instead of showing the default error message in your browser. And of course you can use a service worker to have a high degree of control on how things are cached.

I really like Jake's presentation style in general. He always injects a lot of humour. This time he's presenting in a tuxedo, with no shoes on and he uses a Wii Controller to control his slides. Go Jake!

A very interesting part of the talk is when he touches on the time needed to display a page. Turns out a full web request can be a faster than a fancy single page application. Watch that segment on YouTube by clicking here.

Or you can choose to just watch the whole presentation in the video below.

Read more

The grid layout for our dashboard

by Freek Van der Herten – 7 minute read

The grid layout for dashboard.spatie.be was conceived with 3 simple ideas in mind: The layout has to be lightweight on the client side: no JavaScript calculations or full-blown grid library should be used. The HTML structure in the templates has to be clean, without extra markup for rows and…

Read more

Adventure Time With Webpack

For various reasons we recently switched from using Laravel Elixir to Webpack. My colleague Sebastian was in charge of this migration. He shares his experiences in the very first post on his new blog.

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.
https://sebastiandedeyne.com/posts/2016/adventure-time-with-webpack

If want to read a more introductory article on the subject check out this post by Samantha Geitz.

Read more