Share This
Get in Touch
Scroll Down
//Blog

Test

Fonna Glacier Ski Resorttoday's situationLast updated: 08.08.2022 - 09:37cloudyDeilig vårsnø7near_me2 m/sdownhill_skiingSlopes Open: 1 ..

Read more
  • 0 Comment

More Details on `details`

A lot of chatter around the ol’ <details> and <summary> elements lately! I saw Lea Verou recently tweet an observation about the element’s display behavior and that sorta splintered into more observations and usage notes from folks, including a revived discussion on whether <summary> should be allowed to contain interactive elements or not. There are a lot of dots to connect and I’ll do my best here to do exactly that. Can we change the displa..

Read more
  • 0 Comment

When is it OK to Disable Text Selection?

Using CSS, it’s possible to prevent users from selecting text within an element using user-select: none. Now, it’s understandable why doing so might be considered “controversial”. I mean, should we be disabling standard user behaviors? Generally speaking, no, we shouldn’t be doing that. But does disabling text selection have some legitimate (albeit rare) use-cases? I think so. In this article we’ll explore these use cases and take a look at how we can use u..

Read more
  • 0 Comment

WebKit Features in Safari 16.0

Whew boy, Safari 16 is officially out in the wild and it packs in a bunch of features, some new and exciting (Subgrid! Container Queries! Font Palettes!) and others we’ve been waiting on for better cross-browser support (Motion Path! Overscroll Behavior! AVIF!). I imagine Jen Simmons typing cheerfully writing out all of the new goodies in the roundup announcement. Source: WebKit.org Just gonna drop in the new CSS features from the release notes: Added size quer..

Read more
  • 0 Comment

The Basics of Remix

You’ve probably heard a lot of hype around one of the newest kids on the framework block, Remix. It may be surprising that it got its start back in 2019, but it was originally only available as a subscription-based premium framework. In 2021, the founders raised seed funding and open sourced the framework to let users start using Remix for free. The floodgates opened and everyone seems to be talking about it, good or bad. Let’s dive in and look at some of the basics of Re..

Read more
  • 0 Comment

Building Interactive Figma Widgets

Figma has always encouraged collaboration between developers and designers. It strives on an endless treasury of community-made plugins. Need 3D elements? There’s a plugin for that. Need abstract SVGs? There’s a plugin for that, too. That said, the design part of Figma has always been relatively static — always working with unmovable rectangles connected to each other through predefined user interactions. But what if I told you that your designs could suddenly..

Read more
  • 0 Comment

How I Made a Pure CSS Puzzle Game

I recently discovered the joy of creating CSS-only games. It’s always fascinating how HTML and CSS are capable of handling the logic of an entire online game, so I had to try it! Such games usually rely on the ol’ Checkbox Hack where we combine the checked/unchecked state of a HTML input with the :checked pseudo-class in CSS. We can do a lot of magic with that one combination! In fact, I challenged myself to build an entire game without Checkbox. I wasn’t sure if it ..

Read more
  • 0 Comment

What’s New With Forms in 2022?

Browsers are constantly adding new HTML, JavaScript and CSS features. Here are some useful additions to working with forms that you might have missed… requestSubmit() Safari 16 will be the final browser to add support for requestSubmit. Before we look at how .requestSubmit() works, let’s remind ourselves how programmatically submitting a form with JavaScript works when using the .submit() method. Submitting a form with submit() does not trigger a submit event. ..

Read more
  • 0 Comment

Overlapping Bar Charts

As the name suggests, overlapping charts visualize two different sets of data in a single diagram. The idea is that the overlapping bars allow us to compare data, say, year-over-year. They are also useful for things like tracking progress for a goal where one bar represents the goal and the other shows the current amount. But they’re beautiful too! Your mind is probably like mine and is already starting to figure out how you’d go off and code that. Here’s how ..

Read more
  • 0 Comment

Hacking CSS Animation State and Playback Time

CSS-only Wolfenstein is a little project that I made a few weeks ago. It was an experiment with CSS 3D transformations and animations. Inspired by the FPS demo and another Wolfenstein CodePen, I decided to build my own version. It is loosely based on Episode 1 – Floor 9 of the original Wolfenstein 3D game. CodePen Embed Fallback Editor: This game intentionally requires some quick reaction to avoid a Game Over screen. Here is a playthrough video: In ..

Read more
  • 0 Comment
Get in Touch
Close