Categories
Links

A Deep Dive on Z-Index Usage

How do you make sure your annoying popup is shown on top of every other element in the page, when you don’t know how many there are, who wrote them, and how bad they wanted their elements to be on top? That’s when you set your z-index to 100, or maybe 999, or maybe, just maybe 99999 to be really sure yours will win. That, at least, is how I write my CSS. In the rest of this post, we will look at millions of z indices to see what everyone else does.

Of course, if you make websites for a living you’ll find this interesting. Like most things available here.

Categories
Links

Rough.js – A “Hand-drawn” Javascript Vector Library

Neat tool for drawing cutesy vector shapes:

Rough.js is a light weight (~9kB gzipped) graphics library that lets you draw in a sketchy, hand-drawn-like, style. The library defines primitives to draw lines, curves, arcs, polygons, circles, and ellipses. It also supports drawing SVG paths.

There’s a lot of nuance to this, too. For example, there are 5 distinct fill styles (hachure, solid, zigzag, cross-hatch, or dots) and it supports Web Workers with the optional Workly library.

Categories
Links

Retrobatch, a new batch image processor from Flying Meat

Looks like a heck of a swiss-army-knife of a tool. It’s node-based, supports CoreML image classification and sorting, and yep… it supports AppleScript. FM’s suggestions for new use cases contain fun, weird, stuff like “Read an image from the clipboard, apply a drop shadow, and write it right back to the clipboard to paste into another app.”

Retrobatch is available as a 14 day free trial, and licenses start at $29.99. Props to Flying Meat for being one of those third-party Mac development houses that just keeps going.

Categories
Links

CSS Sans

A font constructed entirely by CSS. It is, essentially, a programmatic realtime typeface. I love how it degrades for older versions of IE:

It’s not what I’d consider practical for production use. Still, CSS Sans is a hell of a demonstration of how far CSS has come since Microsoft shipped Internet Explorer 3 in 1996, which was first browser to implement some of the CSS1 spec (CSS v1 was not yet a W3C recommendation).

Categories
Links

Crunch, an impressive new PNG compression tool for macOS

Crunch is a macOS tool for lossy PNG image file optimization. It combines selective bit depth, color type, and color palette reduction with zopfli DEFLATE compression algorithm encoding using embedded versions of the pngquant and zopflipng PNG optimization tools.

The example images are impressive. Obviously, you won’t want to use this on your archival or source images. I did a quick test on a few of sites at work, and was able to take some PNGs w/ transparent backgrounds down from 1.5mb to 130kb. That’s a greater than 10x reduction in size. Jimminy.

Categories
Links

Layout Land: CSS Grid

Jen Simmons is doing a great job of introducing the core concepts of CSS Grid with this video series on Layout Land. These videos have been a huge help to me getting up to speed on the state of the tech. Highly recommended.

Categories
Links

A List Apart going ad-free, patron-supported

ALA was instrumental to my start in this business. I both bless and curse them for this. Here’s the Patreon. It’s a move I am fully in favor of. Death to ads.

We’re getting rid of advertisers and digging back to our roots: community-based, community-built, and determinedly non-commercial. If you want to highlight local events or innovations, expand your skills, give back, or explore any other goal or idea, we’re here to support you with networking and backing from the community.

Categories
Links

Kill sticky headers

Like most web trends intended to increase “engagement” (nobody knows what this actually means), sticky bars are overused and poorly used. Kill ’em all with this bookmarklet.

Categories
Links

#c0ffee is the color

A beautiful list of valid HTML colors which are also english-language words. There’s a poetry to how some of these match up; “defied / #DEF1ED” for example seems perfect somehow?

Categories
Links

WebGL demo: What Are You Syncing About?

Quite the demo, in-browser live rendered 3D animation and music using Three.js. Just press start. (via waxy)

Categories
Links

Stop using device breakpoints

Adam Silver with some good horse sense. This is a surprisingly common practice here in the Year of Luigi 2017. It’s mostly surprising because we spent so much time talking about this during the original web standards push that I’d hoped it had sunk in.

Categories
Links

flickgame

Tiny, web-based, game engine for creating games contained to 16 drawings (each an individual color).

Makes me think of WarioWare Inc.

Categories
Links

Hex Preview

Dead simple hex color scheme web app. Just type in your hex codes, and it will update in real time. You can add any number of colors at once to see how they look together, too.

Categories
Links

All Major Browsers Fall At Pwn2Own Day Two

What’s that they say about castles built on sand?

Two researchers on Thursday took down the four major browsers, Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, and Apple Safari, as Pwn2Own, the annual hacking contest that runs in tandem at CanSecWest, wound down in Vancouver.

Categories
Links

gulp.js – the streaming build system

Some crazy webdev magic. I barely understand this enough to know that it looks awesome. Highly recommend viewing the introduction slideshow.

Categories
Links

sql.js: A port of SQLite to JavaScript

This is ridiculous and great:

sql.js is a port of SQLite to JavaScript, by compiling the SQLite C code with Emscripten. no C bindings or node-gyp compilation here.

Once again, via Jesper.

Categories
Links

slick – the last carousel you’ll ever need

A full-responsive, CSS3-enabled, touch-ready, arrow-key supporting, draggable carousel that you can instance with one line.

Having built and used probably a dozen different image slider / content carousels this one looks like it covers all of the bases and with minimal markup bullshit. Color me impressed.

Categories
Links

grid

Drag and drop library for two-dimensional, resizable and responsive lists.

I’ve seen this done before but not so efficiently, responsively, and with no dependencies. (via Jesper)

Categories
Links

Font-To-Width

Font‑To‑Width (FTW!) is a script by Nick Sherman and Chris Lewis that takes advantage of large type families to fit pieces of text snugly within their containers.

Can definitely see using this for some datavis stuff. There is some FOUT (Flash of unstyled text) to deal with though.

Categories
Links

obelisk.js

Obelisk.js is a JavaScript Engine for building isometric pixel objects.

… and it looks like a million bucks. This may have to be the basis for my life’s work: A modern remake of the SNES version of SimCity. (via Jesper)