Share This
Get in Touch
Scroll Down
//Blog

Links on Performance IV

HTTP Caching is a Superpower — Hugh Haworth covers how the Cache-Control header is an awfully potent ingredient in web performance. I mis-read the title at first and was waiting to read about HTML caching. Hugh covers it a bit (like how you’d need to be careful doing so on something like a forum, where the content on pages changes rapidly), but I find it something that’s generally under-talked-about. As in, generally, people just don’t cache HTML at all, because it ch..

Read more
  • 0 Comment

I completely ignored the front-end development scene for 6 months. It was fine.

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

Read more
  • 0 Comment

If I work really hard on my Open Graph images, people will share my blog posts.

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

Read more
  • 0 Comment

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

Read more
  • 0 Comment

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

Read more
  • 0 Comment

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

Read more
  • 0 Comment

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 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… /* "..

Read more
  • 0 Comment

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

Read more
  • 0 Comment

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

Read more
  • 0 Comment

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

Read more
  • 0 Comment
Get in Touch
Close