Articles by
Sarah Drasner

DOM Blacksmith, UX Smelter, Code Forger.

Using Mixins in Vue.js

It's a common situation: you have two components that are pretty similar, they share the same basic functionality, but there's enough that's different about each of them that you come to a crossroads: do I split this component into two different components? Or do I keep one component, but create enough variance with props that I can alter each one?

Neither of these solutions is perfect: if you split it into two components, you run the risk of having to update it in two places if the functionality ever changes, defeating DRY premises. On the other hand, too many props can get really messy very quickly, and force the maintainer, even if it's yourself, to understand a lot of context in order to use it, which can slow you down.

Enter mixins. (more…)

Masking vs. Clipping: When to Use Each

I was recently doing some client work where I used both <clippath></clippath>s and <mask></mask>s in SVG to hide and show content for animation. When I started this project, I thought I knew all of the reasons to use one over the other. But, as tends to happen, working closely with something reveals idiosyncrasies. In this post, we'll go over some of these details so that you can get productive as soon as possible.

(more…)

Using Filters in Vue.js

Filters are an interesting way to deal with data rendering in Vue but are only useful in a small amount of cases. The first thing to understand about filters is that they aren't replacements for methods, computed values, or watchers, because filters don't transform the data, just the output that the user sees. As of Vue 2.0, there are no built-in filters, we need to construct them ourselves.

(more…)

Production Progressive Web Apps with JavaScript Frameworks

This last week at Google I/O, Addy Osmani announced some amazing developer resources for creating Progressive Web Applications (PWAs) that prioritize performance with JavaScript Frameworks.

This was truly a team effort- a lot of people worked on these projects to get them going, and it's a really valuable contribution to the community. A lot of people want better performance for their framework of choice but can't get buy-in for time and resources to devote to this kind of endeavor. The ability to start with a baseline of high performance and good lighthouse scores is incredibly valuable, allowing developers to enjoy both the productivity and ergonomics of exciting frameworks, without sacrificing speed and user experience.

(more…)

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…)

Debugging Tips and Tricks

Writing code is only one small piece of being a developer. In order to be efficient and capable at our jobs, we must also excel at debugging. When I dedicate some time to learning new debugging skills, I often find I can move much quicker, and add more value to the teams I work on. I have a few tips and tricks I rely on pretty heavily and found that I give the same advice again and again during workshops, so here's a compilation of some of them, as well as some from the community. We'll start with some core tenets and then drill down to more specific examples.

(more…)

Intro to Vue.js: Animations

This is the fifth part in a five-part series about the JavaScript framework, Vue.js. In this last part of the series, we'll cover Animations (if you know me at all, you probably knew this was coming). This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know Vue.js and understand what the framework has to offer.

(more…)

Intro to Vue.js: Vuex

This is the fourth part in a five-part series about the JavaScript framework, Vue.js. In this part, we'll cover Vuex for state management. This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know Vue.js and understand what the framework has to offer.

(more…)

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