Tags: server

53

sparkline

Friday, March 8th, 2019

Tuning Performance for New and “Old” Friends | Filament Group, Inc., Boston, MA

This is a really clever technique from Scott that he unveiled at An Event Apart in Seattle. It uses a header sent by a service worker to distinguish between returning and new visitors—much neater than relying on a cookie. I’ve updated my service worker on The Session to use this technique now.

Monday, March 4th, 2019

Cache-Control for Civilians – CSS Wizardry

Harry breaks down cache-control headers into steps that even I can understand. I’ll be using this a reference for sure.

Sunday, November 25th, 2018

Quick Note: Setting up a localhost on a Mac | scottohara.me

Okay, I knew about the Python shortcut—I mentioned it in Going Offline—but I had no idea it was so easy to do the same thing for PHP. This is a bit of a revelation for me!

Once in the desired directory, run:

php -S localhost:2222

Now you can go to “localhost:2222” in your browser, and if you have an index.html or .php file in your root directory, you’re in business.

Wednesday, September 26th, 2018

How to Build a Low-tech Website?

This is fascinating! A website that’s fast and nimble, not for performance reasons, but to reduce energy consumption. It’s using static files, system fonts and dithered images. And no third-party scripts.

Thanks to a low-tech web design, we managed to decrease the average page size of the blog by a factor of five compared to the old design – all while making the website visually more attractive (and mobile-friendly). Secondly, our new website runs 100% on solar power, not just in words, but in reality: it has its own energy storage and will go off-line during longer periods of cloudy weather.

Ping! That’s the sound of my brain going “service worker!”

I’ve sent them an email offering my help.

Tuesday, July 10th, 2018

StaticGen | Top Open Source Static Site Generators

There are a lot of static site generators out there!

When 7 KB Equals 7 MB - Cloud Four

I remember Jason telling me about this weird service worker caching behaviour a little while back. This piece is a great bit of sleuthing in tracking down the root causes of this strange issue, followed up with a sensible solution.

Tuesday, May 29th, 2018

Web Push Notifications Demo | Microsoft Edge Demos

Push notifications explained using astrology. But don’t worry, there’s also some code, just in case you prefer your explanations to also include models that actually work.

Tuesday, February 27th, 2018

Responsive Components: a Solution to the Container Queries Problem — Philip Walton

Here’s a really smart approach to creating container queries today—it uses ResizeObserver to ensure that listening for size changes is nice and performant.

There’s a demo site you can play around with to see it in action.

While the strategy I outline in this post is production-ready, I see us as being still very much in the early stages of this space. As the web development community starts shifting its component design from viewport or device-oriented to container-oriented, I’m excited to see what possibilities and best practices emerge.

Friday, January 26th, 2018

The Power of Serverless

Chris has set up a whole site dedicated to someone-else’s-server sites with links to resources and services (APIs), along with ideas of what you could build in this way.

Here’s one way to think about it: you can take your front-end skills and do things that typically only a back-end can do. You can write a JavaScript function that you run and receive a response from by hitting a URL. That’s sometimes also called Cloud Functions or Functions as a Service, which are perhaps better names, but just a part of the whole serverless thing.

Thursday, January 18th, 2018

Finding Dead CSS – CSS Wizardry

Here’s a clever idea from Harry if you’re willing to play the long game in tracking down redundant CSS—add a transparent background image to the rule block and then sit back and watch your server logs for any sign of that sleeper agent ever getting activated.

If you do find entries for that particular image, you know that, somehow, the legacy feature is potentially still accessible—the number of entries should give you a clue as to how severe the problem might be.

Sunday, January 14th, 2018

russellgoldenberg/scrollama: Scrollytelling with IntersectionObserver.

This looks like a handy JavaScript library for scroll-based events. But “scrollytelling?” No. Just …no.

Sunday, December 3rd, 2017

Tuesday, October 31st, 2017

Netflix functions without client-side React, and it’s a good thing - JakeArchibald.com

A great bucketload of common sense from Jake:

Rather than copying bad examples from the history of native apps, where everything is delivered in one big lump, we should be doing a little with a little, then getting a little more and doing a little more, repeating until complete. Think about the things users are going to do when they first arrive, and deliver that. Especially consider those most-likely to arrive with empty caches.

And here’s a good way of thinking about that:

I’m a fan of progressive enhancement as it puts you in this mindset. Continually do as much as you can with what you’ve got.

All too often, saying “use the right tool for the job” is interpreted as “don’t use that tool!” but as Jake reminds us, the sign of a really good tool is its ability to adapt instead of demanding rigid usage:

Netflix uses React on the client and server, but they identified that the client-side portion wasn’t needed for the first interaction, so they leaned on what the browser can already do, and deferred client-side React. The story isn’t that they’re abandoning React, it’s that they’re able to defer it on the client until it’s was needed. React folks should be championing this as a feature.

Monday, September 25th, 2017

Why it’s tricky to measure Server-side Rendering performance

A good analysis, but my takeaway was that the article could equally be called Why it’s tricky to measure Client-side Rendering performance. In a nutshell, just looking at metrics can be misleading.

Pre-classified metrics are a good signal for measuring performance. At the end of the day though, they may not properly reflect your site’s performance story. Profile each possibility and give it the eye test.

And it’s always worth bearing this in mind:

The best way to prioritize content by building a static site. Ask yourself if the content needs JavaScript.

Thursday, September 21st, 2017

Killing Old Service Workers for the Greater Good – Hackages Blog

Ooh, this is a tricky scenario. If you decide to redirect all URLs (from, say, a www subdomain to no subdomain) and you have a service worker running, you’re going to have a bad time. But there’s a solution here to get the service worker to remove itself.

The server-side specifics are for NGINX but this is also doable with Apache.

Monday, September 11th, 2017

No space left on device – running out of Inodes – Ivan Kuznetsov

This blog post saved my ass—the Huffduffer server was b0rked and after much Duck-Duck-Going I found the answer here.

I’m filing this away for my future self because, as per Murphy’s Law, I’m pretty sure I’ll be needing this again at some point

Monday, August 7th, 2017

Progressive Progressive Web Apps - Tales of a Developer Advocate by Paul Kinlan

Paul goes into detail describing how he built a progressive web app that’s actually progressive (in the sense of “enhancement”). Most of the stuff about sharing code between server and client goes over my head, but I understood enough to get these points:

  • the “app shell” model is not the only—or even the best—way of building a progressive web app, and
  • always, always, always render from the server first.

Thursday, July 20th, 2017

Beaker | Peer-to-peer Web browser. No blockchain required.

Here’s an intriguing project—peer-to-peer browser and hosting. I thought it might be using the InterPlanetary File System under the hood, but it’s using something called Dat instead.

It’s all very admirable, but it also feels a little bit 927.

Thursday, March 30th, 2017

Creating my first HTTP server in node.js | Charlotte Jackson, Front-end developer

Charlotte’s step-by-step account of setting up a Node server is going to be invaluable if and when I get around to dipping my toes in those waters.

Friday, February 3rd, 2017

Isomorphic rendering on the JAM Stack

Phil describes the process of implementing the holy grail of web architecture (which perhaps isn’t as difficult as everyone seems to think it is):

I have been experimenting with something that seemed obvious to me for a while. A web development model which gives a pre-rendered, ready-to-consume, straight-into-the-eyeballs web page at every URL of a site. One which, once loaded, then behaves like a client-side, single page app.

Now that’s resilient web design!