Published inmattholland·PinnedMember-onlyThe Risks of Poor Front End Testing PracticesSummary: In this article, we conceptually explore testing as a make-or-break philosophy. The importance of thinking critically about your testing approach cannot be overstated. Background Inspiration I was on a project engagement recently where I was presented with a philosophical question: should I continue writing brittle, high-maintenance tests for the sake of…React Native Development8 min readReact Native Development8 min read
Published inmattholland·Nov 16, 2021Member-onlyReact Native: Use Storybook to Demo Your Components EasilySummary: Storybook allows you to view and manipulate React Native components and screens easily without having to load them in your actual application. The Issue Developers spend a lot of time testing components for different states and edge cases. Sometimes, specific scenarios can be difficult to replicate in an actual application. Storybook…React Native7 min readReact Native7 min read
Published inmattholland·Apr 24, 2021Member-onlyReact Native: Add Alias Path Module Resolution to Your ProjectSummary: Import project modules directly without worrying about their relative root directory locations The problem If you have ever had to deal with this module path headache: import HomeScreen from '../../../../screens/HomeScreen; import Header from '../../../../components/Header'; import { container } from '../../styles'; import { getString } from '../../../utils'; And would rather your imports…JavaScript3 min readJavaScript3 min read
Published inmattholland·Oct 19, 2020Member-onlyReact Native: How To Use SVGsSummary: How to add support for and use SVGs in React Native projects using react-native-svg and react-native-svg-transformer, including Jest setup. The Trend Scalable vector graphics are increasingly being used on more mobile apps and websites. These have some advantages over bitmap image formats like png and jpg for several reasons: Smaller file…React Native2 min readReact Native2 min read
Published inmattholland·Jan 21, 2020Member-onlyReact: When you should refactor useState hooks into one useReducer hookSummary: Know why, how, and when it’s time to refactor a component to use a useReducer hook instead of several useState hooks. The Scenario I came across a scenario recently where a very bright coworker of mine commented, “Hey, do these states depend on each other? I think maybe it’s time to…4 min read4 min read
Published inmattholland·Jan 6, 2020Member-onlyStatic Testing Tools Your Front End Team Should Be UsingSummary: To minimize unnecessary errors and maximize productive code creation and reviews, every front end stack should be using a common suite of static testing tools shown below. The Why (a few real world examples) Jennifer is in a hurry. She ships out some quick code to meet a deadline. She changed the purchase event object from…JavaScript6 min readJavaScript6 min read
Published inmattholland·Dec 16, 2019Member-onlyJest: write your own “it” and “expect”Summary: Short code samples of what goes on under the hood for Jest’s it() and expect() methods, including making them globally available in Node. If you have used Jest for testing JavaScript applications, this article is for you. This is just a short code sample showing how Jest’s it() and…JavaScript2 min readJavaScript2 min read
Published inmattholland·Aug 26, 2019Member-onlyCreate a Transitioning Header Using React Hooks (like Medium)Article Summary: Use React’s useEffect and useState hooks to build a header that hides/shows on scroll. One small note on setup: I recommend that you use thecreate-react-app boilerplate to scaffold this project. The article assumes that you already have a project structure to work with and does not cover configuration…JavaScript4 min readJavaScript4 min read
Published inmattholland·Jul 8, 2019Member-onlyBuild a Framework-Free Dashboard Using CSS Grid and FlexboxArticle Summary: Create a beautiful, responsive dashboard page using CSS Grid and Flexbox, without any framework (including a sliding side nav)! See the full dashboard codepen here. See the simplified version here. Have you every been mystified by those gorgeous online dashboard demos that have you wondering, “Will I ever…CSS8 min readCSS8 min read
Published inmattholland·Jan 6, 2019Member-onlyManaging Node.js - Express Sessions with RedisArticle Summary: Learn how & why you should use Redis in-memory database storage for scalable Node.js / Express application session management (because the express-session store is not scalable). Overview If you have ever created a local Node.js / Express application that uses session variables for data persistence (i.e. req.session), …Redis6 min readRedis6 min read
