DEV Community: Mainak Das

What is PostCSS & Why should we care?

Mainak Das — Sat, 13 Nov 2021 07:57:24 +0000

If we visit the official website for PostCSS we can get an idea about why we might want to use PostCSS in our next project.

A tool for transforming CSS with JavaScript

It also comes with plugins that will enable some unreleased features, minify, etc, and makes our life much easier.

Increase code readability

Add vendor prefixes to CSS rules using values from Can I Use. Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you.

This means that we don't have to apply specific prefixes for supporting Firefox, Chrome, and/ or Safari, PostCSS will do that for us.

Use tomorrow’s CSS today

PostCSS Preset Env, lets you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments, using cssdb.

We can use the future release version of CSS which PostCSS will convert to current CSS syntax so that it can be supported by the browser.

The end of global CSS

CSS Modules means you never need to worry about your names being too generic, just use whatever makes the most sense.

It will generate a class appending a unique serial at the end so that it doesn't collide with other classes, just like styled components

Avoid errors in your CSS

Enforce consistent conventions and avoid errors in your stylesheets with stylelint, a modern CSS linter. It supports the latest CSS syntax, as well as CSS-like syntaxes, such as SCSS.

Get started with PostCSS

Let us start with setting up the package.json along with all the dependencies.

To generate a package.json all we need to do is run the command in the terminal.



npm init -y

Next, we will add the PostCSS dependencies. We need postcss and postcss-cli



npm i postcss postcss-cli

For PostCSS to actually run and also to watch the changes we need to add the scripts to the package.json file

Folder structure



...
"scripts": {
    "dev:watch": "postcss src/style.css --dir public --watch"
  },
...

Using the first plugin

The first plugin that we will be using is postcss-import and if you're familiar with SASS particles then it will make sense as it's the same thing but for CSS.

This plugin can consume local files, node modules, or web_modules.

To install



npm i postcss-import

To use the plugin we need to add a postcss config file at the root of our project

postcss.config.js

Now we can import other CSS files into the styles.css file which then PostCSS will parse and make the styles available in the single output file.

src/styles.css

public/styles.css

We can also minify the CSS to reduce the size of the .css file. For that, we need cssnano plugin



npm i cssnano

Then add the plugin to postcss.config.js file

postcss.config.js

Pretty neat, right?

To enable the future CSS there is also a plugin called PostCSS Preset Env. This plugin will take the unreleased CSS selectors and change it to the present usable CSS. More info at PostCSS Preset Env

Setting up this plugin is a little more work as we need to specify the stage of CSS we want to use. We will use the stage 1 to enable the & selector inside of a class just like SASS.

To install the plugin



npm i postcss-preset-env

Now create a future CSS:

If we look closely, this is not a valid CSS as of now for the current specs. But if we see the output from PostCSS we can see it is changed to the CSS of the current specs:

PostCSS has numerous plugins that you can explore at their plugins website

Even TailwindCSS uses PostCSS under the hood. PostCSS is a very powerful tool and can be a game-changer if it can be used correctly.

Persist Redux State with redux-persist

Mainak Das — Wed, 01 Sep 2021 18:31:04 +0000

When we refresh page in a web-app, the state always resets back to the initial values which in not a good thing when you try to build some large web-app like e-commerce.

We can manually do the state persistent using the native JavaScript localStorage.setItem() method but honestly we will have to write everything from start and we have to maintain the structure of the state.

So here the redux-persist comes into play, with support for redux toolkit, that helps us to persist the state after page refresh.

Redux-Persist

It is a package for persisting redux state when it is connected to the store.
That's all what the package does. Pretty neat!

Without further talking, lets dive into how we actually hook it up with redux toolkit for state/store persisting. We will use a counter app for easier understanding.

Step 1:

Install the package via npm or yarn (I will use npm here):



npm i redux-persist

Step 2:

Add the required imports to the redux store:



//store.js
import storage from 'redux-persist/lib/storage';
import { combineReducers } from 'redux';
import {
    persistReducer,
    FLUSH,
    REHYDRATE,
    PAUSE,
    PERSIST,
    PURGE,
    REGISTER,
} from 'redux-persist';

redux-persist provides different storage to persist data like local storage, session storage or async storge. We will use the local storage.

We need the combineReducers function to group up all the reducers into one so that we can pass it to the redux-persist.

redux-persist dispatches some functions and according to official redux-toolkit guide we need to add those to the ignore list to avoid unnecessary warnings or errors.

Step 3:

We need to create the persist object config that will be stored to the storage:



//store.js
const persistConfig = {
    key: 'counter',
    storage,
};

The key specifies the ID of the persist object and the storage determines the type of storage being used.

Step 4:

Combine the reducers:



//store.js
const reducers = combineReducers({ counter: counterSlice });

Step 5:

Create a persistent reducer:



///store.js
const persistedReducer = persistReducer(persistConfig, reducers);

Step 6:

Assign the persist reducer to the reducers and extra dispatch functions to the ignore list in the middleware, at the end your store will look like this:



//store.js
export default configureStore({
    reducer: persistedReducer,
    middleware: (getDefaultMiddleware) =>
        getDefaultMiddleware({
            serializableCheck: {
                ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
            },
        }),
});

Step 7:

Just like react-redux gives us Provider component that will wrap the whole app, similarly we get PersistGate from redux-persist. We need it to wrap around the whole app:



//index.js
import { persistStore } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';
//...
let persistor = persistStore(store);

ReactDOM.render(
    <React.StrictMode>
        <Provider store={store}>
            <PersistGate persistor={persistor}>
                <App />
            </PersistGate>
        </Provider>
    </React.StrictMode>,
    document.getElementById('root')
);

The persistStore will configure the store object to become compatible when we pass it to the PersistGate component.

Step 8:

With all the connection done, now your react app can persist when when page changes and or the page reloads.

If we check it with redux-logger, we can see that it first checks with PERSIST action and rehydrate the store with the REHYDRATE action.

Wrapping Up

redux-persist is a great library for obvious reason, but it's way old and outdated, last update was at 2019 with several PR and issues at GitHub. I hope they revive the project and fix the necessary issues. Meanwhile, if you know any alternatives please let me know in the comments.

Ditch redux, Use reduxjs/toolkit

Mainak Das — Sat, 24 Jul 2021 10:52:59 +0000

Redux is a state management for different libraries like Vue, Angular, React and even vanilla JavaScript, etc. For the past few years, people and companies are considering Redux as their first and foremost priority library for managing states inside of a web application.

Why Redux?

It mainly gained its fame for particularly two things:

Redux helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

That means no unintentional re-rendering of the components and no prop drilling to child components.

Centralizing your application's state and logic enables powerful capabilities like undo/redo, state persistence, and much more.

Change the state of the application from any of the child components no matter how deep they are nested.

But for gaining so much power, we need to take some precautions. Those are:

Do Not Mutate State

We will never mutate the state, no matter what our needs are. Instead, we can take snapshots and manipulate that. That means we can't use functions like array.push().

Only Store Per-App

We will never have more than one global store.

The Reducer Will Always be Pure Functions And Must Not Have Any Side Effects

We will never always return an object from the reducers and it will never perform asynchronous tasks. Later, this problem is solved by redux-thunk which checks, executes any async functions, and returns a plain object from that response.

Like all things, it has pros and cons too.

As with the pros, redux gained fame for being one of the best state management libraries, but lately, it was very difficult to maintain because of the boilerplate as we have to write all the reducers, action constants, action creators, and the store. Also, there are a lot of files for each collection of reducers.

Cons of redux:

In a very large web app, where we have to fetch data constantly from an API, it's not always easy to add those to existing data without accidentally mutating the state.
Boilerplate codes

Action Constants

const ADD_TODO = 'ADD_TODO';

Action Creators

const addTodo = (title) => {
  return {
           type: ADD_TODO,
           payload: title,
         }
}

Reducers Without Mutating State

const todoReducer = (state=[],action) => {
  switch(action.type){
    case ADD_TODO:
      return [action.payload,...state];
    default:
      return state;
  }
}

Combine Reducers

rootReducer = combineReducers({todo: todoReducer})

For some simple tasks we needed to keep a lot of stuff in mind and on top of that we had to follow a massive boilerplate.

Reduxjs/Toolkit aka Redux Starter Kit

At the end of 2019, taking people's opinion on the problem of managing a redux application is a big challenge the developers came out with Redux Starter Kit which after named as reduxjs/toolkit which was supposed to solve the problems we were having with default redux applications.

Includes utilities to simplify common use cases like store setup, creating reducers, immutable update logic, and more.

We no longer need to write out action creators (apart from thunk functions) and actions constants, it will be generated by the toolkit itself.

Takes inspiration from libraries like Immer and Autodux to let you write "mutative" immutable update logic, and even create entire "slices" of state automatically.

Finally, we can mutate the state (not really). Redux uses Immer in the background to convert our mutate code to immutable code.

Provides good defaults for store setup out of the box, and includes the most commonly used Redux addons built-in.

No longer do we need to add packages like redux-thunk and redux-devtools as it is already included in the toolkit.

It solves most of the problems and made redux much easier to write.

Redux Toolkit gives us a hook createSlice() in which we can mention our action name, initials state, reducers and the state for async data fetching i.e pending, fulfilled, or rejected.

import { createSlice } from '@reduxjs/toolkit'

const initialState = []

const todoSlice = createSlice({
  name: 'todo',
  initialState,
  reducers: {
    addTodo: (state,action) => {
      state.push(action.payload)
    },
  },
})

export const todoActions = todoSlice.actions
export default todoSlice.reducer

We wrote the code that would have took 2-3 files in redux is just finished in one file with not more than 15 lines of code. Also, we mutated the state but redux didn't throw any error as it is being converted to immutable code in the background.

Async Data Fetch

Reduxjs/toolkit also provides a hook createAsyncThunk() for async thunk functions which we have to manually export action.

const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    const response = await userAPI.fetchById(userId)
    return response.data
  }
)

We can trigger some side-effects when the request is pending, rejected or fulfilled

const usersSlice = createSlice({
  name: 'users',
  initialState: { entities: [], loading: 'idle' },
  reducers: {
    // standard reducer logic, with auto-generated action types per reducer
  },
  extraReducers: {
    [fetchUserById.rejected]:(state,action) => {
      //Some functions or notifications if there is an error
    },
    [fetchUserById.pending]:(state,action) => {
      //Some functions or notifications if req is going through
    },
    [fetchUserById.fulfilled]:(state,action) => {
      //Some functions or notifications is res is back as successful
    },
  },
})

So, we can say reduxjs/toolkit is a major improvement over the default redux.

Authentication with credentials using Next-Auth and MongoDB - Part 2

Mainak Das — Thu, 15 Jul 2021 18:03:22 +0000

In the last part, I created the signup, login and route along with the and the connection of frontend to the backend. Also, I created the sign-in logic using next-auth.

In this part, I'll mainly focus on the frontend connection using next-auth.

Posting sign in logic

The next-auth client gives us both signIn() and signOut() hooks that will make our coding a whole lot easier and our only work is to provide the authentication type we will use to sign-in (in our case i.e credentials).

Using the signIn() method ensures the user ends back on the page they started on after completing a sign-in flow. It will also handle CSRF Tokens for you automatically when signing in with email.

The sign-in hook will always return a Promise containing an error key:value pair that will tell us if the authentication is successful or not.

You can look into more detail here.

import { signIn } from 'next-auth/client';
//...
const status = await signIn('credentials', {
                redirect: false,
                email: email,
                password: password,
            });
            console.log(status);

And that's our sign-in logic in place.

But wait, it's not all

Suppose, you're signed in but trying to access the route .../auth which normally shows us the sign-in or sign-up form.

To protect that route, next-auth also gives us a getSession() hook to check for the session and determine whether a user is signed in or not.

import { getSession } from 'next-auth/client';

NextAuth.js provides a getSession() method which can be called a client or server-side to return a session.

It calls /api/auth/session and returns a promise with a session object, or null if no session exists.

More info here

Now, let's add this to our `.../auth` route:

We will use useEffect() and useState() hooks to tell user that something is loading. As getSession() returns a promise we need a then chain for getting the session object. If there is a session we will use next/router to redirect the users to / page.

