はてなブックマーク

Brainstorming a handful of new CSS organization acronyms August 26, 2022 When I first heard Nicole Sullivan talk about OOCSS, I thought “Oooh, smart.” When I read Jonathan Snook’s riff on that idea in SMACSS I thought “Oooh, smart.” When I heard Harry Roberts say “never use IDs in your CSS files” I said “Oooh, smart.” But when BEM and roboclasses came around… I didn’t have the same reaction. I nev

The other day Jen Simmons solicited some open feedback about WebKit, asking what they might “need to add / change / fix / invent to help you?” First of all — brave. Brave of Jen to open her timeline up for everyone to vomit their opinions and snark. I, too, contributed my own bits of vomit to the thread. Dialog inputmode Helping to rapidly improving web components Less one-off stuff for Safari (10

Or... How I shaved ~33s off my page load by fixing fonts March 20, 2020 A while back I was able to shave off ~33 seconds from my page load time by fixing how I load fonts. Shaved off ~33s from my page load this morning by... fixing how I load fonts? pic.twitter.com/jxcOaf1aS7 — Dave Rupert (@davatron5000) November 5, 2019 Surprising, I know! In my previous attempts to follow cutting-edge best prac

I’ve always abided in the idea that “HTML is accessible by default and then we come along and mess it up.” In a lot places this is very true and by just using a suitable HTML element instead of a generic div or span we can have a big Accessibility impact. But that’s not always the case. There are some cases where even using plain ol’ HTML causes accessibility problems. I get frustrated and want to

I’m interested in the User Experience costs of third-party scripts. Every client I have averages ~30 third-party scripts but discussions about reducing them with stakeholders end in “What if we load them all async?” This is a good rebuttal because there are right and wrong ways to load third-party scripts, but there is still a cost, a cost that’s passed on to the user. And that’s what I want to in

An optimistic design choice that ends up compounding complexity April 05, 2018 #rwd I’m currently in the process of rolling out yet another Card UI. Since Pinterest, the end-state of every list view with decent imagery is to become a Card UI. But thar be dragons! I’m here to share some of the pitfalls Paravel have encountered building Card UIs over the years. Matching Card Heights Rendering a grid

Using a single path SVG, a smidge of CSS, and ~6 lines of JavaScript March 29, 2018 For a client project we tasked ourselves with building out one of those cool radial progress bars. In the past, we’ve used entire Canvas-based based charting libraries (156k/44k gzip), but that seemed like overkill. I looked at Airbnb’s Lottie project where you export After Effects animations as JSON. This is cool

Two ways to break CSS Grid and how to fix it September 05, 2017 As a Front-End developer nothing bothers me more than seeing an unexpected horizontal scrollbar on a website. While building out a checkout layout with CSS Grid I was surprised to find something mysterious was breaking the container. I thought Grid sort of auto-solved sizing. Eventually I found two ways to break CSS Grid. As it would

And the dilemma of supporting older browsers August 04, 2017 I typically take a conservative approach to building websites, layering in modern functionality in order to reduce code and technical debt and extend my client’s investment further into the future. A recent project uses Grid with Flexbox fallbacks and minimal ES6 features that are all ran through Autoprefixer and Babel for maximum automa

Web development moves fast. This post is old. A new step-by-step guide to setting up a Windows 10 web developer environment is now available. After getting Jekyll on Bash on Ubuntu on Windows1 up and running I said my next challenge was getting Ruby on Rails and I have some good news: You’ll see Linux is being reported as the Operating System. That’s because Bash on Ubuntu on Windows is Linux, jus

A follow-up post to my 2012 "Mo’ Pixels, Mo’ Problems" article for A List Apart June 14, 2013 #rwd Lots has happened in the world of Responsive Images since I wrote Mo’ Pixels, Mo’ Problems. And by lots, I mean nothing at all. It’s been over a year since The Great WHATWG Responsive Image Debacle and we’re still at square one. Browsers want to implement srcset because “it’s easy”, but lots of devel

Video.js is a pretty, smooth, CSS-styleable video polyfill and my Google-Fu didn't return any responsive examples, so I grokked this out. May 03, 2012 Now, Uncle Dave is no stranger to video in responsive web design and I currently have a situation where I need to use Video.js on a project. Out of the box, Video.js isn’t super flexible. My first attempts at responsivizing1 it went awry, but I even

We love texture at Paravel. When you settle on a good texture, there’s nothing better than a slighly embossed horizontal rule to give a letterpress like feel in between sections. Typically, we’d use a 1×2px image based approach —background-images on nested DIVs (CSS2) or multiple background-images (CSS3)— to accomplish this effect. Challenging ourselves to reduce HTTP Requests, we came up with a s

Oh wow! Lettering.JS now has it's own website with a little mini-gallery. Check it out to see how other people are using it. Paravel has just wrapped up an exciting secret project with three of the web's most talented designers: Jason Santa Maria, Frank Chimero, and Naz Hamid. These designs are epic, like 18,123px epic. Working with these guys was a complete joy. There were a few fun development c