For the past three years, I’ve been using both React and Vue in different projects, ranging from smaller websites to large scale apps.
Last month I wrote a post about why I prefer React over Vue. Shortly after I joined Adam Wathan on Full Stack Radio to talk about React from a Vue developer’s perspective.
We covered a lot of ground on the podcast, but most things we talked about could benefit from some code snippets to illustrate their similaraties and differences.
This post is a succinct rundown of most Vue features, and how I would write them with React in 2019 with hooks.
When you visit a website, your browser connects to a server via TCP. With TCP, the first roundtrip can be up to 14 KB large.
In other words, the first 14 KB sent to the client will always be the quickest to render in the browser. The rest of the response is streamed afterwards.
This website’s homepage is about 9.7 KB at the time of writing. Articles are roughly 4-10 KB, depending on their lengths. All CSS is inlined, so besides fonts and images everything is loaded withing the first roundtrip, making page loads fast and snappy.
Not all sites can be contained within 14 KB — most probably can’t. But keep the number in mind, and try to optimize the first 14 KB instead.
Husky and lint-staged have been working hard keeping our front-end assets clean as Spatie, so we decided to expand their responsibilities to keep our PHP files clean too. This is a modified version of my previous post using PHP CS Fixer instead of prettier. There’s also an example of a conmbined configuration to run prettier and PHP CS Fixer simultaneously at the end of the post.
Every now and then, web components hype seems to resurface. Judging by my Twitter feed, it’s a bull market period now. Seems like a good time to share some thoughts.
The other day, I stumbled upon an older article by DHH. “Work on what you use and share the rest”.
My core philosophy about open source is that we should all be working on the things that we personally use and care about. Working for other people is just too hard and the quality of the work will reflect that. But if we all work on the things we care about and then share those solutions between us, the world gets richer much faster.
I’ve been keeping this in the back of my mind the past few months.
I was always adding features because I’d expect other people to expect them. It’s a trap! You’re not making people happier by guessing what they might need. You’re not doing anyone a disservice by building things for yourself.
Building things for yourself makes it easier to ship something you feel happy about. It makes it easier to ship something at all.
Don’t forget to be selfish as an open source maintainer every now and then. It’s a good investment in the long run.
I used to fall in the trap of thinking I needed to add features because other people might expect them to be a part of my code, not because I need them myself.
Well since you asked, Mohamed 🙃, a little retrospective on this past year…
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.
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.
One of the best things about Vue templates is the special
v-model allows you two quickly map prop getters and setters without breaking unidirectional data flow. Props down, events up.
This is the first post in a series about removing distractions from an interface to provide a better user experience.
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.
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.
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.
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.