Tags: web development

Super Tiny Social Icons [↗]

Under 1KB each! Super Tiny Social Icons are minuscule SVG versions of your favourite logos. The average size is 600 bytes. The logos are 400×400 & have a 512×512 viewbox. They will scale up and down to suit your needs.

Tiny social icons, handcrafted with InkScape. What’s not to love?

A Modern Front-End Workflow – Umar Hansa | Render 2017 [↗]

The audience can expect to learn hidden DevTools secrets but also how to adopt a modern development and debugging workflow. This talk is important for any web developer who wants to understand and debug the internals of a webpage quickly and with ease.

I love DevTools.

@Mentions from Twitter to My Website [↗]

An outline of how I used Indieweb technology to let Twitter users send @mentions to me on my own website.

A good write-up detailing how to add webmentions to a WordPress site.

TabTab.js [↗]

A simple, Accessible, 60+fps, easy-to-use animated tabs plugin for jQuery.

I don’t use tabs all that often, but I like the look of this, the animations are clean and well executed. Note, powered by Velocity.js.

Debugging Tips and Tricks [↗]

Writing code is only one small piece of being a developer. In order to be efficient and capable at our jobs, we must also excel at debugging. When I dedicate some time to learning new debugging skills, I often find I can move much quicker, and add more value to the teams I work on. I have a few tips and tricks I rely on pretty heavily and found that I give the same advice again and again during workshops, so here’s a compilation of some of them, as well as some from the community.

Lots of useful debugging advice, well worth a read.

Lighthouse [↗]

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any page on the web. It has audits for performance, accessibility, progressive web apps, and more.

A nifty tool that provides some helpful hints for improving site performance. I like that it doesn’t just tell you what you’re doing wrong, but shows lots of green ticks for the stuff you’re doing right.

Rellax [↗]

Rellax is a buttery smooth, super lightweight (1021bytes gzipped), vanilla javascript parallax library.

Looks like a nice library to add to my design tool belt.

How we built Twitter Lite [↗]

Details some impressive engineering on the new mobile.twitter.com application. Worth a read if you’re interested in website/app performance.

Grid Garden [↗]

A game for learning CSS grid layout.

As games go, it’s no Minecraft, but as a tool for learning CSS Grid, it’s pretty good.

How To Secure Your Web App With HTTP Headers [↗]

HTTP response headers can be leveraged to tighten up the security of web apps, typically just by adding a few lines of code. In this article, we’ll show how web developers can use HTTP headers to build secure apps.

Some good advice for securing your web apps.

◀ Older