Article Archives

The Difference Between Throttling and Debouncing

I got these confused the other day and someone corrected me. So I tossed it on the ol' list of blog post ideas and here we are. Both of them are ways to limit the amount of JavaScript you are executing based on DOM events for performance reasons. But they are, you guessed it, different.

(more…)

Supercharging page load

Bask in 11 minutes of Jake Archibald weirdness charm while learning about what we need to be considering in terms of performance and how are built and respond to requests.

Adders and logic gates in pure CSS

Experiment by Schabse Laks:

Silon is an experiment in the true power of CSS selectors. Most people would not expect CSS selectors to be capable of expressing arbitrary boolean logic. However, thanks to the sibling selector (AND), the comma selector (OR), and the :not() selector, this is actually completely possible.

To me the syntax looks more complicated than the CSS it compiles into, but hey I'm kind of a CSS guy.

Against CSS in JS

Keith J Grant on the connection between HTML and JavaScript:

This coupling is real, and it is unavoidable. We must bind event listeners to elements on the page. We must update elements on the page from our JavaScript. Our code must interact bidirectionally and in real-time with the elements of the DOM.

And so:

... the mantra of React is to stop pretending the DOM and the JavaScript that controls it are separate concerns.

But:

The relationship between CSS and JavaScript is not like the relationship between HTML and JavaScript. With HTML, a true separation of concerns between the markup and the corresponding component code is impossible (because they are in fact the same concern). With CSS, this separation is possible. And, in fact, the concerns are unique, so separation is vital to clean code organization.

Performance Tools

Weekend roundup time! From the multitude of Grunt and Gulp plugins to web apps that can help us visualize our websites with data, learning all the ins and outs of performance tooling is tough. I thought it might be useful to catalogue as many tools out there as I could find.

(more…)

Copy & Paste & The Web

Have you ever tried to copy and paste some text only to find it frustrating, awkward, or even impossible? I bet you have. It's not random. On the web, you have a decent amount of control over it. Let's just lay a bunch of stuff out there as food for thought.

(more…)

Viewport vs Percentage Units

Ire Aderinokun with a reminder that 100vw is sometimes wider than the viewable area (because scrollbars). The same is true for vh units, but it's rare websites have horizontal scrollbars.

But the best bit is about sizing images such that no matter the screen size there will be a position you can scroll to such that you can see the whole image.

Web! What is it good for?

My favorite bit of Jeremy Keith's recent article is the third and fourth sentences:

I just can't get excited about the prospect of building something for any particular operating system, be it desktop or mobile. I think about the potential lifespan of what would be built and end up asking myself "why bother?"

The web fits my personality in that way, too. I like working on long term projects. Plugging away at making things better and finding success through time and sheer attrition.

Sponsored: Win Cash in Spiceworks IT Platform App Contest

Build the next breakthrough app on the world's largest IT platform! Spiceworks is putting $65,000 in prizes up for grabs. You could win best app in four categories: inventory, help desk, fan favorite and top all-around. Winning apps will be featured exclusively in the Spiceworks App Center.

We've created a special frame template so that building an app in Spiceworks is as easy possible. See complete contest details. You can also check out app examples in the Spiceworks Community.

5 Minute Physics

I got to watch David DeSandro give this talk live at Code Genius last month, and thankfully it's online now. In five minutes, he shows how easily physics can be implemented in JavaScript in terms of moving things around in a natural feeling way. It's essentially what is behind David's Flickity library that he introduced here a few months ago.

The demos are on CodePen.

Revisiting :Visited

Joel Califa:

An email client without read/unread functionality would be unacceptable, so why are we fine with a site without :visited styling?

I don't know if I feel that strongly about it. I think it's a context thing, similiar to when to use _blank. If there is a group of links that are rather list-like and it could be imagined a user would benefit from knowing which ones they have been to, by all means, add :visited styling. But most of time, probably not that big of deal.

I dig the localStorage trickery for allowing more custom styles though!

Tools To Notify You When Dependencies Update

Any given website has, approximately, a whole bunch of dependencies. Take CodePen. The site is Ruby on Rails. Both Ruby and Rails are actively developed, versioned dependencies. There are a good 30+ gems in the project that help us do different internal things (e.g. process Sass into CSS) and user-facing things (e.g. process user-generated Markdown). Those gems are versioned dependencies. Not to mention front-end libraries we use. Not to mention Not to mention server-level software. Not to mention Node stuff.

It's a good idea to keep those things up-to-date (new features! security updates!), but also to do it on your own terms so you know what's changing and can test accordingly. But how do you know a new version of a dependency has been released? Let us count the ways.

(more…)

The End of Global CSS

Mark Dalgleish:

Every selector has the potential to have unintended side effects by targeting unwanted elements or clashing with other selectors. More surprisingly, our selectors may even lose out in the global specificity war, ultimately having little or no effect on the page at all.

Any time we make a change to a CSS file, we need to carefully consider the global environment in which our styles will sit. No other front end technology requires so much discipline just to keep the code at a minimum level of maintainability.

Mark goes on to talk about his preprocessing solution. I can't speak to that, but I do find it interesting how this struggle has permeated front end development for...ever. Just think of these things: frames, iframes, namespacing selectors, careful naming methodologies, web components / shadow DOM, scoped CSS, all: initial;, future concepts - all things designed to combat the difficult "global" nature of CSS.

Please Update Picturefill

The following is a guest post by Mat Marquis. Mat has a important PSA for us regarding responsive images.

I don't want to bury the lede: if you're using a version of Picturefill from prior to 2.3.1, please update right away—update your /lib files, file an issue on your project, or run a quick npm update picturefill and let your mind be set at ease. There haven't been any breaking changes in any version of Picturefill 2, so you shouldn't run into any issues updating.

Nothing is on fire, here. Picturefill can't have any critical security issues; nobody is going to cybercrack your megahertz as a result of a Picturefill bug, or however it is hacking works on television. What this issue could mean for your project is broken images, and what it could mean for web standards—well, that has the potential to be a bigger issue.

(more…)

On writing real CSS (again)

Cole Peters on the current pre-processor landscape and ditching Sass for PostCSS:

... here's what we gain by using PostCSS and cssnext, as compared to typical pre-processors:

  • extremely fast compilation times (in my example case, ~800% faster)
  • source code written in CSS, as defined by current and upcoming specs, which means:
  • no vendor-specific syntax (unless we write our own — be careful!), and thus:
  • source code that is immediately comprehensible to anyone with a half-decent understanding of CSS, and:
  • source code that is future-proof, portable, and easier to diagnose and debug

PostCSS and cssnext are certainly interesting projects to keep an eye on. It's pretty easy to devil's advocate on all the major points here though...

  • How fast does compiliation need to be? I don't even use libsass on most projects and speed never bothers me, and once I switch, that seems like that will be as fast as a build step would ever need to be.
  • We know that specs change. It happens all the time. Seems weird to base a syntax on a non-final spec. What happens when the spec changes? Do you change the language and let existing code break? How is that future-proof? Or support all past formats? Meaning the language isn't really based on future CSS, it's based on any experimental idea that was considered?
  • The opt-in add-on system encourages everyone's setup to be a little different. Doesn't that make it actually less portable? And harder to have community around?
  • Why is it more comprehensible? I'm not sure it's true that just because code might someday be a native part of the language it's automatically more understandable. From what I've heard from people, things like variables are a harder to wrap your head around than a standard Sass variable. Not to mention it's a bit confusing that it's impossible to polyfill the exact native behavior in a preprocessing step.

All interesting things to consider. Personally I like the idea of a preprocessor being more like a polyfill when possible, but I also think abstraction should be embraced not feared.

Color Filters Can Turn Your Gray Skies Blue

The following is a guest post by Amelia Bellamy-Royds. I've always enjoyed the "duotone" effect in photos. In Photoshop, you can create them by converting an image into grayscale mode, then into duotone. So the lights are "mapped" to one color, and the darks another. Not only does it look cool, but images with less colors are smaller in file size and thus good for performance. When I saw Amelia playing around with this programatically through SVG on CodePen, I asked if she'd be up for teaching us through a guest post. Lucky for us, here it is!

Once upon a time, if you wanted artistic images in your web design, you created them in Photoshop. Or maybe GIMP, if you were edgy and open-source inclined. But either way, the end result was a single, static, image file that was uploaded to your server, downloaded to your user's web browser, and displayed exactly as you created it. If you wanted to turn a graphical effect on and off in response to user interactions, then you exported two different image files, and you swapped them with JavaScript or CSS pseudo classes.

Graphical effects—first in SVG, now in CSS—are changing that. You can apply Photoshop-like filters or blended layers right in the browser. Which means you can use a single image file and present it in multiple ways as the user interacts with it. It also means you can have a lot of fun with a boring-old black and white photo.

(more…)

Decadent and Depraved

Mat Marquis writing for BuzzFeed Bocoup:

All this typographic power came with a cost: text-rendering: optimizeLegibility is slow—and by "slow" I mean that it can bog down an entire page, from initial render time to repaints. More than that, though, it's buggy: Android in particular has serious issues trying to render a page that uses optimizeLegibility heavily.

Throttled Thursdays

Chris Ruppel:

I propose that web developers everywhere start taking at least one day of their week to throttle their internet connections.

I'm guilty of mostly working under the most ideal possible conditions. The best hardware, the latest software, the fastest internet. Because I like it. And it's my job is to be productive. Once I even paid for redundant internet service at my house because I hated it so much when it went down or got slow.

But this isn't the environment that the sites we build are consumed in. By forcing ourselves into "worse" conditions, we may cultivate some empathy and do a better job with what we build.

What I need to fight is the feeling (assumption?) that I'll be less productive on those days.

In CSS, the Only Wrong Answers are Definitive Ones

Nick Walsh's reation to Simuai's article Nesting Components (which covers eight possibilities for the simple task of styling elements within other elements):

the very nature of CSS leaves many problems without an exact solution, and the right one for you won't always work for others. If you write, speak, or otherwise communicate about stylesheets, don't be afraid to offer an open-ended answer.

Philip Walton reacts to the same article:

While I share his desire to nail down the best strategy (and I do have an opinion on the subject), I think it's actually more valuable to discuss how one might approach answering this question rather than what the actual answer may be.

Sponsor: WebdesignerNews – Curated Daily Web Design News

Design is hard enough without scouring hundreds of blogs, countless social media accounts, and thousands of design sites just to keep up with what's changing. That's why the team at Webdesigner Depot created WebdesignerNews, a one-stop site for the very latest industry developments.

WebdesignerNews covers a range of topics, from vanilla web design to code demos, from branding to brand new apps. If it matters to our industry, you'll find it here. Even better, it is curated by humans. The team shortlists stories through social media response and then every single story is reviewed by industry experts. When you read WebdesignerNews, you can be confident that the stories you read are the ones that matter.

An Introduction to Vagrant

The following post is by Jason Witt, a regular around here on topics like WordPress development. This time Jason introduces us to a development prerequisite: the development environment itself. There are lots of ways to level up behind off-the-shelf app solutions, including scripting your own setups.

(more…)

Considerations on Bug Reporting in Teams

Here's a frustrating situation: someone notices a real layout bug or a glitch of some kind, but they fail to accurately describe the problem when they tell you about it. As front-end developers, and all-round good team players, it's our responsibility to establish a workflow for reporting, cataloguing, and describing the bugs that people are likely to encounter.

(more…)

Understanding and Manually Improving SVG Optimization

The following is a guest post by Raymond Schwartz. Like it's raster brethren, SVG should be optimized before being used on production sites. There are several great tools for that, but as Raymond is about to show you, the best results come from a deeper understanding and a little manual work. For instance, decimal precision is a big factor in SVG optimization, but it's a rather arbitrary metric depending on the coordinate system of SVG. Alter that system, get different results. Here's Raymond.

Three factors determine the optimized file size of an SVG: physical dimension, viewBox, and decimal precision. Arbitrarily setting any one of them can cost you valuable bytes—even kilobytes. Each SVG has a specific combination of these three properties that will yield the smallest possible file size. By understanding how each impacts the articulation of vector paths, you can discover how to adjust them to achieve the optimal optimization.

(more…)

Sites for Browsing Type Pairings

Last weekend we did a post on Sites with High Quality Photos and it ended up being a kinda perfect fun weekend thing. Nothing you have to think too hard about, just enjoy. So let's keep in that tradition a little bit! Why not! This week we'll do sites that are intended to help you choose fonts for your website by showcasing nice pairings (as not any two typefaces necessarily go together well).

(more…)

Sponsored: Animate HTML5 like a pro with Hype

Animations get complex quickly. Anything beyond the trivial you need tools to help. Tumult Hype is the perfect tool to help you build animations. It's a native app for OS X. It gives you a stage to place all the elements in your animation, and a timeline to control what happens with each element at which time. The animations you build work on desktops, smartphones and tablets. No coding required.

Try it out by downloading the 14-day free trial.

Chassis

I had heard rumors of this but didn't realize they were so many months into actually doing it. The jQuery foundation is creating...

... an attempt at creating open standards designed for CSS libraries, JavaScript UI libraries, and web developers in general. This project will define standards for markup and class names for common widgets and patterns, as well as an implementation of those standards. Just like DOM libraries can build upon Sizzle, we hope UI libraries will build upon this.

Like a framework for frameworks. This is interesting on a lot of levels. One of which is whether or not developers (or framework creators) will actually embrace it. There are certainly some different developer mindsets out there. Like:

  • For the love of god, please don't tell me how to name things or structure my markup. And,
  • For the the love of god, please help me name things and structure my markup.

Functional CSS Tabs Re-Revisited

Update: We're redacting this article. Much of it was work originally done by Art Lawry and published on A List Apart in the article Radio-Controlled Web Design. We didn't appropriately credit that work. Apologies to Art and A List Apart.

Further explanation and more about CSS tabs:

Here at CSS-Tricks, we've been playing with the idea of CSS tabs for years. Half a decade ago we explored seven different techniques (All of them pretty bad, don't use those). We revisited it four years ago and solved some of the shortcomings there, but introduced some new problems.

These days, through techniques like The Checkbox Hack, you can get a lot closer to a good tabbed UI experience with just HTML and CSS. Check out Art's post about how to do that. And his final demo:

See the Pen Radio-Controlled Tabs (ARIA) by Art Lawry (@artlawry) on CodePen.

As ever on the web, there is always new possibilities to explore. I believe the jury is still out on whether form controls are acceptable for accessibility for toggling the visibility of content when display: none is being used to hide that content. Perhaps other hiding methods could be explored.

Stephan Barthel has explored this concept using flexbox which is pretty interesting in itself.

There are rumors of CSS helping with arbitrary state-based design as well, so certainly the future is interesting for this kind of thing.

The At-Rules of CSS

The at-rule is a statement that provides CSS with instructions to perform or how to behave. Each statement begins with an @ followed directly by one of several available keywords that acts as the identifier for what CSS should do. This is the common syntax, though each at-rule is a variation of it.

(more…)

Sites with High Quality Photos You Can Use for Free

I've been keeping a list like this around for a while, and the CSS-Tricks Staff just added a bunch of new links to it, so I figured HEY that sounds like fun little weekend post. There are so many of these it's really no excuse to have crappy photos in the work you do, be it websites, presentations, print work, whatever.

(more…)

Using the WP-API to Fetch Posts

It may be news to you, but there is a nifty resource called Quotes on Design that serves up interesting quotes about design, curated by our very own Chris Coyier.

Up to this point, Quotes on Design (QoD) used a bit of custom code to query the WordPress database and serve up quotes. This was used for the site itself, and for its API to allow use on external sites. With the excitement surrounding the upcoming WordPress JSON REST API, we thought it would be fun to rebuild the site to use the WP API instead of our own custom code.

(more…)

Transforms on SVG Elements

The following is a guest post by Ana Tudor. Ana always does a great job digging into the math behind what we can do graphically on the web. In this case, that's extra-useful as there are several ways to handle SVG transforms and they require a bit of mathematical thinking, especially converting one type to another for the best cross browser support. Here's Ana.

Just like HTML elements, SVG elements can be manipulated using transform functions. However, a lot of things don't work the same way on SVG elements as they do on HTML elements.

(more…)

Icon and Text Alignment

Jonathan Snook on a frustrating CSS situation I know I deal with regularly, getting an image/icon to line up nicely with a name/word. This was exactly the impetus behind this tweet. I feel validated to know that his solution is the same as mine normally is: relative positioning and nudge it with relative units until it looks right.

Sponsor: SiteBuilder

I bet you can guess what SiteBuilder.com does. It helps you build, manage, and host a website completely with their online tool. I'm a big fan of giving people the power to do this on their own without having to learn to be a web developer themselves. There is a certain type of client that SiteBuilder is absolutely perfect for. One of the CSS-Tricks staffers even said their (quite young) kid uses it for their site, a testament to its ease-of-use.

For a limited time, SiteBuilder is offering a 20% discount on all website plans. Jam-packed with some awesome features, SiteBuilder also offers a 100% free custom domain of your choice with every single plan. With SiteBuilder, you can build a professional website for as little as $7.95.

The Priority+ Navigation Pattern

The idea is: show as many navigation items as will fit horizontally with a UI toggle to show the rest. I like the idea. Why hide everything behind a toggle if there is room to expose the most important links? How it looks and how it is implemented could vary. Let's look at some examples!

(more…)

Cyclomatic Complexity: Logic in CSS

Harry Roberts on thinking about CSS selectors as a long series of nested logic. Sometimes it's hard for people to wrap their heads around why long, overly specific CSS selectors are problematic. When you see it as a crazy nested block of IF (SPECIFIC_CONDITION) { } blocks, it might make that more clear to some folks.

The Deal with WordPress Transients

In this article we dig into an important type of caching that is available to you in WordPress: transients. Like any cache, you use transients to store any kind of data that takes a long time to get, so the next time you need it, it returns super fast. The beauty of transients is they clean up after themselves, as long as you watch out for the pitfalls described here!

(more…)

Chaining Multiple Blend Modes

The background-blend-mode CSS property is nifty in lots of ways. It gives developers the ability to blend one background-image with its own background-color, or even with another background-image that's been applied to that very same element.

What's extra interesting is that you can chain these blend modes together. If you add multiple background images to an element you can also declare which background should use which specific blend-mode.

(more…)

How to Make a Smartphone Controlled 3D Web Game

The following is a guest post by Charlie Walter. Charlie does a bunch of work with Three.js (3D in the browser with WebGL) and gaming concepts. If that stuff interests you, read on!

In this tutorial I'll explain an approach on how to connect your smartphone to a 3D web game. We'll be making a car which you can control by tilting your phone (using the phone's accelerometer). We'll use the JavaScript library three.js for working with WebGL as well as WebSockets through the socket.io library and a few other web technologies.

(more…)

Thoughts on an API-First WordPress

The following is a guest post by Eduardo Bouças. We all know WordPress is a CMS, but here Eduardo thinks about using it only as an API for content. No front end at all, just URL endpoints that return JSON for use anywhere else. This doesn't detail a comprehensive solution to doing this, it's food for thought with some example code to get you going on a custom solution. If you want to get started developing on a system like this right away, WP REST API is the most robust project with the most momentum.

(more…)

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag