Accessing Your Data With Netlify Functions and React

(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 ..

What I Wish I Knew About CSS When Starting Out As A Front-Ender

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 Flo..

Some Typography Links VII

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 an..

You want enabling CSS selectors, not disabling ones

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 do..

Application-Specific Links

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 a..

CSS Pseudo Commas

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? ..

Exploring the CSS Paint API: Blob Animation

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 may..

My tiny side project has had more impact than my decade in the software...

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 pe..

The Fixed Background Attachment Hack

What options do you have if you want the body background in a fixed position where it stays put on scroll? background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at worst is not even supported by the most widely used mobile browsers. You can ditch this idea complete..

Designing for the Unexpected

When I think about what front-end development really is and feels like, this is at the heart of it: designing around a huge set of unknowns, and really embracing that notion as a strength of the web rather than a weakness or unfortunate truth we have to work around. Cathy Dutton digs into this wit..