javascript Posts

  • Progressively Enhanced Form Validation

    In this post, we'll examine an approach to progressively enhance your HTML5 form validation in your Vue.js application, using existing DOM API's and minimal overhead to your existing Vue components.

  • Instance-Aware Vuex Modules - Part 3

    Note: This is part 3 of a 3-part series on "Instance Aware Vuex Modules". In Part 1 we covered a basic introduction to Vuex and the use of namespaced modules. In Part 2 we covered the usage of dynamic route-based Vuex modules, the issues with map* helpers, and how we can work around them with our own mapInstance* helpers methods. In this post, we'll explore other opportunities where instance-aware Vuex modules can help us.

  • Instance-Aware Vuex Modules - Part 1

    Vuex is a great state-management tool provided by the Vue core team. It's especially useful in server-side rendered (SSR) applications as a mechanism to send the server-side state up to the client for the app hydration process. In this post, we'll look at some of the basics of Vuex and how we can use namespaced modules to isolate our logic into small, targeted modules.

  • Instance-Aware Vuex Modules - Part 2

    Note: This is part 2 of a 3-part series on "Instance Aware Vuex Modules". In Part 1 we covered a basic introduction to Vuex and the use of namespaced modules. In this post, we'll explore using dynamically-namespaced Vuex modules alongside dynamic routes in vue-router, and some interesting challenges presented.

  • Component-Driven Performance Patterns in Vue

    As web apps grow more complex, we end up sending larger JS/CSS bundles to the client. If you're not careful, before long you can find yourself with a site that is no longer snappy on slower connections due to the sheer amount of time it takes to send the bundles across the wire. This post aims to document handful of patterns we've found handy at URBN to keep bundles small and our load times fast.

  • The Power of Reduce

    The Array.prototype.reduce method is one of those methods that is unnecessarily frightening at first glance. It's something that I myself was uncomfortable with for much longer than needed early on in my career. If you find yourself in that position, I hope this article helps change that.

  • A Look Inside Vue's Change Detection

    A layman's interpretation of Occam's Razor can be boiled down to "the simplest explanation is usually the correct one." This was exactly what came to mind the moment I learned how Vue.js implements it's change detection under the hood. It's simple, elegant, and beautiful.

  • Building a Blog with Metalsmith

    Ever want to set up your own blog? Stuck on which Static Site Generator to use? Know Javascript? Or don't? After trying out multiple NodeJS based SSG's, and looking into multiple non-NodeJS based ones, I settled on Metalsmith for my own blog. Here's my beginner's guide to setting up a new blog from scratch.

  • Nested Reactive Forms in Angular2, Continued

    If you haven't read Part 1 of this post, I suggest you jump over and check that out first, or else you may find yourself lost in the advanced operations we'll be discussing here. In this post, we're going to look at more advanced usages of this setup, including form submission, adding/removing children, autosaving, undo/redo, and resetting form state.

  • Nested Reactive Forms in Angular2

    Over at URBN, I recently worked on a little internal app that involved a fairly complex nested form UI. Having only done limited Angular2 work thus far, mostly using NgUpgrade against an existing Angular1 app, it was a great learning experience in some of the new form capabilities offered in Angular2. However, I couldn't find many great examples involving nested forms that felt clean/maintainable/etc. After a few days of hacking, I was pretty happy with what we ended up with, and super excited about the new Reactive Forms in Angular2.

  • Beware of hidden inputs in Angular filters

    If you've been writing JavaScript (or really any language for that matter) in the past few years, chances are you've caught wind of the rising popularity of functional programming paradigms. Pure functions are one of the major concepts of functional programming, and as it turns out, the usage of impure functions in Angular filters can produce some not-so-obvious bugs in your AngularJS application.

  • My Journey to Metalsmith

    Every developer has a never-ending TODO list of side projects, experiments, blog posts, etc. We're going to get to these things, we promise! Perpetually hanging towards the top of my list was "make brophy.org more than just my resume." However, tackling that item proved to be a longer-than-anticipated journey through the world of Static Site Generators, finally landing me on Metalsmith.