Skip to content

checklist of resources that i feed my website from #103

Description

@FoushWare

=============================================================== My bookmarks ============

Performance

HTML

  • Normal document flow (from left to right and from top to bottom), positioning elements based on block or inline elements Video

CSS

API

  • HTTP Long Polling vs Server Sent Events vs Websockets | Tech Primers Video

Interview Questions

  • What is the difference between Promise and Observable?

  • Promise methods: all, race, any, settled

  • What is Reactive Programming?

  • What do you know about Event Loop?

  • Lydia Hallie question repository

  • React Interview Questions

  • Rendering patterns in React (10 patterns)

  • Rendering patterns React (Lydia Hallie)

  • Repository for JS topics and questions

TypeScript

  • 01- Difference between const and readonly in TypeScript

    • Reference: StackOverflow
    • Notes: const is for variables, readonly is for properties. Both prevent reassignment, but readonly is compile-time only.
  • Utility Types in TypeScript

  • SOLID Principles in TypeScript

JavaScript Articles

React / SWR / React Query / Performance

  • When to use SWR, React Query, or RTK Query

    • Note: All of them enhance [fetch or Axios] by caching, pagination, preserving page position, revalidation, and interval refetching.
    • Reference / Answer: Use RTK Query when using Redux Toolkit, React Query for simple state apps, and SWR mainly for fetching data with revalidation.
  • Creating a React App from Scratch

    • Question: Can you describe what you will think about when creating a React app from scratch?
    • Reference / Answer: [Empty / To fill based on personal notes]
  • Increasing Performance in React

    • Reference Image: React Performance Profiling
    • Notes: "Not doing things takes less time than doing things"
    • Reference / Answer:
      • Push state down the component tree to avoid unnecessary rerenders
      • Pull content up if needed to isolate heavy components
      • Use useMemo and useCallback for memoization

Code Review

React Design Patterns

React Rendering Patterns

  • Understand what rendering is
    • Rendering = code + data → HTML (Server or Browser)
    • Can render all at once or partially (Render Now / Render on Scroll)
    • Trade-offs: user experience, performance, developer experience

Presentation

  • MDX-Deck: Slide decks powered by Markdown and React

Testing

Talks and YouTube Videos

  • Arabic Advanced Git
  • Helper Videos: Microservice and React
  • Installation guides

React 18

  • Release Notes
  • Upgrade Guide
  • Suspense
  • Create Root
  • Transition / Rendering as you fetch
  • Questions Later: What is use client in Next.js 13, and why is server-side components default?

Configs

  • Next.js 13 + Antd 5 App Router flickering problem

Social Login

Build Tools

CSS & Frontend

  • Why use BEM
  • Edge Computing

Notes

Topics

Browser

Atomic Design

================================= The Senior dev [youtube] ==========

==================================== Patterns.dev https://www.patterns.dev/

===================================== HTML CSS JS [questions] https://www.greatfrontend.com/blog/50-must-know-html-css-and-javascript-interview-questions-by-ex-interviewers

======================== Beginner interview questions ============

========================= blogs ==================

Activity

  1. pinned this issue on Sep 14, 2025
  2. FoushWare commented on Sep 14, 2025

    @FoushWare
    OwnerAuthor

    example of schema

    [
      {
        "title": "JavaScript Variable Declaration",
        "content": "What is the correct way to declare a constant variable in JavaScript?",
        "type": "single",
        "difficulty": "easy",
        "category": "JavaScript",
        "learningPath": "JavaScript Deep Dive",
        "options": [
          {
            "id": "a",
            "text": "var myVar = 10;",
            "isCorrect": false
          },
          {
            "id": "b", 
            "text": "let myVar = 10;",
            "isCorrect": false
          },
          {
            "id": "c",
            "text": "const myVar = 10;",
            "isCorrect": true
          },
          {
            "id": "d",
            "text": "variable myVar = 10;",
            "isCorrect": false
          }
        ],
        "correctAnswers": ["c"],
        "explanation": "The `const` keyword is used to declare a constant variable in JavaScript, which cannot be reassigned after its initial declaration.",
        "tags": ["javascript", "variables", "const"],
        "points": 10,
        "isActive": true
      },
      {
        "title": "React Hooks - Multiple Correct",
        "content": "Which of the following are React hooks?",
        "type": "multiple",
        "difficulty": "medium", 
        "category": "React",
        "learningPath": "React Mastery",
        "options": [
          {
            "id": "a",
            "text": "useState",
            "isCorrect": true
          },
          {
            "id": "b",
            "text": "useEffect", 
            "isCorrect": true
          },
          {
            "id": "c",
            "text": "componentDidMount",
            "isCorrect": false
          },
          {
            "id": "d",
            "text": "useContext",
            "isCorrect": true
          }
        ],
        "correctAnswers": ["a", "b", "d"],
        "explanation": "useState, useEffect, and useContext are all React hooks. componentDidMount is a lifecycle method from class components.",
        "tags": ["react", "hooks", "lifecycle"],
        "points": 15,
        "timeLimit": 30,
        "isActive": true
      }
    ]
    
    
  3. FoushWare commented on Sep 18, 2025

    @FoushWare
    OwnerAuthor

    completed with page create in the admin page

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions