Archive | article

RSS feed for this section

The Many Tools for Shape Morphing

To no one’s surprise, I’m sure, there are lots of different ways to do the same thing on the web. Shape morphing, being a thing on the web, is no different. There are some native technologies, some libraries that leverage those, and some libraries that do things all on their own. Let’s look at some of the options (with demos) and weigh the advantages and disadvantages.

SMIL

The original, native technology for shape morphing is SMIL. We have both a


The Many Tools for Shape Morphing is a post from CSS-Tricks

Now that CSS Custom Properties are a Thing, All Value Parts Can Be Changed Individually

CSS Custom Properties give us the ability to reach into a property value and change certain parts of it. That’s useful in a bunch of places, but in particular, it’s useful in properties which don’t allow us to do it any other way.


Now that CSS Custom Properties are a Thing, All Value Parts Can Be Changed Individually is a post from CSS-Tricks

Which Projects Need React? All Of Them!

When does a project need React? That’s the question Chris Coyier addressed in a recent blog post. I’m a big fan of Chris’ writing, so I was curious to see what he had to say.

In a nutshell, Chris puts forward a series of good and bad reasons why one might want to use React (or other similar modern JavaScript libraries) on a project. Yet while I don’t disagree with his arguments, I still find myself coming to a …


Which Projects Need React? All Of Them! is a post from CSS-Tricks

The Can-Do’s of CodePen Projects

We just recently launched Projects, the latest big feature over on CodePen. It’s quite a bit different than the Pen Editor, so let’s take a look at all the things it can do!

A Complete File System, and Complete HTML Files

With CodePen Projects, you get a sidebar of files for you to put whatever files you like.

That’s different than the Pen Editor on CodePen, which only gives you the HTML, CSS, and JavaScript editor to work …


The Can-Do’s of CodePen Projects is a post from CSS-Tricks

Total HTML Agnosticism

A couple of good posts on technology agnosticism lately.

Brad Frost says the design system itself is higher level than any particular technology:

… it doesn’t bet the farm on any one technology, the system is able to adapt to inevitable changes to tools, technologies, and trends.

Jonathan Snook thinks Mustache is good choice for otherwise technologically agnostic templating:

I like it because of its simplicity and because it requires the heavy work with the data to be done before …


Total HTML Agnosticism is a post from CSS-Tricks

When Does a Project Need React?

You know when a project needs HTML and CSS, because it’s all of them. When you reach for JavaScript is fairly clear: when you need interactivity or some functionality that only JavaScript can provide. It used to be fairly clear when we reached for libraries. We reached for jQuery to help us simplify working with the DOM, Ajax, and handle cross-browser issues with JavaScript. We reached for underscore to give us helper functions that the JavaScript alone didn’t have.

As …


When Does a Project Need React? is a post from CSS-Tricks

The Power of Custom Directives in Vue

When you’re initially learning a JavaScript framework, it feels a little like being a kid in a candy store. You take in everything available to you, and right off the bat, there are things that will make your life as a developer easier. Inevitably though, we all reach a point working with a framework where we have a use-case that the framework doesn’t cover very well.

The beautiful thing about Vue is that it’s incredibly feature-rich. But even if you …


The Power of Custom Directives in Vue is a post from CSS-Tricks

Persistence Has a Weird Way of Getting Things Done

I like to think of myself as having a decent amount of persistence. But of course, life is complicated. Sometimes I have it and sometimes I don’t. I have in some areas and not in others. C’est la vie. Here’s two very short things that I’ve written up along this theme.

I once wrote this about it, in a little article I called Mediocre Ideas, Showing Up, and Persistence:

Truly great ideas are rare. Jokers like us will probably …


Persistence Has a Weird Way of Getting Things Done is a post from CSS-Tricks

Photicular

I was on vacation this past week and at some little beach gift shop they were selling this really cool big thick book called Ocean: A Photicular Book. You’ve probably seen something like it before… a plastic card that shows different images depending on how you are looking at it. This book is extremely well done in that the image are very high quality, and the design of the book makes the images move as you turn the pages.…


Photicular is a post from CSS-Tricks

Focusing a `background-image` on a Precise Location with Percentages

Let’s say you have an element with a background-image, where only part of the image is visible, because the image is bigger than the element itself. The rest is cropped away, outside the element.

Now you want to move that background-image such that you’re focusing the center of the element on a specific point in it. You also want to do that with percentage values rather than pixels. We’re going to have to get clever.

This is going to…


Focusing a `background-image` on a Precise Location with Percentages is a post from CSS-Tricks