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.
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.
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.
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.
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 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 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.
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.
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.
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.