Forem: Mihaela

Building An Infinite Scroll Into Your React App

Mihaela — Wed, 08 Jun 2022 15:57:07 +0000

Introduction

Infinite scroll has become a major feature in apps we use in our day to day life like Twitter Instagram and just generally content feed apps that just want your undivided attention daily, on a functionality point of view infinite scroll outperforms pagination approaches to loading data due to it being seamless to the user and only loads more data when the user reaches the end of the scroll.

Infinite scroll

Infinite scroll is a feature where data is loaded onto the user’s page when the user reaches the end or almost the end of the scroll page, this is done by calling a paginated API,
A paginated API for reference is an API that returns a list of data whenever we call the API and can return different sets of data based on the page count that we passed into it an example of a paginated API would be the API we use in this example

`https://jsonplaceholder.typicode.com/photos?_page=${page}&_limit=10`

page is the variable we pass into the API it is going to be a number that we track and increment after loading every page.

Infinite scroll although an excellent approach to loading data isn't the most optimal for all projects, some projects do function better with pagination, but infinite scrolling works best when loading related data that is loaded in a preferably chronological order based on time or relevance, pagination though is useful when users need to load data that far back, let's say you have some bank transaction records and you know that the records are a month away you can skip to the farthest page and circle back if you overshoot the page, but in reality, infinite scroll and a good date filter can solve that problem

Prerequisite

Building this application would require some basic knowledge of a couple of things we would be using in our application.

React
Javascript
REST API’s

Implementation

In react we have 2 options to implement infinite scroll in our app.

Using an exciting library (The smart boring way)
Implement the infinite scroll (The fun slow way)

Using an exciting library (The smart boring way)

A fast way to implement infinite scrolling in react would be to use a third-party library one of my go-to libraries for this feature would be the react-infinite-scroll-component.

react-infinite-scroll-component is a simple library that exports an <InfiniteScroll/> component that can be used in our application and its feature-rich with props and events you can call before and after loading more data into the app, also a cool thing would be a refresh function you can call whenever you want to load new data to the top of your table.

Installing

 npm install --save react-infinite-scroll-component

yarn add react-infinite-scroll-component

In our App.jsx

 import React from "react";
import InfiniteScroll from "react-infinite-scroll-component";
import axios from "axios";

let page = 1;
const fetchData = (setItems, items) => {
 axios
   .get(`https://jsonplaceholder.typicode.com/photos?_page=${page}&_limit=10`)
   .then((res) => {
     setItems([...items, ...res.data]);
     page = page + 1;
   });
};

const refresh = (setItems) => {};

export default function App() {
 const [items, setItems] = React.useState([]);

 React.useEffect(()=>{
   fetchData(setItems,items)
 },[])
 return (
   <InfiniteScroll
     dataLength={items.length} //This is important field to render the next data
     next={() => {
       fetchData(setItems, items);
     }}
     hasMore={true}
     loader={<h4>Loading...</h4>}
     endMessage={
       <p style={{ textAlign: "center" }}>
         <b>Yay! You have seen it all</b>
       </p>
     }
     // below props only if you need pull down functionality
     refreshFunction={refresh}
     pullDownToRefresh
     pullDownToRefreshThreshold={50}
     pullDownToRefreshContent={
       <h3 style={{ textAlign: "center" }}>&#8595; Pull down to refresh</h3>
     }
     releaseToRefreshContent={
       <h3 style={{ textAlign: "center" }}>&#8593; Release to refresh</h3>
     }
   >
     <div style={{ minHeight: "100vh" }}>
       {items.map((user) => (
         <img src={user.url} height="100px" width="200px" />
       ))}
     </div>
   </InfiniteScroll>
 );
}

Let's break our code down into smaller bits.

let page = 1;
const fetchData = (setItems, items) => {
 axios
   .get(`https://jsonplaceholder.typicode.com/photos?_page=${page}&_limit=10`)
   .then((res) => {
     setItems([...items, ...res.data]);
     page = page + 1;
   });
};

The fetch function is able to call our API to get new data it's triggered by the <InfiniteScroll/> component when we scroll to the end of the view, there is a count variable we use to monitor the page loaded and it is incremented after the data is loaded.

 const [items, setItems] = React.useState([]);
 React.useEffect(()=>{
   fetchData(setItems,items)
 },[])

React effect is used to load the first batch of data into the view, we pass the systems function and the items variable into the function (something new I should have been doing a while back to remove API calls from my component)

<InfiniteScroll
     dataLength={items.length} //This is important field to render the next data
     next={() => {
       fetchData(setItems, items);
     }}
     hasMore={true}>
/////// 

/// code
///////
>
     <div style={{ minHeight: "100vh" }}>
       {items.map((user) => (
         <img src={user.url} height="100px" width="200px" />
       ))}
     </div>
   </InfiniteScroll>

We call our component and pass data into it if you need documentation you can check it out here https://www.npmjs.com/package/react-infinite-scroll-component.

Here is the output.

Implement the infinite scroll (The fun way)

Implementing a scroll component can be a nice learning project and gives you more control than when you use a component and is pretty easy to set up but can take a bit of time to perform research on how to get it done, luckily I've done that for you.

Pros of using custom components

Customizable
Very light since its just one component

Cons

Takes a bit of time to set up
It May is not as robust as an already built component

Here is our codebase

import React, { Component } from "react";

class ScrollComponent extends Component {
 constructor() {
   super();
   this.state = {
     loading: false,
     page: 0,
     prevY: 0
   };
 }

 async getItems() {
   try {
     await this.props.loadData();
   } catch (error) {
     console.log(error);
   }
 }

 componentDidMount() {
   this.getItems();

   var options = {
     root: null,
     rootMargin: "0px",
     threshold: 1.0
   };

   this.observer = new IntersectionObserver(
     this.handleObserver.bind(this),
     options
   );
   this.observer.observe(this.loadingRef);
 }

 async handleObserver(entities, observer) {
   const y = entities[0].boundingClientRect.y;
   if (this.state.prevY > y) {
     this.setState({ loading: true });
     console.log(this.state);

     await this.getItems();

     this.setState({ loading: false });
     console.log(this.state);
   }
   this.setState({ prevY: y });
 }

 render() {
   // Additional css
   const loadingCSS = {
     height: "100px",
     margin: "30px"
   };

   // To change the loading icon behavior
   const loadingTextCSS = { display: this.state.loading ? "block" : "none" };

   return (
     <div className="container">
       <div style={{ minHeight: "800px" }}>
         {/* {this.state.photos.map(user => (
          <img src={user.url} height="100px" width="200px" />
        ))} */}
         {this.props.children}
       </div>
       <div
         className="house"
         ref={(loadingRef) => (this.loadingRef = loadingRef)}
         style={loadingCSS}
       >
         <span style={loadingTextCSS}>Loading...</span>
       </div>
     </div>
   );
 }
}

export default ScrollComponent;

And in our app.jsx component we replace the <InfiniteScroll/> and insert our new component.

import React from "react";
import axios from "axios";
import ScrollComponent from "./scroll";

let page = 1;
const fetchData = async (setItems, items) => {
 const data = await axios.get(
   `https://jsonplaceholder.typicode.com/photos?_page=${page}&_limit=10`
 );

 setItems([...items, ...data.data]);
 page = page + 1;
};

const refresh = (setItems) => {};

export default function App() {
 const [items, setItems] = React.useState([]);

 React.useEffect(() => {
   fetchData(setItems, items);
 }, []);
 return (
   <ScrollComponent
     loadData={() => {
       fetchData(setItems, items);
     }}
   >
     <div style={{ minHeight: "100vh" }}>
       {items.map((user) => (
         <img
           key={Math.random()}
           src={user.url}
           height="100px"
           width="200px"
         />
       ))}
     </div>
   </ScrollComponent>
 );
}

Let's break our component down into smaller bits so we can understand it.

Part 1

 componentDidMount() {
   this.getItems();

   var options = {
     root: null,
     rootMargin: "0px",
     threshold: 1.0
   };

   this.observer = new IntersectionObserver(
     this.handleObserver.bind(this),
     options
   );
   this.observer.observe(this.loadingRef);
 }

Our componentDidMount function is run as soon as our component is started and adds an IntersectionObserver observer to the component that checks out the house and measures the difference between it and the this.props.children and calls the handleObserver function when the observer is triggered.

 async handleObserver(entities, observer) {
   const y = entities[0].boundingClientRect.y;
   if (this.state.prevY > y) {
     this.setState({ loading: true });
     console.log(this.state);

     await this.getItems();

     this.setState({ loading: false });
     console.log(this.state);
   }
   this.setState({ prevY: y });
 }

Our handleObserver example function calls out the update function that's passed into the props, this is powerful because we can use the concept of dependency injection to pass in the update function from our component making this component agnostic to its use case

 const [items, setItems] = React.useState([]);

 React.useEffect(() => {
   fetchData(setItems, items);
 }, []);

We take advantage of react useEffect to set up how we manage data in our component, we need to pass setItems and items into the fetchdata component to pass control initoo the function,

 render() {
   // Additional css
   const loadingCSS = {
     height: "100px",
     margin: "30px"
   };

   // To change the loading icon behavior
   const loadingTextCSS = { display: this.state.loading ? "block" : "none" };

   return (
     <div className="container">
       <div style={{ minHeight: "800px" }}>
         {/* {this.state.photos.map(user => (
           <img src={user.url} height="100px" width="200px" />
         ))} */}
         {this.props.children}
       </div>
       <div
Class = ‘house’
         ref={(loadingRef) => (this.loadingRef = loadingRef)}
         style={loadingCSS}
       >
         <span style={loadingTextCSS}>Loading...</span>
       </div>
     </div>
   );
 }

Our render function renders our child component passed into the component, this lets us reuse our component for different types of use cases.

Replacing our component in the App.js

 <ScrollComponent loadData={()=>{
     fetchData(setItems, items);
   }}>
     <div style={{ minHeight: "100vh" }}>
       {items.map((user) => (
         <img src={user.url} height="100px" width="200px" />
       ))}
     </div>
   </ScrollComponent>

Our output(similar to our old implementation).

Conclusion

Infinite scrolling is becoming an amazing way of showing feed data because it offers a nonstop flow of data that is addictive (talking from a users point of view) and only loads new data when it reaches the end of the page, this is done by monitoring the page count and incrementing the page seen page at the end of every load.

In this guide, we learned 2 different modes of implementing this feature in react,

Using an exciting library (The smart boring way)
Implement the infinite scroll (The fun way)

Each approach gives the same result but comes with different pros and cons that make them perfect for different situations, I personally keep a copy of my own custom component on my PC and copy the custom component into my new project, it helps to keep it flexible for different project seeing as it is just a component and can be called whenever it's needed, also the concept of injecting the load function makes it easy to use and re-use across projects.

I hope this article was helpful to you, cheers and till next time!

Referrence

Gaurav Singhal

Originally written by King Somto for JavaScript Works

JavaScript Libraries You Should Try Out in 2022

Mihaela — Wed, 08 Jun 2022 15:56:34 +0000

Introduction

JavaScript libraries have been changing the way we write JavaScript and have helped us in accomplishing our goals easily without the hassle of reinventing the wheel over and over again. That’s why JavaScript libraries are one of the first things that any developer should be aware of when starting out in this industry. Every year, new libraries are developed, old ones are abandoned, and all existing ones need to be updated with the latest advancements made by developers around the world.

But what’s so special about these libraries that they deserve special attention? These libraries promise to make coding faster, easier, and overall more enjoyable. I recommend taking some time out in 2022 to take them for a spin!

Here’s a list of the ones you should try out in 2022 if you haven’t already started to work with them. They may not be the most popular right now, but I predict they will be in three years!

Introduction to JavaScript Libraries 2022

JavaScript is an ever-changing language, meaning that new JS libraries are constantly emerging, and new approaches to JavaScript coding are also being developed. In order to maintain relevance within your industry, it’s important to keep up with these developments. This post will introduce you to a few latest version libraries that you should familiarize yourself with if you want to keep up with future developments within JavaScript.

Top JavaScript Libraries in 2022

1. jQuery

The jQuery library is a free software library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. It was released on June 11, 2006, at BarCamp NYC by John Resig. According to JavaScript analytics service Libscore, jQuery is used on more than 60% of all websites whose front-end code can be evaluated.

