DEV Community: Hosenur Rahaman

Detailed metrics of your coding activity using WakaTime

Hosenur Rahaman — Fri, 04 Nov 2022 09:50:41 +0000

WakaTime is an open source plugin for metrics, insights, and time tracking automatically generated from your programming activity.

It keeps track of information like total coding time, operating systems used, IDEs used, Languages, projects, GitHub Activity, Lines of Codes Written

You can view the data directly from the dashboard, get embeddable customizable charts and graphs to put int your GitHub readme or portfolio website, there are many open source projects which uses GitHub actions to retrieve data from your WakaTime instance and beautifully display and update regularly on your GitHub readme.

Getting Started With WakaTime

Create a free account on WakaTime
Get your Secret API key from your profile page
Search for the WakTime extension in your IDEs extension's marketplace or follow the Official Plugins Docs
Enter your Secret API Key after installation of extension and now you are done, all your activity will be recorded.

GitHub projects using WakaTime and GitHub actions:

anmol098/waka-readme-stats

YouEclipse/waka-box-go

3.guilyx/guilyx

Beginner Web Dev Toolbox

Hosenur Rahaman — Mon, 07 Mar 2022 18:42:19 +0000

This article is specially for developers who are new, here you will get a list of services and tool which you can use to ease your developer experience as a new developer.

Basics

VS Code: The most popular code editor with large collection of plugins & extensions. Customize according to your taste
Git: Learn to use git and github, as it is an essential skill as well as makes you coding workflow maintained and organized, you can travel though the timeline of your code.

UI & Animation Libraries

You have that perfect million dollar app idea in your mind, but it needs to be attractive, works perfectly in all devices, you can use a CSS framework and it will make your life a lot easier, styling is a very important part of any app, add little animations to bring life to your app, use the perfect colors. Listed below are some popular CSS framewokrs and animation libraries.

TailWind: A utility-first & mobile-first CSS framework
BootStrap: Quickly design and customize responsive mobile-first sites with Bootstrap
ChakraUI: Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.
Framer Motion: A production-ready motion library for React.
Animate.css: Animate.css is a library of ready-to-use, cross-browser animations for use in your web projects. Great for emphasis, home pages, sliders, and attention-guiding hints.
Neumorphism: Generate neumorphism CSS
GlassMorphism: Generate glassmorphism CSS
UI Gradients: A handpicked collection of beautiful color gradients for designers and developers.
Color Hunt: Choose Color Palettes for your UI
Tint Generator: Generate tints and shades for a color.

Database

You have successfully built your first app and now you need a way to store data in a database, there are several free to use databases present using different technologies and each having their special frature, given below are the most popular ones.

Firebase: Firebase provides you with two different real-time NoSQL Data is synced across all clients in realtime, and remains available when your app goes offline.
Supabase: Open source firebase alternative.
MongoDB: Most popular NoSQL database.
PlanetScale: The MySQL-compatible serverless database platform.

Authentication

You successfully stored your precious data in a database, but now you want to limit access to that by only allowing authenticated users to have access to that data, authentication is an important part of any application, you can of course build your own authntication system from scratch but there are some excellent tools which allows all that for us so that we can just plug that in and focus on other important parts of our app.

Firebase:Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more. You can also write rules for databases based on firebase auth.
Supabase:Supabase Auth is designed to work either as a standalone product, or deeply integrated with the other Supabase products
Auth0: Auth0 is an easy to implement, adaptable authentication and authorization platform
NextAuth: Authnetication for your NextJS apps, supports a large number of social providers.
Clerk: Supports all major web frameworks along with Expo.

Hosting

Your app is ready but now you need to host it so that it becomes accessible to the world, here is a list of free to use hosting providers which also provide you a domain and of course you can add your own custom domain.

Firebase: It can host both static and dynamic ontent, along with multiple hosting.
Vercel: NextJS was created by Vercel, it is a free hosting and has support for numerous frameworks along with node backend and specially optimized for NextJS..
Netlify:Netlify unites an entire ecosystem of modern tools and services into a single, simple workflow for building high performance sites and apps.
Heroku: Host websites, backends, scripts, and more on Heroku.

Remix Firebase Google Auth

Hosenur Rahaman — Sun, 27 Feb 2022 23:20:44 +0000

Authentication is a very important part of any app. In this tutorial we are going to integrate Firebase Google Authentication in a Remix app.
Example
Users when authenticated can like posts, post comments under posts.

Setting Up Our Project 🚀

Create a new Remix project

Create a new Remix project by running the following command on your terminal:

npx create-remix@latest

Choose your preferred Hosting Platform, Language and navigate to the projects directory.
Install required packages

npm install firebase

Configuring Firebase in our project 🔥

Connect Firebase

Create a new firebase project in the firebase console, or use an existing one, and follow the steps below.

Provide App Nickname.
Click on Register app.
You will be provided with the Add Firebase SDK screen.
Copy the firebaseConfig object variable.
Create a folder names contexts inside the app folder.
Create a new firebase.js file in the contexts folder and copy and paste the snippet given below and replace your firebaseConfig.

// firebase.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
  authDomain: "XXXXXXXXXXXXXXX.firebaseapp.com",
  projectId: "XXXXXXXXXXXXXXX",
  storageBucket: "XXXXXXXXXXXXXXX.appspot.com",
  messagingSenderId: "XXXXXXXXXXX",
  appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);

Return to the Firebase console and click on Authentication, then click on Sign-in Method and enable Google under Additional Providers tab and click on Save. If you have a custom domain , you can add that in the authorized domains section.

Creating the AuthProvider

Create a AuthContext.js file in the contexts folder and paste the following code snippet.

import React, { useContext, useState, useEffect } from "react";
import { auth } from "./firebase";
import { signInWithPopup, GoogleAuthProvider } from "firebase/auth";

const AuthContext = React.createContext();

export function useAuth() {
  return useContext(AuthContext);
}

export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState();
  const [loading, setLoading] = useState(true);

  const signInWithGoogle = () => {
    const provider = new GoogleAuthProvider();
    signInWithPopup(auth, provider)
      .then((res) => {
        setCurrentUser(res.user);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setCurrentUser(user);
      setLoading(false);
    });
    return unsubscribe;
  }, []);

  const value = {
    signInWithGoogle,
    currentUser,
  };

  return (
    <AuthContext.Provider value={value}>
      {!loading && children}
    </AuthContext.Provider>
  );
}

Wrapping the App with the AuthProvider

Modify your root.jsx file like given below, by wrapping the Outlet component with the AuthProvider component.

import {
  Links,
  LiveReload,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "remix";
import styles from "./tailwind.css";
import { AuthProvider } from "./contexts/AuthContext";
import Header from "./components/Header";

export function links() {
  return [{ rel: "stylesheet", href: styles }];
}

export function meta() {
  return { title: "New Remix App" };
}

export default function App() {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <AuthProvider>
          <Header />
          <hr />
          <Outlet />
        </AuthProvider>
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

We have completed the setup, and now we can use firebase authnetication in our project.
In my case I will have the Login Button on my Page Header. You can follow along with the code snippet below.
Note my Header component is present in app/components folder and I am using TailWind for styling.

// Header.js present in app/components folder
import { useAuth } from "~/contexts/AuthContext";

export default function Header() {
  const { signInWithGoogle, currentUser } = useAuth();
  console.log(currentUser);
  return (
    <div className="max-w-3xl mx-auto p-5 flex justify-between items-center">
      {currentUser ? (
        <img
          src={currentUser.photoURL}
          alt="User"
          className="border rounded-full h-10"
        />
      ) : (
        <div onClick={signInWithGoogle}>Login</div>
      )}
    </div>
  );
}

Now on clicking the Login button the user will be redirected to the Google sign in pop up page, and after signing in the user will be redirected to the Home page.

You can console.log the currentUser object to see the user details.

Obfuscate & Reveal text animation in React using baffle.js

Hosenur Rahaman — Tue, 15 Feb 2022 18:22:53 +0000

We are going to recreate this baffle

Lets get started

First we will install baffle.js package by running the following command.

npm install --save baffle

Import baffle

import baffle from 'baffle';

Assign a specific className to the div which contains the text you want to apply the obfuscated effect.
Here is an example:
In this case we have assigned the class 'obfuscated' to the div.

<div className = "col obfuscated">
        tothemoon.
</div>

Use useEffect hook to start the animation.

useEffect(() => {
        const target = baffle('.obfuscated')
        target.set({
            characters: "█▓█ ▒░/▒░ █░▒▓/ █▒▒ ▓▒▓/█<░▒ ▓/░>",
            speed: 100
        })
        target.start()
        target.reveal(1000, 100)
    })

Replace your div class accordingly in this line.

const target = baffle('.obfuscated')

Set your animation duration and delay accordingly in the last line

target.reveal(duration, delay)

Now you are all set, and the effect should take place as soon as the page loads.

Implementing Code Input & Highlighting in Next JS Sanity Blog - Typescript

Hosenur Rahaman — Sun, 13 Feb 2022 16:32:14 +0000

Adding code blocks to your NextJS Blog

After starting to build your dev blog using Next JS and Sanity you want the most critical thing to have on a dev blog - support for code blocks.
Lets get started and implement it to the blog

Install Code Input in Sanity
Sanity has an official plugin to insert and use Code Blocks
Navigate to your sanity directory and install the plugin



sanity install @sanity/code-input

Add the Code Object
Assuming you want to add code inputs to your body add the following lines in blockContent.js in the end after the image section, located at sanity/schemas/blockContent.js as follows:



{
      type: 'code',
      title : 'Code Block'
}

After adding the above lines your blockContent.js should look like



{
      type: 'image',
      options: {hotspot: true},
},
{
      type: 'code',
      title : 'Code Block'
}

Restart your Sanity Server once for the changes to take place

We have completed setting up our Sanity Studio and now you can enter code blocks. Now lets set up code highlighting for our Frontend.
Start by installing the required packages to your NextJS project



npm i --save @sanity/block-content-to-react
npm i react-syntax-highlighter

I would suggest not to use React Portable Text Package as it causes conflicts, @sanity/block-content-to-react does the same thing and makes it easy to display and edit code blocks.

Modify your post display page as follows:
Import Sanity Block Content and React Syntax Highlighter



const BlockContent = require('@sanity/block-content-to-react')
import SyntaxHighlighter from 'react-syntax-highlighter';

If you face errors like "Could not find a declaration file for module 'react-syntax-highlighter'", run the following command in your project directory



npm i --save @types/react-syntax-highlighter

Create the serializer for code blocks as follows:



const serializers = {
    types: {
        code: (props: any) => (
            <div className='my-2'>
                <SyntaxHighlighter language={props.node.language}>
                    {props.node.code}
                </SyntaxHighlighter>
            </div>
        ),
    },
}

Now you should end up with something like this:



import { GetStaticProps } from 'next';
import { sanityClient, urlFor } from '../../sanity'
import { Posts } from '../../typings';
import Header from '../../components/Header'
const BlockContent = require('@sanity/block-content-to-react')
import SyntaxHighlighter from 'react-syntax-highlighter';

interface Props {
    post: Posts
}
const serializers = {
    types: {
        code: (props: any) => (
            <div className='my-2'>
                <SyntaxHighlighter language={props.node.language}>
                    {props.node.code}
                </SyntaxHighlighter>
            </div>
        ),
    },
}

Finally use Sanity Block Content to display your body



<BlockContent
        blocks={post.body}
        projectId="xxxxxxxx"
        dataset="production"
        serializers={serializers}
/>

You are now all set to insert code blocks to your dev blog with syntax highlighting 🔥🚀