JS

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 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!

I attended the first BrisJS meetup of the year last night. This was my first time attending a “programming language-centric” meetup, and I was surprised to find around 100 people in attendance. All presenters and the majority of the crowd looked to be in their 20’s, and while the presentations didn’t have the level of polish that I would usually expect for an event of this size, I was still able to learn a few things, and more importantly, have some interesting conversations with other developers about projects they are working on and opportunities in the market.