Let's set the scene. Say you are a web freelancer and are almost finished with a client's new website. Over the years, you have learned the hard way not to edit the files directly over FTP. It's too easy to make breaking changes with no record of what changed and who did what. Nowadays you are using Git to manage the version of the files. Let's cover that, and also the last mile: deploying only the files known to be changed to the server.

HTTP/2 – A Real-World Performance Test and Analysis

Perhaps you've heard of HTTP/2? It's not just an idea, it's a real technology and slowly but surely, hosting companies and CDN services have been releasing it to their servers. Much has been said about the benefits of using HTTP/2 instead of HTTP1.x, but the proof the the pudding is in the eating.

Today we're going to perform a few real-world tests, perform some timings and see what results we can extract out of all this.


#153: Getting Started with CSS Grid

It feels like CSS Grid has been coming for a long time now, but it just now seems to be reaching a point where folks are talking more and more about it and that it's becoming something we should learning. I started reading a few posts and playing around with the syntax the past couple of weeks, but asked my fellow CSS-Trickster Miriam Suzanne to grok through it with me on a video hangout.


“lives in a sort of purgatory”

Brad Frost:

A front-end designer ... lives in a sort of purgatory between worlds:

  • They understand UX principles and best practices, but may not spend their time conducting research, creating flows, and planning scenarios
  • They have a keen eye for aesthetics, but may not spend their time pouring over font pairings, comparing color palettes, or creating illustrations and icons.
  • They can write JavaScript, but may not spend their time writing application-level code, wiring up middleware, or debugging.
  • They understand the importance of backend development, but may not spend their time writing backend logic, spinning up servers, load testing, etc.

A front-end developer is aware.

“Write a script”

Jeremy Keith, on teaching people JavaScript for the first time:

A lot of that boils down to this pattern:

When (some event happens), then (take this action).

We brainstormed some examples of this e.g. "When the user submits a form, then show a modal dialogue with an acknowledgment." I then encouraged them to write a script …but I don't mean a script in the JavaScript sense; I mean a script in the screenwriting or theater sense. Line by line, write out each step that you want to accomplish. Once you've done that, translate each line of your English (or Portuguese) script into JavaScript.

Pseudo code. I'm a big fan.

Writing a code flow out in plain English works great for beginners, and in my experience remains useful forever. I find myself regularly writing pseudo code in Slack and in bug/idea tickets, although I've perhaps graduated from plain English to my own weird non-language:

IF (user_is_pro? AND has_zero_posts)
  OR (signed_up_less_than_three_days_ago) {
    // ajax for stuff
    // show thing

Optimizing GIFs for the Web

Ire Aderinokun describes a frustrating problem that we’ve probably all noticed at one point or another:

Recently, I’ve found that some of my articles that are GIF-heavy tend to get incredibly slow. The reason for this is that each frame in a GIF is stored as a GIF image, which uses a lossless compression algorithm. This means that, during compression, no information is lost in the image at all, which of course results in a larger file size.

To solve the performance problem of GIFs on the web, there are a couple of things we can do.

Switching to the <video> element seems to have the biggest impact on file size but there are other optimization tools if you have to stick with the GIF format.

Transparent JPG (With SVG)

Let's say you have a photographic image that really should be a JPG or WebP, for the best file size and quality. But what if I need transparency too? Don't I need PNG for that? Won't that make for either huge file sizes (PNG-24) or weird quality (PNG-8)? Let's look at another way that ends up best-of-both-worlds.


Coding CSS for Context

Snook on naming a class:

Here's what's important:

  • We want to identify that this is a variation on our button.
  • We want to indicate the purpose of this button style.
  • We want to avoid tying the code to a particular context that could change.

Creating Non-Rectangular Headers

Over at Medium, Jon Moore recently identified "non-rectangular headers" as a tiny trend. A la: it's not crazy popular yet, but just you wait, kiddo.

We're talking about headers (or, more generally, any container element) that have a non-rectangular shape. Such as trapezoids, complex geometric shapes, rounded/elliptical, or even butt-cheek shaped.

Most of the web really sucks if you have a slow connection

Dan Luu on the sorry state of web performance:’s not just nerds like me who care about web performance. In the U.S., AOL alone had over 2 million dialup users in 2015. Outside of the U.S., there are even more people with slow connections.

This other note is also interesting, and I think that Dan is talking about Youtube’s project “Feather” here:

When I was at Google, someone told me a story about a time that “they” completed a big optimization push only to find that measured page load times increased. When they dug into the data, they found that the reason load times had increased was that they got a lot more traffic from Africa after doing the optimizations. The team’s product went from being unusable for people with slow connections to usable, which caused so many users with slow connections to start using the product that load times actually increased.

SVG Squircle

Amelia Bellamy-Royds:

I wondered if I could come up with an easy formula to create a "squircle" type curve with SVG bezier curves. It wouldn't be the exact shape, but it could be close. The idea:

The "end points" of the curve segments are the mid-points of each side of the rectangle, where everything should be perfectly straight. The control points then stretch out along the edges until the curvature at the corners is about right.

Rogie took a crack at it with CSS a few years ago, as well.