├── .prettierrc ├── CNAME ├── LICENSE ├── README.md ├── _config.yml ├── favicon.ico ├── files └── c │ └── c-intro-notes-manjrekar.pdf ├── path.md ├── projects.md └── resources.md /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "always", 3 | "bracketSpacing": true, 4 | "cursorOffset": -1, 5 | "embeddedLanguageFormatting": "auto", 6 | "endOfLine": "auto", 7 | "filepath": "", 8 | "htmlWhitespaceSensitivity": "css", 9 | "insertPragma": false, 10 | "jsxBracketSameLine": false, 11 | "jsxSingleQuote": false, 12 | "overrides": [], 13 | "plugins": [], 14 | "pluginSearchDirs": [], 15 | "printWidth": 80, 16 | "proseWrap": "preserve", 17 | "quoteProps": "preserve", 18 | "rangeEnd": -1, 19 | "rangeStart": 0, 20 | "requirePragma": false, 21 | "semi": true, 22 | "singleQuote": false, 23 | "tabWidth": 4, 24 | "trailingComma": "none", 25 | "useTabs": true, 26 | "vueIndentScriptAndStyle": false 27 | } 28 | -------------------------------------------------------------------------------- /CNAME: -------------------------------------------------------------------------------- 1 | dev.harshkapadia.me 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Harsh Kapadia 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Dev 2 | 3 | [Harsh Kapadia](https://harshkapadia.me)'s projects, path and resources. 4 | 5 | Have a look at: 6 | 7 | - [My projects](projects.md) 8 | - [My path](path.md) 9 | - [My resources](resources.md) 10 | 11 | Feel free to [contact me](https://links.harshkapadia.me)! 12 | 13 | --- 14 | 15 | [GitHub repo](https://github.com/HarshKapadia2/dev) 16 | 17 | Hosted at [dev.harshkapadia.me](https://dev.harshkapadia.me). 18 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-slate 2 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HarshKapadia2/dev/53a8c5a53c724a1241eb4aeeff088b49a947fad0/favicon.ico -------------------------------------------------------------------------------- /files/c/c-intro-notes-manjrekar.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/HarshKapadia2/dev/53a8c5a53c724a1241eb4aeeff088b49a947fad0/files/c/c-intro-notes-manjrekar.pdf -------------------------------------------------------------------------------- /path.md: -------------------------------------------------------------------------------- 1 | # My web dev path 2 | 3 | Everyone has their own journey and this has been mine up till now! 4 | 5 | ## My method of learning 6 | 7 | - Side-by-side method 8 | - Do what is done in the tutorial at the same time. 9 | - Make short notes in comments for future reference. 10 | - If you encounter errors, document them and write the solution for future reference (preserve links as well). 11 | - Make a project using that tech as soon as you're done learning it, use GitHub as a part of your dev process. 12 | - Tell people what you're learning. The more that people know, the better. 13 | - Add projects on LinkedIn as posts and in the projects section. 14 | - Be active on Twitter. 15 | - Participate in Tech communitites. (Shameless plug: [Our Tech Community](https://ourtech.community)) 16 | - Keep in mind 17 | - Updated list: [My 'Realisations' blog](https://blog.harshkapadia.me/2022/realisations) 18 | > - [Teach Yourself Programming in Ten Years](https://norvig.com/21-days.html) 19 | > - [Understand Fundamentals not Tools](https://www.youtube.com/watch?v=AjNIlebLMRw) 20 | > - [Choose Boring Technology](https://mcfunley.com/choose-boring-technology) 21 | > - [Presentation and Documentation](https://undirected-graph.netlify.app/posts/presentation) 22 | > - [The Key to a Good Life? Lose Yourself in Something.](https://getpocket.com/explore/item/the-key-to-a-good-life-lose-yourself-in-something) 23 | > - [PewDiePie's philosophical videos](https://www.youtube.com/playlist?list=PLIDKFkBlUzOnbm0o8ktgoyz1OvrN8gFUA) 24 | > - [We fired our top talent. Best decision we ever made.](https://www.freecodecamp.org/news/we-fired-our-top-talent-best-decision-we-ever-made-4c0a99728fde) 25 | > - [A team reborn after the fiery departure of its misanthropic guru](https://blog.solha.co/life-after-rick-our-team-reborn-after-the-fiery-departure-of-our-misanthropic-guru-b1fbaf3b8621) 26 | > - [Get in DONE! 5 tips to staying PRODUCTIVE](https://www.youtube.com/watch?v=vY0ho6Ikyok) 27 | > - [Do What You Love and Love What You Do](https://www.youtube.com/watch?v=DUfdhFngvuw) 28 | > - [The tech tool carousel](https://andy-bell.co.uk/the-tech-tool-carousel) 29 | > - [Deciding What Not To Learn](https://mastery.games/post/what-not-to-learn) 30 | 31 | ## My working process 32 | 33 | Learn and apply in an infinite loop. 34 | 35 | - Get an idea. (It doesn't have to be awesome or unique.) 36 | - Plan (Find a neat and easy solution to the problem.) 37 | - Learn the basics (from a small tutorial or the documentation). 38 | - Build a basic template. 39 | - Loop infinitely 40 | - Plan 41 | - Learn the feature that you require. 42 | - Implement it in the product. 43 | - Test. 44 | 45 | > TIP: Don't do long courses or tutorial series. 46 | 47 | ## My path 48 | 49 | - Prerequisites 50 | - Browser (Any one from Chrome, Edge, Brave or Firefox are preferred.) 51 | - VS Code setup 52 | 53 | ### Front end 54 | 55 | - HTML 56 | - CSS (vanilla and frameworks) 57 | - JS (vanilla) 58 | - TypeScript (vanilla) 59 | - Not compulsory to do 60 | 61 | ### Misc 62 | 63 | - Git and GitHub 64 | - Web design 65 | - Browser DevTools 66 | - Accessibility 67 | - Documentation 68 | - Rendering Patterns 69 | 70 | > TIP: At this point, make a static website. (Eg: Your portfolio website or the front end for a larger project to which you can add the back end later.) 71 | 72 | - PWAs (+ Service Worker API) 73 | - Networking 74 | - RegEx 75 | - SVG 76 | - Intersection Observer API 77 | - IndexedDB 78 | - Web Components API 79 | - TWA 80 | 81 | ### General back end prerequisites 82 | 83 | - HTTP methods and status codes 84 | - JSON 85 | - APIs 86 | - Asynchronous (async) JS (Promises, Async/await, etc) 87 | - Caching (CacheStorage API, Cache API and Cache-Control header) 88 | - CORS 89 | - Cookies 90 | - AJAX and its libraries (Fetch API, XMLHttpRequest, Axios, Node HTTP, etc.) 91 | - JWT 92 | 93 | ### Databases 94 | 95 | - SQL (Relational DBs) 96 | - NoSQL 97 | 98 | ### JS back end 99 | 100 | - Node.js 101 | - Express.js 102 | - REST (RESTful) APIs 103 | 104 | ### Python back end 105 | 106 | - Prerequisite 107 | - Python basics 108 | - Common Python web dev frameworks 109 | - Flask 110 | - Django (I still have to do this) 111 | 112 | ### PHP 113 | 114 | - Prerequisites 115 | - PHP basics 116 | - PHP Data Objects (PDO) 117 | - PHP REST API 118 | 119 | ### JS front end frameworks/libraries 120 | 121 | > I still have to do this 122 | 123 | - Prerequisite 124 | - Misc 125 | - JavaScript 126 | - State 127 | - XML 128 | 129 | > TIP: Choose any ONE of the below frameworks/libraries to get started with. 130 | 131 | - Vue.js 132 | - React.js 133 | - Angular 134 | 135 | > TIP: Make a dynamic website. (Eg: Either add a back end to the previously made front end or make a new webapp from scratch.) 136 | 137 | ### Common path for everyone 138 | 139 | - Favicon 140 | - Web performance 141 | - SEO 142 | - Firebase 143 | 144 | #### DevOps 145 | 146 | - Git (covered above) 147 | - Shell Scripting 148 | - Build Systems 149 | - Make 150 | - Deployment/hosting 151 | 152 | > TIP: Deploy the web site/web app that you made! 153 | 154 | - YAML 155 | - CI/CD (I still have to do this) 156 | - Docker 157 | 158 | #### The Missing Semester of CS Education 159 | 160 | #### Character Sets and Encoding 161 | 162 | - Unicode 163 | - New Lines/Line Endings 164 | 165 | ### C 166 | 167 | ### Linux 168 | -------------------------------------------------------------------------------- /projects.md: -------------------------------------------------------------------------------- 1 | # Harsh Kapadia's Projects 2 | 3 | All of [Harsh Kapadia](https://harshkapadia.me)'s projects. 4 | 5 | ## Utilities 6 | 7 | | Utility | Repo | 8 | | --------- | :------------------------------------------------: | 9 | | Parse ELF | [link](https://github.com/HarshKapadia2/parse-elf) | 10 | 11 | ## Web Apps 12 | 13 | | Web App | Front End | Back End | Live Demo | Repo | 14 | | ---------------------- | --------------------------------------------------------------------------------- | --------------------- | :-----------------------------------------------------------: | :--------------------------------------------------------------------: | 15 | | Git Graph | React.js | - | [link](https://git-graph.harshkapadia.me) | [link](https://github.com/HarshKapadia2/git-graph) | 16 | | OTC CatchUp | HTML, CSS, JS, [Asciidoctor Jet](https://harshkapadia2.github.io/asciidoctor-jet) | Node.js, Deta, Shell | [link](https://catchup.ourtech.community) | [link](https://github.com/OurTechCommunity/catchup) | 17 | | HPS Gems | HTML, CSS, JS | PHP, MySQL, Heroku | ~~[link](https://hps-gems.herokuapp.com)~~ | [link](https://github.com/HarshKapadia2/hps-gems) | 18 | | Preview Markdown | React.js, CSS | - | [link](https://harshkapadia2.github.io/preview-markdown) | [link](https://github.com/HarshKapadia2/preview-markdown) | 19 | | IPL APP (AI) | React.js | Flask, `scikit-learn` | ~~[link](https://harshkapadia2.github.io/ipl-app)~~ | [link](https://github.com/HarshKapadia2/ipl-app) | 20 | | Attendance Manager | Template | Flask, Firebase | ~~[link](https://attendance-management-flask.herokuapp.com)~~ | [link](https://github.com/HarshKapadia2/attendance_management) | 21 | | Counter | React.js, CSS | - | [link](https://harshkapadia2.github.io/react-js-counter) | [link](https://github.com/HarshKapadia2/react-js-counter) | 22 | | Calculator | HTML, CSS, JS | - | [link](https://harshkapadia2.github.io/calculator) | [link](https://github.com/HarshKapadia2/calculator) | 23 | | Food Oye (Mobile only) | HTML, Bootstrap, JS | Node.js, Firebase | - | [link](https://github.com/rajatrjoshi/food-oye) | 24 | | 1 or 2? (AI) | HTML, CSS, JS | Flask | - | [link](https://github.com/HarshKapadia2/one-or-two) | 25 | | Court Case Management | HTML, CSS, JS | Node.js, MongoDB | - | [link](https://github.com/HarshKapadia2/court_case_management_web_app) | 26 | 27 | ## Documentation 28 | 29 | | Documentation | Front End | Web Site | Repo | 30 | | -------------------------------------- | ------------------------------------------------------------------ | :-----------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------: | 31 | | Compilation Examples | - | - | [link](https://github.com/HarshKapadia2/compilation-examples) | 32 | | Git Internals | [Asciidoctor Jet](https://harshkapadia2.github.io/asciidoctor-jet) | [PWA](https://git.harshkapadia.me) | [link](https://github.com/HarshKapadia2/git_internals) | 33 | | Performance Comparison of TCP Versions | Asciidoctor | [link](https://harshkapadia2.github.io/tcp-version-performance-comparison) | [link](https://github.com/HarshKapadia2/tcp-version-performance-comparison) | 34 | | Computer Networking | Jekyll | [link](https://networking.harshkapadia.me) | [link](https://github.com/HarshKapadia2/networking) | 35 | | My talks | Jekyll | [link](https://talks.harshkapadia.me) | [link](https://github.com/HarshKapadia2/talks) | 36 | | Linux | Jekyll | [link](https://linux.harshkapadia.me) | [link](https://github.com/HarshKapadia2/linux) | 37 | | Dotfiles | - | - | [link](https://github.com/HarshKapadia2/dotfiles) | 38 | | git_basics | [Asciidoctor Jet](https://harshkapadia2.github.io/asciidoctor-jet) | [PWA](https://harshkapadia2.github.io/git_basics) or ~~[Play Store (TWA)](https://play.google.com/store/apps/details?id=com.harsh_kapadia.git_basics)~~ | [link](https://github.com/HarshKapadia2/git_basics) | 39 | | Dev | Jekyll | [link](https://dev.harshkapadia.me) | [link](https://github.com/HarshKapadia2/dev) | 40 | | CLI | Jekyll | [link](https://harshkapadia2.github.io/cli) | [link](https://github.com/HarshKapadia2/cli) | 41 | | Docker | Jekyll | [link](https://harshkapadia2.github.io/docker) | [link](https://github.com/HarshKapadia2/docker) | 42 | | RegEx | HTML, JS | [link](https://harshkapadia2.github.io/regex) | [link](https://github.com/HarshKapadia2/regex) | 43 | | Cloud | Jekyll | [link](https://harshkapadia2.github.io/cloud) | [link](https://github.com/HarshKapadia2/cloud) | 44 | | Assembly | - | - | [link](https://github.com/HarshKapadia2/assembly) | 45 | 46 | ## Scripts 47 | 48 | | Script | Repo | 49 | | -------------------- | :--------------------------------------------------: | 50 | | Dynamic DNS | [link](https://github.com/HarshKapadia2/dynamic-dns) | 51 | | Git Server | [link](https://github.com/HarshKapadia2/git-server) | 52 | | Pimoroni Badger 2040 | [link](https://github.com/HarshKapadia2/badger-2040) | 53 | 54 | ## Templates 55 | 56 | | Template | Front End | Live Demo | Repo | 57 | | --------------- | -------------------- | :----------------------------------------------------: | :------------------------------------------------------: | 58 | | Asciidoctor Jet | Asciidoctor, CSS, JS | [PWA](https://harshkapadia2.github.io/asciidoctor-jet) | [link](https://github.com/HarshKapadia2/asciidoctor-jet) | 59 | 60 | ## Web Sites 61 | 62 | | Web Site | Front End | Live Demo | Repo | 63 | | -------------------------------- | ------------------ | :------------------------------------------------------------: | :-------------------------------------------------------------: | 64 | | My portfolio | HTML, CSS, JS | [link](https://harshkapadia.me) | [link](https://github.com/HarshKapadia2/portfolio-v2) | 65 | | Our Tech Community | HTML, CSS, JS | [link](https://ourtech.community) | [link](https://github.com/OurTechCommunity/web-site) | 66 | | Car Details (Viz & Prediction) | Rendered RMarkdown | [link](https://harshkapadia2.github.io/car-details) | [link](https://github.com/HarshKapadia2/car-details) | 67 | | Selena Gomez's Bio | HTML, CSS, JS | [PWA](https://harshkapadia2.github.io/sg-bio) | [link](https://github.com/HarshKapadia2/sg-bio) | 68 | | Linguistic World | HTML, CSS, JS | [link](https://linguisticworld.in) | [link](https://github.com/LinguisticWorld/web-site) | 69 | | LBL tribute page | HTML, CSS | [link](https://harshkapadia2.github.io/lbl-tribute-page) | [link](https://github.com/HarshKapadia2/lbl-tribute-page) | 70 | | Heartry | HTML, CSS | [link](https://heartry.darshanrander.com) | [link](https://github.com/SirusCodes/heartry/tree/gh-pages) | 71 | | Challenges page | HTML, CSS, JS | [link](https://harshkapadia2.github.io/sample-challenges-page) | [link](https://github.com/HarshKapadia2/sample-challenges-page) | 72 | | Contact Us page | HTML, CSS, JS | [link](https://harshkapadia2.github.io/sample-contact-us-page) | [link](https://github.com/HarshKapadia2/sample-contact-us-page) | 73 | | Marksheet replica (Desktop only) | HTML, CSS | [link](https://harshkapadia2.github.io/sample-marksheet) | [link](https://github.com/HarshKapadia2/sample-marksheet) | 74 | 75 | ## SDKs 76 | 77 | | SDK | Language | npm | Repo | 78 | | --------------------------------------- | ---------- | :---------------------------------------------------------------------------: | :--------------------------------------------: | 79 | | @nanonets/optical-character-recognition | JavaScript | [link](https://www.npmjs.com/package/@nanonets/optical-character-recognition) | [link](https://github.com/NanoNets/ocr-js-sdk) | 80 | | @nanonets/image-classification | JavaScript | [link](https://www.npmjs.com/package/@nanonets/image-classification) | [link](https://github.com/NanoNets/ic-js-sdk) | 81 | 82 | ## GitHub Actions 83 | 84 | | GitHub Action | GitHub Marketplace | Repo | 85 | | ------------- | :--------------------------------------------------------: | :--------------------------------------------------: | 86 | | Deta Deploy | [link](https://github.com/marketplace/actions/deta-deploy) | [link](https://github.com/HarshKapadia2/deta-deploy) | 87 | 88 | ## Mobile Apps 89 | 90 | | Mobile App | Tech Stack | Live Demo | Repo | 91 | | ------------ | ------------ | :-------: | :-------------------------------------------------------: | 92 | | HYS Gems | React Native | - | [link](https://github.com/HarshKapadia2/hys-gems) | 93 | | Nanonets OCR | React Native | - | [link](https://github.com/HarshKapadia2/nanonets-ocr-app) | 94 | 95 | ## Desktop Apps 96 | 97 | | Desktop App | Front End | Back End | Live Demo | Repo | 98 | | ------------------------- | ----------------------------- | ----------------- | :-------: | :-------------------------------------------------------------------: | 99 | | Library Management System | Java (Netbeans drag and drop) | Java, JDBC, MySQL | - | [link](https://github.com/HarshKapadia2/JDBC_LibraryManagementSystem) | 100 | -------------------------------------------------------------------------------- /resources.md: -------------------------------------------------------------------------------- 1 | # My Dev Resources 2 | 3 | - The crash course in each section is the bare minimum that should be done. 4 | - The resources have been aligned in a logical manner that should be followed. 5 | 6 | ## Table of Contents 7 | 8 | - [Prerequisites](#prerequisites) 9 | - [Front End](#front-end) 10 | - [HTML](#html) 11 | - [CSS](#css) 12 | - [JS](#js) 13 | - [TypeScript](#typescript) 14 | - [Misc #1](#misc-1) 15 | - [Git and GitHub](#git-and-github) 16 | - [Web Design](#web-design) 17 | - [Browser DevTools](#browser-devtools) 18 | - [Accessibility](#accessibility) 19 | - [Documentation](#documentation) 20 | - [Rendering Patterns](#rendering-patterns) 21 | - [PWA (+ Service Worker API)](#pwa--service-worker-api) 22 | - [Networking](#networking) 23 | - [RegEx](#regex) 24 | - [SVG](#svg) 25 | - [Intersection Observer API](#intersection-observer-api) 26 | - [InedxedDB](#indexeddb) 27 | - [Web Components API](#web-components-api) 28 | - [Misc Libraries](#misc-libraries) 29 | - [TWA](#twa) 30 | - [General Back End Prerequisites](#general-back-end-prerequisites) 31 | - [HTTP](#http) 32 | - [JSON](#json) 33 | - [APIs](#apis) 34 | - [Async JS](#async-js) 35 | - [Caching](#caching) 36 | - [CORS](#cors) 37 | - [Cookies](#cookies) 38 | - [AJAX and its libraries](#ajax-and-its-libraries) 39 | - [JWT](#jwt) 40 | - [Databases](#databases) 41 | - [SQL](#sql) 42 | - [NoSQL](#nosql) 43 | - [JS Back End](#js-back-end) 44 | - [Node.js](#nodejs) 45 | - [Express.js](#expressjs) 46 | - [JS REST API](#js-rest-api) 47 | - [Python Back End](#python-back-end) 48 | - [Prerequisite](#prerequisite) 49 | - [Flask](#flask) 50 | - [PHP](#php) 51 | - [Prerequisites](#prerequisites-1) 52 | - [PHP REST API](#php-rest-api) 53 | - [Front End JS Frameworks/Libraries](#front-end-js-frameworkslibraries) 54 | - [Prerequisites](#prerequisites-2) 55 | - [Misc](#misc) 56 | - [JavaScript](#javascript) 57 | - [State](#state) 58 | - [XML](#xml) 59 | - [React.js](#reactjs) 60 | - [Misc #2](#misc-2) 61 | - [Favicon](#favicon) 62 | - [Web Performance](#web-performance) 63 | - [SEO](#seo) 64 | - [`robots.txt`](#robotstxt) 65 | - [Firebase](#firebase) 66 | - [DevOps](#devops) 67 | - [Git](#git) 68 | - [Scripting](#shell-scripting) 69 | - [Build Systems](#build-systems) 70 | - [Deployment/Hosting](#deploymenthosting) 71 | - [YAML](#yaml) 72 | - [CI/CD](#cicd) 73 | - [Docker](#docker) 74 | - [Cloud](#cloud) 75 | - [The Missing Semester of CS Education](#the-missing-semester-of-cs-education) 76 | - [Character Sets and Encoding](#character-sets-and-encoding) 77 | - [Unicode](#unicode) 78 | - [New Lines/Line Endings](#new-linesline-endings) 79 | - [C](#c) 80 | - [Linux](#linux) 81 | 82 | ## My Resources 83 | 84 | ### Prerequisites 85 | 86 | - Browser (Google Chrome, Microsoft Edge, Brave or Firefox are preferred.) 87 | - [Set up VS Code](https://www.youtube.com/watch?v=fnPhJHN0jTE) (Code Editor) 88 | - [How To Setup Prettier](https://www.youtube.com/watch?v=DqfQ4DPnRqI) (Code Formatter) 89 | 90 | ### Front End 91 | 92 | #### HTML 93 | 94 | - [Crash course](https://www.youtube.com/watch?v=UB1O30fR-EE) 95 | - [Validator](https://validator.w3.org) to check correctness of HTML. 96 | - [Best practices](https://github.com/hail2u/html-best-practices) 97 | - [When to use `target="_blank"`](https://css-tricks.com/use-target_blank) 98 | - [Absolute vs relative links](https://stackoverflow.com/a/14278020/11958552) 99 | - Difference between `href="css/style.css"` (relative link) and `href="/css/style.css"` (absolute link). 100 | - The `` of a HTML doc 101 | - [Get Your Head Straight](https://www.youtube.com/watch?v=MHyAOZ45vnU) 102 | - [ct.css](https://csswizardry.com/ct) - A diagnostic CSS snippet that exposes potential performance issues in a HTML document’s `` tag. 103 | - [HEAD](https://github.com/joshbuchea/HEAD) - A list of a lot of things that could go in the head of a HTML document. 104 | - [A list of all HTML meta tags](https://accreditly.io/articles/a-list-of-all-html-meta-tags) 105 | - The Open Graph Protocol (OGP) 106 | - [ogp.me](https://ogp.me) 107 | - Articles 108 | - [What is Open Graph and how can I use it for my website?](https://www.freecodecamp.org/news/what-is-open-graph-and-how-can-i-use-it-for-my-website) 109 | - [The-Open-Graph-protocol](https://indieweb.org/The-Open-Graph-protocol) 110 | - [For Twitter cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards) 111 | - NOTE: 112 | - For the image in the card, SVGs are not supported. Use a PNG or JPG image. 113 | - The image/video/audio value has to be a URL _to a file_ (Eg: `https://harshkapadia.me/static/img/og-img.png`) and NOT a relative link (Eg: `static/img/og-img.png`) to a file in the project. 114 | - The image size should be less than 300 kb for certain services. 115 | - The `itemprop` attribute might be required. ([Source](https://stackoverflow.com/a/20429551/11958552), [Source](https://stackoverflow.com/questions/25100917/showing-thumbnail-for-link-in-whatsapp-ogimage-meta-tag-doesnt-work/64743183#64743183)) 116 | - [WhatsApp instructions](https://newbedev.com/provide-an-image-for-whatsapp-link-sharing) 117 | - Audio and video are also supported, as mentioned on [ogp.me](https://ogp.me). 118 | - [2020 standards](https://stackoverflow.com/questions/19778620/provide-an-image-for-whatsapp-link-sharing/43154489#43154489) 119 | - [Lazy loading attribute for images](https://css-tricks.com/native-lazy-loading) 120 | - [Maximally optimizing image loading for the web in 2021](https://www.industrialempathy.com/posts/image-optimizations) 121 | - Resource hints 122 | - [`prefetch`, `preload` and `preconnect`](https://www.keycdn.com/blog/resource-hints) 123 | - [`preconnect` and `dns-prefetch`](https://web.dev/preconnect-and-dns-prefetch) 124 | - [`preconnect` resource hint and the `crossorigin` attribute](https://crenshaw.dev/preconnect-resource-hint-crossorigin-attribute) 125 | - [`async` and `defer` scripts](https://javascript.info/script-async-defer) 126 | - [URL Text Fragments](https://web.dev/text-fragments/#text-fragments) 127 | 128 | #### CSS 129 | 130 | - [Crash course](https://www.youtube.com/watch?v=yfoY53QXEnI) 131 | - [Margin vs padding](https://www.differencebetween.com/difference-between-margin-and-vs-padding) 132 | - [`box-sizing` property](https://www.w3schools.com/css/css3_box-sizing.asp) 133 | - [Website layout](https://www.w3schools.com/css/css_website_layout.asp) 134 | - Selectors [PDF](https://webdevsimplified.com/specificity-cheat-sheet.html) or [article](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) 135 | - [Pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) 136 | - Specificity 137 | - Order: `!important` > `inline` > `id selectors` > `class selectors + attribute selectors + pseudo-classes` > `element selectors (tags) + pseudo-elements` 138 | - The number of ids, classes and tags for a particular element matter in the specifity as well. More of each implies an increase in specificity. 139 | - `!important` trumps all, irrespective of the number of ids, classes and tags. Should be avoided as far as possible. 140 | - Inline CSS trumps all but `!important`, irrespective of the number of ids, classes and tags. Should be avoided as far as possible. 141 | - [Specificity illustrated](https://specifishity.com) (Format: `(, , )`) 142 | - Most pseudo classes have the same specificity as a class. `is` and `where` are exceptions, with `where` having zero specificity and `is` using the highest value from its list. 143 | - [`id` vs `class` specificity](https://css-tricks.com/the-difference-between-id-and-class/#comment-27579) 144 | - [Always maintaining round borders using `border-radius: 50%;`.](https://www.codecademy.com/forum_questions/559fe347e39efe4cf40005a9) 145 | - Positioning 146 | - [`position` property](https://www.w3schools.com/Css/css_positioning.asp) 147 | - [CSS Position Ultimate Guide](https://blog.webdevsimplified.com/2022-01/css-position) 148 | - [`display` property](https://alligator.io/css/display-inline-vs-inline-block) 149 | - CSS Flexbox 150 | - [Livestream by Madhav Bahl](https://www.youtube.com/watch?v=LKmsQCUb0oE) 151 | - [MadhavBahlMD/flex](https://github.com/MadhavBahlMD/flex) 152 | - [Visualizer](https://lokeshdhakar.com/projects/flexitem) 153 | - [Crash course by Brad Traversy](https://www.youtube.com/watch?v=JJSoEo8JSnc) (Haven't watched this.) 154 | - CSS Grid 155 | - [Crash course](https://www.youtube.com/watch?v=EFafSYg-PkI) 156 | - [Browser extension _Gridman_ for Grid lines](https://chrome.google.com/webstore/detail/gridman-css-grid-inspecto/cmplbmppmfboedgkkelpkfgaakabpicn) (Incase the DevTools don't support CSS Grid.) 157 | - [Media queries](https://www.w3schools.com/css/css3_mediaqueries.asp) 158 | - Units 159 | - [`px`, `%`, `vh`, `vw`, `em` and `rem` (Part 1 of 2)](https://www.youtube.com/watch?v=gSL0hUPBgQA) (Hindi) 160 | - [`rem` vs `em` (Part 2 of 2)](https://www.youtube.com/watch?v=W862VHnZ6Sw) (Hindi) 161 | - [W3Schools](https://www.w3schools.com/CSSref/css_units.asp) 162 | - [Viewport units](https://www.youtube.com/watch?v=5m6JOJLy5B0) (`vh`, `vw`, `vmin`, `vmax`, `vi`, `vb`, `lvh`, `dvh`, `svh`...) 163 | - [`clamp()` function](https://blog.webdevsimplified.com/2020-11/css-clamp) (view [MDN]() for more) 164 | - [Responsive web site tutorial](https://www.youtube.com/watch?v=ZeDP-rzOnAA&list=WL&index=155&t=0s) 165 | - Check responsiveness on various devices 166 | - In the browser DevTools (best option) 167 | - On [springload.responsinator.com](https://springload.responsinator.com) 168 | - [Why you should never use `px` to set font-size in CSS](https://joshcollinsworth.com/blog/never-use-px-for-font-size) 169 | - [Avoiding `` layout shifts: `aspect-ratio` vs `width` & `height` attributes](https://jakearchibald.com/2022/img-aspect-ratio) 170 | - [2D Transforms](https://www.w3schools.com/Css/css3_2dtransforms.asp) 171 | - [Animations](https://www.w3schools.com/css/css3_animations.asp) ([High performance aimations](https://www.html5rocks.com/en/tutorials/speed/high-performance-animations)) 172 | - [Transitions](https://www.w3schools.com/css/css3_transitions.asp) 173 | - [Custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) 174 | - [Bootstrap crash course](https://www.youtube.com/watch?v=5GcQtLDGXy8) 175 | - [`:is()`, `:where()`, `:has()` and `:not()` pseudo classes](https://www.youtube.com/watch?v=7matgtwNx4I) 176 | - Most pseudo classes have the same specificity as a class. `is` and `where` are exceptions, with `where` having zero specificity and `is` using the highest value from its list. 177 | - `:last-child` vs `:last-of-type` pseudo-classes 178 | - [The Difference Between `:nth-child` and `:nth-of-type`](https://css-tricks.com/the-difference-between-nth-child-and-nth-of-type) 179 | - [CSS Gotchas: last-child vs. last-of-type and other bizarre conundrums](https://g-liu.com/blog/2014/12/css-last-child-vs-last-of-type-and-other-bizarre-conundrums) 180 | - [The `last-child` vs `last-of-type` selector in CSS](http://www.js-craft.io/blog/the-last-child-vs-last-of-type-selector-in-css) 181 | - [Difference Between `:last-child` and `:last-of-type` Selector in CSS](https://www.webdevelopmentinstitute.com/blog/difference-between-last-child-and-last-of-type-selector-in-css) 182 | - [Sub-string matching selectors](https://blog.teamtreehouse.com/css3-substring-matching-attribute-selectors) (Eg: `[class*="col-"] { width: 100%; }`) 183 | - [Scrollbar styling](https://css-tricks.com/almanac/properties/s/scrollbar) 184 | - [`scroll-padding`](https://css-tricks.com/almanac/properties/s/scroll-padding) 185 | - Add the property to the `html` element for it to work. 186 | - [Only load required characters in Google Fonts](https://www.youtube.com/watch?v=Ez1huZ-kfY4) (Saves bandwidth) 187 | - CSS basics 188 | - [Redo Your CSS](https://learn.redoyourcss.com) ([Main site](https://www.redoyourcss.com)) 189 | - [Some design resources](https://github.com/bradtraversy/design-resources-for-developers) 190 | 191 | #### JS 192 | 193 | - [Crash course](https://www.youtube.com/watch?v=hdI2bqOjy3c) 194 | - [`var` vs `let` vs `const`](https://blog.webdevsimplified.com/2020-01/var-vs-let-vs-const) 195 | - [Reference vs value](https://blog.webdevsimplified.com/2021-03/js-reference-vs-value) 196 | - [Document Object Model](https://medium.com/@EdidiongAsikpo/getting-started-with-the-dom-d27907f17be0) (DOM) 197 | - [`window` vs `document`](https://stackoverflow.com/questions/9895202/what-is-the-difference-between-window-screen-and-document-in-javascript) 198 | - [`element.classList`](https://blog.webdevsimplified.com/2020-11/class-list) 199 | - Callbacks 200 | - [The Art of Node: Callbacks](https://github.com/maxogden/art-of-node#callbacks) 201 | - [How (not) to get a value "out of" a callback.](https://felix-kling.de/blog/2019/javascript-callbacks-misconceptions.html) 202 | - Promises can be one way to get data 'out' of a callback. ([Example](https://github.com/HarshKapadia2/git-graph/blob/main/src/util/generateObjects.js#L161)) 203 | - [HTML Element vs HTML Node and HTMLCollection vs NodeList](https://www.youtube.com/watch?v=rhvec8cXLlo) ([PDF](https://webdevsimplified.com/js-dom-traversal-cheat-sheet.html)) 204 | - [Data attributes](https://blog.webdevsimplified.com/2020-10/javascript-data-attributes) (`element.dataset` property - view [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/dataset) for more.) 205 | - [`localStorage` vs `sessionStorage`](https://blog.webdevsimplified.com/2020-08/cookies-localStorage-sessionStorage) (view [javascript.info](https://javascript.info/localstorage) for more differences) 206 | - Events 207 | - [Event reference](https://developer.mozilla.org/en-US/docs/Web/Events) (`load`, `click`, `change`, `submit`, etc) 208 | - [Page: DOMContentLoaded, load, beforeunload, unload](https://javascript.info/onload-ondomcontentloaded) 209 | - [Rounding off](https://medium.com/swlh/how-to-round-to-a-certain-number-of-decimal-places-in-javascript-ed74c471c1b8) 210 | - [Handling `NaN`](https://blog.webdevsimplified.com/2020-10/javascript-nan) 211 | - [Some cases of file handling](https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications) 212 | - [Responsive nav bar tutorial](https://www.youtube.com/watch?v=gXkqy0b4M5g) 213 | - [HTML Drag and Drop API](https://www.youtube.com/watch?v=Wtrin7C4b7w) 214 | - [`navigator.sendBeacon()`](https://benborgers.com/posts/navigator-sendbeacon) 215 | - Modules 216 | - [Intro](https://www.youtube.com/watch?v=cRHQNNcYf6s) 217 | - [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) 218 | - [`import` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 219 | - [`export` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) 220 | - [JS modules and build tools](https://www.youtube.com/watch?v=U4ja6HeBm6s) 221 | - Internals 222 | - [Namaste :pray: JavaScript](https://www.youtube.com/watch?v=pN6jk0uUrD8&list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP&index=1) 223 | - [JS modules and build tools](https://www.youtube.com/watch?v=U4ja6HeBm6s) 224 | - [Closures](https://dmitripavlutin.com/simple-explanation-of-javascript-closures) 225 | - [Event loop](https://www.youtube.com/watch?v=8aGhZQkoFbQ&feature=youtu.be) 226 | - [Concept Visualise - JavaScript Internals](https://www.youtube.com/watch?v=R4jZ_Mylqaw) 227 | - [JS Internals Visualizer](https://www.jsv9000.app) 228 | - [Scheduling in JS and browsers](https://www.youtube.com/watch?v=z96oKTUSQjE) ([Tweet](https://twitter.com/reactify_in/status/1309843620179054592)) 229 | 230 | #### TypeScript 231 | 232 | - [TypeScript Crash Course](https://www.youtube.com/watch?v=BCg4U1FzODs) 233 | - [Learn TypeScript Generics In 13 Minutes](https://www.youtube.com/watch?v=EcCTIExsqmI) 234 | - [What does "keyof typeof" mean in TypeScript?](https://stackoverflow.com/questions/55377365/what-does-keyof-typeof-mean-in-typescript) 235 | - [`unknown` vs `any`](https://dev.to/sachinchaurasiya/type-safety-in-typescript-unknown-vs-any-55c0) 236 | 237 | ### Misc #1 238 | 239 | #### Git and GitHub 240 | 241 | - Sessions by me 242 | - [Git Basics - The Basics of Git and GitHub](https://talks.harshkapadia.me/git_basics) 243 | - [The basics of Branching, Issues and Pull Requests](https://youtu.be/LfgDc7BbhaY?t=946) 244 | - [Git Internals - How does Git work!?](https://talks.harshkapadia.me/git_internals) 245 | - [Hacktoberfest, Open Source and Pull Requests](https://talks.harshkapadia.me/otc_open_source_hacktoberfest_2020) 246 | - [More talks](https://talks.harshkapadia.me) 247 | - [git_basics PWA](https://harshkapadia2.github.io/git_basics) 248 | - [Git Internals PWA](https://git.harshkapadia.me) 249 | - [Crash course by Brad Traversy](https://www.youtube.com/watch?v=SWYqp7iY_Tc) 250 | - [Git Server](https://github.com/HarshKapadia2/git-server) 251 | 252 | #### Web Design 253 | 254 | - [Typography 101](https://www.youtube.com/watch?v=HnpsOtIcfbo) 255 | - [Color theory 101](https://www.youtube.com/watch?v=e_kdWMmD3z0) 256 | - [Layout design](https://www.youtube.com/watch?v=S4viQ_Ejptc) 257 | - [Top Design Resources and Apps](https://www.youtube.com/watch?v=GUOgv4PcHIQ) 258 | - [Making text stand out in front of images](https://graphicdesign.stackexchange.com/questions/57472/making-text-stand-out-in-front-of-images) 259 | - [Figma crash course](https://www.youtube.com/watch?v=4W4LvJnNegA) 260 | - [Image compression deep-dive](https://www.youtube.com/watch?v=F1kYBnY6mwg) 261 | 262 | #### Browser DevTools 263 | 264 | - [Guide to Chrome's performance profiler](https://www.youtube.com/watch?v=KWM5wxlDuis) 265 | - [Chrome DevTools documentation](https://developers.google.com/web/tools/chrome-devtools) 266 | - [Crash course (Brad Traversy)](https://www.youtube.com/watch?v=x4q86IjJFag) 267 | - [Crash course (FreeCodeCamp)](https://www.youtube.com/watch?v=gTVpBbFWry8) 268 | 269 | > NOTE: The DevTools are similar in almost all browsers, so the above resources are fine. 270 | 271 | - [Check the support of a front end web technology on desktop and mobile web browsers.](https://caniuse.com/ciu/about) 272 | 273 | #### Accessibility 274 | 275 | - [Exploring Web Accessibility](https://explore-a11y.netlify.app) 276 | 277 | #### Documentation 278 | 279 | - [Presentation and Documentation](https://undirected-graph.netlify.app/posts/presentation#:~:text=LinkedIn%20Post.-,Documentation,the%20next%20best%20thing%20after%20the%20presentation%20is%20passive%20presentation%20%E2%80%94%20Documentation.,-What%20even%20is) 280 | - [Hack the Project Onboarding Process: Learning by Writing Tutorials as a New Contributor](https://www.youtube.com/watch?v=_BqI1o7sbkw) 281 | - Slightly unrelated: [A Guide for Contributing to Any Open Source JavaScript Project Ever](https://dev.to/saurabhdaware/a-guide-for-contributing-to-any-open-source-javascript-project-ever-hi) 282 | 283 | #### Rendering Patterns 284 | 285 | - [10 Rendering Patterns for Web Apps](https://www.youtube.com/watch?v=Dkx5ydvtpCA) 286 | - [Rendering Patterns](https://www.lydiahallie.io/blog/rendering-patterns) 287 | 288 | #### PWA (+ Service Worker API) 289 | 290 | - Prerequisite: [Caching](#caching) 291 | - [Crash course](https://www.youtube.com/watch?v=ksXwaWHCW6k) (Intro to Service Workers and Caching) 292 | - [Progressive Web Apps in 100 seconds](https://www.youtube.com/watch?v=sFsRylCQblw) 293 | - [Extra PWA features](https://www.youtube.com/watch?v=ppwagkhrZJs) 294 | - [Offline-first PWAs](https://www.youtube.com/watch?v=cmGr0RszHc8) (A good overview) 295 | - [Demistifying Web Workers and Service Workers](https://www.youtube.com/watch?v=OgLemdR65pE) (Some content of the talk is outdated.) 296 | - [The Modern PWA Cheat Sheet](https://www.youtube.com/watch?v=cybhV88KLfI) 297 | - [Service Workers MDN](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers) 298 | - [The offline cookbook](https://jakearchibald.com/2014/offline-cookbook) (Caching and network strategies.) 299 | - [Application Cache is a Douchebag](https://alistapart.com/article/application-cache-is-a-douchebag) (Caching gotchas.) 300 | - [Creating a PWA with JS](https://dev.to/devpato/how-to-create-a-pwa-with-javascript-4jlh) 301 | - PWA Manifest 302 | - [Important manifest options](https://web.dev/add-manifest) 303 | - [All manifest options](https://w3c.github.io/manifest) 304 | - The manifest file can have a `.json` or a `.webmanifest` extension. [The spec suggests `.webmanifest`.](https://w3c.github.io/manifest/#:~:text=File%20extension%3A%20.webmanifest%20or%20.json%3F) 305 | - [`id` property](https://developer.chrome.com/blog/pwa-manifest-id) 306 | - [Icon generator](https://www.pwabuilder.com/imageGenerator) 307 | - [Customizing the install experience](https://web.dev/customize-install) 308 | - The Application tab in the Dev Tools can be used to check the service worker status and the manifest. 309 | - Use LightHouse for debugging and checking. 310 | - Service Workers are not just used for PWAs. They are used just for caching as well. 311 | - Caching is an important concept for PWAs. Please go through [Caching section](#caching) below. 312 | - In a PWA, static files need to be manually cached during the install event, because the Service Worker is not active by then to cache the initial response. Also, every file has to be listed individually, as directories are not recognized. 313 | - Once a PWA is installed, the icons cannot be changed. The change is reflected on re-installing the PWA. (I think TWAs can change their icons. Check the [TWA section](#twa) below for more info.) 314 | - An offline PWA does not have access to Local Storage. (The service worker does not allow it.) IndexedDB can be used in place. ([IndexedDB section](#indexeddb) below.) 315 | - [Some problems with Service Workers](https://www.youtube.com/watch?v=JJSloXLTyNg) 316 | 317 | #### Networking 318 | 319 | - [My notes and resources](https://networking.harshkapadia.me) 320 | 321 | #### RegEx 322 | 323 | - [My RegEx notes and resources](https://harshkapadia2.github.io/regex) 324 | 325 | #### SVG 326 | 327 | - [Get started](https://webdesign.tutsplus.com/tutorials/how-to-hand-code-svg--cms-30368) 328 | 329 | #### Intersection Observer API 330 | 331 | - [15 minute crash course](https://www.youtube.com/watch?v=2IbRtjez6ag) 332 | - [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) 333 | - [Scroll to top button](https://css-tricks.com/how-to-make-an-unobtrusive-scroll-to-top-button/#option-3-intersection-observer) 334 | 335 | #### IndexedDB 336 | 337 | - [Crash course](https://www.youtube.com/watch?v=vb7fkBeblcw) 338 | 339 | #### Web Components API 340 | 341 | - [Crash course](https://www.youtube.com/watch?v=PCWaFLy3VUo) 342 | - [HTML with Superpowers](https://www.youtube.com/watch?v=fEhBkSZ15qM) 343 | 344 | #### Misc Libraries 345 | 346 | - [Color Thief](https://lokeshdhakar.com/projects/color-thief) - Grab the color palette from an image using JS. Works in the browser and in Node.js. 347 | 348 | #### TWA 349 | 350 | - Prerequisites 351 | - [PWA](#pwa--service-worker-api) 352 | - Google Play Console Developer Account ($25 fee) 353 | - [What is a Trusted Web Activity?](https://www.youtube.com/watch?v=7JDFjeMvxos) 354 | - [TWA overview](https://developer.chrome.com/docs/android/trusted-web-activity/overview) 355 | - [Build a TWA from an existing PWA](https://www.pwabuilder.com) ([Steps after downlaoding](https://github.com/pwa-builder/CloudAPK/blob/master/Next-steps.md) and [Asset Link file instructions](https://github.com/pwa-builder/CloudAPK/blob/master/Asset-links.md)) 356 | - Hosting a TWA using GitHub Pages 357 | - NOTE: The PWA can be hosted from any of **your** repos. The instructions below have to be followed nonetheless. 358 | - Create a repo with the name `.github.io`. 359 | - The `.well-known/assetlinks.json` file should be in the root directory of the newly created repo. ([More info](https://www.mydatahack.com/releasing-multiple-pwas-to-googleplay-by-using-a-single-github-page-root)) 360 | - If you're not using [Jekyll](https://jekyllrb.com), add an empty `.nojekyll` file to the root directory of the newly created repo. ([Reason](https://github.community/t/unable-to-access-resources-in-folder-with-name-starting-with/10505)) 361 | - If you're using [Jekyll](https://jekyllrb.com), change your `_config.yml` file to include the `.well-known` folder. 362 | 363 | ### General Back End Prerequisites 364 | 365 | #### HTTP 366 | 367 | - [What is HTTP?](https://www.youtube.com/watch?v=0OrmKCB0UrQ) 368 | - [Crash course](https://www.youtube.com/watch?v=iYM2zFP3Zn0) 369 | - [HTTP methods, status codes and versions](https://harshkapadia2.github.io/networking/http.html) 370 | 371 | #### JSON 372 | 373 | - [Crash course](https://www.youtube.com/watch?v=iiADhChRriM) 374 | - [Schema templates](https://www.schemastore.org/json) (for JSON, JavaScript and CSS) 375 | - [`JSON.stringify`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) and its [optional parameters](https://www.youtube.com/watch?v=0k4NwimfszA). 376 | - [`JSON.parse`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) 377 | 378 | #### APIs 379 | 380 | - [Everything about APIs](https://blogs.omkaragrawal.dev/everything-about-apis) 381 | - [REST (RESTful) API introduction](https://www.youtube.com/watch?v=Q-BpqyOT3a8) 382 | - [REST in short](https://www.youtube.com/watch?v=6sUbt-Qp6Pg) 383 | - [REST Web Service](https://www.youtube.com/watch?v=lyxJQWUymV4&list=PLhW3qG5bs-L9E2KV6vVdB-YTk-sRxmRAB&index=5) 384 | - [Designing an API](https://www.youtube.com/watch?v=_YlYuNMTCc8) 385 | - [Some public APIs](https://github.com/public-apis/public-apis) 386 | - [Google Translate API](https://www.w3schools.com/howto/howto_google_translate.asp) 387 | 388 | #### Async JS 389 | 390 | - [Crash course](https://www.youtube.com/watch?v=_8gHHBlbziw) 391 | - [`async`/`await` article](https://www.freecodecamp.org/news/async-await-javascript-tutorial) 392 | 393 | #### Caching 394 | 395 | - [CacheStorage API](https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage) 396 | - [Cache API](https://developer.mozilla.org/en-US/docs/Web/API/Cache) 397 | - [Cache-Control header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) 398 | - Difference between the Cache API and CacheStorage API 399 | - [Tweet](https://twitter.com/harshgkapadia/status/1355100023705493507) 400 | - A Cache is an object (file) and Cache Storage is a file system. 401 | - [Cache Busting](https://medium.com/javascript-in-plain-english/what-is-cache-busting-55366b3ac022) ([CSS-Tricks article](https://css-tricks.com/strategies-for-cache-busting-css)) 402 | - [Application Cache is a Douchebag](https://alistapart.com/article/application-cache-is-a-douchebag) (Caching gotchas.) (Refer to [PWA section](#pwa--service-worker-api) above.) 403 | 404 | #### CORS 405 | 406 | - Prerequisite 407 | - [Fetch API](#ajax-and-its-libraries) 408 | - Session by me 409 | - [Working with CORS](https://talks.harshkapadia.me/cors) 410 | - [Tackling CORS quickly](https://www.youtube.com/watch?v=PNtFSVU-YTI) 411 | - [MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (Pretty extensive.) 412 | - [CORS explained by example](https://www.youtube.com/watch?v=Ka8vG5miErk) 413 | - [How to win at CORS](https://jakearchibald.com/2021/cors) 414 | - CORS proxies 415 | - [What are they and why are they required?](https://httptoolkit.tech/blog/cors-proxies) (Primer article.) 416 | - [CORS Anywhere](https://github.com/Rob--W/cors-anywhere) 417 | - [CORS Bridged](https://app.cors.bridged.cc) ([Usage guide](https://blog.grida.co/cors-anywhere-for-everyone-free-reliable-cors-proxy-service-73507192714e)) 418 | - [List of proxies and more](https://gist.github.com/jimmywarting/ac1be6ea0297c16c477e17f8fbe51347) (Some are dead.) 419 | - Credentialed requests through the [`Authorization` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Authorization) using the [Fetch API](#ajax-and-its-libraries) 420 | - Demos by me 421 | - [HarshKapadia2/cors](https://github.com/HarshKapadia2/cors) 422 | - [HarshKapadia2/flask-jwt-cors](https://github.com/HarshKapadia2/flask-jwt-cors) 423 | - The [`Access-Control-Allow-Headers` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers) can't be wildcarded (`*`) and the `Authorization` header always needs to be listed explicitly. 424 | - Side note: If the `Content-Type` request header's value is `application/json`, add it to the value of the `Access-Control-Allow-Headers` response header. ([Source](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#:~:text=The%20only%20type/subtype%20combinations%20allowed%20for%20the%20media%20type%20specified%20in%20the%20Content%2DType%20header%20are%3A)) 425 | - The [`Access-Control-Allow-Methods` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods) can't be wildcarded (`*`) and all the allowed [HTTP request methods](https://networking.harshkapadia.me/http#http-request-methodsverbs) need to be listed explicitly. 426 | - The [`Access-Control-Allow-Origin` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin) can't be wildcarded (`*`) and the origin always needs to be listed explicitly. ([Source](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#:~:text=Note%3A%20When%20responding%20to%20a%20credentialed%20requests%20request%2C%20the%20server%20must%20specify%20an%20origin%20in%20the%20value%20of%20the%20Access%2DControl%2DAllow%2DOrigin%20header%2C%20instead%20of%20specifying%20the%20%22*%22%20wildcard.)) 427 | - This header needs to not only be sent in the response to the preflight request, but in the response to the the actual request as well. 428 | - The [`Access-Control-Allow-Credentials` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials) needs to be sent 429 | - [In response to the preflight request](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#requests_with_credentials) and in response to the actual request after the preflight request as well. 430 | - [In response to the simple (non-preflighted) requests that require authorization.](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#:~:text=Line%207%20shows,invoking%20web%20content.) 431 | - In Fetch, the [`credentials: "include"` option](https://developer.mozilla.org/en-US/docs/Web/API/fetch#credentials) has to be added. 432 | - This option is what adds the strictness of adding non-wildcarded values to each of the response headers. 433 | - [Fetch does not send any Cookies by default](https://medium.com/cameron-nokes/4-common-mistakes-front-end-developers-make-when-using-fetch-1f974f9d1aa1#:~:text=Unlike%20XHR%2C%20fetch%20does%20not%20include%20any%20cookies%20in%20the%20request%20by%20default.) and [this option makes the browser send 1st and 3rd party Cookies to the server](https://zellwk.com/blog/handling-cookies-with-fetchs-credentials/#:~:text=domains%20or%20subdomains.-,If%20you%20set,3rd%20party%20cookies%20set%20by%20a%20specific%20domain%20that%20domain%E2%80%99s%20server.,-Access%2DControl%2DAllow). 434 | - When using Fetch, remember to return appropriate CORS headers with the error response as well, otherwise the Fetch call itself will fail and the actual error will not be caught. 435 | - A CORS error will pop up for errors returned without appropriate CORS headers, instead of returning the actual error and that can get very confusing. 436 | 437 | #### Cookies 438 | 439 | - [Crash course](https://www.youtube.com/watch?v=sovAIX4doOE) 440 | - [`SameSite` Cookie Attribute](https://www.youtube.com/watch?v=aUF2QCEudPo) 441 | 442 | #### AJAX and its libraries 443 | 444 | - [Crash course](https://www.youtube.com/watch?v=82hnvUYY6QA) (with `XMLHttpRequest`, i.e., `XHR`) 445 | - Fetch API 446 | - [Hands on introduction](https://www.youtube.com/watch?v=Oive66jrwBs) 447 | - [Fetch API error handling](https://www.youtube.com/watch?v=cuEtnrL9-H0) 448 | - [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) (MDN) 449 | - [Common `no-cors` misconceptions](https://evertpot.com/no-cors) 450 | - The response body, status or headers cannot be read. 451 | - [Handling cookies with Fetch’s credentials](https://zellwk.com/blog/handling-cookies-with-fetchs-credentials) 452 | - [Common mistakes](https://medium.com/cameron-nokes/4-common-mistakes-front-end-developers-make-when-using-fetch-1f974f9d1aa1) 453 | - [Playlist: Async JS, AJAX, XHR, Fetch, Cookies, CORS, Headers, Auth, etc.](https://www.youtube.com/watch?v=7EKebb4VUYQ&list=PLyuRouwmQCjkWu63mHksI9EA4fN-vwGs7&index=1) 454 | 455 | #### JWT 456 | 457 | - [Crash course](https://www.youtube.com/watch?v=T0k-3Ze4NLo) 458 | - [Session vs Token Authentication in 100 Seconds](https://www.youtube.com/watch?v=UBUNrFtufWo) 459 | - [What Is JWT and Why Should You Use JWT?](https://www.youtube.com/watch?v=7Q17ubqLfaM) 460 | - [Why I haven't been using JWT tokens for Authentication](https://www.youtube.com/watch?v=dgg1dvs0Bn4) (Ben Awad) 461 | - [A JWT demo using the `flask-jwt-extended` package.](https://github.com/HarshKapadia2/flask-jwt-cors) 462 | - JWTs are for authorization and not authentication. (Username and password provide authentication.) 463 | - Refresh Tokens 464 | - [What Are Refresh Tokens and How to Use Them Securely](https://auth0.com/blog/refresh-tokens-what-are-they-and-when-to-use-them) 465 | - [How to Handle Refresh Tokens](https://security.stackexchange.com/questions/194774/how-to-handle-refresh-tokens) 466 | - Refresh Tokens are tokens with a longer expiry duration than Access Tokens. 467 | - If the Refresh Token is expired, then the user has to manually log in. 468 | - They are used to 469 | - Reduce the number of explicit logins that the client has to make. 470 | - Reduce the load of querying/storing authorization details in the database every time a user needs access. 471 | - There is a tradeoff between security and database storage/querying. 472 | - If better security is required, the Refresh Tokens need to be stored in the database and marked as expired once a new one is issued. This increases database querying, but improves security and still maintains the convenience of less number of logins for the client. 473 | - Another way to provide security would be to issue a new Refresh Token every time a new Access Token is issued, but this increases the number of Refresh Tokens that have to be stored in the database (to expire them later as discussed in the previous point). So database storage is increased, but this improves security and still maintains the convenience of less number of logins for the client. 474 | - Storing Refresh Tokens is still better than storing a Session Token, because a Session Token is checked every time an API call is made. Now if there are too many Refresh Tokens, database storage increases and querying takes time, but that is a trade off that has to be decided upon. 475 | - A hybrid approach can be taken, where a Session Token (as a short-lived JWT) can be issued and stored in the database along with a Refresh Token and so the Session Token does not have to be checked with the DB on every request. A new Session Token can be issued whenever it expires, using the Refresh Token. 476 | 477 | ### Databases 478 | 479 | - [A database of Databases](https://dbdb.io) 480 | - [Database Engineering by Hussein Nasser](https://www.youtube.com/watch?v=pomxJOFVcQs&list=PLQnljOFTspQXjD0HOzN7P2tgzu7scWpl2) 481 | - [CMU 445/645 Introduction to Database Systems](https://www.youtube.com/watch?v=oeYBdghaIjc&list=PLSE8ODhjZXjbohkNBWQs_otTrBTrjyohi&index=2) 482 | - [CMU 721 Advanced Database Systems](https://www.youtube.com/watch?v=SdW5RKUboKc&list=PLSE8ODhjZXjasmrEd2_Yi1deeE360zv5O&index=2) 483 | 484 | #### SQL 485 | 486 | - Relational DBs 487 | - [MySQL crash course](https://www.youtube.com/watch?v=HXV3zeQKqGY) 488 | - MySQL [fragmentation](https://www.youtube.com/watch?v=sICmP7bJrvo) and [partitioning](https://www.youtube.com/watch?v=iUjoPB27-iA) 489 | - Eg: MySQL, PostgreSQL, MariaDB, SQLite, etc... 490 | 491 | #### NoSQL 492 | 493 | - Non-relational DBs 494 | - [NoSQL DB introduction](https://www.youtube.com/watch?v=uD3p_rZPBUQ) 495 | - [MongoDB crash course](https://www.youtube.com/watch?v=-56x56UppqQ) 496 | - Cloud Firestore and Realtime DB (Covered in the [Firebase section](#firebase) below.) 497 | 498 | ### JS Back End 499 | 500 | #### Node.js 501 | 502 | - [Crash course](https://www.youtube.com/watch?v=fBNz5xF-Kx4) 503 | - [The Art of Node](https://github.com/maxogden/art-of-node) 504 | - [Middleware](https://thenextbigwriter.tech/middlewares-in-express-js-ck8d87su900w3xes1ny80u28q) 505 | - ['Callbacks' in JS section above](https://dev.harshkapadia.me/resources.html#js:~:text=Callbacks) 506 | - Modules 507 | - Refer to the 'Modules' point in the [JS section](#js) above. 508 | - [How to Export and Require Modules in Node.js](https://www.youtube.com/watch?v=pP4kjXykbio) 509 | - [Creating and publishing a NPM package](https://iq.opengenus.org/creating-node-modules) 510 | 511 | #### Express.js 512 | 513 | - [Crash course](https://www.youtube.com/watch?v=L72fhGm1tfE) 514 | - [Body parser](https://stackoverflow.com/a/43626891/11958552) 515 | 516 | #### JS REST API 517 | 518 | - [Node.js (Express.js) and MongoDB REST API](https://www.youtube.com/watch?v=vjf774RKrLc) 519 | 520 | ### Python Back End 521 | 522 | #### Prerequisite 523 | 524 | - [Python basics](https://www.youtube.com/watch?v=JJmcL1N2KQs) 525 | 526 | #### Flask 527 | 528 | - [Crash course](https://www.youtube.com/watch?v=Z1RJmh_OqeA) 529 | - [_Tech With Tim_'s series](https://www.youtube.com/watch?v=mqhxxeeTbu0&list=PLzMcBGfZo4-n4vJJybUVV3Un_NFS5EOgX) 530 | - [Documentation](https://flask.palletsprojects.com/en/1.1.x) 531 | - [How to enable CORS in Flask?](https://stackoverflow.com/a/52875875/11958552) 532 | 533 | ### PHP 534 | 535 | #### Prerequisites 536 | 537 | - [PHP basics](https://www.youtube.com/watch?v=oJbfyzaA2QA&list=PLillGF-Rfqbap2IB6ZS4BBBcYPagAjpjn&index=1) 538 | - [PHP Data Objects](https://www.youtube.com/watch?v=kEW6f7Pilc4) (PDO) 539 | 540 | #### PHP REST API 541 | 542 | - [Crash course](https://www.youtube.com/watch?v=OEWXbpUMODk&list=PLillGF-RfqbZ3_Xr8do7Q2R752xYrDRAo&index=1) 543 | 544 | ### Front End JS Frameworks/Libraries 545 | 546 | #### Prerequisites 547 | 548 | ##### Misc 549 | 550 | - [General front end framework advice](https://threadreaderapp.com/thread/1394898131926458371.html) 551 | - [How To Handle Large Amounts of Data in React-based Applications](https://betterprogramming.pub/how-to-handle-large-amounts-of-data-in-react-based-applications-8d97dd80a9f1) 552 | 553 | ##### JavaScript 554 | 555 | - [JavaScript requirements](https://www.youtube.com/watch?v=JR9wsVYp8RQ) 556 | - [JS section](#js) 557 | - [Async JS](#async-js) 558 | - [AJAX and its libraries](#ajax-and-its-libraries) 559 | 560 | ##### State 561 | 562 | - ['State' in 30 seconds](https://twitter.com/technoidic_ash/status/1305638862631260160) 563 | - [What is 'state'?](https://egghead.io/articles/what-is-state-why-do-i-need-to-manage-it) 564 | 565 | ##### XML 566 | 567 | - [Very basics of XML](https://www.youtube.com/watch?v=KeLiQXqVgMI) 568 | 569 | #### React.js 570 | 571 | - [React in 100 Seconds](https://www.youtube.com/watch?v=Tn6-PIqc4UM) 572 | - [Crash course](https://www.youtube.com/watch?v=w7ejDZ8SWv8) 573 | - Hooks 574 | - [`useState` array pass by reference gotcha](https://stackoverflow.com/a/67354136/11958552) 575 | - [10 React Hooks Explained](https://www.youtube.com/watch?v=TNhaISOUy6Q) 576 | - [Hooks API reference](https://reactjs.org/docs/hooks-reference.html) 577 | - [The `useRef` hook](https://www.youtube.com/watch?v=t2ypzz6gJm0) 578 | - [Be Aware of Stale Closures when Using React Hooks](https://dmitripavlutin.com/react-hooks-stale-closures) 579 | - Memoization 580 | - [Understanding re-rendering and memoization in React](https://engineering.udacity.com/understanding-re-rendering-and-memoization-in-react-13e8c024c2b4) 581 | - [Use `React.memo()` wisely](https://dmitripavlutin.com/use-react-memo-wisely) 582 | - [30-Days-Of-React](https://github.com/Asabeneh/30-Days-Of-React) 583 | - Internals 584 | - [How a React App Works Under the Hood](https://www.youtube.com/watch?v=TjnyFNxQ67Y) (High level stuff in 14 mins.) 585 | - [Is React a Library or a Framework? Here's Why it Matters](https://www.freecodecamp.org/news/is-react-a-library-or-a-framework) 586 | - [Why does React.js need keys?](https://twitter.com/dan_abramov/status/1415279090446204929) 587 | - [Calling functional components as functions](https://dev.to/igor_bykov/react-calling-functional-components-as-functions-1d3l) 588 | - [Deconstructing React](https://www.youtube.com/watch?v=f2mMOiCSj5c) 589 | - [Building a Custom React Renderer](https://www.youtube.com/watch?v=CGpMlWVcHok) 590 | - [Destructuring React](https://www.youtube.com/watch?v=zmO51Dn5DPI) 591 | - [Understanding React's UI Rendering Process](https://www.youtube.com/watch?v=i793Qm6kv3U) 592 | 593 | ### Misc #2 594 | 595 | #### Favicon 596 | 597 | - [Favicon Standard - 2024 - svg, ico, png and dimensions?](https://stackoverflow.com/questions/48956465/favicon-standard-2024-svg-ico-png-and-dimensions) 598 | - [What is the best practice for creating a favicon on a web site?](https://stackoverflow.com/questions/25952907/what-is-the-best-practice-for-creating-a-favicon-on-a-web-site) 599 | - [Does a favicon have to be 32×32 or 16×16?](https://stackoverflow.com/questions/4014823/does-a-favicon-have-to-be-32%C3%9732-or-16%C3%9716) 600 | - [How to add a favicon to your website — The modern browser guide](https://loqbooq.app/blog/add-favicon-modern-browser-guide) 601 | - [RealFaviconGenerator](https://realfavicongenerator.net) 602 | 603 | #### Web Performance 604 | 605 | - [Site-Speed Topography](https://csswizardry.com/2020/11/site-speed-topography) 606 | - [Lighthouse](https://developers.google.com/web/tools/lighthouse) (available in Chrome and Edge DevTools and as an add-on in Firefox) 607 | - [web.dev](https://web.dev) 608 | 609 | #### SEO 610 | 611 | ##### `robots.txt` 612 | 613 | - [robotstxt.org](https://www.robotstxt.org) 614 | - [Google Site Verification](https://developers.google.com/search/docs/advanced/robots/submit-updated-robots-txt) 615 | - Example 616 | - [google.com/robots.txt](https://www.google.com/robots.txt) 617 | - [catchup.ourtech.community/robots.txt](https://catchup.ourtech.community/robots.txt) 618 | - [harshkapadia2.github.io/git_basics/robots.txt](https://harshkapadia2.github.io/git_basics/robots.txt) 619 | 620 | #### Firebase 621 | 622 | - BaaS 623 | - [Documentation](https://firebase.google.com/docs) (More than sufficient. Also, do watch the videos linked in the docs.) 624 | 625 | #### DevOps 626 | 627 | ##### Git 628 | 629 | - Covered in the [Git and GitHub section](#git-and-github) above. 630 | 631 | ##### Shell Scripting 632 | 633 | - [Shell and Shell scripting](https://harshkapadia2.github.io/cli) 634 | - [Advanced Bash-Scripting Guide](https://tldp.org/LDP/abs/html/index.html) 635 | - [Dotfiles](https://github.com/HarshKapadia2/dotfiles) 636 | 637 | ##### Build Systems 638 | 639 | - Make 640 | - [Make basics](https://www.youtube.com/watch?v=a8mPKBxQ9No) 641 | - [Makefiles: 95% of what you need to know](https://www.youtube.com/watch?v=DtGrdB8wQ_8) 642 | - [Sample Makefile from a project](https://github.com/HarshKapadia2/parse-elf/blob/main/Makefile) 643 | - [What do the makefile symbols `$@` and `$<` mean?](https://stackoverflow.com/questions/3220277/what-do-the-makefile-symbols-and-mean) 644 | - [What's the difference between `:=` and `=` in Makefile?](https://stackoverflow.com/questions/4879592/whats-the-difference-between-and-in-makefile) 645 | - [What is the purpose of `.PHONY` in a Makefile?](https://stackoverflow.com/questions/2145590/what-is-the-purpose-of-phony-in-a-makefile) 646 | - [Difference between CC, gcc and g++?](https://stackoverflow.com/questions/1516609/difference-between-cc-gcc-and-g) 647 | 648 | ##### Deployment/Hosting 649 | 650 | - For web sites only 651 | - [GitHub Pages](https://pages.github.com) 652 | - [Netlify](https://www.netlify.com) 653 | - For web sites and web apps 654 | - [Heroku](https://heroku.com) 655 | - [Vercel](https://vercel.com) 656 | - [Deta](https://deta.sh) 657 | - [Python Anywhere](https://www.pythonanywhere.com) (Only for Python web sites and web apps.) 658 | - [Firebase Hosting](https://firebase.google.com/docs/hosting) (Dynamic: Only Node.js supported through Cloud Functions) 659 | - [Digital Ocean](https://www.digitalocean.com/solutions/website-hosting) 660 | - Domain names 661 | - [.js.org](https://js.org) (For users, organizations, projects, etc.) (free) 662 | - [.is-a.dev](https://www.is-a.dev) (For portfolio web sites.) (free) 663 | - [.ml](http://www.dot.ml/en/index.html) (free) 664 | 665 | ##### YAML 666 | 667 | - [Crash course](https://www.youtube.com/watch?v=1uFVr15xDGg) 668 | - [Different string quotes and their meanings](https://stackoverflow.com/a/69850618/11958552) 669 | 670 | ##### CI/CD 671 | 672 | - GitHub Actions 673 | - GitLab Actions 674 | - Jenkins 675 | - TravisCI 676 | - Circle CI 677 | 678 | ##### Docker 679 | 680 | - [Getting Started](https://www.youtube.com/watch?v=Kyx2PsuwomE) (part one of two) 681 | - [Docker Compose](https://www.youtube.com/watch?v=hP77Rua1E0c) (part two of two) 682 | - [My Docker repo](https://harshkapadia2.github.io/docker) 683 | 684 | ##### Cloud 685 | 686 | - [My notes and resources](https://harshkapadia2.github.io/cloud) 687 | 688 | #### The Missing Semester of CS Education 689 | 690 | - [The Missing Semester of Your CS Education](https://missing.csail.mit.edu) 691 | 692 | #### Character Sets and Encoding 693 | 694 | ##### Unicode 695 | 696 | - [The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)](https://www.joelonsoftware.com/2003/10/08/the-absolute-minimum-every-software-developer-absolutely-positively-must-know-about-unicode-and-character-sets-no-excuses) 697 | - [What are Unicode, UTF-8, and UTF-16?](https://stackoverflow.com/questions/2241348/what-are-unicode-utf-8-and-utf-16) 698 | 699 | ##### New Lines/Line Endings 700 | 701 | - [A line, as defined by POSIX](https://pubs.opengroup.org/onlinepubs/9699919799/basedefs/V1_chap03.html#tag_03_206), is a sequence of zero or more non- `` characters plus a terminating `` character. 702 | - There are multiple ways that a newline character can be defined, mainly based on the Operating System, as shown below. 703 | - Also called 'Newline' and 'line break'. 704 | - Types 705 | - Carriage Return 706 | - Unicode and ASCII: `CR` 707 | - Programming languages: `\r` 708 | - Hexadecimal: `0D`, `0x0D` 709 | - [More details](https://www.asciihex.com/character/control/13/0x0D/cr-carriage-return) 710 | - Line Feed 711 | - Unicode and ASCII: `LF` 712 | - Programming languages: `\n` 713 | - Hexadecimal: `0A`, `0x0A` 714 | - [More details](https://www.asciihex.com/character/control/10/0x0A/lf-line-feed) 715 | - Carriage Return and Line Feed 716 | - Unicode and ASCII: `CRLF`, `CR+LF` 717 | - Programming languages: `\r\n` 718 | - Hexadecimal: `0D 0A`, `0x0D 0x0A` 719 | - End of Line 720 | - Unicode: `EOL` 721 | - Next Line 722 | - Unicode: `NEL` 723 | - New Line 724 | - EBCDIC: `NL` 725 | - > ...different system uses different line break. Carriage Return is used on old Macintosh operating systems. UNIX based systems including Linux and Mac OS X use Line Feed, while most of non-Unix operating systems use End of Line (`\r\n`). Therefore, good code should handle all kind of line breaks. ([Source](https://www.woolha.com/tutorials/dart-split-string-by-newline-using-linesplitter#:~:text=Sometimes%20we%20may,CR%20%2B%20LF.)) 726 | - Why should text files have a new line at the end? 727 | - [Why should text files end with a newline?](https://gist.github.com/OleksiyRudenko/d51388345ea55767b7672307fe35adf3) 728 | - [Please add newlines at end of files](https://gist.github.com/camh-/1bebfcff1b0f814e9b191edc60d5206b) 729 | - [Why should text files end with a newline?](https://stackoverflow.com/questions/729692/why-should-text-files-end-with-a-newline) 730 | - [What's the point in adding a new line to the end of a file?](https://unix.stackexchange.com/questions/18743/whats-the-point-in-adding-a-new-line-to-the-end-of-a-file) 731 | - [What's a Carriage and Who's Feeding it Lines? CRLF](https://www.youtube.com/watch?v=TtiBhktB4Qg) 732 | - [Newline](https://en.wikipedia.org/wiki/Newline) 733 | - [`\r\n` vs `\n\r` what is the difference in their behavior?](https://stackoverflow.com/questions/43607389/r-n-vs-n-r-what-is-the-difference-in-their-behavior) 734 | - [Why Windows uses `\r\n` newlines instead of `\n`](https://dev.to/pieter/why-windows-uses-rn-newlines-instead-of-n-126l) 735 | - [What Are Teletypes, and Why Were They Used with Computers?](https://www.howtogeek.com/727213/what-are-teletypes-and-why-were-they-used-with-computers) 736 | - [Video with `CR` and `LF` keys on a Teletype Model 33 ASR!](https://youtu.be/ObgXrIYKQjc) 737 | 738 | ##### Misc Characters 739 | 740 | - [Deleting a single character involves three characters (`\b \b`).](https://stackoverflow.com/a/24404619/11958552) 741 | 742 | ### C 743 | 744 | - [C in 100 Seconds](https://www.youtube.com/watch?v=U3aXWizDbQ4) 745 | - [You Can Write Your First C Program In 10 Minutes](https://www.youtube.com/watch?v=BuiX6vsiEfo) 746 | - [The Descent to C](https://www.chiark.greenend.org.uk/~sgtatham/cdescent) 747 | - [Is C programming language low level or high level?](https://softwareengineering.stackexchange.com/questions/303117/is-c-programming-language-low-level-or-high-level) 748 | - [C introduction notes](./files/c/c-intro-notes-manjrekar.pdf) 749 | - [`int main()` vs `void main()` vs `int main(void)` in C](https://web.archive.org/web/20230208173548/https://www.codesdope.com/blog/article/int-main-vs-void-main-vs-int-mainvoid-in-c-c) 750 | - [C warning: 'Function declaration isn't a prototype'](https://stackoverflow.com/a/20843829/11958552) 751 | - Why `int foo() { /* ... */ }` gives a warning and `int foo(void) { /* ... */}` resolves it. 752 | - Header files 753 | - [Header files](https://www.tutorialspoint.com/cprogramming/c_header_files.htm) 754 | - [why do header files even exist?](https://www.youtube.com/watch?v=tOQZlD-0Scc) 755 | - [Should I use `#include` in headers?](https://stackoverflow.com/questions/1804486/should-i-use-include-in-headers) 756 | - Header file locations in Linux 757 | - [Where is the `stdio.h` file located in Linux while using the gcc.7.2 compiler?](https://stackoverflow.com/questions/46043225/where-is-the-stdio-h-file-located-in-linux-while-using-the-gcc-7-2-compiler) 758 | - [Where is `stdbool.h`?](https://stackoverflow.com/questions/1656874/where-is-stdbool-h) 759 | - Include Guards 760 | - [Why are `#ifndef` and `#define` used in C++ header files?](https://stackoverflow.com/questions/1653958/why-are-ifndef-and-define-used-in-c-header-files) 761 | - [What exactly do C include guards do?](https://stackoverflow.com/questions/27810115/what-exactly-do-c-include-guards-do) 762 | - [What is the conventional way of writing include guards?](https://stackoverflow.com/questions/17307540/what-is-the-conventional-way-of-writing-include-guards) 763 | - Libraries and compiling multiple files together 764 | - [HOWTO: C Libraries](https://www.cs.swarthmore.edu/~newhall/unixhelp/howto_C_libraries.html) 765 | - [How to define common function in c](https://stackoverflow.com/questions/24984744/how-to-define-common-function-in-c) 766 | - Pointers 767 | - [you will never ask about pointers again after watching this video](https://www.youtube.com/watch?v=2ybLD6_2gKM) 768 | - [What is `char **` in C?](https://stackoverflow.com/questions/13353807/what-is-char-in-c) 769 | - [why do void pointers even exist?](https://www.youtube.com/watch?v=t7CUti_7d7c) 770 | - [Pointer arithmetic cannot be performed on void pointers](https://stackoverflow.com/questions/6449935/increment-void-pointer-by-one-byte-by-two) 771 | - [How does incrementing memory address affects pointer](https://stackoverflow.com/questions/56608384/how-does-incrementing-memory-address-affects-pointer) (excellent example) 772 | - [Constant pointer vs Pointer to constant](https://stackoverflow.com/questions/21476869/constant-pointer-vs-pointer-to-constant) 773 | - Characters and strings 774 | - [Char Comparison in C](https://stackoverflow.com/questions/22736348/char-comparison-in-c) 775 | - [Why do strings in C need to be null terminated?](https://stackoverflow.com/questions/2221304/why-do-strings-in-c-need-to-be-null-terminated) 776 | - [Why/when to include terminating `\0` character for C Strings?](https://stackoverflow.com/questions/46261028/why-when-to-include-terminating-0-character-for-c-strings) 777 | - [Single quotes vs. double quotes in C or C++](https://stackoverflow.com/questions/3683602/single-quotes-vs-double-quotes-in-c-or-c) 778 | - Compilers 779 | - [GCC vs Clang](https://stackoverflow.com/questions/24836183/what-is-the-difference-between-clang-and-llvm-and-gcc-g) 780 | - [Difference between CC, gcc and g++?](https://stackoverflow.com/questions/1516609/difference-between-cc-gcc-and-g) 781 | - [Why is C Compiler So Smart?](https://www.youtube.com/watch?v=juWM6saNCZk) 782 | - [what's the Secret Sauce that makes code work?](https://www.youtube.com/watch?v=2y1IgW2T8bo) 783 | - Going over all compilation steps: [github.com/HarshKapadia2/compilation-examples](https://github.com/HarshKapadia2/compilation-examples) 784 | - [Writing a compiler with LLVM](https://www.youtube.com/watch?v=vrRXIQDCCEk) 785 | - `libc` and `libm` 786 | - [what is `libc`?](https://stackoverflow.com/questions/20396471/what-is-libc-what-are-the-functions-it-includes-how-can-we-get-the-source-code) 787 | - [`libc` vs `glibc`](https://stackoverflow.com/a/54053221/11958552) 788 | - [Why do you need an explicit `-lm` compiler option?](https://stackoverflow.com/questions/10371647/why-do-you-need-an-explicit-lm-compiler-option) 789 | - [Why do you have to link the math library in C?](https://stackoverflow.com/questions/1033898/why-do-you-have-to-link-the-math-library-in-c) 790 | - [Location of C standard library](https://stackoverflow.com/questions/5925678/location-of-c-standard-library) 791 | - [What is the difference between C, C99, ANSI C and GNU C?](https://stackoverflow.com/questions/17206568/what-is-the-difference-between-c-c99-ansi-c-and-gnu-c) 792 | - Data types and variables 793 | - [What is the use of typedef?](https://stackoverflow.com/questions/2566027/what-is-the-use-of-typedef) 794 | - `_t` data types 795 | - [All Those `_t` Data Types](https://c-for-dummies.com/blog/?p=5059) 796 | - [What Is The `_t` In `Uint8_t`](https://techexplorations.com/guides/arduino/programming/_t-in-uint8_t/#:~:text=So%2C%20in%20the%20C99%20standard,platform%20the%20program%20runs%20on.) 797 | - [What does a type followed by `_t` (underscore-t) represent?](https://stackoverflow.com/questions/231760/what-does-a-type-followed-by-t-underscore-t-represent) 798 | - Using the `L` suffix for `long` data types 799 | - [what is the reason for explicitly declaring `L` or `UL` for `long` values](https://stackoverflow.com/a/13139304/11958552) 800 | - [What's the point of adding an "l" at the end of an int or long int when you define it?](https://www.reddit.com/r/C_Programming/comments/kcvhhs/comment/gftgaa7) 801 | - [Overflow demo](https://gist.github.com/HarshKapadia2/eaf501d241b2798d5672ed102b780b82) 802 | - [Using the letter L in long variable declaration](https://stackoverflow.com/questions/17738232/using-the-letter-l-in-long-variable-declaration) 803 | - [From Java: Integer Literals](https://docs.oracle.com/javase/tutorial/java/nutsandbolts/datatypes.html#:~:text=Values%20of%20the%20integral%20types%20byte%2C%20short%2C%20int%2C%20and%20long%20can%20be%20created%20from%20int%20literals.%20Values%20of%20type%20long%20that%20exceed%20the%20range%20of%20int%20can%20be%20created%20from%20long%20literals.) 804 | - [What are the rules about using an underscore in a C identifier?](https://stackoverflow.com/questions/69084726/what-are-the-rules-about-using-an-underscore-in-a-c-identifier) 805 | - `const` keyword 806 | - [How do I best use the const keyword in C?](https://stackoverflow.com/questions/14401856/how-do-i-best-use-the-const-keyword-in-c) 807 | - [expected expected `const char **` but argument is of type `char **`](https://stackoverflow.com/questions/28783534/expected-expected-const-char-but-argument-is-of-type-char) 808 | - [What is POSIX? Why Does it Matter to Linux/UNIX Users?](https://itsfoss.com/posix) 809 | - Buffer Overflow Attack 810 | - [why do hackers love strings?](https://www.youtube.com/watch?v=fjMrDDj47E8) 811 | - [how do hackers exploit buffers that are too small?](https://www.youtube.com/watch?v=qpyRz5lkRjE) 812 | - [Does buffer-overflow causes segfault only when an important pointer is overwritten?](https://stackoverflow.com/questions/45740014/does-buffer-overflow-causes-segfault-only-when-an-important-pointer-is-overwritt) 813 | - [Buffer Overflow Attack](https://owasp.org/www-community/attacks/Buffer_overflow_attack) 814 | - [`fgets()` and `gets_s()`](https://www.cisa.gov/uscert/bsi/articles/knowledge/coding-practices/fgets-and-gets_s) 815 | - [Common vulnerabilities guide for C programmers](https://security.web.cern.ch/recommendations/en/codetools/c.shtml) 816 | - [Heartbleed bug](https://networking.harshkapadia.me/tls#heartbleed-bug) 817 | - [how can memory safe code STOP HACKERS?](https://www.youtube.com/watch?v=lxUYZVX_FjQ) 818 | - [everything is open source if you can reverse engineer](https://www.youtube.com/watch?v=gh2RXE9BIN8) 819 | - Arrays 820 | - [Returning an array using C](https://stackoverflow.com/questions/11656532/returning-an-array-using-c) 821 | - [Passing arrays as `int arr[2]`, `int *arr[2]`, `int (*arr)[2]`, etc.](https://stackoverflow.com/a/51527502/11958552) 822 | - [Tool to translate C expressions like `int *arr[2]` vs `int (*arr)[2]` into English](https://cdecl.org) 823 | - Memory layout 824 | - [Memory Layout and Compilers](https://linux.harshkapadia.me/#memory-layout-and-compilers) 825 | - Bitwise operations 826 | - [Basics of Bit Manipulation](https://www.hackerearth.com/practice/basic-programming/bit-manipulation/basics-of-bit-manipulation/tutorial) 827 | - [What does tilde(`~`) operator do?](https://stackoverflow.com/questions/3952122/what-does-tilde-operator-do) 828 | - [C/C++ check if one bit is set in, i.e. int variable](https://stackoverflow.com/questions/523724/c-c-check-if-one-bit-is-set-in-i-e-int-variable) 829 | - [Modify a bit at a given position](https://www.geeksforgeeks.org/modify-bit-given-position) 830 | - [How do I change bits in specific positions to specific values?](https://stackoverflow.com/questions/53478679/c-how-do-i-change-bits-in-specific-positions-to-specific-values) 831 | - [Set, Clear and Toggle a given bit of a number in C](https://www.geeksforgeeks.org/set-clear-and-toggle-a-given-bit-of-a-number-in-c) 832 | - Structures (`struct`s) 833 | - [Difference between `->` and `.` in a struct?](https://stackoverflow.com/questions/5998599/difference-between-and-in-a-struct) 834 | - Structure Packing 835 | - [The forgotten art of Struct Packing in C/C++.](https://www.joshcaratelli.com/blog/struct-packing) 836 | - [What is the meaning of `__attribute__((packed, aligned(4)))`?](https://stackoverflow.com/questions/11770451/what-is-the-meaning-of-attribute-packed-aligned4) 837 | - [Why Does Field Order in Your struct Matter](https://medium.com/@matheuscoppi22/why-does-field-order-in-your-struct-matter-430f8c54351a) 838 | - Unions 839 | - [Purpose of Unions in C and C++](https://stackoverflow.com/questions/2310483/purpose-of-unions-in-c-and-c) 840 | - Macros 841 | - [Macro vs Function in C](https://stackoverflow.com/questions/9104568/macro-vs-function-in-c) 842 | - [How can I check my byte flag, verifying that a specific bit is at 1 or 0?](https://stackoverflow.com/questions/127027/how-can-i-check-my-byte-flag-verifying-that-a-specific-bit-is-at-1-or-0) 843 | - Docs 844 | - [Docs](https://devdocs.io/c) 845 | - [Docs](https://www.mkssoftware.com/docs/man3/memcpy.3.asp) (Modify links) 846 | - [Phone Book project](https://github.com/HarshKapadia2/phone-book) 847 | 848 | ### Linux 849 | 850 | - [linux.harshkapadia.me](https://linux.harshkapadia.me) 851 | --------------------------------------------------------------------------------