Future Proofing Your Remix App (Remix Blog) ↗️
At Remix, we know first-hand just how painful it can be to go through a major version upgrade. Especially for something as foundational to your application as the framework or router it's built on. We want to do our very best to provide you a best-in-class upgrade experience -- let's talk about "Future Flags".
Lazy Loading Routes in React Router 6.4+ (Remix Blog) ↗️
If we want lazy-loading to play nicely with data routers, we need to be able to introduce laziness outside of the render cycle. Just like we lifted data fetching out from the render cycle, we want to lift route fetching out of the render cycle as well.
React-Routering Remix (Remix Blog) ↗️
Earlier this year we started an undertaking to Remix React Router with the aim of bringing all of the Remix Data API's (
loaders,actions,fetchers, etc.) over to React Router. With the recent release of React Router v6.4.0 we're proud to report that we've completed that effort...and we think we've made them even better 😃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 ownmapInstance*helpers methods. In this post, we'll explore other opportunities where instance-aware Vuex modules can help us.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.
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.
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.