Characteristics

Fast, small, and feature-rich library
It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

Application

Best used for creating beautiful animations
It is used for both client-side and server-side scripting.
Manipulate HTML documents and develop web applications

2. D3.js

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, CSS, and SVG. D3’s emphasis on web page standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Characteristics

Supports HTML, CSS, and SVG
Manipulate the DOM by using a Data-driven approach
D3.js is a powerful JavaScript library that allows you to create data visualizations using web standards

Applications

Allows you to bind arbitrary data to a Document Object Model (DOM)
Helps to create animated transitions
D3.js is a powerful JavaScript library that allows for high-level data visualization.

3. React.js

In simple terms, React.js is a JavaScript library for building user interfaces. These are interactive web applications that run on various devices with access to data from back-end servers. The first version of React was released by Facebook in 2011. The technology was developed by Jordan Walke and his team at Facebook’s Instagram subsidiary (which has since been separated into its own company).

Characteristics

React.js is a library for building interactive user interfaces
It's composed of reusable UI components that make it easy to create complex and responsive user interfaces without sacrificing performance or SEO.
It makes use of JavaScript’s ability to manipulate DOM elements and CSS to allow more expressive content presentation.

Applications

This is a lightweight JavaScript library that offers a number of additional, convenient features to developers.
It may not be as comprehensive as other libraries, but it makes up for it with better performance and ease of use.

4. Lodash

JavaScript is one of the most widely used programming languages for web design. It has many interesting libraries, but Lodash is among my personal favorites because it’s easy to learn and use, super flexible, and this is a utility library that provides methods and functions on top of JavaScript's native objects to developers.

Characteristics

It is a modern JavaScript utility library delivering modularity, performance & extras.
It is a JavaScript utility library delivering consistency, modularity, performance & extras.
All Lodash methods are chainable and iteratee-first for cleaner code and better readability.

Applications

With Lodash, you can format the date and convert it to a string.
It is a feature-rich library that provides methods for functional programming and helps you write cleaner code by minimizing the verbosity of everyday tasks.
Lodash comes with all sorts of goodies to help make working with arrays, objects, strings, numbers, etc., easier and more fun.

5. Underscore.js

Underscore.js is a library that helps you get more out of your JavaScript applications. It’s most commonly used as a utility library, providing lots of functional programming helpers without extending any built-in objects. While developers often use Underscore simply as a utility belt for everyday scripting tasks, it has become very popular with front-end developers, due to its role in Backbone.js and other MVC frameworks.

Characteristics

It is a utility-belt library for JavaScript that provides a lot of functional programming support.
It’s small (about 8kb minified and gzipped), and it doesn’t take much to start using it.
It’s ideal for writing concise code to perform multiple operations on arrays and objects.

Applications

It is a library for JavaScript that provides a whole mess of useful functional programming helpers without extending any built-in objects.
It’s a dependency of Backbone.js but is also very useful on its own.
Underscore.js is a JavaScript library that provides a variety of functional programming helpers without extending any built-in objects, just like Prototype.js and other competitors.

Some Useful JavaScript Frameworks That You Must be Known

1. Aurelia

Aurelia is a powerful open-source JavaScript client-side framework that features advanced tooling and state-of-the-art UI components. It offers data binding, templating, MVVM, and more. Aurelia is compatible with multiple browsers and operating systems.

2. Ember.js

If you want to create a powerful web application, then you should definitely check out Ember cli. It offers a smooth user experience and has great documentation. The framework is written in JavaScript and HTML5, making it easy for developers to understand. This also makes it easier for them to learn how to use it quickly and effectively.

3. Node.js

Node.js, or Node, is an open-source and cross-platform JavaScript run-time environment for developing server-side web applications. Node runs on Chrome’s V8 JavaScript engine. Because of its event-driven architecture, non-blocking I/O model, and lightweight design, it is often used for real-time applications that are data-intensive and require a large number of concurrent connections.

4. Mocha

Mocha is a test framework for Node.js and browsers, making asynchronous unit testing painless. It's easy to write tests with mocha because it handles all of that annoying setup code you don't want to write.

Best JavaScript Tools

1. iziModal

iziModal is a lightweight and modular JavaScript library that allows you to create smooth and responsive modal dialogs. It works with any CSS framework, such as Bootstrap or Foundation. It is a modal component built with Vue.js, and it aims to provide an easy way to add a beautiful and flexible modal window to your application.

It’s lightweight (2kb gzipped), simple to use, customizable, and has no dependencies. iziModal can be used anywhere you need a modal window: from websites to mobile applications or even desktop applications.

2. Shave

The shave is one of the most useful tools in JavaScript. It allows you to use CSS selectors to get elements from your HTML and manipulate them with JavaScript, just like jQuery, but without the jQuery dependency. This makes it ideal for projects that don’t need all of jQuery’s features.

3. Webpack

Webpack is a module bundler that simplifies web development by handling asset management and builds. Webpack works with any type of library or framework. It can bundle CSS, LESS, SASS, CoffeeScript, TypeScript, and more. It also has plugins for other languages like Java, C++, PHP, etc.

4. Babel

Babel is a JavaScript compiler that helps you to use new features introduced by ECMAScript. It allows developers to write code using newer versions of JavaScript and then transpile it into backward-compatible code that can run on older versions of browsers.

Conclusion

For JavaScript developers looking to increase their repertoire of skills, it’s not always easy to choose which new technologies and practices you should keep an eye on. With an ever-growing number of new frameworks emerging all of the time, developers can find themselves lost in a sea of unfamiliar tools. Javascript libraries help you build great web and desktop applications, but it can be hard to choose the right one to get started with.

There are thousands of articles online that try to predict what will be relevant in five years’ time—but these lists are rarely based on any criteria, and usually just include things that their authors think will be popular.

I hope you've enjoyed reading my tutorial, and I wish you much success as you learn JavaScript libraries. If you liked it, please share it on social media! In addition, sign up for our newsletter to get the latest news about our articles.

Originally written by Fawzan Hussain for JavaScript Works

We’ll Plant a Tree for Every Job Application on Our Platform

Mihaela — Wed, 25 May 2022 16:27:07 +0000

At WorksHub, we’re committed to bringing positive change through the work we do every day. For that reason, we decided to step further than spreading awareness and take care of our climate impact.

As a tech recruitment platform, our mission is to connect software engineers with the best company opportunities out there.

So, we’re tightening the two together!

We’ll be planting a tree of every job application on our platform.

We are thrilled to announce our sustainable partnership with Ecologi - a startup that works with tree planting organisations who are able to responsibly plant millions of trees a month on their community’s behalf.

Can you plant a tree without actually getting out there in nature and digging a hole in the ground?

YES, YOU CAN!

Now, why are we doing all this?

You've probably heard the phrase "trees are the lungs of our planet" countless times. For our health and environment, it is indeed crucial to take action towards rehabilitation of one of the most important resources of our planet - forests.

After all, trees provide us with life’s essentials, clean air and oxygen, clean water, better soil.

According to National Geographic, deforestation represents a human-driven and natural loss of trees that affects wildlife, ecosystems, weather patterns, and climate. Forests still cover about 30% of the world’s land area, but they are disappearing at an alarming rate. Since 1990, the world has lost 420 million hectares or about a billion acres of forest.

This has had a catastrophic impact on climate change. Trees clean the air around us, the one we breathe, filter the water we drink, and provide habitat to over 80% of the world's terrestrial biodiversity. Forests provide jobs to over 1.6 billion people, absorb harmful carbon from the atmosphere, and are key ingredients in 25% of all medicines.

One of the best and most accessible tools we have today to tackle the climate crisis and keep our temperatures from rising above 1.5C is to plant trees.

Ecologi - our partners, know how important it is for our present and future, to take prevention steps now. This is why they formed this initiative group where they use donations to support a broad range of projects that are able to evidence that they are reducing greenhouse gas emissions through tree planting.

Contributing has never been easier. While you are applying for your dream job, you’re also helping make our planet healthier and greener.

Let’s plant trees, one application at a time 💚

Apply today and plant a tree with WorksHub!

Note: We will only count job applications that are approved by our screening software and available for review by the company that received them.

Originally written by Mihaela Popa for WorksHub

Best Books On Crypto

Mihaela — Wed, 23 Mar 2022 15:10:54 +0000

Blockchain and cryptocurrencies have garnered a lot of popularity over the years. And, why not? It's because they can be decentralized, and the data is cryptographically encrypted, meaning no one can access it. Blockchain technology has revolutionarily changed everything, the digital ownership and privacy revolution will someday permeate our daily lives.

Companies these days often use blockchain to secure how users send and receive money. Banking and investment make the most of blockchain technology more than any other industry. As a result of bitcoin, blockchain has grabbed the curiosity of everyone wishing to invest in recent years.

You might purchase any random book about cryptocurrencies, but you've come to the correct spot if you're searching for professional guidance on which one is ideal for your requirements. We have investigated in-depth to include the best-rated solutions ideal for various use demands and budget ranges.

Naturally, if you're interested in it, you'll want to learn more about it. The following is a list of best books on crypto that should be read in no particular order:

1. Unlocking Digital Cryptocurrencies: Mastering Bitcoin

Mastering Bitcoin is a book by Andreas M. Antonopoulos intended for anybody who has a basic grasp of blockchain technology. This book takes a deep dive into bitcoin, and at the end of it, you'll be able to develop your cryptocurrency apps.

"The Bitcoin Blockchain provides an altogether new foundation upon which our economy can develop, one that will enable an ecosystem as vast and diversified as the Internet itself." Andreas M. Antonopoulos, as one of the world's foremost thinkers, is the ideal candidate to write this book." — Roger Ver, Bitcoin investor and entrepreneur.
Another book by the same author, "Mastering Ethereum," is a fascinating one to read as it explains smart contracts and adds an extra degree of security to Ethereum.

2. How the Technology Behind Bitcoin Is Changing Money, Business, and the World: Blockchain Revolution.

This book by Don Tapscott and Alex Tapscott has been listed 14 times out of 19 times on the Best of List, and it is by far the most popular Blockchain book. Don Tapscott is the CEO of the Tapscott Group and one of the world's most important business and social theorists. Don was rated the fourth most influential business thinker globally by Thinkers50 in November 2013. Don was named the most prominent management thinker globally by Forbes in prior social media research.

Alex Tapscott is the CEO and co-founder of Northwest Passage Ventures, a blockchain advising business. He published the foundational study on controlling digital currencies for the Global Solutions Network program at the University of Toronto's Joseph L. Rotman School of Management in 2014.

"A wonderfully written and meticulously researched book. The 'Internet of Value,' according to the Blockchain Revolution, will alter our lives. "This is a must-read book for our turbulent times," as quoted by (McKinsey & Company's worldwide managing director, Dominic Barton).

3.Bitcoin and the Inside Story of the Misfits and Millionaires Trying to Reinvent Money- Book- Digital Gold.

Nathaniel Popper's book tells the exciting history of Bitcoin technology and its rapid rise to recognition as a digital currency system, thanks to the help of several notable figures.

If you want to learn more about Bitcoin's history, this book is for you. It will take you on tour through Bitcoin's history, beginning with its inception. The author's background as a reporter (at The New York Times) lends itself to his ability to pull together unrelated events in a concise way. The complicated tale of Bitcoin is told in an easy-to-understand manner, with no jargon, keeping the reader captivated by the book. The development of Bitcoin technology is the subject of this book. It is clear for beginners to set their best first step into cryptocurrencies more speculatively.

4. The Investor's Guide to Cryptocurrency and Defi, the Decentralized Finance Revolution: The Wall Street Era is Over.

The Wall Street Era is Over by the experts who had been in DeFi explains how to succeed in DeFi, the industry that is paving the way for the Finance 3.0 revolution, and how to invest safely.' The Investor's Guide to Cryptocurrency and DeFi, the Decentralized Finance Revolution' is a comprehensive reference.

It includes the following primary subjects and many others, like explaining the origins of DeFi and its function in cryptography. The difference between DeFi from traditional finance? DeFi's most essential protocols and how do DeFi protocols make money? The DeFi investor's guide. What is precisely yield farming, and why is it important? How to be a high-yield with crypto assets the innovative investor. How to invest in DeFi with confidence? It also explains the scams involving DeFi, how to avoid them, and how to contract auditing's role smartly. Finally, defining the future of DeFi, incorporating NFTs and other evolving technologies.

