Blog

Notes on Blogs I Read From 5th Sept to 18th Sept

September 19, 2019

📅 05-09-2019

🚀 Bit encapsulates components in your projects with all their files and dependencies, so they can run anywhere across your applications

Bit Intro

Pluralsight has lot of High Quality Developement Videos

🚀 Globalization Tools - The State of the Web

👨‍💻 By Google Chrome Developers

📅 06-09-2019

🚀 How To Write Better Code in React

👨‍💻 By Rajat S

9 Useful Tips for writing better code in React: Learn about Linting, propTypes, PureComponent and more.

EsLint
propTypes and defaultProps
Know when to make new components
- Is your code’s functionality becoming unwieldy?
- Does it represent its own thing?
- Are you going to reuse your code?
Component vs PureComponent vs Stateless Functional Component
- Stateless Functional Component - Does not using any kind of state, refs, or lifecycle methods.
- Pure Components - Does not trigger a re-render if props do not change.
- To check if re-render is unnecessary - why did you update npm
Use React Dev Tools
Use Inline Conditional Statements
Use Snippet Libraries whenever possible
React Internals — Learn how React works
Use tools like Bit / StoryBook to improve your component development workflow

📅 10-09-2019

🚀 How To Fetch Data From An API With React Hooks

👨‍💻 By Indrek Lasn

useState and useEffect Simple Example

🚀 How the useEffect Hook Works

With useEffect, you can handle lifecycle events directly inside function components. Namely, three of them: componentDidMount, componentDidUpdate, and componentWillUnmount.

Stackblitz Example of useEffect() render and unmount

Cleanup function you can (optionally) return from useEffect isn’t only called when the component is unmounted. It’s called every time before that effect runs – to clean up from the last run. This is actually more powerful than the componentWillUnmount lifecycle because it lets you run a side effect before and after every render, if you need to.

Another way to think of this array: it should contain every variable that the effect function uses from the surrounding scope. So if it uses a prop? That goes in the array. If it uses a piece of state? That goes in the array.

It will print “mounted” after the initial render, remain silent throughout its life, and print “unmounting…” on its way out.

This comes with a big warning, though: passing the empty array is prone to bugs. It’s easy to forget to add an item to it if you add a dependency, and if you miss a dependency, then that value will be stale the next time useEffect runs and it might cause some strange problems.

Remember that useState is stateful (read more about useState). It only uses the initial state once, the first time it renders. After that it’s ignored. So it’s safe to pass a transient value, like a prop that might change or some other variable.

📅 11-09-2019

🚀 Red Stapler

Three.js Realistic Rain Effect

📅 12-09-2019

🚀 Color Tools For Designers 2019

🚀 Understand array methods by implementing them — all of them

👨‍💻 By Brian Neville-O’Neill

Test Cased by Author in this repo
More JS Katas

🚀 value vs references

Repls

📅 13-09-2019

🚀 Memoization in JS

A faster querySelector - Note that querySelectorAll returns a NodeList while $$ returns an array.

$(".some-class"); // instead of document.querySelector
$$(".some-class"); // instead of document.querySelectorAll

Inspecting an element - Another useful feature you can use when you inspect an element (with the inspect tool of the devtools) is $0. After inspecting an element you can access it in the console by typing $0.
console.table() - Gets the logs of Array or Objects in a table.
console.dir() - This method will let you log the javascript object of a DOM element instead of its HTML.
document.designMode = 'on' - edit the text of any webpage.
object destructuring
array-and-object-destructuring