Webpack is a one of the current defacto build tools, and it’s code splitting can do wonders for optimizing performance. Unfortunately Shopify doesn’t play nice with this feature of Webpack out of the box. Read on to learn how to fix this…

Build an Autosizing Textarea With Vue

So you’ve seen those cool textarea components in frameworks like Vuetify and VueMaterial, but you don’t want to install a full UI framework for your new project. That kind of effect is actually pretty easy to set up once you know a couple tricks. So let’s jump right in…

Query Firestore to Validate Security Rules

Tools like Firebase help make the headless future a possibility for everyone, but exposing enough data to users to make a connection puts the onus of security on your Firestore database rules. If you’re structuring your collections to be shallow like Firebase recommends, this can be a challenge. By using queries in your security rules, this problem is easily solved.

Build a Chat Application with Vuex and Firebase

Building a real time chat application used to be such a pain. You need a back end and a server to run it on… a huge undertaking in it’s own right. Not to mention polling techniques or a socket library to sync the front end with updates from the back end. These days that entire stack can be replaced with a database service like Firebase. So let’s get to building!

Babelify Critical JavaScript with Gulp

Inlining critical CSS and JavaScript can seriously improve time to first render for above the fold content, but current tooling for JavaScript has an achilles heel: ES2015+ syntax. Don’t let that stop you from optimizing your page load and using the new features during development. We can build it… we have the technology!

Compile Your SVG Sprites With Gulp

No matter what kind of app you’re building, chances are you’re going to need icons at some point. As of this writing, the best, most accessible method of working with icon sprites is to use SVG graphics. This can lead to a lot of tedious copy and paste of SVG code into a symbol library for optimization. Or… we could have gulp take care of that for us!

Centralize Your Sails.js Sockets with a Pipe

When building a realtime application, Sails.js integration with Socket.io can make your life a lot easier. Sails does a lot to help set up web socket connections and streamline model update notifications to connected users, but being a Back End framework, it doesn’t offer a whole lot in the way of organizing those updates on the front end. But fear not! You can easily take control of overzealous and scattered socket handlers with a simple pipe!

Creating an SVG Icon Store with Vue.js

Creating an SVG icon store can help to give your site a custom feel, and eliminate extra http requests for potentially bulky icon library files. Paired with a component-based front end framework like Vue.js, you can exercise an amazing amount of control over your icon libraries while keeping your pages lean and fast.