5. Idealism, Greed, Lies, and the Making of the First Big Cryptocurrency Craze-The Cryptopians.

This book by Laura Shin takes readers behind the scenes of creating this new type of cryptocurrency network, which allowed users to create their new coins and sparked a new wave of crypto fever in the process. You'll meet people like Vitalik Buterin, the wunderkind whose idea grew into a $100 billion empire in five months; Charles Hoskinson, the project's first CEO who left after five months; and Joe Lubin, a former Goldman Sachs VP who became one of crypto's most well-known billionaires after his early involvement in Bitcoin and Ethereum. As these colossal egos battled for a share of an ostensibly boundless new commercial opportunity, sparks flared.

This book tries to explain how cryptocurrency's fortunes rise and fall, but those striving to bring it mainstream make and lose futures and careers on it. Does this exciting book portray the cryptocurrency market for what it is? And explains how it's a highly personal fight to shape the coming revolution in money, culture, and power.

6. The Fiat Standard: The Debt Slavery Alternative to Human Civilisation.

This book by Economist Saifedean Ammous's most recent book is widely recognized as one of the classic publications on digital tokens. It discussed Bitcoin's monetary theory, the gold standard, fiat currencies, and contemporary financial reform thought.

His follow-up book, The Fiat Standard: The Debt Slavery Alternative to Human Civilisation, is due out in 2021 and looks at national currencies as a technology, how debt underpins them, and how governments manage and add to this debt at no cost.

Mr. Ammous connects the work to our current circumstances by examining the influence of fiat on family, food, health, education, and security. Finally, he considers how fiat currency and Bitcoin could coexist in the future and what would happen if one of them fails.

7. Cashless: China's Digital Currency Revolution.

This book by Richard Turrin explains China's interoperable cashless society as an example of how digital currencies are already being deployed. In just seven years, digital technology has completely altered the monetary system of the world's second-largest economy, with the central bank's digital currency playing a pivotal role (CBDC).

Mr. Turrin, a financial insider who spent several years in Shanghai, describes how the new CBDC is being utilized, from street sellers to international monetary transactions, while zooming out to see the ramifications for other nations, including the danger to the US dollar's supremacy.

8. The Everything Guide to Investing in Cryptocurrency: From Bitcoin to Ripple, the Safe and Secure Way to Buy, Trade, and my Digital Currencies.

This is the finest book by Ryan Derousseau if you want to learn all there is to know about cryptocurrencies. Does it clarify all crypto fundamentals and point to many basics like the difference between BTC and XRP? How is mining carried out? How to make a wallet, and much more.

Derousseau isn't trying to persuade you to invest in cryptocurrency. He goes into great detail on why you should stay away from cryptocurrencies. If you determine that crypto is the appropriate investment for you, he has some advice on navigating such a turbulent market and how to lock in your profits.

Finally!

Seeking the best books on crypto, we decided that a crypto book list was necessary because crypto assets have become such a large alternative asset class. Cryptocurrency has gotten a lot of press, and there are now hundreds of websites dedicated to crypto-related news and marketing. As a result, every man and his dog seems to have written a book about this fascinating topic. Most of these publications try to strike a decent balance between factual knowledge and personal opinion, in our opinion.

Based on the market movement thus far in 2022, it appears like the current decade is also shaping up to be an age of additional cryptocurrency increases. Still, the cryptocurrency industry always has its fair share of bearish and short-sellers who do not anticipate this to happen.

Which side do you support? Will cryptocurrencies gain more general acceptability and credibility, or are we approaching 'peak-crypto'?

Originally written by Fawzan Hussain for Blockchain Works

Create a Distortion Effect Using GSAP

Mihaela — Wed, 23 Mar 2022 15:10:26 +0000

Animating DOM elements on the web has been one of the many topics with numerous solutions. We have seen the rise of HTML and CSS classic design systems, and how to structure keyframe animations accordingly. Then, we transitioned into using javascript libraries like jQuery, only to now be trumped by more efficient and performant libraries, one of which is GSAP.

Introduction

GSAP (GreenSock Animation Platform), as indicated by the Getting Started guide, “is a suite of tools for scripted animations”. What that basically means, is that it is one big ecosystem of ready-made functions and methods you can use to animate literally anything on the DOM. What makes GSAP so great, is that it is fully optimized for performance and scaling, even when building complex animation. This is what makes it trump over jQuery, as well as its minimal code style in contrast to jQuery’s robust syntax.

What will we be building?

In this article, you will learn how to build a cool-looking webpage with a distortion effect that gets triggered on hover, using GSAP and hover-effect library. This example will help us shorten the learning curve with GSAP.

Credits go to:
UI Designer: Maxim Nilov | Dribbble
Github: codicts/Fashion-Landing-Page (github.com)

Prerequisites

GSAP is a suite that makes rendering on the DOM a lot easier, and this is made possible by using a few key concepts that are related to DOM manipulation, much like every other framework for the web. To this end, you will need to know:

HTML, CSS and Javascript
Basic React

How does GSAP work?

GSAP has built-in components to help create these animations, and they come with methods that help us set the properties we want to animate. For this example, we will only need one of these components, which is the TweenMax. (Please check out their docs:).

TweenMax

The Tween and TweenMax components are one of the more widely used ones, in that they make it easy to do the simple transitions without writing complex keyframes. The tween keyword is derived from ‘between’, which basically means “change this property between a given duration from one value to another”.
Let’s take a look at some of the methods that exists within GSAP:

gsap.to()
gsap.from()
gsap.staggerFrom()

gsap.to()

Here, we tell gsap to change the property of a given value to another as well, but in this case, we indicate the starting value of the animation.
Here’s an example:

gsap.from("#logo", {duration: 1, x: 100});

Gsap.staggerFrom()

Now staggerFrom works a bit differently from gsap.to() and gsap.from(). With to and from, we deal with a single HTML element that we want to animate, but what if we want to animate a group of elements, particularly children of a parent element? With staggerFrom(), we can set an animation to take effect for a group of child elements, and even set an interval or “stagger” between the elements, to give it this sequential feel as they get animated.
Here’s an example of using this:

    TweenMax.staggerFrom(".media ul li", 1.5, { //TweenMax used in place of gsap
      delay: 1.5,
      opacity: 0,
      x: "-60",
      ease: Expo.easeInOut
    }, 0.08);

First, we call the gsap library (TweenMax), then we can use the “staggerFrom()” method to target the HTML <li/> elements under the media class. The value 1.5 is used to indicate the stagger to be affected between the start time of each child’s animation. This stagger is what helps the animations to have a sequential feel between them.
Then we put in the properties we want for each element. Note the ease property, which you can learn more about in their documentation.

Getting Started with GSAP

Now let’s get started with building our distortion effect page.
Create your folder and in that new folder, create your HTML and CSS files.
Then in your HTML file, you set up your basic HTML markup.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>
Next, our imports:
  <!-- google fonts -->
  <link href="https://fonts.googleapis.com/css?family=Poppins:500,600,700,900&display=swap" rel="stylesheet">
  <!-- css -->
  <link rel="stylesheet" href="style.css">
Then our scripts as well, for GSAP and hover-effect (these go on the bottom of the html page)
 <!-- icons -->
  <script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>
  <!-- gsap -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"
    integrity="sha256-lPE3wjN2a7ABWHbGz7+MKBJaykyzqCbU96BJWjio86U=" crossorigin="anonymous"></script>
  <!-- three js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/108/three.min.js"
    integrity="sha256-3mBEX8I0uMLF7+AUjJeTCelosuorzYpqwBMBPDTyQqY=" crossorigin="anonymous"></script>

Now we are set to get started with our web page.
You can set up the views to your convenience, but for this tutorial, we will first set up the main webpage.

  <!-- NAVBAR
    =============================== -->
    <nav class="navbar">
      <div class="menu">
        <ion-icon name="ios-menu"></ion-icon>
      </div>
      <div class="lang">eng</div>
      <div class="search">
        <ion-icon name="ios-search"></ion-icon>
      </div>
    </nav>


    <!-- SOCIAL MEDIA
    =============================== -->
    <div class="media">
      <ul>
        <li>facebook</li>
        <li>instagram</li>
        <li>twitter</li>
      </ul>
    </div>


    <!-- TEXT
    =============================== -->
    <div class="text">
      <h1>
        <span class="hidetext">toni&guy</span>
      </h1>
      <h2>duality</h2>
      <h3>
        <span class="hidetext">collection 2017 <br> duality</span>
      </h3>
      <p>
        <span class="hidetext">
          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde quis, delectus facere
          neque sunt commodi quae
          culpa dolores doloribus magnam?
        </span>
      </p>
    </div>


    <!-- SPONSOR
    =============================== -->
    <div class="sponsor">
      <img src="./images/sponsor-logo.png" alt="">
      <p>official sponsor</p>
    </div>

Then the CSS for the basic webpage:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins';
  background: #D8DBE2;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

ul {
  list-style: none;
}

/* NAVBAR
=========================== */
.navbar {
  display: flex;
  justify-content: space-between;
  height: 80px;
  align-items: center;
}

.navbar > div {
  padding: 0 30px;
  font-size: 20px;
}

.navbar .menu {
  margin-right: auto;
}

.navbar .lang {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
}


/* SOCIAL MEDIA
=========================== */
.media ul {
  position: absolute;
  bottom: 250px;
  left: -140px;
  transform: rotate(-90deg);
}

.media ul li {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  display: inline-block;
  padding: 0 30px;
}


/* TEXT
=========================== */
.text {
  position: absolute;
  top: 200px;
  left: 100px;
  transform: rotate(-90deg);
}

.text h1 {
  font-size: 120px;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: -10px;
  margin-bottom: 20px;

  position: relative;
  overflow: hidden;
  height: 150px;
  width: 600px;
}
.text h1 .hidetext {
  position: absolute;
}

.text h2 {
  position: absolute;
  top: 40px;
  left: -80px;
  color: #EFDE74;
  z-index: -1;
  font-size: 150px;
  font-weight: 600;
  letter-spacing: 8px;
  text-transform: uppercase;
}

.text h3 {
  font-size: 40px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1;

  position: relative;
  overflow: hidden;
  height: 80px;
}
.text h3 .hidetext {
  position: absolute;
}

.text p {
  width: 200px;
  font-size: 12px;
  margin-top: 30px;
  font-weight: 500;

  position: relative;
  overflow: hidden;
  height: 110px;
}
.text p .hidetext {
  position: absolute;
}


/* SPONSOR
=========================== */
.sponsor {
  position: absolute;
  right: 100px;
  bottom: 100px;
  text-align: center;
}
.sponsor img {
  width: 200px;
  transform: rotate(-90deg);
}
.sponsor p {
  margin-top: 20px;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 900;
  transform: rotate(180deg);
}

Let’s examine our webpage:

Here are a few things we can see:
3 squares animate from bottom to top, to reveal the webpage. Here, we already know they will be 3 divs to have a position absolute, and then we use the “to” method to animate between them.
Navbar above, animate from top to bottom, with changed opacity.
Text on the side changes from 0 to 1 and increases in height.

For the 3 squares, we create 3 divs to represent them.

    <div class="overlay first"></div>
    <div class="overlay second"></div>
    <div class="overlay third"></div>

Then we style accordingly in the styles.css

/*===========================  OVERLAY =========================== */
.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  z-index: 99;
}
.first {
  background: #efde74;
}
.second {
  background: #efde74;
  left: 33.3%;
}
.third {
  background: #efde74;
  left: 66.6%;
}

Now we can set up our animation with GSAP:

 TweenMax.to(".first", 1.5, {
      delay: .5,
      top: "-100%",
      ease: Expo.easeInOut
    });

    TweenMax.to(".second", 1.5, {
      delay: .7,
      top: "-100%",
      ease: Expo.easeInOut
    });

    TweenMax.to(".third", 1.5, {
      delay: .9,
      top: "-100%",
      ease: Expo.easeInOut
    });

Notice that the delay has been varied by .2 to have that effect. You could also use the staggerFrom() method to vary between the children and see how the effect varies.

Next, we animate our navbar and various texts.
Here’s a few things we can see:
3 squares animate from bottom to top, to reveal the webpage. Here, we already know they will be 3 divs to have a position absolute, and then we use the “to” method to animate between them.
Navbar above, animate from top to bottom, with changed opacity.
Text on the side changes from 0 to 1 and increases in height.

For the 3 squares, we create 3 divs to represent them.

Then we style accordingly in the styles.css
/*=========================== OVERLAY =========================== */
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0%;
z-index: 99;
}
.first {
background: #efde74;
}
.second {
background: #efde74;
left: 33.3%;
}
.third {
background: #efde74;
left: 66.6%;
}

Now we can set up our animation with GSAP:
TweenMax.to(".first", 1.5, {
delay: .5,
top: "-100%",
ease: Expo.easeInOut
});

TweenMax.to(".second", 1.5, {
  delay: .7,
  top: "-100%",
  ease: Expo.easeInOut
});

TweenMax.to(".third", 1.5, {
  delay: .9,
  top: "-100%",
  ease: Expo.easeInOut
});

Notice that the delay has been varied by .2 to have that effect. You could also use the staggerFrom() method to vary between the children and see how the effect varies.

Next, we animate our navbar and various texts.
// NAVBAR
TweenMax.staggerFrom(".navbar div", 1.5, {

  delay: 1.5,
  opacity: 0,
  y: "20",
  ease: Expo.easeInOut
}, 0.08);

// MEDIA
TweenMax.staggerFrom(".media ul li", 1.5, {
  delay: 1.5,
  opacity: 0,
  x: "-60",
  ease: Expo.easeInOut
}, 0.08);

// TEXT
TweenMax.from(".text h1 .hidetext", 1.5, {
  delay: 1,
  y: "100%",
  ease: Expo.easeInOut
});

TweenMax.from(".text h3 .hidetext", 1.5, {
  delay: 1.2,
  y: "100%",
  ease: Expo.easeInOut
});

TweenMax.from(".text p .hidetext", 1.5, {
  delay: 1.3,
  y: "100%",
  ease: Expo.easeInOut
});

TweenMax.from(".text h2", 1.5, {
  delay: 1.5,
  opacity: 0,
  x: "-10000",
  ease: Expo.easeInOut
});

// SPONSOR
TweenMax.from(".sponsor img", 1.5, {
  delay: 1.5,
  opacity: 0,
  y: "20",
  ease: Expo.easeInOut
});

TweenMax.from(".sponsor p", 1.5, {
  delay: 1.6,
  opacity: 0,
  y: "20",
  ease: Expo.easeInOut
});

Lastly, for the distortion effect, we will make use of the hover-effect library.
You can get the hover-effect library here, then copy the code, create a new file called hover-effect.umd.js and paste the code.
Then we import our newly created script:

Now, how our distortion effect works, is that the library will create a blur of the current image, then transition into a displacement image we will need to provide, then lastly transition to a blurred version of the second image to be transitioned into, and then set the image from a blurred state to a regular state.
So first, we create a div which will represent our distortion image container.

So we need to provide a displacement image, (which should look like a blur effect for convenience), and then the two images to transition between:
new hoverEffect({
parent: document.querySelector('.distortion'),
intensity: 0.2,
image1: './images/01.png',
image2: './images/02.png',
displacementImage: './images/diss.png',
imagesRatio: 340 / 300

})

And that puts together the distortion effect with some animation.
Thanks for reading.

   // NAVBAR
    TweenMax.staggerFrom(".navbar div", 1.5, {

      delay: 1.5,
      opacity: 0,
      y: "20",
      ease: Expo.easeInOut
    }, 0.08);

    // MEDIA
    TweenMax.staggerFrom(".media ul li", 1.5, {
      delay: 1.5,
      opacity: 0,
      x: "-60",
      ease: Expo.easeInOut
    }, 0.08);

    // TEXT
    TweenMax.from(".text h1 .hidetext", 1.5, {
      delay: 1,
      y: "100%",
      ease: Expo.easeInOut
    });

    TweenMax.from(".text h3 .hidetext", 1.5, {
      delay: 1.2,
      y: "100%",
      ease: Expo.easeInOut
    });

    TweenMax.from(".text p .hidetext", 1.5, {
      delay: 1.3,
      y: "100%",
      ease: Expo.easeInOut
    });

    TweenMax.from(".text h2", 1.5, {
      delay: 1.5,
      opacity: 0,
      x: "-10000",
      ease: Expo.easeInOut
    });

    // SPONSOR
    TweenMax.from(".sponsor img", 1.5, {
      delay: 1.5,
      opacity: 0,
      y: "20",
      ease: Expo.easeInOut
    });

    TweenMax.from(".sponsor p", 1.5, {
      delay: 1.6,
      opacity: 0,
      y: "20",
      ease: Expo.easeInOut
    });

  <!-- hover-effect js -->
  <script src="./hover-effect.umd.js"></script>

Now, how our distortion effect works, is that the library will create a blur of the current image, then transition into a displacement image we will need to provide, then lastly transition to a blurred version of the second image to be transitioned into, and then set the image from a blurred state to a regular state.
So first, we create a div that will represent our distortion image container.

  <!-- DISTORTION =============================== -->
    <div class="distortion"></div>

So we need to provide a displacement image, (which should look like a blur effect for convenience), and then the two images to transition between:

    new hoverEffect({
      parent: document.querySelector('.distortion'),
      intensity: 0.2,
      image1: './images/01.png',
      image2: './images/02.png',
      displacementImage: './images/diss.png',
      imagesRatio: 340 / 300   
    })

And that puts together the distortion effect with some animation.

Thanks for reading.

Originally written by King Somto for JavaScript Works

A Complete Beginner's Guide to useEffect Hook [Part 3]

Mihaela — Wed, 23 Mar 2022 15:10:06 +0000

Introduction

useEffect is a React Hook that is used to handle side effects in React functional components. Introduced in late October 2018, it provides a single API to handle componentDidMount, componentDidUnmount, componentDidUpdate as what was previously done in class-based React components.

What is useEffect Hook?

According to React's official doc :

"The Effect Hook, useEffect, adds the ability to perform side effects from a functional component"

But what are these side effects that we are talking about?
Well, it means we need to do something after the component renders such as data fetching, changes to the DOM, network requests. These kinds of operation are called effects and can be done using the useEffect hook.

A useEffect hook takes in two parameters, a callback function and a dependency array respectively.

const callbackFunction = () => {  }
dependencyArray = [value1, value2, value3, ...]

useEffect(callbackFunction, dependencyArray)

Or quite simply the above can be summed together and usually what we see in codebases:

useEffect( () => {}, 
  [value1, value2, value3, ...]
)

useEffect in action :

Suppose we have a counter button that increases the count by 1 when clicked :

function App() {
 const [count, setCount] = React.useState(0)
 return (
  <div>
    <p>{count}</p>
    <button onClick={() => setCount(count + 1)}>click</button>
  </div>
);
}

ReactDOM.render(<App />, document.getElementById("root"));

What if I want this count value to get dynamically reflected on the page title (i.e. next to the favicon icon), for every button click?

Now, this does sound like we have to handle an effect triggered by the component, hence a perfect use case for the useEffect hook.

Let's import useEffect at the top and call the hook inside the component (just as we did for useState hook).
useEffect takes in two arguments, a callback function to trigger and a dependency array, which we will about later in this post :

function App() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    document.title = count;
  });

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

Here's how the above React component will behave :

The App functional component will return the HTML and render it to the screen with an initial count of 0, set by the useState hook.
Immediately, the useEffect hook runs asynchronously and sets the document.title to the initial count i.e. 0.
The rule of thumb is, whenever something inside the component changes(say, click of a button!), the App component will re-render itself with an updated value.
Suppose we click the increment button setting the count value from 0 to 1, It will force the App component to re-render, now with the updated value. useEffect will run asynchronously setting the title to the updated value of count that is 1

Adapting to Correct Mental Model :

While the useEffect hook seems easy to implement when working with isolated demo components, it is highly likely to run into issues when dealing with large codebases.
The reason being, poor understanding of underlying concepts and continuous comparison with class-based React lifecycle methods.

Back in the day, when we were using class-based components (no issues if you haven't!), the component side-effects were handled using Lifecycle Methods, and useEffect hook somewhat does the same thing what
componentDidMount, componentDidUpdate and componentWillUnmount APIs did in Lifecycle methods, but they do differ in how the things get handled. Applying Lifecycle's mental model to hooks could result in unnecessary & unexpected behaviour.

To truly grasp useEffect, we have to "unlearn" the lifecycle way of doing things, as quoted by Dan Abramov,

** "It’s only after I stopped looking at the useEffect Hook through the prism of the familiar class lifecycle methods that everything came together for me." **

Let's create a ** class-based ** component first,

class App extends React.Component {
 state = {
  name: ""
 };

componentDidMount() {
  setTimeout(() => {
    console.log("MOUNT", this.state.name);
  }, 3000);
}

render() {
 return (
  <div>
    <input
    value={this.state.name}
    onChange={(event) => this.setState({ name: event.target.value })}
    />
  </div>
 );
 }
}

As you can see the console message fires after 3s, what if in between those 3 seconds, we type something to the <input /> field?
Will the componentDidMount print empty this.state.name or would it capture the latest value from the input component?

The answer is, it would capture the latest value, the reason being how lifecycle methods work in a class-based component.

render method creates a DOM node -> componentDidMount is called -> State is updated -> DOM is re-rendered fetching the latest value from state.

Now if we translate the same code to a hook based functional component, it works totally different. The functional component returns a HTML node making initial state value to be empty on the very first mount.

useLayoutEffect is another hook that can replicate the class-based example more accurately. Kent C Dodds explains very well when to use each in this post

Play around with the code here here

Dependency Array :

The second parameter for useEffect is a dependency array. It is an array of all the values on which the side-effect should run/ trigger itself.

For example, let's see this counter component, where when a button is clicked the count value increments by 1, with the help of useState hook.

function App(){

 const [count, setCount] = React.useState(0)
 React.useEffect(() => {console.log("Running Effect")})
 handleChange = () => setCount(prev => prev + 1)


 return(
  <div> 
    {console.log("COMPONENT RE-RENDER")}
    <h1>Hello</h1>
    <button onClick={handleChange}>click</button>
  </div>
 )
}


ReactDOM.render(<App />, document.getElementById('root'))

Now, what can we learn from the above example? As we can notice, there is an useEffect hook with no second argument. This would result in re-rendering of the App component whenever a value inside changes, in this case, the count value is changing. Hence for every button click the component will keep on re-rendering itself, printing COMPONENT RE-RENDER to the console.

** How do we prevent this? **

By adding a second argument to the useEffect hook.

function App(){

 const [count, setCount] = React.useState(0)
 React.useEffect(() => {console.log("Running Effect")}, []) 
 handleChange = () => setCount(prev => prev + 1)


return(
<div>   
  {console.log("COMPONENT RE-RENDER")}
  <h1>Hello</h1>
  <button onClick={handleChange}>click</button>
 </div>
  )
}

At the very first mount, we will see both the logs to the console,

Running Effect
COMPONENT RE-RENDER

But this time, as we click on the button there won't be any log from the useEffect hook as the empty array makes sure to run it just once and all the subsequent logs will be from App

Running Effect
COMPONENT RE-RENDER
COMPONENT RE-RENDER  // keep logging as many times as the button clicks

Let's go a step further and try filling in the dependency array list with count value as :

React.useEffect(() => {console.log("Running Effect")}, [count])

This time things get interesting as it logs both the console text.

Running Effect
COMPONENT RE-RENDER
Running Effect
COMPONENT RE-RENDER
... // keep logging both the text for button clicks

The first text("Running Effect") is rendered as the effect is triggered whenever the array item modifies(count as mentioned there) and it does for button clicks.

while the second text("COMPONENT RE-RENDER") is very much expected as the value inside the component itself is changing, so naturally, it has to re-render to update the DOM with the latest value.

codepen

Incorrect Dependency Array :

It is worth mentioning that incorrect use of dependency array items could lead to issues that are harder to debug. React team strongly advises to always fill in items in the array and not to leave them out.

There is a very helpful exhaustive-deps ESlint rule which helps us in issues such as stale closure which might be due to incorrect dependency or even several other reasons and helps us auto-fix it.
Read more in-depth about the announcement here

useEffect with cleanup function :

As we have read earlier in this post, useEffect expects either an undefined or an optional cleanup function as its return value. A Cleanup function can be thought of as a way to clear out the side effects when the component unmounts.

useEffect(() => {
  // side effect logic here
})

// cleanup function
return () => {
  // logic
}

Let's see cleanup function into action into a very contrived example below:

function App() {
  const [number, setNumber] = useState(0);

  useEffect(() => {
    console.log("number is", number);
    return () => {
      console.log("running cleanup function");
    };
  }, [number]);

  return (
    <div className="App">
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(e.target.value)}
      />

      <p>{number}</p>
    </div>
  );
}

