All Posts
Merry JavaScriptmas Everyone!
Posted on December 21, 2020By the time I found Scrimba's super fun 24 Days of JavaScriptmas challenge, I think it was already December 16 or so, so I am playing catch-up to try to get them all done in time to win my certificate…
Read full postReact Hooks: useDebugValue()
Posted on July 10, 2020The useDebugVlue React hook is meant to make debugging custom hooks easier by giving them our own custom names. When an error occurs we can see the custom name in the React DevTools stacka trace…
Read full postReact Hooks: useLayoutEffect()
Posted on July 08, 2020In class-based React apps, we used lifecycle methods instead of hooks. For example, we could control the program using componentDidMount or componentDidUpdate. People familiar with coding classes tend…
Read full postReact Hooks: useImperativeHandle()
Posted on July 07, 2020While the useImperativeHandle hook is not used often, it is available if we run across a situation where a child component's ref needs to be passed to its parent component to use. For example, a…
Read full postReact Hooks: useMemo()
Posted on July 05, 2020Although the useCallback and useMemo React hooks seem similar, while useCallback is used to create a memoized callback function to child components, the purpose of useMemo, in contrast, is to create a…
Read full postReact Hooks: useCallback()
Posted on July 04, 2020To understand the useCallback React hook, it helps to first understand the problem it is intended to solve. When we have a child component that needs to re-render often, all its functions will also…
Read full postReact Hooks: useReducer()
Posted on July 03, 2020To understand the useReducer React hook, it helps to first understand what a reducer actually is. First, a reducer is a function that executes code to update global state values depending on an…
Read full postReact Hooks: useContext()
Posted on July 01, 2020The React useContext hook is used in combination with the React Context API. Without using Context in React, props that need to be shared between components are passed as attributes from parent to…
Read full postReact Hooks: useEffect()
Posted on June 30, 2020When we update state, many apps also need to execute side-effects, such as making API calls, communicating with a database, or updating local storage. Since state causes re-renders, we can use the…
Read full postReact Hooks: useRef()
Posted on June 23, 2020useRef is a React hook that mutates the current value of a variable that we can optionally initialize with an initial value or leave undefined. Its major difference to the useState hook is that it…
Read full postReact Hooks: useState()
Posted on June 23, 2020React functional components use the useState React hook to keep track of "stateful" values, or variable value changes that we need to keep track of in our application. In the code below, you can see a…
Read full postHow to Use the JavaScript Comma Operator
Posted on May 03, 2020Most of us are familiar with common JavaScript arithmetic, comparison, and assignment operators, such as those for addition, string concatenators, greater-than or less-than comparisons, and many more…
Read full postHow to Create Dot Filenames like .htaccess in Windows
Posted on April 26, 2020If you are trying to name a file in Windows so it starts with a dot, such as .htaccess or .gitignore, you will get an error "You must type a filename". To get around this, all you need to do is type…
Read full postHow to Make a Parent Element Transparent without also making its Child Elements Transparent
Posted on April 22, 2020I have always loved the effects you can achieve with semi-transparency, especially in dark-themed designs. So, in the old days, I primarily used Photoshop to create semi-transparent images for my…
Read full postDeploying Gatsby to a Subfolder
Posted on March 22, 2020I was even more surprised and delighted with how easy and fun Gatsby is than I expected from reviews! Setting up the development environment is a piece of cake, as is applying a theme and customizing…
Read full post