Articles
-
Aborting Fetch Requests in React
This method can really be applied to any framework, but I’m going to explain how to do this within the context of React. It’s generally a good idea to cancel your Ajax requests if you no longer actually care about the response, but it’s only recently become possible with fetch thanks to AbortController.
-
Quick Tip: Import CSS from Node Modules Using Webpack and CSS-Loader
Here’s a quick tip for importing CSS directly from your node_modules folder when using webpack and the CSS Loader. This is superior to just copy-and-pasting the CSS code because it ensures that your styles will always be in sync with your version of the library, you don’t have to remember to update the styles manually, and it’s a lot less work!
-
React PureComponent Pitfalls
Unnecessary re-renders can slow down your app, especially when rendering large collections where updates to the collection occur frequently. The React docs sometimes refer to these as “wasted” renders. Using React’s PureComponent class can be a excellent way to solve these problems, but you need to be careful that you avoid undermining its effectiveness.
-
Testing Optimistically-Updating UI with Capybara
It’s part of Capybara’s philosophy to write tests from the perspective of the user. When we interact with the page, we determine whether or not the system is behaving correctly by looking at what was rendered in response (just like a user would), and not by checking database counts or anything else under-the-hood that a user wouldn’t know about. Optimistically-updating UI, however, instantly responds to user interactions without waiting for the Ajax request to complete. This makes testing difficult because assertions will immediately pass, and the test suite will attempt to move on to the next example or next action.
-
Testing React-Select with Capybara and Poltergeist
The react-select library is great for creating all sorts of select and autosuggest components. However, it’s actually rather complex under the hood and can be a little tricky to test via Rails Capybara tests. Here I present a Poltergeist-specific solution to the problem.
-
Using Flow Annotations in Your Redux Reducers
Facebook’s Flow type checker can be a wonderful ally for JavaScript development, but I found that in order to use it in my Redux reducers, I needed to switch to what the Redux docs refer to as an “object mapping” style of writing reducers. This is as opposed to the normal switch style that is more commonly seen. You can find more information about the two styles in the reducing boilerplate section of the docs (towards the bottom).
-
Console Logging Immutable.js Objects
Using Immutable.js to keep your React stores in an immutable state is a very good idea. However, if you like to debug via printing to the console, you may be frustrated by the resulting deeply nested and strange-looking output when logging an Immutable.js object to the console. Here are two quick ways to improve the output.
-
Is Programming a Unique Discipline?
Are the peculiarities of programming (I’m just going to call it “programming” for simplicity, but you can take this to mean web development, software engineering, mobile app development, scripting, and so on) really due to it being a unique discipline? Are the constantly evolving standards and technologies, wild variabilities in quality, seemingly endless new startups, and global expansion of influence all unavoidable characteristics of the industry? Please don’t take the following as me trying to answer these questions definitively or even as me taking a certain stance on the issue. I am merely thinking out loud here.
-
Use Secure Web Fonts
Recently, it seems like a surprising number of websites I visit are using SSL but are trying to load non-SSL versions of required assets (for example, web fonts). Most modern web browsers will block these assets from loading as a security precaution. This is extremely simple to fix, so there is really no excuse for allowing this problem to occur.
-
Integrating Gulp into Your Jekyll Workflow
This is a walk-through demonstrating how to integrate Gulp.JS into your Jekyll site’s workflow. This is especially geared towards sites deployed on GitHub Pages because I will show how to use Gulp without sacrificing GitHub’s Jekyll integration support.
-
Use JavaScript to Make External Links Open in a New Window
This is a quick post showing how to use JavaScript to make links to external websites open in a new window (or tab) instead of in the current window. This is useful for Jekyll blogs because the Markdown converters don’t do this for you. I included two versions: one that uses straight JavaScript, and one that requires jQuery but is shorter.
-
Frontend Masters Angular Components and Node Workshop with Scott Moss
I recently had the pleasure of taking a 5-day workshop offered by Frontend Masters (@FrontendMasters) from July 20th to the 24th. The first two days focused on writing Angular applications using a component architecture and ES2015. We spent the remaining 3 days building an API with the server-side parts of the MEAN stack (MongoDB, Express, Node.js).
Aborting Fetch Requests in React
This method can really be applied to any framework, but I’m going to explain how to do this within the context of React. It’s generally a good idea to cancel your Ajax requests if you no longer actually care about the response, but it’s only recently become possible with fetch thanks to AbortController.
Quick Tip: Import CSS from Node Modules Using Webpack and CSS-Loader
Here’s a quick tip for importing CSS directly from your node_modules folder when using webpack and the CSS Loader. This is superior to just copy-and-pasting the CSS code because it ensures that your styles will always be in sync with your version of the library, you don’t have to remember to update the styles manually, and it’s a lot less work!
React PureComponent Pitfalls
Unnecessary re-renders can slow down your app, especially when rendering large collections where updates to the collection occur frequently. The React docs sometimes refer to these as “wasted” renders. Using React’s PureComponent class can be a excellent way to solve these problems, but you need to be careful that you avoid undermining its effectiveness.
Testing Optimistically-Updating UI with Capybara
It’s part of Capybara’s philosophy to write tests from the perspective of the user. When we interact with the page, we determine whether or not the system is behaving correctly by looking at what was rendered in response (just like a user would), and not by checking database counts or anything else under-the-hood that a user wouldn’t know about. Optimistically-updating UI, however, instantly responds to user interactions without waiting for the Ajax request to complete. This makes testing difficult because assertions will immediately pass, and the test suite will attempt to move on to the next example or next action.
Testing React-Select with Capybara and Poltergeist
The react-select library is great for creating all sorts of select and autosuggest components. However, it’s actually rather complex under the hood and can be a little tricky to test via Rails Capybara tests. Here I present a Poltergeist-specific solution to the problem.
Using Flow Annotations in Your Redux Reducers
Facebook’s Flow type checker can be a wonderful ally for JavaScript development, but I found that in order to use it in my Redux reducers, I needed to switch to what the Redux docs refer to as an “object mapping” style of writing reducers. This is as opposed to the normal switch style that is more commonly seen. You can find more information about the two styles in the reducing boilerplate section of the docs (towards the bottom).
Console Logging Immutable.js Objects
Using Immutable.js to keep your React stores in an immutable state is a very good idea. However, if you like to debug via printing to the console, you may be frustrated by the resulting deeply nested and strange-looking output when logging an Immutable.js object to the console. Here are two quick ways to improve the output.
Is Programming a Unique Discipline?
Are the peculiarities of programming (I’m just going to call it “programming” for simplicity, but you can take this to mean web development, software engineering, mobile app development, scripting, and so on) really due to it being a unique discipline? Are the constantly evolving standards and technologies, wild variabilities in quality, seemingly endless new startups, and global expansion of influence all unavoidable characteristics of the industry? Please don’t take the following as me trying to answer these questions definitively or even as me taking a certain stance on the issue. I am merely thinking out loud here.
Use Secure Web Fonts
Recently, it seems like a surprising number of websites I visit are using SSL but are trying to load non-SSL versions of required assets (for example, web fonts). Most modern web browsers will block these assets from loading as a security precaution. This is extremely simple to fix, so there is really no excuse for allowing this problem to occur.
Integrating Gulp into Your Jekyll Workflow
This is a walk-through demonstrating how to integrate Gulp.JS into your Jekyll site’s workflow. This is especially geared towards sites deployed on GitHub Pages because I will show how to use Gulp without sacrificing GitHub’s Jekyll integration support.
Use JavaScript to Make External Links Open in a New Window
This is a quick post showing how to use JavaScript to make links to external websites open in a new window (or tab) instead of in the current window. This is useful for Jekyll blogs because the Markdown converters don’t do this for you. I included two versions: one that uses straight JavaScript, and one that requires jQuery but is shorter.
Frontend Masters Angular Components and Node Workshop with Scott Moss
I recently had the pleasure of taking a 5-day workshop offered by Frontend Masters (@FrontendMasters) from July 20th to the 24th. The first two days focused on writing Angular applications using a component architecture and ES2015. We spent the remaining 3 days building an API with the server-side parts of the MEAN stack (MongoDB, Express, Node.js).