A Cleanup function is used in a very small number of use cases such as clearing out timers, cleaning unnecessary event listeners, unsubscribing to a post etc. If not sanitized properly, they could lead to something called a Memory leak in JavaScript.

Batching multiple useEffects :

What's best, putting different side-effect into one useEffect hook or in multiple?
Honestly, it depends on the use case and how we are interacting with various components. One important thing to note here is that react will apply effect in the order they were written(in case we have multiple useEffect hooks)

It is perfectly fine to do this in a single component :

useEffect(() => {
// Second side effect 
})

useEffect(() => {
// First side effect
})

Conceptual Pitfalls to Avoid :

*1. * useEffect hook does not truly mimic the componentDidMount lifecycle method. Same goes for componentDidMount & componentDidUpdate. While the end result might look similar when implementing, the order in which they are called and mounted is very distinctive as we've already discussed in the above point.

*2. * The useEffect hook expects us to return a cleanup function, to unmount/clear the side-effects after a certain condition has been fulfilled, if not provided it returns undefined. We have to make sure not to return anything else when dealing with an async function, as an asynchronous function returns a promise.

The following code is ** wrong ** as it returns an unexpected promise from useEffect Hook

const App = () => {   
  useEffect(async () => {
    const unsubsribe = await subscriberFunction();    
    return () => {
       unsubscribe()
     }
   }, []) 
return <div></div>;
}

Now, there are various ways to deal with an async function inside a useEffect hook. we can use IIFE style technique such as :

const App = () => {
  useEffect(() => {

    async function subscriberFunction() {
      await fetchIds();
    }   
    subscriberFunction();
  }, []);
return <div></div>;
};

*3. * The order in which useEffect has been specified in a component matters while invoking.

Wrapping Up :

React useEffect hook deviates itself from the class-based lifecycle approach.
It takes time and practice to grasp useEffect's best patterns and foundational concepts, which when used correctly, can prove to be incredibly powerful for handling side-effects in React Applications.

** Some Important Resources that I have collected over time: **

_ Loved this post? Have a suggestion or just want to say hi? Reach out to me on Twitter _

Originally written by Abhinav Anshul for Blockchain Works

Building with React Context Provider Pattern

Mihaela — Wed, 23 Mar 2022 15:09:31 +0000

Introduction

In this article, we will be going through the use of the React Context Providers in building React applications. React uses the Context provider to share data across multiple children components in our React App without the need to pass data or functions across multiple components, however, it comes in handy when building applications with lots of dependencies and moving parts.

What is React Context API

According to the gospel or the React Docs in the book of Context, it defines the context as “ a way of passing data through the component tree without having to pass props down manually at every level”.

React applications let parent components pass data long to children components but issues arise when that data is meant to be used by children components multiple layers deep but not by immediate children of that parent component. Let's look at the diagram below.

Component A is clearly the main parent component with immediate children components B, C, D, these components can receive params from component A and pass that data to the children components, but what about a scenario where Component F needs data from component A and that data is not needed in component B then passing that data to component B becomes redundant, Contex providers provide a cool way of making data readily available to every single child component in the React Application.

What is it used for?

Context API provides a way of sharing data with multiple components throughout our React Application this enables us to be creative in how we manage our application state in things like

Authentication: Knowing when a user is logged in or has an active user session or just hold user data
Notifications: I normally use a Notification provider to expose a notification alert function to components in my
application.
Theming: A cool use of this is controlling night mode in applications look at a cool implementation of that here
Loading of data at start of the application

React Context Provider example

This is a simple example of a React context Provider

```import React, { Component, createContext, useContext } from "react";
export const RandomContext = createContext({ user: null });

class RandomProvider extends Component {
state = {
user: "Somto"
};

render() {
return (

{this.props.children}

);
}
}

const ComponentTest = () => {
const { user } = useContext(RandomContext);
return (

{user}

);
};

export default () => {
return (

);
};




The user Variable would contain the value Somto.

###Adding useState to React Context 
Combining useState with react context helps to add extra functionality to our React app, now components can interact and change the data present in the Context Provider and these changes can be seen in the entire app.

####Building an example application
For our example application, we are going to build a Simple React counter where we would be able to increase and decrease the value of a number stored in the Context, this would be done by different components by accessing the `usestate`  set Function to change the value.

####Step 1. Build and export the context provider
Let's look at the example below of our new Context Provider.



```js
import React, { Component, createContext, useContext } from "react";
const CountContext = createContext({ count: 0, setCount: () => {} });

const CountProvider = ({ children }) => {
 const [count, setCount] = React.useState(0);

 return (
   <CountContext.Provider value={{ count, setCount }}>
     <p>{count}</p>
     {children}
   </CountContext.Provider>
 );
};

export const useCountContext = () => useContext(CountContext);

export default CountProvider;

Let's break this down.

 const CountContext = createContext({ count: 0, setCount: () => {} });\

This part of the code is used to create a context to contain the count variable and the setCount function that would be available throughout the children component.

 const [count, setCount] = React.useState(0);

This initiates our useState variables.


 return (
   <CountContext.Provider value={{ count, setCount }}>
     <p>{count}</p>
     {children}
   </CountContext.Provider>
 );

Here we return our ContextProvider, pass in the values variable and pass the children props variable as its own children.

export const useCountContext = () => useContext(CountContext);

export default CountProvider;

Export both the UserCountContext and the Context Provider Itself.

Step 2. Using our provider and calling the `setCount`.

import "./styles.css";
import React, { useContext } from "react";
import ReactDOM from "react-dom";
import CountProvider, { useCountContext } from "./provider";

const Component = () => {
 const { count, setCount } = useCountContext();

 return (
   <div>
     <button
       onClick={(e) => {
         setCount(count + 1);
       }}
     >
       Add
     </button>
     <button
       onClick={(e) => {
         setCount(count - 1);
       }}
     >
       Subtract
     </button>
   </div>
 );
};

ReactDOM.render(
 <CountProvider>
   <Component></Component>
 </CountProvider>,
 document.getElementById("app")
);

Conclusion

React context provider offers a way of maintaining state globally across our application, we can read and edit that state in any component we choose to, without passing dependencies in through the tree hierarchy.

A working example of this code is available here

Originally written by King Somto for JavaScript Works

Front-End Development Roadmap For 2022

Mihaela — Thu, 13 Jan 2022 11:27:28 +0000

Introduction

Front-end development involves using HTML, CSS, and JavaScript to build a client-side application. The client-side of an online application is the visual part of a web application and also what a user interacts with when an application is opened: colours, fonts, buttons, navigations, animations, etc.

Front-end development includes the user interface of an application. Everything a user interacts with when a user visits a website such as a login or sign-up page, homepage, contact page falls under the front-end development term.

A front-end developer is responsible for building and implementing the interface of a website or web application. They build client-side applications using web technologies such as HTML, CSS, and JavaScript.

In 2022 however, front-end development has gone beyond HTML, CSS, and JavaScript. There are a lot of web technologies you need to learn to be able to excel as a front-end developer this year.

This article will cover all you need to get started with front-end development in 2022.

### Basic Terminal Usage (Command line)

The terminal is an interface used to execute text commands, and it gives you access to the underlying operating system. Basic terminal usage is a skill all developers need regardless of their specialization. Command line is very important so I strongly recommend you study more on how to use it. The better you are with the command line, the more efficient you will be as a front-end developer.

Here are some resources to learn command line:

Command-line crash course - MDN web docs
Getting Started with the Linux Command Line - Pluralsight
Linux Command Line Basics - Udacity
Learn the Command Line in Terminal - Openclassrooms
Learn the Command Line - Codecademy
Command Line Crash Course - Freecodecamp

Git - Version Control

Git is a version control system that enables developers to track changes in their project. Git also helps developers collaborate as a team. Git is needed among developers, to ensure that there are no code conflicts between developers.

Here are some resources to learn Git:

Git Handbook - Github guides
Git - Git
Git book - Git
An introduction to Git - Freecodecamp
Version Control with Git - Udacity
Git & GitHub Crash Course For Beginners - Traversy media
Learn Git In 15 Minutes - Colt Steele
Git and GitHub for Beginners - Crash Course - Freecodecamp

Github

GitHub is a code hosting platform for software development. GitHub lets teams work together on projects and it is also used for version control. It can be used among teams to collaborate on a project. For example, a team of developers wants to build a web application and everyone is given a task that has to be updated daily while working on the project, in this case, Github helps them build a centralized repository where each team member can make updates or manage the code file or repository.

To get started, sign up for GitHub.

Here are some resources to learn Github:

Github Guides - Github guides
What is GitHub? - Github
Git and GitHub for Beginners - Crash Course - Freecodecamp

Text Editor / IDE (Integrated development environment)

The text editor is where you will write your code. Having the right text editor can improve your productivity.

There are a lot of IDE to pick from, but let’s look at a few:

Visual studio code - visual studio code is the best IDE for front-end development. It works across all operating systems such as macOS, Windows, and Linux. Visual studio code comes with a great deal of extension which helps in improving productivity as a front-end developer.
Sublime text - sublime text is also available on macOS, Windows, and Linux. It is fast, easy, and flexible to use.
Atom - Atom is an open-source code editor for macOS, Linux, and Windows developed by Github with supports for plugins.

Web Fundamentals

It is important to understand how the web works before you start learning any technologies. You should learn about things like:

Learn HTML

HTML stands for Hypertext Markup Language. It is the markup language for building web pages, it is also the building block of the web. HTML is easy to learn and comprehend. With just HTML, you can build a basic website.

You need to learn the basics of HTML, such as:

HTML Headings- these are what you use to display titles or subtitles on your web pages. It consists of <h1> which is the most important heading and
which is the least important.
HTML Forms - HTML forms are used to collect data inputs such as username, email, contact details.
HTML Elements - HTML elements define how web browsers will format and display content. Content in the <i> tag will be displayed as italics, content in the <strong> tag will be displayed as bold.
HTML Attributes - HTML attributes provide additional information about the HTML elements. For example, the tag is used to embed an image in a web page, the src attribute will be used to define the path where the image is located.
HTML layout - HTML layout defines the different ways a website displays content. It is advisable to use semantic HTML elements such as <header><nav><section><article><footer>, because it clearly describes the element to the browser and developer.

Here are some resources to learn HTML:

HTML tutorial - w3schools
HTML tutorial - javaTpoint
HTML Full Course - Freecodecamp
HTML Crash Course For Absolute Beginners - Traversy Media

Learn CSS

CSS stands for Cascading Style Sheets. It is the technology to learn after HTML. It is used for styling our HTML. For example, we can use CSS to space our content, colours, fonts, etc.

The basics of CSS you need to learn are:

CSS box model - The CSS box model consists of the margin, border, padding, and content. The image below shows us the CSS box model.

CSS positioning - CSS positioning helps you manipulate an element to different locations such as fixed, relative, absolute, static, sticky, etc. The image below shows us CSS positions.
CSS grid- CSS grid is a two-dimensional system with rows and columns. CSS grid makes it easier to structure a web page without having to use floats.
CSS Flexbox - Flexbox is a one-dimensional system that allows us to choose between a row or a column as the main layout or structure of a web page. CSS flexbox also makes it more flexible to structure a web page without having to use floats.
Responsive design and media queries - Responsive design is the approach that an application should be built or designed with the user in mind irrespective of their environment such as screen size/devices. Responsive design is very important and should be in the mind of every developer when building a web application. Media queries are useful when you want to modify your application to fit a device such as Desktops, tablets, and phones. The image below illustrates how an application is viewed on different devices when built with responsive design.

CSS Preprocessor

Sass - Sass stands for Syntactically Awesome Stylesheet. According to the documentation, Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.
Less - Less stands for Leaner Style Sheets is a backwards-compatible language extension for CSS.

CSS Frameworks

Tailwind CSS - According to the official documentation, Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Tailwind allows us to use inline styling and achieve incredible results without using a single line of CSS.
Bootstrap - Bootstrap helps us build fast and responsive websites.
Foundation - Foundation is a responsive front-end framework that makes it easier to design responsive websites, apps on any device.
Bulma - Bulma is a CSS framework based on flexbox layout.

Here are some resources to learn CSS:

CSS tutorials - w3schools
CSS Crash Course For Absolute Beginners - Traversy Media
HTML5 & CSS Development - Udemy
CSS Tutorial - Zero to Hero - Freecodecamp
SASS Tutorial - w3schools
Flexbox CSS in 20 minutes - Traversy media
CSS Grid Layout Crash Course - Traversy media
Less CSS PreProcessor Tutorial
Tailwind CSS crash course - Traversy media
Bootstrap 4 - w3school
Foundation Framework Crash Course - Traversy media
Bulma CSS Framework Crash Course- Traversy media

Learn JavaScript

JavaScript is one of the most popular programming languages in the world. It is the language of the web. As a front-end developer, it is required you learn JavaScript. JavaScript enables us to create dynamic content. When you create your HTML structure and your style with your CSS, JavaScript makes the website dynamic and alive.

Some of the basics of JavaScript you need to learn are:

JavaScript Syntax - Every programming language has its own rules on how a program is written.
The syntax of JavaScript is the set of rules that determine how a program is written by a programmer and interpreted by a browser.
DOM Manipulation - DOM stands for document objects model. According to W3C (World Wide Web Consortium) standard, the DOM is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. The DOM is a representation of how the content of a web page is structured. JavaScript manipulates the DOM by updating the content, the style, removing elements, adding new elements.
Learn Fetch API - API stands for Application Programming Interface. An API is an intermediary that allows two applications to communicate with each other. As a front-end developer, when building a web application, chances are that you will have to work with external data such as Third-party APIs, fetch API allows browsers to make HTTP requests to a web server.

JavaScript Frameworks/Libraries

After learning the basics of JavaScript, you can pick any JavaScript framework of your choice. But I highly recommend you pick Vuejs as it is more beginner-friendly.

React - According to the documentation, a JavaScript library for building user interfaces React lets you create reusable components.
Vue - Vuejs is an approachable, versatile, performant javascript framework that helps you create a maintainable and testable codebase. Vuejs is also beginner-friendly.
Angular - According to the documentation, Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.
Svelte - Svelte provides a different method for building web applications. It helps developers build fast web pages and a great user interface.
Ember - Ember allows developers to create a scalable single page application. It includes everything you need to build a rich user interface that works on any device.
PREACT - PREACT is an alternative to React but came with a Fast 3kB and the same modern API.

Here are some resources to learn JavaScript:

JavaScript Tutorial - W3schools
Learn JavaScript - Freecodecamp
JavaScript Tutorial for Beginners - Programming with Mosh
JavaScript Tutorial for Beginners - Clever programmers
JavaScript Crash Course For Beginners - Traversy media
React Tutorial - React
Getting started with Vue - Vue Guide
Build An Ember.js App - Program with Erik
Getting started with PREACT - PREACT guide
Svelte Crash Course - Traversy media
Angular Crash Course - Traversy media

Package managers

A package manager is a tool that allows users to install, update, configure, and manage software packages and product dependencies. Examples of package managers are NPM and Yarn. It is recommended you learn the basics of one of them.

Accessibility

Web accessibility is the process of making your website usable by all people. Web accessibility is an essential part of front-end development. It is important that as a front-end developer, you need to build web pages with accessibility in mind. When you build with accessibility in mind, there is no restriction to anyone. People with disabilities, slow networks, visual impairments, hearing impairments can have access to all the information on the website without obstructions or difficulties.

Here are some resources to learn more about Accessibility:

Web accessibility - Udacity
Introduction to Web Accessibility - Class Central

Performance

According to MDN, web performance is all about making websites fast, including making slow processes seem fast. One of the metrics that a good website/web application should meet is fast page rendering.

Web performance refers to how long it takes for an application to be rendered in the browser as well as how responsive it is to user interaction. For a better user experience, it is recommended that developers adopt different web optimization techniques. This includes using a Content Delivery Network (CDN) which is a strategically distributed web server that delivers contents to users based on location. Another option is to use image compressing tools like imageOptim to reduce image sizes without compromising its quality.

Other methods to adopt include:

Use cache - the whole idea about cache revolves around temporarily saving data and web pages to improve page performance. It is advised that developers implement a cache in the best possible situations to increase site performance and overall user experience. Cached data can be stored on local storage and retrieved when needed.
Minimize the number of HTTP requests that your application makes.
Load your CSS and JavaScript files asynchronously. This will prevent the browser from waiting for any element that takes extra time to load. It will instead proceed to other elements.
Remove junk and unwanted codes in your CSS and JavaScript files.

To get the exact performance data of your web application, you can make use of any of the below-listed tools:

All of the above-listed tools though with different unique features will serve you just right.

Testing Your Apps

Testing involves scanning a piece of software for a potential bug during development. During testing, the tester performs an action on a piece of software while expecting a specific result. Possible things to test in an application includes security, functionality and ease of use amongst others. Testing does not guarantee that a piece of software will function properly under any circumstance but it, however, provides us with information on how it could behave under certain conditions. An example of a test tool to try out in your application is a Jest. Jest is a framework used to create and run JavaScript tests for applications built with React, Nodejs, Angular, TypeScript, Vue, and more. It has grown in popularity over the years and has become one of the most used test tools.

Other testing tools and frameworks to try out include:

Website Deployment

With the knowledge gotten from HTML, CSS, and JavaScript you can build simple web pages using those technologies. Most time after building, it remains in our computer or Github repo and there is no way people can see what you built. But with web deployments, you can host your simple application on the internet. It is super easy to do. You can use tools like GitHub pages, or Netlify.

Conclusion

Congrats, you have come to the end of the front-end development roadmap for 2022! With the knowledge shared here, you can easily build real-time website applications. Good luck!

For more resources like this don't hesitate to sign up to join our community of developers!

Originally written by AMAECHI AMARACHI for JavaScript Works

Web Components API: Shadow DOM and Light DOM

Mihaela — Thu, 13 Jan 2022 10:53:31 +0000

In our series of articles about web components, we have first made an introduction into the web components world and looked into how we got to where we are today. Next, we talked about the web components API, more specifically how to define them, their attributes, and props.

So far, we know the fundamentals and we're able to define a web component, but, how can we define the content of the component, the markup, and finally, the component's structure?

Our web component content will be the sum of a Shadow DOM and a Light DOM, using tags like <template> and <slot>.

Shadow DOM

Let's sum up, what we talked about Shadow DOM in the first article of the series:

The Shadow DOM API is probably the most important API of Web Components. This API brings us encapsulation for both markup and styles. This means that our web component code and styles will not overlap with the rest of the elements of the page where the component belongs to. The encapsulation applies both to the web component on the outside as well as the page inside the web component. For this to be possible an independent DOM subtree (shadow DOM) is attached to the main DOM.

To make things more clear:

If we execute a document.querySelector() we won't find any element of the web component.
If we define some style for, let's say, a <div class="button">, and inside the web component there was also a div with the same class, it would not be affected by the outside styles.

Regarding to code, a web component with Shadow DOM could look in the following way:

<my-profile name="Marty" lastname="Mcfly">
  #shadow-root
  <div class="profile-picture">
    <img src="marty.png" alt="Marty Mcfly" />
  </div>
  <div class="name">Marty Mcfly</div>
</my-profile>

We have seen what the ShadowDOM means and how it looks like, now let's try to implement it using the API.

We will add a shadow root to our shadow host (web component). To do that we need to execute the function attachShadow(), which has the following syntax:

var shadowroot = element.attachShadow(shadowRootInit);

The shadowRootInit parameter is a settings object with the following structure:

mode: A string specifying the encapsulation mode for the shadow DOM tree. This can be one of:
- open: Elements of the shadow root are accessible from JavaScript outside the root, for example using Element.shadowRoot:
- closed: Denies access to the node(s) of a closed shadow root from JavaScript outside it. Not commonly used.
delegatesFocus: A boolean that, when set to true, specifies behavior that mitigates custom element issues around focusability. When a non-focusable part of the shadow DOM is clicked, the first focusable part is given focus, and the shadow host is given any available :focus styling

This function must be executed inside the context of our web component's class, specifically, inside the constructor call of our web component.

class MyCustomElement extends HTMLElement {
  constructor() {
    super();

    // ...

    this.shadowRoot = this.attachShadow({ mode: "open" });

    // ...
  }
  // our custom element code
}

The Element.attachShadow() method (in our code, this.attachShadow as this is pointing to our HTMLElement class), attaches a shadow DOM tree to the specified element and returns a reference to its ShadowRoot. This reference to that ShadowRoot is what we are storing in this.shadowRoot variable, in order to make some other operations later, as appending our web component content.

It's important to note that is not possible to attach a ShadowRoot to all existing elements. We can attach a shadow root to the following elements:

<article>
<aside>
<blockquote>
<body>
<div>
<footer>
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<header>
<main>
<nav>
<p>
<section>
<span>

Then, once we have a ShadowRoot attached to our element, it's time to define its content. To do that, we will do using the HTML <template> tag or a String variable with the HTML content. Let's see how it works.

Defining content using `<template>`

We can define the web component's content using the <template> tag. The <template> allows us to define some HTML content on the client-side that will not be rendered with the page load but will be available to be instantiated. That means, in the web component's context, that we can define our web component's content but this will not be rendered. However, we can instantiate from our web component's code to be attached to our ShadowRoot. This content will only be rendered when our web component will be instantiated.

As we said, we will define the web component's content in the HTML file and then we will have to get it from the web component's code file (a.k.a JS file).

Let's say we have an HTML file with our web component's as follows:

<HTML>
<head></head>

<body>

  <!-- our web component's code -->
  <template id="webComponentsHTML">
    <div class="profile-picture">
      <img src alt="Marty Mcfly" />
    </div>
    <div class="name"></div>
  </template>

</body>
</HTML>

Then, from our web component's code, we will access and attach the web component's content to the ShadowRoot as follows:

  // get the template code
  const template = document.querySelector("#webComponentsHTML");

  // Attaches a shadow DOM tree to our element (this)
  this._shadowRoot = this.attachShadow({ mode: "open" });

  // Set our elements code
  this._shadowRoot.appendChild(template.content.cloneNode(true));

Maybe you're wondering why we're using the cloneNode() method instead of using directly template.content. The answer is because we are using the appendChild method, which moves the appended node from its current position to the new position, so there is no requirement to remove the node from its parent node before appending it to some other node. In order to maintain the template content, we are using cloneNode().

Defining content using inside the JS file

The other way to define our web component's content is doing it, as we said, inside the JS file using the innerHTML property of our ShadowRoot instance. We can define our HTML content directly to the innerHTML property (first snippet) or pointing to another variable if needed (2nd snippet):

Directly to the innerHTML property

  // component's code
  const componentCode = `
    <div class="profile-picture">
      <img src alt="Marty Mcfly" />
    </div>
    <div class="name"></div>
  `
  // Attaches a shadow DOM tree to our element (this)
  this._shadowRoot = this.attachShadow({ mode: "open" });

  // Set our elements code
  this._shadowRoot.innerHTML = componentCode;

Pointing to another variable

  // Attaches a shadow DOM tree to our element (this)
  this._shadowRoot = this.attachShadow({ mode: "open" });

  // Set our elements code
  this._shadowRoot.innerHTML = `
    <div class="profile-picture">
      <img src alt="Marty Mcfly" />
    </div>
    <div class="name"></div>
  `;

Both ways of defining the component's content accept HTML tags as well style tags in order to define the styles of the content.

Declarative ShadowDOM

There is a brand new way to define ShadowDOM: declarative ShadowDOM - implement and use Shadow DOM directly in HTML. As a new web platform API, Declarative Shadow DOM does not have widespread support across all browsers yet. Declarative Shadow DOM is available in Chrome 90 and Edge 91. It can also be enabled using the Experimental Web Platform Features flag in Chrome 85.

As it's not fully implemented acroos all browsers, we won't go further into this topic, but here are some resources if you want to learn more:

Light DOM

You should already have a clear understanding of what ShadowDOM is, now it's time to talk about LightDOM. LightDOM is the other DOM tree along with ShadowDOM that defines the web component's content. While ShadowDOM points to the main content of the component and it's defined by the web component's developer, LightDOM points to content that is not mandatory and it's defined by the person who is consuming our web component.

Let's sum up, what we talked about Light DOM and, specifically slots, in the first article of the series:

Slots allow the author of a web component to define which content will be customizable by the consumer with his own HTML. Slots are the way we have to customize the content of our web component. As they are not part of Shadow DOM, and therefore, are not encapsulated, they are affected by page styles, and can be queried.

Let's see a use case in order to understand the concept better. Let's say we have a profile card (as we have been seeing in the previous articles) where we have a picture, a name, and a description. Both the name and the description could be set by using attributes, but attributes are limited to primitive types, so only String will be supported. Maybe, when defining our description we want to highlight some parts of it with bold text, using <b> tag. We can do that by using a slot:

This would be the web component's definition:

  <div class="profile-picture">
    <img src alt="Marty Mcfly" />
  </div>
  <div class="name"></div>
  <div class="description">
    <slot name="description"></slot>
  </div>

This would be the web component's usage:

  <my-profile picture="src/myProfilePicture.jpg" name="Marty McFlY">
    <div slot="description">
      I am a <b>time traveller</b> who loves music and plays the electric guitar.
    </div>
  </my-profile>

This is not totally true. Attributes can receive complex types as arrays or objects by setting them from JavaScript, but this is not a good practice and it doesn't follow the standards.

The use case described above is a very simple example just to illustrate the slot concept and understand it better. Another case could be, for instance, a tabs component, where we would define the tab content using slot, as the tab content is unpredictable and could have all kind of content (any kind of HTML, remote content fetched from a server... anything).

Default and named slots

A web component can have as many slots as needed, so we need a way to differentiate them. To do it we can name it, using the name attribute in the slot definition and the slot attribute in the web component usage. On another hand, we can define a default slot as well. The default slot will be the one that has not defined the slot attribute.

To understand it better, let's go back to the last example.

This would be the web component's definition:

  <div class="profile-picture">
    <slot><slot>
  </div>
  <div class="name">
    <slot name="name"></slot>
  </div>
  <div class="description">
    <slot name="description"></slot>
  </div>

This would be the web component's usage:

  <my-profile>
    <img src="src/myProfilePicture.jpg" />
    <div slot="name">
      <h1>Marty McFly</h1>
      <h2>Also known as Levis Strauss</h2>
    </div>
    <div slot="description">
      I am a <b>time traveller</b> who loves music and plays the electric guitar.
    </div>
  </my-profile>

As we can see, we have two DIVs elements pointing to two slots, but we have a picture (<img>), that doesn't have any slot set, so this one will be pointed as the default slot, the one which has no name in the web component's definition.

Styling WebComponents (ShadowDOM and LightDOM)

ShadowDom brings us encapsulation for markup as well as for styles, but as web component's author, we can set some ways to customize the web component's appearance from outside.

On the other hand, as mentioned before since LightDOM is not encapsulated, it's affected by page styles and can be queried. However, we, as web component's authors, can define some default styles that will be applied to slots.

In the next articles we will explore this deeper, meanwhile, we can list the ways we have to do it:

ShadowDOM
- ::part() pseudo-element
- :host-context selector
- :host selector
- :host selector and classes
- CSS vars
LightDOM
- ::slotted() pseudo-selector

Conclusion

Step by step, we are exanding our Web Components knowledge. We are getting really close to being ready to write our first web component from scratch, so make sure to keep an eye on this series!

Also, ddon't forget to read the first two articles of the series:

Thanks for reading!

Originally written by Rafa Romero Dios for JavaScript Works

Why You Should Learn Functional Programming

Mihaela — Fri, 26 Nov 2021 17:20:17 +0000

Many of the widely used languages (including C++, Java, and Javascript) are imperative. In imperative programming, computations are structured as sequences of instructions that operate by making modifications to the state of the program. Functional languages operate by declaring functions. The output value of a function depends only on the arguments that are passed to the function. Because of this, functional languages have a few advantages that minimize mistakes.

"Sometimes, the elegant implementation is a function.
Not a method. Not a class. Not a framework. Just a function."
--John Carmack

Until recently, functional languages were considered "academic" and for research only. But the industry has since discovered their advantages and many leaders are adopting functional programming to gain competitiveness.

In this post, I'll list a few reasons why you should learn functional programming.

It makes you a better programmer

Functional programming, especially typed functional programming, offers a very different mental toolbox than the traditional programmer usually uses. For example:

Immutability

Unlike in imperative languages, in functional languages, variables are immutable by default and do not depend on the state of the program. Along with referential transparency (given the same
inputs, a function always return the same results), this increases consistency. As a result, we have reduced
errors, increased stability, and increased effectiveness of tests. For example, tools like QuickCheck are very effective.

Type safety

Modern functional languages are usually statically typed, which means that they type check (verify all functions have the correct input types passed to them and return the correct type) at compile-time as opposed to run-time. This ensures that all programs in production are type safe. Even though some imperative languages are also statically typed, they don't offer as many safety guarantees as modern functional languages.

Memory safety

Functional programming languages handle allocation and de-allocation for you. The compiler avoids many common memory leaks that imperative programmers see and completely removes the risk of null dereferences.

Purity

In pure functional languages like Haskell, you can prove the absence of unwanted side-effects. Because pure functional languages operate with functions that are type safe, you can control whether a function in the code has any interaction with the outside world more easily.

And many more! See here
and here for
more details.

These new tools and perspectives empower you to write better programs even when you write in
traditional languages. In fact, many modern extensions/frameworks have
functional flavours added. See for example ReasonML and typescript. Learning functional programming will give you the necessary building blocks to pick up these frameworks quickly and correctly.

It's enjoyable

A far smaller cognitive load is required when writing functional rather than imperative code. As mentioned above, in functional programming the compiler type checks and ensures memory safety. In addition, functions have no side effects. Therefore, many concerns present in imperative languages can be completely offloaded to the compiler. With this tedious cognitive load freed up, the functional
programmer can focus on the more fun part of programming: designing the implementation! When we develop in functional languages we often write much less code, in substantially less time, and with fewer bugs.

It gives you great career prospects

Many companies have adopted functional programming and there are many opportunities for functional programmers. Companies using Haskell include Facebook, Hasura, etc. Companies using OCaml include Ahrefs, Jane Street, etc.

Check out Functional Works for many more companies that are using functional languages!

Functional languages are prominent in blockchain especially. Blockchain is an increasingly popular technology with applications in many areas. The most common uses of the technology include
cryptocurrencies, banking/FinTech, and smart contracts. They all involve financial transactions that are time-sensitive and mistakes can be very costly. Functional languages can minimize these mistakes and therefore many blockchain and related applications are written in functional languages! For example, Mina and Tezos are written in OCaml. Cardano, Kadena and BlockApps are written in Haskell.

Check out Blockchain Works for many more blockchain-related companies that are using functional languages!

In conclusion, functional languages have advantages over imperative languages. They are already well-used in the blockchain world and are really catching on in other areas as well. Whether you want to stay up-to-date, expand your career choices, or broaden your programming knowledge, learning functional programming is the ideal choice!

If I've got you convinced, I've got more good news for you! I'm going to publish a series of posts introducing functional programming concepts. You don't need to have a background in functional programming or even programming. I'll go through practical concepts from beginner to advanced levels with many code examples.

Stay tuned!

Originally written by Marty Stumpf for WorksHub

ES2020: New Features & What's Beyond

Mihaela — Fri, 26 Nov 2021 17:19:27 +0000

The world of JavaScript( officially ECMAScript ) changes fast and with awesome features getting added each year, it's certainly hard to keep up. The last big overhaul happened in ES2015 when a bunch of new features, sugarcoated syntax were added to the language.

ECMAScript community releases new features every year. In this post, we will have a look at 7 key features that were introduced in ES2020

*Big Int *
Nullish Coalescing Operator
Optional Chaining
Global this
Promise.allSettled
Dynamic Import
String.prototype.matchAll

Let's get into each one by one

1. Big Int

BigInt is a special data type introduced in ES2020 to define numbers that exceed the Number data type range. The Number data type limits between -(2^53-1) to -(2^53-1), which we can check using
Number.MAX_SAFE_INTEGER & Number.MIN_SAFE_INTEGER.

console.log(Number.MIN_SAFE_INTEGER);
// -9007199254740991

console.log(Number.MAX_SAFE_INTEGER);
// 9007199254740991

Introduction to BigInt now increases the total number of primitive data type to 8, the rest being,

Undefined
Null
Number
String
Object
Symbol
Boolean

To use BigInt, we simply append n at the very end of an integer, and that would be parsed as a BigInt.

BigInt("1")    // -> 1n
typeof(1n)    // -> "bigint"

a) BigInt Uses :

BigInt is useful in situations where we have to essentially deal with large integers that are beyond the scope of Number type.

console.log(18014398509481982n + 18014398509481982n)  // -> 36028797018963964n

b) BigInt Operations :

All arithmetic operations are valid, the only exception to this is unary plus operator

console.log(1n + 1n)       // -> 2n
console.log(7n / 3n)      // -> 2n
console.log(+10n)     // -> Unary Operator error

The same goes for comparison as well, however, strict equality doesn't hold when compared with the Number data type.

10n == 10 -> True
10n === 10 -> False

2. Nullish Coalescing Operator

The Nullish Coalescing operator is not something new but rather a sugarcoated version of a pattern we have been doing for quite a long time.

Have a look at this piece of code :

if (a !== null && a !== undefined){
  return a;
}
else {
  return b;
}

// Now, nullish coalescing operator would simplify the above logic to :
a ?? b

In simple terms,

_ ?? returns the first argument if it is defined i.e neither null nor undefined _

_ ?? returns the second argument if the first argument is either null or undefined _

Confused? Well let's have a look at few examples to clear up things

1 ?? 2  // 1 (returns the first argument as its neither null nor undefined)

undefined ?? 1  // 1 (returns the second argument as the first one is undefined)

// we can even chain up several arguments as well, and the operator would return the first `defined value`

var country = null;
var state = undefined;
var city = "London";

console.log(country ?? state ?? city) // London (returns the first `defined value`)

Use case :

Let's say if a user is logged-in, display the first name else display "Anonymous" :

When logged-in
let user = "Alice"
console.log(user ?? "Anonymous"); // Alice

When not logged-in
let user = undefined;
console.log(user ?? "Anonymous"); // Anonymous

3. Optional Chaining

The Optional Chaining Operator introduced in ES2020 is similar to the . (dot operator). It solves a very specific problem and is useful when we need a property that is nested deep in an object.

Consider the example below :

let response = {
    type : "customer",
    isSignedIn : true,
    details : {
        age : 22,
        name : "Lucy",
        Country : "Estonia"
    }
}

Given the above example is an API response and we aren't sure if the property we are accessing even exists inside the object or not, then traditionally we have to do something like below to make sure we don't have any nullish value when nesting inside the response object properties

const data = response.details && response.details.name

However, with Optional Chaining, we can do :

const data = response.details?.name

JavaScript makes sure at each level of the object the property is not nullish (null or undefined), hence proving ?. much practical than plain ol' dot operator.

Gotchas with :
Optional Chaining throws an error on the left-hand side of an assignment.
The very first property before the ?. must be defined and cannot be invalid.
Similar to ?. we have slightly different variants too :

?.[] => calling arrays

?.() => calling functions

4. Global this

Think about the number of environments and platforms we run JavaScript in, browsers, smartphones, servers, robotics equipment.
For each environment, the JavaScript Object model is different and the global object might point to a different property.

In browsers, the global object could be window, self or frame, depending on the context. However there is no scope of the above-mentioned properties in NodeJs, hence it uses global to point to its global object.

Can we see the chaos here? If we have to run our js code in a range of different environment we need to figure out its global object first and is exactly what we have been doing for so long.

A common pattern to figure out the global object is as :

function getGlobalObject() {
  if (typeof globalThis !== 'undefined') { return globalThis; }
  if (typeof self !== 'undefined') { return self; }
  if (typeof window !== 'undefined') { return window; }
  if (typeof global !== 'undefined') { return global; }
  throw new Error('cannot find the global object');
};

if (typeof getGlobalObject().Promise.allSettled !== 'function') {
  // the Promise.allSettled() Not available in this environment
}

However, the above solution has its own limitations and trade-offs.

globalThis tries to address the issue by pointing globalThis keyword to its global object model irrespective of the environment(as it is available everywhere). It was introduced in 2020 and currently stands on stage 4 and is available on most browsers.

// nodeJS
console.log(globalThis) // returns the global object
// browsers
console.log(globalThis) // returns the window object
// web-workers
console.log(globalThis) // returns the global web workers context

With the introduction of globalThis, it would be best practice to stop using this keyword in the context of global objects and start using globalThis instead.

5. Promise.allSettled

Promise.allSettled() is a method that takes an iterable object(array) and returns a promise when all the provided promises have either resolved or rejected, meaning it does not short-circuit in the middle.

The returned outcome is an object with two things :

_a) value -> If the status is fulfilled._

_b) reason -> If the status is rejected._

It's hard not to talk about the ES2015's Promise.all and its similarities/dissimilarities with allSettled
A striking difference between these two would be all short-circuits in the middle if any of the provided promises is rejected, while allSettled waits for async result and filters them by status and never shortcircuits.

Let's have a look at its working :

const promise1 = new Promise((resolve) => resolve("yay"));
const promise2 = new Promise((resolve, reject) => reject("oh-no"));


    (async () => {
     try {
     const result = await Promise.allSettled([promise1, promise2]);
     console.log(result);
     } catch (error) {
     console.error(error);
     }


    })();
 // Output:
 // [
 // { status: 'fulfilled', value: 'yay' },
 // { status: 'rejected', reason: 'oh-no' },
 // ]

If we compare it with all :

const promise1 = new Promise((resolve) => resolve("yay"));
const promise2 = new Promise((resolve, reject) => reject("oh-no"));


    (async () => {
     try {
     const result = await Promise.allSettled([promise1, promise2]);
     console.log(result);
     } catch (error) {
     console.error(error);
     }
     })()

 // Output:
 // Error : "oh-no"

6. Dynamic Import

The amount of JS heavy apps we ship these days can be quite overwhelming and with these lot of javascript files, the module import/export should be effective.

ES2020's dynamic import addresses this issue to make the page load ups, first meaningful paint etc efficient and fast.
This is done by dynamically importing the files that we need at that point in time.

The import keyword was introduced in ES2015, and we have been importing modules like

import React from 'react';

ES2020 allows us to use import as a function (although it looks like a function, it is not)

// we dont need to set type of module below
<script>
  import('./add.js')
    .then(module => module.default(3, 7)) //returns 10
    .catch(error => // log error here);
</script>

The above piece of code makes sure the add.js module is only imported when we need to sum up two numbers. It doesn't unnecessarily bloat up the js code which could make page loads slow.

7. String.prototype.matchAll

matchAll is a new method that is added to the string prototype. This returns an iterator matching against a regular expression that we have given.

A simple example to demonstrate the same :

const test = "climbing, oranges, jumping, flying, carrot";

const regex = /([a-z]*)ing/g;

const matches = [...test.matchAll(regex)];

const result = matches.map(match => match[1]);

// outputs the following :
["climb", "jump", "fly"]

While we just finished learning ES2020, the ES2021 has already been drafted for its next release. Here's what's in the box for us :

String.prototype.replaceAll
Promise.any
Logical Operators and Assignment Expressions
Numeric Separators
WeakRefs
Intl.ListFormat

*Some Important Resources that I have collected over time: *

i. https://auth0.com/blog/javascript-whats-new-es2020/

ii. https://www.martinmck.com/posts/es2020-everything-you-need-to-know/

iii. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

iv. https://blog.tildeloop.com/posts/javascript-the-difference-between-match-and-matchall

Loved this post? Have a suggestion or just want to say hi? Reach out to me on Twitter

Originally written by Abhinav Anshul for JavaScript Works

A Complete Beginner's Guide to React useState hook [Part 1]

Mihaela — Fri, 26 Nov 2021 17:17:36 +0000

Hi 👋

In this article, we will deep dive into the world of React hooks, useState in particular from a beginner's point of view.
React Hooks are the result of a continuous rise in functional programming over the years.

We will have a look at its working, common mistakes we are likely to encounter, comparing it with class-based components and best practices.

useState is a React Hook introduced late in October 2018, which allows us to have state variables in the JSX functional component. we pass an initial value to this function, and it returns a variable with a new state based on functional logic.

Let's go through the following topic one-by-one:

What is React useState hook?
Declaration useState hook in React
Understanding & implementation using a simple counter application.
Comparing it to a class-based component
Handling multiple states in a single component.
Gotchas
Common Mistakes
Why someone would use a hook?

1. What is React useState hook?

Hmm, an interesting question!
As we stated earlier, the useState hook allows us to have state variables in the JSX functional component.
It takes one argument which is the initial state and returns a state value and a function to update it.

2. Declaration of useState hook

useState is a named export from React,
So, we can either do

import { useState } from 'react'

*or simply, *

React.useState

The former approach is much common across codebases and mentioned in the official react docs

3. Understanding and Implementation

It's always a good idea to try things out ourselves rather than reading documentation, so let's jump right into the code.

We'll build a counter application and to keep things simpler, we won't go into prevState (yet), see point 7(ii)

As we can see, we are importing the useState hook at top of the file, and a handful of CSS styles to keep things centered and clean enough.

Moving further, we have a functional JSX component called App, which is rendering increment and decrement buttons and a count text in between. This count will render every time the state gets updated by the button clicks.

The useState hook takes an initial state, count in this case, and returns a pair of variables, count and setCount, where count is the current state (currently set to 0) whereas setCount is a function which updates it asynchronously.

At line number 6, we are using array destructuring to return the pair of variables at array index of 0 & 1.

(Read more about array destructuring here)

Moving on, both the button has an onClick event, which triggers an anonymous function, which increments or decrements the count variable using the setCount function. This click even results in the re-rendering of the count state.

Similar to the count state variable, we are allowed to use different data types such as objects, arrays, strings, boolean, etc.

const [firstname, setFirstname] = useState("")
const [age, setAge] = useState(0)
const [isLoggedin, setIsLoggedin] = useState(false)
const [form, setForm] = useState({
    username : "",
    password : ""
})

As we can see, all the above useState hooks are valid state data types.

4. Comparing it to a class-based component

While the useState hook is a new addition to the React library, it somewhat does the same thing as this.state used with class-based components.
Confused?

Let's see how we would write the same counter app in a class based component.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  // change code below this line

  increment() {
    this.setState({
      count: this.state.count + 1
    });
  };

  decrement() {
    this.setState({
      count: this.state.count - 1
    });
  };

  render() {
    return (

   <div>
   <button className='inc' onClick={(e) => this.increment(e)}>Increment!</button>
    <button className='dec' onClick={(e) => this.decrement(e)}>Decrement!</button>
  <h1>Current Count: {this.state.count}</h1>
  </div>
    );
  }
};

5. Handling multiple states in a single component

Oh! what if we have multiple states to handle and not just a silly count variable, what about then? Where do we store those variables? Are they similar to this.state?

Well, handling of multiple state variables is somewhat different in useState compared to this.state
In useState, we tend to write as many state hooks as there are states
Like this,

const [lastname, setLastname] = useState(null)
const [firstname, setFirstname] = useState(null)
const [age, setAge] = useState(0)

Or group similar things together using an initial state object

const [islogin, setIslogin] = useState({
    username : "",
    password : ""
})

However, when building quite a large application it is incredibly difficult to keep track of all the useState hooks and is not very practical, hence useReducer comes into the picture, which is beyond the scope of this article.
Read more about useReducer here

6. Gotchas

i. We can only use useState (or any other hook) inside a function component.

ii. React Hooks must be called in the same order in every component render, in simpler words, any hook should be at the very top and inside the function component without any unnecessary check, loops, etc
For example, the following code is wrong, and won't behave as we expect

function App(){
    if(true){
        const [count, setCount] = useState(0)
    }
}

iii When we update the state, the component re-renders each time.

7. Common Mistakes

i. Never ever update the state directly, like this :

function incrementCount(){
    count = count + 1
}

Instead, we have a function (remember setCount function?) that will manipulate the state variable as we need,
Similar to this,

function incrementCount(){
    setCount(count + 1)
}

Or, we can use an anonymous function like how we used it in the first counter application.

ii. Remember, how we talked about, "Keeping things simpler" at the very beginning of this article, well, this is the moment!

In order to use useState effectively, we absolutely want to change and mutate the state variable based on its initial state, and don't want unexpected rendering.
To do so, we need to pass a previous state parameter to the function and based on that, mutating the state variable.
Confused?
Okay, Let's see some code!

setCount(count + 1)

should be

setCount(prevState => prevState + 1)

Here, prevState ensures us to give us current value of count no matter what, and in fact a better and recommended way to write hooks!

8. Why someone would use a hook?

i. Easier to test.

ii. Provides good readability.

iii. Performance boost.

iv. Reduction in bundle size.

*Important Resources that I have collected over time 😃 *

i. https://medium.com/@quinnlashinsky/destructuring-arrays-in-javascript-2cb003160b3a

ii. https://levelup.gitconnected.com/react-hooks-gotchas-setstate-in-async-effects-d2fd84b02305

iii. https://www.youtube.com/watch?v=O6P86uwfdR0&t=221s&ab_channel=WebDevSimplified

Originally written by Abhinav Anshul for JavaScript Works

Forem: Mihaela

Building An Infinite Scroll Into Your React App

Introduction

Infinite scroll

Prerequisite

Implementation

Using an exciting library (The smart boring way)

Installing

Implement the infinite scroll (The fun way)

Pros of using custom components

Cons

Here is our codebase

Part 1

Conclusion

Referrence

JavaScript Libraries You Should Try Out in 2022

Introduction

Introduction to JavaScript Libraries 2022

Top JavaScript Libraries in 2022

1. jQuery

2. D3.js

3. React.js

4. Lodash

5. Underscore.js

Some Useful JavaScript Frameworks That You Must be Known

1. Aurelia

2. Ember.js

3. Node.js

4. Mocha

Best JavaScript Tools

1. iziModal

2. Shave

3. Webpack

4. Babel

Conclusion

We’ll Plant a Tree for Every Job Application on Our Platform

Best Books On Crypto

1. Unlocking Digital Cryptocurrencies: Mastering Bitcoin

2. How the Technology Behind Bitcoin Is Changing Money, Business, and the World: Blockchain Revolution.

3.Bitcoin and the Inside Story of the Misfits and Millionaires Trying to Reinvent Money- Book- Digital Gold.

4. The Investor's Guide to Cryptocurrency and Defi, the Decentralized Finance Revolution: The Wall Street Era is Over.

5. Idealism, Greed, Lies, and the Making of the First Big Cryptocurrency Craze-The Cryptopians.

6. The Fiat Standard: The Debt Slavery Alternative to Human Civilisation.

7. Cashless: China's Digital Currency Revolution.

8. The Everything Guide to Investing in Cryptocurrency: From Bitcoin to Ripple, the Safe and Secure Way to Buy, Trade, and my Digital Currencies.

Finally!

Create a Distortion Effect Using GSAP

Introduction

What will we be building?

Prerequisites

How does GSAP work?

TweenMax

gsap.to()

Gsap.staggerFrom()

Getting Started with GSAP

A Complete Beginner's Guide to useEffect Hook [Part 3]

Introduction

What is useEffect Hook?

useEffect in action :

Adapting to Correct Mental Model :

Dependency Array :

Incorrect Dependency Array :

useEffect with cleanup function :

Batching multiple useEffects :

Conceptual Pitfalls to Avoid :

Wrapping Up :

Building with React Context Provider Pattern

Introduction

What is React Context API

What is it used for?

React Context Provider example

Step 2. Using our provider and calling the setCount.

Conclusion

Front-End Development Roadmap For 2022

Introduction

Here are some resources to learn command line:

Git - Version Control

Here are some resources to learn Git:

Github

Here are some resources to learn Github:

Step 2. Using our provider and calling the `setCount`.

Defining content using `<template>`