//...
const [loading, setLoading] = useState(true);
    const router = useRouter();
    useEffect(() => {
        getSession().then((session) => {
            if (session) {
                router.replace('/');
            } else {
                setLoading(false);
            }
        });
    }, []);
    if (loading) {
        return <p>Loading...</p>;
    }
//...

Protect a secured route

On the change password page, we need an authenticated user to do the action, and if any unauthenticated user visits ../profile they will be redirected to the auth page for sign-in or sign-up.

The getSession() hook can also be used on the server to check for sessions and do any redirect based on that.

We will use the hook along with getServerSideProps for checking the session of the user trying to access.

NOTE

When calling getSession() server side, you need to pass {req} or context object.

For securing `.../profile` page:

export async function getServerSideProps(context) {
    const session = await getSession({ req: context.req });
    if (!session) {
        return {
            redirect: {
                destination: '/auth',
                permanent: false,
            },
        };
    }
    return {
        props: { session },
    };
}

With all the sign-in and sign-up logic in place, now we will look into the Header for showing and hiding the tabs based on user sign-in or not. And finally the sign-out logic.

Dynamic navbar tabs

The useSession hook from next-auth is the best way to check for an authenticated user. The hook gives us a session and loading state that will be updated based on fetching the users' session.

import { useSession } from 'next-auth/client';

We will use the session to show and hide the tabs.

function MainNavigation() {
    const [session, loading] = useSession();
    return (
        <header className={classes.header}>
            <Link href='/'>
                <a>
                    <div className={classes.logo}>Next Auth</div>
                </a>
            </Link>
            <nav>
                <ul>
                    {!session && !loading && (
                        <li>
                            <Link href='/auth'>Login</Link>
                        </li>
                    )}
                    {session && (
                        <li>
                            <Link href='/profile'>Profile</Link>
                        </li>
                    )}
                    {session && (
                        <li>
                            <button >Logout</button>
                        </li>
                    )}
                </ul>
            </nav>
        </header>
    );
}

export default MainNavigation;

After noticing a bit we will see there's a flickering in the navbar tabs. That's because it's checking for the session twice. Next-auth has a workaround for this also. It provides a <Provider> component that shares the session object across multiple components and as a result, useSession doesn't have to check for session twice.

import { Provider } from 'next-auth/client';

Using the supplied React <Provider> allows instances of useSession() to share the session object across components, by using React Context under the hood.

This improves performance, reduces network calls, and avoids page flicker when rendering. It is highly recommended and can be easily added to all pages in Next.js apps by using pages/_app.js.

We can pass the session object to the <Provider> component as a prop to avoid checking twice.

If you pass the session page prop to the <Provider> you can avoid checking the session twice on pages that support both server and client-side rendering.

Let's add this to our `_app.js`:

<Provider session={pageProps.session}>
    <Layout>
      <Component {...pageProps} />
    </Layout>
</Provider>

Now, the header will no longer flicker.

Let's check the sign-out logic.

Sign Out

Next-auth also gives us a signOut() hook that we can attach with any element onClick() prop and it will just sign us out. It's as easy as that.

More info here.

<li>
    <button onClick={signOut}>Logout</button>
</li>

And that's how we implement authentication with credentials in Next.js.

Authentication with credentials using Next-Auth and MongoDB - Part 1

Mainak Das — Tue, 13 Jul 2021 15:32:35 +0000

Authentication can be a bit sketchy sometimes as we have to keep so much in mind, like session management, protecting several routes/pages, hashing passwords, validating user's credentials during sign-up and sign-in. Also, creating an authentication from scratch can be a lot of work.

If you're working with Next.JS, then you should try using Next-Auth as it provides many authentication schemes like JWT, cookie, etc. And also using third-party authentication providers like Google, Facebook, and (yes!) even with Discord.

Also, next-auth helps in session management so that the server can't be tricked easily.

Providers aside, we will be looking into setting up authentication based on users' credentials like email and password.

Things to consider during authentication

Client form validation
Server form value validation
Hashing users' passwords during sign-up for the obvious reason
Storing into a database
Checking of the hashed password during sign-in
Protecting routes for the non-authenticated user
Proper error handling for both frontend and backend

Packages we need

I am using Next.js as the framework for the demonstration.

Along with that

next-auth for authentication
bycryptjs for hashing the passwords
mongodb for MongoDB functions

NOTE

This is not a frontend tutorial so I'll not be covering any notifications on successful events and/or CSS stuff.

Website scaffolding

The website is very simple consisting of 4 pages and obviously a navbar for better demonstration:

Homepage

Change password page

Install packages and setting up database

npm i next-auth mongodb bcryptjs

During install, we will sign up for a free MongoDB account on their website.

Now, we can connect to that database using the connect code from their dashboard. We should use the MongoURL from inside of a .env.local file for more refined and secure code.

Sign Up Route

Before sign-in, users need to signup for that particular website. NextJS provides us to write API codes in the pages/api folder using the NodeJS environment. It will also follow the same folder-structured route.

For the sign-up route, we will create a route pages/api/auth/signup.js. We also need to make sure that only the POST method is accepted and nothing else.

Things to do in the signup route

Get users credentials
Validate
Send error code if any
Connect to database
Check if any existing user is present with the same email address
Hash password using bycrypt js

bycrypt js returns a Promise during hashing of password so we need to await for the response.

password: await hash(password, 12)
//hash(plain text, no. of salting rounds)

If all goes well, send a response and close connection with the database

