I want to use an example form component that uses react-hook-form, you can see it featured in my recommended packages post here. Let’s start by creating our form component. And now FirstField.tsx Let’s just assume that the implementation of SecondField is much the same as FirstField, but without the useEffect, and for the purpose of… Continue reading Jest – think integration
Javascript – favour immutable patterns
I am going to use quite a basic example here, but I feel it still gets the point across, consider this code: the person object is being created with department: ‘IT’ because if the getEmployeeDepartment is not able to find their department, then it should remain as IT, this is the default. There is a… Continue reading Javascript – favour immutable patterns
Process – rollback with splits
Consider this scenario, your application has a utility field that is used by all form elements that take the form of a dropdown, and this amounts to about 200 consumers. This utility field is considered legacy, it does not follow new gen practices / use frameworks that have recently been adopted by your development team.… Continue reading Process – rollback with splits
React – recommended packages
This post will be a work in progress, but for now I want to start with two great packages. The first is react-hook-form, this is one of the best packages I have used in recent years, out of the box it provides some great hooks and also a global context which allows your form components… Continue reading React – recommended packages
Chrome Dev Tools – network throttle
Sometimes it is easy to forget that the end user might not have the amazing internet you have, I work from home on a 350mb fibre connection, so everything seems very fast. We should try to consider the end user who might not be on a good connection, or maybe they have one at home,… Continue reading Chrome Dev Tools – network throttle
Javascript – check out the Event Loop
You can read more on the Event Loop here, this is quite low level subject matter, and most developers may have never even heard the Event Loop, let alone understand the dynamics involved. If you are one of those developers, don’t worry, this isn’t anything to be ashamed of, after all many of the dynamics… Continue reading Javascript – check out the Event Loop
Javascript – know your method definitions
I definitely recommend regularly refreshing yourself on definitions of common methods used in Javascript, for example Array.prototype.filter() Consider this code: If I saw this code I would think that the author is probably mistaken about how filter works. In some cases array methods will mutate the original array, for example Array.prototype.sort(), but filter does not… Continue reading Javascript – know your method definitions
React – SPA meta tag limitations
When you first load a url the browser performs a document request, and under the hood it will look something like this: You can see here that we are provided with things like a doctype and meta tags. Most consumer facing websites will constantly be trying to improve their traffic, one way to achieve this… Continue reading React – SPA meta tag limitations
React – keep JSX simple
Consider this code: Nothing inherently wrong here, but I do think this this code could be a little bit cleaner, and to be honest what I am about to point out could be considered very subjective, but I think it is worth at least considering. I believe JSX should stick to a document (markup) style… Continue reading React – keep JSX simple
Process – consider a dependancy manager
Have you ever started work one day and thought “oh dear it has been a while since we updated any of our npm packages”, or maybe the warnings that show during install have been building up, and no one is really taking the time to understand why. You also might find out one day that… Continue reading Process – consider a dependancy manager