My Dev Resources
- The crash course in each section is the bare minimum that should be done.
- The resources have been aligned in a logical manner that should be followed.
Table of Contents
- Prerequisites
- Front End
- Misc #1
- General Back End Prerequisites
- Databases
- JS Back End
- Python Back End
- PHP
- Front End JS Frameworks/Libraries
- Misc #2
- C
- Linux
My Resources
Prerequisites
- Browser (Google Chrome, Microsoft Edge, Brave or Firefox are preferred.)
- Set up VS Code (Code Editor)
- How To Setup Prettier (Code Formatter)
Front End
HTML
- Crash course
- Validator to check correctness of HTML.
- Best practices
- When to use
target="_blank" - Absolute vs relative links
- Difference between
href="css/style.css"(relative link) andhref="/css/style.css"(absolute link).
- Difference between
- The
<head>of a HTML doc- Get Your Head Straight
- ct.css - A diagnostic CSS snippet that exposes potential performance issues in a HTML document’s
<head>tag.
- ct.css - A diagnostic CSS snippet that exposes potential performance issues in a HTML document’s
- HEAD - A list of a lot of things that could go in the head of a HTML document.
- Get Your Head Straight
- The Open Graph Protocol (OGP)
- ogp.me
- Articles
- For Twitter cards
- NOTE:
- For the image in the card, SVGs are not supported. Use a PNG or JPG image.
- 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. - The image size should be less than 300 kb for certain services.
- The
itempropattribute might be required. (Source, Source) - WhatsApp instructions
- Audio and video are also supported, as mentioned on ogp.me.
- 2020 standards
- Lazy loading attribute for images
- Maximally optimizing image loading for the web in 2021
- Resource hints
asyncanddeferscripts- URL Text Fragments
CSS
- Crash course
- Margin vs padding
box-sizingproperty- Website layout
- Selectors PDF or article
- Pseudo-elements
- Specificity
- Order:
!important>inline>id selectors>class selectors + attribute selectors + pseudo-classes>element selectors (tags) + pseudo-elements - 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.
!importanttrumps all, irrespective of the number of ids, classes and tags. Should be avoided as far as possible.- Inline CSS trumps all but
!important, irrespective of the number of ids, classes and tags. Should be avoided as far as possible. - Specificity illustrated (Format:
(<no_of_ids>, <no_of_classes+attribute_selectors+pseudo-classes>, <no_of_tags+pseudo-elements>))- Most pseudo classes have the same specificity as a class.
isandwhereare exceptions, withwherehaving zero specificity andisusing the highest value from its list.
- Most pseudo classes have the same specificity as a class.
idvsclassspecificity
- Order:
- Always maintaining round borders using
border-radius: 50%;. - Positioning
displayproperty- CSS Flexbox
- Livestream by Madhav Bahl
- MadhavBahlMD/flex
- Visualizer
- Crash course by Brad Traversy (Haven’t watched this.)
- CSS Grid
- Crash course
- Browser extension Gridman for Grid lines (Incase the DevTools don’t support CSS Grid.)
- Media queries
- Units
px,%,vh,vw,emandrem(Part 1 of 2) (Hindi)remvsem(Part 2 of 2) (Hindi)- W3Schools
- Viewport units (
vh,vw,vmin,vmax,vi,vb,lvh,dvh,svh…)
clamp()function (view MDN for more)- Responsive web site tutorial
- Check responsiveness on various devices
- In the browser DevTools (best option)
- On springload.responsinator.com
- Why you should never use
pxto set font-size in CSS - Avoiding
<img>layout shifts:aspect-ratiovswidth&heightattributes - 2D Transforms
- Animations (High performance aimations)
- Transitions
- Custom properties (variables)
- Bootstrap crash course
:is(),:where(),:has()and:not()pseudo classes- Most pseudo classes have the same specificity as a class.
isandwhereare exceptions, withwherehaving zero specificity andisusing the highest value from its list.
- Most pseudo classes have the same specificity as a class.
:last-childvs:last-of-typepseudo-classes- Sub-string matching selectors (Eg:
[class*="col-"] { width: 100%; }) - Scrollbar styling
scroll-padding- Add the property to the
htmlelement for it to work.
- Add the property to the
- Only load required characters in Google Fonts (Saves bandwidth)
- CSS basics
- Some design resources
JS
- Crash course
varvsletvsconst- Reference vs value
- Document Object Model (DOM)
windowvsdocumentelement.classList- Callbacks
- The Art of Node: Callbacks
- How (not) to get a value “out of” a callback.
- Promises can be one way to get data ‘out’ of a callback. (Example)
- HTML Element vs HTML Node and HTMLCollection vs NodeList (PDF)
- Data attributes (
element.datasetproperty - view MDN for more.) localStoragevssessionStorage(view javascript.info for more differences)- Events
- Event reference (
load,click,change,submit, etc) - Page: DOMContentLoaded, load, beforeunload, unload
- Event reference (
- Rounding off
- Handling
NaN - Some cases of file handling
- Responsive nav bar tutorial
- HTML Drag and Drop API
navigator.sendBeacon()- Modules
- Internals
Misc #1
Git and GitHub
- Sessions by me
- git_basics PWA
- Git Internals PWA
- Crash course by Brad Traversy
- Git Server
Web Design
- Typography 101
- Color theory 101
- Layout design
- Top Design Resources and Apps
- Making text stand out in front of images
- Figma crash course
- Image compression deep-dive
Browser DevTools
- Guide to Chrome’s performance profiler
- Chrome DevTools documentation
- Crash course (Brad Traversy)
- Crash course (FreeCodeCamp)
NOTE: The DevTools are similar in almost all browsers, so the above resources are fine.
Accessibility
Documentation
- Presentation and Documentation
- Hack the Project Onboarding Process: Learning by Writing Tutorials as a New Contributor
- Slightly unrelated: A Guide for Contributing to Any Open Source JavaScript Project Ever
Rendering Patterns
PWA (+ Service Worker API)
- Prerequisite: Caching
- Crash course (Intro to Service Workers and Caching)
- Progressive Web Apps in 100 seconds
- Extra PWA features
- Offline-first PWAs (A good overview)
- Demistifying Web Workers and Service Workers (Some content of the talk is outdated.)
- The Modern PWA Cheat Sheet
- Service Workers MDN
- The offline cookbook (Caching and network strategies.)
- Application Cache is a Douchebag (Caching gotchas.)
- Creating a PWA with JS
- PWA Manifest
- Important manifest options
- All manifest options
- The manifest file can have a
.jsonor a.webmanifestextension. The spec suggests.webmanifest. idproperty
- Icon generator
- Customizing the install experience
- The Application tab in the Dev Tools can be used to check the service worker status and the manifest.
- Use LightHouse for debugging and checking.
- Service Workers are not just used for PWAs. They are used just for caching as well.
- Caching is an important concept for PWAs. Please go through Caching section below.
- 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.
- 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 below for more info.)
- 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 below.)
- Some problems with Service Workers
Networking
RegEx
SVG
Intersection Observer API
IndexedDB
Web Components API
Misc Libraries
- Color Thief - Grab the color palette from an image using JS. Works in the browser and in Node.js.
TWA
- Prerequisites
- PWA
- Google Play Console Developer Account ($25 fee)
- What is a Trusted Web Activity?
- TWA overview
- Build a TWA from an existing PWA (Steps after downlaoding and Asset Link file instructions)
- Hosting a TWA using GitHub Pages
- NOTE: The PWA can be hosted from any of your repos. The instructions below have to be followed nonetheless.
- Create a repo with the name
<github_username>.github.io. - The
.well-known/assetlinks.jsonfile should be in the root directory of the newly created repo. (More info) - If you’re not using Jekyll, add an empty
.nojekyllfile to the root directory of the newly created repo. (Reason) - If you’re using Jekyll, change your
_config.ymlfile to include the.well-knownfolder.
General Back End Prerequisites
HTTP
JSON
- Crash course
- Schema templates (for JSON, JavaScript and CSS)
JSON.stringifyand its optional parameters.JSON.parse
APIs
- Everything about APIs
- REST (RESTful) API introduction
- REST in short
- REST Web Service
- Designing an API
- Some public APIs
- Google Translate API
Async JS
Caching
- CacheStorage API
- Cache API
- Cache-Control header
- Difference between the Cache API and CacheStorage API
- Tweet
- A Cache is an object (file) and Cache Storage is a file system.
- Cache Busting (CSS-Tricks article)
- Application Cache is a Douchebag (Caching gotchas.) (Refer to PWA section above.)
CORS
- Prerequisite
- Session by me
- Tackling CORS quickly
- MDN (Pretty extensive.)
- CORS explained by example
- How to win at CORS
- CORS proxies
- What are they and why are they required? (Primer article.)
- CORS Anywhere
- CORS Bridged (Usage guide)
- List of proxies and more (Some are dead.)
- Credentialed requests through the
Authorizationheader using the Fetch API- Demos by me
- The
Access-Control-Allow-Headersheader can’t be wildcarded (*) and theAuthorizationheader always needs to be listed explicitly.- Side note: If the
Content-Typerequest header’s value isapplication/json, add it to the value of theAccess-Control-Allow-Headersresponse header. (Source)
- Side note: If the
- The
Access-Control-Allow-Methodsheader can’t be wildcarded (*) and all the allowed HTTP request methods need to be listed explicitly. - The
Access-Control-Allow-Originheader can’t be wildcarded (*) and the origin always needs to be listed explicitly. (Source)- 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.
- The
Access-Control-Allow-Credentialsheader needs to be sent- In response to the preflight request and in response to the actual request after the preflight request as well.
- In response to the simple (non-preflighted) requests that require authorization.
- In Fetch, the
credentials: "include"option has to be added.- This option is what adds the strictness of adding non-wildcarded values to each of the response headers.
- Fetch does not send any Cookies by default and this option makes the browser send 1st and 3rd party Cookies to the server.
- 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.
- 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.
Cookies
AJAX and its libraries
- Crash course (with
XMLHttpRequest, i.e.,XHR) - Fetch API
- Hands on introduction
- Fetch API error handling
- Using Fetch (MDN)
- Common
no-corsmisconceptions- The response body, status or headers cannot be read.
- Handling cookies with Fetch’s credentials
- Common mistakes
- Playlist: Async JS, AJAX, XHR, Fetch, Cookies, CORS, Headers, Auth, etc.
JWT
- Crash course
- Session vs Token Authentication in 100 Seconds
- What Is JWT and Why Should You Use JWT?
- Why I haven’t been using JWT tokens for Authentication (Ben Awad)
- A JWT demo using the
flask-jwt-extendedpackage. - JWTs are for authorization and not authentication. (Username and password provide authentication.)
- Refresh Tokens
- What Are Refresh Tokens and How to Use Them Securely
- How to Handle Refresh Tokens
- Refresh Tokens are tokens with a longer expiry duration than Access Tokens.
- If the Refresh Token is expired, then the user has to manually log in.
- They are used to
- Reduce the number of explicit logins that the client has to make.
- Reduce the load of querying/storing authorization details in the database every time a user needs access.
- There is a tradeoff between security and database storage/querying.
- 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.
- 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.
- 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.
- 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.
Databases
- A database of Databases
- Database Engineering by Hussein Nasser
- CMU 445/645 Introduction to Database Systems
- CMU 721 Advanced Database Systems
SQL
- Relational DBs
- MySQL crash course
- MySQL fragmentation and partitioning
- Eg: MySQL, PostgreSQL, MariaDB, SQLite, etc…
NoSQL
- Non-relational DBs
- NoSQL DB introduction
- MongoDB crash course
- Cloud Firestore and Realtime DB (Covered in the Firebase section below.)
JS Back End
Node.js
- Crash course
- The Art of Node
- Middleware
- ‘Callbacks’ in JS section above
- Modules
- Refer to the ‘Modules’ point in the JS section above.
- How to Export and Require Modules in Node.js
- Creating and publishing a NPM package
Express.js
JS REST API
Python Back End
Prerequisite
Flask
PHP
Prerequisites
- PHP basics
- PHP Data Objects (PDO)
PHP REST API
Front End JS Frameworks/Libraries
Prerequisites
Misc
JavaScript
State
XML
React.js
- React in 100 Seconds
- Crash course
- Hooks
- Memoization
- 30-Days-Of-React
- Internals
- How a React App Works Under the Hood (High level stuff in 14 mins.)
- Is React a Library or a Framework? Here’s Why it Matters
- Why does React.js need keys?
- Calling functional components as functions
- Deconstructing React
- Building a Custom React Renderer
- Destructuring React
- Understanding React’s UI Rendering Process
Misc #2
Web Performance
- Site-Speed Topography
- Lighthouse (available in Chrome and Edge DevTools and as an add-on in Firefox)
- web.dev
SEO
robots.txt
Firebase
- BaaS
- Documentation (More than sufficient. Also, do watch the videos linked in the docs.)
DevOps
Git
- Covered in the Git and GitHub section above.
Deployment/Hosting
- For web sites only
- For web sites and web apps
- Heroku
- Vercel
- Deta
- Python Anywhere (Only for Python web sites and web apps.)
- Firebase Hosting (Dynamic: Only Node.js supported through Cloud Functions)
- Digital Ocean
- Domain names
YAML
Shell Scripting
CI/CD
- GitHub Actions
- GitLab Actions
- Jenkins
- TravisCI
- Circle CI
Docker
- Getting Started (part one of two)
- Docker Compose (part two of two)
- My Docker repo
Cloud
The Missing Semester of CS Education
Character Sets and Encoding
Unicode
- The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)
- What are Unicode, UTF-8, and UTF-16?
New Lines/Line Endings
- Also called ‘Newline’ and ‘line break’.
- Types
- Carriage Return
- Unicode and ASCII:
CR - Programming languages:
\r - Hexadecimal:
0D,0x0D - More details
- Unicode and ASCII:
- Line Feed
- Unicode and ASCII:
LF - Programming languages:
\n - Hexadecimal:
0A,0x0A - More details
- Unicode and ASCII:
- Carriage Return and Line Feed
- Unicode and ASCII:
CRLF,CR+LF - Programming languages:
\r\n - Hexadecimal:
0D 0A,0x0D 0x0A
- Unicode and ASCII:
- End of Line
- Unicode:
EOL
- Unicode:
- Next Line
- Unicode:
NEL
- Unicode:
- New Line
- EBCDIC:
NL
- EBCDIC:
- Carriage Return
-
…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) - What’s a Carriage and Who’s Feeding it Lines? CRLF
- Newline
\r\nvs\n\rwhat is the difference in their behavior?- Why Windows uses
\r\nnewlines instead of\n - What Are Teletypes, and Why Were They Used with Computers?
Misc Characters
C
- C in 100 Seconds
- You Can Write Your First C Program In 10 Minutes
- The Descent to C
- C introduction notes
- C warning: ‘Function declaration isn’t a prototype’
- Why
int foo() { /* ... */ }gives a warning andint foo(void) { /* ... */}resolves it.
- Why
- Header files
- Pointers
- Characters and strings
- Compilers
libcandlibm- What is the difference between C, C99, ANSI C and GNU C?
_tdata types- What is POSIX? Why Does it Matter to Linux/UNIX Users?
- Buffer Overflow Attack
- everything is open source if you can reverse engineer
- Arrays
- Memory layout
- Memory Layout of C Programs
-
[The Origins of Process Memory Exploring the Use of Various Memory Allocators in Linux C](https://www.youtube.com/watch?v=c7xf5dvUb_Q) - Smashing the Stack for Fun and Profit (UCB hosted)
- do you understand how “return” works?
- Structure Packing
- How can I check my byte flag, verifying that a specific bit is at 1 or 0?
- Docs
- Phone Book project