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

πŸ“… 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

πŸ“… 12-09-2019

πŸš€ Color Tools For Designers 2019

πŸš€ Understand array methods by implementing them β€” all of them

πŸ‘¨β€πŸ’» By Brian Neville-O’Neill

πŸš€ value vs references


πŸ“… 13-09-2019

πŸš€ Memoization in JS

πŸš€ Imperative vs Declarative Programming

πŸš€ Understand array methods by implementing them β€” all of them

πŸš€ 7 Tips to boost your productivity as a web developer πŸš€

  1. 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
  1. 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.
  2. console.table() - Gets the logs of Array or Objects in a table.
  3. console.dir() - This method will let you log the javascript object of a DOM element instead of its HTML.
  4. document.designMode = 'on' - edit the text of any webpage.
  5. object destructuring
  6. array-and-object-destructuring

πŸš€ CSS Grid: illustrated introduction

πŸ‘¨β€πŸ’» By Mustapha


πŸ“… 15-09-2019

πŸš€ Flexbox Zombies

πŸ“… 16-09-2019

πŸš€ Understand array methods by implementing them β€” all of them


πŸš€ Flexbox Zombies

πŸ“… 17-09-2019

πŸš€ Flexbox Zombies

πŸš€ Grid Critters

πŸš€ Service Workers

πŸ“… 18-09-2019

πŸš€ Understand array methods by implementing them β€” all of them



πŸš€ Flexbox Zombies

Chapter 9 Done

πŸš€ Service Workers lifecycle resources read

Share on Twitter
Share on Facebook

Created by Navin. He loves to learn, blog and develop new applications.
Twitter LogoGithub LogoLinkedIn LogoFaceBook Logo