I'm a web designer and developer living in Portland, OR. I write about art, maps, design, and the internet.
Over the past twenty years, I've gone through my share of cameras. I've used phones, digital cameras, medium format, rangefinders, plastic toy cameras, and disposable cameras. In 2018 I bought a Fuji Klasse S from Japan. When I clicked the buy now button I had no idea that this camera would end the revolving carousel of cameras and become my main carry-everywhere camera for eight years. <div…
Recently I was pairing with a seasoned front-end developer and I told him to "just use dollar sign zero". He looked at me like I was having a stroke. Apparently, this is not a well known feature of Chrome DevTools (and other chromium-based browsers like Brave). Here's how it works: In the Elements view of DevTools select the element you're interested in. Go to the console tab. Type $0 and hit…
<section class="snippet"> Basic test import { newE2EPage } from " @stencil /core/testing"; describe ("example", () => { it ("should render a my-comp", async () => { const page = await newE2EPage (); await page. setContent ( `<my-comp></my-comp>` ); const el = await page. find ("my-comp"); expect (el). not . toBeNull (); }); }); </section> <section class="snippet"> Type inside an input const input…
I'd been meaning to play with some of the technologies being referred to collectively as "Progressive Web Apps" for a long time. I was slightly intimidated by all the new terms and strategies, but so much of the ethos surrounding PWAs resonated with me: performance, responsiveness, user-centered design and development. Every overview article about Progressive Web Apps had me nodding along,…
In the last ten years, developers have been on a quest to find the best way to implement icons in a digital product. We've wandered through low fidelity gifs, elaborately Photoshopped png sprites, icon fonts (remember those?), SVG sprites, and finally inline SVGs. Recently I've been helping out with the DX for my company's extensive icon library. The solution we've developed is the next step in my…
Recently, while working on a new component library , it became clear that Stencil's default readme.md documentation strategy was not going to cut it. I needed a way for designers and devs who would be using the new set of components to see them rendered in isolation, and to get a sense of what was possible with them via props. Coincidentally, this is exactly what Storybook aims to deliver. As I…
After designing and developing web experiences for about 6 years my views on what is important have evolved. People naturally change and grow over time, and I'm no exception. In addition to natural personal growth, working on the web is inherently dynamic and quick to evolve. Tools change, best practices change, teams change. Most of it happens slowly, like the proverbial frog in the gradually…
Over my career as a designer & developer for the web, I've worked with some ridiculously intelligent developers. These are people who write databases for fun, people who can easily hash out the finer points of a complicated REST API and then implement it that day . These are people who are solving ridiculously challenging problems with beautiful algorithms. They're writing in seriously hardcore…
It's no secret that I like Grunt. As somebody who was running tasks like minification, image compression, and css preprocessing by hand, Grunt was a breath of fresh air. But like any technology, there was a learning curve. I had to find the right grunt plugins, learn how to configure and run everything, and also update my tasks as Grunt made breaking changes between versions. After several months…
> Edit: I now use gh-release for this now as it saves your GitHub credentials and you can use it with or without Grunt. If you've used GitHub releases you know how great they can be. Essentially you draft a new release on any of your GitHub repositories, choose a specific tag, enter a title and a description, and click a button to create a neat and tidy little package that users can download and…
If you've ever used GitHub Pages , you know how easy and convenient it is to be able to deploy a quick static site by pushing to a remote. Being able to type git push origin gh-pages and have your site immediately live on a publicly accessible domain is hugely satisfying and you end up experimenting way more, pushing up micro-sites and project pages because it's easy. GitHub pages does have a…
Switzerland has become known for beautiful cartography. It should come as no surprise (seeing that their nation is almost entirely mountainous) that their presentation of relief is especially effective. The vast changes in elevation presented in this relatively small country necessitate huge amounts of work and thought on the part of cartographers. General Guillaume-Henri Dufour founded the…
Recently, while working on a side-project , I ran into a problem trying to clear columns of different heights while using a traditional float-based grid system. Upon hearing me complain aloud (a common occurence when I deal with css layout), another developer I was working with at the time showed me an interesting hack solution to the problem which he had learned from a developer he had worked…
The USGS began mapping the country in 1879 and has been the main mapping agency of the United States ever since. The best known USGS maps are the 1:24,000-scale topographic maps, also known as seven point five minute quadrangles. Originally meant to help with mineral exploration, these maps quickly became the defacto standard for trusted topological information in the United States. From 1947 to…
<p class="caption">Cover photo taken by <a href="http://ryanresella.com">Ryan Resella</a> and licensed under Creative Commons.</p> Max Ogden took the stage at Realtime Conf with passion, a love of cats, and a stellar beard. His talk ranged from the node community to the fields that are a frontier for openness. Here are my quickly written notes: Node and NPM Node has several non-blocking work-flows…
<p class="caption">Cover Image from <a href="http://www.flickr.com/photos/cvonposer/6401515437/">cvonposer</a> on Flickr. Licensed under Creative Commons</p> At Realtime Conf 2013, Aral Balkan gave an awesome talk about data ownership and the future of the open source experience. He covers a lot of ground ranging from Apple, Google, and the NSA to cyborgs and design. I've written down the…
At work the other day I was thinking out loud about a strategy for generating full-color icons with a web font. Essentially the idea is to use :before and :after pseudo elements to provide a foreground and background to your icon, thusly giving it three colors. If you're a visual learner, it works like this: People at my work tend to take pipe-dreams very seriously, so it wasn't all that…
Arguably the highpoint of American Art in the 20th century, Abstract Expressionism represented an undeniable paradigm shift in the way the Western art world made and thought about art. Abstract Expressionism was a new approach to studio art. All at once innovative, phallic, and raw, Ab-Ex generally presented little or no figurative elements, many times relying strictly on the "Painterly Gesture"…
Immediately on its release, I fell in love with iA Writer. Like Clear, Solar, or the now assimilated Sparrow, iA Writer is one of a new generation of apps that strives for focus rather than features. Reading their [blog](http://informationarchitects.net/blog/responsive-typography-the-basics/ "Responsive Web Typography, the Basics."), one gets a true sense of just how in depth they went while…