Share This
Get in Touch
Scroll Down
//Blog

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

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

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

Read more
  • 0 Comment

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 completely and let the background scroll on small screens using media queries. Or get around it with a small fix. I suppose we could call it a “hack” since it’s a workaround in co..

Read more
  • 0 Comment

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 with real code and examples over on A List Apart. A recurring theme is the idea that content (certainly an unknown, since content changes) can and should drive design decisions. It ..

Read more
  • 0 Comment

Some Articles About Accessibility I’ve Saved Recently III

The perfect link — Rian Rietveld defines them: “When you click on them, they take you somewhere else.” Not much code in here (we’ve got that), just a lot of practical accessibility advice. For example, the alt text for a linked image can allude to the fact that it is a link. Just an image: “A cherry tree in full bloom.” Link: “Wikipedia on cherry blossoms.”Google Announces Seismic Change to Docs — George Joeckel covers the unfolding news that Google Docs is ..

Read more
  • 0 Comment

How I Made a Generator for SVG Loaders With Sass and SMIL Options

While learning Vue.js, I started building free web tools that involved the exploration of SVG, with the goal of learning something about both! Let’s take a look at one of those tools: a generator that makes SVG loaders and lets you choose between SMIL or Sass animation, different styles, colors, shapes, and effects. It even lets you paste in a custom path or text, and then download the final SVG, copy the code, or open a demo over at CodePen. How it started Th..

Read more
  • 0 Comment

One Way to Convert Code Indentation

A question: If you copy a code sample that uses two-space indentation and you want to convert it to four-space indentation, what’s the *fastest* and easiest option?Matt Stauffer, Twitter I wrote about doing this in Sublime Text a few years back. It’s not terribly different in VS Code, I don’t think. But here’s another way: Use CodePen. Step 1: Copy and paste to CodePen Say you found some code elsewhere, just copy and paste it in: Step 2: Adju..

Read more
  • 0 Comment

Stealing Game Animation Techniques to Engage Users

Today’s websites are overflowing with animations—often too many. They get in the way of the content and slow down our busy users. But at the same time: they’re wonderful. They bring websites to life, are fun to implement and can be incredibly impressive to show off. I think they’re great. Sorry impatient users. The way I see it, the problem isn’t necessarily that websites have too many animations, but that the animations don’t vibe with the content they’re pr..

Read more
  • 0 Comment

Scrollbar Reflowing

This is a bit of advice for developers on Macs I’ve heard quite a few times, and I’ll echo it: go into System Preferences > General > Show scroll bars and set to always. This isn’t about you, it’s about the web. See, the problem is that without this setting on, you’ll never experience scrollbar-triggered layout shifts, but everyone else with this setting on will. Since you want to design around not causing this type of jank, you should use this setting yoursel..

Read more
  • 0 Comment
Get in Touch
Close