Surjith's Blog

Component-based Web Development for Beginners

Surjith S M — Tue, 13 Sep 2022 14:47:01 GMT

Website, It all starts with a simple index.html page. We can write anything and publishing it to the whole world is mind-blowing. Nobody believed it was the future. But here we are, living in the future. Web design is not about index.html anymore. It's a complex infrastructure with complicated servers, countless libraries, frameworks, and tools.

Everything I mentioned above was invented for a common goal: Save Time. In this article, I'm going to explain how Component-based approach speed up your web development using DRY Principle (Don't repeat yourself)

The Problem.

Imagine you have developed a simple website with few pages: "Home, About, Contact". Each page contains a Navbar, information for each page, and a footer.

Now you want to add another page called "Services". Easy. You create another page called services.html and add a link from other pages.

Now Imagine if this was a big project with 100s of pages. You would need to open 100 pages to add a link. Then you want the link to be first, Now you open the 100 pages again to make these changes. Sounds fun? No more. It's now become a boring repeatable task. And it's not scalable as our simple website.

The Solution

What if we could have a single Navbar page where we could update in one place and it automatically updates on 100s of these pages? Mind-blowing right? That's where the component-based approach comes into play.

Every modern framework like React, Next, Vue, Nuxt, Svelte, Astro, etc. supports this approach. We will see this through a live example by converting a normal page to a component.

Live Example

Here is a live example of how you can convert the following section to a component-based approach.

Look at the above example. Which is often seen on any website. Usually the section will be on your index page. Let's see how we can transform it using modern tools.

Existing Layout

<!DOCTYPE html>
<html lang="en">
<head> ... </head>
<body>
    <div>// nav, hero etc goes here
    <div class="our-section">
          ...
          ...
    </div>
    <div>// cta, footer etc goes here. 
</body>
</html>

The first thing you should do is to move it to another page and import the same in your main page.

Here's how you would do it in React.

// components/features.js

export default function MySection() {
 return (
    <div> My section content div>
)}

// pages/index.js

import MySection from "../components/features"

export default function Home() {
 return ( 
    <> 
      // nav, hero etc goes here
     <MySection>
      // cta, footer etc goes here.
    
)}

Here's the same example using Astro

Astro is a web framework used for static site generation focused on speed using less or no javascript.



<div> My section content div>


---
import MySection from "../components/features.astro"
---



<MySection>

We are not done. There is more

The first step is done, we have made sure it can be imported into any page. But there is still work pending. If you see the above image again, you can see that the feature is a two-column grid and shares the same design. So instead of repeating those four grids, we can use the data-driven component method to reduce even further.

Here's how you can do that in React.

First, extract the repeatable data in to an array. In real project this might be coming from a headless CMS or an API. for demo, I will just put those as static array.

// components/features.js

import { MyIcon } from "lib/icons";

const features = [
  {
    title: "Competitive exchange rates",
    desc: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. ",
    icon: <MyIcon/>
  },
  {
    title: "No hidden fees",
    desc: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. ",
    icon: <MyIcon/>
  },
  {
    title: "Transfers are instant",
    desc: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. ",
    icon: <MyIcon/>
  },
  {
    title: "Mobile notifications",
    desc: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. ",
    icon: <MyIcon/>
  },
]

export default function MySection() {
 return (
 <>
  <div> // Section Titlediv>
  <div>  
      {features.map((item, index) => (
             <div key={index}>
               <span>{item.icon}span>
                <h3>{item.title}h3>
                <p>{item.desc}p>
             div>
        ))}
div>

)}

Same example for Astro Static Site Generator.

// components/features.astro
---
import { MyIcon } from "assets/Icons.astro";

const features = [
  {
    title: "Competitive exchange rates",
    desc: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. ",
    icon: <MyIcon/>
  },
  {
    title: "No hidden fees",
    desc: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. ",
    icon: <MyIcon/>
  },
  {
    title: "Transfers are instant",
    desc: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. ",
    icon: <MyIcon/>
  },
  {
    title: "Mobile notifications",
    desc: "Lorem ipsum, dolor sit amet consectetur adipisicing elit. ",
    icon: <MyIcon/>
  },
]
---

  <div> // Section Titlediv>
  <div>  
      {features.map((item) => (
             <div>
               <span>{item.icon}span>
                <h3>{item.title}h3>
                <p>{item.desc}p>
             div>
        ))}
div>

Further Customizations

You can go one step and pass the data as props. You can pass any data to this component to render. Here's a quick example with the title as props.

React Props Example

// pages/index.js

import MySection from "../components/features"

export default function Home() {
 return ( 
    <>  
     <MySection title="My Custom Section Title"> 
    
)}

Then on the component page:

// components/features.js

const features = [...]

export default function MySection(props) {
 return (
 <>
  <div>{props.title}div>
  <div>  
      {features.map((item, index) => (
             ...
        ))}
div>

)}

Same with Astro:

// components/features.astro
---
const { title } = Astro.props;
---

  <div> {title} div>
  <div>  
      {features.map((item) => (
             ...
        ))}
div>

Rendering as child content

Both React & Astro support rendering content as children. Here's an example:

React Example

// pages/index.astro

import MySection from "../components/features"

export default function Home() {
 return ( 
    <>  
     <MySection> 
            <div>I can do anything here..div>
     MySection>
    
)}

Then you can render that content using {props.children}

// components/features.js

const features = [...]

export default function MySection(props) {
 return (
 <>
  <div>  
      {props.children}
div>

)}

Astro Example


---
import MySection from "../components/features.astro"
---

<MySection>
      <div>I can do anything here..div>
 MySection>

Then, using we can render the content inside the component.



 <div>   
      <slot/>
div>

Hope you have learned something new. This is the best way to approach modern web development which is scalable and easy to maintain. Let me know your questions.

How to create cross-compatible website shortcut for Mac & Windows

Surjith S M — Mon, 08 Aug 2022 08:15:03 GMT

Mac creates shortcuts with .webloc extension while Windows creates it using .url extension. Let's see how to create both and how to make it work on both operating system.

Creating Website Shortcut in Mac

You can create shortcut by dragging the website URL to your finder folder or desktop using a Mac device. But if you are not on mac, you can create it manually.

1. Create a file with `.webloc` extension.

And add the following contents inside. Make sure to change the URL inside


plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>URLkey>
    <string>https://yourwebsite.comstring>
dict>
plist>

Note: This only works on Mac and on windows this won't work. To create a shortcut compatible for both operating system, follow this steps:

Creating Website Shortcut in Windows

You can create shortcut by dragging the website URL to your finder folder or desktop using a Windows device. But if you are not on Windows, you can create it manually.

1. Create a file with `.url` extension.

[InternetShortcut]
URL=https://yourwebsite.com

The above shortcut will work on both Windows & Mac.

Problems I faced in a Mac as a Windows user (and how to solve them)

Surjith S M — Sat, 04 Sep 2021 13:00:44 GMT

Hey everyone,

This is a super small collection of small issues you might face in Mac as a Windows user. I will also explain how I solved them so you don't have to spend time searching. I'm a designer & front-end developer so my workflow is related to that.

Mouse issues

You might feel so many problems with Mouse when you came from Windows.

Slow mouse tracking speed

This is the first issue I faced while setting up my Mac. The mouse speed was too slow than what we used to.

Solution:

First, we have to patiently wait until the setup is completed. Then press CMD + Space to open a search box. Type mouse and it will lead you to Mouse settings in the System Preferences.

Just move the slider all the way to the right. Yes. to the right. You need that.

No Middle click

In Windows, I can easily click on the scroll button and each link would open in a new tab. In Mac, there is no scroll wheel or button, so we have to hold the CMD key while clicking a link and it will open in a new tab.

No right-click in mouse

Yeah, you need to enable right-click manually from the same settings panel.

Mouse scroll direction

We have to disable the Scroll direction: Natural option to feel the normal scrolling behavior as Windows.

Maximize Window (Full Screen)

In Windows, we were able to maximize windows easily using the icon. In Mac, if we clicked the maximize icon (green) it will go to full screen and hide the top and bottom menu.

To mimic Windows Maximize, we can double click on the top-bar of the selected application. But in some applications like Safari, it won't work. I have not yet found the best solution for it.

Facetime keeps Signing in (loading)

My facetime was not worked the first time but I connected to Ethernet instead of Wifi and restarted and it worked fine.

Messages from iPhones are not showing in iMessage.

It was all blank for me in iMessage. For that, I had to enable the "Forward Messages" option in iPhone and "Enable" iCloud Messages in Mac iMessage settings. Then I relaunched the app and all messages were synced.

Sleep vs Shutdown (No Hibernate)

In Mac, there is no Hibernate option. Only sleep and Shutdown. Sleep is the popular option but makes sure you keep the Power connected and it's ON (except Macbook).

Display Size

By default, iMac uses the second right-most Display size as default. But for me, it was too small for my liking esp when coming from Windows. So I decided to change the display to the Scaled version. I asked a few Mac users about it and seems it's perfectly fine to do so.

npm install -g [package] not working

NPM global install won't work by default. I had to type in 3 following commands in the Terminal to get that work.

sudo chown -R $USER /usr/local/lib/node_modules/
sudo chown -R $USER /usr/local/bin/
sudo chown -R $USER /usr/local/share/

⚠️ I'm still unsure of the consequences of this command. So use with caution.

External Monitor issues

Since I was used to dual monitor on my Windows, I decided to buy new monitor to match the iMac's 24" screen. I also made sure its USB-C compatible so I could easily connect it. Since the main use for that is to code, I didn't buy 4k. But that was a mistake. Apple forces you to buy 4k monitors otherwise, all text on the second monitor looks pixelated from the 90s. The monitor I bought was HD (1980 x 1280) but for Mac, seems it's not enough.

