Intermediate Articles

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 have an edge case not covered by the framework, it's got your back there as well, because you can quite easily create a custom directive.

(more…)

Intro to Vue.js: Rendering, Directives, and Events

If I was going to sum up my experiences with Vue in a sentence, I’d probably say something like "it's just so reasonable" or "It gives me the tools I want when I want them, and never gets in my way". Again and again when learning Vue, I smiled to myself. It just made sense, elegantly. This is my own introductory take on Vue. It's the article I wish I had when I was first learning Vue. If you'd like a more non-partisan approach, please visit Vue's very well thought out and easy to follow Guide.

A Guide to 2017 Conferences

Back by popular demand! It's difficult to keep track of all of the great talks and conferences happening in our industry. Sometimes you may find out too late that an event is taking place, and it's a real shame when it's an something you might have attended. We've compiled this list so you can see what's happening, both in your hometown, and abroad. This list will be updated throughout the year.

If you have a conference to add, we're happy to put it in! Please use the form at the bottom of the post.

(more…)

Web Animation Workshops

I’m thrilled to announce a brand new workshop series I’m starting with Val Head about web animation! We’ll be taking two-day workshop around to different cities starting this November, starting with Austin and New York. Whether you’re a beginner or you’ve been diving into animation already, this course won’t just get you started- you’ll leave with all the tools necessary to make subtle and beautiful web animations, and how to pick the right tools for the job.

Val and I both have been speaking and giving workshops around the world, and together we make a venn diagram of strength and knowledge about how to animate on the web. We’ll be covering everything from theory, to technique, to bug fixes and cross-browser stability. We both focus on accessibility and performance. You’ll learn how to make great animation decisions both from a design and technology perspective. We’ll cover working with SVG, CSS, and JavaScript technologies, both native and API. We’ll discuss complex animations, responsive animations, and UX animations, and go over when to use each. You won’t find this much web animation knowledge packed into one workshop anywhere else!

To make sure you get as much out of these workshops as possible we’re keeping the the class sizes small. Each workshop is limited to 40 participants and will include hands-on exercises to get you started.

My New Favorite ES6 Toy: Destructured Objects as Parameters

Like a lot of other developers, I’m working through my continued education learning what I can about ES6. One of the ways I’m doing this is to attend workshops by smart people. I went to Kyle Simpson’s ES6: The Good Parts course and found myself particularly interested in the practical applications of a piece of ES6 I had previously not noticed: Destructured Objects as Parameters.

(more…)

High Performance SVGs

I recently worked on a project that was getting a ton of traffic but users were bouncing because the page load was too long at around 10 seconds. They called me in because the majority of the images on that site were SVGs, and they were animated. I trained the team how to decrease the file size on the SVGs while preserving the appearance and functionality, finally getting the load time to under 2 seconds. The bounce rate dropped dramatically and conversion was restored.

(more…)

A Comparison of Animation Technologies

The question I am asked most frequently: what animation tool do you recommend?

Having worked with a slew of them, I can tell you there is no right answer. It's a complicated question and complicated answer. This post serves to clarify what to use, and when, to get you working with the right tool for the job.

If you’re here for React, we’ve got you covered! Jump down to the React section below and we’ll break down what to use and how to use it.

(more…)

I Learned How to be Productive in React in a Week and You Can, Too

This article is not intended for seasoned React pros, but rather, those of us who make websites for a living and are curious how React can help us reason about updating user interfaces. I’ve been intrigued by React for some time, and now that it has gained some standing in the community as well as good reviews, the time to learn it seemed justified. There are so many new technologies constantly emerging in front end development that it’s sometimes hard to know if effort into learning something new will pay off. I’ll spend this article going over what I think some of the most valuable practical takeaways are so that you can get started.

(more…)

A Guide for SVG Support in Email

We’ve talked about SVG quite a bit here on CSS-Tricks, but one area we haven’t quite touched on is email. Now that browser support for SVG is all in the green, it would be easy to assume that we can start using SVG everywhere. However, if you’ve worked with email before, you may know that it often follows way behind the web as far as feature support. You know, kinda the way California looks at North Dakota with trends: just a few years behind. :)

This article takes a deep dive into four different ways SVG can be used, and compares support for those methods across several of the most popular email applications. Let’s see where we get the most support.

(more…)

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