Skip to content

Instantly share code, notes, and snippets.

View nurmdrafi's full-sized avatar
:octocat:
Focusing

Nur Mohamod Rafi nurmdrafi

:octocat:
Focusing
15 followers · 24 following
View GitHub Profile
@nurmdrafi
nurmdrafi / React Hook Form (V7) Setup using Bootstrap.md
Last active May 15, 2022 17:52
React Hook Form (V7) Setup using Bootstrap
@nurmdrafi
nurmdrafi / React Hook Form (v7) Validation with Tailwind CSS + Firebase Auth with Context API.md
Last active September 14, 2022 16:26
React Hook Form (v7) Validation with Tailwind CSS + Firebase Auth with Context API
@nurmdrafi
nurmdrafi / Way To Success.md
Last active February 17, 2023 19:33
@nurmdrafi
nurmdrafi / React Handbook.md
Last active January 12, 2024 13:08
@nurmdrafi
nurmdrafi / Tailwind CSS Setup using CLI.md
Last active August 3, 2022 15:56
  1. node.js required
  2. npm init -y (initialize node project)
  3. install Tailwind CSS Intellisense VS Code Plugin
  4. npx tailwindcss init (create configure files for tailwind)
  5. create src/input.css or any name
@tailwind base;
@tailwind components;
@tailwind utilities;
@nurmdrafi
nurmdrafi / tailwind-css Notes.md
Last active August 10, 2022 14:46

🕸 Install Tailwind CSS

  1. install from CDN (before v3 uncustomizable)
  2. install as PostCSS Plugin
  3. Install Tailwind CLI (easy and customizable)
    • node.js required
    • npm init -y (init node project)
    • install Tailwind CSS Intellisense VS Code Plugin
    • npm install -D tailwindcss
  • npx tailwindcss init
@nurmdrafi
nurmdrafi / React Code Snippets.md
Last active August 17, 2022 13:50

Scroll To Top Button

import React, { useState } from "react";
import { HashLink } from "react-router-hash-link";
import { BsArrowUp } from "react-icons/bs";

const ScrollToTop = () => {
  const [visible, setVisible] = useState(false);

  const toggleVisible = () => {
@nurmdrafi
nurmdrafi / Float, Flexbox & Grid Layout + (Bootstrap vs Tailwind).md
Last active August 18, 2022 15:29
@nurmdrafi
nurmdrafi / My Custom Visual Code Studio Settings.md
Last active August 28, 2022 14:58

👾 Auto Close Tag

  • Automatically add HTML/XML close tag

👾 Auto Rename Tag

  • Auto rename paired HTML/XML tag

👾 Brackets Extension Pack

  • 👾 Brackets Keymap: Popular keybindings for VS Code
  • 👾 Live Server: Launch a development local Server with live reload feature for static & dynamic pages
  • 👾 CSS Peek: Allow peeking to css ID and class strings as definitions from html files to respective CSS. Allows peek and goto defination
@nurmdrafi
nurmdrafi / Implementation Context API with (Firebase Authentication, Theme, Main State Management) + useReducer.md
Last active September 22, 2022 15:30
Implementation Context API with (Firebase Authentication, Theme, Main State Management) + useReducer