Skip to main content
CSS is fun and cool and I like it.
Article

A Dynamically-Sized Sticky Sidebar with HTML and CSS

Creating page content that sticks to the viewport as you scroll, something like a jump-to-anchor menu or section headings, has never been easier. Throw a position: sticky into your CSS ruleset, set the directional offset (e.g. top: 0) and you’re ready to impress your teammates with minimal effort. Check out this CSS-Tricks article to see some real fancy sticky positioning use cases.

But sticky positioning can get a bit tricky, particularly when it comes to height and the dangerous … Read article “A Dynamically-Sized Sticky Sidebar with HTML and CSS”

Video

#198: About the Position Property

  • static: the default
  • relative: allows you to nudge around with top/right/bottom/left, making z-index work, gives you a positioning context
  • absolute: top/right/bottom/left moves the element to that exact position, otherwise the same as relative
  • fixed: like absolute, but scrolling the page doesn’t move the element
  • sticky: like fixed, but it doesn’t become fixed until the page is scrolled past your set
Read article “#198: About the Position Property”
Article

console.log({ myVariable });

I think this might be my most popular tweet of all time, but I’m not sure how to verify that these days. I’ll restate this neat little trick here because blogging is cool and fun.

I used to do this a lot while debugging JavaScript:

console.log("myVariable: ", myVariable);

But now I do this because it’s just easier to type quickly:

console.log({ myVariable });
Read article “console.log({ myVariable });”
Sponsored Article

mediastack

Have you ever had the idea for a website or new app that involved showing news content? You don’t have to create content yourself to have the right to build an innovative news reading experience. I remember when Flipboard came out. They didn’t (and still don’t) actually produce content — they just made a fantastic experience for reading it, and did very well with that.

Where do you get that news content? mediastack. You’re going to need a great … Read article “mediastack”

Article

Color Theming with CSS Custom Properties and Tailwind

Custom properties not only enable us to make our code more efficient, but allow us to work some real magic with CSS too. One area where they have huge potential is theming. At Atomic Smash we use Tailwind CSS, a utility class framework, for writing our styles. In this article, we’ll look at how custom properties can be used for theming, and how we can integrate them with Tailwind to maximize the reusability of our code. We won’t cover … Read article “Color Theming with CSS Custom Properties and Tailwind”

Article

grid-auto-flow : CSS Grid :: flex-direction : Flexbox

When setting a parent element to display: flex, its child elements align left-to-right like this:

CodePen Embed Fallback

Now, one of the neat things we can do with flexbox is change the direction so that child elements are stacked vertically on top of each other in a column. We can do that with the flex-direction property (or with the flex-flow shorthand):

CodePen Embed Fallback

Okay, cool. But how would I do something like this with CSS Grid? As in, … Read article “grid-auto-flow : CSS Grid :: flex-direction : Flexbox”

Link

Firefox 83

Link

Thinking Outside the Box with CSS Grid

Article

Creating WebGL Effects with CurtainsJS

This article focuses adding WebGL effects to <image> and <video> elements of an already “completed” web page. While there are a few helpful resources out there on this subject (like these two), I hope to help simplify this subject by distilling the process into a few steps: 

  • Create a web page as you normally would.
  • Render pieces that you want to add WebGL effects to with WebGL.
  • Create (or find) the WebGL effects to use.
  • Add event listeners to
Read article “Creating WebGL Effects with CurtainsJS”
Link

Upptime