import { MongoClient } from 'mongodb';
import { hash } from 'bcryptjs';
async function handler(req, res) {
    //Only POST mothod is accepted
    if (req.method === 'POST') {
        //Getting email and password from body
        const { email, password } = req.body;
        //Validate
        if (!email || !email.includes('@') || !password) {
            res.status(422).json({ message: 'Invalid Data' });
            return;
        }
        //Connect with database
        const client = await MongoClient.connect(
            `mongodb+srv://${process.env.MONGO_USER}:${process.env.MONGO_PASS}@${process.env.MONGO_CLUSTER}.n4tnm.mongodb.net/${process.env.MONGO_DB}?retryWrites=true&w=majority`,
            { useNewUrlParser: true, useUnifiedTopology: true }
        );
        const db = client.db();
        //Check existing
        const checkExisting = await db
            .collection('users')
            .findOne({ email: email });
        //Send error response if duplicate user is found
        if (checkExisting) {
            res.status(422).json({ message: 'User already exists' });
            client.close();
            return;
        }
        //Hash password
        const status = await db.collection('users').insertOne({
            email,
            password: await hash(password, 12),
        });
        //Send success response
        res.status(201).json({ message: 'User created', ...status });
        //Close DB connection
        client.close();
    } else {
        //Response for other than POST method
        res.status(500).json({ message: 'Route not valid' });
    }
}

export default handler;

Now that our signup route is in place, it's time to connect the frontend to the backend.

Posting Sign Up form

import { signIn } from 'next-auth/client';
//...
const onFormSubmit = async (e) => {
        e.preventDefault();
        //Getting value from useRef()
        const email = emailRef.current.value;
        const password = passwordRef.current.value;
        //Validation
        if (!email || !email.includes('@') || !password) {
            alert('Invalid details');
            return;
        }
        //POST form values
        const res = await fetch('/api/auth/signup', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                email: email,
                password: password,
            }),
        });
        //Await for data for any desirable next steps
        const data = await res.json();
        console.log(data);
    };
//...

With the Sign Up login in place, let's work with the Sign In logic.

Sign In using Next-Auth

Next-Auth provides us with Client API as well as REST API

The NextAuth.js client library makes it easy to interact with sessions from React applications.

NextAuth.js exposes a REST API which is used by the NextAuth.js client.

We will use both for signing in the users.

To add NextAuth.js to a project create a file called [...nextauth].js in pages/api/auth.

All requests to /api/auth/* (signin, callback, signout, etc) will automatically be handed by NextAuth.js.

With this help from next-auth, we need to implement our own sign-in logic for checking users stored on the database.

Things to do in the sign-in route:

Configure to use JWT
Specify provider from next-auth (Credentials)

For more providers, check

Connect to database
Check if the user is present
Send error response if any
Compare hashed password with the password stored on DB
Send response
Close DB connection

In [...nextauth].js:

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
import { MongoClient } from 'mongodb';
import { compare } from 'bcryptjs';

export default NextAuth({
    //Configure JWT
    session: {
        jwt: true,
    },
    //Specify Provider
    providers: [
        Providers.Credentials({
            async authorize(credentials) {
                //Connect to DB
                const client = await MongoClient.connect(
                    `mongodb+srv://${process.env.MONGO_USER}:${process.env.MONGO_PASS}@${process.env.MONGO_CLUSTER}.n4tnm.mongodb.net/${process.env.MONGO_DB}?retryWrites=true&w=majority`,
                    { useNewUrlParser: true, useUnifiedTopology: true }
                );
                //Get all the users
                const users = await client.db().collection('users');
                //Find user with the email  
                const result = await users.findOne({
                    email: credentials.email,
                });
                //Not found - send error res
                if (!result) {
                    client.close();
                    throw new Error('No user found with the email');
                }
                //Check hased password with DB password
                const checkPassword = await compare(credentials.passowrd, result.passowrd);
                //Incorrect password - send response
                if (!checkPassword) {
                    client.close();
                    throw new Error('Password doesnt match');
                }
                //Else send success response
                client.close();
                return { email: result.email };
            },
        }),
    ],
});

Tailwind's class based dark mode in Next.JS

Mainak Das — Fri, 09 Jul 2021 19:55:55 +0000

Tailwindcss

One of the best utility-based CSS frameworks I've ever used, period. It provides all the necessary CSS properties with values and we ourselves have to design. It's much more awesome than Bootstrap or ChakraUI as it doesn't push us to use the component structure.

Because Tailwind is so low-level, it never encourages you to design the same site twice. Even with the same color palette and sizing scale, it's easy to build the same component with a completely different look in the next project.

How to enable class-based dark mode for Next.Js?

In the tailwindcss docs for dark mode, it provides only a basic snippet about what to write on page load for a specific page but it doesn't provide any example or docs for the framework.

To enable class-based dark mode we first have to override the value of the darkMode key from false to 'class' in tailwind.config.js file.

module.exports = {
darkMode: 'class',
// ...
}

We have to edit the _app.js file to check if dark mode is applied or not before mounting the actual component to the DOM. For that, we will use useEffect from react just before returning the component.

In _app.js:

import '../styles/globals.css';
import { useEffect } from 'react';
function MyApp({ Component, pageProps }) {
    useEffect(() => {
        if (
            localStorage.theme === 'dark' ||
            (!('theme' in localStorage) &&
                window.matchMedia('(prefers-color-scheme: dark)').matches)
        ) {
            //check if there is any key for theme in local storage and if the system color theme is dark
            document.documentElement.classList.remove('light'); //OPTIONAL - remove light from the html document if any
            document.documentElement.classList.add('dark'); // add dark to the <html></html> itself as <html class='dark'></html>
        } else {
            document.documentElement.classList.remove('dark'); // remove dark from the html document if any
            document.documentElement.classList.add('light'); //OPTIONAL - add light to the <html></html> itself as <html class='light'></html>
        }
    },[]);
    return <Component {...pageProps} />;
}

export default MyApp;

This will add class to html before component mounting.

We also need a theme toggler button. Add our desired toggle button and we have to keep in mind that we need two buttons one for dark and one for light mode

In ThemeSwitch.jsx:

import { useEffect, useState } from 'react';

const isDark = () => //Function that will return boolean if any of the condition is satisfied
    (localStorage && localStorage.theme === 'dark') || //Condition 1 - has local storage and theme = dark in local storage is found
    (!('theme' in localStorage) &&
        window.matchMedia('(prefers-color-scheme: dark)').matches); //Condition 2 - No theme key in local storage but media color scheme is dark

const getTheme = (isDark) => (isDark ? 'dark' : 'light'); //Function to return 'dark' or 'light' string

const ThemeSwitch = () => { 
    const [darkMode, setDarkMode] = useState(false); //State for holding theme status

    const toggleMode = () => { //onClick handler for changing theme on button press
        localStorage.theme = getTheme(!darkMode); //setting up local storage theme value
        if (localStorage.theme === 'dark') { // If theme is 'dark'
            document.documentElement.classList.remove('light'); // remove 'light' from html class
            document.documentElement.classList.add('dark'); // add 'dark' to html class
        } else { // if not 'dark'
            document.documentElement.classList.remove('dark'); // remove 'dark' from html class
            document.documentElement.classList.add('light'); //add 'light' to html class
        }
        setDarkMode(!darkMode); //set dark mode state to opposite of initial value
    };

    useEffect(() => {
        setDarkMode(isDark()); //before page mount set the value of dark mode by observing theme in local storage
    }, []);

    const darkModeActive =
        process.browser && document.documentElement.classList.contains('dark'); // returns true if its a client and 'dark' is present in html
        // process.browser is deprecated can be written as typeof window === 'undefined'
    return (
        <>
            <button className='w-10 h-10 focus:outline-none' onClick={toggleMode}>
                <span className='sr-only'>Color mode switch button</span>
                {darkModeActive ? ( //switch mode icon according to html class 'dark' or 'light'
                    // Light Icon Svg
                ) : (
                    // Dark Icon Svg
                )}
            </button>
        </>
    );
};
export default ThemeSwitch;

Now you can add the theme switch in the navbar of your layout and can change the theme on any page.

Note: Don't forget to add dark:some-value in the class names if you want manual control over CSS.

CSS Specificity

Mainak Das — Fri, 09 Jul 2021 11:17:51 +0000

Specificity in CSS

CSS Specificity is the set of rules applied to CSS selectors in order to determine which style is applied to an element. The more specific a CSS style is, the higher the point value it accrues, and the likelier it is to be present on the element’s style.

Example:

<a class="container">Some text</a>

In CSS, we can specify like:

.container {
  color: blue;
}

also, we can target the paragraph tags like:

a {
  color: red;
}

By understanding how styles are applied, we can ensure the styles we want to display are being rendered.

By taking CSS Specificity into account, we ensure that our code is organized, and our selectors won’t conflict with one another.

Specificity Rules

CSS style implemented by referencing outside stylesheet that has the lowest precedence and is overridden by Internal and inline CSS.
Internal CSS is overridden by inline CSS.
Inline CSS has the highest priority and overrides all other selectors.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <style type="text/css">
      h1 {
        background-color: black;
        color: red;
      }

      h2 {
        color: goldenrod;
      }
    </style>
  </head>

  <body>
    <h1>
      The specifity of internal CSS written on HTML style block is more than
      that of external stylesheet
    </h1>
    <h2 style="color: pink;">
      Inline styles overides all other css styles
    </h2>
  </body>
</html>

Output:

CSS Specificity Hierarchy

All selectors have a position in the Hierarchy tree of specificity.

High -> Low :

Inline style : Connected directly to the element to be styled.
Example: <h1 style=”color: #ffffff;”>
IDs: ID is a unique identifier for an element.
Example: #navbar
Classes, attributes and pseudo-classes: Includes .classes, [attributes] and pseudo-classes like :hover, :focus etc.
Elements and pseudo-elements: Includes element names and pseudo-elements like h1, div, :before and :after.

Calculate Specificity

Start with 0, then add 1000 for style attribute, add 100 for each of the IDs, then add 10 for each of the attributes attribute, class, or pseudo-class, and finally add 1 for each of the element name or pseudo-element.

h1
#content h1
<div id="content"><h1 style="color: #ffffff">Heading</h1></div>

The specificity of h1 is 1 (one element)
The specificity of #content h1 is 101 (one ID reference and one element)
The specificity of <div id="content"><h1 style="color: #ffffff">Heading</h1></div> is 1000 (inline styling)

As 1 < 101 < 1000, the third rule (C) has a greater level of specificity, and hence it will be implemented.

How Does it Work?

Type Selectors & Pseudo-Element

Example:

p {
} /* 0 0 0 1 */
span {
} /* 0 0 0 1 */
p span {
} /* 0 0 0 2 */
p > span {
} /* 0 0 0 2 */
div p > span {
} /* 0 0 0 3 */

Class Selectors, attribute selectors, and pseudo-class selectors

Example:

.name {
} /* 0 0 1 0 */
.users .name {
} /* 0 0 2 0 */
[href$='.pdf'] {
} /* 0 0 1 0 */
:hover {
} /* 0 0 1 0 */

ID selectors:

Example:

#name {
} /* 0 1 0 0 */
.user #name {
} /* 0 1 1 0 */
#name span {
} /* 0 1 0 1 */

Also, there is in-line styling which doesn’t use any CSS rather specify the style in-line with the HTML.

Example:

<p style="color: red">Test</p> /* 1 0 0 0 */

!important Rule

There is another property !important that doesn’t follow any specificity rather it is applied overriding all the CSS properties and specificities.

p {
  font-size: 20px !important;
}

Tips on CSS Specificity

The universal selector (*) has no specificity value (0,0,0,0)
Pseudo-elements (e.g. :first-line) get 0,0,0,1 unlike their psuedo-class brethren which get 0,0,1,0
There’s a highly debatable topic related to using !important it overrides all the CSS values. It is also a good practice not to use any id selectors and !important but class selectors.
The pseudo-class : not() adds no specificity by itself, only what’s inside its parentheses.

How to Setup Tailwind with PurgeCSS and PostCSS?

Mainak Das — Thu, 08 Jul 2021 10:02:37 +0000

Tailwind Installation

We have to install tailwind via npm or yarn:

npm init -y
npm install tailwindcss

Create the Configuration File

We have to create a configuration for a tailwind to use:

npx tailwind init

This will create a file named tailwind.config.js in the root location of our project folder.

PostCSS Config Tailwind

Tailwind needs PostCSS (PostCSS is a software development tool that uses JavaScript-based plugins to automate routine CSS operations) and autoprefixer (Autoprefixer will use the data based on current browser popularity and property support to apply prefixes for you) to work. So we need to apply that in the postcss.config.js file:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer')
  ]
}

Note: If the postcss.config.js doesn’t exist, we have to create one.

We need to install PostCSS and autoprefixer from npm too:

npm install autoprefixer
npm install -g postcss-cli

How to Create the Tailwind CSS File?

Now, we will create a CSS file (style.css) and add these lines at the top:

@tailwind base;
@tailwind components;
@tailwind utilities;

Create the build command

We need to specify a build command that will help us to generate the actual CSS file after compiling with PostCSS and autoprefixer. For that, we need to add the command to the package.json file at scripts like:

"scripts": {
  "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css"
}

Build Tailwind

For building the final CSS file we need to run the command npm run build in the root of the project folder.

The resulting file is in static/dist/tailwind.css

Automatically regenerate the CSS upon file changes

There is a great npm package that will compile our CSS in real-time without running the build command every time after edits. For that we need to install the watch using the command:

npm install watch

Then we need to edit the package.json file at scripts like:

"scripts": {
  "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css",
  "watch": "watch 'npm run build:css' ./layouts"
}

Now for running we simply need to execute the command npm run watch and it’s all good.

Trim the File Size

If we check the final CSS file i.e after building, we can see that it’s huge in size. That large file is never appropriate for web pages. For that, we can actually trim the file to make it smaller than the original.

We need to install two more npm packages:

npm install cssnano
npm install @fullhuman/postcss-purgecss

What is PurgeCSS?

PurgeCSS is a development tool used for removing the unused CSS in a Project. It is the default library to control the Tailwind CSS Bundle Sizes. It removes unused styles and optimizes CSS Build Sizes.

How to Remove Unused Classes from Tailwind with PurgeCSS?

To remove unused CSS we use the following code. Then we add this to our PostCSS configuration file postcss.config.js:

const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')
module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    cssnano({
      preset: 'default'
    }),
    purgecss({
      content: ['./layouts/**/*.html', './src/**/*.vue', './src/**/*.jsx'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ]
}

In development, avoid too much processing

In development, we can use this just to add prefixes and remove comments. We need to edit the postcss.config.js like:

const purgecss = require('@fullhuman/postcss-purgecss')
const cssnano = require('cssnano')
module.exports = {
  plugins: [
    require('tailwindcss'),
    process.env.NODE_ENV === 'production' ? require('autoprefixer') : null,
    process.env.NODE_ENV === 'production'
      ? cssnano({ preset: 'default' })
      : null,
    purgecss({
      content: ['./layouts/**/*.html', './src/**/*.vue', './src/**/*.jsx'],
      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
    })
  ]
}

CSS3 selectors Cheat Sheet

Mainak Das — Tue, 06 Jul 2021 19:52:04 +0000

CSS Selectors

CSS selectors are utilized to select the content you need to style. In CSS Rule Set, Selectors are the part. CSS selectors select HTML elements as per their id, class, type, attribute, etc.

CSS selectors are divided into five categories:

Simple/Basic selectors (select elements based on name, id, class)
Combinator selectors (select elements based on a specific relationship between them)
Pseudo-classes selectors (select elements based on a certain state)
Pseudo-elements selectors (select and style a part of an element)
Attribute selectors (select elements based on an attribute or attribute value)

Simple Selectors

Selector	Example	Example description
#id	#firstname	Selects the element with id="firstname"
.class	.intro	Selects all elements with class="intro"
element.class	p.intro	Selects only <p> elements with class="intro"
*	*	Selects all elements
element	p	Selects all <p> elements
element,element,..	div, p	Selects all <div> elements and all <p> elements

Basic Selectors

Selector	Description	Example
element	Type selector. Matches an element.	p { color: red } matches paragraphs
.class	Class selector. Matches the value of anclassattribute.	.warning { color: red } matches elements containing class="warning"
#id	ID selector. Matches the value of an id attribute.	#warning { color: red } matches elements containing id="warning"
*	Universal selector. Matches everything.	* { color: red } matches everything

Attribute selectors

Selector	Description	Example
[attribute]	Matches elements containing a given attribute.	a[href] { color: red; } matches a elements with an href attribute
[attribute="x"]	Matches elements containing a given attribute with a given value.	a[href="/x/"] {color: red;} matches a elements with the attribute and value href="/x/"
[attribute~="x"]	Matches elements containing a given attribute with a value that contains a sub-value within a space-separated list.	abbr[title~="x"] { color: red;} matches abbr elements with a title that contains 'x' (such as in title="Cascading Style Sheets")
[attribute\|="x"]	Matches elements containing a given attribute with a value that contains a sub-value within a hyphen-separated list. Matches html elements with a lang attribute that contains 'en' (such as in lang="en-gb")
[attribute^="x"]	Matches elements containing a given attribute with a value that starts with something.	a[href^="http://"] {color: red;} matches a elements with an href attribute, the value of which begins with 'http://'
[attribute$="x"]	Matches elements containing a given attribute with a value that ends with something.	a[href$=".com"] {color: red; } matches a elements with an href attribute, the value of which ends with '.com'
[attribute*="x"]	Matches elements containing a given attribute with a value that contains something.	a[href*="hdog"] {color: red;} matches a elements with an href attribute, the value of which contains 'hdog'

Pseudo-classes Selectors

Selector	Description	Example
:link	Matches a link that has not been visited.	a:link { color: blue }
:visited	Matches a link that has been visited.	a:visited { color: purple }
:active	Matches an element that is being activated, such as a link being clicked on.	a:active { color: red }
:hover	Matches an element whose box is being hovered over by a cursor.	a:hover { text-decoration: none }
:focus	Matches an element that has focus, such as one that has been tabbed to.	a:focus { border: 1px solid yellow }
:target	Matches an element that has been linked to (via<a href="#x"…,for example).	h2:target { color: red } matches a second-level heading that has been linked to
:lang()	Matches an element of a given language.	p:lang(fr) { color: red } matches paragraphs that are declared, or otherwise considered, as French
:first-child	Matches the first child of an element.	p:first-child { color: red } matches the first child, if it is a paragraph, of an element
:last-child	Matches the last child of an element.	div p:last-child { color: blue } matches the last child, if it is a paragraph, of an element
:first-of-type	Matches the first sibling of its type in an element.	li:first-of-type { color: red } matches the first instance of a list item inside an element
:last-of-type	Matches the last sibling of its type in an element.	li:last-of-type { color: blue } matches the last instance of a list item inside an element
:nth-child()	Matches an element that is the ordinal number child of its parent.	p:nth-child(3) { color: red } matches the third child, if it is a paragrpah, of an element
:nth-last-child()	Matches an element that is the ordinal number child, in reverse order, of its parent.	p:nth-last-child(2) { color: blue } matches the next-to-last child, if it is a paragraph, of an element
:nth-of-type()	Matches an element that is the ordinal number sibling of its type.	li:nth-of-type(5) { color: red } matches the fifth instance of a list item inside an element
:nth-last-of-type()	Matches an element that is the ordinal number sibling, in reverse order, of its type.	li:nth-of-type(5) { color: red } matches the next-to-last instance of a list item inside an element
:only-child	Matches an element if it is the only child of its parent.	article p:only-child { color: red } matches a paragraph if it is the only child of an article element
:only-of-type	Matches an element if it is the only sibling of its type.	article aside:only-of-type { color: blue } matches an aside element if it is the only aside element in an article element
:empty	Matches an element with no children, or content.	td:empty { border-color: red } matches table data cells with nothing in 'em
:root	Matches the root element of a document. This will be the html element in HTML.	:root { background: yellow }
:enabled	Matches form control elements that are not disabled.	input:enabled { border-color: lime } matches input elements that are not disabled
:disabled	Matches form control elements that are disabled.	input:enabled { border-color: red } matches input elements that are disabled
:checked	Matches a radio or checkbox type input element that is checked.	input:checked { outline: 3px solid yellow } matches checked input elements
:not()	Negotiation pseudo-class. Matches an element that does not match a selector.	p:not(:first-child) { color: orange } matches paragraphs that are not first children

Pseudo-elements Selectors

Selector	Description	Example
::first-line	Matches the first textual line in an element.	p::first-line { font-weight: bold } matches the first line in a paragraph
::first-letter	Matches the first letter in an element.	p::first-letter { font-size: 2em } matches the first letter in a paragraph
::before	Used with the content property to generate content before the initial content of an element.	h1::before { content: "*" } places an asterisk at the start of a top-level heading
::after	Used with the content property to generate content after the initial content of an element.	h1::after { content: "+" } places a plus-sign at the end of a top-level heading

Combinator Selectors

Selector	Description	Example
selector selector	Descendant combinator. Matches elements that are descendants of another element.	aside p { color: red } matches paragraphs inside elements containing class="warning"
selector > selector	Child combinator. Matches elements that are children of another element.	.warning > p { color: red } matches paragraphs that are children of elements containing class="warning"
selector + selector	Adjacent sibling combinator. Matches elements that immediately follow another element.	h1 + * { color: red } matches the first element to follow a top-level heading
selector ~ selector	General sibling combinator. Matches elements that follow another element.	h2 ~ p { color: red } matches every paragraph that follows a second-level heading

CSS Group Selector

The grouping selector in CSS picks all the HTML elements with the same style definitions.

h1 { 
  text-align: center; 
  color: red; 
} 
h2 { 
  text-align: center; 
  color: red; 
} 
p { 
  text-align: center; 
  color: red; 
}

To minimize the code, just apply the CSS grouping selectors. Simply group the selectors by separating each selector with a comma. Let's see the following code after CSS Grouping Selectors:

h1, h2, p { 
  text-align: center; 
  color: red; 
}

Centering in CSS - Horizontally, Vertically

Mainak Das — Tue, 06 Jul 2021 07:39:21 +0000

Centering Things in CSS is a bit hard. The problem is which way to reach for among the different ways available to Center Elements in CSS. In this tutorial, I have explained how to center an element with CSS Vertically, Horizontally, at Block Levels.

How to center horizontally?

Centering elements horizontally is quite simple compared to vertical centering. We have present different ways to center the elements horizontally. To change the text to center horizontally is quite simple. You can simply set the text-align property to center in order to center an element horizontally.

p { 
  text-align: center; 
}

How to center horizontally with flexbox?

The modern way to center anything is to use Flexbox rather than going with the text.

#mysection { 
  display: flex; 
  justify-content: center; 
}

Any element within my section will be centered horizontally by using the above code. There is an alternative method to go with if you don't want to use the flexbox.

How to center horizontally using CSS margin auto?

Anything which is not text can be centered by applying an automatic margin on the left and right and set the width of the element.

section { 
  margin: 0 auto; 
  width: 50%; 
}

The above margin: 0 auto; is a shorthand for

section { 
  margin-top: 0; 
  margin-bottom: 0; 
  margin-left: auto; 
  margin-right: auto; 
}

Do remember to set the item to display: block if it is an inline element.

How to Center Vertically using Flexbox?

Centering an element vertically can be a difficult task. Flexbox gives us a simple way to center alignment vertically.

#mysection { 
  display: flex; 
  align-items: center; 
}

Any element within my section will be centered vertically.

How to Center Both Vertically and Horizontally using Flexbox?

You can combine the flexbox techniques to center both vertically and horizontally for an element in the page.

#mysection { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

How to Center Vertically and Horizontally using CSS Grid?

We can perform the same using CSS Grid:

body { 
  display: grid; 
  place-items: center; 
  height: 100vh; 
}

3 ways to display two divs side by side

Mainak Das — Mon, 05 Jul 2021 08:59:41 +0000

The most common and traditional way (inline-block)

The most common way to place two divs side by side is by using inline-block css property.

HTML:



<div class='parent'>
  <div class='child'>child 1</div>
  <div class='child'>child 2</div>
</div>

CSS:



.parent {
  border: 1px solid black;
  margin: 1rem;
  padding: 2rem 2rem;
  text-align: center;
}
.child {
  display: inline-block;
  border: 1px solid red;
  padding: 1rem 1rem;
  vertical-align: middle;
}

The output of the above styling is:

The inline-block property on the parent placed the two divs side by side and as this is inline-block the text-align feature worked here just like an inline element does.

In child we used verticle-align:middle to vertically align the divs taking their center into consideration.

Also we can make space between the two divs by adding margin-right to the first div and/or margin-left to the second div.

There are several ways to place HTML divs side-by-side. The simplest and most efficient way to do this is to make use of a handful of CSS properties (i.e., float, grid, and flex).

Float Method

In the float method, we will be using the following HTML markup:

HTML:



<div class="float-parent-element">
  <div class="float-child-element">
    <div class="red">Float Column 1</div>
  </div>
  <div class="float-child-element">
    <div class="yellow">Float Column 2</div>
  </div>
</div>

The .float-parent-element is simply the parent element that contains both .float-child-element elements.

To get the divs side by side, we will use the following CSS rules:

CSS:



.float-parent-element { 
    width: 50%; 
} 
.float-child-element { 
    float: left; 
    width: 50%; 
} 
.red { 
    background-color: red; 
    margin-left: 50%; 
    height: 100px; 
} 
.yellow { 
    margin-left: 50%; 
    height: 100px; 
    background-color: yellow; 
}

The resulting code will look like this:

I've added an initial width of 50% to the .float-parent-element so that it will get some width at first.

Then I have added each of the .float-child-element a property of float left to position then side by side and a width of 50% of the parent div.

Finally, for the .float-child-element I have added their respective colors with some height of 100px and margin to better differentiate them.

Flexbox Method

With flexbox, we can use a more intuitive way of aligning our two div elements.

HTML:



<div class="flex-parent-element">
  <div class="flex-child-element magenta">Flex Column 1</div>
  <div class="flex-child-element green">Flex Column 2</div>
</div>

CSS:



.flex-parent-element {
  display: flex;
  width: 50%;
}

.flex-child-element {
  flex: 1;
  border: 2px solid blueviolet;
  margin: 10px;
}

.flex-child-element:first-child {
  margin-right: 20px;
}

With flexbox, we have set display: flex on the parent .flex-parent-element.

This turns on flexbox.

Then in each .flex-child-element, we are setting flex: 1. This number is like a ratio comparing the widths of each child in the parent flex element.

Since they are the same, the available space will be divided up equally. And since we have two child elements, they will each take up 50%.

Here’s what the resulting code will look like:

Space between divs by using a margin, and it will still fit

Notice that we’ve added space by adding margin: 10px to .flex-child-element. However, flexbox is intelligent enough to take that extra 20px into consideration when dividing up the rest of the available width.

This means you can add space with margin without having to calculate the exact pixels. Flexbox will fit the content for you!

Grid Method

And here’s how you can place the two divs side by side, using CSS grid:

HTML:



<div class="grid-container-element">
    <div class="grid-child-element purple">Grid Column 1</div>
    <div class="grid-child-element green">Grid Column 2</div
</div>

CSS:



.grid-container-element { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-gap: 20px; 
    border: 1px solid black; 
    width: 50%; 
} 
.grid-child-element { 
    margin: 10px; 
    border: 1px solid red; 
}

And here’s what the code will look like:

One big change with the grid is that you first determine what the grid template will look like. Meaning how many columns and/or rows you want in your layout.

In our case, we want two columns of equal width. So in the parent .grid-container-element, we turn the grid on with display: grid. Then we add in how many columns we want in our layout with the grid-template-columns property.

We want two columns of equal width, so we set it to 1fr 1fr. This tells the browser to create a two-column layout, and each column takes up 1fr (fr = fractional unit) of space.

The fr unit is a ratio of each column to another, similar to the flex: 1 rule we used in the flexbox method. Having the columns set to 1fr 1fr means that each column will take up the same amount of space.

Space between grid items with the grid-gap property

One big benefit to using a CSS grid is that you don’t need to use padding or margin to add space between grid items.

You can use the grid-gap (or gap in newer browsers) to automatically add space in your grid template.

We’ve set grid-gap to 20px, so the browser will know to add 20px of space between all items, whether they are side by side or stacked.

DEV Community: Mainak Das

What is PostCSS & Why should we care?

Increase code readability

Use tomorrow’s CSS today

The end of global CSS

Avoid errors in your CSS

Get started with PostCSS

Using the first plugin

Persist Redux State with redux-persist

Redux-Persist

Step 1:

Step 2:

Step 3:

Step 4:

Step 5:

Step 6:

Step 7:

Step 8:

Wrapping Up

Ditch redux, Use reduxjs/toolkit

Why Redux?

Cons of redux:

Reduxjs/Toolkit aka Redux Starter Kit

Async Data Fetch

Authentication with credentials using Next-Auth and MongoDB - Part 2

Posting sign in logic

But wait, it's not all

Now, let's add this to our .../auth route:

Protect a secured route

For securing .../profile page:

Dynamic navbar tabs

Let's add this to our _app.js:

Sign Out

Authentication with credentials using Next-Auth and MongoDB - Part 1

Things to consider during authentication

Packages we need

Along with that

Website scaffolding

Install packages and setting up database

Sign Up Route

Things to do in the signup route

Posting Sign Up form

Sign In using Next-Auth

Things to do in the sign-in route:

Tailwind's class based dark mode in Next.JS

Tailwindcss

How to enable class-based dark mode for Next.Js?

CSS Specificity

Specificity in CSS

Specificity Rules

CSS Specificity Hierarchy

Calculate Specificity

How Does it Work?

!important Rule

Tips on CSS Specificity

How to Setup Tailwind with PurgeCSS and PostCSS?

Tailwind Installation

Create the Configuration File

PostCSS Config Tailwind

How to Create the Tailwind CSS File?

Create the build command

Build Tailwind

Automatically regenerate the CSS upon file changes

Trim the File Size

What is PurgeCSS?

How to Remove Unused Classes from Tailwind with PurgeCSS?

In development, avoid too much processing

CSS3 selectors Cheat Sheet

CSS Selectors

Simple Selectors

Basic Selectors

Attribute selectors

Pseudo-classes Selectors

Pseudo-elements Selectors

Combinator Selectors

CSS Group Selector

Centering in CSS - Horizontally, Vertically

How to center horizontally?

How to center horizontally with flexbox?

How to center horizontally using CSS margin auto?

Now, let's add this to our `.../auth` route:

For securing `.../profile` page:

Let's add this to our `_app.js`: