Merge 0ba0b3519e into 88e5be6e4b

✨ Create CSS Basics Cheatsheet
2026-05-02 20:49:59 -07:00 · 2025-02-06 17:56:03 +08:00 · 2021-10-19 11:34:43 +05:30
8 changed files with 604 additions and 1639 deletions
@@ -1,29 +1,17 @@
 <div align="center">
 [![AWESOME CHEATSHEETS LOGO](_design/cover_github@2x.png)](https://lecoupa.github.io/awesome-cheatsheets/)
 <a href="https://trendshift.io/repositories/5584" target="_blank">
  <img src="https://trendshift.io/api/badge/repositories/5584" alt="LeCoupa%2Fawesome-cheatsheets | Trendshift" width="250" height="55"/>
 </a>
 [![Awesome](https://awesome.re/badge.svg)](https://awesome.re) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/LeCoupa/awesome-cheatsheets/blob/master/LICENSE)
-**WEBSITE DIRECTORY**: [Available here](https://lecoupa.github.io/awesome-cheatsheets/)
+**WEBSITE DIRECTORY**: [Available here](https://lecoupa.github.io/awesome-cheatsheets/).
 > 📚 Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.
 </div>
 ---
 ## 🤔 Why Awesome-Cheatsheets?
 I usually make a cheat sheet when I want to improve my skills in a programming language, a framework or a development tool. [I started doing these kinds of things a long time ago on Gist](https://gist.github.com/LeCoupa). To better keep track of the history and to let people contribute, I re-organized all of them into this single repository. Most of the content is coming from official documentation and some books I have read.
 Feel free to take a look. You might learn new things. They have been designed to provide a quick way to assess your knowledge and to save you time.
 ---
 ## 📚 Table of Contents
 ### 📃 Languages
@@ -32,60 +20,59 @@ Feel free to take a look. You might learn new things. They have been designed to
 <summary>View cheatsheets</summary>
 #### Command line interface
 - [Bash](languages/bash.sh)
 #### Imperative
 - [C](languages/C.txt)
 - [C#](languages/C%23.txt)
 - [Go](languages/golang.md)
 - [Java](languages/java.md)
 - [PHP](languages/php.php)
 - [Python](languages/python.md)
 - [XML](languages/XML.md)
 #### Functional
 - [JavaScript](languages/javascript.js)
 - [Typescript](languages/typescript.md)
 </details>
 ---
 ### 📦 Backend
 <details>
 <summary>View cheatsheets</summary>
 #### PHP
 - [Laravel](backend/laravel.php)
 #### Python
 - [Django](backend/django.py)
-#### JavaScript
+#### Javascript
 - [Adonis.js](backend/adonis.js)
 - [Express.js](backend/express.js)
 - [Feathers.js](backend/feathers.js)
 - [Moleculer](backend/moleculer.js)
 - [Node.js](backend/node.js)
 - [Sails.js](backend/sails.js)
  </details>
 ---
 ### 🌐 Frontend
 <details>
 <summary>View cheatsheets</summary>
 #### Basics
 - [HTML5](frontend/html5.html)
 - [CSS3](frontend/css3.css)
 - [Typescript](frontend/typescript.ts)
 #### Frameworks
 - [React.js](frontend/react.js)
 - [Vue.js](frontend/vue.js)
 - [Tailwind.css](frontend/tailwind.css)
@@ -94,30 +81,27 @@ Feel free to take a look. You might learn new things. They have been designed to
 - [AngularJS](frontend/angularjs.js)
  </details>
 ---
 ### 🗃️ Databases
 <details>
 <summary>View cheatsheets</summary>
 #### SQL
 - [MySQL](databases/mysql.sh)
 #### NoSQL
- [MongoDB](databases/mongodb.sh)
+
 - [Redis](databases/redis.sh)
  </details>
 ---
 ### 🔧 Tools
 <details>
 <summary>View cheatsheets</summary>
 #### Development
 - [cURL](tools/curl.sh)
 - [Drush](tools/drush.sh)
 - [Elasticsearch](tools/elasticsearch.js)
@@ -130,35 +114,25 @@ Feel free to take a look. You might learn new things. They have been designed to
 - [Xcode](tools/xcode.txt)
 #### Infrastructure
 - [AWS CLI](tools/aws.sh)
 - [Docker](tools/docker.sh)
 - [GCP CLI](tools/gcp.md)
 - [Heroku CLI](tools/heroku.sh)
 - [Kubernetes](tools/kubernetes.md)
 - [macOS](tools/macos.sh)
 - [Nanobox Boxfile](tools/nanobox_boxfile.yml)
 - [Nanobox CLI](tools/nanobox_cli.sh)
 - [Nginx](tools/nginx.sh)
 - [PM2](tools/pm2.sh)
 - [Ubuntu](tools/ubuntu.sh)
 - [Firebase CLI](tools/firebase_cli.md)
  </details>
 ---
 ## 🙌🏼 How to Contribute?
 You are more than welcome to contribute and build your own cheat sheet for your favorite programming language, framework or development tool. Just submit changes via pull request and I will review them before merging.
 ---
 ## 👩‍💻👨‍💻 Our valuable Contributors
-<div align="center">
+<p align="center"><a href="https://github.com/LeCoupa/awesome-cheatsheets/graphs/contributors">
 <a href="https://github.com/LeCoupa/awesome-cheatsheets/graphs/contributors">
  <img src="https://contributors-img.web.app/image?repo=LeCoupa/awesome-cheatsheets" />
-</a>
+</a></p>
 </div>
@@ -82,33 +82,3 @@ SELECT User, Host FROM mysql.user; # List all current MySQL users
 SET GLOBAL general_log = 'ON'; # Enable query logging
 SHOW FULL PROCESSLIST; # Show the last queries executed in MySQL
 # *****************************************************************************
 # Altering Table Structure
 # *****************************************************************************
 ALTER TABLE table_name ADD COLUMN column_name datatype;        # Add a new column to an existing table
 ALTER TABLE table_name MODIFY COLUMN column_name datatype;     # Change the data type of a column
 ALTER TABLE table_name RENAME COLUMN old_name TO new_name;     # Rename a column (MySQL 8.0+)
 ALTER TABLE table_name DROP COLUMN column_name;                # Remove a column from a table
 ALTER TABLE old_table_name RENAME TO new_table_name;           # Rename an entire table
 # *****************************************************************************
 # Indexes (Performance Tuning)
 # *****************************************************************************
 CREATE INDEX idx_name ON table_name (column_name);             # Create a standard index to speed up queries
 CREATE UNIQUE INDEX idx_name ON table_name (column_name);      # Create a unique index (no duplicate values)
 SHOW INDEX FROM table_name;                                    # List all indexes on a specific table
 DROP INDEX idx_name ON table_name;                             # Remove an index from a table
 EXPLAIN SELECT * FROM table_name WHERE condition;              # Analyze how MySQL executes a query (Check index usage)
 # *****************************************************************************
 # Transactions (Data Integrity)
 # *****************************************************************************
 START TRANSACTION;                                             # Begin a new transaction
 COMMIT;                                                        # Save all changes made during the transaction
 ROLLBACK;                                                      # Undo all changes if an error occurs before commit
 SET AUTOCOMMIT = 0;                                            # Disable automatic commits for the current session
 SET AUTOCOMMIT = 1;                                            # Re-enable automatic commits after finishing manual transactions
@@ -0,0 +1,537 @@
 ## Basics
 Font
 There are many properties related to the font, such as the face, weight, style, etc. These properties allow you to change the style or complete look of your text.
 Font-Family
 ```css
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 ```
 Font-Style
 ```css
 font-style: italic;
 ```
 Font-Variant
 ```css
 font-variant: small-caps;
 ```
 Font-Weight
 ```css
 font-weight: bold;
 ```
 Font-Size
 ```css
 font-size: larger;
 ```
 Font
 ```css
 font: style variant weight size family;
 ```
 Text
 Text properties allow one to manipulate alignment, spacing, decoration, indentation, etc., in the document.
 Text-Align
 ```css
 text-align: justify;
 ```
 Letter-Spacing
 ```css
 letter-spacing: .15em;
 ```
 Text-Decoration
 ```css
 text-decoration: underline;
 ```
 Word-Spacing
 ```css
 word-spacing: 0.25em;
 ```
 Text-Transform
 ```css
 text-transform: uppercase;
 ```
 Text-Indent
 ```css
 text-indent: 0.5cm;
 ```
 Line-Height
 ```css
 line-height: normal;
 ```
 Background
 As the name suggests, these properties are related to background, i.e., you can change the color, image, position, size, etc., of the document.
 Background-Image
 ```css
 background-image: url("Path");
 ```
 Background-Position
 ```css
 background-position: right top;
 ```
 Background-Size
 ```css
 background-size: cover;
 ```
 Background-Repeat
 ```css
 background-repeat: no-repeat;
 ```
 Background-Attachment
 ```css
 background-attachment: scroll;
 ```
 Background-Color
 ```css
 background-color: fuchsia;
 ```
 Background
 ```css
 background: color image repeat attachment position;
 ```
 Border
 Border properties are used to change the style, radius, color, etc., of buttons or other items of the document.
 Border-Width
 ```css
 border-width: 5px;
 ```
 Border-Style
 ```css
 border-style: solid;
 ```
 Border-Color
 ```css
 border-color: aqua;
 ```
 Border-Radius
 ```css
 border-radius: 15px;
 ```
 Border
 ```css
 border: width style color;
 ```
 Box Model
 In laymen's terms, the CSS box model is a container that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. It is used to create the design and layout of web pages.
 Float
 ```css
 float: none;
 ```
 Clear
 ```css
 clear: both;
 ```
 Display
 ```css
 display: block;
 ```
 Height
 ```css
 height: fit-content;
 ```
 Width
 ```css
 width: auto;
 ```
 Margin
 ```css
 margin: top right bottom left;
 ```
 Padding
 ```css
 padding: top right bottom left;
 ```
 Overflow
 ```css
 overflow: hidden;
 ```
 Visibility
 ```css
 visibility: visible;
 ```
 Colors
 With the help of the color property, one can give color to text, shape, or any other object.
 Color
 ```css
 color: cornsilk;
 ```
 Opacity
 ```css
 opacity: 4;
 ```
 Template Layout
 Specifies the visual look of the content inside a template
 Box-Align
 ```css
 box-align: start;
 ```
 Box-Direction
 ```css
 box-direction: normal;
 ```
 Box-Flex
 ```css
 box-flex: normal;
 ```
 Box-Flex-Group
 ```css
 box-flex-group: 2;
 ```
 Box-Orient
 ```css
 box-orient: inline;
 ```
 Box-Pack
 ```css
 box-pack: justify;
 ```
 Box-Sizing
 ```css
 box-sizing: margin-box;
 ```
 max-width
 ```css
 max-width: 800px;
 ```
 min-width
 ```css
 min-width: 500px;
 ```
 max-height
 ```css
 max-height: 100px;
 ```
 min-height
 ```css
 min-height: 80px;
 ```
 Table
 Table properties are used to give style to the tables in the document. You can change many things like border-spacing, table layout, caption, etc.
 Border-Collapse
 ```css
 border-collapse: separate;
 ```
 Empty-Cells
 ```css
 empty-cells: show;
 ```
 Border-Spacing
 ```css
 border-spacing: 2px;
 ```
 Table-Layout
 ```css
 table-layout: auto;
 ```
 Caption-Side
 ```css
 caption-side: bottom;
 ```
 Columns
 These properties are used explicitly with columns of the tables, and they are used to give the table an incredible look.
 Column-Count
 ```css
 column-count: 10;
 ```
 Column-Gap
 ```css
 column-gap: 5px;
 ```
 Column-rule-width
 ```css
 column-rule-width: medium;
 ```
 Column-rule-style
 ```css
 column-rule-style: dotted ;
 ```
 Column-rule-color
 ```css
 column-rule-color: black;
 ```
 Column-width
 ```css
 column-width: 10px;
 ```
 Column-span
 ```css
 column-span: all;
 ```
 List & Markers
 List and marker properties are used to customize lists in the document.
 List-style-type
 ```css
 list-style-type: square;
 ```
 List-style-position
 ```css
 list-style-position: 20px;
 ```
 List-style-image
 ```css
 list-style-image: url(image.gif);
 ```
 Marker-offset
 ```css
 marker-offset: auto;
 ```
 Animations
 CSS animations allow one to animate transitions or other media files on the web page.
 Animation-name
 ```css
 animation-name: myanimation;
 ```
 Animation-duration
 ```css
 animation-duration: 10s;
 ```
 Animation-timing-function
 ```css
 animation-timing-function: ease;
 ```
 Animation-delay
 ```css
 animation-delay: 5ms;
 ```
 Animation-iteration-count
 ```css
 animation-iteration-count: 3;
 ```
 Animation-direction
 ```css
 animation-direction: normal;
 ```
 Animation-play-state
 ```css
 animation-play-state: running;
 ```
 Animation-fill-mode
 ```css
 animation-fill-mode: both;
 ```
 Transitions
 Transitions let you define the transition between two states of an element.
 Transition-property
 ```css
 transition-property: none;
 ```
 Transition-duration
 ```css
 transition-duration: 2s;
 ```
 Transition-timing-function
 ```css
 transition-timing-function: ease-in-out;
 ```
 Transition-delay
 ```css
 transition-delay: 20ms;
 ```
 CSS Flexbox
 Flexbox is a layout of CSS that lets you format HTML easily. Flexbox makes it simple to align items vertically and horizontally using rows and columns. Items will "flex" to different sizes to fill the space. And overall, it makes the responsive design more manageable.
 Parent Properties (flex container)
 display
 ```css
 display: flex;
 ```
 flex-direction
 ```css
 flex-direction: row | row-reverse | column | column-reverse;
 ```
 flex-wrap
 ```css
 flex-wrap: nowrap | wrap | wrap-reverse;
 ```
 flex-flow
 ```css
 flex-flow: column wrap;
 ```
 justify-content
 ```css
 justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly |
 start | end | left | right ... + safe | unsafe;
 ```
 align-items
 ```css
 align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
 ```
 align-content
 ```css
 align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
 ```
 Child Properties (flex items)
 order
 ```css
 order: 5; /* default is 0 */
 ```
 flex-grow
 ```css
 flex-grow: 4; /* default 0 */
 ```
 flex-shrink
 ```css
 flex-shrink: 3; /* default 1 */
 ```
 flex-basis
 ```css
 flex-basis: | auto; /* default auto */
 ```
 flex shorthand
 ```css
 flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
 ```
 align-self
 ```css
 align-self: auto | flex-start | flex-end | center | baseline | stretch;
 ```
 CSS Grid
 Grid layout is a 2-Dimensional grid system to CSS that creates complex responsive web design layouts more easily and consistently across browsers.
 Parent Properties (Grid container)
 display
 ```css
 display: grid | inline-grid;
 ```
 grid-template-columns
 ```css
 grid-template-columns: 12px 12px 12px;
 ```
 grid-template-rows
 ```css
 grid-template-rows: 8px auto 12px;
 ```
 grid-template
 ```css
 grid-template: none | <grid-template-rows> / <grid-template-columns>;
 ```
 column-gap
 ```css
 column-gap: <line-size>;
 ```
 row-gap
 ```css
 row-gap: <line-size>;
 ```
 grid-column-gap
 ```css
 grid-column-gap: <line-size>;
 ```
 grid-row-gap
 ```css
 grid-row-gap: <line-size>;
 ```
 gap shorthand
 ```css
 gap: <grid-row-gap> <grid-column-gap>;
 ```
 grid-gap shorthand
 ```css
 grid-gap: <grid-row-gap> <grid-column-gap>;
 ```
 justify-items
 ```css
 justify-items: start | end | center | stretch;
 ```
 align-items
 ```css
 align-items: start | end | center | stretch;
 ```
 place-items
 ```css
 place-items: center;
 ```
 justify-content
 ```css
 justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
 ```
 align-content
 ```css
 align-content: start | end | center | stretch | space-around | space-between | space-evenly;
 ```
 place-content
 ```css
 place-content: <align-content> / <justify-content> ;
 ```
 grid-auto-columns
 ```css
 grid-auto-columns: <track-size> ...;
 ```
 grid-auto-rows
 ```css
 grid-auto-rows: <track-size> ...;
 ```
 grid-auto-flow
 ```css
 grid-auto-flow: row | column | row dense | column dense;
 ```
 Child Properties (Grid items)
 grid-column-start
 ```css
 grid-column-start: <number> | <name> | span <number> | span <name> | auto;
 ```
 grid-column-end
 ```css
 grid-column-end: <number> | <name> | span <number> | span <name> | auto;
 ```
 grid-row-start
 ```css
 grid-row-start: <number> | <name> | span <number> | span <name> | auto;
 ```
 grid-row-end
 ```css
 grid-row-end: <number> | <name> | span <number> | span <name> | auto;
 ```
 grid-column shorthand
 ```css
 grid-column: <start-line> / <end-line> | <start-line> / span <value>;
 ```
 grid-row shorthand
 ```css
 grid-row: <start-line> / <end-line> | <start-line> / span <value>;
 ```
 grid-area
 ```css
 grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
 ```
 justify-self
 ```css
 justify-self: start | end | center | stretch;
 ```
 align-self
 ```css
 align-self: start | end | center | stretch;
 ```
 place-self
 ```css
 place-self: center;
 ```
@@ -43,14 +43,11 @@
 .hidden              /* display: none; */
 .block               /* display: block; */
 .flow-root           /* display: flow-root; */
 .inline-block        /* display: inline-block; */
 .inline              /* display: inline; */
 .flex                /* display: flex; */
 .inline-flex         /* display: inline-flex; */
 .grid                /* display: grid; */
 .inline-grid         /* display: inline-grid; */
 .contents            /* display: contents; */
 .table               /* display: table; */
 .table-caption       /* display: table-caption; */
 .table-cell          /* display: table-cell; */
@@ -71,6 +68,7 @@
 .float-right  /* float: right; */
 .float-left   /* float: left; */
 .float-none   /* float: none; */
 .clearfix     /* &::after { content: ""; display: table; clear: both; } */
 /*
 * Clear
@@ -132,6 +130,8 @@
 .overflow-y-visible  /* overflow-y: visible; */
 .overflow-x-scroll   /* overflow-x: scroll; */
 .overflow-y-scroll   /* overflow-y: scroll; */
 .scrolling-touch     /* -webkit-overflow-scrolling: touch; */
 .scrolling-auto      /* -webkit-overflow-scrolling: auto; */
 /*
 * Position
@@ -219,7 +219,7 @@
 * By default, only responsive variants are generated for flex-wrap utilities.
 */
-.flex-nowrap        /* flex-wrap: nowrap; */
+.flex-no-wrap       /* flex-wrap: nowrap; */
 .flex-wrap          /* flex-wrap: wrap; */
 .flex-wrap-reverse  /* flex-wrap: wrap-reverse; */
@@ -478,44 +478,44 @@
 .gap-56      /* gap: 14rem; */
 .gap-64      /* gap: 16rem; */
 .gap-px      /* gap: 1px; */
-.gap-y-0   /* row-gap: 0; */
+.row-gap-0   /* row-gap: 0; */
-.gap-y-1   /* row-gap: 0.25rem; */
+.row-gap-1   /* row-gap: 0.25rem; */
-.gap-y-2   /* row-gap: 0.5rem; */
+.row-gap-2   /* row-gap: 0.5rem; */
-.gap-y-3   /* row-gap: 0.75rem; */
+.row-gap-3   /* row-gap: 0.75rem; */
-.gap-y-4   /* row-gap: 1rem; */
+.row-gap-4   /* row-gap: 1rem; */
-.gap-y-5   /* row-gap: 1.25rem; */
+.row-gap-5   /* row-gap: 1.25rem; */
-.gap-y-6   /* row-gap: 1.5rem; */
+.row-gap-6   /* row-gap: 1.5rem; */
-.gap-y-8   /* row-gap: 2rem; */
+.row-gap-8   /* row-gap: 2rem; */
-.gap-y-10  /* row-gap: 2.5rem; */
+.row-gap-10  /* row-gap: 2.5rem; */
-.gap-y-12  /* row-gap: 3rem; */
+.row-gap-12  /* row-gap: 3rem; */
-.gap-y-16  /* row-gap: 4rem; */
+.row-gap-16  /* row-gap: 4rem; */
-.gap-y-20  /* row-gap: 5rem; */
+.row-gap-20  /* row-gap: 5rem; */
-.gap-y-24  /* row-gap: 6rem; */
+.row-gap-24  /* row-gap: 6rem; */
-.gap-y-32  /* row-gap: 8rem; */
+.row-gap-32  /* row-gap: 8rem; */
-.gap-y-40  /* row-gap: 10rem; */
+.row-gap-40  /* row-gap: 10rem; */
-.gap-y-48  /* row-gap: 12rem; */
+.row-gap-48  /* row-gap: 12rem; */
-.gap-y-56  /* row-gap: 14rem; */
+.row-gap-56  /* row-gap: 14rem; */
-.gap-y-64  /* row-gap: 16rem; */
+.row-gap-64  /* row-gap: 16rem; */
-.gap-y-px  /* row-gap: 1px; */
+.row-gap-px  /* row-gap: 1px; */
-.gap-x-0   /* column-gap: 0; */
+.col-gap-0   /* column-gap: 0; */
-.gap-x-1   /* column-gap: 0.25rem; */
+.col-gap-1   /* column-gap: 0.25rem; */
-.gap-x-2   /* column-gap: 0.5rem; */
+.col-gap-2   /* column-gap: 0.5rem; */
-.gap-x-3   /* column-gap: 0.75rem; */
+.col-gap-3   /* column-gap: 0.75rem; */
-.gap-x-4   /* column-gap: 1rem; */
+.col-gap-4   /* column-gap: 1rem; */
-.gap-x-5   /* column-gap: 1.25rem; */
+.col-gap-5   /* column-gap: 1.25rem; */
-.gap-x-6   /* column-gap: 1.5rem; */
+.col-gap-6   /* column-gap: 1.5rem; */
-.gap-x-8   /* column-gap: 2rem; */
+.col-gap-8   /* column-gap: 2rem; */
-.gap-x-10  /* column-gap: 2.5rem; */
+.col-gap-10  /* column-gap: 2.5rem; */
-.gap-x-12  /* column-gap: 3rem; */
+.col-gap-12  /* column-gap: 3rem; */
-.gap-x-16  /* column-gap: 4rem; */
+.col-gap-16  /* column-gap: 4rem; */
-.gap-x-20  /* column-gap: 5rem; */
+.col-gap-20  /* column-gap: 5rem; */
-.gap-x-24  /* column-gap: 6rem; */
+.col-gap-24  /* column-gap: 6rem; */
-.gap-x-32  /* column-gap: 8rem; */
+.col-gap-32  /* column-gap: 8rem; */
-.gap-x-40  /* column-gap: 10rem; */
+.col-gap-40  /* column-gap: 10rem; */
-.gap-x-48  /* column-gap: 12rem; */
+.col-gap-48  /* column-gap: 12rem; */
-.gap-x-56  /* column-gap: 14rem; */
+.col-gap-56  /* column-gap: 14rem; */
-.gap-x-64  /* column-gap: 16rem; */
+.col-gap-64  /* column-gap: 16rem; */
-.gap-x-px  /* column-gap: 1px; */
+.col-gap-px  /* column-gap: 1px; */
 /*
 * Grid Auto Flow
@@ -1153,8 +1153,8 @@
 * By default, only responsive, hover and focus variants are generated for font weight utilities.
 */
-.font-thin        /* font-weight: 100; */
+.font-hairline   /* font-weight: 100; */
-.font-extralight  /* font-weight: 200; */
+.font-thin       /* font-weight: 200; */
 .font-light      /* font-weight: 300; */
 .font-normal     /* font-weight: 400; */
 .font-medium     /* font-weight: 500; */
@@ -1479,7 +1479,7 @@
 */
 .whitespace-normal    /* white-space: normal; */
-.whitespace-nowrap    /* white-space: nowrap; */
+.whitespace-no-wrap   /* white-space: nowrap; */
 .whitespace-pre       /* white-space: pre; */
 .whitespace-pre-line  /* white-space: pre-line; */
 .whitespace-pre-wrap  /* white-space: pre-wrap; */
@@ -1902,6 +1902,7 @@
 * By default, only responsive, hover and focus variants are generated for box shadow utilities.
 */
 .shadow-xs       /* box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); */
 .shadow-sm       /* box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); */
 .shadow          /* box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); */
 .shadow-md       /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */
@@ -1909,34 +1910,9 @@
 .shadow-xl       /* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); */
 .shadow-2xl      /* box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); */
 .shadow-inner    /* box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); */
 .shadow-outline  /* box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); */
 .shadow-none     /* box-shadow: none; */
 /*
 * RING
 * --------------------
 * Utilities for creating outline rings with box-shadows.
 * Replaced the old .shadow-outline utility.
 */
 .ring-0    /* box-shadow: 0 0 0 0px; */
 .ring-1    /* box-shadow: 0 0 0 1px; */
 .ring-2    /* box-shadow: 0 0 0 2px; */
 .ring-4    /* box-shadow: 0 0 0 4px; */
 .ring-8    /* box-shadow: 0 0 0 8px; */
 .ring      /* box-shadow: 0 0 0 3px; */
 .ring-inset  /* --ring-inset: inset; */
 .ring-transparent  /* --ring-color: transparent; */
 .ring-black        /* --ring-color: #000; */
 .ring-white        /* --ring-color: #fff; */
 .ring-current      /* --ring-color: currentColor; */
 .ring-offset-0  /* --ring-offset-width: 0px; */
 .ring-offset-1  /* --ring-offset-width: 1px; */
 .ring-offset-2  /* --ring-offset-width: 2px; */
 .ring-offset-4  /* --ring-offset-width: 4px; */
 .ring-offset-8  /* --ring-offset-width: 8px; */
 /*
 * OPACITY
 * --------------------
@@ -1,670 +0,0 @@
 /****************************
 * TYPESCRIPT CHEATSHEET - Quick Reference
 * Learn more: https://www.typescriptlang.org/docs/
 * Playground: https://www.typescriptlang.org/play
 * Handbook: https://www.typescriptlang.org/handbook/
 *
 *  Table of contents
 *  -------------------
 *  01 | Basic Types
 *  02 | Variables & Arrays
 *  03 | Functions
 *  04 | Objects & Interfaces
 *  05 | Classes
 *  06 | Generics
 *  07 | Union & Literal Types
 *  08 | Type Guards & Assertions
 *  09 | Utility Types
 *  10 | Enums
 *  11 | Modules
 *  12 | Advanced Types
 *  13 | Decorators
 *  14 | Configuration
 *  15 | Common Patterns
 *****************************/
 /***************************
 ------------ 01: Basic Types -----------
 *******************************/
 // Primitive Types
 let str: string = "hello";
 let num: number = 42;
 let bool: boolean = true;
 let undef: undefined = undefined;
 let nul: null = null;
 // Special Types
 let anything: any = "can be anything";
 let unknown: unknown = "type-safe any";
 let nothing: void = undefined;
 let never: never = (() => { throw new Error() })();
 // Type Inference
 let auto = "TypeScript infers string";
 let nums = [1, 2, 3]; // number[]
 /***************************
 ------------ 02: Variables & Arrays -----------
 *******************************/
 // Arrays
 let numbers: number[] = [1, 2, 3];
 let strings: Array<string> = ["a", "b"];
 let mixed: (string | number)[] = [1, "two"];
 // Tuples
 let tuple: [string, number] = ["hello", 42];
 let namedTuple: [name: string, age: number] = ["John", 30];
 // Destructuring
 let [first, second] = tuple;
 let [x, y, ...rest] = [1, 2, 3, 4, 5];
 // Object Destructuring
 let {name, age} = {name: "John", age: 30};
 let {a: newName, b = 10} = {a: "value"}; // rename & default
 /***************************
 ------------ 03: Functions -----------
 *******************************/
 // Function Declaration
 function add(x: number, y: number): number {
  return x + y;
 }
 // Arrow Functions
 const multiply = (x: number, y: number): number => x * y;
 const greet = (name: string): void => console.log(`Hello ${name}`);
 // Optional & Default Parameters
 function build(first: string, last?: string, age = 25): string {
  return `${first} ${last || ""} (${age})`;
 }
 // Rest Parameters
 function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0);
 }
 // Function Overloads
 function format(x: string): string;
 function format(x: number): string;
 function format(x: string | number): string {
  return x.toString();
 }
 // Function Types
 type MathOp = (x: number, y: number) => number;
 const divide: MathOp = (x, y) => x / y;
 /***************************
 ------------ 04: Objects & Interfaces -----------
 *******************************/
 // Object Types
 let person: {name: string, age: number} = {name: "John", age: 30};
 // Interface
 interface User {
  readonly id: number;
  name: string;
  email?: string; // optional
  [key: string]: any; // index signature
 }
 // Extending Interfaces
 interface Admin extends User {
  permissions: string[];
 }
 // Multiple Inheritance
 interface Timestamped {
  createdAt: Date;
 }
 interface AdminUser extends User, Timestamped {
  role: "admin";
 }
 // Function in Interface
 interface Calculator {
  add(x: number, y: number): number;
  subtract: (x: number, y: number) => number;
 }
 /***************************
 ------------ 05: Classes -----------
 *******************************/
 // Basic Class
 class Animal {
  public name: string;
  private age: number;
  protected species: string;
  readonly id: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
    this.species = "unknown";
    this.id = Math.random();
  }
  speak(): void {
    console.log(`${this.name} makes a sound`);
  }
 }
 // Inheritance
 class Dog extends Animal {
  breed: string;
  constructor(name: string, age: number, breed: string) {
    super(name, age);
    this.breed = breed;
  }
  speak(): void {
    console.log(`${this.name} barks`);
  }
 }
 // Abstract Class
 abstract class Shape {
  abstract area(): number;
  display(): void {
    console.log(`Area: ${this.area()}`);
  }
 }
 // Static Members
 class MathUtils {
  static PI = 3.14159;
  static circle(radius: number): number {
    return 2 * MathUtils.PI * radius;
  }
 }
 // Getters/Setters
 class Person {
  private _age: number = 0;
  get age(): number {
    return this._age;
  }
  set age(value: number) {
    if (value >= 0) this._age = value;
  }
 }
 /***************************
 ------------ 06: Generics -----------
 *******************************/
 // Generic Functions
 function identity<T>(arg: T): T { return arg; }
 const result = identity<string>("hello");
 const inferred = identity(42); // T inferred as number
 // Multiple Type Parameters
 function pair<T, U>(first: T, second: U): [T, U] {
  return [first, second];
 }
 // Generic Interface
 interface Container<T> {
  value: T;
  getValue(): T;
 }
 // Generic Class
 class Box<T> {
  contents: T;
  constructor(value: T) {
    this.contents = value;
  }
 }
 // Constraints
 interface HasLength {
  length: number;
 }
 function logLength<T extends HasLength>(arg: T): void {
  console.log(arg.length);
 }
 // Keyof Constraint
 function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
 }
 /***************************
 ------------ 07: Union & Literal Types -----------
 *******************************/
 // Union Types
 type StringOrNumber = string | number;
 type Status = "loading" | "success" | "error";
 function process(id: string | number): void {
  if (typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id.toFixed(2));
  }
 }
 // Intersection Types
 type Person = {name: string};
 type Employee = {company: string};
 type Staff = Person & Employee; // has both properties
 // Literal Types
 type Theme = "light" | "dark";
 type Port = 3000 | 8080 | 9000;
 type Success = true;
 // Discriminated Unions
 interface Circle {
  kind: "circle";
  radius: number;
 }
 interface Square {
  kind: "square";
  sideLength: number;
 }
 type Shape = Circle | Square;
 function area(shape: Shape): number {
  switch (shape.kind) {
    case "circle":
      return Math.PI * shape.radius ** 2;
    case "square":
      return shape.sideLength ** 2;
  }
 }
 /***************************
 ------------ 08: Type Guards & Assertions -----------
 *******************************/
 // Type Guards
 function isString(value: any): value is string {
  return typeof value === "string";
 }
 function isNumber(value: any): value is number {
  return typeof value === "number";
 }
 // Using Type Guards
 function process(value: string | number) {
  if (isString(value)) {
    console.log(value.toUpperCase()); // TypeScript knows it's string
  } else {
    console.log(value.toFixed(2)); // TypeScript knows it's number
  }
 }
 // in operator
 type Fish = { swim: () => void };
 type Bird = { fly: () => void };
 function move(animal: Fish | Bird) {
  if ("swim" in animal) {
    animal.swim(); // Fish
  } else {
    animal.fly(); // Bird
  }
 }
 // instanceof
 function handleError(error: Error | string) {
  if (error instanceof Error) {
    console.log(error.message);
  } else {
    console.log(error);
  }
 }
 // Type Assertions
 let someValue: any = "hello world";
 let strLength = (someValue as string).length;
 // or: let strLength = (<string>someValue).length;
 // Non-null Assertion
 let name: string | null = getName();
 let nameLength = name!.length; // Assert name is not null
 /***************************
 ------------ 09: Utility Types -----------
 *******************************/
 interface Todo {
  title: string;
  description: string;
  completed: boolean;
 }
 // Partial<T> - All properties optional
 type PartialTodo = Partial<Todo>;
 // {title?: string, description?: string, completed?: boolean}
 // Required<T> - All properties required
 type RequiredTodo = Required<PartialTodo>;
 // Readonly<T> - All properties readonly
 type ReadonlyTodo = Readonly<Todo>;
 // Pick<T, K> - Select specific properties
 type TodoPreview = Pick<Todo, "title" | "completed">;
 // Omit<T, K> - Exclude specific properties
 type TodoInfo = Omit<Todo, "completed">;
 // Record<K, T> - Create object type
 type TodoStatus = Record<"pending" | "completed", Todo[]>;
 // Exclude<T, U> - Remove types from union
 type NonString = Exclude<string | number | boolean, string>;
 // number | boolean
 // Extract<T, U> - Extract types from union
 type StringOnly = Extract<string | number | boolean, string>;
 // string
 // NonNullable<T> - Remove null/undefined
 type NonNullString = NonNullable<string | null | undefined>;
 // string
 // ReturnType<T> - Get function return type
 function getName(): string { return "John"; }
 type NameType = ReturnType<typeof getName>; // string
 // Parameters<T> - Get function parameters as tuple
 type GetNameParams = Parameters<typeof getName>; // []
 /***************************
 ------------ 10: Enums -----------
 *******************************/
 // Numeric Enum
 enum Direction {
  Up,    // 0
  Down,  // 1
  Left,  // 2
  Right  // 3
 }
 // String Enum
 enum Color {
  Red = "red",
  Green = "green",
  Blue = "blue"
 }
 // Mixed Enum
 enum Mixed {
  No = 0,
  Yes = "yes"
 }
 // Const Enum (inlined at compile time)
 const enum StatusCode {
  OK = 200,
  NotFound = 404,
  Error = 500
 }
 // Usage
 let currentDirection = Direction.Up;
 let favoriteColor = Color.Blue;
 let status = StatusCode.OK;
 /***************************
 ------------ 11: Modules -----------
 *******************************/
 // Named Exports
 export const PI = 3.14159;
 export function calculate(r: number): number {
  return PI * r * r;
 }
 export class Calculator {
  add(x: number, y: number): number { return x + y; }
 }
 // Default Export
 export default class Logger {
  log(message: string): void {
    console.log(message);
  }
 }
 // Re-exports
 export { Calculator as Calc } from "./calculator";
 export * from "./utilities";
 // Import
 import Logger from "./logger";           // default import
 import { PI, calculate } from "./math";  // named imports
 import * as MathUtils from "./math";     // namespace import
 import { Calculator as Calc } from "./calculator"; // alias
 // Dynamic Imports
 const module = await import("./dynamic-module");
 /***************************
 ------------ 12: Advanced Types -----------
 *******************************/
 // Mapped Types
 type Nullable<T> = {
  [P in keyof T]: T[P] | null;
 };
 type OptionalId<T> = {
  [P in keyof T]: P extends "id" ? T[P] | undefined : T[P];
 };
 // Conditional Types
 type IsString<T> = T extends string ? true : false;
 type StringCheck = IsString<"hello">; // true
 // Template Literal Types
 type EventName<T extends string> = `on${Capitalize<T>}`;
 type ClickEvent = EventName<"click">; // "onClick"
 // Indexed Access Types
 type Person = { name: string; age: number; location: string };
 type PersonName = Person["name"]; // string
 type PersonKeys = keyof Person;   // "name" | "age" | "location"
 // Recursive Types
 type Json = string | number | boolean | null | Json[] | {[key: string]: Json};
 /***************************
 ------------ 13: Decorators -----------
 *******************************/
 // Class Decorator
 function Component(name: string) {
  return function<T extends {new(...args: any[]): {}}>(constructor: T) {
    return class extends constructor {
      componentName = name;
    };
  };
 }
@Component("MyComponent")
 class MyClass {}
 // Method Decorator
 function Log(target: any, propertyName: string, descriptor: PropertyDescriptor) {
  const method = descriptor.value;
  descriptor.value = function(...args: any[]) {
    console.log(`Calling ${propertyName} with`, args);
    return method.apply(this, args);
  };
 }
 class Service {
  @Log
  getData(): string {
    return "data";
  }
 }
 // Property Decorator
 function MinLength(length: number) {
  return function(target: any, propertyName: string) {
    let value: string;
    const getter = () => value;
    const setter = (newVal: string) => {
      if (newVal.length < length) {
        throw new Error(`${propertyName} must be at least ${length} chars`);
      }
      value = newVal;
    };
    Object.defineProperty(target, propertyName, {
      get: getter,
      set: setter
    });
  };
 }
 class User {
  @MinLength(3)
  username: string;
 }
 /***************************
 ------------ 14: Configuration -----------
 *******************************/
 // tsconfig.json
 /*
 {
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "lib": ["ES2020", "DOM"],
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "sourceMap": true,
    "declaration": true,
    "removeComments": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
 }
 */
 // Compiler Options Quick Reference
 // --target: ES5, ES6, ES2017, ES2018, ES2019, ES2020, ESNext
 // --module: commonjs, amd, es2015, es2020, esnext, system, umd
 // --lib: ES5, ES6, ES2017, DOM, WebWorker, ScriptHost
 // --strict: Enable all strict type checking options
 /***************************
 ------------ 15: Common Patterns -----------
 *******************************/
 // API Response Type
 interface ApiResponse<T> {
  data: T;
  status: number;
  message: string;
 }
 // Event Handler Pattern
 type EventHandler<T = Event> = (event: T) => void;
 const onClick: EventHandler<MouseEvent> = (e) => console.log(e.clientX);
 // Builder Pattern
 class QueryBuilder {
  private query = "";
  select(fields: string): this {
    this.query += `SELECT ${fields} `;
    return this;
  }
  from(table: string): this {
    this.query += `FROM ${table} `;
    return this;
  }
  build(): string {
    return this.query.trim();
  }
 }
 // Factory Pattern
 interface Shape { area(): number; }
 class Circle implements Shape {
  constructor(private radius: number) {}
  area(): number { return Math.PI * this.radius ** 2; }
 }
 class ShapeFactory {
  static createCircle(radius: number): Shape {
    return new Circle(radius);
  }
 }
 // Promise/Async Patterns
 type AsyncResult<T> = Promise<T | Error>;
 async function fetchUser(id: number): Promise<User | null> {
  try {
    const response = await fetch(`/api/users/${id}`);
    return await response.json();
  } catch {
    return null;
  }
 }
 // Type-safe Environment Variables
 interface Env {
  NODE_ENV: "development" | "production" | "test";
  PORT: number;
  DATABASE_URL: string;
 }
 declare global {
  namespace NodeJS {
    interface ProcessEnv extends Env {}
  }
 }
 /*
 * QUICK TIPS
 * ----------
 * • Use 'unknown' instead of 'any' when possible
 * • Prefer 'interface' for object shapes, 'type' for unions/computed types
 * • Enable strict mode in tsconfig.json
 * • Use const assertions: const colors = ['red', 'blue'] as const
 * • Prefer type guards over type assertions
 * • Use utility types instead of manual type manipulation
 * • Enable noImplicitAny for better type safety
 * • Use discriminated unions for complex state management
 */
@@ -95,9 +95,3 @@ arr.reduce(callback[, initialValue])                 // Apply a function against
 arr.reduceRight(callback[, initialValue])            // Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value.
 arr.some(callback[, initialValue])                   // Returns true if at least one element in this array satisfies the provided testing function.
 arr.values()                                         // Returns a new Array Iterator object that contains the values for each index in the array.
 // String methods
 String.charAt(index)                                 // Returns the character at the specified index in a string.
 String.indexOf(character)                            // Returns the index of the first occurrence of a specified value in a string.
 String.substring(starting_index, ending_index)       // Returns a new string that is a subset of the original string.
 String.substring(starting_index)                     // Returns a substring from starting index to last index of string.
@@ -1,815 +0,0 @@
 # TypeScript
 * TypeScript is a statically typed superset of JavaScript that compiles to plain JavaScript
 * It adds optional static type definitions to JavaScript, enabling better tooling and error detection
 * In TypeScript, types are checked at compile-time, not runtime
 * A TypeScript file has an extension of .ts (or .tsx for React components)
 * TypeScript follows JavaScript syntax but adds type annotations and advanced features
 * We can compile and run a TypeScript file by the following commands:
    `$ tsc filename.ts` (compile to JavaScript)
    `$ node filename.js` (run the compiled JavaScript)
    Or directly: `$ ts-node filename.ts`
 #### TypeScript requires compilation to JavaScript before execution.
 ## Create and execute a program
 1. Install TypeScript globally: `npm install -g typescript`
 1. Create the program: `touch program.ts`
 1. Write the TypeScript code and save it
 1. Compile: `tsc program.ts`
 1. Run: `node program.js`
 <br>
 ### Basic Data Types
 | Data Type | Description | Example |
 | --------- | ----------- | ------- |
 | number | Integer and floating point values | `42`, `3.14`, `-7` |
 | string | Text values | `"hello"`, `'world'`, `` `template` `` |
 | boolean | True/false values | `true`, `false` |
 | undefined | Undefined value | `undefined` |
 | null | Null value | `null` |
 | any | Any type (disables type checking) | Can be anything |
 | unknown | Type-safe counterpart of any | Requires type checking |
 | void | Absence of any type | Function return type |
 | never | Type that never occurs | Functions that throw errors |
 | object | Non-primitive types | `{}`, `[]`, functions |
 <br>
 ## Keywords and Reserved Words
 <br>
 - TypeScript includes all JavaScript keywords plus additional TypeScript-specific ones
 | Keyword | Description  | Category |
 |---------- | ---------- | --------- |
 | let | Declares a block-scoped variable | Variable Declaration |
 | const | Declares a block-scoped constant | Variable Declaration |
 | var | Declares a function-scoped variable | Variable Declaration |
 | function | Declares a function | Function |
 | class | Declares a class | Class |
 | interface | Declares an interface | Type Definition |
 | type | Declares a type alias | Type Definition |
 | enum | Declares an enumeration | Type Definition |
 | namespace | Declares a namespace | Module System |
 | module | Declares a module | Module System |
 | import | Imports from another module | Module System |
 | export | Exports from current module | Module System |
 | extends | Class/interface inheritance | Inheritance |
 | implements | Class implements interface | Inheritance |
 | public | Public access modifier | Access Modifier |
 | private | Private access modifier | Access Modifier |
 | protected | Protected access modifier | Access Modifier |
 | readonly | Read-only property | Access Modifier |
 | static | Static class member | Class Member |
 | abstract | Abstract class/method | Class |
 | async | Asynchronous function | Async Programming |
 | await | Awaits a promise | Async Programming |
 | new | Creates new instance | Object Creation |
 | this | Current object reference | Object Reference |
 | super | Parent class reference | Inheritance |
 | typeof | Gets type of variable | Type Operation |
 | keyof | Gets keys of type | Type Operation |
 | in | Property existence check | Type Guard |
 | instanceof | Instance type check | Type Guard |
 | as | Type assertion | Type Assertion |
 | is | Type predicate | Type Guard |
 | infer | Infers type in conditional types | Advanced Types |
 | declare | Ambient declarations | Declaration |
 | get | Property getter | Accessor |
 | set | Property setter | Accessor |
 | yield | Generator yield | Generator |
 <br>
 ## Operators
 <br>
 | Operator | Description |
 |-|-|
 |  ( )	|  Grouping, function call, type assertion |
 |  [ ]	|  Array indexing, array/tuple types |
 |  .	|  Property access |
 |  ?.   | 	Optional chaining |
 | !   |	Non-null assertion, logical not |
 |  ~   | 	Bitwise not |
 | \-   |	Unary minus, arithmetic subtraction |
 |  \+   | 	Unary plus, arithmetic addition |
 |  \*   |	Multiplication |
 |  /   	| Division |
 |  %    |	Modulo |
 |  \*\* | Exponentiation |
 | <<   | Left shift |
 | \>>   |	Right shift |
 | \>>>   |	Unsigned right shift |
 | <    |	Less than |
 | <=   |	Less than or equal |
 | \>    |	Greater than |
 | \>=   |	Greater than or equal |
 |  ==   |	Equality (with coercion) |
 |  ===   |	Strict equality |
 | !=  | 	Inequality (with coercion) |
 | !==  | 	Strict inequality |
 |  & | Bitwise AND |
 | ^ | Bitwise XOR |
 | \| | Bitwise OR, Union types |
 |  && | Logical AND |
 | \|\| | Logical OR |
 | ??   | Nullish coalescing |
 | ? :  | Ternary conditional |
 | =  | Assignment |
 |  += | Add and assign |
 |  -=  | Subtract and assign |
 |  *= | Multiply and assign |
 |  /= | Divide and assign |
 |  %= | Modulo and assign |
 | **= | Exponentiate and assign |
 | <<= | Left shift and assign |
 |  \>>= | Right shift and assign |
 |  &= | Bitwise AND and assign |
 |  ^= | Bitwise XOR and assign |
 |  \|= | Bitwise OR and assign |
 |  , | Comma operator |
 | => | Arrow function |
 | ... | Spread/rest operator |
 ### Basic Data Structures
 ### Array
 - Array is an ordered collection of elements of the same or different types.
 - Arrays are created using square brackets or Array constructor:
 ```typescript
 let numbers: number[] = [1, 2, 3, 4];
 let fruits: Array<string> = ["apple", "banana", "cherry"];
 let mixed: (string | number)[] = [1, "two", 3];
 ```
 - Array elements are indexed starting from 0.
 - Arrays are mutable - you can change, add, and remove elements.
 - Common array methods:
 ```typescript
 let arr = [1, 2, 3];
 arr.push(4);        // Add to end: [1, 2, 3, 4]
 arr.pop();          // Remove from end: [1, 2, 3]
 arr.unshift(0);     // Add to start: [0, 1, 2, 3]
 arr.shift();        // Remove from start: [1, 2, 3]
 arr.length;         // Get length: 3
 ```
 ### Tuple
 - Tuple is an array with a fixed number of elements of specific types.
 - Tuples are created using square brackets with type annotations:
 ```typescript
 let person: [string, number] = ["John", 30];
 let coordinate: [number, number] = [10, 20];
 ```
 - Tuple elements are ordered and have specific types at each position.
 - You can access elements by index, but type checking ensures correctness:
 ```typescript
 let point: [number, number] = [10, 20];
 console.log(point[0]); // 10 (number)
 console.log(point[1]); // 20 (number)
 ```
 - Named tuples provide better readability:
 ```typescript
 let user: [name: string, age: number] = ["Alice", 25];
 ```
 - Optional and rest elements in tuples:
 ```typescript
 let optional: [string, number?] = ["hello"];
 let rest: [string, ...number[]] = ["coords", 1, 2, 3];
 ```
 ### Set
 - Set is a collection of unique values of any type.
 - Sets are created using the Set constructor:
 ```typescript
 let uniqueNumbers = new Set<number>([1, 2, 3, 2]); // {1, 2, 3}
 let stringSet = new Set<string>();
 ```
 - Set operations:
 ```typescript
 let mySet = new Set<string>();
 mySet.add("apple");     // Add element
 mySet.has("apple");     // Check existence: true
 mySet.delete("apple");  // Remove element
 mySet.clear();          // Remove all elements
 mySet.size;             // Get size
 ```
 - Iterating over Set:
 ```typescript
 let fruits = new Set(["apple", "banana", "cherry"]);
 for (let fruit of fruits) {
    console.log(fruit);
 }
 ```
 ### Map
 - Map is a collection of key-value pairs where keys can be any type.
 - Maps are created using the Map constructor:
 ```typescript
 let userMap = new Map<string, number>();
 let mixedMap = new Map<string | number, any>();
 ```
 - Map operations:
 ```typescript
 let map = new Map<string, number>();
 map.set("age", 30);         // Add key-value pair
 map.get("age");             // Get value: 30
 map.has("age");             // Check key exists: true
 map.delete("age");          // Remove key-value pair
 map.clear();                // Remove all entries
 map.size;                   // Get size
 ```
 - Object vs Map:
 ```typescript
 // Object - string/symbol keys only
 let obj: { [key: string]: number } = { "age": 30 };
 // Map - any type keys
 let map = new Map<any, number>();
 map.set("age", 30);
 map.set(42, 100);
 map.set(true, 1);
 ```
 ### Object Types and Interfaces
 - Objects store key-value pairs and are fundamental to TypeScript.
 - Object type annotation:
 ```typescript
 let person: { name: string; age: number } = {
    name: "John",
    age: 30
 };
 ```
 - Interface definition for better reusability:
 ```typescript
 interface User {
    readonly id: number;    // Read-only property
    name: string;
    age?: number;          // Optional property
    [key: string]: any;    // Index signature
 }
 let user: User = {
    id: 1,
    name: "Alice"
 };
 ```
 - Nested objects and complex types:
 ```typescript
 interface Address {
    street: string;
    city: string;
    country: string;
 }
 interface Person {
    name: string;
    address: Address;
    hobbies: string[];
 }
 ```
 ### Conditional branching
 ```typescript
 // If-else statements
 if (condition) {
    // code block
 } else if (anotherCondition) {
    // code block
 } else {
    // code block
 }
 // Ternary operator
 let result = condition ? valueIfTrue : valueIfFalse;
 // Switch statement
 switch (variable) {
    case value1:
        // code
        break;
    case value2:
        // code
        break;
    default:
        // code
        break;
 }
 ```
 ### Loops
 TypeScript supports all JavaScript loop constructs:
 #### For loop
 ```typescript
 // Traditional for loop
 for (let i = 0; i < 5; i++) {
    console.log(i);
 }
 // For-of loop (iterates over values)
 let fruits = ["apple", "banana", "cherry"];
 for (let fruit of fruits) {
    console.log(fruit);
 }
 // For-in loop (iterates over keys/indices)
 for (let index in fruits) {
    console.log(index, fruits[index]);
 }
 ```
 #### While loop
 ```typescript
 let i = 0;
 while (i < 5) {
    console.log(i);
    i++;
 }
 // Do-while loop
 let j = 0;
 do {
    console.log(j);
    j++;
 } while (j < 5);
 ```
 #### Loop control
 ```typescript
 for (let i = 0; i < 10; i++) {
    if (i === 3) continue;  // Skip iteration
    if (i === 7) break;     // Exit loop
    console.log(i);
 }
 ```
 ### Function definition
 ```typescript
 // Function declaration
 function functionName(param1: type, param2: type): returnType {
    return value;
 }
 // Function expression
 const functionName = function(param: type): returnType {
    return value;
 };
 // Arrow function
 const functionName = (param: type): returnType => {
    return value;
 };
 // Arrow function (concise)
 const functionName = (param: type): returnType => value;
 ```
 ### Function variations
 ```typescript
 // Optional parameters
 function greet(name: string, age?: number): string {
    return age ? `Hello ${name}, you are ${age}` : `Hello ${name}`;
 }
 // Default parameters
 function multiply(a: number, b: number = 1): number {
    return a * b;
 }
 // Rest parameters
 function sum(...numbers: number[]): number {
    return numbers.reduce((total, num) => total + num, 0);
 }
 // Function overloads
 function process(input: string): string;
 function process(input: number): number;
 function process(input: string | number): string | number {
    if (typeof input === 'string') {
        return input.toUpperCase();
    }
    return input * 2;
 }
 // Generic functions
 function identity<T>(arg: T): T {
    return arg;
 }
 let result = identity<string>("hello"); // Type is string
 let result2 = identity(42);             // Type inferred as number
 ```
 ### Function call
 ```typescript
 functionName(argument1, argument2);
 // With optional parameters
 greet("John");          // "Hello John"
 greet("John", 25);      // "Hello John, you are 25"
 // With rest parameters
 sum(1, 2, 3, 4);        // 10
 // Generic function call
 identity<string>("hello");
 identity(42);           // Type inferred
 ```
 ### Classes
 ```typescript
 class ClassName {
    // Properties
    public publicProperty: type;
    private privateProperty: type;
    protected protectedProperty: type;
    readonly readonlyProperty: type;
    static staticProperty: type;
    // Constructor
    constructor(param: type) {
        this.publicProperty = param;
    }
    // Methods
    public method(): returnType {
        return value;
    }
    // Getters and setters
    get property(): type {
        return this.privateProperty;
    }
    set property(value: type) {
        this.privateProperty = value;
    }
    // Static method
    static staticMethod(): returnType {
        return value;
    }
 }
 // Inheritance
 class ChildClass extends ParentClass {
    constructor(param: type) {
        super(param); // Call parent constructor
    }
    // Override method
    method(): returnType {
        return super.method(); // Call parent method
    }
 }
 // Abstract class
 abstract class AbstractClass {
    abstract abstractMethod(): void;
    concreteMethod(): void {
        console.log("This is implemented");
    }
 }
 ```
 ### Key TypeScript Features
 * **Static Typing**: Types are checked at compile-time
 * **Type Inference**: TypeScript can often infer types automatically
 * **Optional Typing**: You can gradually add types to existing JavaScript
 * **Generics**: Create reusable components that work with multiple types
 * **Interfaces**: Define contracts for objects and classes
 * **Enums**: Create named constants
 * **Union Types**: Variables can be one of several types
 * **Intersection Types**: Combine multiple types
 * **Type Guards**: Runtime type checking
 * **Decorators**: Add metadata to classes and methods
 ### Compilation
 * TypeScript code must be compiled to JavaScript before execution
 * The TypeScript compiler (`tsc`) performs type checking and transpilation
 * Configuration is managed through `tsconfig.json`
 * TypeScript can target different JavaScript versions (ES5, ES6, etc.)
 * Source maps can be generated for debugging compiled code
 #### Sample TypeScript Code
 **hello.ts**
 ```typescript
 // TypeScript source code
 interface User {
    name: string;
    age: number;
    isActive?: boolean;
 }
 class UserManager {
    private users: User[] = [];
    addUser(user: User): void {
        this.users.push(user);
        console.log(`Added user: ${user.name}`);
    }
    getActiveUsers(): User[] {
        return this.users.filter(user => user.isActive ?? true);
    }
    getUserCount(): number {
        return this.users.length;
    }
 }
 // Generic function
 function processData<T>(data: T[], processor: (item: T) => T): T[] {
    return data.map(processor);
 }
 // Usage
 const userManager = new UserManager();
 const newUser: User = {
    name: "John Doe",
    age: 30,
    isActive: true
 };
 userManager.addUser(newUser);
 // Arrow functions with types
 const formatUser = (user: User): string => 
    `${user.name} (${user.age} years old)`;
 // Union types and type guards
 function displayInfo(value: string | number | boolean): string {
    if (typeof value === "string") {
        return `Text: ${value.toUpperCase()}`;
    } else if (typeof value === "number") {
        return `Number: ${value.toFixed(2)}`;
    } else {
        return `Boolean: ${value ? "Yes" : "No"}`;
    }
 }
 console.log(displayInfo("hello"));
 console.log(displayInfo(42.567));
 console.log(displayInfo(true));
 ```
 #### Compilation Commands
 ```bash
 # Compile single file
 tsc hello.ts
 # Compile with specific target
 tsc hello.ts --target ES2020
 # Compile with source maps
 tsc hello.ts --sourceMap
 # Watch mode (recompile on changes)
 tsc hello.ts --watch
 # Compile all files in project
 tsc
 # Check for errors without generating files
 tsc --noEmit
 # Compile with strict mode
 tsc hello.ts --strict
 ```
 #### Compiled JavaScript Output
 **hello.js** (compiled from above TypeScript)
 ```javascript
 "use strict";
 // JavaScript output (target ES2017)
 class UserManager {
    constructor() {
        this.users = [];
    }
    addUser(user) {
        this.users.push(user);
        console.log(`Added user: ${user.name}`);
    }
    getActiveUsers() {
        return this.users.filter(user => user.isActive ?? true);
    }
    getUserCount() {
        return this.users.length;
    }
 }
 // Generic function (types removed)
 function processData(data, processor) {
    return data.map(processor);
 }
 // Usage
 const userManager = new UserManager();
 const newUser = {
    name: "John Doe",
    age: 30,
    isActive: true
 };
 userManager.addUser(newUser);
 // Arrow functions
 const formatUser = (user) => `${user.name} (${user.age} years old)`;
 // Type guards remain as runtime checks
 function displayInfo(value) {
    if (typeof value === "string") {
        return `Text: ${value.toUpperCase()}`;
    }
    else if (typeof value === "number") {
        return `Number: ${value.toFixed(2)}`;
    }
    else {
        return `Boolean: ${value ? "Yes" : "No"}`;
    }
 }
 console.log(displayInfo("hello"));
 console.log(displayInfo(42.567));
 console.log(displayInfo(true));
 ```
 #### tsconfig.json Configuration
 ```json
 {
  "compilerOptions": {
    // Basic Options
    "target": "ES2020",                     // Target JavaScript version
    "module": "commonjs",                   // Module system
    "lib": ["ES2020", "DOM"],              // Include library files
    "outDir": "./dist",                     // Output directory
    "rootDir": "./src",                     // Input directory
    "strict": true,                         // Enable strict type checking
    // Additional Checks
    "noUnusedLocals": true,                // Error on unused variables
    "noUnusedParameters": true,            // Error on unused parameters
    "noImplicitReturns": true,             // Error on missing return statements
    "noFallthroughCasesInSwitch": true,    // Error on fallthrough cases
    // Module Resolution
    "moduleResolution": "node",             // Module resolution strategy
    "baseUrl": "./",                        // Base directory
    "paths": {                              // Path mapping
      "@/*": ["src/*"],
      "@utils/*": ["src/utils/*"]
    },
    // Source Maps & Debugging
    "sourceMap": true,                      // Generate source maps
    "inlineSourceMap": false,               // Don't inline source maps
    "declaration": true,                    // Generate .d.ts files
    "declarationMap": true,                 // Generate .d.ts.map files
    // Experimental
    "experimentalDecorators": true,         // Enable decorators
    "emitDecoratorMetadata": true,          // Emit decorator metadata
    // JavaScript Support
    "allowJs": true,                        // Allow JavaScript files
    "checkJs": false,                       // Type check JavaScript files
    // Other Options
    "esModuleInterop": true,               // CommonJS/ES6 interop
    "skipLibCheck": true,                  // Skip lib.d.ts type checking
    "forceConsistentCasingInFileNames": true, // Consistent file names
    "removeComments": true,                // Remove comments from output
    "noEmitOnError": true                  // Don't emit if there are errors
  },
  "include": [
    "src/**/*",                           // Include all files in src
    "tests/**/*"                          // Include test files
  ],
  "exclude": [
    "node_modules",                       // Exclude node_modules
    "dist",                               // Exclude output directory
    "**/*.test.ts",                       // Exclude test files from compilation
    "**/*.spec.ts"
  ],
  "files": [
    // Explicitly include specific files (optional)
    "src/main.ts"
  ]
 }
 ```
 #### Package.json Scripts
 ```json
 {
  "name": "typescript-project",
  "version": "1.0.0",
  "scripts": {
    "build": "tsc",
    "start": "node dist/main.js",
    "dev": "ts-node src/main.ts",
    "watch": "tsc --watch",
    "clean": "rm -rf dist",
    "type-check": "tsc --noEmit"
  },
  "devDependencies": {
    "typescript": "^4.9.0",
    "ts-node": "^10.9.0",
    "@types/node": "^18.0.0"
  }
 }
 ```
 #### Compilation Examples with Different Targets
 **Original TypeScript:**
 ```typescript
 const greet = (name: string = "World"): string => `Hello, ${name}!`;
 const user = { name: "Alice", age: 30 };
 const { name, age } = user;
 ```
 **Compiled to ES5:**
 ```javascript
 var greet = function (name) {
    if (name === void 0) { name = "World"; }
    return "Hello, " + name + "!";
 };
 var user = { name: "Alice", age: 30 };
 var name = user.name, age = user.age;
 ```
 **Compiled to ES2020:**
 ```javascript
 const greet = (name = "World") => `Hello, ${name}!`;
 const user = { name: "Alice", age: 30 };
 const { name, age } = user;
 ```
 #### Error Examples
 **TypeScript with errors:**
 ```typescript
 // Type errors that prevent compilation
 let message: string = 42;              // Error: Type 'number' is not assignable to type 'string'
 let numbers: number[] = ["a", "b"];    // Error: Type 'string' is not assignable to type 'number'
 function add(a: number, b: number): number {
    return a + b;
 }
 add("hello", "world");                 // Error: Argument of type 'string' is not assignable to parameter of type 'number'
 ```
 **Compiler output:**
 ```bash
 $ tsc error-example.ts
 error-example.ts(2,5): error TS2322: Type 'number' is not assignable to type 'string'.
 error-example.ts(3,5): error TS2322: Type 'string[]' is not assignable to type 'number[]'.
 error-example.ts(8,5): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
 ```
@@ -21,7 +21,6 @@ cat /proc/<process_id>/maps   # Show the current virtual memory usage of a Linux
 ip r # Display ip of the server
 lsof -i :9000 # List process running on port 9000
 kill -9 $(lsof -t -i:PORT) # Kill the process running on whichever port specified
 journalctl -u minio.service -n 100 --no-pager # List last 100 logs for specific service
Author	SHA1	Message	Date
Abhiraj Bhowmick	8374ede756	Merge `0ba0b3519e` into `88e5be6e4b`	2025-02-06 17:56:03 +08:00
Abhiraj Bhowmick	0ba0b3519e	✨ Create CSS Basics Cheatsheet	2021-10-19 11:34:43 +05:30