Complete HTML in 2 Minutes🔥
Here we go👇
1.Document Structure
• <!DOCTYPE>
• <html>
• <head>
• <title>
• <meta>
• <link>
• <script>
• <noscript>
2.Text Content
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• <p>
• <span>
• <strong>
• <em>
• <br>
• <hr>
3.Lists
• <ul>
• <ol>
• <li>
• <dl>
• <dt>
• <dd>
4.Links and Navigation
• <a>
• <nav>
• <link>
5.Embedded Content
• <img>
• <audio>
• <video>
• <iframe>
• <canvas>
• <svg>
6.Forms
• <form>
• <input>
• <textarea>
• <button>
• <select>
• <option>
• <label>
• <fieldset>
• <legend>
• <datalist>
• <output>
7.Tables
• <table>
• <tr>
• <th>
• <td>
• <caption>
8.Semantic Elements
• <article>
• <section>
• <header>
• <footer>
• <aside>
• <main>
• <figure>
• <figcaption>
• <mark>
• <progress>
• <time>
• <details>
• <summary>
9.Deprecated Elements (Avoid Using)
• <center>
• <font>
• <strike>
@javascript_resources
@python_assets
Here we go👇
1.Document Structure
• <!DOCTYPE>
• <html>
• <head>
• <title>
• <meta>
• <link>
• <script>
• <noscript>
2.Text Content
• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• <p>
• <span>
• <strong>
• <em>
• <br>
• <hr>
3.Lists
• <ul>
• <ol>
• <li>
• <dl>
• <dt>
• <dd>
4.Links and Navigation
• <a>
• <nav>
• <link>
5.Embedded Content
• <img>
• <audio>
• <video>
• <iframe>
• <canvas>
• <svg>
6.Forms
• <form>
• <input>
• <textarea>
• <button>
• <select>
• <option>
• <label>
• <fieldset>
• <legend>
• <datalist>
• <output>
7.Tables
• <table>
• <tr>
• <th>
• <td>
• <caption>
8.Semantic Elements
• <article>
• <section>
• <header>
• <footer>
• <aside>
• <main>
• <figure>
• <figcaption>
• <mark>
• <progress>
• <time>
• <details>
• <summary>
9.Deprecated Elements (Avoid Using)
• <center>
• <font>
• <strike>
@javascript_resources
@python_assets
❤3
As web developer, you need to master writing API.
And a common question I got asked is: what is 'RESTful' API? 🤔
Here's a mega thread about RESTful API and how to write it:
First of all, REST stands for 'REpresentational State Transfer', it is an architectural style of writing API.
It includes the following 6 features:
1. Uniform interface ✨
The API should be written with unique and consistent methods of resource identification and manipulation, with clear messages to define actions and information.
(continue 👇)
2. Client-server architecture 🛎️
The principle of 'Separation of concerns' is applied here - we want to separate the user interface vs. data storage.
(continue 👇)
3. Statelessness 📍
Each request must already contain all knowledge needed to complete the request.
(continue 👇)
4. Cacheability 📥
Allowing identification of cacheable contents, and to avoid stale or inappropriate data.
(continue 👇)
5. Layered system 🍰
There should be hierarchical layers of components, without affecting communication between client and server (e.g., proxy and load balancers).
(continue 👇)
6. Code-on-demand (optional) 👩💻
Executable code can be sent from server to provide extra temporary functionalities,
(continue 👇)
Here's some common pattern of RESTful API:
📌 List container contents: GET /items
📌 Add an item to container: POST /items
- with item in request
- URI of item returned in HTTP response header, e.g. Location: http://host/items/itemid
(cont'd) 👇
📌 Retrieve an item: GET /items/itemid
📌 Update an item: PUT /items/itemid
- with updated item in request
📌 Delete an item: DELETE /items/itemid
(cont'd)
In a nutshell, a well written RESTful API is:
✅ Easy to work with
✅ Uniformed
✅ Scripting language friendly
@javascript_resources
@python_assets
And a common question I got asked is: what is 'RESTful' API? 🤔
Here's a mega thread about RESTful API and how to write it:
First of all, REST stands for 'REpresentational State Transfer', it is an architectural style of writing API.
It includes the following 6 features:
1. Uniform interface ✨
The API should be written with unique and consistent methods of resource identification and manipulation, with clear messages to define actions and information.
(continue 👇)
2. Client-server architecture 🛎️
The principle of 'Separation of concerns' is applied here - we want to separate the user interface vs. data storage.
(continue 👇)
3. Statelessness 📍
Each request must already contain all knowledge needed to complete the request.
(continue 👇)
4. Cacheability 📥
Allowing identification of cacheable contents, and to avoid stale or inappropriate data.
(continue 👇)
5. Layered system 🍰
There should be hierarchical layers of components, without affecting communication between client and server (e.g., proxy and load balancers).
(continue 👇)
6. Code-on-demand (optional) 👩💻
Executable code can be sent from server to provide extra temporary functionalities,
(continue 👇)
Here's some common pattern of RESTful API:
📌 List container contents: GET /items
📌 Add an item to container: POST /items
- with item in request
- URI of item returned in HTTP response header, e.g. Location: http://host/items/itemid
(cont'd) 👇
📌 Retrieve an item: GET /items/itemid
📌 Update an item: PUT /items/itemid
- with updated item in request
📌 Delete an item: DELETE /items/itemid
(cont'd)
In a nutshell, a well written RESTful API is:
✅ Easy to work with
✅ Uniformed
✅ Scripting language friendly
@javascript_resources
@python_assets
👍1👏1
HTML tip:
You can use the
You can use the
download attribute in your links to download the file instead of navigating to it:JavaScript Tip💡
Remove duplicate elements from an array👇
Remove duplicate elements from an array👇
Check out these 15 fascinating Free (public) APIs:
👩 Genderize .io
🔍 IMDb API
📦 Dropbox API
🚀 NASA API
📱 Twilio API
🌤️ OpenWeatherMap API
🍔 Open food facts
💬 Slack API
🐙 GitHub API
👕 Shopify API
💰 PayPal API
💳 Stripe API
🤖 Reddit API
📂 OneDrive API
🦠 VirusTotal API
@javascript_resources
@python_assets
👩 Genderize .io
🔍 IMDb API
📦 Dropbox API
🚀 NASA API
📱 Twilio API
🌤️ OpenWeatherMap API
🍔 Open food facts
💬 Slack API
🐙 GitHub API
👕 Shopify API
💰 PayPal API
💳 Stripe API
🤖 Reddit API
📂 OneDrive API
🦠 VirusTotal API
@javascript_resources
@python_assets
A-Z Git in 2 minutes 🔥
here we go👇
1. Core:
• git init
• git clone
• git add
• git commit
• git status
• git diff
• git checkout
• git reset
• git log
• git show
• git tag
• git push
• git pull
2.Branching:
• git branch
• git checkout -b
• git merge
• git rebase
• git branch --set-upstream-to
• git branch --unset-upstream
• git cherry-pick
3.Merging:
• git merge
• git rebase
4.Stashing:
• git stash
• git stash pop
• git stash list
• git stash apply
• git stash drop
5.Remotes:
• git remote
• git remote add
• git remote remove
• git fetch
• git pull
• git push
• git clone --mirror
6.Configuration:
• git config
• git global config
• git reset config
7. Plumbing:
• git cat-file
• git checkout-index
• git commit-tree
• git diff-tree
• git for-each-ref
• git hash-object
• git ls-files
• git ls-remote
• git merge-tree
• git read-tree
• git rev-parse
• git show-branch
• git show-ref
• git symbolic-ref
• git tag --list
• git update-ref
8.Porcelain:
• git blame
• git bisect
• git checkout
• git commit
• git diff
• git fetch
• git grep
• git log
• git merge
• git push
• git rebase
• git reset
• git show
• git tag
9.Alias:
• git config --global alias.<alias> <command>
10.Hook:
• git config --local core.hooksPath <path>
11.Experimental: (May not be fully Supported)
• git annex
• git am
• git cherry-pick --upstream
• git describe
• git format-patch
• git fsck
• git gc
• git help
• git log --merges
• git log --oneline
• git log --pretty=
• git log --short-commit
• git log --stat
• git log --topo-order
• git merge-ours
• git merge-recursive
• git merge-subtree
• git mergetool
• git mktag
• git mv
• git patch-id
• git p4
• git prune
• git pull --rebase
• git push --mirror
• git push --tags
• git reflog
• git replace
• git reset --hard
• git reset --mixed
• git revert
• git rm
• git show-branch
• git show-ref
• git show-ref --heads
• git show-ref --tags
• git stash save
• git subtree
• git tag --delete
• git tag --force
• git tag --sign
• git tag -f
• git tag -l
• git tag --verify
• git unpack-file
• git update-index
• git verify-pack
• git worktree
------------------- END ------------------
here we go👇
1. Core:
• git init
• git clone
• git add
• git commit
• git status
• git diff
• git checkout
• git reset
• git log
• git show
• git tag
• git push
• git pull
2.Branching:
• git branch
• git checkout -b
• git merge
• git rebase
• git branch --set-upstream-to
• git branch --unset-upstream
• git cherry-pick
3.Merging:
• git merge
• git rebase
4.Stashing:
• git stash
• git stash pop
• git stash list
• git stash apply
• git stash drop
5.Remotes:
• git remote
• git remote add
• git remote remove
• git fetch
• git pull
• git push
• git clone --mirror
6.Configuration:
• git config
• git global config
• git reset config
7. Plumbing:
• git cat-file
• git checkout-index
• git commit-tree
• git diff-tree
• git for-each-ref
• git hash-object
• git ls-files
• git ls-remote
• git merge-tree
• git read-tree
• git rev-parse
• git show-branch
• git show-ref
• git symbolic-ref
• git tag --list
• git update-ref
8.Porcelain:
• git blame
• git bisect
• git checkout
• git commit
• git diff
• git fetch
• git grep
• git log
• git merge
• git push
• git rebase
• git reset
• git show
• git tag
9.Alias:
• git config --global alias.<alias> <command>
10.Hook:
• git config --local core.hooksPath <path>
11.Experimental: (May not be fully Supported)
• git annex
• git am
• git cherry-pick --upstream
• git describe
• git format-patch
• git fsck
• git gc
• git help
• git log --merges
• git log --oneline
• git log --pretty=
• git log --short-commit
• git log --stat
• git log --topo-order
• git merge-ours
• git merge-recursive
• git merge-subtree
• git mergetool
• git mktag
• git mv
• git patch-id
• git p4
• git prune
• git pull --rebase
• git push --mirror
• git push --tags
• git reflog
• git replace
• git reset --hard
• git reset --mixed
• git revert
• git rm
• git show-branch
• git show-ref
• git show-ref --heads
• git show-ref --tags
• git stash save
• git subtree
• git tag --delete
• git tag --force
• git tag --sign
• git tag -f
• git tag -l
• git tag --verify
• git unpack-file
• git update-index
• git verify-pack
• git worktree
------------------- END ------------------
👍2
HTML Pro Tip:
Elevate your code's power with semantic tags
Elevate your code's power with semantic tags
🔅 Overscroll Behaviour in CSS
HTML Tip💡
@javascript_resources
@python_assets
You can use the "loading" attribute with the <img> element to control how the browser loads the image.
It has three values: "eager", "lazy", and "auto".
@javascript_resources
@python_assets
You can use the "loading" attribute with the <img> element to control how the browser loads the image.
It has three values: "eager", "lazy", and "auto".
👍1
Reactjs & Nodejs in 2 minutes🔥
Here we go👇
-: React.Js :-
1.Components
• Functional Components
• Class Components
• JSX (JavaScript XML) Syntax
2.Props (Properties)
• Passing Props
• Default Props
• Prop Types
3.State
• useState Hook
• Class Component State
• Immutable State
4.Lifecycle Methods (Class Components)
• componentDidMount
• componentDidUpdate
• componentWillUnmount
5.Hooks (Functional Components)
• useState
• useEffect
• useContext
• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
6.Event Handling
• Handling Events in Functional Components
• Handling Events in Class Components
7.Conditional Rendering
• if Statements
• Ternary Operators
• Logical && Operator
8.Lists and Keys
• Rendering Lists
• Keys in React Lists
9.Component Composition
• Reusing Components
• Children Props
• Composition vs Inheritance
10.Higher-Order Components (HOC)
• Creating HOCs
• Using HOCs for Reusability
11.Render Props
• Using Render Props Pattern
12.React Router
• <BrowserRouter>
• <Route>
• <Link>
• <Switch>
• Route Parameters
13.Navigation
• useHistory Hook
• useLocation Hook
State Management
14.Context API
• Creating Context
• useContext Hook
15.Redux
• Actions
• Reducers
• Store
• connect Function (React-Redux)
16.Forms
• Handling Form Data
• Controlled Components
• Uncontrolled Components
17.Side Effects
• useEffect for Data Fetching
• useEffect Cleanup
18.AJAX Requests
• Fetch API
• Axios Library
Error Handling
19.Error Boundaries
• componentDidCatch (Class Components)
• ErrorBoundary Component (Functional
Components)
20.Testing
• Jest Testing Framework
• React Testing Library
21. Best Practices
• Code Splitting
• PureComponent and React.memo
• Avoiding Reconciliation
• Keys for Dynamic Lists
22.Optimization
• Memoization
• Profiling and Performance Monitoring
23. Build and Deployment
• Create React App (CRA)
• Production Builds
• Deployment Strategies
Frameworks and Libraries
24.Styling Libraries
• Styled-components
• CSS Modules
25.State Management Libraries
• Redux
• MobX
26.Routing Libraries
• React Router
• Reach Router
-: Node.js :-
1.Introduction to Node.js
• JavaScript Runtime for
Server-Side Development
• Non-Blocking I/O
@javascript_resources
2.Setting Up Node.js
• Installing Node.js and NPM
• Package.json Configuration
• Node Version Manager (NVM)
3.Node.js Modules
• CommonJS Modules (require, module.exports)
• ES6 Modules (import, export)
• Built-in Modules (e.g., fs, http, events)
4.Core Concepts
• Event Loop
• Callbacks and Asynchronous Programming
• Streams and Buffers
5.Core Modules
• fs (File System)
• http and https (HTTP Modules)
• events (Event Emitter)
• util (Utilities)
• os (Operating System)
• path (Path Module)
6.NPM (Node Package Manager)
• Installing Packages
• Creating and Managing package.json
• Semantic Versioning
• NPM Scripts
7.Asynchronous Programming in Node.js
• Callbacks
• Promises
• Async/Await
• Error-First Callbacks
8. Express.js Framework
• Routing
• Middleware
• Templating Engines (Pug, EJS)
• RESTful APIs
• Error Handling Middleware
9.Working with Databases
• Connecting to Databases (MongoDB, MySQL)
• Mongoose (for MongoDB)
• Sequelize (for MySQL)
• Database Migrations and Seeders
10.Authentication and Authorization
• JSON Web Tokens (JWT)
• Passport.js Middleware
• OAuth and OAuth2
11. Security
• Helmet.js (Security Middleware)
• Input Validation and Sanitization
• Secure Headers
• Cross-Origin Resource Sharing (CORS)
12.Testing and Debugging
• Unit Testing (Mocha, Chai)
• Debugging Tools (Node Inspector)
• Load Testing (Artillery, Apache Bench)
13.API Documentation
• Swagger
• API Blueprint
• Postman Documentation
14.Real-Time Applications
• WebSockets (Socket.io)
• Server-Sent Events (SSE)
• WebRTC for Video Calls
Here we go👇
-: React.Js :-
1.Components
• Functional Components
• Class Components
• JSX (JavaScript XML) Syntax
2.Props (Properties)
• Passing Props
• Default Props
• Prop Types
3.State
• useState Hook
• Class Component State
• Immutable State
4.Lifecycle Methods (Class Components)
• componentDidMount
• componentDidUpdate
• componentWillUnmount
5.Hooks (Functional Components)
• useState
• useEffect
• useContext
• useReducer
• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
6.Event Handling
• Handling Events in Functional Components
• Handling Events in Class Components
7.Conditional Rendering
• if Statements
• Ternary Operators
• Logical && Operator
8.Lists and Keys
• Rendering Lists
• Keys in React Lists
9.Component Composition
• Reusing Components
• Children Props
• Composition vs Inheritance
10.Higher-Order Components (HOC)
• Creating HOCs
• Using HOCs for Reusability
11.Render Props
• Using Render Props Pattern
12.React Router
• <BrowserRouter>
• <Route>
• <Link>
• <Switch>
• Route Parameters
13.Navigation
• useHistory Hook
• useLocation Hook
State Management
14.Context API
• Creating Context
• useContext Hook
15.Redux
• Actions
• Reducers
• Store
• connect Function (React-Redux)
16.Forms
• Handling Form Data
• Controlled Components
• Uncontrolled Components
17.Side Effects
• useEffect for Data Fetching
• useEffect Cleanup
18.AJAX Requests
• Fetch API
• Axios Library
Error Handling
19.Error Boundaries
• componentDidCatch (Class Components)
• ErrorBoundary Component (Functional
Components)
20.Testing
• Jest Testing Framework
• React Testing Library
21. Best Practices
• Code Splitting
• PureComponent and React.memo
• Avoiding Reconciliation
• Keys for Dynamic Lists
22.Optimization
• Memoization
• Profiling and Performance Monitoring
23. Build and Deployment
• Create React App (CRA)
• Production Builds
• Deployment Strategies
Frameworks and Libraries
24.Styling Libraries
• Styled-components
• CSS Modules
25.State Management Libraries
• Redux
• MobX
26.Routing Libraries
• React Router
• Reach Router
-: Node.js :-
1.Introduction to Node.js
• JavaScript Runtime for
Server-Side Development
• Non-Blocking I/O
@javascript_resources
2.Setting Up Node.js
• Installing Node.js and NPM
• Package.json Configuration
• Node Version Manager (NVM)
3.Node.js Modules
• CommonJS Modules (require, module.exports)
• ES6 Modules (import, export)
• Built-in Modules (e.g., fs, http, events)
4.Core Concepts
• Event Loop
• Callbacks and Asynchronous Programming
• Streams and Buffers
5.Core Modules
• fs (File System)
• http and https (HTTP Modules)
• events (Event Emitter)
• util (Utilities)
• os (Operating System)
• path (Path Module)
6.NPM (Node Package Manager)
• Installing Packages
• Creating and Managing package.json
• Semantic Versioning
• NPM Scripts
7.Asynchronous Programming in Node.js
• Callbacks
• Promises
• Async/Await
• Error-First Callbacks
8. Express.js Framework
• Routing
• Middleware
• Templating Engines (Pug, EJS)
• RESTful APIs
• Error Handling Middleware
9.Working with Databases
• Connecting to Databases (MongoDB, MySQL)
• Mongoose (for MongoDB)
• Sequelize (for MySQL)
• Database Migrations and Seeders
10.Authentication and Authorization
• JSON Web Tokens (JWT)
• Passport.js Middleware
• OAuth and OAuth2
11. Security
• Helmet.js (Security Middleware)
• Input Validation and Sanitization
• Secure Headers
• Cross-Origin Resource Sharing (CORS)
12.Testing and Debugging
• Unit Testing (Mocha, Chai)
• Debugging Tools (Node Inspector)
• Load Testing (Artillery, Apache Bench)
13.API Documentation
• Swagger
• API Blueprint
• Postman Documentation
14.Real-Time Applications
• WebSockets (Socket.io)
• Server-Sent Events (SSE)
• WebRTC for Video Calls
👍6
15.Performance Optimization
• Caching Strategies (in-memory, Redis)
• Load Balancing (Nginx, HAProxy)
• Profiling and Optimization Tools (Node Clinic,
New Relic)
16.Deployment and Hosting
• Deploying Node.js Apps (PM2, Forever)
• Hosting Platforms (AWS, Heroku, DigitalOcean)
• Continuous Integration and Deployment-
(Jenkins, Travis CI)
17.RESTful API Design
• Best Practices
• API Versioning
• HATEOAS (Hypermedia as the Engine-
of Application State)
18.Middleware and Custom Modules
• Creating Custom Middleware
• Organizing Code into Modules
• Publish and Use Private NPM Packages
19.Logging
• Winston Logger
• Morgan Middleware
• Log Rotation Strategies
20.Streaming and Buffers
• Readable and Writable Streams
• Buffers
• Transform Streams
21.Error Handling and Monitoring
• Sentry and Error Tracking
• Health Checks and Monitoring Endpoints
22.Microservices Architecture
• Principles of Microservices
• Communication Patterns (REST, gRPC)
• Service Discovery and Load Balancing
in Microservices
• Caching Strategies (in-memory, Redis)
• Load Balancing (Nginx, HAProxy)
• Profiling and Optimization Tools (Node Clinic,
New Relic)
16.Deployment and Hosting
• Deploying Node.js Apps (PM2, Forever)
• Hosting Platforms (AWS, Heroku, DigitalOcean)
• Continuous Integration and Deployment-
(Jenkins, Travis CI)
17.RESTful API Design
• Best Practices
• API Versioning
• HATEOAS (Hypermedia as the Engine-
of Application State)
18.Middleware and Custom Modules
• Creating Custom Middleware
• Organizing Code into Modules
• Publish and Use Private NPM Packages
19.Logging
• Winston Logger
• Morgan Middleware
• Log Rotation Strategies
20.Streaming and Buffers
• Readable and Writable Streams
• Buffers
• Transform Streams
21.Error Handling and Monitoring
• Sentry and Error Tracking
• Health Checks and Monitoring Endpoints
22.Microservices Architecture
• Principles of Microservices
• Communication Patterns (REST, gRPC)
• Service Discovery and Load Balancing
in Microservices
❤1👍1