These are the things I've written that are tagged "web development"

flickgame

Tiny, web-based, game engine for creating games contained to 16 drawings (each an individual color). Makes me think of WarioWare Inc.

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.

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.

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.

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.

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.

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)

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.

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)

Introducing the ‘mozjpeg’ Project

Mozilla announces a quest to fully-optimize JPEG compression with their own open source encoder. Snark: But why don’t they just contribute to WebP?

CSS3 text-align-last

Short and to-the-point post on the Adobe Web Platform blog about a cool new proposed CSS3 property: text-align-last. Finally, FINALLY, we can justify the last line of a paragraph tag. My god, it’s full of stars.

CSS Performance metrics from the creator of Bootstrap

A reasonable, if unscientific, look at the performance of various common CSS methods, comparing things like Attribute .vs. Class-based selectors, box-sizing resets, floats .vs. flexbox .vs. inline-block, and a lot more. Love that someone took the time to do this so I don’t have to.

Float Labels with CSS

Slick technique that is worth looking into for many applications. As someone who deals with a lot of form inputs both as a user and a designer, there are some useful ideas here.

websocketd

websocketd is a small command line tool that will wrap an existing command line interface program, and allow it to be accessed via a WebSocket. Sounds great. (via Jesper)

Structure.io homepage refresh

So, we just launched an update to the Structure Sensor homepage, and it features some neat HTML5 / CSS3 tech. I’m pretty happy with it. It required me to learn a few things, which I’ll hopefully have time to write about here soon. It also marks the first time I’ve ever encoded video in WebM! […]

Exploring canvas drawing techniques

A very well put-together interactive tutorial and examination of drawing using the HTML canvas tag. Even if you’re pretty up on things, you might learn something new.

Mock Response

A super simple, but super useful, little service that returns various HTTP status codes based the URL called. Helpful tool for testing how your app responds to every HTTP status.

Dnsyo – A DNS propogation tester

Looks like a handy little tool if you’re in the website business, and it even has a pithy one-line description: In short, it’s nslookup, if nslookup queried over 1500 servers and collated their results. Bonus points for being open source and installable via pip.

Introducing Harp – the static web server with built-in preprocessing

It slices, it dices, it generates static sites, it natively supports preprocessors like LESS and Stylus: Imagine you were choosing between PNG or JPEG for an image you wanted to serve. You would simply pick the right format for that use case because web servers support either, you need only drop the file in. That […]

Semantic UI

Yet another HTML/CSS/JS framework, but built so that the classes are understandable in english. It’ll create some HTML bloat, but it has a certain Applescript-y charm to it. The site is pretty snazzy, too. Very readable, very smooth.

Hello There

My name is Phil Nelson and I make beautiful objects for a troubled world in CSS, HTML, and JavaScript. I'm a designer / developer at Occipital.

Stuff I Make

My design portfolio on Dribbble.
Structure Sensor, a mobile 3D sensor that works great with iOS.
Liblr, like Mad Libs but for Twitter.
T-shirts and stickers designed by me.
Kreskin, A band/album name generator.

Contact Phil Nelson

Mail:
AIM: extrafuture
Twitter: @philnelson

Extra Future Is...

Phil Nelson designing + developing modern, standards-compliant web sites, and leaking brain goo all over the internet. He lives in California by way of Michigan, and is glad you're here.