Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tommietechie/tommie-snippets
Code snippets to help grasp the concepts of the web.
https://github.com/tommietechie/tommie-snippets
css html javascript react snippets typescript
Last synced: 9 days ago
JSON representation
Code snippets to help grasp the concepts of the web.
- Host: GitHub
- URL: https://github.com/tommietechie/tommie-snippets
- Owner: TommieTechie
- Created: 2022-05-28T17:45:00.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T03:27:48.000Z (almost 2 years ago)
- Last Synced: 2024-10-31T09:42:09.597Z (16 days ago)
- Topics: css, html, javascript, react, snippets, typescript
- Language: JavaScript
- Homepage:
- Size: 89.8 KB
- Stars: 14
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tommie's code snippets
A repository to run code snippets.
---
## Index
- [Stack](#stack)
- [Summary](#summary)
- [Getting Started](#getting-started)
- [Local Commands](#local-commands)
---
## Stack
- [HTML5](https://html.com/)
- [CSS3](https://developer.mozilla.org/en-US/docs/Web/CSS)
- [JavaScript ES6](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
- [TypeScript](https://www.typescriptlang.org/)
---
## Summary
| Topic | Programming Language | Description | Links |
| :-------------------------------------------------------: | :---------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
| `static` keyword | JavaScript | Using the JS static keyword in OOP classes | [Twitter post](https://twitter.com/TommiEng/status/1523736644616359936) and [Raw code](/snippets/js-static-OOP-09-05-2022.js) |
| Promises | JavaScript | Two different ways to call API endpoints | [Twitter post](https://twitter.com/TommiEng/status/1521631124656635906) and [Raw code](/snippets/js-promise-async-await-then-03-05-2022.js) |
| Promises | JavaScript | Promise chaining and .then keyword | [Twitter post](https://twitter.com/TommiEng/status/1528753221749153794) and [Raw code](/snippets/js-promise-then-chaining-23-05-2022.js) |
| Promises | JavaScript | Async await syntactic sugar | [Twitter post](https://twitter.com/TommiEng/status/1529182569325121536) and [Raw code](/snippets/js-promise-async-await-syntactic-sugar-24-05-2022.js) |
| `Promise.all` | JavaScript | Run multiple promises in parallel, and wait for all of them to finish | [Twitter post](https://twitter.com/TommiEng/status/1530633767970275330) and [Raw code](/snippets/js-promise-all-28-05-2022.js) |
| Rejecting a promise | JavaScript | Rejecting a promise if we have a network error, or a problem with the data we fetch from the server | [Twitter post](https://twitter.com/TommiEng/status/1531331593704554496) and [Raw code](/snippets/js-promise-reject-30-05-2022.js) |
| `try...catch...finally` | JavaScript | Executing code using the `catch` or `finally` block | [Twitter post](https://twitter.com/TommiEng/status/1532042609283170306) and [Raw code](/snippets/js-catch-finally-31-05-2022.js) |
| Promises | JavaScript | What is a Promise? | [Twitter post](https://twitter.com/TommiEng/status/1527745975783129088) and [Raw code](/snippets/js-promise-introduction-20-05-2022.js) |
| String method split | JavaScript | Split a string into an array of strings | [Twitter post](https://twitter.com/TommiEng/status/1526638679560798215) and [Raw code](/snippets/js-string-method-split-17-05-2022.js) |
| Type function arguments | TypeScript | Typing your function arguments | [Twitter post](https://twitter.com/TommiEng/status/1521920077637029889) and [Raw code](/snippets/ts-function-arguments-04-05-2022.ts) |
| Creating DOM nodes | HTML, JavaScript | Creating and appending DOM nodes in HTML with JavaScript | [Twitter post](https://twitter.com/TommiEng/status/1536731373842702337?cxt=HHwWgoC90dzCyNMqAAAA) and [Raw code](/snippets/js-create-append-dom-node-14-06-2022.html) |
| Intro to React API | HTML, JavaScript, React | Creating an element using the React API | [Twitter post](https://twitter.com/TommiEng/status/1537117388331794432?cxt=HHwWgIC-2dyH-NQqAAAA) and [Raw code](/snippets/react-api-intro-15-06-2022.html) |
| Intro to JSX | HTML, JavaScript, React | Using JSX instead of the React API | [Twitter post](https://twitter.com/TommiEng/status/1537487443447975936?cxt=HHwWgMC4leKroNYqAAAA) and [Raw code](/snippets/js-babel-16-06-2022.html) |
| Intro to JSDoc | JavaScript | Documenting complex functions with JSDoc | [Twitter post](https://twitter.com/TommiEng/status/1526266768808869894) and [Raw code](/snippets/js-doc-calculate-tip-16-05-2022.js) |
| The Map object | JavaScript | Learning about the Map object and its key-value pairs | [Twitter post](https://twitter.com/TommiEng/status/1525185808122232834) and [Raw code](/snippets/js-map-object-13-05-2022.js) |
| Built-in types and primitives | TypeScript | Introduction to TypeScript | [Twitter post](https://twitter.com/TommieNg/status/1587476768172171265) and [Raw code](/snippets/ts-built-in-types-and-primitives.ts) |
| Interfaces | TypeScript | Making your own custom types with Interfaces | [Twitter post](https://twitter.com/TommieNg/status/1588228449725988867) and [Raw code](/snippets/ts-custom-types-with-interfaces-03-11-2022.ts) |
| Generics | TypeScript | Generics | [Twitter post](https://twitter.com/TommieNg/status/1524476938823286785) and [Raw code](/snippets/ts-generics-11-05-2022.ts) |
| Define custom types with type aliases | TypeScript | Another way of creating custom types | [Twitter post](https://twitter.com/TommiEng/status/1524476938823286785) and [Raw code](/snippets/ts-generics-11-05-2022.ts) |
| Enums | TypeScript | Enums, or enumerable types, are a special kind of type that holds a list of hardcoded values. Once you define an enum, you can refer to it like any other regular type. | [Twitter post](https://twitter.com/TommieNg/status/1593308974266433538) and [Raw code](/snippets/ts-enum-types-17-11-2022.ts) |
| Typing your functions | TypeScript | Previously, we learned on applying type information to variables. Functions are also an important part of JavaScript development, so let's learn how to type them too! | [Twitter post](https://twitter.com/TommieNg/status/1595102796122030082) and [Raw code](/snippets/ts-typing-functions-22-11-2022.ts) |
| Generics (reviewed) | TypeScript | A generic type is a representation of any type that you’ll substitute in. | [Twitter post](https://twitter.com/TommieNg/status/1598403229997420545) and [Raw code](/snippets/ts-generics-revisited-01-12-2022.ts) |
| Generics constraints | TypeScript | Another feature of generics are their constraints, which lets you add more restrictions on the types that can be used as parameters in your functions. | [Twitter post](https://twitter.com/TommieNg/status/1600902668624330753) and [Raw code](/snippets/ts-generics-constraints-08-12-2022.ts) |
| Spreading attributes | HTML, JavaScript, React | Spreading props/attributes in React | [Twitter post](https://twitter.com/TommiEng/status/1539291527125647360) and [Raw code](/snippets/react-spreading-props-21-06-2022.html) |
| Custom components | HTML, JavaScript, React | Creating JSX custom components | [Twitter post](https://twitter.com/TommiEng/status/1540000446445764608) and [Raw code](/snippets/react-custom-jsx-component-23-06-2022.html) |
| Prop types | HTML, JavaScript, React | Typechecking with prop-types | [Twitter post](https://twitter.com/TommiEng/status/1541856205437648899) and [Raw code](/snippets/react-propTypes-28-05-2022.html) |
| React fragments | HTML, JavaScript, React | Using React fragments | [Twitter post](https://twitter.com/TommiEng/status/1542935222781607938?cxt=HHwWhICwlaHazekqAAAA) and [Raw code](/snippets/react-fragment-01-07-2022.html) |
| Intro to React styling | React, CSS | Primary way to style in React | [Twitter post](https://twitter.com/TommiEng/status/1545085781148057601) and [Raw code](/snippets/react-styling-07-07-2022.jsx) |
| React custom styling | React, CSS | Styling with custom components and props | [Twitter post](https://twitter.com/TommiEng/status/1546899783251640322) and [Raw code](/snippets/react-custom-styling-12-07-2022.jsx) |
| React form - Intro | React | Introduction to React forms | [Twitter post](https://twitter.com/TommiEng/status/1547656068460732421) and [Raw code](/snippets/react-form-intro-14-07-2022.js) |
| React form - useRef | React | Getting a value from an input with a ref | [Twitter post](https://twitter.com/TommiEng/status/1549474947306774528) and [Raw code](/snippets/react-form-useRef-19-07-2022.jsx) |
| React key prop | React | Keeping track of an element with the key prop | [Twitter post](https://twitter.com/TommiEng/status/1550187678259453958?cxt=HHwWjIC9nd3er4MrAAAA) and [Raw code](/snippets/react-key-prop-21-07-2022.jsx) |
| `useState` | React | The `useState `hook | [Twitter post](https://twitter.com/TommiEng/status/1552811283388547074) and [Raw code](/snippets/react-useState-28-07-2022.jsx) |
| `useState` (continued) | React | Example from the Twitter thread on the hook | [Twitter thread](https://twitter.com/TommiEng/status/1554523718654857218) and [Raw code](/snippets/react-useState-timer-02-08-2022.jsx) |
| `useState` — passing an initial state prop | React | Here's a way to make our Toggle component accept an initialState prop. Then, we can initialize our state with that value. | [Twitter post](https://twitter.com/TommiEng/status/1555250681593974784) and [Raw code](/snippets/react-useState-initialProp-04-08-2022.jsx) |
| `useEffect` — Introduction | React | The `useEffect` hook allows you to execute some code after React finishes rendering, or re-rendering the component to the DOM. It accepts a callback function as an argument, which will be called by React after the DOM has finished updating. | [Twitter post](https://twitter.com/TommiEng/status/1557072922493259777) and [Raw code](/snippets/react-introduction-to-useEffect-09-08-2022.jsx) |
| `useState` — Lazy initial state | React | The `useState` hook will also let you pass an anonymous function, so that the hook can only call that anonymous function to get the value from the state, only when your component is being rendered for the first time in your app. | [Twitter post](https://twitter.com/TommiEng/status/1557761362264195073?cxt=HHwWgoCwqZTto54rAAAA) and [Raw code](/snippets/react-lazy-initial-state-11-08-2022.jsx) |
| `useEffect` — the dependency array | React | useEffect lets you pass a second argument, which is the dependency array. This tells React that the callback function in your `useEffect` should only be called when the dependencies changed. | [Twitter post](https://twitter.com/TommiEng/status/1559583339371282436) and [Raw code](/snippets/react-use-effect-dependency-array-16-08-2022.jsx) |
| Custom hook — `useState` with `localStorage` | React | In JavaScript, you'd store your reusable logic in functions. In React, if some logic inside a component can be reused in other components, you'd create what we call a custom hook! | [Twitter post](https://twitter.com/TommiEng/status/1560364993190805506) and [Raw code](/snippets/react-useStateWithLocalStorage-custom-hook-18-08-2022.jsx) |
| Lifting state up | React | How to share state between sibling components? Lift it up 🏋️♀️ Find a lowest common parent shared between the components and add the state management there. Then, pass the state and a way to update that state down in the needed components. | [Twitter post](https://twitter.com/TommiEng/status/1562134884377710592) and [Raw code](/snippets/react-lifting-state-up-23-08-2022.jsx) |
| CSS modules | React | "By creating a CSS file with the `.module.css` extension, you'll have created a module where you can't access the classes without importing. To use the class name, you can default import the "classes" object from the `.module.css` file, and then use the JSX expression `{classes.[insertYourCSSClassHere]}` to use the styling! It prevents classes with the same name from overlapping with each other by using name mangling." — [Khanh](https://twitter.com/khanhtncva) | [Twitter post](https://twitter.com/TommiEng/status/1562894435221852167) and [Raw code](/snippets/react-styling-with-css-modules-25-08-2022.jsx) |
| State colocation | React | A week ago, we talked about how to lift state up in React. Today, let's discuss pushing state down, or colocating state! I like how educator [Kent C. Dodds](https://twitter.com/kentcdodds) describes it: "_Place code as close to where it's relevant as possible_". | [Twitter post](https://twitter.com/TommiEng/status/1567208594201788423) and [Raw code](/snippets/react-colocating-state-06-09-2022.jsx) |
| Integrating UI libraries that works directly with the DOM | React | Some UI libraries work with the DOM directly. In JSX, `
hi` is syntactic sugar for `React.createElement("div", null, "hi")`. We don't have access to DOM nodes in our function component. DOM nodes aren't created at all until the `ReactDOM.render` method is called. Functional components are responsible for creating our React elements and it’s bad practice to interact directly with the DOM in React. To access the DOM, ask React to give you access to a DOM node when it renders your component. This happens with the prop named `ref`. | [Twitter post](https://twitter.com/TommiEng/status/1569774903141736449) and [Raw code](/snippets/react-accessing-the-dom-13-09-2022.jsx) |
| HTTP requests | React | When building apps, you’ll find yourself needing another kind of side-effect: API calls, or HTTP requests. This is pretty similar to our previous example of side-effects in interacting with the DOM, or using APIs like localStorage. What those have in common is that they all work with the `useEffect` hook. I personally found it simpler to use the Promise-based `.then` statement rather than using the `async`/`await` syntax, but it's really up to you how you'd rather do it. | [Twitter post](https://twitter.com/TommiEng/status/1570811589540052993) and [Raw code](/snippets/react-http-request-15-09-2022.jsx) |
| HTTP requests — handling errors | React | Mistakes inevitably happen and errors will need handling so users don't get confounded. When handling Promise errors, there are different options like using the `.catch` statement or using the second argument of the Promised-based `.then` statement. When using the `.catch` statement, you handle errors in the Promise. However, you also handle an error in the `setWinners(data)` call, because of our Promises work. When using the second argument of the `.then` statement, you catch errors that happens in the `fetch` only. In our example, I thought calling `setWinners` would not throw an error because React handles it, so I tried the second argument way of doing it. | [Twitter post](https://twitter.com/TommiEng/status/1572329881559617536) and [Raw code](/snippets/react-http-requests-handling-errors.20-09-2022.jsx) |
| HTTP requests status | React | Help your user understand the state of your application by implementing a status state for your API call. By adding a state to represent the status of our components' explicitly, you won't have to worry about what state you might get, and how to show it for a particular case, and when to set or not set it for other use cases. Here are examples of possible states we can work with: **idle**: _No request has been sent._, **ending**: _Started request_, **resolved**: _Successful request._, **rejected**: _Failed request._ | [Twitter post](https://twitter.com/TommiEng/status/1573045780566650880) and [Raw code](/snippets/react-http-requests-status-22-09-2022.jsx) |
| Putting your HTTP request state in an object | React | In the [previous snippet](/snippets/react-http-requests-status-22-09-2022.jsx), you might've noticed that a bunch of different `setState`s are called simultaneously, which would not be an issue, because React 17 and lower can batch all those calls together, but not when they’re async. 😅 The good news is that, since React 18, the batching for asynchronous automatic batching is available. Even though that new feature is available, it’s better to group those related states together in an object instead of creating individual different states. P.S.: I removed the error state just for the sake of readability. | [Twitter post](https://twitter.com/TommiEng/status/1574825871482961921) and [Raw code](/snippets/react-http-requests-state-object-27-09-2022.jsx) |
| Error Boundaries | React | We managed to catch errors if there happens to be one in our HTTP request, huzzah! Unfortunately, there are many other errors that might happen in applications. 🙁 You try handling those errors, but your app won’t always behave, and decides to go wild unleashing errors like a Pandora’s box. 📦 If your app throws an error and you don’t handle it, your app will be removed from the web page, and your user will be left will a blank screen. 😬 | [Twitter post](https://twitter.com/TommieNg/status/1575881137762992128) and [Raw code](/snippets/react-error-boundary-30-09-2022.jsx)
| Intro to the `useReducer` hook | React | When using the `useState` hook, you can manage the state in your app. However, there might be times where you might want to separate the state's logic from the components that make the state's changes. With many parts of the state that change simultaneously, an object with those parts of the state inside can help make it more organized. That’s where `useReducer` can be of help. 💡 Normally, the `useReducer` hook would be used with a state object, but let’s start with a little gelato counter to help understand the difference between the hook's conventions and the API. Our gelatoReducer takes 2 arguments: The current state, and an "action" that the dispatch function (that'd be `setGelatoAmount`) is called with. The `useReducer hook` for our little `` component might look like over engineering, but it’s just for the sake of the example! 🍨 | [Twitter post](https://twitter.com/TommieNg/status/1583153943068446720) and [Raw code](/snippets/react-useReducer-basics-20-10-2022.jsx) | |
| Setting state with useReducer | React | With class components, instead of using the “setState” hook directly, you would use `this.setState`. This is because in class components, states are handled as objects. You can call it with any amount of properties, and those same properties would be the ones updated. In this example, we mimic the same way that same way of doing setState in class components and modify the reducer. | [Twitter post](https://twitter.com/TommieNg/status/1586025057004158976) and [Raw code](/snippets/react-useReducer-setState-object-28-10-2022.jsx) |
| Constructors | JavaScript | Constructors in JS | [Twitter post](https://twitter.com/TommiEng/status/1522309640570257409) and [Raw code](/snippets/js-constructors-05-05-2022.js) |
| Setters and Getters | JavaScript | JS class with a setter and getter | [Twitter post](https://twitter.com/TommiEng/status/1522645848638828544) and [Raw code](/snippets/js-oop-setter-getter-06-05-2022.js) |
| Template Literals | JavaScript | Template literals for string interpolation or multi-lined strings | [Twitter post](https://twitter.com/TommiEng/status/1521195466460966913) and [Raw code](/snippets/js-template-literals-02-05-2022.js) |
| getComputedStyle | JavaScript | getComputedStyle method to return an object containing an element's CSS properties. | [Twitter post](https://twitter.com/TommiEng/status/1520147838914768896) and [Raw code](/snippets/js-getComputedStyle-29-04-2022.html) |
| Math.floor | JavaScript | Simple example of the `Math.floor()` method | [Twitter post](https://twitter.com/TommiEng/status/1519021253532827651) and [Raw code](/snippets/js-math-floor-26-04-2022.js) |
| Nullish coalescing operator | JavaScript | Using the Nullish coalescing operator `??` | [Twitter post](https://twitter.com/TommiEng/status/1517563647735779328) and [Raw code](/snippets/js-nullish-coalescing-operator-22-04-2022.js) |
| Arrow functions | JavaScript | Arrow functions in JS `=>` | [Twitter thread](https://twitter.com/TommiEng/status/1517176373864980483) and [Raw code](/snippets/js-arrow-functions-21-04-2022.js) |
| Logical OR assignment | JavaScript | Logical OR assignment in JS | [Twitter post](https://twitter.com/TommiEng/status/1516809407941726208) and [Raw code](/snippets/js-logical-or-assignment-20-04-2022.js) |
| Logical AND assignment | JavaScript | Logical AND assignment in JS `&&=` | [Twitter post](https://twitter.com/TommiEng/status/1516464746354155520) and [Raw code](/snippets/js-logical-and-assignment-19-04-2022.js) |
| Logical AND assignment | JavaScript | Logical AND assignment in JS `&&=` | [Twitter post](https://twitter.com/TommiEng/status/1516464746354155520) and [Raw code](/snippets/js-logical-and-assignment-19-04-2022.js) |
| Emptying an array | JavaScript | Empty an array in JS | [Twitter post](https://twitter.com/TommiEng/status/1515056445275971593) and [Raw code](/snippets/js-empty-array-15-04-2022.js) |
| Factorial (recursive) | JavaScript | Intro to recursion with a factorial function | [Twitter thread](https://twitter.com/TommiEng/status/1514640784947126285) and [Raw code](/snippets/js-recursive-factorial-14-04-2022.js) |
| try...catch | JavaScript | The try...catch statement | [Twitter post](https://twitter.com/TommiEng/status/1513919158005735429) and [Raw code](/snippets/js-try-catch-12-04-2022.js) |
| Promise with `setTimeout` | JavaScript | Making your JavaScript wait for a specific amount of seconds. | [Twitter post](https://twitter.com/TommiEng/status/1513548511685619714) and [Raw code](/snippets/js-promise-setTimeout-11-04-2022.js) |
| Math object (min, max) | JavaScript | Using the `Math.min()` and `Math.max()` object | [Twitter post](https://twitter.com/TommiEng/status/1512495469263564816) and [Raw code](/snippets/js-math-max-min-08-04-2022.js) |
| Set | JavaScript | Using Set in JS object | [Twitter thread](https://twitter.com/TommiEng/status/1512128604724998144) and [Raw code](/snippets/js-set-07-04-2022.js) |
| Merging arrays | JavaScript | Merging arrays with the spread operator | [Twitter post](https://twitter.com/TommiEng/status/1511751479123755011) and [Raw code](/snippets/js-merge-arrays-06-04-2022.js) |
| Remove duplicates | JavaScript | How to remove duplicates inside your array. | [Twitter post](https://twitter.com/TommiEng/status/1511401927053041669) and [Raw code](/snippets/js-remove-duplicates-array-05-04-2022.js) |
| Ternary | JavaScript | Using the ternary operator in JS. | [Twitter post](https://twitter.com/TommiEng/status/1511035681254084611) and [Raw code](/snippets/js-ternary-04-04-2022.js) |
| Destructuring objects | JavaScript | Destructuring objects in JS | [Twitter thread](https://twitter.com/TommiEng/status/1509953546489266181) and [Raw code](/snippets/js-destructuring-objects-01-04-2022.js) |
| Transgender flag 🏳️⚧️ | CSS | Styles for the transgender flag | [Twitter post](https://twitter.com/TommiEng/status/1509574918261858304) and [Raw code](/snippets/css-trans-flag-31-03-2022.css) |
| Array destructuring | JavaScript | Destructuring with arrays | [Twitter post](https://twitter.com/TommiEng/status/1509236791890620428) and [Raw code](/snippets/js-array-destructuring-30-03-2022.js) |
| `Object.entries` | JavaScript | The `Object.entries` returns an array of arrays with a key and a value. | [Twitter post](https://twitter.com/TommiEng/status/1508850518629789702) and [Raw code](/snippets/js-object-entries-29-03-2022.js) |
| Reverse a string | JavaScript | How to reverse a string with comments to the code snippet on each individual step to help break it down. | [Twitter post](https://twitter.com/TommiEng/status/1508474498470846468) and [Raw code](/snippets/js-reverse-string-28-03-2022.js) |
| `Object.values` | JavaScript | How the `Object.values` method returns an array of your object's properties. | [Twitter post](https://twitter.com/TommiEng/status/1507764397678206983) and [Raw code](/snippets/js-object-values-26-03-2022.js) |
| `Object.keys` | JavaScript | Use `Object.keys()` to collect all the key names from any object. This can be useful once you obtain the array, because you're then able to loop through it! | [Twitter post](https://twitter.com/TommiEng/status/1507432271351107589) and [Raw code](/snippets/js-object.keys-method-25-03-2022.js) |
| Sorting arrays | JavaScript | Avoid sorting big amounts of data in the frontend. It can be an expensive operation, so it is preferable to be done in the backend. | [Twitter post](https://twitter.com/TommiEng/status/1506660726257205248) and [Raw code](/snippets/js-sorting-arrays-23-03-2022.js) |
| `transform-origin` | CSS | It is used with the `transform` property to change the initial point of your transformation. Give it values such as: `right`, `bottom`, lengths, or percentages. The arguments start with the horizontal position, followed by the vertical position. | [Twitter post](https://twitter.com/TommiEng/status/1506328219812773894) and [Raw code](/snippets/css-transform-origin-property-22-03-2022.css) |
| `aspect-ratio` | CSS | Use the `aspect-ratio` property to keep your boxes' dimensions proportional to each other using a ratio. It accepts a ratio as its argument in width/height form. | [Twitter post](https://twitter.com/TommiEng/status/1505988148060295168) and [Raw code](/snippets/css-aspect-ratio-21-03-2022.css) |
| Falsy values | JavaScript | JavaScript tends to evaluate the type of values to Boolean when working with conditional statements such as `if`...`else`, or loops like `do`...`while`. Here are examples of possible falsy values. | [Twitter post](https://twitter.com/TommiEng/status/1504834490283311107) and [Raw code](/snippets/js-falsy-values-18-03-2022.js) |
| Equality and strict equality operator | JavaScript | The biggest difference between the equality (`==`) and strict equality (`===`) is that the equality operator tries to compare and convert variables that have different types, whereas the strict equality operator does not try to convert types. | [Twitter post](https://twitter.com/TommiEng/status/1504501469906616325) and [Raw code](/snippets/js-equality-operators-17-03-2022.js) |
| Converting a `String` to a `Number` | JavaScript | A brief example on how to convert `String`s to `Number`s using either JavaScript's `Number` constructor, or the `parseInt` function. This can be useful when trying to take a value from the user's input in a form, but you want it as a `Number` instead. | [Twitter post](https://twitter.com/TommiEng/status/1504115938454552582) and [Raw code](/snippets/js-convert-string-to-number-16-03-2022.js) |
| The `typeof` operator | JavaScript | Not having to assign types to variables in JS also means their types might change over time. An useful way of using it is when a variable might be undefined, and you want to catch it in that case. | [Twitter post](https://twitter.com/TommiEng/status/1503750761313968147) and [Raw code](/snippets/js-typeof-operator-15-03-2022.js) |
| `clamp()` | CSS | The `clamp` function will clamp your element's value between your given minimum value, maximum value, based on your ideal value. This function is useful when working with fluid typography, aka when you want your font-size to reflect the screen size. | [Twitter post](https://twitter.com/TommiEng/status/1503418174376759300) and [Raw code](/snippets/css-clamp-function-14-03-2022.css) |
| `min()` and `max()` | CSS | Think of the `min()` as a function that returns the maximum value that your element's property can have, and vice-versa for the `max()` function. | [Twitter post](https://twitter.com/TommiEng/status/1503056222261551107) and [Raw code](/snippets/css-min-max-function-13-03-2022.css) |
| Combining `filter` functions | CSS | Did you know that you can combine CSS `filter` functions together? The possibilities are endless. | [Twitter post](https://twitter.com/TommiEng/status/1502360892813594627) and [Raw code](/snippets/css-combining-filter-functions-11-03-2022.css) |
| `while` vs. `do...while` | JavaScript | Here's a brief example below about the `do...while` vs. `while` loop statements. Cases where you want to prompt a game once is great for a `do...while` statement, because the game will appear at least once, while the user doesn't quit. | [Twitter post](https://twitter.com/TommiEng/status/1501990541180944399) and [Raw code](/snippets/js-do-while-vs-while-loop-10-03-2022.js) |
| `innerText` | JavaScript | Forgot to insert text in your HTML document? Have no fear, JavaScript `HTMLElement.innerText` is here! 🦸♀️ Prioritize using this property instead of the innerHTML property to avoid external cross-site scripting (XSS) attacks on your page. 🛡️ | [Twitter post](https://twitter.com/TommiEng/status/1501664631504449540) and [Raw code](/snippets/js-HTMLElement-innerText-09-03-2022.js) |
| `grayscale()` | CSS | This function will accept a length, or a percentage as its argument, giving you that dark, eerie, and beautiful feel to your now monochrome elements. | [Twitter post](https://twitter.com/TommiEng/status/1501245138458353667) and [Raw code](/snippets/css-filter-grayscale-08-03-2022.css) |
| ` contrast()` | CSS | Bring out the colors on your elements with the CSS `contrast()` function. I like to use it to make the colors on my images more intense, or tone it down by giving it a lower value. This function accepts a number, or a percentage as an argument. | [Twitter post](https://twitter.com/TommiEng/status/1500945089492922380) and [Raw code](/snippets/css-filter-constrast-07-03-2022.css) |
| `blur()` | CSS | Blur the lines on your elements with the CSS `blur()` function. This function will accept a length as its argument. | [Twitter post](https://twitter.com/TommiEng/status/1499814956287631364) and [Raw code](/snippets/css-filter-blur-04-03-2022.css) |
| `brightness()` | CSS | Shed some light on your elements with the CSS `brightness()` function. It takes a number, or a percentage as an argument. That argument is then multiplied by the default value of 1 for your desired light intensity. 💡 | [Twitter post](https://twitter.com/TommiEng/status/1499452518534979588) and [Raw code](/snippets/css-filter-brightness-03-03-2022.css) |
| The `lorem` Emmet abbreviation | HTML | Don't know what to write? This Emmet abbreviation is pretty useful for summoning dummy text. Simply start typing "lorem", and add a number to specify the number of words you want in your paragraph. 📜 | [Twitter post](https://twitter.com/TommiEng/status/1499034725754806288) and [Raw code](/snippets/html-lorem-emmet-02-03-2022.html) |
| The `HTML` template Emmet shortcut | HTML | I recently learned a new fun Emmet shortcut to quickly generate a HTML template using only the exclamation point (`!`) symbol ❗️ | [Twitter post](https://twitter.com/TommiEng/status/1498699503892840452) and [Raw code](/snippets/html-template-emmet-01-03-2022.html) |
| The `HTML` markup Emmet shortcut | HTML | It is possible to use Emmet abbreviations to generate your markup quickly. They are similar to CSS selectors. In the related code snippet, you can see how to generate markup quickly and avoid repetition. | [Twitter post](https://twitter.com/TommiEng/status/1498377857650892805) and [Raw code](/snippets/html-generate-markup-with-emmet-28-02-2022.html) |
| The `Date` constructor | JavaScript | Use the new Date() constructor to get back a `Date` object, like in the example below. 📅 | [Twitter post](https://twitter.com/TommiEng/status/1496872381092147210) and [Raw code](/snippets/js-the-date-constructor-24-02-2022.js) |
| transform: `skew` | CSS | The `skew()` function is used to distort elements, taking degrees as its arguments for the its x-axis and y-axis. Elements with class `.nachos` will skew 10% of a turn on the x-axis, while `.pierogi` will skew 10 degrees on the x-axis and 20 degrees on the y-axis. | [Official post](https://twitter.com/TommiEng/status/1496557133709643776), [sketch](https://twitter.com/khanhtncva/status/1496804656894574599), and [raw code](/snippets/css-transform-skew-23-02-2022.css) |
| transform: `rotate` | CSS | Use the `rotate()` function to tilt around your elements. It accepts an angle in degrees as its argument. In the related code snippet, elements with the `.bunny` class will rotate 90 degrees to the right. | [Official post](https://twitter.com/TommiEng/status/1495800030233567238), [sketch](https://twitter.com/TommiEng/status/1495826857148698627), and [raw code](/snippets/css-transform-rotate-21-02-2022.css) |
| transform: `translate` | CSS | Use the `translate()` function to position your elements. It accepts x, y lengths as its values. In the related code snippet, the `div` tag will move 100% of its width to the right 👉. The `p` tag will move 10px to the right 👉, and 20px downwards 👇. | [Official post](https://twitter.com/TommieNg/status/1495096689643991043), and [raw code](/snippets/css-transform-translate-19-02-2022.css) |
| Spread syntax `...` | JavaScript | Spreading `...` can be useful in JS when you need to copy objects' properties or elements within an array. Use it to dynamically create your objects and arrays. | [Official post](https://twitter.com/TommieNg/status/1577376539552923665), and [raw code](/snippets/js-spread-syntax-04-10-2022.js) |
| Rest parameters | JavaScript | You don't know how many arguments your function will need? Try the rest params syntax! If you recall the post on the spread syntax, you might notice they look similar. Funny thing is, they're actually opposites! The rest parameter syntax is a way to catch any remaining variables we didn't account for. It's useful to think of it as they are unlimited amounts of arguments to a function. The way to indicate that is with the `...` notation. | [Official post](https://twitter.com/TommieNg/status/1578440685576781825), and [raw code](/snippets/js-rest-parameters-07-10-2022.js) |
---
## Getting Started
Fork or clone the repository.
---
## Local Commands
In this current section, you can find the command to run the code snippet in your machine:
```sh
$ node
```
---
## Contributing
1. Fork it
2. Create your feature branch with specs (`git checkout -b my-cute-feature`).
3. Commit your changes (`git commit -m 'Added my cute feature'`).
4. Push to the branch (`git push origin my-cute-feature`).
5. Create your new pull request.
---
## Contributors
---
# **Have a question or suggestion?**
Contact me on [Twitter](https://twitter.com/TommiEng), send an email to [email protected], or create a pull request on this project.
---
