Some Insights gained as a Test Engineer Note: This post was also included in Software Test Weekly. Many other amazing testing related articles are also listed there! Testing vs Checking Testing is a matter of imagination. Testing requires critical thinking and suspicion. Testing cannot be automated just like how programming cannot be automated. Checks can be automated. Automated Testing should…

A few React characteristics to keep in mind: State Update is Asynchronous (slower than what you expect!) State updates are asynchronous , so be careful with using the state immediately inside the same function. E.g. in the handleChange() below, the state input is not updated immediately after setInput is called. …

Heuristics: Simple and efficient rules for making a “good enough” decision for a local optimal solution. Frontend System Design Heuristics Understand the problem and Requirements Guiding Questions: What does the system do? What data are involved in the system? Who are the actors in the system? What does a happy path look like (functional req — some dimensions: display order/…

In Wesbos Advanced React lesson, the module 10 is on implementing the Search feature to search for products across the site. The Stack: KeystoneJS (auto generates Backend GraphQL APIs), NextJS, Apollo GraphQL, Downshift (autocomplete widget). The 2 things for implementing this Search feature are: useLazyQuery from Apollo GraphQL Queries Downshift…

After taking Wesbos’ Advanced React course, I got a better idea on how to configure the user Access Control ! Here is what I learnt with examples based on the KeystoneJS server. Authentication VS Authorisation Authentication — checks if the user is signed in. Authorisation — checks if user has the permission to…

What does the pattern look like? // Sign In Gate export const SignInGate = ({ children }) => { const user= useUser(); if (!user) return null; return <div>{children}</div>; }; //------------------------------------------------ // use the Sign In Gate export default function MembersOnly() { return ( <SignInGate> <MembersProduct /> </SignInGate> ); } Under what situation can this be used?

A summary of tricks learnt from Josh Comeau In our applications, we can sometimes notice z-index of elements increase overtime as new requirements and components get added. There are times when the dropdown menus get hidden behind text input boxes or floating components bleed through modals after UI component upgrade. …

Server Site Rendering and Static Site Generation Next.js 9.3 and newer offers special functions for data fetching: getStaticProps, getStaticPaths and getServerSideProps. Before Next.js 9.3, there was a function getInitialProps used for data fetching. I tried finding answers to the following questions to really fully understand these special functions. Is getStaticProps only good for rendering static pages like About or Blogs?

An usefulChrome debugging tip for inspecting dropdown menus! — CSS debugging tool is awesome. We normally use the Chrome CSS inspectors to try out quick experiments and quickly find out what certain page or components look like when certain styles are applied. However, you may find CSS inspection impossible if your component is a dropdown menu, which closes every time you click away for inspection…