CSS-Tricks

Let’s Talk About Webpack

# By Chris Coyier

Sean Larkin joins me to talk about Webpack!

I doubt I'm alone in being a bit confused about what the heck Webpack is and does. Even if you're actively using a project that uses it! We're just going to scratch the surface here, but hopefully while talking it out in a way that will make sense to you.

One thing that helps me think about (a little, anyway, I'm no expert) is that while you do need to configure Webpack, you aren't telling it specific instructions like "take this file and this file and squish them together". It gets those instructions from your code itself, because Webpack actually reads your code and follows the dependency needs it finds.

Firebase & React Part 2: User Authentication

# By Simon Bloom

Today we'll be adding authentication (via Google Authentication and Firebase) to our Fun Food Friends app, so that only users that are signed in can view who is bringing what to the potluck, as well as be able to contribute their own items. When users are not signed in, they will be unable to see what people are bringing to the potluck, nor will they be able to add their own items.

Local by Flywheel

# Sponsored

I've switched all my local WordPress development over to Local by Flywheel. I heard about it from y'all when we did a poll not to long ago about local WordPress development. Bottom line: it's really good. It does everything you want it to, well, with zero hassle, and nothing more.

(more…)

The Options for Programmatically Documenting CSS

# By Kaloyan Kosev

I strongly believe that the documentation should be kept as close to the code as possible. Based on my experience, that's the only option that works well in the long term. External documents, notes, and wikis all eventually get outdated, forgotten, and lost.

Documentation is a topic that always bugs me. Working on poorly documented codebase is a ticking bomb. It makes the onboarding process a tedious experience. Another way to think of bad documentation is that it helps foster a low truck factor (that is, "the number of people on your team who have to be hit by a truck before the project is in serious trouble").

Recently I was on-boarded into a project with more than 1,500 pages of documentation written in… Microsoft Word. It was outdated and unorganized. A real disaster. There must be a better way!

I've talked about this documentation issue before. I scratched the surface not long ago here on CSS-Tricks in my article What Does a Well-Documented CSS Codebase Look Like? Now, let's drill down into the options for programmatically documenting code. Specifically CSS.

(more…)

The Structure of an Elm Application

# By James Kolce

Most languages when they are in their infancy, tend to be considered "toy languages" and are only used for trivial or small projects. But this is not the case with Elm, where its true power shines in complex and large applications.

It is not only possible to build some parts of an application in Elm and integrate those components into a larger JS application, but it is also possible to build the entire application without touching any other language making it an excellent alternative to JS frameworks like React.

In this article, we will explore the structure of an Elm application using a simple site to manage plain-text documents as an example.

(more…)

Repeatable, Staggered Animation Three Ways: Sass, GSAP and Web Animations API

# By Opher Vishnia

Staggered animation, also known as "follow through" or "overlapping action" is one of the twelve Disney principles of animation as defined by Ollie Johnston and Frank Thomas in their 1981 book "The Illusion of Life". At its core, the concept deals with animating objects in delayed succession to produce fluid motion.

The technique doesn't only apply to cute character animations though. The Motion design aspect of a digital interface has significant implications on UX, user perception and "feel". (more…)

Why Use a Third-Party Form Validation Library?

# By Chris Coyier

We've just wrapped up a great series of posts from Chris Ferdinandi on modern form validation. It starts here. These days, browsers have quite a few built-in tools for handling form validation including HTML attributes that can do quite a bit on their own, and a JavaScript API that can do even more. Chris even showed us that with a litttttle bit more work we can get down to IE 9 support with ideal UX.

So what's up with third-party form validation libraries? Why would you use a library for something you can get for free?

(more…)

CSS is Awesome

# By Brandon Smith

I bought this mug recently for use at work. Being a professional web developer, I decided it would establish me as the office's king of irony. The joke on it isn't unique, of course. I've seen it everywhere from t-shirts to conference presentations.

(more…)

How To Rename a Font in CSS

# By Chris Coyier

Nothin' like some good ol' fashioned CSS trickery. Zach Leatherman documents how you can use @font-face blocks with local() sources to redefine a font-family. It can actually be a bit useful as well, by essentially being an abstraction for your font stack.

@font-face {
  font-family: My San Francisco Alias;
  src: local(system-ui), local(-apple-system), local('.SFNSText-Regular');
}
p {
  font-family: My San Francisco Alias, fantasy;
}

Text Lock-Up

# By Geoff Graham 
<svg viewBox="0 0 100 100">
  <text>
    <tspan class="line-1" textLength="100" x="0" y="1em" font-size="20">
      The Cat
    </tspan>
    <tspan class="line-2" textLength="100" x="0" dy="0.9em" font-size="20" lengthAdjust="spacingAndGlyphs">
      in the
    </tspan>
    <tspan class="line-3" textLength="100" x="0" dy="0.9em" font-size="35">
      Hat
    </tspan>
  </text>
</svg>

SVG offers the <tspan></tspan> tag. While it functions a lot like a normal <span></span> in HTML, it accepts attributes that unlock powerful text-shaping capabilities.

One of those attributes is textLength. If we set this to 100, then the text wrapped in <tspan></tspan> will be forced to the full length of the SVG container.

(more…)

Full Page Screenshots in Browsers

# By Geoff Graham

It can be quite useful to get a "full page" screenshot in a browser. That is, not just the visible area. The visible area is pretty easy to get just by screenshotting the screen. A full page screenshot captures the entire web site even if it needs to be scrolled around to see all of it. You could take individual screenshots of the visible area and use a photo editing program to stitch them together, but that's a pain in the but. Nevermind the fact that it's extra tricky with things like fixed position elements.

Fortunately browsers can help us out a bit here.

(more…)

Tech Community’s Very Own Domain Extension

# Sponsored

Until 2012, the world only knew of .com, .net etc. Since then, 1200+ new domain extensions have been launched! Today, there are meaningful extensions for all kinds of communities including us, the tech folks! We now have a definitive domain extension that is relevant to us: .tech.

Having a www.yourbrandname.tech domain can be a great boost to your marketing. Even for your personal branding, it's a good idea to set a redirect from www.yourname.tech to your LinkedIn / GitHub or create your portfolio!

(more…)

Form Validation – Part 4: Validating the MailChimp Subscribe Form

# By Chris Ferdinandi

Over the last few articles in this series, we've learned how to use a handful of input types and validation attributes to natively validate forms.

We've learned how to use the Constraint Validation API to enhance the native browser validation process for a better overall user experience. And we wrote a polyfill to extend support all the way back to IE9 (and plug a few feature holes in some newer versions).

Now, let's take what we've learned and apply it to a real example: the MailChimp signup form.

(more…)

Move Modal in on a Path

# By Chris Coyier

Have you seen those fancy interactions where a modal window flys down from the top of the page? Maybe it slides in from the side while it fades up to full opacity? Maybe it falls in from above and goes from blurry to focused? Kinda cool, if it fits the vibe of your website.

They always seem to move in a straight line though. Thanks to the fairly new offset-path, they don't have to!

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag