DEV Community: Sasidharan

Android 11 with TailwindCSS

Sasidharan — Tue, 20 Jul 2021 16:48:03 +0000

In this blog, we gonna recreate the Android 11 model UI with TailwindCSS.

If you are interested in using TailwindCSS in React Native, check out TailwindCSS and React native log.

Let's get right into it,

We are gonna take an image from the official page and try to replicate the same, follow along for more.

Image to replicate:

Image source - https://www.android.com/intl/en_in/android-11/

Final output 😍:

Find source code here - Complete source

Feel free to add your comments below & follow me on Twitter for more - sasiKdharan

Thanks.

Happy Designing 💅

How to use Tailwind CSS in React Native

Sasidharan — Sun, 18 Jul 2021 08:30:00 +0000

Styling in React Native is pretty simple at the initial stage when we are developing a new application. React Native's Stylesheet helps us to add styles to our elements. When the codebase increases, stylesheets (both external/internal) will be increased, and so maintaining the uniform class names, reusing styles is a nightmare.

Tailwind CSS is an open-source utility-first CSS framework. It redefines the way you style applications by providing a variety of CSS classes by default and we can customize to any extend. Without writing custom styles for each element back and forth, we can use tailwind to write inline styles effectively. It gives a solid design system by default and helps writing conditional , device-specific styles are the major advantages. By this approach, bulk stylesheets will be reduced and can reuse tailwind styles to other components.

Personally, am not a big fan of writing complete CSS on my own, this [lagandlog.com] is completely built using tailwindcss and I had a great experience and it came out really well. The bundle size of the tailwind is <10KB and it is super ok✌️

Where to start?

Many packages out there were mainly created to use TailwindCSS in React Native. Every package has its own way of usage and we are not gonna learn each of them. Listing few useful dependencies below for reference,

These packages were simple to use and will not replace any native components.

Which one to use?

Each one of them is similar and has its own advantages, please refer to the official documentation and find the one that suits you.

Note: TailwindCSS is not created specifically to React Native, so some of the class names will not be supported.

We are trying something more useful, device-specific customizable package tailwind-react-native-classnames.

Installation

npm install tailwind-react-native-classnames

Usage

import { View, Text } from 'react-native';
import tw from 'tailwind-react-native-classnames';

const MyComponent = () => (
  <View style={tw`p-4 android:pt-2 bg-red-300 flex-row`}>
    <Text style={tw`text-md tracking-wide`}>Hey there!</Text>
  </View>
);

Platform-specific styles

// 😎 styles only added if platform matches
tw`ios:pt-4 android:pt-2`;

You can learn more about customizing, overwriting, configurations of the package here.

Sample Design

Image Source - tailwind-rn

Hope this log is useful for you, feel free to add your thoughts in the comments.

TailwindCSS Cheatsheet - https://nerdcave.com/tailwind-cheat-sheet

Follow me on Twitter

Happy Coding!

Free icons for your next project

Sasidharan — Tue, 13 Jul 2021 14:30:21 +0000

Here some of the free icons we can use in any library for our next projects and do wish to credit the creator.

1. Hero Icons - Visit

Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS. Simple to use.

2. Flaticon - Visit

The largest database of free icons available in PNG, SVG, EPS, PSD, and BASE 64 formats. More variants so more to choose from.

3. The Noun Project - Visit

The World’s Most Diverse and Extensive Icon Collection. Over 3 million unique and simple icons.

4. TablerIcons - Visit

Open source, fully customizable 1000+ icons.

5. Icons8 - Visit

The modern, unique set of icons in both SVG and png formats. Available in various styles.

View all

These are the various icon sets that I came across, feel free to add your favorite and go-to icons library in the comments below.

Note: Go through the website to learn about free licensing on illustrations that you use.

Happy coding!

Passwordless Email login in NextJs using NextAuth

Sasidharan — Sun, 02 May 2021 06:46:57 +0000

Next.js is an open-source React front-end development web framework that enables functionality such as server-side rendering and generating static websites for React-based web applications.

NextAuth - NextAuth.js is a complete open-source authentication solution for Next.js applications. It is designed from the ground up to support Next.js and Serverless.

Learn more about NextJs and NextAuth here -

What is Passwordless login?

At a basic level, passwordless authentication is any method of verifying a user without requiring the user to provide a password.

To increase user experience, most of the popular applications using passwordless authentication flow. This helps users to log in without entering a password in their application.

In this following log, we are creating a passwordless email login in our NextJs application using the NextAuth.js library.

Initialization

Create your NextJs project using these steps

After creating your project, your folder structure will look like this,

.
    .
    .
    \pages
    --\api
    --\index.jsx
    .
    \package.json

Install the next-auth dependency using,

yarn add next-auth

Create a folder called auth inside /pages/api/

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

Login using a link

In this example, we are exploring how to create authentication flow using the magic link that is sent to the user's email register/log in.

Inside your [...nextauth].js file paste the following lines,

    import NextAuth from "next-auth";
    import Providers from "next-auth/providers";
    import Adapters from "next-auth/adapters";
    import prisma from "../../../lib/prisma";
    import { isDevelopment } from "../../../helpers/functions";

    export default NextAuth({
      providers: [
        Providers.Email({
          server: {
            host: process.env.EMAIL_SERVER_HOST,
            port: process.env.EMAIL_SERVER_PORT,
            auth: {
              user: process.env.EMAIL_SERVER_USER,
              pass: process.env.EMAIL_SERVER_PASSWORD,
            },
          },
          from: process.env.EMAIL_FROM,
          maxAge: 24 * 60 * 60,
        }),
      ],
      session: {
        jwt: true,
        maxAge: 30 * 24 * 60 * 60, // 30 days
      },
      debug: isDevelopment,
      jwt: {
        // signingKey: process.env.NEXTAUTH_JWT_SIGNING_PRIVATE_KEY,
      },
      adapter: Adapters.Prisma.Adapter({ prisma }),
      database: process.env.DATABASE_URL,
      pages: {
        signIn: "/",
        signOut: "/",
        error: "/", // Error code passed in query string as ?error=
        verifyRequest: "/", // (used for check email message)
    // If set, new users will be directed here on first sign in
        newUser: '/dashboard' , 
      },
    });

Here we have used Prisma as database ORM.

Learn more about databases - https://next-auth.js.org/configuration/databases

How it works

On the initial sign-in, a Verification Token is sent to the email address provided. By default, this token is valid for 24 hours. If the Verification Token is used with that time (i.e. by clicking on the link in the email) an account is created for the user and they are signed in.

If someone provides the email address of an existing account when signing in, an email is sent and they are signed into the account associated with that email address when they follow the link in the email.

Follow Email provider documentation here

Client-Side

NextAuth provides a default interface to log in. You can now sign in with an email address at {{host}}/api/auth/signin.

Custom login form

You can have your own login component and using next-auth/client , we can log in easily as,

import { signIn } from "next-auth/client";

const onLogin = async() => {
   let response = await signIn("email", {
      email: "user@example.com"
   });
}

After the successful response, an email will be sent to the respective user email with a login link button.

You can also customize your email - Refer to the documentation

Follow the link to log in as an authenticated user into your application. Use default APIs to validate and process user sessions,

// server-side
 import { getSession } from 'next-auth/client'

// client side hook
import { useSession } from 'next-auth/client'

this will return the current user of the session.

{
      user: {
        name: string,
        email: string,
        image: uri
      },
      accessToken: string,
      expires: "YYYY-MM-DDTHH:mm:ss.SSSZ"
}

That's it. Hopefully, it'll be useful. If you wish, follow me on Twitter.

Happy Coding☕💻

How to dockerize React App

Sasidharan — Sun, 02 May 2021 06:41:09 +0000

Developing apps today requires so much more than writing code. Multiple languages, frameworks, architectures, and discontinuous interfaces between tools for each lifecycle stage create enormous complexity. It helps to speed up the development and deployment processes. If you’re working with microservices, Docker makes it much easier to link together small, independent services.

React is an open-source, front-end, JavaScript library for building user interfaces or UI components. React can be used as a base in the development of single-page or mobile applications.

I recently came up with a situation to containerize my React application, so learned the steps to containerize production-ready applications and I'm sharing the same in this log,

Step 1

To create react application via the command line, you should have Node installed on your computer.

Node Download

npx create-react-app my-app
cd my-app
npm start

That's it. Open http://localhost:3000/ to see your app.

The folder structure will look like this,

 my-app/
      README.md
      node_modules/
      package.json
      public/
        index.html
        favicon.ico
      src/
        App.css
        App.js
        App.test.js
        index.css
        index.js
        logo.svg

Step 2

Before we containerize our application, we should create a special file that Docker understands, i.e, Dockerfile in the root of your application.

my-app/
      Dockerfile <-
      README.md
      node_modules/
      package.json
      public/
        index.html
        favicon.ico
      src/
        App.css
        App.js
        App.test.js
        index.css
        index.js
        logo.svg

Docker builds images automatically by reading the instructions from a Dockerfile

A Docker image consists of read-only layers each of which represents a Dockerfile instruction. The layers are stacked and each one is a delta of the changes from the previous layer.

Without further ado, let's write into our Dockerfile,

FROM node:13.12.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
RUN npm i --silent
COPY . ./
RUN npm run build

FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Each instruction creates one layer:

FROM creates a layer from the node:13.12.0-alpine Docker image.
COPY adds files from your Docker client’s current directory.
RUN builds your application with make.
CMD specifies what command to run within the container.

When you run an image and generate a container, you add a new writable layer (the “container layer”) on top of the underlying layers. All changes made to the running container, such as writing new files, modifying existing files, and deleting files, are written to this thin writable container layer.

Step 3

Now, let's build our Dockerfile,

docker build -f Dockerfile -t my_react_app:prod .

In the first 7 lines of the Dockerfile,

it pulls the image that we specified in FROM and starts executes all our commands, and generates a single page react build.

the rest,

takes that build folder, pulls Nginx image from Dockerhub, and copies our build to the /html folder we specified. Now Nginx serves our React application inside port 80 inside the container.

After all the steps/layers in Dockerfile are completed successfully, we can spin up the image using the following command,

docker run -it --rm -p 5000:80 my_react_app:prod

in this, the port 80 from container listens in 5000 in our machine, which means we can view our application on http://localhost:5000

With this, now you can able to containerize your application in a docker. The steps will be similar to all large react projects.

Follow me on twitter - https://twitter.com/sasiKdharan

Happy Coding 🤖

Blog using Gatsby and Strapi

Sasidharan — Sun, 02 May 2021 06:38:24 +0000

Gatsby is a React-based framework, popular for performance, static site generation, and scalability. We have covered everything you need to Get Started with Gatsby

Because it is based on React, the website pages are never reloaded which makes the generated website super fast. A large set of plugins is available to allow developers to save time coding.

Strapi is the leading open-source headless CMS. It’s 100% Javascript, fully customizable, and developer-first.

Prerequisites

You need to have node v.12 installed.
Basic knowledge of ReactJs and Javascript.

Checkout Get Started logs for Gatsby and Strapi,

I am using the same sample application that was created in the above logs. After completing the Gatsby project setup, and start editing the index.js file in /pages folder.

Connect Gatsby with Strapi

Strapi built a plugin for gatsby called gatsby-source-strapi , install the plugin in our Gatsby application using the command,

yarn add gatsby-source-strapi

(or)

npm install gatsby-source-strapi`

This plugin needs to be configured, so inside plugins array add the following code:


{
 resolve: "gatsby-source-strapi",
 options: {
 apiURL: process.env.API_URL || "http://localhost:1337",
 contentTypes: ["blog"],
 queryLimit: 1000,
 },
}

This will allow Gatsby to fetch all our blogs on build time.

Now you can start creating components and layouts for our blog. To get list of all blog posts inside our component refer to the following Graphql query,

import React from "react";
import { graphql, useStaticQuery } from "gatsby";
import PostComponent from "../components/posts";

const IndexPage = () => {
  const data = useStaticQuery(query);

  return (
      <div>
        <div>
          <h1>Posts</h1>
          <PostComponent articles={data.allStrapiPost.edges} />
        </div>
      </div>
  );
};

const query = graphql`
  query {
    allStrapiBlog(filter: { status: { eq: "published" } }) {
      edges {
        node {
          strapiId
          slug
          title
          }
        }
      }
    }
  }
`;

export default IndexPage;

This will query all the posts and the data is passed via data props to the component.

Use the list of posts to render your blog posts on the page. Make your own styles.

Image Source - Strapi Blog

You can also use Javascript fetch() to list all posts via a REST API call to localhost:1337/blogs and render it on the screen.

To create pages dynamically for all posts during build time, we have gatsby.node.js file

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const result = await graphql(
    `
      {
        posts: allStrapiPost {
          edges {
            node {
              strapiId
              slug
            }
          }
        }
      }
    `
  );

  if (result.errors) {
    throw result.errors;
  }

  // Create blog pages.
  const posts = result.data.articles.edges;

  const PostTemplate = require.resolve("./src/templates/post.js");

  posts.forEach((post, index) => {
    createPage({
      path: `/post/${post.node.slug}`,
      component: PostTemplate,
      context: {
        slug: post.node.slug,
      },
    });
  });
};

It will create pages for all your slugs dynamically.

/post/my-first-post
/post/another-post
/post/my-second-post

using any markdown packages to render your markdown as HTML in Gatsby frontend.

For more details, visit the documentation

Gatsby and Strapi

Happy Coding 👾

AMA on https://twitter.com/sasiKdharan

Git - Staging and Snapshoting

Sasidharan — Sun, 02 May 2021 06:26:02 +0000

Staging and snapshotting are important topics because these commands will be used by us daily.

Installation and setup were covered in the previous log.

Local Setup

Git is software for tracking changes in any set of files, usually used for coordinating work among programmers collaboratively developing source code during software development. Its goals include speed, data integrity, and support for distributed, non-linear workflows. Let's have look at only commands that required to stage and commit to your working branch.

Working with Git stage and commit

git status

show modified files in the working directory.

 git add [file] (or) git add .

you can add the file one by one to the stage or use ( . ) to add all your files at once to the stage.

 git reset [file] (or) git reset .

unstage a file while retaining the changes in the working directory or reset all files using ( . ) at the end.

 git diff

check the changes made compared with the previous commit for the unstaged files.

git diff --staged

check the changes made in stages files before commit.

Commit your code

 git commit -m "[descriptive message]"

this command commits your staged files with changes to the repository, you should give a descriptive message about the commit.

Happy Coding 👾

AMA on Twitter

Next.js and NextAuth.js

Sasidharan — Fri, 16 Apr 2021 07:47:54 +0000

Passwordless Email login using the link in NextJs - https://lagandlog.com/logs/passwordless-email-login-in-nextjs-using-nextauth

NextAuth.js is a complete open-source authentication solution for Next.js applications.

It has built-in support for all sign-in options out there (such as Google, Github, Twitter, etc)

Supports both JSON Web Tokens and database sessions.

Initialization

Create your NextJs project using,

yarn create next-app

The project will be created and the folder structure will looks like,

.
.
.
\pages
--\api
--\index.jsx
.
\package.json

Install the next-auth dependency using,

yarn add next-auth

Create a folder called auth inside /pages/api

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

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    Providers.GitHub({
      clientId: process.env.GITHUB_ID,
      clientSecret: process.env.GITHUB_SECRET
    }),
    // ...add more providers here
  ],

  // A database is optional, but required to persist accounts in a database
  database: process.env.DATABASE_URL,
})

List of other providers

That's it you have integrated Github authentication in your nextjs application.

Default APIs

NextAuth provides various APIs inside the library by default,

You can handle the current session of the user effectively using next-auth/client

// server side
import { getSession } from 'next-auth/client'

// client side hook
import { useSession } from 'next-auth/client'

More about next-auth/client

REST APIs

NextAuth also provides REST APIs out of the box for,

GET /api/auth/signin
POST /api/auth/signin/:provider
GET /api/auth/signout
and more

Includes TypeScript support.

yarn add -D @types/next-auth

Works well with and without a database. You can also connect to database ORMs like Prisma.

Prisma ORM Adaptor - view

Learn more at next-auth.js.org

Passwordless Email login using the link in NextJs - https://lagandlog.com/logs/passwordless-email-login-in-nextjs-using-nextauth

That's it. Hopefully, it'll be useful. If you wish, follow me on Twitter.

Flask and .env

Sasidharan — Tue, 09 Mar 2021 14:00:43 +0000

To learn how to dockerize react application visit - https://lagandlog.com/logs/how-to-dockerize-react-app

env files allow you to put your environment variables inside a file. It actually looks like,

REDIS_ADDRESS=localhost:6379
MEANING_OF_LIFE=42
MY_SECRET="helloworld"

Creating .env files in your projects help you to manage all secrets or variable in a file and in a secret place. It's not recommended to push the env file to the git repository.

In our post, we are using the .env file inside the Python Flask application.

Inside your virtual environment of the project,

pip install python-dotenv

Reads the key-value pair from the .env file and adds them to the environment variable. It is great for managing app settings during development and in production using 12-factor principles.

The most common usage consists of calling load_dotenv when the application starts, which will load environment variables from a file named .env in the current directory.

Create your .env file along-side your settings/config file.

.
├── .env
└── config.py

Inside your config file, enter the following lines,

from dotenv import load_dotenv
load_dotenv()

Now all your key=value pairs will be loaded into your application. You can use the variable as,

import os
SECRET_KEY = os.getenv("MY_SECRET")

That's it you can now create .env file and use it across the flask application.

To learn how to dockerize react application visit - https://lagandlog.com/logs/how-to-dockerize-react-app

Happy coding 👾

Grow yourself by writing!

Sasidharan — Thu, 25 Feb 2021 06:23:51 +0000

Building an online portfolio is always a tricky part, and having a blog section in it takes a long work.

Rather than building your own portfolio to promote your articles, only focus on creating quality content, and alongside a beautiful portfolio with all your blogs, works, and contact information that you want to share with the public will be auto built for you.

Checkout - LagandLog

Write and share your thoughts seamlessly.
Create a collection of your own articles.
Share your upcoming articles using a bucket list.
Follow interests and topics.
Grow with your community.
Get noticed for promising content.
Get your own portfolio. (ex - https://sudo.lglg.me)
Use your own domain for your site.
Completely free to use.

Signup today - https://lagandlog.com/user/onboard

Twitter - https://twitter.com/lagandlog

Building in public. Feedbacks appreciated.

LL Beta is out🎉

Sasidharan — Mon, 15 Feb 2021 18:39:54 +0000

Knowledge sharing needs a simple platform!

https://lagandlog.com

The easiest way to share knowledge and keep building your portfolio online.

Rebuild your personal growth with Lag and Log and make use of the following features,

Write and share your thoughts seamlessly.
Follow interests and topics.
Grow with your community.
Get noticed for promising content.
Get your own portfolio. (ex - https://sudo.lglg.me)
Use your own domain for your site.
Completely free to use.

Start using https://lagandlog.com/user/onboard and grow yourself by writing.

What is Micro Frontends?

Sasidharan — Thu, 10 Sep 2020 19:15:12 +0000

What is Front End?

A frontend is a software or program that interacts with the application user and delivers the contents and experience based on various logics.

For any software or application requires a kind of frontend to interact with the business logic and easy to use.

These applications can be bundled and can be served as a monolithic (single) application for the users.

Let's move on to the topic:

What is Micro Front End?

A micro frontend is an approach of splitting the whole frontend application into loosely coupled "micro apps" which is similar to microservices in the backend.

The main advantage of using micro-frontends is,

Easy to manage
Teams with different frontend technologies can work seamlessly.
It can communicate to any microservice backend with a different database.
Scale specific micro app based on the need.

These micro apps can communicate with each other by custom events and we can also dynamically inject any micro app into others.

What Else?

The deployment of these micro apps may be a little harder and the continuous deployment process should be taken care of.

Testing individual applications make things harder.

Creating micro-frontends should be done based on the necessity of the application and not because of your team knows various technologies.

Thanks. Comment your thoughts below.

Twitter - https://twitter.com/sasiKdharan