Gotchas When Publishing Modules in npm and Bower

Bower and npm are de-facto the package managers of the web. I doubt there are many front-end developers out there who haven’t heard of them or used them to manage dependencies.
Whilst many of us use them as consumers, one day you might decide to share a project of your own and become a contributor! This happened to me recently. I had the experience of publishing my open-source library on npm and Bower.
Although their official docs were quite good, …

Gotchas When Publishing Modules in npm and Bower is a post from CSS-Tricks

Link: https://css-tricks.com/gotchas-publishing-modules-npm-bower/

My Talk Writing Process

Some people have a talk-preparation process that is super organized and runs like a well-oiled machine. Mine, on the other hand, is a bit messy, but it works for me. Even when the end talk is polished and put together, it doesn’t mean the whole process to get there was the same way.
When putting together a new talk recently, I noticed there was most definitely a pattern to how my talks take shape. Here’s how the talk-making process goes for me

My Talk Writing Process is a post from CSS-Tricks

Link: https://css-tricks.com/talk-writing-process/

CSS Basics: Fallback Font Stacks for More Robust Web Typography

In CSS, you might see a ruleset like this:
html {
font-family: Lato, “Lucida Grande", Tahoma, Sans-Serif;
}
What the heck, right? Why don’t I just tell it what font I want to use and that’s that? The whole idea here is fallbacks. The browser will try to use the font you specified first (Lato, in this case), but if it doesn’t have that font available, it will keep going down that list. So to be really verbose here, …

CSS Basics: Fallback Font Stacks for More Robust Web Typography is a post from CSS-Tricks

Link: https://css-tricks.com/css-basics-fallback-font-stacks-robust-web-typography/

CSS Basics: Styling Links Like a Boss

You are probably well acquainted with how links looks without any styling at all. That blue. That underline. That’s a link in it’s purest form. But what if we want to change things up a bit? Perhaps blue doesn’t work with your website’s design. Maybe you have an aversion to underlines. Whatever the reason, CSS lets us style links just like any other element.

CSS Basics: Styling Links Like a Boss is a post from CSS-Tricks

Link: https://css-tricks.com/css-basics-styling-links-like-boss/

CSS Basics: Using Multiple Backgrounds

With CSS, you can control the background of elements. You can set a background-color to fill it with a solid color, a background-image to fill it with (you guessed it) an image, or even both:
body {
background-color: red;
background-image: url(pattern.png);
}
Here’s an example where I’m using an SVG image file as the background, embedded right in the CSS as a data URL.
See the Pen background color and image together by Chris Coyier (@chriscoyier) on …

CSS Basics: Using Multiple Backgrounds is a post from CSS-Tricks

Link: https://css-tricks.com/css-basics-using-multiple-backgrounds/

CSS Basics: The Second “S” in CSS

CSS is an abbreviation for Cascading Style Sheets.
While most of the discussion about CSS on the web (or even here on CSS-Tricks) is centered around writing styles and how the cascade affects them, what we don’t talk a whole lot about is the sheet part of the language. So let’s give that lonely second “S" a little bit of the spotlight and understand what we mean when we say CSS is a style sheet.

The Sheet Contains the…

CSS Basics: The Second “S” in CSS is a post from CSS-Tricks

Link: https://css-tricks.com/css-basics-second-s-css/

CSS Basics: Using Fallback Colors

Something you very much want to avoid in web design is unreadable text. That can happen when the background color of an element is too close or exactly the color of the text. For instance:
.header {
background-color: white;
color: white;
}
Which could lead to text that’s there, but invisible.
This is … very bad.
You’d never do that on purpose of course! The trouble is it can sneak up on you. For one thing, the default background-color…

CSS Basics: Using Fallback Colors is a post from CSS-Tricks

Link: https://css-tricks.com/css-basics-using-fallback-colors/

Web Animation Workshops Dates for 2018 Announced

“I’m getting a raise!"
This was my favorite quote from last year’s Web Animation Workshops, as Val and I covered performance, tooling, and creating animations for SVG, CSS, JS and React.
Now we’re gearing up for another round of Web Animation Workshops in 2018! But we’re only offering two workshops this time since both of us have moved away from full-time consulting.

The aim of these workshops is to level up your animation skills in just two days and …

Web Animation Workshops Dates for 2018 Announced is a post from CSS-Tricks

Link: https://webanimationworkshops.com/

CSS Basics: The Syntax That Matters & The Syntax That Doesn’t

When you’re starting to play around with CSS at the very beginning, like any other language, you have to get used to the syntax. Like any syntax, there are a bunch of little things you need to know. Some characters and the placement of them is very important and required for the CSS to work correctly. And some characters are more about clean looking code and generally followed standards but don’t matter for the CSS to work.

First, so …

CSS Basics: The Syntax That Matters & The Syntax That Doesn’t is a post from CSS-Tricks

Link: https://css-tricks.com/css-basics-syntax-matters-syntax-doesnt/

Article Performance Leaderboard

A clever idea from Michael Donohoe: pit websites against each other in a performance battle! Donohoe is a long-time newsroom guy, so this is specifically about article pages for major publications.
Lets state the obvious, this is an imperfect and evolving measure and the goal is to foster discussion and rivalry in making our pages better, faster, and lighter. Bear in mind this was built as an internal tool at Hearst Newspapers to track changes as we rollout our new …

Article Performance Leaderboard is a post from CSS-Tricks

Link: https://projects.hearstnp.com/performance/