Charuka Herath

Atomic design is a collection of visual assets that are created with modularity in mind. Imagine if you have to develop all the components from scratch each time. Atomic design lets developers use existing elements to quickly bootstrap together interfaces and works well in a React setting because it is intrinsically atomic by design through component-based modular constructions. 

## React, visual structure & implementing Atomic Design 

*Atomic Design* breaks down a page into five different layers - atoms, molecules, organisms, templates, and pages. It was initially created by [Brad Frost](https://bradfrost.com/blog/post/atomic-web-design/) and deals with creating visual structure through design systems. This methodology works well with React's modular approach by enforcing clear separations of visual elements and their associated component. Here is a quick introduction of what each component of Atomic design is and how they fit into your React app.

-  **Atoms**  are principal elements like buttons and labels. They are the smallest elements in your app and cannot be further reduced.

- **Molecules** are a group of *atoms*. For example, a *search bar* is a collection of atoms that are visually linked together.  

- **Organisms** are compositions of Atoms and Molecules that build a complex and distinct component with unique behavior. They can be seen as distinct parts of your application such as a footer or header area. In React, components can have their own state management, invoking APIs to fetch data.

- **Templates** are reusable sets of *Organisms* put together with *Molecules* and *Atoms* for higher-level layout reuse. 

## Using Atomic design as a guideline for your React app

We can use Atomic design principles to organize our project. Here is an example:

```
components/
├─ atoms/
│  ├─ submitButton
│  ├─ textInput
├─ molecules/
│  ├─ searchBar
├─ organisms/
│  ├─ header
│  ├─ footer
├─ templates/
│  ├─ blog
├─ pages/
│  ├─ home
│  ├─ blogs
```

Using Atomic design principles, we've divided our components into its various categories and compositions. Among these five, atoms, molecules and organisms belong to lower-level components, and templates and pages are considered higher-level components.

### Designing lower-level components using Atomic design in React

Based on the above file structure, we will be creating the following:

- **Submit Button** and the **Text Input** form components as Atoms.
- **Search Bar** component as a Molecule.
- **Header** and **Footer** components as Organisms.

```javascript
import {
  Button,
} from "react-bootstrap";
import styled from "styled-components";

const ButtonSumbit = styled(Button)`
  border-radius: 2vw;
  margin-left: 4vw;
  &:hover {
    background-color: blue;
  }
`;

function submitButton(props: any) {
    return (
        <ButtonSumbit
            type="submit"
            onClick={() => props.onPress()}
            style={{
                  width: props.w ? props.w : 85,
                  height: props.h ? props.h : 8,
                  marginTop: props.noMar ? 0 : 2,
                  backgroundColor: props.bColor ? props.bColor : '#fff',
                  borderWidth: 2,
                  borderColor: '512da8'
                }}
        ></ButtonSumbit>
    );
}
export default submitButton;
```

For the Molecule, we can design the **Search Bar** component using the **Submit Button** and **Text Input** Atoms.

```javascript
import React from "react";
import { Button } from "react-bootstrap";
import styled from "styled-components";
import submitButton from "../atoms/submitButton";
import textInput from "../atoms/textInput";

const searchArea = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
`;

function searchBar(props: any) {
  return (
    <searchArea>
      <ListGroup horizontal>
        <ListGroupItem>
          <textInput></textInput>
        </ListGroupItem>
        <ListGroupItem>
          <submitButton></submitButton>
        </ListGroupItem>
      </ListGroup>
    </searchArea>
  );
}
export default searchBar;
```

To create the **Header** Organism, we used the **Search Bar** Molecule and a List Component from React-Bootstrap.

```javascript
import React  from "react";
import { ListGroup, ListGroupItem } from "react-bootstrap";
import styled from "styled-components";
import searchBar from "../molecules/searchbar";

const blogHeader = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
`;

function header(props: any) {
  return (
    <blogHeader>
      <ListGroup horizontal>
        <ListGroupItem>
          <p>Search Publications</p>
        </ListGroupItem>
        <ListGroupItem>
          <searchBar></searchBar>
        </ListGroupItem>
      </ListGroup>
    </blogHeader>
  );
}
export default header;
```

## Making higher-level components using Atomic design

Gradually the higher-order components can be defined using a combination of Atoms, Molecules, and Organisms. We can also develop sets of templates to design a full-page UI. According to this example, we can observe an ordered list of dependencies from the higher-level Page to the lower-level Atom.

It’s not mandatory to create a template for every use case. You can directly create a Page if it’s used only in one place. After developing the application, you can illustrate the dependency graph and check whether you have developed the application under the hood of Atomic design concepts.


Frontend

Using atomic design to create visual cohesion for your React components

Puru Vijay

***[CSS Modules](https://github.com/css-modules/css-modules)*** are "CSS files in which all class names and animation names are scoped locally by default". Instead of having CSS files and classes that are static, CSS Modules creates a dynamic implementation that is locally scoped to the HTML with the help of  [Webpack](https://webpack.github.io/) or [Browserify](http://browserify.org/).

[CSS Modules](https://github.com/css-modules/css-modules) is popular in React because of the following reasons:

1. **Scoped**: [CSS Modules](https://github.com/css-modules/css-modules) are scoped when you use them the right way.
2. **Highly composable**: You can compose different styles in a lot of ways.
3. **Tree shakable**: Styles you don't use are removed, just like modern JS tooling.
4. **Very easy to pick up**: [CSS Modules](https://github.com/css-modules/css-modules) are very easy to understand and take almost no effort to start using.
5. **It's just CSS**: [CSS Modules](https://github.com/css-modules/css-modules) are just CSS that you write with some specific rules in mind. You get great tooling from your IDE, and IDEs are great at plain ol' CSS.

CSS Modules work seamlessly with pre-processors like [SASS](https://sass-lang.com/), [LESS](https://lesscss.org/), and [Stylus](https://stylus-lang.com/). It also works with [PostCSS](https://postcss.org/).

What is [PostCSS](https://postcss.org/)?

[PostCSS](https://postcss.org/) is CSS converted for CSS Modules, which gets rid of global CSS classes and ids. This reduces naming conflicts and global space pollution as your project grows.

## **How to use CSS Modules in React**

Let's start with an example. We're going to build a Card component. This will be our directory structure:

```
 |- Card.jsx
 |- Card.module.css
```

We're naming our CSS file a `*.module.css` because it is a convention. It is also how build tools know that it is a CSS Module file.

Now let's look at the CSS file. We used specifically camel casing for our css `class` so that it matches our JavaScript casing.

```css
 /* Card.module.scss */
 .container {}
 .avatar {}
 .userInfo {}
 .userName {}
 .userStatus {}
```

Under normal circumstances and for plain CSS, we'd just use our CSS classes with `className`. For example - `<div className="userStatus">...</div>`. However, for CSS Modules, we surround our CSS with `{}` . So the React code looks something like this: `<div className={css.userStatus}>...</div>`

Here is an example with the imported `'./Card.module.scss'` CSS Module:

```javascript
 import css from './Card.module.scss';
 
 export const Card = () => {
   return (
     <section className={css.container}>
       <img className={css.avatar} src="..." />
       <div className={css.userInfo}>
         <div className={css.userName}>...</div>
         <div className={css.userStatus}>...</div>
       </div>
     </section>
   );
 };
```

Instead of regular static strings, we're using `css.*` values. This is because the CSS classes are being used like JavaScript modules. It is also a reason why we use camel casing instead of dashes in our CSS.

## **How CSS Modules work under the hood**

When you import a CSS module file, it looks something like this:

```javascript
 export const container = '_container_bslv0_1';
 export const avatar = '_avatar_bslv0_8';
 export const userInfo = '_userInfo_bslv0_14';
 export const userName = '_userName_bslv0_21';
 export const userStatus = '_userStatus_bslv0_40';
 export default {
   container: container,
   avatar: avatar,
   userInfo: userInfo,
   userName: userName,
   userStatus: userStatus,
 };
```

The build tools transforms our class names into variables that are exported separately as named exports and as an object. Another CSS file gets generated and then mapped to the associated `const` . As a result, your CSS is specifically scoped to the space it is used. Here is an example:

```javascript
 ._container_bslv0_1 {}
 ._avatar_bslv0_8 {}
 ._userInfo_bslv0_14 {}
 ._userName_bslv0_21 {}
 ._userStatus_bslv0_40 {}
```

It is good to note that by default **CSS Modules are scoped only to classes**. This means that `#id` and global selectors are not processed by CSS Modules. However, descendants of classes are scoped. For example `.container img` will be scoped by CSS Modules but `img` on its own will not.

# **CSS Modules features and how to use them**

Besides scoping, CSS Modules also lets you:

- create global styling
- compose multiple styles together
- create variables

### **Create global style in React with CSS Module via :global**

`:global` is a way to create global selectors with CSS Modules. Here is an example of SCSS code with the `:global` flag.

```javascript
 .container {
   .someRandomDiv {
     .header {
       color: green;
     }
 
     :global(body.dark) .header {
       color: blue;
     }
   }
 }
```

## **Composing multiple styles together**

In CSS Modules, you can create a class and then compose it within other classes by using the `composes` selector. Here is an example:

```
 .classA {
   background-color: green;
   color: white;
 }
 
 .classB {
   composes: classA;
   color: blue;
 }
```

The classes being called in by `compose` do not have to be in the same file. It can be imported in. For example:

```
 .classB {
   composes: classA from './classB.css';
   color: blue;
 }
```

The `composes` selector allows us to build highly reusable styles, resulting in easier orchestration of design systems.

## **CSS variable systems with CSS Modules**

CSS Modules have a variable system that allows you to efficiently create DRY values for your CSS.

```
 @value blue: #0c77f8;
 @value red: #ff0000;
 @value green: #aaf200;
 
 .button {
   color: blue;
   display: inline-block;
 }
```

In the example above, we've redefined the browser defaults for `blue`, `red` , and `green`. For cleaner referencing and reusability, these values can be defined in a separate file and imported in.

```
 /* import your colors... */
 @value colors: "./colors.css";
 @value blue, red, green from colors;
 
 .button {
   color: blue;
   display: inline-block;
 }
```

# **Visual Studio Code import error for CSS Module**

CSS Modules are great but if you are using Visual Studio Code, Intellisense can create issues. For example, although technically correct, if you are working with TypeScript, the following will create an error:

```
 import css from './Card.module.css';
```

This is because VSCode will import it as a `css` file and not as a CSS Module file. There are two ways to fix it:

- edit your `types.d.ts` file
- or, install `typescript-plugin-css-modules`

> Note: If you're using create-react-app or Vite's react scaffolds, you don't need the steps below, they already have the minimal configuration built-in to allow .css, .scss, .less, .styl, etc in import statements.

### **Fix 1: Editing types.d.ts**

Create a `types.d.ts` in your `src` folder and put in the following configuration:

```
 declare module '*.module.css' {
   const classes: { [key: string]: string };
   export default classes;
 }
 
 declare module '*.module.scss' {
   const classes: { [key: string]: string };
   export default classes;
 }
 
 declare module '*.module.sass' {
   const classes: { [key: string]: string };
   export default classes;
 }
 
 declare module '*.module.less' {
   const classes: { [key: string]: string };
   export default classes;
 }
 
 declare module '*.module.styl' {
   const classes: { [key: string]: string };
   export default classes;
 }
```

This will tell VSCode to interpret your CSS Modules as key-pair values. This will fix your warnings with using `css.*` in your code because it now knows to return a string.

![https://res.cloudinary.com/layercode/image/upload/v1628263501/css_modules_intellisense_demo_567ef36d33.gif](https://res.cloudinary.com/layercode/image/upload/v1628263501/css_modules_intellisense_demo_567ef36d33.gif)

### **Fix 2: Use typescript-plugin-css-modules**

Using `typescript-plugin-css-modules` is the quickest way to set up any TypeScript project with CSS Modules. Use the following commands to install `typescript-plugin-css-modules`.

```
 npm i --save-dev typescript-plugin-css-modules
 
 # Or if you're a yarn person
 
 yarn add --save-dev typescript-plugin-css-modules
```

Next, open up your `tsconfig.json`, and add the following to the `compilerOptions` property:

```
 "plugins": [{ "name": "typescript-plugin-css-modules" }]
```

Set VSCode TypeScript version to the one that's used on your project. You can view the version on the bottom left of your console.

![https://res.cloudinary.com/layercode/image/upload/v1628263541/css_modules_typescript_version_photo_1_2c9fe63906.png](https://res.cloudinary.com/layercode/image/upload/v1628263541/css_modules_typescript_version_photo_1_2c9fe63906.png)

If you click on it, a list popup will open up and you can select your TypeScript version.

![https://res.cloudinary.com/layercode/image/upload/v1628263548/css_modules_typescript_version_photo_2_f19d891815.png](https://res.cloudinary.com/layercode/image/upload/v1628263548/css_modules_typescript_version_photo_2_f19d891815.png)

![https://res.cloudinary.com/layercode/image/upload/v1628263548/css_modules_typescript_version_photo_3_55b7f6251b.png](https://res.cloudinary.com/layercode/image/upload/v1628263548/css_modules_typescript_version_photo_3_55b7f6251b.png)

# **Using clsx for cleaner CSS Modules conditionals**

CSS Modules rely on using the `css.*` pattern, composing multiple classes can result in long strings. For example:

```
 <div className={`${css.classA} ${css.classB} ${css.classC}`} />
```

It looks a little ugly, but it's still manageable. However, once you start having conditional classes, things can get uglier. For example:

```
 <div className={`${css.classA} ${condition1 ? css.classB : ''} ${condition2 ? css.classC : ''}`} />
```

It's easy to fall into a ternary trap. We have to render an empty string manually if the condition is false. If we did just `condition1 && css.classB`, it would've been pretty clean and legible. But if the condition is `false`, it would output `null` as a class name.

To make this cleaner, we can use the `clsx` library. It's a small 228B library that makes dealing with class composition much easier.

Here is how you can use it for cleaner composition:

```
 <div
   className={clsx({
     [css.classA]: true,
     [css.classB]: condition1,
     [css.classC]: condition2,
   })}
 />
```

# **Wrapping up**

CSS Modules are one way to upgrade your CSS and make it more manageable in the long run. CSS scoping reduces the manual work required for matching CSS classes to the right context. It also reduces visual errors caused by global conflicts.

CSS Modules also encourage DRY patterns in your code. It is not exclusive to React and can also be used with other frontend libraries such as Angular and Vue. No one wants to use `!important` overrides in CSS because it's a slippery slope. However, `!important` becomes tempting as the project grows and there are multiple people working in a team. CSS Modules are one way to solve this issue.

What are CSS Modules and how to use it in React 

Aphinya Dechalert

First came DevOps. Then DevSecOps. Now, the latest 'it' thing is GitOps. While it may sound like another buzzword, its usage is rather useful. But what exactly is GitOps? Why does GitOps matter? Is GitOps just another trend, or is it something that you can leverage for your apps and software development processes?

## What is GitOps? 

There are two parts to GitOps - the `git` part, and the `Ops` side of things. In a nutshell, GitOps is a code-based infrastructure that relies on Git as a single source of truth. If this single source of truth changes, so does the deployed product. It also means that the app's infrastructure and systems are reproducible with the ability to create synchronous updates.  

GitOps is also a way of controlling the way systems are automatically created, updated, and deleted. You can use pull requests as part of the automated deployment processes to configure and set the infrastructure. 

The act of having a single source of truth and running everything from a centralized deployment resource may sound like the intuitive thing to do - it hasn't always been the case. 

## The concept of DevOps vs. reality

In reality, most systems are implemented via manual deployments with manual hardware management. This includes the task of connecting and provisioning machines, creating layers, and provisioning APIs with load balancers. This often involves large amounts of manual configuration work with various scripts living in different spaces. When an app is small, this method appears manageable. However, if the team composition changes through growth or system admins leaving, it can cause havoc by leaving knowledge gaps to create systems knowledge decay.

DevOps migrated this issue over to the developer. GitOps truly solves this issue through an enforced single source of truth. It allows the team to collectively version control the system, track and apply any systems modifications. Histories can be reviewed, which also gives the ability to audit and identify when security vulnerabilities, bugs, and any other issues are introduced.

At its core, GitOps is a method of implementing continuous deployment that requires minimal intervention once it's set up. This is the major difference between DevOps and GitOps. With DevOps, there is a process of tinkering and intervention involved to get things into production. GitOps, in contrast, involves only setting up the pipeline and ship code directly into different spaces once a code merge is approved. 

## How GitOps work

On the surface, GitOps is a simple concept. It's the process of centralizing your code, documentation, and infrastructure around a version control system (in our case, it is Git) so that it can be automated and deployed.

But how exactly do GitOps works?

Imagine that you have a project. Someone on the team does a pull request, edits the code, issues a merge request. Once the code is approved and the merge request is completed, the automated GitOps operator detects the change, another automater declares the change as operational, then it gets deployed. Once the pipeline is set up, there isn't a requirement for any manual intervention. 

## The good parts of GitOps

### Declarative system

The process of deploying code to infrastructure is often done through a series of steps. This can cause issues if the order generates a different set of responses that are divergent from the expected norm.

In contrast, GitOps relies on a series of *facts* to deploy. The app's declarations are stored and versioned in Git, and the order of *facts* implementation is not a vital part - only that the end result is what is stated and expected. This allows for cluster infrastructures to be deployed or rolled back with speed.

### System state versioning

Using Git as the single source of truth also means that versions are canonical. Rollbacks are simplified through a simple git `revert`, which is going back to the previous application state. Commits can be signed to enforce authorship and traceability for larger teams. 

### Approved changes automatically applied

Once the code is merged, changes will be automatically applied through triggers that implement the CI/CD workflows. This means that once your code is committed and merged to the target branch, there is no need to do anything else to deploy.

## The bad parts of GitOps

### Lack of secret management

It's unsafe to store secrets in Git repositories. Why? Because it extends the scope of accessibility to people and spaces that may not need it. The purpose of secrets is to create security layers and boundaries. If secrets such as private keys are exposed, it creates a vulnerability for your application. The security issue and scope of the breach also increase if the key is non-revocable. 

### Not designed for programmatic updates

Git is designed for manual editing and conflict resolutions. This means that if you have an app that requires frequent updates, Git would be unsuitable especially if updates are occurring in parallel and by multiple parties. Git's linear processes are great for smaller teams but can cause issues if multiple teams are working on the same repository and branches. 

### Struggles with complexity

As your teams and environments grow, so do the number of GitOps repositories and application environments required to be supported. This means that every repository requires access rights configuration, management, and maintenance. As the complexity and number of Git repositories grow, so does the time spent on creating automation and provisioning of GitOps repositories. 

## Wrapping up 

GitOps is loved by smaller projects and startups because of the agility it can bring to a project. While it's being touted as 'the next big thing' in automation, GitOps is more a natural progression towards decoupling the developer from infrastructure work. 

The aim of DevOps and GitOps are the same - to help the developer deploy apps as quickly and with minimal friction. As new products, services, and ideas becomes available, so do the techniques of achieving this. GitOps is one of the multiple ways a developer can achieve automated deployment. If you're already using git, making updates to your app becomes a streamlined process that doesn't require any additional manual deployments once the pipeline is set up. 

Web Dev

What's the big deal with GitOps? A quick introduction

Chameera Dulanga


Firebase is an application development platform that supports web and mobile development. It is owned by Google and provides various services like real-time databases, storage, authentication, hosting, and analytics.

Firebase authentication is a managed identity authentication system that lets you store and create user sessions without the need for a backend. Here is a quick tutorial on how to set up Firebase authentication with React. 

## How Firebase authentication works

![01-firebasereact.png](https://res.cloudinary.com/layercode/image/upload/v1638824791/01_firebasereact_3cc658f6dc.png)

Firebase authentication is part of the services suite offered by Google's full-stack app platform. It covers a majority of authentication options including email, and federated identity providers such as Google, Facebook, Twitter, and GitHub. Firebase authentication is a free service, with the exception of phone verification - which is free for the first 10k API calls. 

Authentication works by providing an API that lets valid apps access login statuses and session tokens that are managed by Firebase. It uses OAuth 2.0 standards for security and OpenID Connect for interoperability. 

There are multiple ways to implement Firebase authentication, including a 'drop-in' solution where an external user flow is provided to sign in users. Another way is to use the Firebase SDK authentication, which is a package that can be leveraged for backend and native applications. 

For this tutorial, we are going to focus on implementing Firebase authentication in a React app. 

## Implementing Firebase Authentication in a React app

In this tutorial, we will be implementing the following:

- email and password authentication method
- Single sign-on with Google authentication method

You wil need to have a basic understand of React before you begin. 

### Step 1: Create a new Firebase project
![02-firebasereact.png](https://res.cloudinary.com/layercode/image/upload/v1638824789/02_firebasereact_d5166b6d05.png)

Before we can use authenticated identities through Firebase, you need to create a project. To do this, go to your  [Firebase console](https://console.firebase.google.com/). You should see the screen as per the screenshot below (or something similar).

![03-firebasereact.png](https://res.cloudinary.com/layercode/image/upload/v1638824789/03_firebasereact_e9016fc92a.png)

Click the **Create a Project** button, and you will be redirected to the project creation wizard. You will need to enter a project name and enable Google analytics if needed.

It takes a few seconds for your newly minted Firebase project to boot up. Once completed, you will be automatically redirected to your project's dashboard. Your Firebase project's dashboard looks something like this:

### Step 2: Enable Firebase Authentication

To enable Firebase Authentication, you need to select the **Authentication** option from the left side panel. It will redirect you to the Firebase Authentication options, where you can manage users, sign-in options, and templates.

![04-firebasereact.png](https://res.cloudinary.com/layercode/image/upload/v1638824790/04_firebasereact_76209f0352.png)

You can select multiple authentication options from the sign-in method page, including native and federated sign-in methods.

For this tutorial, we will be using Email/Password and Google sign-in. Here is a quick rundown on how to enable email and password, and Google sign-in. 

#### Enabling Email/Password Sign-In

To enable email and password authentication method on Firebase, you need to switch it on by clicking on the enable toggle. 

![05-firebasereact.png](https://res.cloudinary.com/layercode/image/upload/v1638824790/05_firebasereact_61166b215f.png)

After saving, you will be redirected back to the sign-in method page, and you will see the Email/Password authentication option in the sign-in provider list.

![06-firebasereact.png](https://res.cloudinary.com/layercode/image/upload/v1638824789/06_firebasereact_25346f9886.png)


#### Enabling Google Authentication federated profile Sign-in

To enable Google federated sign-in, you need to add another sign-in provider by clicking **Add new provider** button.

![07-firebasereact.png](https://res.cloudinary.com/layercode/image/upload/v1638824790/07_firebasereact_01d2eee0f9.png)

Select Google from the additional providers and it will open a configuration modal like below:

![08-firebasereact.png](https://res.cloudinary.com/layercode/image/upload/v1638824790/08_firebasereact_63afc5b165.png)

To save user details - that is, data that is associated with the user profile - you will need a database. We will be using Firebase's Firestore database for this purpose. 

### Step 3 — Creating a Cloud Firestore Database

To create a Firestore database, you need to select the Firestore database option from the left panel. The free tier gives a generous 600,00 writes and 1.5 million reads before you start getting charged for usage. 

![09-firebasereact.png](https://res.cloudinary.com/layercode/image/upload/v1638824790/09_firebasereact_49620ef340.png)

You will be directed to a database creation wizard. Click on **Create database**. This will give you the database security permissions. For now, you can grant all access. However, you will need to close up accessibility to only your application to prevent leaks and potential security breaches. 

![10-firebasereact.png](https://res.cloudinary.com/layercode/image/upload/v1638824791/10_firebasereact_5e430b9f3d.png)

Make sure to enable write permissions by changing rules to `allow read, write: if true`.

![11-firebasereact.png](https://res.cloudinary.com/layercode/image/upload/v1638824790/11_firebasereact_e144acbe24.png)

After clicking **Enable,** you will be redirected to the Firestore database page within a few seconds.

![12-firebasereact.png](https://res.cloudinary.com/layercode/image/upload/v1638824790/12_firebasereact_150dd3ad14.png)

Now that we've got your console set up for Firebase authentication and a database set up, we can now integrate it into our React application. 
![13-firebasereact.png](https://res.cloudinary.com/layercode/image/upload/v1638824790/13_firebasereact_90efeca34d.png)

### Step 4: Registering your React app with Firebase 

To connect your Firebase backend to your react app, you need to Firebase project settings and configure it to use the React app. When you go to Firebase settings and scroll down, you will see a message like the below:


![14-firebasereact.png](https://res.cloudinary.com/layercode/image/upload/v1638824789/14_firebasereact_071c786fb9.png)
Then, you need to select the Web application icon (**</>**), and it will take you to the app registration page.


![15-firebasereact.png](https://res.cloudinary.com/layercode/image/upload/v1638824790/15_firebasereact_21403a6000.png)

After registering the web application with a nickname, you will get the necessary details to add Firebase SDK to your React application. Make sure to copy these details before completing the wizard since we will be using them in the next step.



![16-firebasereact.png](https://res.cloudinary.com/layercode/image/upload/v1638824791/16_firebasereact_149de04152.png)

### Step 5: Adding Firebase to your React Application

Here is a series of steps you need to follow to add Firebase to your React application. 

### Installing Firebase

Firebase provides 2 options to install it to our application - `NPM` and `<script>` tag. For our React app, we are going to use NPM. Here is how to install the Firebase package as a module via NPM.

```
npm install firebase
```

### Creating a Firebase service in React

Then we need to create a service file to keep all the firebase configurations and functions.

Here is an example of a service file:

```javascript
import firebase from “firebase/app”;
import { getFirestore, collection, addDoc, where, query, getDocs} from "firebase/firestore";
import "firebase/compat/auth";

const firebaseConfig = {
  apiKey: “<API_KEY_HERE>”,
  authDomain: “<AUTH_DOMAIN_HERE>”,
  projectId: “<PROJECT_ID_HERE>”,
  storageBucket: “<PROJECT_STORAGE_BUCKET_HERE>”,
  appId: “<APP_ID_HERE>”,
  measurementId: “<MEASUREMENT_ID_HERE>”,
};

firebase.initializeApp(firebaseConfig);
const db = getFirestore();
const provider = new firebase.auth.GoogleAuthProvider();

provider.setCustomParameters({ prompt: 'select_account' });

export const auth = firebase.auth();
export default firebase;
```

In the below user registration function, Firebase returns a new user when we pass the email and the password to `auth.createUserWithEmailAndPassword(email, password)` - which is Firebase's `auth` service method. We will save the records to a Firestore collection using the database service.

```javascript
// User Registration
const userRegistration = async (name, email, password) => {
  try {
    const res = await auth.createUserWithEmailAndPassword(email, password);
    const user = res.user;
    await db.collection("users").add({
    uid: user.uid,
    name,
    authProvider: "local",
    email,
  });
  } catch (err) {
    alert(err.message);
  }
};
```

Firebase will take care of the authentication process from there and return the validity of the user.

```javascript
// Sign-in with Email/Passwordexport 
const signInWithEmailAndPassword = async (email, password) => {
  try {
    await auth.signInWithEmailAndPassword(email, password);
  } catch (err) {
    alert(err.message);
  }
};
```
Firebase provides a password reset option. All you need to do is pass the email to Firebase auth service using `sendPasswordResetEmail()` method.

```javascript
export const resetPassword = async (email) => {
  try {
    await auth.sendPasswordResetEmail(email);
  } catch (err) {
    alert(err.message);
  }
};
```

For Google sign-in, we need to handle both registration and sign-in in the same function. To prevent duplication, I will check if the users exist in the database, and if not, I will create a new record and continue with the sign-in process.

```javascript
// Google Sign-in
export const signInWithGoogle = async () => {
  try {
    const res = await auth.signInWithPopup(provider);
    const user = res.user;
    const userRef = collection(db, "users");
    const result = await getDocs(query(userRef, where("uid", "==", user.uid)));
    if (result.empty) {
      await addDoc(collection(db, "users"), {
        uid: user.uid,
        name: user.displayName,
        authProvider: "google",
        email: user.email,
      });
    }
  } 
  catch (err) {
    alert(err.message);
  }
};
```

That’s basically it. You don't need to deal with password storage management systems or security protocols that come with managing identities. Firebase has you covered.  



How to set up Firebase Authentication in React

Amit Merchant

Immutability in JavaScript is important for the predictability and performance of your application. The [idea of immutability](https://www.dottedsquirrel.com/immutability-javascript/) is that once something is set, it doesn't change. But to perform operations, sometimes mutability is required. So how do we balance the need for mutability but keep the original object or array untouched? 

If you're working with Redux, it's important to keep in mind that [reducers are pure functions](https://redux.js.org/understanding/thinking-in-redux/three-principles#changes-are-made-with-pure-functions). A pure function is a type of function that only returns a specific expected result based on an input. This means that if `x` is the input, it will always return `y`. 

A reducer takes the previous state and an action and return the next state. Why is this important? This is because a reduce returns a new state object rather than mutating the previous state. 

Here is an example piece  of code that shows what you **cannot do** in a reducer:


```js
// A todo reducer which directly
// mutates the original state

function todos(state = [], action) {
    switch (action.type) {
        case 'ADD_TODO':
            state.push({
                text: action.text,
                completed: false
            })  

            return state
        default:
            return state
    }
}
```

In the `ADD_TODO` action, pushing a todo object into the state using the [push](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) method causes mutation to the original `state`. This makes the reducer impure because it changed the original object. 

For a reducer to remain pure, you'd need to prevent change on the original object's `state`. This is where enforcing immutability comes in. 

Let's take a look at the following object:

```js
const User = {
    name: 'Cody',
    age: 25,
    education: {
        school: {
          name: 'School of Code'
        }
    }
}
```

If we want to maintain immutability and update `education.school.name`, we can do so by making a copy of this object. One way to achieve this is by using the [object spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax). Here is an example:

```js
const updatedUser = {
    ...User,
    education: {
        ...User.education,
        school : {
          ...User.education.school,
          name: 'Layercode Academy'
        }
    }
}
```

In the code sample above, we created a copy of the `User` object and changed the `education.school.name` using object destructuring. While this gets the job done, it's hard to read. We'd need to go deeper into the object tree to change the property. 

As the object grows, so does the complexity of creating copies to preserve immutability. 

However, what if you could just mutate the object immutability rules? For example, what if we could write our JavaScript to look like something printed below:

```js
User.education.school.name = 'Layercode Academy';
```

This is where [immer.js](https://immerjs.github.io/) comes in.

## What is immer.js?

[immer.js](https://immerjs.github.io/) is a library that allows you to work with immutable states without breaking immutability itself. This is achieved through a [copy-on-write](https://en.wikipedia.org/wiki/Copy-on-write) mechanism. Here is a three-step process flow of how [immer.js](https://immerjs.github.io/) works:

- create a `draftState` which is a temporary state of your object's `currentState`
- apply all the changes to this `draftState`
- return the final state based on the `draftState` while still keeping the original object unchanged.

[immer.js](https://immerjs.github.io/) uses a special JavaScript object called [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) to wrap the data you provide, and lets you write code that "mutates" that wrapped data. The advantage this brings is you can interact with your data by simply modifying it while keeping all the benefits of immutable data.

## Installing immmer.js

You can install [immer.js](https://immerjs.github.io/) via `npm` or `yarn`. 

Using `npm`:

```bash
$ npm install immer
```

Using `yarn`:

```bash
$ yarn add immer
```

If your application is not using any of these package managers, you can directly add immer.js to your application through CDN like so.

- Unpkg: `<script src="https://unpkg.com/immer"></script>`
- JSDelivr: `<script src="https://cdn.jsdelivr.net/npm/immer"></script>`

## Using immer.js

Once installed, you can start using [immer.js](https://immerjs.github.io/) right away.

The immer package exposes a default function called `produce` that does all the work and is a source of truth. As the name of the function suggests, it *"produces"* the `nextState` based on the `currentState` of your object/array.

Here's how the definition of `produce` function looks like.

```js
produce(currentState, producer: (draftState) => void): nextState
```

It accepts two parameters:

- `currentState` - the current state of the object/array.
- `producer` - an anonymous function that receives the `draftState` as its only argument and on which you can perform all the operations.

If we want to rewrite our previous example using immmer.js, we can do it like so.

```js
import produce from "immer"

const User = {
    name: 'Cody',
    age: 25,
    education: {
        school: {
            name: 'School of Code'
        }
    }
}

const updatedUser = produce(User, draftUser => {
    draftUser.education.school.name = 'Layercode Academy';
})
```

The above method is much easier to deal with than using nested spread operators. We are now able to copy and mutate the `updatedUser` object using traditional JavaScript syntax without impacting the source. 

Here is the original syntax for comparison.

```js
const updatedUser = {
    ...User,
    education: {
        ...User.education,
        school : {
          ...User.education.school,
          name: 'Layercode Academy'
        }
    }
}
```

You can also work with arrays the same way objects. Here is an example:

```js
import produce from "immer"

const todosArray = [
    {id: "001", done: false, body: "Take out the trash"},
    {id: "002", done: false, body: "Check Email"}
]

const addedTodosArray = produce(todosArray, draft => {
    draft.push({id: "003", done: false, body: "Buy bananas"})
})

console.log(addedTodosArray)

/*
[
  { id: '001', done: false, body: 'Take out the trash' },
  { id: '002', done: false, body: 'Check Email' },
  { id: '003', done: false, body: 'Buy bananas' }
]
*/
```

## About `useImmer` hook

If you're working with functional components in your React.js application, you can use this [complementary hook](https://github.com/immerjs/use-immer) called `useImmer` to manipulate state inside your functional components.

To use `userImmer`, you will need to install it, in addition to having `immer.js`.

```bash
$ npm install use-immer
```

Once installed, you can start using the `useImmer` hook in your application just like the `useState` hook. With `useImmer`, you can directly mutate the state inside the function that updates the state.

Here is an example:

```js
import React from "react";
import { useImmer } from "use-immer";

function App() {
  const [person, updatePerson] = useImmer({
    name: "Cody"
  });

  function updateName(name) {
    updatePerson(draft => {
      draft.name = name;
    });
  }

  return (
    <div className="App">
      <h1>
        Hello {person.name}
      </h1>
      <input
        onChange={e => {
          updateName(e.target.value);
        }}
        value={person.name}
      />
    </div>
  );
}
```

The `updatePerson` that we get from `useImmer` sits on top of immer.js. This means you can directly mutate the state inside `updatePerson` just like how you would do using the `produce` function of immer.js.

## Simplifying Redux reducers using immer.js

Using the curried producers of immer.js, you can greatly simplify your [redux reducer](https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers#writing-reducers) logic.

Passing a function as the first argument to produce is intended to be used for [currying](https://www.dottedsquirrel.com/currying-javascript/). This means that you get a pre-bound producer that only needs a state to produce the value from. The producer function gets passed in the draft and any further arguments that were passed to the curried function.

Here is an example:

```js
const INITIAL_STATE = {}

const byId = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case RECEIVE_PRODUCTS:
            return {
                ...state,
                ...action.products.reduce((obj, product) => {
                    obj[product.id] = product
                    return obj
                }, {})
            }
        default:
            return state
    }
}
```

You can simplify this reducer by using immer's curried producers like so.

```js
import produce from "immer"

const INITIAL_STATE = {}

const byId = produce((draft, action) => {
    switch (action.type) {
        case RECEIVE_PRODUCTS:
            action.products.forEach(product => {
                draft[product.id] = product
            })
            break
    }
}, INITIAL_STATE)
```

Here, `draft` is the copy of the original state and `action` will be the regular action that this reducer will receive.

As you can tell, you can also provide an initial state (`INITIAL_STATE`) as the second argument to the `produce` function. This lets you avoid writing the `default` case.

------

immer.js is very powerful through its ability to help us simplify our code without sacrificing functionality. Overall, it can reduce the amount of code we need to write, maintain code comprehension and ensure that the code we write do not accidentally introduce side effects through the mutability of the original array or object.


Mutation-like immutability in JavaScript using immer.js

ORM (Object-Relational Mapping) is a technique that allows to query and manipulate data using an object to relational mapping layer. Today, there are a variety of ORM libraries available, and most of the developers prefer to use them over raw SQL queries.

ORMs help developers to write complicated queries quickly and make it easier to update and reuse the code.

However, getting started with ORMs can be challenging due to the learning curve. So, here is a quick tutorial on how to set up [Sequelize ORM](https://sequelize.org/v3/) with [Node.js](https://nodejs.org/) and [MySQL](https://www.mysql.com/).

## What is Sequelize
![sequelize.png](https://res.cloudinary.com/layercode/image/upload/v1642452760/sequelize_d0e317586e.png)


[Sequelize](https://sequelize.org/v3/) is a promise-based ORM library specialized for Node.js. It was first introduced in 2011, and now, it has more than 1.1 Million weekly [NPM](https://www.npmjs.com/package/sequelize) downloads and 25K+ [GitHub](https://github.com/sequelize/sequelize/tree/master) stars.

Compared to other ORM libraries, Sequelize is more stable and has various features like queries, relations, transactions, hooks, scopes, migrations, etc. Also, it supports multiple databases like MySQL, MariaDB, SQLite, Microsoft SQL Server and Postgres.

For this tutorial, we will focus on using Sequelize with Node.js and MySQL.

## Using Sequalize with a Node.js and MySQL

In this tutorial, we will be implementing the following:

- Initialize a Node.js project with Express.js, Sequalize and MySQL.
- Create Sequalize models.
- Write queries with Sequalize.

You will need to have a basic understanding of Node.js and MySQL before you begin.

### Step 1: Create a new Node.js project

First, you need to initialize a new Node.js application. You can use `npm init` command to initialize the new application. 

```
npm init
```

It will prompt a view like below where you need to enter several details like name, version, description and author.

```
package name: (nodejs-sequelize-example)
version: (1.0.0)
description: example-project
entry point: (index.js)
test command:
git repository:
keywords: node.js, orm, sequelize, mysql
author: Layercode
license: (ISC){
   “name”: “nodejs-sequelize-example”,
   “version”: “1.0.0”,
   “description”: “example-project”,
   “main”: “index.js”,
   “scripts”: {
     “test”: “echo \”Error: no test specified\” && exit 1"
   },
   “keywords”: [
     “node.js”, “orm”,“sequelize”, “mysql”
   ],
   “author”: “chameera”,
   “license”: “ISC”
}Is this OK? (yes)
```

### Step 2: Installing Sequalize and other libraries

You need to install Sequalize and other third-party libraries for the project. In this tutorial, we will be using [sequalize](https://www.npmjs.com/package/sequelize) , [express](https://www.npmjs.com/package/express), [cors](https://www.npmjs.com/package/cors) and [mysql2 ](https://www.npmjs.com/package/mysql2)libraries. (You can also use [mysql](https://www.npmjs.com/package/mysql) library instead of [mysql2](https://www.npmjs.com/package/mysql2)).

```javascript
// Express
npm install express --save// Sequalize
npm install sequelize --save// MySQL
npm install mysql2 --save// CORS
npm install cors --save
```

Here is a quick summary of what the above libraries do:

- `express` - for routing, HTTP helpers, and view system.
- `cors` - for providing middleware that allows CORS
- `mysql2` - lets you do [Prepared Statements](https://github.com/sidorares/node-mysql2/tree/master/documentation/Prepared-Statements.md), connect to [MySQL Server](https://github.com/sidorares/node-mysql2/tree/master/documentation/MySQL-Server.md), provides SSL and  [Authentication Switch](https://github.com/sidorares/node-mysql2/tree/master/documentation/Authentication-Switch.md)
- `sequelize` - promise-based [Node.js](https://nodejs.org/en/about/) [ORM tool](https://en.wikipedia.org/wiki/Object-relational_mapping) for [Postgres](https://en.wikipedia.org/wiki/PostgreSQL), [MySQL](https://en.wikipedia.org/wiki/MySQL), [MariaDB](https://en.wikipedia.org/wiki/MariaDB), [SQLite](https://en.wikipedia.org/wiki/SQLite), [DB2](https://en.wikipedia.org/wiki/IBM_Db2_Family) and [Microsoft SQL Server](https://en.wikipedia.org/wiki/Microsoft_SQL_Server)

### Step 3: Setting up the Express server

Express.js is an open-source web application framework for Node.js. It provides various inbuilt features to help developers implement web applications efficiently. So, we will also use Express.js in this example.

As the first step of setting up the Express server, you need to create a new file called **server.js**. Then you can make all the necessary configurations like enabling Cross-Origin Resource Sharing (CORS), parsing or defining the ports in this file using Express.

```javascript
const express = require(“express”);
const cors = require(“cors”);const app = express();var corsOptions = {
  origin: “http://localhost:4200" // URL of the frontend
};app.use(cors(corsOptions));
app.use(express.json()); // parsing application/json
app.use(express.urlencoded({ extended: true })); // parsing application/x-www-form-urlencodedconst PORT = process.env.PORT || 8080; // Portapp.listen(PORT, () => {
   console.log(`Server is running on port ${PORT}.`);
});
```

Once all the configurations are in place, you can open a terminal and test the application using the `node server.js` command. If there are no errors, you should see the message; ``**Server \*is running on port 8000\*``** in the terminal.

### Step 4: Initializing Sequelize and database connection

Now, you need to configure the MySQL database connection and initialize Sequelize.

Here, we have created a new file named `index.js` under the `app/models` folder. This folder will contain all the models we create in the next step, and the `index.js` file is used to initialize Sequelize.

First, you need to import Sequalize and create a new instance by providing database name, username, password host and pool configuration.

```javascript
const Sequelize = require("sequelize");const sequelize = new Sequelize(DATABASE, USER, PASSWORD, {
  host: HOST,
  dialect: mysql,
  operatorsAliases: false,

  pool: {
    max: 5,     
    min: 0,     
    idle: 10000
  }
});const db = {};

db.Sequelize = Sequelize;
db.sequelize = sequelize;
module.exports = db;
```

Then, you can create Sequelize models and import them into this file.

### Step 5: Creating Sequelize models

You can create Sequelize models in the `app/models` folder. Here, we have created a model named `Article` with 4 fields. These fields represent the columns in the MySQL database, and the table will be automatically generated with a primary key.

```javascript
module.exports = (sequelize, Sequelize) => {
  
  const Article = sequelize.define(“article”, {
    
    title: {
       type: Sequelize.STRING
    },
    subtitle: {
       type: Sequelize.STRING
    },
    author: {
       type: Sequelize.STRING
    },
    published: {
       type: Sequelize.BOOLEAN
    }  });  
    return Article;
};
```

Then, you need to import this model to the `index.js` file.

```javascript
...const db = {};
db.Sequelize = Sequelize;
db.sequelize = sequelize;db.articles = require(“./article.model”)(sequelize, Sequelize);
module.exports = db;
```

Finally, import the **index.js file** to **the server.js** file and sync them with the database using Sequalize. Updated **server.js file** will be similar to below:

```javascript
const express = require(“express”);
const cors = require(“cors”);
const app = express();

var corsOptions = {
  origin: “http://localhost:4200"
};

app.use(cors(corsOptions));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
const db = require("./app/models/index.js");
db.sequelize.sync();

const PORT = process.env.PORT || 8080; 

// Port
app.listen(PORT, () => {
   console.log(`Server is running on port ${PORT}.`);
});
```

### Step 6: Writing queries with Sequelize

You can start writing queries with Sequelize. Here, we have created a controller named `articles.controller.js` under the `apps/controllers` folder, and we will guide you through writing basic CRUD operations.

Sequelize provides a set of defined functions to handle CRUD operations.

- [**create**](https://sequelize.org/master/class/lib/model.js~Model.html#static-method-create)**(object)** — Create a new record.
- [**findByPk**](https://sequelize.org/master/class/lib/model.js~Model.html#static-method-findByPk)**(id)** — Find a single record by primary key.
- [**findAll**](https://sequelize.org/master/class/lib/model.js~Model.html#static-method-findAll)**()** — Find all records.
- [**update**](https://sequelize.org/master/class/lib/model.js~Model.html#static-method-update)**(data, where: { id: id })** — Update a record by id.
- [**destroy**](https://sequelize.org/master/class/lib/model.js~Model.html#static-method-destroy)**(where: { id: id })** — Delete a record by id.
- [**destroy**](https://sequelize.org/master/class/lib/model.js~Model.html#static-method-destroy)**(where: {})** — Delete all records.

First, you need to import the relevant models to the controller. Then you can use those models with Sequelize functions to write queries like below:

```javascript
const db = require(“../models”);
const Article = db.articles;
const Op = db.Sequelize.Op;// Create Articleexports.create = (req, res) => {
  const article = {
    title: req.body.title,
    subtitle: req.body.subtitle,
    author: req.body.author,
    published: req.body.published ? req.body.published : false
  };  Article.create(article)
    .then(data => {
      res.send(data);
    })
    .catch(err => {
      res.status(500).send({
        message:
        err.message || "Some error occurred while creating the Tutorial."
     });
    });
};
// Find Single Articleexports.findOne = (req, res) => {
  const id = req.params.id;
  Article.findByPk(id)
    .then(data => {
      if (data) {
        res.send(data);
      } else {
        res.status(404).send({
          message: `Cannot find Article with id=${id}.`
        });
      }
    })
    .catch(err => {
      res.status(500).send({
      message: "Error retrieving Article with id=" + id
    });
  });
};
// Update Articleexports.update = (req, res) => {
  const id = req.params.id;
  Article.update(req.body, {
    where: { id: id }
  })
  .then(num => {
    if (num == 1) {
      res.send({
        message: "Article was updated successfully."
      });
    } else {
      res.send({
        message: `Cannot update Article with id=${id}.`
      });
    }
  })
  .catch(err => {
    res.status(500).send({
      message: "Error updating Article with id=" + id
    });
  });
};
// Delete Articleexports.delete = (req, res) => {
  const id = req.params.id;
  Article.destroy({
    where: { id: id }
  })
  .then(num => {
    if (num == 1) {
      res.send({
        message: "Article was deleted successfully!"
      });
    } else {
      res.send({
        message: `Cannot delete Article with id=${id}.`
      });
    }
  })
  .catch(err => {
    res.status(500).send({
      message: "Could not delete Article with id=" + id
    });
  });
};
```

### Step 7: Defining routes

As the final step, you need to create routes for the above CRUD operations. Here, we have created a route file named **articles.routes.js** under the **apps/routes** folder.

```javascript
module.exports = app => {  
  const articles = require(“../controllers/article.controller.js”);
  
  var router = require(“express”).Router();  // Create a new Article
  router.post(“/”, articles.create);  // Retrieve a single Article with id
  router.get(“/:id”, articles.findOne);  // Update a Article with id
  router.put(“/:id”, articles.update);  // Delete a Article with id
  router.delete(“/:id”, articles.delete);  app.use(‘/api/articles’, router);};
```

The Express router is used to handle routing, and all the endpoints related to articles is prefixed with **api/articles**. Then you need to import these routes in the **server.js** file just before port definition. Updated **server.js** file will look like below:

```javascript
const express = require("express");
const cors = require("cors");
const app = express();var corsOptions = {
  origin: "http://localhost:4200"
};

app.use(cors(corsOptions));
app.use(express.json()); 
app.use(express.urlencoded({ extended: true })); 
const db = require("./app/models/index.js");
db.sequelize.sync();

require(“./app/routes/articles.routes.js”)(app);

const PORT = process.env.PORT || 8080; 

// Port
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}.`);
});
```

That’s basically it. You have successfully created a Node.js application with Sequelize and MySQL. You can restart the application and test the endpoints with [Postman](https://www.postman.com/).

- http://localhost:8080/api/articles — **GET**
- http://localhost:8080/api/articles/:id — **POST, PUT, DELETE**



# Web Dev

Using atomic design to create visual cohesion for your React components

What are CSS Modules and how to use it in React

What's the big deal with GitOps? A quick introduction

How to set up Firebase Authentication in React

Mutation-like immutability in JavaScript using immer.js

Using Sequelize ORM with Node.js & MySQL