Justin Noel

JavaScript

JavaScript and React Training Suggestions

Looking to learn JavaScript, React / React Native? These are the best courses to get you started or advance your knowledge.

TypeScript

Type Safe Switch Statements with TypeScript

Ensure all possible Enum cases are covered in switch statements using TypeScript.

Using WayBackMachine as Your Archive and Proof of Record

Use the WayBackMachine Internet Archive to validate original authorship for your blog posts.

react-native

Absolute Path Imports in React Native

Replace relative path imports with absolute imports for cleaner, easier to understand React Native code using `package.json`.

shell

Copying a Directory with Exclusions Using `rsync`

Have you ever needed a copy of a directory but didn't want all of the subfolders included in the copy?  Maybe you're about to make a massive change to a codebase and want

Opening Deep Links in iOS Simulator and Read Devices

Does your app use "deeplinks" to open to specific views if an app is installed on a user's device?  If so, it's difficult to be able to test them.  Today, a co-worker showed

array

Generate a Dynamically Sized Array with Unique Values

Use ES6 to generate a dynamically sized array where each member has a unique value.

shell

Diff Files on Command Line and with Visual Studio Code

Have you ever needed to easily tell the difference between two files? Just use the diff command in your terminal.

Creating Git Patch Files with Custom Names

Worried about losing your code? You can create a Git patch file using some custom aliases.

Creating a Custom Jest Snapshot Serializer

I've been setting up a new Ionic Framework (with React) project from scratch.  I want it to be the baseline for all my future projects.  I'm configuring it to have the development workflow

Adding data-testid to an Ionic Framework React Project

A common testing technique is to add a data-testid="home-page" tag to each view in your app.  Then, using something like the react-testing-library, you can find that page for testing like:describe('App',

design

Rapid, Responsive Development with Sizzy

Everyone knows that developing and testing your app/site on various devices is tough.  There are so many dimensions available for even just the major Apple devices.  When you throw in desktops, tablets,

react

Stuck on a Simple React Problem - Please Help!

A React component is failing to accept or use a passed in property. Please help!

kiva

Solving the Immigration Crisis with Micro Loans via Kiva

My challenge to the tech community to solve the immigration crisis in America. With a micro loan, you can help someone help themselves. You can help someone raise themselves up out of poverty and stay in their home country because they are safe, healthy, and productive.

eslint

Configuring Pre-commit Hooks for Prettier and Linting on a TypeScript Project

How to enforce code styles with Prettier and ESLint. Before allowing any commits to occur, format the code with Prettier and check for any ESLint warnings or errors.

ionic framework

Accessibility in Ionic Framework Apps

I've recently been creating a sample project based off of Ionic Framework's sidemenu starter app. Yesterday, I realized the starter was using onClick handlers instead of links to navigate between views. Of course,

ionic framework

Testing React Based Ionic Framework Apps

Are you as excited as I am about using React and Ionic Framework together? You'll be amazed at how easy it is to get started. Thanks to the magic of the Ionic CLI

React

Configuring React Absolute Imports For TypeScript

Are you really tired of typing code like this in your React projects? import { AppContextProvider } from "../../state/State"; import MyComponent from "../../components/MyComponent/MyComponent"; import "./App.css"

JavaScript

Lodash Get For Safer and Readable Code

Yesterday, I tweeted about how often I encounter people opposed to using Lodash in their projects. I'm frequently surprised how many people refuse to allow Lodash in their projects. I get

lodash

Lodash Memoize with a Resolver

A while back, I wrote about Lodash Memoize. However, I missed a critical point about it that Pavel Zubkou pointed out. memoize uses the first argument to create the key to the cache.

javascript

New ESLint / TypeScript Configuration

Learn how to integrate TypeScript, Prettier, and ESLint in a new Create React App project.

apple

Apple ID Problems

I need to change my Apple ID. Let's say it is currently "[email protected]", and I need to change it to "[email protected]". I go through the

ios

Adding a Splash Screen Image in Xcode

I won't actually cover the entire process to add a splash screen (or "Launch Image") to Xcode. It's already covered in great detail in this post by @spencer_carli. UPDATE: Here's

android

Throttling Network Speeds on macOS and iOS Simulator

When developing mobile apps, it's important to recognize your mobile users will likely have a much slower network connection than you use while developing. So, it's good to run your app in a

android

Launch An Android Emulator from the Command Line

While developing React Native apps (or Ionic Framework) I really dislike opening Android Studio on my Mac just to launch an emulator.To avoid this, I use this workflow:# Put this in your