How to increase your value as a developer

The talk in 3 sentences

  • Good marketing gets important message to the right person at the right time
  • Be excited! Projects/ Blogposts/ or just yourself. Share about the progress, the benefits. REPEAT. REPEAT. REPEAT.
  • Improve on techniques: Learn from other developers. Why you love following them? How do you know about them? Monitor web analytics and continuously improve based on data.


I love how Stephanie explains the differences between good marketing and bad marketing. The differentiation makes it easier for me to overcome the stereotypes about marketing (manipulation, irrelevance) and convey the idea to other friends.

Who should watch it

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 be called Automated Checking.
  • Testing does not improve quality. Testing does not guarantee quality. Testers collect evidence and drop inferences to infer the confidence in the products.

Mindsets are powerful

  • Mindsets fundamentally guide people’s decision making process and the resulting stream of actions
  • Some super experienced engineers still insisted on writing solid unit…

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. Therefore, if we fetch data using the input state, the value of input would actually be before the update!
const handleChange = (event) => {  setInput(;
fetchData(input); // x , prev input value
fetchData(; // o , current value
  • However, the useEffect hook is run after the state updates and DOM updates, our fetchData() would get the updated…


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/ sort, expiry time, randomness)?
  • What are the attributes of the system capabilities (non-functional req — eg. performance/latency, live update, usability, accessibility, multiple device support, consistency, availability, peak throughput)?

Example: Design Twitter

  • The system allows users to post new tweets, to follow other users, to like and comment on other users…

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:

  1. useLazyQuery from Apollo GraphQL Queries
  2. Downshift API

GraphQL Query

KeystoneJS auto creates graphQL queries based on our schema. E.g. if we have a Products schema. One of the generated queries is allProducts which allows us queries for all products in the database. Also, we are given a number of ways to filter, sort, limit our items e.g.

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 perform certain actions.

What does the structure look like ?

The Key Piece! => Session!

In the main KeystoneJS configuration, the Session passes the user details such as id , email, along with the request.

What does the pattern look like?

// Sign In Gateexport const SignInGate = ({ children }) => {  const user= useUser();  if (!user) return null;  return <div>{children}</div>;};
// use the Sign In Gateexport default function MembersOnly() { return ( <SignInGate> <MembersProduct /> </SignInGate> );}

Under what situation can this be used?

The Sign In Gate can be used in other area where we only want to show certain elements after the user has signed in. For instance, display members only content.

It can also be used in checking server/ client side rendering in SSR and avoid the UI flick when client renders over the existing server side rendered…

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.

There are 3 tricks that can help minimise the risk and avoid ever increasing z-index value.

1. Sensible DOM order with occasional z-index

By the natural flow of DOM order, the elements created later with non-static positions like position: absolute or position: relative can cover the elements created earlier.

It is important to have a sensible DOM…

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?

getStaticProps fetches data at build time when the code gets compiled into exe and serves to the client the rendered HTML. It is the fastest Static Site Generation, SSG. The contents are cached on CDN, which makes it even faster.
However, it does not mean that it only servers static pages.
getStaticProps can be…

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…

To stop the dropdown menu from closing:

  1. Set a break point on the parent node of the dropdown menu

2. Click on the parent node to open the dropdown menu. You will notice that the debugger may pause a few times before the menu is opened

Sherry Hsu

A software engineer passionate about learning and growth

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store