For older software versions, they had an option called "Smooth Font when available" but were removed on Mac OS Big Sur update. I tried to install some 3rd party apps like "Tinkertool" and "Font Smoothing Adjuster" but none of them worked as expected.

I still have this issue and never found any good fix unless buying a new 4k monitor. That's a bummer.

Focusing other windows

This is another frustrating thing in Mac when focusing on other windows. Imagine you are coding on VSCode and then you open a new Chrome Tab by right-clicking the tab, the cursor will blink on the address bar. Now when you start typing the text, you realize it's still typing on VSCode. Even we right-clicked and opened a tab on Chrome, the keyboard focus is still on VSCode. So I have to delete that text again and then type again after left-clicking on Chrome.

Usually, this won't affect much when you use a single monitor since we need to left-click anyways, but for Dual monitor users, it's a pain.

Drag and Drop Selected Text

In windows, its easy to drag & drop selected text using mouse. To drag selected text in mac, you have to hold left click for a second to enable dragging. Otherwise, it will remove the selection. So here's how you can drag selected text.

Select Text to Drag and release the mouse
Left click on Mouse and hold it for a second
Now Start dragging the text with your mouse

Useful Shortcuts

CMD + Space - To Search anything in Mac
CMD + Shift + 3 - Take instant full-screen screenshot (and save to desktop)
CMD + Shift + 4 - Crop & Take Screenshot an Area
CMD + Shift + 4 then press SPACE - Capture a window (as shown above). Thanks @niranjannitesh for the tip
CMD + Shift + 4 then hold Control - Take Screenshot but copy to Clipboard instead of desktop. Then you will be able to paste it on any app using CMD + V
CMD + Shift + 5 - Record Video of chosen Area (Screencast)
Double Tap on a Magic Mouse - Zoom in to the content (works anywhere)
Double Tap with 2 Fingers - Opens Mission Control

What do I still miss

I have still not found a great way to Show the Desktop option as in Windows + D. The closest is CMD + H or CMD + F3 but it won't show the Desktop as we needed.

Ultimate Email Forwarding Guide + Send Reply

Surjith S M — Wed, 19 May 2021 12:14:56 GMT

Imagine you have 5-6 different emails for different purposes, like your personal, work, side projects, etc. Managing those will be a nightmare since you have to literally set up each account and open it every day to check and respond.

But what if there is a way to manage them all in one place? In your Gmail? Yes, it's a bit hacky but you can do the following on your personal Gmail account.

Use your Personal Gmail as usual
Forward other (@domain.com) emails to your Gmail
Send Replies from Multiple @domain.com automatically

Step 1 - Email Forwarding

The first step is to forward your domain email address to your personal Gmail. Email Forwarding is supported by most domain registrars and it's free. Just check your registrar's help docs to find this option.

In my case, I'm using Cloudflare, which provides this option for free. So I forwarded my @domain.com email to my personal email address.

Here are some links to popular registrars for email forwarding docs.

Make sure the MX records in the DNS matches the Email forwarding service you use.

Step 2 - Send Email & Reply from Gmail

In this step, we will set up sending emails from your custom domain alias from Gmail. Gmail auto-selects the email alias based on which address you received the email. When you receive an email to your personal email you@gmail.com, then you can reply to it from that email. Otherwise, If the email is sent to you@domain.com then you can reply to it from the same domain alias.

Follow the steps to set it up!

Note: You can skip this step if you want to use an external SMTP Server. Just go to step 3 and add your SMTP Details.

1. Enable 2-Step Verification

2-Step Verification is mandatory for using email as an alias in Gmail. Click on the following link to enable it

Enable Enable 2-Step Verification

2. Generate your App Password

Visit “App passwords" from Manage Account -> Security.

Direct Link: https://myaccount.google.com/apppasswords

Under “App passwords" click Select app and then Mail.
Click Select device and then Other.
Enter the custom name (eg: your email address) and click Generate.
From the app password box, copy the 16 character password generated.

You'll need this password for the next step. Paste it in a safe place.

Important: If you are using Google Workspace, visit your Workspace Settings for Gmail -> Advanced settings and make sure to check "Allow users to send mail through an external SMTP server...".

3. Add an email alias

Go to Gmail and under Settings -> Accounts and Import -> Send mail as, click "Add another email address"

Then enter the Name that you want your email to be seen as "From". For "Email address", enter the email address with the custom domain you used above (e.g. hello@web3templates.com)

Confirm that "Treat as an alias" is marked, and click "Next Step" to proceed.

On the next page, In the "SMTP Server" field, enter smtp.gmail.com. and leave the port as 587

In the "Username" field, enter the portion of your Gmail address without the gmail.com part (e.g. just "user" if my email is user@gmail.com)

Fill in the "Password" field with the password you generated above.

Now, you will receive an email from Gmail with a confirmation code. Since you have set up the forward already, you should see It in your Gmail itself. Open that email and copy the code and paste it to the following screen.

Final Step

Now, open your Gmail settings -> Account & Imports -> "Send Mail as". Then check the radio button says "Reply from the same address the message was sent to"

Done 🎉

Congratulations! You've successfully completed all steps. Now you will be able to receive & send emails from your own custom email address inside your Gmail Account. Make sure to test it from a different email address (Don't test from the same email).

Let me know what you think in the comments.

Sync GitHub Fork with Original Repo (not using command or bash)

Surjith S M — Sat, 20 Mar 2021 08:35:33 GMT

If you are new to git, you might have a hard time syncing your fork with the original repo. It's not easy for a beginner. It requires some long steps as explained in the official docs. But there is a better & sneaky way to do that using github.com itself. No need to touch command or bash.

If you prefer a video, You may watch it here or scroll below.

How to sync Github repo with original?

So, if I have forked a repo from GitHub and then made some changes, then whenever the original repo pushed an update, it's a pain in the * to sync with it. So let's see how I tackle this issue.

Step 1: Your forked repo

Once you open your forked repo, you can find a banner on top if there are any new updates available from your original repo. There would be an option to Pull Request.

Step 2: The Pull Request Problem

Click on the pull request button and it will take you to the original repo and GitHub will start a pull request on the original repo. This is exactly the opposite of what we want.

As you can see in the below screenshot, Gituhb took us to the original repo and asking us to open a pull request on the original repo. We want the original to sync with our forked repo.

This is currently not possible with the current UI because if we tried to change the base repository or head repository, it will change to compare branches only. See below GIF.

Step 3: The Sneaky way to tackle the issue

As you see above we can't really open a pull request in our repo from the original. So we can do this little hack to do that.

Here are how the URLs look like right now.

Original Repo URL

https://github.com/mikecao/umami/

Forked Repo URL

https://github.com/surjithctly/web3analytics

Github Compare & Pull Request URL

https://github.com/mikecao/umami/compare/main...surjithctly:main

Now, here's the trick.

Replace the first part of the Compare and Pull Request URL with your Forked repo URL.

Example:

// Before
https://github.com/mikecao/umami/compare/main...surjithctly:main

// After
https://github.com/surjithctly/web3analytics/compare/main...surjithctly:main

Now, change your username in the last part with the original repo Author.

Example:

// Before
https://github.com/surjithctly/web3analytics/compare/main...surjithctly:main

// After
https://github.com/surjithctly/web3analytics/compare/main...mikecao:main

Now our Final URL looks like this:

https://github.com/{username}/{forked_repo}/compare/main...{original_repo_author}:main

Tip: use master instead of main if your repo is created before new github changes.

Step 4: Final Step

Now, visit the URL and if everything is correctly followed, you will see a compare & pull request page on your forked repo. Like the image below:

Now, you can click on the Pull Request button as usual. It will open a new pull request on your fork. If there are no conflict, it can merge automatically.

You are done!

That's all folks. How do you sync your repos? Do you have any good alternative way to do this fast? Let me know in the comments.

Building TailwindCSS Components — Web3Templates

Surjith S M — Sat, 06 Feb 2021 13:47:34 GMT

Web3Templates Components is an growing Library of Components built with TailwindCSS you can copy paste to your Tailwind Projects. Do whatever you want with it.

I had this idea for a while. But I procrastinated. When I saw the Vercel Hackathon, I couldn't resist myself. To I started working on it. Here is how!

Building the Base

I initially planned to do this with Eleventy, however I decided to start with Next.js instead. So the first thing was to setup Next.js & TailwindCSS. Luckily I have created a starter template called NEST Starter which supports both, So I used it as my starting point.

Setup Component Preview

The next complex thing was to setup the component preview. It took more time as expected. I also added an option to preview responsiveness which had so problems I have to solve.

Component preview resizer

Since I have to show its responsiveness, I have added a resize handle on the right side. Now I wanted a plugin which helps me to resize the component. I have tried few plugins and those were too complex to implement. I finally settled on re-resizable

Responsive View of a Component

Just by resizing a container, the component inside will not show the responsive view because the screen size does not change. We have to resize the entire browser. That's how media query works now. This is one reason we should plea for Container Queries to W3C.

We can fix that problem by adding it inside an iframe. But here comes another problem, since the height of an iframe will change based on the content, the parent page cannot render it properly. Thus it have to be a fixed height. To solve that I used the react version of iframe-resizer

After some trial and errors, both worked as expected. Now the next phase is to actually make some components. For the initial launch I planned to create components which are much-needed among developers.

Creating Components

I have quickly created few components, but I couldn't do more for the hackathon as the deadline is reached.

Website Link & Source Code

Checkout: https://web3templates.com/

Source code: https://github.com/surjithctly/web3templates.com

Hosting

This is my favorite part. just push the code to github and the rest will take care by Vercel . I liked this service very much. Their only drawback is they don't let you connect Organization Accounts in the free plan. Since Github made organizations free, small founders are using it, but Vercel thinks its a big company and should pay 😀

Conclusion

That's it. I'll be adding more components to it each week. So stay tuned for something awesome.

How to setup Sanity CMS with Next.js & TailwindCSS

Surjith S M — Fri, 29 Jan 2021 15:55:42 GMT

There are many Headless CMS out there, From that Sanity CMS is what I liked to pair with Next.js because of three main reasons.

First, the schema & the UI is completely controlled by the code so that we can customize it in any way we like. There are no restrictions. They are using react for their UI, so we can customize it as we like. In case of other CMS, we have to stick with their UI & only use whatever option they provides.

Second, The Admin UI can be completely hosted anywhere we like and it will communicate with the main server in real-time. While using another CMS like DatoCMS or Contentful, we have to open their website and login to access our website content. But in Sanity, we can host the Admin in our server itself.

See an example on how it might looks like:

Without Sanity

Website: https://web3forms.com/ 

Admin: https://username.someothercms.com/dashboard/manage

With Sanity

Website: https://web3forms.com/ 

Admin: https://web3forms.com/studio

How cool is that. When doing projects for clients, this will be a main turning point. In my knowledge this feature is only providing by Sanity CMS & Netlify CMS.

Third reason I like sanity is because its beautiful design. I have played around with some other CMS, when the design is good, the pricing keeps us away. But I liked the UI Design of Sanity along with a better Pricing, This is of course a personal opinion.

So, without wasting much time, let's dive in.

Setting up Next.js & Tailwind

This is pretty straight forward, also there are many tutorials available. So I won't get deep, but I have also made a starter template which you can use to save time.

Next.js & TailwindCSS Starter Template

First step is to install Next.js with their bootstrap template called "Create Next App". If you want an in depth tutorial, visit: Next.js Docs

npx create-next-app
# or
yarn create next-app

Now we can install TailwindCSS. This also easy. Follow the steps below or checkout the official docs here: Install TailwindCSS with Next.js

npm install tailwindcss postcss autoprefixer
# or
yarn add tailwindcss postcss autoprefixer

Now Generate your Configuration file.

npx tailwindcss init -p

This will create a minimal tailwind.config.js file and postcss.config.js at the root of your project. Make sure you add purge settings to remove unused classes from production build.

Now add TailwindCSS file eg: /styles/tailwind.css

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

Then you can include the CSS in pages/_app.js

That's it! Done! now run the following command to see if everything working. You should be able to see it live on http://localhost:3000

Setting up Sanity CMS

The first step is to install Sanity CLI globally. use the following command to do that.

npm install -g @sanity/cli

Now, go to the root folder of your created next.js app, and run the following command.

sanity init

The above command will walk you through some steps to create / login to an account, creating a project, set up the dataset, generate the files, etc.

The only thing to consider is when it ask to choose a folder name, make sure its in the root folder of next.js and name it as something like studio or admin

Now, the folder will create in the root of Next.js project.

Setup Admin Path

To setup the admin path as /studio or /admin as I mentioned in the intro, you have to configure some steps. Go to next.config.js (or create one) and add the following code.

const STUDIO_REWRITE = {
  source: "/studio/:path*",
  destination:
    process.env.NODE_ENV === "development"
      ? "http://localhost:3333/studio/:path*"
      : "/studio/index.html",
};

module.exports = {
  rewrites: () => [STUDIO_REWRITE],
};

You may change the word studio to admin if you like. This uses Next.js rewrite function so that we don't need to browse separate URL.

Also, make sure you update the basepath in studio/sanity.json so that the dependencies resolves correctly.

  "project": {
    "name": "Your Sanity Project",
    "basePath": "/studio"
  },

Setup CORS

If you are doing the step above, you must allow CORS origin from the Sanity Project Settings. Go to: https://manage.sanity.io/projects/{project_id}/settings/api

Project ID can be found in /studio/sanity.json

Now, click on ADD ORIGIN button on the page and add your URL & Enable "Allow Credentials" checkbox.

Since I run Next.js on port 3000 on localhost, I'm using that URL, You can also add the Production URL in same way.

Configure Development Server

The next step is to run both Sanity & Next.js Together. For that, we have to do some steps.

Install Concurrently Plugin

npm install -g concurrently
# or
yarn add -g concurrently

Now, open your package.json and change your build script like this.

  "scripts": {
    "dev": "concurrently \"next dev\" \"cd studio && sanity start\"",
    "build": "echo 'Building Sanity to public/studio…' && cd studio && sanity build ../public/studio -y && cd .. && cross-env NODE_ENV=production next build",
    "start": "next start"
  },

This will make sure Next.js & Sanity runs & build together.

Add .env for Sanity

You have to add a .env file to add the project ID. Use the following:

# For Studio Locally
SANITY_STUDIO_API_PROJECT_ID = "PROJECT_ID"
SANITY_STUDIO_API_DATASET = "production"

# For Next Locally
NEXT_PUBLIC_SANITY_PROJECT_ID = "PROJECT_ID"
NEXT_PUBLIC_SANITY_DATASET = "production"

Make sure your env name is .env and not .env.local or you will spend countless hours debugging the issue like me 😀

Setup Next Sanity Plugin

Now, we need to install one last plugin which is called next-sanity. This plugin is needed so that we can call the API easily. The plugin will handle the rest.

npm install next-sanity
# or 
yarn add next-sanity

Now, create a file called sanity.js in /utils folder in the root of our project. This will be file communicating with the plugin. (Code taken from the next-sanity repo). No changes need in the below file, Just copy-paste and save.

import {
  groq,
  createClient,
  createImageUrlBuilder,
  createPortableTextComponent,
  createPreviewSubscriptionHook,
  createCurrentUserHook,
} from "next-sanity";

const config = {
  /**
   * Find your project ID and dataset in `sanity.json` in your studio project.
   * These are considered “public”, but you can use environment variables
   * if you want differ between local dev and production.
   *
   * https://nextjs.org/docs/basic-features/environment-variables
   **/
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET || "production",
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
  useCdn: process.env.NODE_ENV === "production",
  /**
   * Set useCdn to `false` if your application require the freshest possible
   * data always (potentially slightly slower and a bit more expensive).
   * Authenticated request (like preview) will always bypass the CDN
   **/
};

/**
 * Set up a helper function for generating Image URLs with only the asset reference data in your documents.
 * Read more: https://www.sanity.io/docs/image-url
 **/
export const urlFor = (source) => createImageUrlBuilder(config).image(source);

// Set up the live preview subsscription hook
export const usePreviewSubscription = createPreviewSubscriptionHook(config);

// Set up Portable Text serialization
export const PortableText = createPortableTextComponent({
  ...config,
  // Serializers passed to @sanity/block-content-to-react
  // (https://github.com/sanity-io/block-content-to-react)
  serializers: {},
});

// Set up the client for fetching data in the getProps page functions
export const sanityClient = createClient(config);
// Set up a preview client with serverless authentication for drafts
export const previewClient = createClient({
  ...config,
  useCdn: false,
  token: process.env.SANITY_API_TOKEN,
});

// Helper function for easily switching between normal client and preview client
export const getClient = (usePreview) =>
  usePreview ? previewClient : sanityClient;

// Helper function for using the current logged in user account
export const useCurrentUser = createCurrentUserHook(config);

Creating the Schema

Now, open the /studio/schemas/schema.js file and add a sample schema. More details about this can be found on Sanity Docs

Here I am adding a sample schema called "Settings"

// First, we must import the schema creator
import createSchema from "part:@sanity/base/schema-creator";

// Then import schema types from any plugins that might expose them
import schemaTypes from "all:part:@sanity/base/schema-type";

// Then we give our schema to the builder and provide the result to Sanity
export default createSchema({
  // We name our schema
  name: "default",
  // Then proceed to concatenate our document type
  // to the ones provided by any plugins that are installed
  types: schemaTypes.concat([
    /* Your types here! */
    {
      title: "Settings",
      name: "settings",
      type: "document",
      fields: [
        {
          title: "Website Name",
          name: "name",
          type: "string",
        },
      ],
    },
  ]),
});

Don't fret, we only need to add schema inside the types, the rest of the code is already there for us. Pretty neat!

Making it Singleton (one-off)

Since the example I have shown above is for singleton document type, which means we only need to add this once, not repeatable like Blog Articles. We need some more configuration to do that.

Skip this step if you don't plan to use singleton.

This is the only thing I hate about Sanity right now, there is no easy way to make a singleton document. Its bit long route (As of Jan 2021). Hope they fix this in their future update.

So to make a singleton document, we have to create a file called "deskStructure.js". It will contain code something like this:

import S from "@sanity/desk-tool/structure-builder";

const hiddenDocTypes = (listItem) => !["settings"].includes(listItem.getId());

export default () =>
  S.list()
    .title("Content")
    .items([
      S.listItem()
        .title("Site settings")
        .child(S.document().schemaType("settings").documentId("settings")),
      // Add a visual divider (optional)
      S.divider(),
      // List out the rest of the document types, but filter out the config type
      ...S.documentTypeListItems().filter(hiddenDocTypes),
    ]);

Read more about Structure Builder on Sanity Docs

Now, we need to add the path in sanity.json. Open the file and add these lines.

 "parts": [{
      "name": "part:@sanity/base/schema",
      "path": "./schemas/schema"
    },
    {
      "name": "part:@sanity/desk-tool/structure",
      "path": "./deskStructure.js"
    }
  ]

That's it, we are good to go now.

Adding Content in Sanity CMS

Its the time to add a sample content to our Database. Run the following command to start Next.js & Sanity together:

npm run dev
# or
yarn dev

Then open http://localhost:3000/studio

🥳 Our Sanity Studio is live (if followed the steps correctly), Now login to your sanity account (I prefer Github Login). Once logged it, click on our newly created type "Site settings" and add a sample content by clicking it.

Getting the data in Next.js

Now comes the final part, getting sanity content inside our next.js page. for that there are some steps. Please follow along.

First, you need to know the query language called groq. That's what sanity is using by default. Also they do provide an option for graphql.

Import Next Sanity & utils/sanity in our next Page. In this case I'm using index.js.

import { groq } from "next-sanity";
import { getClient } from "../utils/sanity";

const query = groq`*[_type == "settings"]{
  name,
  _updatedAt,
}`;

Now in the bottom of the page, also add the following code to get the data

export async function getStaticProps() {
  let response = await getClient().fetch(query);

  return {
    props: {
      settings: response || null,
    },
    revalidate: 5,
  };
}

Now we will be able to call this props in our function like this:

export default function Home(props) {
  const settings = props.settings[0];
  return (
    Welcome to {settings.name}
  );
}

🥂🥳 Yaaaayyy!!! That's it. Now refresh your browser and see your data.

Hope this tutorial helps you get started. Don't forget to checkout the Sanity Docs for more information & help. They also have some nice starter templates.

If you have any questions or feedback, comment below

Follow me on Twitter

Git Cheatsheat for beginners with VSCode

Surjith S M — Thu, 21 Jan 2021 09:24:41 GMT

I decided to start with Git & Github for one of my existing projects.

I started with creating a Github Repo with my account.

Mistake #1

I initiated the repo with Readme & .gitignore. Since I already have a project to publish to GitHub, you should keep it blank, or otherwise, you will get an error asking to pull first, and that pulling will also fail due to history unmatch error, same as me :)

Initialize Git

First, install git from https://git-scm.com/, and it's better to install Powershell as well if not installed before. (Only for Windows users 😋)

Then open the project folder in VSCode and click the third icon from the left menu called "Source Control" and click "Initialize Repository"

Terminal way.

Open VSCode and press Ctrl + ` to open integrated terminal. In my case it's Powershell.

Now type the following command.

> git init

Adding a Remote Server (Connect to Github)

Inside VSCode press CTRL+SHIFT+P and type "Git Origin", Select the same from the list and add your Origin URL (ie GitHub *.git URL)

The same can be done via a terminal. See below.

$ git remote add origin https://github.com/user/repo.git

Once added you can commit your changes by clicking the "Tick Icon" in the Source control Tab. When you are ready to push to GitHub, click the 3 dots ... menu and choose "Push".

This is where I did wrong. As I already have an existing project but Github is initiated with Readme, it asks to pull first. When doing that it pops another error that says the history is not matching.

If you got this error, please read Mistake #1 to avoid this later. For now, you can use the below code to overwrite it.

$ git pull origin main --allow-unrelated-histories

Adding multiple Origins

Sometimes you want to add multiple origins when you have to use bitbucket or GitHub or even with two different accounts on GitHub. In that case, you can run the following command to add a new origin. Change originname with your origin name. It can be any text.

$ git remote add originname https://github.com/another_user/another_repo.git

Now when you need to push this to that particular origin, run the following:

$ git push originname main

Git Stash & POP

This is useful when there are multiple people working on the same project or working on multiple branches. It won't work if you have existing commits. In that case, you can check the merge option below.

What Git Stash does is save all of our working files in temporary storage and revert to the original state. So that we don't lose our changes. From there you can pull the latest and commit using Git Stash Apply or Pop.

When do you need this?

When any other developer modified the same files and you want to see/work on that updated files.
When you mistakenly worked on the X feature branch but should actually be the Y feature branch.

Commands


$ git stash 
// Stash current directory and revert to original

$ git stash save "message"
// save in a separate stash (multiple stash)

$ git stash list
// See current stash

$ git stash apply
// Apply saved stash but keep the stash

$ git stash pop
// apply saved stash and delete

Then after these commands, you will be able to pull/push as usual.

Some StackOverflow answers also mention the use of --force or -f tag but if it's in the case of the big project it might get messed up.

Git Checkout Branch

A branch is a powerful feature in git where you can make edits to a project without affecting the main source code.

Checkout existing branch

To checkout existing branch, use the following command


$ git checkout existing-branch-name

Creating a new branch

To create a new branch, use the following command


$ git checkout -b new-branch-name

These commands will change the current working directory to your newly selected branch.

Git Merge

Suppose you are working on a feature branch, while in development, the master is getting new updates from other pull requests. Now if you want to get those latest features on your branch, you can use the following code.

git merge master

If you want to keep track of the branch and don't want so shift HEAD, you can use the following no-fast-forward flag.

git merge --no-ff master

Here's an image to understand it better:

PS: Make sure your local master is up to date with the remote (git pull) as the merge will use the files from the local master only.

I will be adding more findings when I learn them, If you have any suggestions to improve my Git workflow, comment below.

Peace!

How to Setup a Working Contact Form in your Hashnode Blog?

Surjith S M — Mon, 21 Dec 2020 15:28:45 GMT

If you are using a hashnode blog, chances are you don't have a contact form in your blog. However its now easy to add one with their Widget Option where you can embed on a separate page on inside a blog post. The options are limitless. I'll explain how we can do it. before that, here's a quick preview on how it looks like

Form Preview

Feel free to submit this form to test it 😊

How to Setup this Contact Form

This is possible with my another side project called Web3Forms. Its a simple way to create contact forms for any static / jamstack websites, No backend required.

Step 1

So, the first step is to create an Access key from Web3Forms to start receiving email submissions to your form. Please also note, there is No Signup / Login needed for Web3Forms, so it should be easy to setup.

Go to https://web3forms.com/
Click "Create Access Key"
Enter Email and Submit
Check your Email for Access Key
There is no Signup / Login Process (yay! 🎉)
Done.

Step 2

Once you've got the Access Key, Add the following code in your Hashnode Blog -> Dashboard -> Widgets -> Add New Widget

Note: This code is a replica of the form preview you've seen above. Since its pure HTML & CSS. You have full customization & design options.

<div class="w3_contact_form">

  <form action="https://api.web3forms.com/submit" method="POST" id="form">

    
    <input type="hidden" name="apikey" value="YOUR_ACCESS_KEY_HERE">

    <input type="hidden" name="subject" value="New Contact Message from My Blog">

    <div class="input-group">
      <label for="name">Your Namelabel>
      <input type="text" name="name" id="name" class="form-input" required>
    div>
    <div class="input-group">
      <label for="name">Email Addresslabel>
      <input type="email" name="email" id="email" class="form-input" required>
    div>
    <div class="input-group"> <label for="name">Messagelabel>
      <textarea name="message" id="message" class="form-input" rows="8" required>textarea>
    div>
    
    <input type="hidden" name="redirect" value="https://web3forms.com/success">

    
    <input type="checkbox" name="botcheck" class="hidden" style="display: none;">

    <button type="submit" class="submit-btn">Send Messagebutton>

  form>
div>

<style>
*,
::before,
::after {
  box-sizing: border-box;
}

body {
  font-family: Inter var, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
    sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
    Noto Color Emoji;
padding:50px;
}
.w3_contact_form {
  max-width: 500px;
  margin: 0 auto;
  border: 1px solid #eee;
  border-radius: 20px;
  padding: 50px;
  box-shadow: 0 0 50px #ececec;
}

.form-input {
  padding: 20px;
  border-radius: 10px;
  border: solid 2px #dedede;
  outline: 0;
  font-size: 18px;
  width: 100%;
  background-color: #fff;
}
.input-group {
  margin-bottom: 15px;
}

label {
  color: #8e8e8e;
  display: block;
  margin-bottom: 7px;
}

.hidden {
  display: none;
}

.submit-btn {
  width: 100%;
  padding: 20px;
  background: #2962ff;
  border: 0;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  font-weight: medium;
  cursor: pointer;
}

.submit-btn:hover {
  background: #2962ff;
}

@media (max-width: 500px) {
  body {
    padding: 10px;
  }
  .w3_contact_form {
    padding: 20px;
  }
  .form-input {
    padding: 15px;
  }
}


style>

Step 3

Now its time to Add the Access Key and the form contents.

Replace "YOUR_ACCESS_KEY_HERE" with your actual access key received in your email. Then you can customize the input fields, design and more as your creativity. No limits here. Or you can just put defaults to look like the above demo.

Currently the form redirects to https://web3forms.com/success URL. You can also change this URL to your custom website or page by changing the redirect attribute.

You can also change the Subject field or let users fill it by changing the input type from hidden to text.

Step 4

Now you can save this widget by naming it as web3forms and you will be able to use the widget across Hashnode using the the short tag %%[web3forms]

That's it. You should have a Working Contact form inside your Hashnode blog.

PS: Web3Forms is currently in Beta, let me know if you found any issues.

Let me know what you think in the comments.

Follow me on Twitter

Get URL Query Params in Next.js using getInitialProps()

Surjith S M — Tue, 01 Dec 2020 09:22:13 GMT

As the title says, this is a simple code snippet to get URL Query params in Next.js using getInitialProps() method.

In Next.js, getInitialProps() have context property where URL query can be fetched using query. See example code below.

URL: http://localhost:3000/?title=Awesome&desc=Content

Page.getInitialProps = async (context) => {
  return { 
    title: context.query.title, 
    desc: context.query.desc 
  };
};

Now we can get these values in our function like this:

export default function Page({ title, desc }) {
 return (
    <>
       Title: {title}
       Desc: {desc}
    
}

Black Friday & Cyber Monday Deals for Developers & Designers

Surjith S M — Mon, 23 Nov 2020 09:56:43 GMT

Black Friday (Nov 27) and Cyber Monday (30 Nov) of 2020 is here. There are many startups & SAAS offering great discounts on these days. Its the time to fulfill your Wishlist. Here are list of offers & discounts I have curated. I'll be keep adding new resources as I find them. So please bookmark and come back again.

Last Updated: Monday, 23 Nov 2020

Carrd (50% Off)

50% off the first year of any Pro plan OR 50% off a one-year renewal of your current Pro plan.

Coupon Code: BLK2020

👉 Grab this deal -->

Envato Elements ($19/m)

40% off on Monthly & 25% off on Annual Subscription. Envato Elements Subscription offers unlimited downloads across 53+ million creative assets.

Date: Nov 30 to Dec 2, 2020

👉 Grab this deal -->

Envato Market

50% off 500+ best-selling and trending items from ThemeForest, CodeCanyon, GraphicRiver, VideoHive & AudioJungle! Hand-selected, premium quality items for you to drive big sales results.

Date: Nov 24 to Dec 2, 2020

👉 Grab this deal -->

UI8 (90% Off)

Hundreds of premium UI Kits, Illustrations and more products for up to 90% off

Date: till Nov 30, 2020

👉 Grab this deal -->

Elementor (25% Off)

25% discount on new ‘Expert’ plans and 10% off of 'Plus' plans!

Date: Nov 24 to Dec 2, 2020

👉 Grab this deal -->

Creative Market (75% Off)

Explore hundreds of essential creative elements up to 75% Off. Illustrations, social media templates, Procreate brushes and more are on sale now.

Date: till Nov 30, 2020

👉 Grab this deal -->

Email Octopus (50% Off)

Upgrade to a paid EmailOctopus plan in November and save 50% on your email marketing for the next three months.

Coupon Code: BF2020

👉 Grab this deal -->

Creative Tim (90% Off)

Up to 90% off on most bundles

👉 Grab this deal -->

Namecheap (99% Off)

Save up to 99% on Domains & Hosting

👉 Grab this deal -->

Adobe Creative Cloud (25% Off)

It’s on. Get 25% off. Black Friday savings on the new release of Creative Cloud.

Date: till Nov 27, 2020

👉 Grab this deal -->

Bluehost (60% Off)

Get up to 60% off now. 60% Off Select Website Plans. 40% Off Select Online Store Plans. 30% Off Select Domains

👉 Grab this deal -->

Designmodo (60% Off)

For 3 days only, Designmodo have dropped the prices for all of our Apps. Buy Startup, Slides, or Postcards apps and start to create websites and email newsletter templates online!

Coupon Code: BLACK

👉 Grab this deal -->

Getillustrations (25%)

25% Off on 4268 Vector illustrations stories that makes your designs standout.

Coupon Code: EARLYBIRD

👉 Grab this deal -->

Themesberg (90% Off)

Black Friday has officially started at Themesberg and now you can get all of our themes for a special price reduction of up to 90%! There are only a limited amount of 150 orders.

👉 Grab this deal -->

Craftwork Design (50% Off)

Up to 50% off for Interface assets for designers and startup creatives

👉 Grab this deal -->

and more.. (check back later)

I'll be adding more deals here as I find them, please check back later. Do you know any awesome deals I missed here? Please comment below.

Follow me on Twitter

What's new in TailwindCSS v2.0 & How to Upgrade?

Surjith S M — Sat, 21 Nov 2020 15:00:13 GMT

Few days ago, On Nov 18th, TailwindCSS released its newest version to the public. Which is v2. There are some exciting new features in v2 and I will share it in this post and will guide you on how you can upgrade to newer version without any issues.

Jump to Upgrade Guide 👇

New color palette

The new version includes a total of 220 colors with 22 color groups along with an extra -50 option (eg: text-red-50). It also includes 5 types of gray from cool to warm.

However, by default, tailwindcss ship with 8 base color groups only to control the filesize. However you can configure the color you use and remove the one not using the tailwind.config.js file.

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      gray: colors.coolGray, 
      emerald: colors.emerald,
      fuchsia: colors.fuchsia,
    },
  },
}

Dark Mode

This is one of the anticipated feature of v2. Now TailwindCSS supports out of the box support for dark modes. Because of the size constraints, dark mode is not enabled by default. You should manually enable it from tailwind.config.js

// tailwind.config.js
module.exports = {
  darkMode: 'media',
  // ...
}

By using above function, tailwind will respect OS preference and apply dark classes. The HTML will look like this:

<div class="bg-white dark:bg-black">
  <h1 class="text-gray-900 dark:text-white">Dark modeh1>
  <p class="text-gray-500 dark:text-gray-300">
    The feature you've all been waiting for.
  p>
div>

Tailwind also provides an option to control dark theme using a class name called dark, so the config should look like this:

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

Here's how the HTML will look like:


<html class="dark">
<body>
  <div class="bg-white dark:bg-black">
      content
  div>
body>
html>

You may even add hover and focus styles to dark theme like dark:hover:bg-gray-50 or for responsive lg:dark:hover:bg-gray-50

Extra 2xl Breakpoint

TailwindCSS v2 added an extra media query breakpoint for extra large screens above 1536px using the class 2xl:

Outline Ring Utilities

TailwindCSS v2 ships with new Outline Ring utilities. We all know the default outline is broken and we have a tendency to un-style it. Using v2, you can simply solve this problem by adding ring utilities.

<button class="... focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50">button>

Use @apply with anything

Previously, @apply was not able to use with hover, focus & media query elements. However from v2, you can use this in one class and TailwindCSS will generate it properly for you. Pretty neat!

.btn {
  @apply bg-indigo-500 p-3 md:p-5 hover:bg-indigo-600 focus:ring-2 focus:ring-indigo-200 focus:ring-opacity-50;
}

Dropped IE 11 Support

Along with Bootstrap 5, TailwindCSS also made the brave move to stop supporting IE 11. This resulted in lower file size than before. If you still need IE 11 support, you can use v1.9 which is still great.

and more..

There are still lot of new features such as Utility-friendly form styles, Default line-heights per font-size, Extended spacing, typography, and opacity scales, New text overflow utilities, Extend variants, Group-hover and focus-within by default, Default transition duration and easing curve etc.. Be sure to check them out in their official blog.

TailwindCSS v2 Upgrade Guide

To make the TailwindCSS upgrade less painful, the creators made a cool new option to allow v1.x users to use the future features using a flag. So if you are one of the user who is using the future or experimental features, its really less complicated. Even if you don't use, I will guide you in this section.

Updating packages

TailwindCSS requires PostCSS 8 & latest autoprefixer to run properly. So run the following command to update packages.

npm install tailwindcss@latest postcss@latest autoprefixer@latest

If your tool is not ready with postcss 8, you might get an error while using the latest build. To use Postcss 7 compatible version, you should uninstall TailwindCSS and run this command instead.

npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Note: TailwindCSS v2 does not support IE 11 and it requires Node.js 12.13 or higher in both your local and CI environments.

Typography & Forms

If you were using these plugins, you should update it to the compatible versions for v2.

@tailwindcss/custom-forms is no more supported and its replaced with new plaugin called @tailwindcss/forms

Renamed class names

Some class names have been renamed. If you are using those class names, you should do a global text search and replace it with new class names.

Old Name	New name
whitespace-no-wrap	whitespace-nowrap
flex-no-wrap	flex-nowrap
col-gap-	gap-x-
row-gap-	gap-y-

Replace clearfix

If you were using clearfix classes, it has been now removed. New flow-root class does the same. So you should use this instead.

Replace shadow-outline and shadow-xs

The shadow-outline and shadow-xs classes has been removed in favor of new ring utilites. Again do a global search and replace it with new classes if needed.

 
<div class="... focus:shadow-outline">
 
<div class="... focus:ring">

 
<div class="... shadow-xs">
 
<div class="... ring-1 ring-black ring-opacity-5">

Updating Colors

Colors like Teal and Orange is removed from the default color palette in the new version. So if your old project is using that, you should specifically include it from the 22 color groups they provide. If you wish, you can customize it as you would do in previous versions.

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      gray: colors.trueGray,
      teal: colors.teal,
      red: colors.rose,
      orange: colors.orange,
      violet: colors.violet,
    }
  }
}

Conclusion

These are the main points you should consider while updating to TailwindCSS v2. However there are still many small factor you should consider. So make sure you read the official Upgrade Guide as well.

Follow me on Twitter

Creating re-usable Components with Eleventy using Shortcodes (Advanced)

Surjith S M — Fri, 20 Nov 2020 12:48:44 GMT

If you are creating websites with Eleventy, sometimes, you will need to create a reusable component where you can re-use it on many places. Eleventy provides us a neat way to handle this using shortcodes. However, this requires registering the shortcode inside .eleventy.js. However when you have a lot of components, it would be better if we could organize it better.

In this article, I'll be showing how you can create as many components without polluting .eleventy.js. If you only need simple integration, Please refer the Official Docs.

I have created an Eleventy Starter Template called "NEAT Starter"
View on Github

The Plan

When we have many components, its better to organize in files & folder. So first we will create a components folder inside _includes/ and then inside components, we create another folder called shortcodes. This is where we put all re-usable components. We will also create a file inside the components folder called shortcode.js where we import all component shortcodes and register in Eleventy.

Writing Shortcode

First, let us write our first shortcode to return full name & username of a user. Create a user.js file inside components/shortcodes folder and write some code like this:

// components/shortcodes/user.js

module.exports = (data) => {
  return `
${data.name}
@${data.username}
`;
};

Registering Shortcode

Now Register this shortcode inside components/shortcode.js file by importing the above shortcode and pass it as an argument.

const user= require("./shortcodes/user.js");

module.exports = function (eleventyConfig) {
  eleventyConfig.addShortcode("user", user);
};

Adding to .eleventy.js

Now we need to integrate it to .eleventy.js to make it working.

const addShortcodes = require("./_includes/components/shortcode.js");

module.exports = function (eleventyConfig) {
  ....
  addShortcodes(eleventyConfig);
  ....
}

Calling the Component

Now call the component anywhere you like (eg: any html or njk files) like the following.

{% user name="Surjith", username="surjithctly" %}

That's it. Now just refresh the server using npm run start to see the changes.

Note: If you make some changes later to the js files, you might need to restart the server each time to see the new changes.

Adding More Components

Our main objective is to create many components. So let's create another one and see how we can do that. This time, we will create a Paired Shortcode, so that you can put content inside the shortcode (like a wrapper). Learn more . Create a card.js file inside components/shortcodes folder and write some code like this:

// components/shortcodes/card.js

module.exports = (content, options) => {
  return `
${options.title}
${content}
`;
};

Registering Paired Shortcode

Now Register this as paired shortcode inside components/shortcode.js. We will add this along with our previous shortcode.

const user= require("./shortcodes/user.js");
const card= require("./shortcodes/card.js");

module.exports = function (eleventyConfig) {
  eleventyConfig.addShortcode("user", user);
  eleventyConfig.addPairedShortcode("card", card);
};

This time, we don't need to add config to .eleventy.js because its already handled by our previous import. That's the benefit of using this method instead of adding every config inside the .eleventy.js.

Calling the Component

Now we call the component anywhere same as the other one. However note the endcard since we are using paired shortcode.

{% card title="Awesome Title"  %}
  Hey, This should render as card content.
{% endcard %}

However, you will need to restart the server to view the changes. Run npm run start to view the changes.

Wrapping up

Same way, you could create as many re-usable components you want. You may also create subfolders to arrange it even better.

Let me know your thoughts.

Follow me on Twitter

Creating a Floating Label Input form using TailwindCSS (No Javascript)

Surjith S M — Thu, 12 Nov 2020 12:37:09 GMT

Here's how you can create a floating label input form using TailwindCSS. We will be doing it with TailwindCSS & some good ol' custom CSS. No need to use javascript for this technique.

The HTML

First create an input with a wrapping div with class name floating-input. Make sure the input have a placeholder attribute because we will be using :placeholder-shown for the floating logic. Then add your label below the input tag. Label should come last because so that we can use the ~ selector to select the sibling using CSS.

Now add the classes for transform, easing & duration to the label. Your final code will look something like the following.

<form class="w-full">
    <div class="floating-input mb-5 relative">
        <input type="email" id="email" class="border border-gray-200 focus:outline-none rounded-md focus:border-gray-500 focus:shadow-sm w-full p-3 h-16" placeholder="name@example.com" autocomplete="off" />
        <label for="email" class="absolute top-0 left-0 px-3 py-5 h-full pointer-events-none transform origin-left transition-all duration-100 ease-in-out ">Email addresslabel>
    div>
    <div class="floating-input mb-5 relative">
        <input type="password" id="password" class="border border-gray-200 focus:outline-none rounded-md focus:border-gray-500 focus:shadow-sm w-full p-3 h-16" placeholder="password" autocomplete="off" />
        <label for="password" class="absolute top-0 left-0 px-3 py-5 h-full pointer-events-none transform origin-left transition-all duration-100 ease-in-out ">Passwordlabel>
    div>
    <button class="w-full bg-indigo-600 text-white p-3 rounded-md">Submitbutton>
form>

The CSS

First set the color of the placeholder to transparent, so that we can still use the property for our logic. The next step is to make transition to the label when the input is focused. We will also make sure no text is typed by the user using placeholder-shown. Then we can also adjust the padding of input to type in the right location. The final custom CSS will look something like this:

.floating-input>input::placeholder {
    color: transparent;
}

.floating-input>input:focus,
.floating-input>input:not(:placeholder-shown) { 
@apply pt-8
}

.floating-input>input:focus~label, 
.floating-input>input:not(:placeholder-shown)~label {
  @apply opacity-75 scale-75 -translate-y-3 translate-x-1; 
}

That's it, our CSS only Floating label is done.

Live Demo: https://play.tailwindcss.com/2Purx7OjqJ

Wrap up

Do you have any other cool ideas to make this work? or did I miss something? Let me know in the comments.

Follow me on Twitter

NEAT Stack: Create a Static Website with Netlify CMS, Eleventy, AlpineJS & TailwindCSS

Surjith S M — Thu, 05 Nov 2020 12:11:21 GMT

In this article, I will explain how you can create a static website with NEAT Stack and setup CMS to edit the content.

What is NEAT Stack?

A NEAT Stack is a way of creating static websites with following tools.

Netlify CMS

Netlify CMS is used to handle the CMS part of this static website. It uses git as backend so there is no need to maintain a different server. Maintained by the awesome folks at Netlify.

Eleventy

Eleventy is a simpler static site generator using javascript. Eleventy will compile all of our files and generate a static output where we can host it anywhere.

Alpine.js

Alpine JS is a minimal framework to provide JavaScript behavior in our markup. Think it as a lite version of React & Vue. We use Alpine JS to add JavaScript components like Dropdown, Toggle etc.

Tailwind CSS

Tailwind CSS is a utility first CSS Framework. It has a set of preset utility classes to style anything without touching CSS file. I have wrote an in-depth article on TailwindCSS , Be sure to read it for more information.

Installation

Setting up a project is the most time-consuming part. However getting started with NEAT Stack is now easy because of the following Starter Template. (its written by me 😊)

Github: https://github.com/surjithctly/neat-starter

Step 1

Open your favorite terminal in your Work folder and run the following command.

git clone https://github.com/surjithctly/neat-starter.git your-project-name

Step 2

Now navigate to the directory

cd your-project-name

Step 3

Now install the dependencies using the following command

npm install

You may also use yarn install if you are using Yarn as a package manager.

Step 4

Now the next step is to build the project for the first time so that it copies all required files.

npm run build

Step 5

Now Run Eleventy to create a server and to start local development.

npm run start

If you have done everything as instructed above, you'll be able to see the following page in your localhost server

Live Demo

Folder Structure

Root / folder of our project contains all configuration files like tailwind.config.js, .eleventy.js etc..

/src folder contains all of our site contents and data. Before configuring anything, lets go to the /src folder and make some changes to see if its working.

Make Changes

Go to the /src folder and open index.html file in your favorite code editor (My favorite is VSCode). Now make any changes and save it to see if the changes are reloading or not. If its reloading with your changes, then it means its working perfectly. If you have any issues, comment here or raise an issue in the github.

Nunjucks

Writing code with NEAT Stack is fun because of Nunjucks . Eleventy supports Nunjucks Templating language by default. So that you can split HTML Code and avoid writing repetitive code like a boss.

Including a part of HTML is easy. Go to src/_includes/partials/navbar.html and make some changes there. Now we can include the navbar anywhere we wanted using {% include ..}

Another great feature of Nunjucks is the Loops. Suppose you have a card block repeating over 10 times, using Nunjucks, just write it once and loop it. means you will be able to modify easily by changing in one place. The data should be seperated here and It will be handled seamlessly by our Eleventy.

Example Nunjucks loop

_data/navigation.yml

items:
  - text: Menu One
    url: "#"
  - text: Menu Two
    url: "#"
  - text: Menu Three
    url: "#"

navbar.html

<ul>
    {% for item in navigation.items %}
        <li class="nav__item">
            <a  href="{{ item.url }}">{{ item.text }}a>
        li>
    {% endfor %}
ul>

That's it. Adding classes or modifying layout is now easier since Eleventy & Nunjucks combined do all the magic for us.

Eleventy Data

Since we talked about the _data above, Its important to know that splitting our code from data helps us to easily modify it using our Netlify CMS. If you enter the data as raw text inside a page, it means you cannot edit that text using CMS. So its important to plan initially according to your needs. Make an list on which data you need to change later and which is not.

By default, Eleventy looks for a folder called _data/ and get the data from the files inside. They accept json, yaml, js etc. So you can write data in any format you like. If you have to fetch a data from a different server, you can create .js file which returns the data.

The _data folder name can be changed using Eleventy configuration

Writing HTML

Its really simple to create pages or sections in Eleventy. Just create an HTML file in the /src folder and it will automatically build it as a page. If you are using Nunjucks, you can also create filename with .njk extension. If you are writing a blog, you can even use markdown .md as well.

Tailwind CSS

Nothing much to talk about TailwindCSS, just add classes as you normally would with any TailwindCSS Projects. If you are new to TailwindCSS, Checkout their website & docs to know more details. (Spoiler Alert: Its awesome!)

Alpine JS

Adding interactivity is easy using Alpine JS. You can learn more about from the docs. Here's how a simple Toggle works with Alpine JS.

<nav x-data="{ isOpen: false }" @keydown.escape="isOpen = false">
  <button @click="isOpen = !isOpen"">Menu button>
  <div :class="{ 'block': isOpen, 'hidden': !isOpen }" @click.away="isOpen = false" x-show.transition="true">
     ... menu
  div>
nav>

Here you can see the initial data is created for isOpen and its set to false and it changes the data on button click. Based on the Value, we just toggle the div visibility. Wasn't it easy compared to jQuery? We didn't even created a js file.

Netlify CMS

To setup Netlify CMS, first you need to connect the project to git. If you haven't already, git init to setup Git and Push to your favorite repository like Github or Gitlab.

By default, Netlify CMS looks for /admin folder and it should contain a Page (eg: index.html) and config.yml file.

Index page should import the Netlify CMS script from their repo. Our Starter template already includes everything, so you don't need to do this manually.


<script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js">script>

Now, coming to the config.yml, we need to setup all configuration options here.

First of all, we need to choose which Authentication we are using for the CMS. If you are using Netlify to host website, you can use it otherwise just use the github Auth.

# Netlify Auth
backend:
  name: git-gateway

# Github Auth
backend:
  name: github

If you want to test the CMS locally, install Proxy Server using the following command.

npx netlify-cms-proxy-server

Now in config.yml, make sure local backend is enabled.

local_backend: true

Now admin can be accessed from localhost:PORT/admin

make sure to run both Eleventy Server & Proxy Server parallelly (using multiple terminal windows)

The next step is to create collections based on our data. There is a well explained docs in their website. So I'm not repeating it here.

Hosting

Once you finished your project, run npm run build and it will create a folder called _site containing all static generated files. Just upload this anywhere you like.

However, to make use of CMS, Try to upload in a server with Continuous integration with Git. The obvious option is Netlify or Vercel. You can also host it on Github Pages or any other places you wish.

Conclusion

That's all folks. This is one of the modern way to create a static website. One thing to mention here is you are free to change the tools used as per your requirements. There is no requirement to use both four tools. Don't like Tailwind? use any other. Don't like AlpineJS? That's fine too. Don't plan to add CMS? Skip that. Its all based on your needs and requirements.

Questions? Suggestions? Comment below.

If you haven't already, Follow me on Twitter.

Bootstrap or TailwindCSS: How to decide a framework for your next project?

Surjith S M — Wed, 04 Nov 2020 14:59:31 GMT

If you are like me, you should be creating websites with the world's popular CSS framework called Bootstrap. But I recently switched to TailwindCSS for a few projects. If you have also seen the hype and wanted to jump in to TailwindCSS yet not completely ready? I'll help you to decide whether you should keep using Bootstrap or switch to TailwindCSS.

A Framework is a framework

First of all, There is no right or wrong way here. Since you are already using Bootstrap, you know the importance and how much time it can save as a developer. Before Bootstrap, we struggled for browser compatibility and make it responsive across devices. But Bootstrap made it easy and we never worried about these since they handled it for us so that we can focus on our design.

What is TailwindCSS

TailwindCSS is also a framework and I would say its also similar to Bootstrap in some ways. Bootstrap is built with two core features: The pre-built Components and Utility Classes. In the other hand, Using TailwindCSS, you will be missing the pre-built components because TailwindCSS is only about Utility Classes

About the Hype

If you watch the developer community closely, you must have encountered developers praising TailwindCSS and using it for their project. Developers with little or no CSS knowledge is loving TailwindCSS because by just remembering few utility classes, they can do many awesome things without even touching CSS file (which is their worst nightmare).

This is the one main reason people love TailwindCSS which you can't do with Bootstrap. Because Bootstrap provides few components but when you want to modify it or create new one, you will have to write custom CSS or SASS. In case of Tailwind, since there is a utility class for everything, its easy in some way.

The Haters

You also might have noticed while some people literally loved TailwindCSS, Many others really hate this framework and they got many reasons for them. My finding is that they are the people knows how to write actual CSS.

Yes. If you are someone who knows how to write proper CSS, you might feel weird to write the same thing as class names. You'll think why don't we write normal CSS instead.

Enter Purge CSS

When using bootstrap, the easier way was to include their CSS using a CDN and do all of our modifications in a custom CSS file. This resulted in a large CSS files and the later version of Bootstrap Promoted SASS to include only the components we actually use. This really helped to reduce the file size.

Similarly, TailwindCSS is also provide a way to remove unused CSS from our project. Since its powered by PostCSS, It scans through all of our files and removes un-used class names from the output. If you compared it with Bootstrap it will be way smaller because in Bootstrap we control the file size by omitting components. Even if you use only one class from one component, you should include the whole component. Thus it increases the file size.

Note: There might be similar tools to purge CSS like TailwindCSS in Bootstrap as well.

Lengthy Class Names

Another main issue people raise with TailwindCSS is their long class names which makes it hard for repetitive elements. While this is true, they provide a nice option to write a single class name if you wish using their @apply directive.

Example

.btn-primary {
@apply bg-blue-500 text-lg py-5 px-3 text-white;
}

Like this, you will be able to use just one class but still use TailwindCSS Utilities.

The Benefits

Now you might be thinking, then what's the difference between writing @apply and normal CSS. The main benefit I see with this method is code organization & maintainability. No matter how many people wrote the CSS, or in how many pages you wrote the CSS, You can assure that there is a standard not just random magic numbers like padding: 17px;

It will be easier to create and maintain a Design System using the tailwind.config.js and you can make sure no extra un-documented classes or property is written to the project.

Coming to the Point

Bootstrap or TailwindCSS? That's the main question and here is a simple way to figure out! Remember, there is no right or wrong way, it will be based on your project and its requirement.

Q) Are you happy with Bootstrap?

A) If yes, keep using it, but try TailwindCSS is any other projects to get familiar with.

Q) Do you feel its hard to maintain Bootstrap CSS overtime?

A) If yes, Use TailwindCSS

Q) Do you have deep understanding in writing pure CSS?

A) Use No framework at all, Just make one for your need. Although its better to try both to get familiar with.

Q) Do you think writing a bunch of CSS class names is funny?

A) You can still use TailwindCSS with @apply directive.

Q) Is multiple people writing CSS in your Project?

A) Go with TailwindCSS as it will reduce your headache while maintaining large project.

Q) Do you think you are too bad at CSS and struggling to make layouts or UI even with Utility classes?

A) Go with Bootstrap as they provide many useful components you can copy paste.

That's it

Hope you have an idea of both frameworks now and how it works, Now its your choice to choose your framework or no framework at all. Remember its all based on our needs and our expertise. I repeat there is no right or bad way.

Let me know what's your favorite and why!

Did I miss something, also let me know in the comments.

Follow me on Twitter

The easiest way to create a responsive navbar menu in React JS using TailwindCSS

Surjith S M — Sat, 31 Oct 2020 09:47:33 GMT

It took me an hour of googling and finding articles, just to create a responsive navigation bar in react JS. I thought why a simple function like this is complicated in react. I was using Next JS & React JS for the first time ever. So I searched for a simple solution.

Every blogs or articles explained the complex way of adding navigation bar. Using some extra plugins or complex setup.

Earlier I did a project with Alpine JS and it was super easy to create a similar responsive menu with hamburger icon. I referred the code once again and found that Alpine JS doing all this magic with one "data". I knew about React Hooks which is similar to the data state in Alpine JS. I ported the data with hooks and viola.. it works without much fuss.

Here's how I did it.

Create a React Hook

First, create a react hook inside your navigation component.

 const [isOpen, setisOpen] = React.useState(false);

Now create an SVG hamburger Menu button that is visible only on mobile (using TailwindCSS Classes)

Then make sure the Menu & Close icon path visible based on the State isOpen.

Click Handler

Now create an onClick handler to handle the click toggle to show / hide menu on mobile.

const Navbar = () => {
  const [isOpen, setisOpen] = React.useState(false);

  function handleClick() {
    setisOpen(!isOpen);
  }

  return (
<button  type="button" className="block lg:hidden" onClick={handleClick}>
...
...

Final Part

And the final part. Make sure to show / hide our main menu based on the state using TailwindCSS Classes.

`lg:flex ${  isOpen ? "block" : "hidden" } `}>
...

That's it. We now have a working Responsive Navbar using React Hooks.

One thing to note here is the hidden class is always added to the
regardless of browser size. But adding our magic lg:flex class overwrites the hidden class in large sreens. So no extra configiration is needed.

Pretty neat!

Live Demo

I can add a live demo on Codepen if you wish, just let me know in the comments.

Conclusion

I found this solution is easier to do a responsive navigation menu in react. If you are not using tailwind, you can still do the same using pure css or scoped css. If you have a better & easy version than this, please let me know in the comments as I'm a beginner in this react world.

Pure Vanilla JavaScript Smooth Scroll to Element on anchor tag click #id

Surjith S M — Thu, 29 Oct 2020 11:59:38 GMT

It took me half an hour and countless of stackoverflow pages to find a perfect solution for a smooth scroll for anchor links.

So I'm adding here it as a snippet for future googlers.

document
    .querySelectorAll('.nav__item a[href^="#"]')
    .forEach(trigger => {
        trigger.onclick = function(e) {
            e.preventDefault();
            let hash = this.getAttribute('href');
            let target = document.querySelector(hash);
            let headerOffset = 100;
            let elementPosition = target.offsetTop;
            let offsetPosition = elementPosition - headerOffset;

            window.scrollTo({
                top: offsetPosition,
                behavior: "smooth"
            });
        };
    });

Note

Please note there is also a new CSS property available to do the same trick, however you won't be able to offset it properly. This will cause issue when you are using a fixed navbar. In that case, JS Solution will be better.

https://twitter.com/surjithctly/status/1293902210753916936?s=20

Migrating from Bootstrap 4 to 5 - Read this before you upgrade!

Surjith S M — Thu, 29 Oct 2020 11:56:31 GMT

Bootstrap 5 is in Alpha Stage and we are all excited about this news as this new update from Bootstrap ships a lot of new features as well as breaking changes from the old version. So we should be very careful when updating your Website or Application to the new version.

What’s new in Bootstrap 5
Upgrade Bootstrap 4 to 5

What’s new in Bootstrap 5

Before we talk about how we can upgrade our website to new version, first let’s checkout the new features of Bootstrap v5.

1. RIP jQuery

Yes. This is the first highlight of Bootstrap 5. It does not ship with jQuery by default. However they are not making the mistake by completely removing it. Instead Bootstrap now provides an option for users to include jQuery if they wish.

All of their components are now powered with Pure Vanilla Javascript. Thanks to the modern front-end development tools and browser support. Here’s what their creators said about dropping jQuery as a dependency.

Personally, I’m forever grateful for the empowerment and support it gave me to continue writing front-end code. it’s forever changed JavaScript itself. Thank you to every jQuery contributor who made that possible for folks like me.

@mdo & team

2. CSS Variables

Since they dropped the support for Internet Explorer, It was easy for them to implement the new CSS Custom Properties that everyone wished for. The distance between SASS and CSS are now reducing day by day.

No more complex installation and compilation just to store some color variables. Yay!!! Here’s how it looks like:

    :root {
      --bs-blue: #0d6efd;
      --bs-indigo: #6610f2;
      --bs-purple: #6f42c1;
      --bs-pink: #d63384;
      --bs-red: #dc3545;
      --bs-orange: #fd7e14;
      --bs-yellow: #ffc107;
      ...

3. Improved Docs

That’s where we spend most of our time. And new Bootstrap 5 has an improved docs. More explanation and new Customize section.

4. Color Palettes

v4 shipped with limited colors. We had to manually create colors for our project because the stock one didn’t fit most of our use cases. But Bootstrap v5 comes with a lot of colors. Really a lot. 100+ color variations are now available to choose from in the new Boostrap 5.

5. Updated Forms

Another revamped area is the form section. It has now new styled components and form controls. Checkboxes are radio boxes are now custom by default. No more .custom- classes needed.

6. Utilities API

Since the popularity of Tailwind CSS, Bootstrap 4 is also giving more options to create utilities. They have built a brand new Utility API to the new version.

7. Grid System

Yes. its still flex based and they have not implemented the CSS Grid yet, but as per their announcement they plan to do so in the future. Since it will be a breaking change. They are very careful about this.

CSS Grid Lovers have to wait longer 😊

8. Bootstrap Icons

Even its not related to the new version, but Bootstap has now their own open sourceIcons library called “Bootstrap Icons“. Be sure to check them out .

9. Coming Soon

At the time of the writing v5 is still in the Alpha Stage. As per their announcement, there are more to come. Features like Official RTL Support (finally!!!), Offcanvas and more are in the pipeline. Be sure to checkout their Github page for more info.

Upgrade Bootstrap 4 to 5

We will list main changes in the bootstrap v5 and then we will show you how you can modify & update it to make it compatible with new Bootstrap 5 version.

Dropped .media Object

This is a breaking change as Bootstrap 5 does not ship with .media object. However it can be easily converted to bootstrap 5 using the utility classes. See the code below.

    

    <div class="media">
      <img src="..." class="mr-3" alt="...">
      <div class="media-body">
        <h5 class="mt-0">Media headingh5>
        Media Content ...
      div>

    

    <div class="d-flex">
      <img src="..." width="144" height="144" class="flex-shrink-0 mr-3" alt="...">
      <div>
        <h5 class="mt-0">Media headingh5>
        Media Content ...
      div>
    div>

Custom Checkboxes and Radio

Previously in Boostrap 4, there were two options for checkboxes. Default and Custom. In v5, they merged in to one.

    

    <div class="custom-control custom-checkbox">
      <input type="checkbox" class="custom-control-input" id="customCheck1">
      <label class="custom-control-label" for="customCheck1">Custom checkboxlabel>
    div>

    

    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
      <label class="form-check-label" for="flexCheckDefault">
        Default checkbox
      label>
    div>

File Browser

Updated file input component with the same overall design, but improved HTML. Refactored .form-file markup to resolve some visual bugs while allowing translation and button text changes via HTML instead of CSS.
Dropped native .form-control-file and .form-control-range components entirely. Renamed .custom-file to .form-file (including variables).

    

    <div class="custom-file">
      <input type="file" class="custom-file-input" id="customFile">
      <label class="custom-file-label" for="customFile">Choose filelabel>
    div>

    

    <div class="form-file">
      <input type="file" class="form-file-input" id="customFile">
      <label class="form-file-label" for="customFile">
        <span class="form-file-text">Choose file...span>
        <span class="form-file-button">Browsespan>
      label>
    div>

Dropped .form-group

Form group class .form-group has been removed in bootstrap 5 in favor of margin utilities. This is one of the the most used bootstrap class. So make sure to change it as per the code below.

    

    <div class="form-group">
        <label for="email">Email addresslabel>
        <input type="email" class="form-control" id="email" placeholder="...">
    div>

    

    <div class="mb-3">
    <label for="email" class="form-label">Email addresslabel>
    <input type="email" class="form-control" id="email" placeholder="...">
    div>

Dropped .input-group-append & prepend

Dropped .input-group-append and .input-group-prepend. You can now just add buttons and .input-group-text as direct children of the input groups.

    

    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text">$span>
      div>
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
      <div class="input-group-append">
        <span class="input-group-text">.00span>
      div>
    div>

    

    <div class="input-group mb-3">
      <span class="input-group-text">$span>
      <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
      <span class="input-group-text">.00span>
    div>

Dropped Card Columns & Deck

Removed the card columns in favor of a Masonry grid. Removed card decks in favor of the grid which adds more flexibility over responsive behavior.

👉 Example of new Card Columns with Masonry.

See Below: Example Code for Card Deck v4 / Card Group v5

    

    <div class="card-deck">
      <div class="card">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card titleh5>
          <p class="card-text">This is a longer card...p>
          <p class="card-text"><small class="text-muted">3 mins agosmall>p>
        div>
      div>
      <div class="card">
        ...
      div>
      <div class="card">
       ...
      div>
    div>

    
    

    <div class="card-group">
      <div class="card">
        <img src="..." class="card-img-top" alt="...">
        <div class="card-body">
          <h5 class="card-title">Card titleh5>
          <p class="card-text">This is a wider card...p>
          <p class="card-text"><small class="text-muted">3 mins agosmall>p>
        div>
      div>
      <div class="card">
        ...
      div>
      <div class="card">
        ...
      div>
    div>

Dropped .jumbotron

The jumbotron component is removed in favor of utility classes like .bg-light for the background color and .p-* classes to control padding.

    

    <div class="jumbotron">
      <div class="container">
        <h1 class="display-4">Jumbotronh1>
        <p class="lead">This is a modified jumbotron...p>
      div>
    div>

    

    <div class="bg-light p-3">
      <div class="container">
        <h1 class="display-4">Jumbotronh1>
        <p class="lead">This is a modified jumbotron...p>
      div>
    div>

From Bootstrap 5, All navbars now require a container within. This drastically simplifies spacing requirements and removes the need for extensive CSS overrides we added for responsive containers in v4.

    

    <nav class="navbar navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbara>
    nav>

    

    <nav class="navbar navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbara>
      div>
    nav>

There are more Changes

We have only highlighted Main Changes which will break your layout. However there are lot of other changes you need to checkout before Upgrading or Migrating to Bootstrap 5.

👉 Check out the Official Migration Docs for More Info

Conclusion

I hope you are able now to easily convert your old Bootstrap 4 project to Bootstrap 5 with this help. If yes. Please share it to your peers who might also need some help. If you have any suggestions, comments or any errors, please let me know in the comments.

Peace ✌

How to Bypass Medium.com Paywall (Upgrade) and Read Full Article?

Surjith S M — Thu, 29 Oct 2020 11:46:32 GMT

We loved medium, for its simplicity. But no more. They have added a paywall to read their articles. Once you read few articles, they will ask you to upgrade.

We Only able to see the first paragraph, like this:

The Solution?

1. Log out Log out from Medium.com and refresh the page. Yes. Just logout from your medium account.

2. Delete Cache Sometimes, it won't still work because they store the data. For that you can just delete their site cache by opening Inspect Element => Application => Clear Site Data

3. Incognito Mode Sometimes its easier to open the URL in an incognito mode which makes sure there is no cache involved. Also you don't need to sign-out.

3. Outline to the Rescue Outline is a simple service which converts normal webpages to a readable format. Since this website caches content before reaching browser, Medium doesn't know if it came from human or search engine. Hence they allow full article.

Example

Medium Article: https://medium.com/..../78a0797259a6

Outline Link: https://outline.com/Ce4fv6

Surjith's Blog

Component-based Web Development for Beginners

The Problem.

The Solution

Live Example

Here's how you would do it in React.

Here's the same example using Astro

We are not done. There is more

Further Customizations

Rendering as child content

How to create cross-compatible website shortcut for Mac & Windows

Creating Website Shortcut in Mac

1. Create a file with .webloc extension.

Creating Website Shortcut in Windows

1. Create a file with .url extension.

Problems I faced in a Mac as a Windows user (and how to solve them)

Mouse issues

Slow mouse tracking speed

Solution:

No Middle click

No right-click in mouse

Mouse scroll direction

Maximize Window (Full Screen)

Facetime keeps Signing in (loading)

Messages from iPhones are not showing in iMessage.

Sleep vs Shutdown (No Hibernate)

Display Size

npm install -g [package] not working

External Monitor issues

Focusing other windows

Drag and Drop Selected Text

Useful Shortcuts

What do I still miss

Ultimate Email Forwarding Guide + Send Reply

Step 1 - Email Forwarding

Step 2 - Send Email & Reply from Gmail

1. Enable 2-Step Verification

2. Generate your App Password

3. Add an email alias

Final Step

Done 🎉

Sync GitHub Fork with Original Repo (not using command or bash)

How to sync Github repo with original?

Step 1: Your forked repo

Step 2: The Pull Request Problem

Step 3: The Sneaky way to tackle the issue

Step 4: Final Step

You are done!

Building TailwindCSS Components — Web3Templates

Building the Base

Setup Component Preview

Creating Components

Website Link & Source Code

Hosting

Conclusion

How to setup Sanity CMS with Next.js & TailwindCSS

Setting up Next.js & Tailwind

Setting up Sanity CMS

Setup Admin Path

Setup CORS

Configure Development Server

Add .env for Sanity

Setup Next Sanity Plugin

Creating the Schema

Making it Singleton (one-off)

Adding Content in Sanity CMS

Getting the data in Next.js

Git Cheatsheat for beginners with VSCode

Mistake #1

Initialize Git

Terminal way.

Adding a Remote Server (Connect to Github)

Adding multiple Origins

Git Stash & POP

When do you need this?

Git Checkout Branch

Checkout existing branch

Creating a new branch

Git Merge

How to Setup a Working Contact Form in your Hashnode Blog?

1. Create a file with `.webloc` extension.

1. Create a file with `.url` extension.

Use @apply with anything