Merge branch 'develop'

.gitignore

@@ -1,3 +1,5 @@
+_docs/
+
 site/
 .cache/
 .env

docs/dev/ai/gpt.md

@@ -0,0 +1,15 @@
+# Generative Pre-trained Transformer (GPT)
+
+Generative Pre-Trained Transformer (GPT) is a *transformer-based model* that is trained on a large corpus of text data to generate human-like text.
+
+It is a type of Large Language Model (LLM) that can generate text by predicting the next word in a sequence of words.
+
+GPT is a powerful tool for generating text that is coherent and contextually relevant.
+
+## Overview
+
+GPT's architecture is based on the transformer model, which is a type of neural network that is designed to process sequential data.
+
+The concept became popularize primarily through the release of the `GPT-*` models released by `OpenAI` since 2019 (`GPT-2`, `GPT-3`, `GPT-4`).
+
+Some details about GPT:

docs/dev/ai/prompts.md

@@ -0,0 +1 @@
+#

docs/dev/changelog.md

@@ -0,0 +1,9 @@
+# Changelog Tools
+
+- [GitHub Releases](https://docs.github.com/en/github/administering-a-repository/releasing-projects-on-github/about-releases)
+
+- [Headway](https://headwayapp.co/)
+
+- [Git Cliff](https://gitcliff.com/)
+
+- [Keep a Changelog](https://keepachangelog.com/)

docs/dev/frontend/fonts.md

@@ -0,0 +1,5 @@
+# Fonts
+
+Web fonts are vital to branding and user experience. However, the inconsistent rendering of these fonts while they're being fetched from the server can cause unintended shifts in layout.
+
+Luckily, there are solutions to minimize unexpected shifts and enhance the user experience when working with web fonts.

docs/dev/frontend/frontend-tools.md

@@ -0,0 +1,184 @@
+# Frontend Development Tools
+
+## Contents
+
+- [Build Tools](#build-tools)
+- [Package Managers](#package-managers)
+- [Linters](#linters)
+- [Generators](#generators)
+- [React Tools](#react-tools)
+- [Testing Tools](#testing-tools)
+- [Miscellaneous Tools](#miscellaneous-tools)
+
+## Build Tools
+
+- [Webpack](#webpack)
+- [Parcel](#parcel)
+- [Rollup](#rollup)
+
+### Webpack
+
+Webpack is a module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph which maps every module your project needs and generates one or more bundles.
+
+### Parcel
+
+Parcel is a web application bundler, differentiated by its developer experience. It offers blazing fast performance utilizing multicore processing, and requires zero configuration.
+
+### Rollup
+
+Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application. It uses the new standardized format for code modules included in the ES6 revision of JavaScript, instead of previous idiosyncratic solutions such as CommonJS and AMD.
+
+## Package Managers
+
+- [npm](#npm)
+- [Yarn](#yarn)
+- [pnpm](#pnpm)
+
+### npm
+
+npm is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry.
+
+### Yarn
+
+Yarn is a package manager for JavaScript that was created by Facebook. It is a fast, reliable, and secure dependency management tool that uses a lockfile to ensure that the same dependencies are installed on every machine.
+
+### pnpm
+
+pnpm is a fast, disk space efficient package manager that uses hard links and symlinks to save one version of a module only ever once on a disk. It is a drop-in replacement for npm.
+
+## Linters
+
+- [ESLint](#eslint)
+- [Prettier](#prettier)
+- [Stylelint](#stylelint)
+
+### ESLint
+
+ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code. It is highly configurable and can be used to enforce a coding style and coding conventions.
+
+### Prettier
+
+Prettier is an opinionated code formatter that supports many languages and can be integrated into most editors. It enforces a consistent code style across your entire codebase.
+
+### Stylelint
+
+Stylelint is a modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets.
+
+## Generators
+
+- [Create React App](#create-react-app)
+- [Vue CLI](#vue-cli)
+- [Angular CLI](#angular-cli)
+- [Plop](#plop)
+
+### Create React App
+
+Create React App is a tool that sets up a new React project with a single command. It offers a modern build setup with no configuration.
+
+### Plop
+
+Plop is a micro-generator framework that allows you to create new files based on templates. It is useful for generating boilerplate code, such as components, reducers, and sagas.
+
+## React Tools
+
+- [React DevTools](#react-devtools)
+- [React Router](#react-router)
+- [React Query](#react-query)
+- [React Hot Loader](#react-hot-loader)
+- [PropTypes](#proptypes)
+- [Redux DevTools](#redux-devtools)
+- [Redux Toolkit](#redux-toolkit)
+
+### React DevTools
+
+React DevTools is a browser extension that allows you to inspect the React component hierarchy in the Chrome and Firefox Developer Tools.
+
+### React Router
+
+React Router is a collection of navigational components that compose declaratively with your application. It allows you to define routes in your React application and render different components based on the URL.
+
+### React Query
+
+React Query is a library for managing server state in React applications. It provides hooks for fetching, caching, and updating data from a server, and is designed to be easy to use and flexible.
+
+### React Hot Loader
+
+React Hot Loader is a plugin that allows React components to be live reloaded without the loss of state. It is useful for speeding up development and maintaining the state of your application.
+
+### PropTypes
+
+PropTypes is a library that allows you to type-check the props that are passed to your React components. It helps you catch bugs early and document the intended usage of your components.
+
+### Redux DevTools
+
+Redux DevTools is a powerful tool for debugging and inspecting your Redux application. It provides a visual representation of your Redux store and allows you to track state changes over time.
+
+### Redux Toolkit
+
+Redux Toolkit is the official, recommended way to write Redux logic. It provides a set of tools and best practices that simplify the development of Redux applications.
+
+## Testing Tools
+
+- [Jest](#jest)
+- [Cypress](#cypress)
+- [React Testing Library](#react-testing-library)
+
+### Jest
+
+Jest is a JavaScript testing framework that is built on top of Jasmine. It is designed to be easy to set up and use, and provides a rich set of features for testing your JavaScript code.
+
+### Cypress
+
+Cypress is an end-to-end testing framework for web applications. It allows you to write tests that interact with your application in the same way that a user would, and provides a rich set of features for testing your application.
+
+### React Testing Library
+
+React Testing Library is a testing library for React that encourages best practices for testing. It provides a simple and intuitive API for interacting with your React components and asserting that they behave as expected.
+
+## Miscellaneous Tools
+
+- [Babel](#babel)
+- [PostCSS](#postcss)
+- [Storybook](#storybook)
+- [Figma](#figma)
+- [Sketch](#sketch)
+- [dotenv](#dotenv)
+- [Lodash](#lodash)
+- [Moment.js](#momentjs)
+- [Axios](#axios)
+
+### Babel
+
+Babel is a JavaScript compiler that allows you to use the latest JavaScript features without waiting for browser support. It transforms your code into a backwards-compatible version of JavaScript that can run in any browser.
+
+### PostCSS
+
+PostCSS is a tool for transforming CSS with JavaScript plugins. It is used to parse CSS and apply transformations to it, such as autoprefixing, minification, and linting.
+
+### Storybook
+
+Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.
+
+### Figma
+
+Figma is a web-based design tool that allows you to create, collaborate, and share designs with your team. It is used by designers and developers to create user interfaces and prototypes.
+
+### Sketch
+
+Sketch is a design tool for Mac that is used by designers to create user interfaces and prototypes. It is popular among designers for its ease of use and powerful features.
+
+### dotenv
+
+dotenv is a zero-dependency module that loads environment variables from a `.env` file into `process.env`. It is commonly used in Node.js applications to manage configuration settings.
+
+### Lodash
+
+Lodash is a JavaScript utility library that provides a wide range of functions for working with arrays, objects, strings, and other data types. It is widely used in JavaScript applications to simplify common programming tasks.
+
+### Moment.js
+
+Moment.js is a JavaScript library for parsing, validating, manipulating, and formatting dates and times. It is widely used in JavaScript applications to work with dates and times.
+
+### Axios
+
+Axios is a promise-based HTTP client for the browser and Node.js. It provides an easy-to-use API for making HTTP requests and handling responses.

docs/dev/frontend/frontend.md

@@ -0,0 +1,149 @@
+# Frontend Development
+
+## Contents
+
+
+## Overview
+
+The frontend of a web application refers to the part of the application that the user interacts with, otherwise known as the *user-interface, or `UI`*. It is the part of the application that the user sees and interacts with (i.e. the `client`). The frontend is responsible for rendering the user interface and handling user interactions (`UI` and `UX`, respectively). The frontend communicates with the backend of the application to fetch data and perform operations.
+
+Some details about the frontend:
+
+- The frontend is responsible for rendering the user interface (UI) and handling user experience interactions (UX).
+- The frontend communicates with the backend using a REST HTTP API.
+- The frontend is typically built using either the classic or moder web approach:
+  - Classic: `HTML`, `CSS`, and `JavaScript`
+  - Modern: JavaScript Framework such as `React`, `Angular`, `Vue.js`, etc.
+- The frontend is hosted on a web server and served to the client's browser.
+
+## Classic Web Development
+
+Classic web development refers to the traditional approach of building web applications using `HTML`, `CSS`, and `JavaScript`. This approach is still widely used today, especially for simple web applications. The classic web development approach is suitable for small projects or when you need to build a simple web application quickly.
+
+### HTML
+
+`HTML` (HyperText Markup Language) is the standard markup language for creating web pages. It provides the structure and content of a web page. `HTML` elements are used to define the structure of a web page, such as headings, paragraphs, images, links, and more.
+
+Here is an example of an `HTML` document:
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>My Web Page</title>
+</head>
+<body>
+  <h1>Hello, World!</h1>
+  <p>Welcome to my web page.</p>
+</body>
+</html>
+```
+
+### CSS
+
+`CSS` (Cascading Style Sheets) is a style sheet language used to style the appearance of a web page. `CSS` allows you to define the layout, colors, fonts, and other visual aspects of a web page. `CSS` can be applied to `HTML` elements using selectors and properties.
+
+Here is an example of a `CSS` style sheet:
+
+```css
+body {
+  font-family: Arial, sans-serif;
+  background-color: #f0f0f0;
+}
+
+h1 {
+  color: #333;
+}
+
+p {
+  color: #666;
+}
+```
+
+### JavaScript
+
+`JavaScript` is a programming language that is used to add interactivity and dynamic behavior to web pages. `JavaScript` can be used to manipulate `HTML` elements, handle user interactions, and make asynchronous requests to a server. `JavaScript` is commonly used to create interactive web applications.
+
+Here is an example of a `JavaScript` script that displays an alert message:
+
+```javascript
+alert('Hello, World!');
+```
+
+## Modern Web Development
+
+Modern web development refers to the approach of building web applications using JavaScript frameworks and libraries. This approach is popular for building complex and interactive web applications. Modern web development allows developers to build web applications more efficiently and maintainably.
+
+### JavaScript Frameworks
+
+JavaScript frameworks are libraries of pre-written code that provide common functionality for building web applications. JavaScript frameworks help developers build web applications faster by providing reusable components and tools. Some popular JavaScript frameworks include `React`, `Angular`, and `Vue.js`.
+
+Here is an example of a `React` component that displays a greeting message:
+
+```jsx
+import React from 'react';
+
+function Greeting() {
+  return <h1>Hello, World!</h1>;
+}
+
+export default Greeting;
+```
+
+### Single Page Applications
+
+Single Page Applications (SPAs) are web applications that load a single `HTML` page and dynamically update the content as the user interacts with the application. SPAs use `JavaScript` to fetch data from a server and update the page without reloading the entire page. SPAs provide a more responsive and interactive user experience.
+
+Here is an example of a simple SPA using `React`:
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+function App() {
+  return <h1>Hello, World!</h1>;
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));
+```
+
+### Progressive Web Applications
+
+Progressive Web Applications (PWAs) are web applications that provide a native app-like experience to users. PWAs use modern web technologies to provide features such as offline support, push notifications, and home screen installation. PWAs are designed to work on any device and provide a seamless user experience.
+
+Here is an example of a PWA manifest file:
+
+```json
+{
+  "name": "My PWA",
+  "short_name": "My PWA",
+  "start_url": "/",
+  "display": "standalone",
+  "theme_color": "#2196f3",
+  "background_color": "#f5f5f5",
+  "icons": [
+    {
+      "src": "/icon.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ]
+}
+```
+
+## Conclusion
+
+Frontend development is an essential part of building web applications. Whether you choose to use the classic or modern web development approach, the frontend is responsible for rendering the user interface and providing a seamless user experience. By understanding the basics of frontend development, you can create web applications that are visually appealing and interactive.
+
+## Resources
+
+- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web)
+- [W3Schools](https://www.w3schools.com/)
+- [React Documentation](https://reactjs.org/docs/getting-started.html)
+- [Angular Documentation](https://angular.io/docs)
+- [Vue.js Documentation](https://vuejs.org/v2/guide/)
+- [Progressive Web Apps](https://web.dev/progressive-web-apps/)
+- [Single Page Applications](https://en.wikipedia.org/wiki/Single-page_application)
+- [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)
+- [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
+- [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)

docs/dev/frontend/images.md

@@ -0,0 +1,16 @@
+# Images
+
+## Compression
+
+Image compression **reduces the size of an image file without significantly degrading its visual quality**, which is important for fast data transmission and efficient caching. Whether you're viewing a website, sharing a photo over a messaging app, or storing thousands of pictures on a cloud server, image compression plays a critical role.
+
+There are two main types of image compression:
+
+1.  **Lossy compression**: As the name implies, some data is lost while using this approach. To reduce the file size, less crucial data from the original image is removed. When used excessively, it can cause visible artifacts and a notable drop in image quality, yet it typically results in a reduction in storage requirements.
+2.  **Lossless compression**: This technique ensures that once an image is compressed, it can be perfectly decompressed back to its original state without any data loss. This makes it the perfect option to choose *during the encoding process* for images needing to retain visual integrity. Several file types, including PNG and some variations of WebP, use lossless compression.
+
+## Pixel Density and Resolution
+
+Pixel density refers to the **number of pixels present per unit of display area**, typically measured as Pixels Per Inch (PPI).
+
+Resolution is the **total count of pixels in an image's width and height**. Devices with high pixel densities, e.g. Retina displays, may require images with higher resolutions to appear crisp. However, larger resolutions come at the cost of larger file sizes.