PKMS

Frontend

6 min read

index

Advice :

CAUTION : Don’t waste much time in HTML and CSS as you will learn them along the way, focus more on the basics of JavaScript.
ADVICE : You will definitely always feel underconfident about HTML CSS JS but after making some basic projects move on to React.js as you will learn them along the way,

Resources :

  • Vite + Typescript : https://www.youtube.com/watch?v=665UnOGx3Pg

  • Next + Typescript : https://www.youtube.com/watch?v=TPACABQTHvM

  • Vite + Typescript + ShadcnUI : Docs: Vite - shadcn/ui

    • Step 1 : Run below command to initialize and configure components.json go for defaults in options →
    npx shadcn-ui@latest init
    • Step 2 : Resolve import paths for library :

    NOTE : We have to resolve path for all vite, tailwind and typescript

    // tailwind.config.js ::
 
content: [
    "./index.html",
    './pages/**/*.{ts,tsx}',
    './@/components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
    // tsconfig.app.json ::
 
/*Paths for ShadcnUI*/
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./@/*"
      ]
    }
  },
  "include": ["src", "@"]
    // vite.config.ts ::
 
import path from "path"
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
 
// https://vitejs.dev/config/
 
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./@"),
    },
  },
})
    • Step 3 :
    • Install components
    npx shadcn-ui@latest add [component]
    Which components would you like to add? › Space to select. A to toggle all.Enter to submit.
◯ accordion
◯ alert
◯ alert-dialog
◯ aspect-ratio
◯ avatar
◯ badge
◯ button
◯ calendar
◯ card
◯ checkbox
    • Step 4 :
    import { useState } from 'react';
import { Button } from "@/components/ui/button"
 
import { Person } from './components/Person.tsx';
 
function App() {
  const [value, setValue] = useState<boolean>(true);
  
  const toggleInfo = () => {
    setValue((prev) => !prev)
  }
 
  return (
    <>
      <div className=''>
        <Person value={value} />
      </div>
      <Button onClick={toggleInfo}>Toggle value</Button>
    </>
  )
}
 
export default App

Animation in CSS :

  • animation-fill-mode:

    • The animation-fill-mode property determines the styles applied to an element before and after the animation.
    • It can take the following values:
      • none: The default value. The element will not retain any styles from the animation before or after it runs.
      • forwards: The element will retain the styles of the last keyframe after the animation completes. This is useful if you want the final state of the animation to persist.
      • backwards: The element will apply the styles of the first keyframe before the animation starts. This can be useful if you want the initial state of the animation to be applied even before the animation begins.
      • both: Equivalent to setting both forwards and backwards. The element will retain styles from the first keyframe before the animation starts and from the last keyframe after it completes.

  • animation-direction:

    • The animation-direction property determines the direction of the animation sequence, whether it proceeds forward, backward, or alternates between forward and backward.
    • It can take the following values:
      • normal: The animation runs forward from the beginning to the end.
      • reverse: The animation runs backward from the end to the beginning.
      • alternate: The animation alternates between running forward and backward. If the iteration count is even, it runs forward, and if it’s odd, it runs backward.
      • alternate-reverse: Similar to alternate, but it starts by running backward.

Motion Graphic Design & Animation Principles Website - Zajno Digital Studio Locomotive Scroll

Harkirat Roadmap for Full-Stack Development :

Basics ⇒

  • Foundation

    • Foundation Javascript, async nature of JS
    • Node.js and its runtime
    • Databases (NoSQL/SQL)
    • Mongo and Postgres deep dive
    • Typescript beginner to advance

  • Backend

    • Backend communication protocols
    • Express basic to advance
    • ORMS
    • Middlewares, routes, status codes, global catches
    • Zod
    • Husky
    • MonoRepos, turborepo
    • Serverless Backends
    • OpenAPI Spec
    • Autogenerated clients
    • Authentication using external libraries
    • Scaling Node.js, performance benchmarks
    • Deploying npm packages

  • Frontend

    • Reconcilers and Frontend frameworks
    • React beginner to advance
    • Internals of state, Context API
    • State management using recoil
    • CSS you need to know of, Flexbox, basic styling
    • Frontend UI frameworks, Deep dive into Tailwind
    • Containerization, Docker
    • Next.js
    • Custom hooks
    • In house auth using next auth

  • Basic Devops

    • Docker end to end
    • Deploying to AWS servers
    • Newer clouds like fly/Remix
    • Nginx and reverse proxies

  • Projects

    • GSOC Project setting up and issue solving
    • Building Paytm/Wallet End to End

Advance ⇒

  • Advanced Backend, System Design

    • Advanced backend communication
    • Message queues and PubSubs
    • Proxies, Load balancers
    • Redis Deep dive
    • Kafka Deep dive
    • Common Design Patterns in JS
    • Advanced DB concepts (Indexing, normalization)
    • Rate limiting
    • Captchas and DDoS protection
    • Sharding, Replication, Resiliency
    • Horizontal and vertical scaling
    • Polling and websockets
    • Grpc
    • Capacity Estimation Load Balancers
    • CAP Theorem
    • Testing Node.js Apps in 2023
    • Real time communication, basics of WebRTC

  • Advanced DevOps

    • Docker Deep dive
    • Container orchestration, Docker Swarm
    • Kubernetes
    • CI/CD
    • Monitoring systems basics to advance
    • Promhetheus, Grafana
    • Newrelic as a paid service
    • Serverless Deep dive
    • AWS Constructs (EC2, S3, CDNs, LB, EKS)

  • Projects

    • Zerodha end to end
    • Zapier end to end
    • Real world open source projects

Animation/Components libraries:

TOOLS/WEBSITES:

Articles:

Deployment of vite + react app :

For Ideas:

Graph View