desandro.comDavid DeSandro

Designer, developer running Metafizzy Alexandria, VA Photo by Lachlan Hardy Masonry Cascading grid layout library 2009–present Masonry in use Beyonce’s Tumblr uses Masonry Tumblr Search Erik Johansson Kristian Hammerstad Isotope Filter & sort magical layouts 2011–present Show all Orange Green Blue Original order ABC 123 M 16 C 8 J 3 F 7 N 2 B 13 E 1 I 10 P 14 A 6 O 11 H 12 G 9 Q 4 D 5 L 15 Isotope in use Rimmel London nasa.gov Whole Foods Kia Flickity Touch, responsive, flickable galleries 2015–present 1 2 3 4 5 Flickity in use The Field Engadget Tony Hornecker Artsy Packery Gap-less, draggable layout library 2013–present Drag me Packery in use Niice Stutterheim Raincoats Studio AKA The Tonight Show with Jimmy Fallon Other projects Cub n Pup Puzzle game demo. 60 levels to play. Huebee One-click color picker Draggabilly Make that shiz draggable imagesLoaded JavaScript is all like “You images done yet or what?” Web Audio Arpeggiator Make your own bonkers Mega Man level music Articles 2009–2012 Logos BenCodeZen Fair Economy Teleo License Chest Indie Hackers Logo Pizza vol. 2 Hot & ready logos for sale Various Pre Six Trillion. The number of miles in a light year. 12 leaves for each 0 in a trillion Crypto Craft Smalhaus Logo Pizza vol. 1 Metafizzy Read Metafizzy re-brand design process Fizzy bear shirts available on Cotton Bureau Various Shepherd Netflix Atlas Mealio RGB Schemes, a VR gaming start-up. Logo can be rendered as 3D object for VR. Roast ambigram Sunset Spark Prerender.cloud Fetchy wyDay LimeLM Bootstrap, unused -- Bower Bower. Read design process . Bower shirts available on Cotton Bureau Bower.io Twitter Flight framework wordmark Flight F-wing Macaw Swift. The muse may or may not be Taylor Swift. Summingbird . ∑ is the symbol for sum. Spot it? Pants build system Parquet format Refactor Refactor shirts available on Cotton Bureau Halftone & pixel portraits Photo by Justin Higuchi . Made for Electric Objects . 2015. Photo by Nelson Davis, AIP Corporation . Made for Electric Objects . Licensed CC-BY-SA . 2015. Photo by Lies Thru a Lens . Made for Electric Objects . 2014. Photo by Rakib Hasan Sumon . Made for Electric Objects . 2015. Photo by Marc Wathieu . Made for Electric Objects . Licensed CC-BY-NC-SA . 2014. Photo by Shari Alisha . Licensed CC-BY-NC-SA . 2015. These portraits are an ongoing project I've been working on for years. It’s inspired by (or a derivative of) Chuck Close. I’m fascinated by how you can simplify an image and still make sense of it. Faces work best as our brains have special programming for facial recognition. Taking an image of someone, you can reduce it to a handful of shapes and colors and still recognize the person. When you look up close, it’s a bunch of meaningless circles and squares. When you step back and view it all, you can’t help but see the person. Not just see them, but also notice details and imperfections. All from simplistic pieces. What’s really there? The universe is like this at both ends of its scale. The space inside an atom is mostly nothing. The space in between stars is mostly nothing. But when you view these elementary pieces together, you see something interesting. Photo by Charles Kerr . Made with Breathing halftone . 2014. Photo by luke chan . Made with Breathing halftone . Licensed CC-BY-NC-SA . 2014. Photo by Troy Holden. Made with Close Pixelate . 2010. Photo by Troy Holden. Made with Close Pixelate . 2010. Photo by Hamed Saber . Made with Close Pixelate . 2010. Self portrait. 2015. CodePen Drag, resize, collapse editor panels 2015 nclud.com v3 Front-end development 2012 2012 Year on Twitter Front-end development 2012 BeerCamp 2011 Winner, .net Awards 2011 Site of the year 2011 Speaking Read color hex codes How to interpret hex codes into visible colors, just like I do because I’m colorblind. Video . Slides dotCSS, Paris, November 2018 Practical UI physics Learn basic physics for UI Slides . Demos on Codepen . Demos on GitHub Develop Denver, August 2015 5 minute physics Code Genius, Brooklyn, April 2015 Bower introduction Getting started with front-end package management Converge Richmond VA, October 2013 Open source ain’t free The cost of open-source development and why I started Metafizzy Slides ValioCon, San Diego, June 2012 ; Fronteers, Amsterdam, October 2012 Touchy-feely development Future Insights Live, Las Vegas, April 2012 nclud.com front-end dev Washington DC, May 2012 Mobile Safari: Bring your machete Tips and tricks for iPhone front-end development Front-Trends, Warsaw, April 2012 Motion/Emotion How to use animation to delight users AOL, Dulles VA, July 2011 Blogs Metafizzy blog Company blog — running a small business & front-end development dropshado.ws Front-end development minutia Smallblog I don't know how to put this in words but this is me trying Run run cycle Run cycle gifs Writing A Pixel-Perfect CodePen logo 2017 CSS-Tricks: Staggering animations 2016 CSS-Tricks: Creating responsive, touch-friendly carousels with Flickity 2015 Web Animation using JavaScript : Foreword 2015 Intro to CSS 3D transforms Written for 24 Ways . 2010. .net magazine: Create a zoomable user interface with CSS transforms How I made 2011.beercamp.com . Original source: ZUI Site Riot . 2011. Featured elsewhere Friends Talk Frontend Indie Hackers Fast Company Electric Objects Artist Interview CodePen Radio The Industry TXP Magazine ShopTalk Show Unmatched Style Chat Session DaBrook Web Education Podcast Favorites Sorry I Murdered Everyone, But I’m An Introvert Jonathan Harris - Beyond Flash Brian Moriarty - The Secret of Psalm 46 fat - What Is Open Source & Why Do I Feel So Guilty? 99% Invisible - Why city flags may be the worst-designed thing you've never noticed Wilson Miner - When We Build Why Generation Y Yuppies Are Unhappy The inverted lamp No “yes.” Either “HELL YEAH!” or “no.” The Christmas Tree KXVO Pumpkin Dance 가끔은 고양이와 춤을 춥시다 Your business card is CRAP! Oh my god. Oh. My. God. Web presence Twitter GitHub Dribbble CodePen Instagram Tumblr Contact Please use GitHub issues for support for Masonry , Isotope , Flickity , or my other projects. Sorry, but I am not available for personal support. Got it, what’s the email?...