Have you ever fretted that front-end web development moves so fast that if you stepped away for a while, you’d be lost coming back? Rachel Smith has: The hectic pace of needing to learn one thing after the next didn’t bother me so much because when I was 26 because I was quite happy to spend much of my free time outside of my day job coding. I was really enjoying myself, so the impression that I had to constantly up-skill to maintain my career wasn’t a concern. I did..

• 0 Comment

Zach did that thing where each of his blog posts has a special URL with the design of social image card that is screenshat by a headless browser (like Puppeteer) and used as a true meta Open Graph image, meaning it’s displayed on Twitter, Facebook, iMessage, Slack, Discord, and whatever else supports that card look. I like it. Even though I’ve got a pretty good solution cooking now (for WordPress), the templates aren’t controlled with HTML/CSS like I wish they we..

• 0 Comment

(This is a sponsored post.) Static site generators are popular for their speed, security, and user experience. However, sometimes your application needs data that is not available when the site is built. React is a library for building user interfaces that helps you retrieve and store dynamic data in your client application.  Fauna is a flexible, serverless database delivered as an API that completely eliminates operational overhead such as capacity planning, data replica..

• 0 Comment

Nathan Hardy shares when things “clicked”: Reflecting back on this time, I think there are a few key concepts that were vital to things finally all making sense and fitting together. These were:• The Box Model (e.g. box-sizing, height, width, margin, padding)• Layout (e.g. display)• Document Flow and Positioning (e.g. position, top, left, etc.) I called this my ah-ha moment a few years back: For me, it was a couple of concepts that felt like an unl..

• 0 Comment

SKWAR — Heydon Pickering made a hard-edged monospaced variable font. The axes are width and weight. Twenty Bits I Learned About Making Fonts Book — Dan Cederholm has been making fonts, like Captain Edward and Ship Whistle and has turned his learnings into a book.The perfect cross-platform serif and sans-serif font stacks — Daniel Aleksandersen has lots of details about pre-installed fonts across operating systems, like: Mac and iOS also come with Helvetica Neue preinst..

• 0 Comment

I think this is good advice from Silvestar Bistrović: An enabling selector is what I call a selector that does a job without disabling the particular rule. The classic example is applying margin to everything, only to have to remove it from the final element because it adds space in a place you don’t want. .card { margin-bottom: 1rem; } /* Wait but not on the last one!! */ .parent-of-cards :last-child { margin-bottom: 0; } You might also do… /* "..

• 0 Comment

You know like https:? That’s a URL Scheme. You’re probably familiar with the concept, thanks to others that come up in front-end development, like mailto:. You can actually make your own, which is pretty cool. There are a lot of them. I find that custom URL schemes come up the most with apps that are both web apps and native apps. For example, two that I use nearly every day: Notion and Figma. I love that the things I work on in these apps have URLs. URLs for everythin..

• 0 Comment

A bonafide CSS trick if there ever was one! @ShadowShahriar created a CodePen demo that uses pseudo-elements to place commas between list items that are displayed inline, and the result is a natural-looking complete sentence with proper punctuation. CodePen Embed Fallback How it works The trick? First, it’s to make an unordered list an inline element with no markers or spacing: ul { padding: 0; margin: 0; display: inline; list-style-type: none; } ..

• 0 Comment

After the fragmentation effect, I am going to tackle another interesting animation: the blob! We all agree that such effect is hard to achieve with CSS, so we generally reach for SVG to make those gooey shapes. But now that the powerful Paint API is available, using CSS is not only possible, but maybe even a preferable approach once browser support comes around. Here’s what we’re making. It’s just Chrome and Edge support for now, so check this out on one of those..

• 0 Comment

That’s a heartwrenching title from Michael Williamson. I believe it though. It’s kinda like a maximized version of the blogging phenomenon where if you work on a post for weeks it’ll flop compared to a post that’s some dumb 20-minute thought. Or how your off-handed remark to some developer at the perfect time might cause some huge pivot in what they are doing, changing the course of a project forever. For Mike, it was a 3,000 line-of-code side project that had more im..

• 0 Comment