Most cited
Posts that commenters keep linking to, ranked by how many different people have cited them in Hacker News comments. 324 posts.
Bret Victor Redesigns Classic Strogatz Paper (2011)
This page presents a scientific paper that has been redesigned as a sequence of illustrations with captions. This comic-like format, with tightly-coupled pictures and prose, allows the author to depict and describe simultaneously — show and tell.
Animated GIFs the Hard Way
When doing the new website for the Sublime Text 2.0 launch, instead of just screenshots, I wanted to have animations to demonstrate some of its features. One of the criteria was that the animations should work everywhere, from IE6 to an iPad. This ruled out two common video options, Flash and the <video> element…
Addition Font
Shaping When laying out text using a font file, the code points in the string are mapped one-to-one to glyphs inside the file. A glyph...
Sound
Interactive article explaining how sound works.
This Page is Designed to Last
The end of the year is an opportunity to clean up and reset for the upcoming new semester. I found myself clearing out old bookmarks—yes, bookmarks: that formerly beloved browser feature that seems to have lost the battle to 'address bar autocomplete'. But this nostalgic act of tidying led me to despair.
Curves and Surfaces
Interactive article explaining how curves and surfaces are modeled.
Font with Built-In Syntax Highlighting
An experiment in javascript-free syntax highlighting, made possible by opentype contextual alternates and COLR table
Juice
Notes about creative coding on the Web.
Top Programming Fonts
Technologist, podcaster, and inventor. Founder of the 5by5 podcast network and Fireside.
Ligatures in programming fonts: hell no (2019)
Butterick’s Practical Typography
The Door Problem (2014)
“So what does a game designer do? Are you an artist? Do you design characters and write the story? Or no, wait, you’re a programmer?”
Crafting Subtle & Realistic User Interfaces
Mac, iPhone & iPad interface design consulting, writing and speaking featuring tutorials, interviews, techniques and thoughts on crafting & building beautiful software. By Mike Rundle.
Why we skip Photoshop
When designing a UI we usually go right from a quick paper sketch to HTML/CSS. We skip the static Photoshop mockup. Here are a few reasons why we skip photoshop: You can’t click a Photoshop mockup. This is probably the number one reason we skip static mockups. They aren’t real. Pap…
Mistakes in Web Design
The 10 most egregious UX offenses against users. Web design disasters and HTML horrors are legion, though many usability atrocities are less common than they used to be.
Apple's New Map
Four years in the making, it covers just 3% of the U.S.’s area and 4.9% of its population:
What happens when you ask people to draw a bike (2016)
In early 2016 I eventually decided it was my turn to take part in this project. I decided my job was going to be presenting the potential and the beauty inside these sketches. I selected those that I found most interesting and genuine and diverse, then rendered them as if they were real. I became the executor of these…
Crash Course: Design for Startups
A detailed brain dump about how to go about starting web design for startups. Including design process, inspiration and required reading.
Don’t use “click here” as link text (2001)
Both of these sentences divulge too much of the mechanics of getting the Amaya software. If you want to call your reader to action, use something like:
Flat UI Elements Attract Less Attention and Cause Uncertainty
In an eyetracking experiment comparing different clickability clues, weak and flat signifiers required more user effort than strong ones.
Interaction Models
Interaction models move beyond turn-based AI interfaces by handling multimodal, real-time collaboration natively across audio, video, and text.
Learn CSS layout the pedantic way (2015)
Bureaucrat Conrad, you are technically correct - the best kind of correct. I hereby promote you to grade 37. - Number 1.0 (Futurama, S2E15 )
500 Byte Images: The Haiku Vector Icon Format
Haiku uses a custom vector image format to store icons. This is surprising both because most OSes consider bitmaps to be totally sufficient to represent icons and because there are plenty of vector graphics formats out this (e.g. SVG). The goal of the Haiku Vector Icon Format (HVIF) is to make vector icon files as…
My Custom CSS Reset
I have a set of baseline CSS styles that come with me from project to project. In the past, I'd use a typical CSS reset, but times have changed, and I believe I have a better set of global styles!
Atkinson Dithering (2021)
When the Macintosh was released in 1984, it featured a square-pixeled black-and-white display at a crisp 72 dots per inch. The 512x342 resolution might seem less than impressive today, but for the time it was a pleasantly high-resolution consumer-grade computer. Among other things, the monospaced Monaco 9pt bitmap…
How To Scroll
Scroll-based interaction is incredibly popular for interactive storytelling . There are many compelling reasons for this, yet scrolling is surprisingly nuanced and easy to break. So here are five rules for employing scrolling effectively.
CSS px is an Angular Measurement
The “px” unit in CSS doesn't really have anything to do with screen pixels, despite the poorly chosen name. It's actually an non-linear angular measurement. The formulæ to convert between radians and px are as follows: