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 / 4 ways to fetch data.md
Created November 15, 2022 16:07 
https://www.youtube.com/watch?v=7exOfIAKuWU&list=LL&index=2&t=35s

✔ // 1. using default fetch, useEffect, useState

const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(true)
useEffect(() => {
	const fetchData = async () => {
		const res = await fetch(url);
@nurmdrafi
nurmdrafi / antD examples.md
Created November 14, 2022 17:59

responsive navbar

const Navbar = () => {
  const [openMenu, setOpenMenu] = useState(false);
  return (
    <div>
      {/* mobile menu opener icon */}
      <div className="menuIcon">
        <MenuOutlined onClick={() => setOpenMenu(true)} />
      </div>
@nurmdrafi
nurmdrafi / JSON Web Token.md
Last active September 23, 2022 12:44
@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
@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 / Float, Flexbox & Grid Layout + (Bootstrap vs Tailwind).md
Last active August 18, 2022 15:29
@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 / 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 / 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 / React Handbook.md
Last active January 12, 2024 13:08