tldr: this CodeSandbox demonstrates a way to fetch state via a context only when required, eliminating unnecessary renders. Overview The React Context API has made accessing state anywhere in the component tree (and writing clean code without prop drilling) easier than ever before. This article: examines a typical pattern for sharing state using the Context API, and discusses performance implications of the above pattern, and proposes a simple modification using the useRef and useCallback hooks to eliminates unnecessary renders.

Higher-Order Components are “functions that take a component and return a new component”, and while they are not part of the React API, “they are a pattern that emerges from React’s compositional nature” (React docs). HOCs can be used to avoid repeated code in many scenarios such as: showing a loader, while waiting for data, conditionally rendering components, managing common user-interactions states, providing components with specific styles, and more generally, providing a component with any prop.

Javascript’s logical OR || and logical AND && operators are useful in contexts other than creating if, else, while etc. statements, but there are some edge cases that that I see many devs (myself included) getting caught out by. This article explores common pitfalls, and provides recommendations for: using ?? instead of || to define values with a default fallback, and using && to conditionally render JSX components only when required props are defined.

tl;dr When using Python to write web scraping / general automation scripts, run Python using the -i flag preserve and interact with the latest state (i.e python -i script.py). This let’s you avoid re-running the whole script every time a change is made. Problem When developing a bot or web scraper that operates behind a login screen, development, testing, and debugging can take longer than you might expect. The process of write code --> test --> debug --> repeat hits a bottleneck every time the browser starts, pages load, login details are entered, the welcome page loads, and so on.

tl;dr Bookmarklet are browser bookmarks that, instead of linking to a web page, inject custom javascript into the current page. Here are a couple of bookmarklets I use regularly - to add them to your browser simply copy the minified code directly into the URL field for a new bookmark (remember to include the javascript: prefix). Track current mouse coordinates Use the below script to display the current mouse coordinates in the current tab title:

tl;dr Typr is a simple web-based typing tutor that lets you practice typing using your own material. It also provides live feedback on typing speed, and in the future will include detailed statistics and algorithmically-generated custom exercises. Create an account and use it for free here. Check out some screencasts of the UI. Check out the source code on Github. The demo is currently hosted on a Heroku free-tier server which treats itself to a nap when there is no traffic and can take up to 30 seconds to wake up, so please be patient!

tl;dr It’s hard to underestimate the importance of typing. Unless you are a journalist, legal secretary, or professional writer, you probably don’t get enough practice to ever become truly fast. I built Typr and used it to simultaneously read & type “Surely You’re Joking, Mr. Feynman!”. Two weeks and 100,195 words later, I was maintaining between 100-110 WPM after starting out at 50 WPM. If you like reading, kill two birds with one stone by using Typr to practice typing material you would otherwise be reading.

This is part of the Idea Machine, an ongoing series of short posts inspired by a James Altucher article titled Write Ten Ideas Every Day And Within Three Months You Will Have Rewired Your Brain. Read more about the project here. Listening to instrumental beats while watching the news, lectures or other educational videos is something I have always done. It keeps my brain just busy enough to maintain consistent focus, plus I find it endlessly amusing to hear the rhythmic cadence of a good speaker lining up perfectly with a solid beat and a chunky bassline.

tldr: Auto-scrape let’s you focus on writing web scraping scripts, while it takes care of logging, data persistance, data presentation and data export, all through a modern browser-based UI. It can be run locally or deployed remotely. Here are some screencasts of the UI. Get it on Github. Why scrape the web? Building a Selenium web scraper is almost a rite of passage for programmers starting out. Watching a computer fill out forms, click links and collect data before your eyes is not only a highly satisfying and suitably non-abstract exercise for beginners to complete - browser automation forms a foundation for frontend testing, can be used for automated research, and of course can be used to replace those expensive and unreliable humans to accomplish a wide range of business-related tasks.

Expressing time intervals in a format that is readable by humans is an old problem that every frontend developer will eventually face. While there are plenty of solutions available (this one is my favourite), I required a function that could provide different levels of granularity in it’s “human-readable” description of time. Take, for example, a component that tells the user how long in aggregate they have been using a service. If they have been using it for a few hours, it would be appropriate to display ## hours, ## minutes, ignoring the seconds and milliseconds.