javascript

Toxic Swamp

Monetize attention to earn a passive, borderless income on your website.
git.habd.as/comfusion/toxic-swamp

HTML / CSS / JavaScript / Wasm

Toxic Swamp is a crypto miner add-on for After Dark providing an interactive toolbar UI enabling content creators a means of monetizing their creative work.

Fetch Inject

Fetch Inject implements a Web performance optimization technique known as Fetch Injection for managing asynchronous JavaScript dependencies.
git.habd.as/jhabdas/fetch-inject

JavaScript

Fetch Inject was conceptualized and developed for After Dark to make it possible to deep link to full-sized Image Gallery images without blocking page load while working on the Hall of Mirrors add-on module.

Awesome React Boilerplates

7 minute read Updated

Awesome React starter kits to kick your app development into high gear.

Not interested in reinventing the wheel? Neither am I. Here’s a short list of awesome boilerplates – sometimes called starter kits or seeds – for getting your React applications off the ground in a hurry.

These boilerplates weren’t taken from any list, however awesome it might be. Rather, they’ve gained enough mindshare to find me outside The Stream.

So without further ado…

Managing Async Dependencies with JavaScript

4 minute read Updated

Managing asynchronous dependencies with JavaScript can be a nightmare. But there's a better way. It's called Fetch Injection.

I’ve long been inspired by the work of Steve Souders. Back in 2009 Steve published an article titled Loading Scripts Without Blocking, which I first became aware of and studied during my time at Orbitz – where every millisecond a user waited for the page to load had a measurable impact to the business.

Steve’s work was instrumental for performance-critical websites and apps, and even inspired Nicholas C. Zakas to write Loading JavaScript without Blocking the same month Steve’s book Even Faster Web Sites was published.

Putting WordPress into Hyperdrive

1 minute read Published

Loading Pages Faster than the Speed of Light with Fetch Inject, Redis, Vultr, Load Impact and LEMP.

Tools for Building Rich Web Apps

3 minute read Updated

After recently planning to do a survey of tools for building rich web apps I stumbled across github.com/codylindley/frontend-tools, which claims to be an opinionated list of tools for building front-end applications. For those new to building modern web applications, it’s certainly easier to take in than larger lists like github.com/joyent/node/wiki/modules. But lists aren’t necessarily the best place to start for putting an application together. At least not where the rubber hits the road.

Update 2017-04-09: This post is out of date. Lately it seems Marko JS may become the new hotness following React and, for Web dev in general, look into JAMstack.

Serverless Email Forwards with SES and Lambda

6 minute read Updated

How to create your own email forwarding service using Serverless and Lambda.

In 2016 this website underwent a major overhaul. I took it off my simple Docker set-up and moved it to S3 with CloudFront. The process of which enabled me to reduce hosting costs by 80% all while increasing reach and decreasing page load times globally.

But static websites have a perceived disadvantage: they’re static. They have no inherent dynamic functionality. What will you do when you want to add some piece of interactivity—a contact form, or an email distribution list? Sure you could go with TypeForm or TinyLetter. But you could also create your own service using FaaS (a.k.a. Serverless). Afterall, Serverless isn’t just a fad, and it’s not going away anytime soon.

Telltale Signs Your React App Isn't SEO Friendly

3 minute read Published

Is Your React App Invisible to Google? Here's how to find out.

As you may or may not be aware NPM and React have caused a Cambrian explosion in the number of Awesome React Boilerplates out there. But did you know many of those boilerplates and the web apps that build upon them aren’t SEO friendly, and possibly even invisible to Google? Sites experiencing SEO issues are more likely to be buried deeper in Search results and unlikely to see the Organic traffic they’d otherwise enjoy sans marketing efforts.

In this post we’ll explore some of the telltale signs your React app isn’t SEO friendly and what you can do about it.

The Holy Grail of Rich Internet Applications

2 minute read Updated

Learning about Isomorphic Web Applications from Airbnb.

One of the largest perceived drawbacks to creating a SPA or other Rich Internet Application is that they’re not SEO friendly or very accessible. With the advent of technologies such as ARIA, HTML5 and Node.js, things are changing. Web apps are becoming more usable and accessible, though also making them crawlable and highly performant is a formidable challenge.

Node.js Debugging Primer

5 minute read Updated

Learn how to get started debugging Node.js applications using Jake.

So I’m putting together this killer new JS front-end development stack called Brunch with Panache, which uses Jake tasks to kick off a custom set of commands for building and managing the app, and I hit a bug while code was running in Node.js. So what now?

Web Development and Debugging Tools

2 minute read Updated

Following is a list of cross-browser/platform web development and debugging tools useful for client-side developers. Depending on the application, one or all of these tools can be valuable in completing work on a website front-end.