├── .gitignore ├── _CSS ├── smooth-scroll-margin │ ├── README.md │ ├── smooth-scroll-margin.css │ ├── core.css │ └── index.html ├── image-zoom │ ├── images │ │ ├── readme.png │ │ ├── image-01.webp │ │ ├── image-02.webp │ │ └── image-03.webp │ ├── index.html │ ├── README.md │ └── style.css ├── button-effect │ ├── images │ │ ├── readme.webp │ │ ├── image-021.webp │ │ ├── image-022.webp │ │ └── image-023.webp │ ├── README.md │ ├── index.html │ └── style.css ├── text-gradient │ ├── images │ │ └── readme.webp │ ├── index.html │ ├── README.md │ └── style.css ├── background-blend │ ├── images │ │ └── readme.webp │ ├── index.html │ ├── README.md │ └── style.css └── modal-backdrop-filter │ ├── images │ └── readme.webp │ ├── styles.css │ └── README.md ├── _GCP ├── error-forbidden.pdf └── create-and-deploy-api.md ├── images ├── wakatime-email.webp └── wakatime-dashboard.webp ├── _Express └── redirect-mozarts-ghost │ ├── images │ └── readme.webp │ ├── Index.js │ ├── README.md │ └── src │ └── getRedirect │ └── index.js ├── .vscode └── settings.json ├── _VSC ├── keyboard-shortcuts.md ├── config.md └── customize-workspace-theme-color.md ├── _TailWind └── README.md ├── _GH ├── readme-enhancer.md ├── create-repo-via-cli.md └── waka-time.md ├── fun-facts.md ├── _CLI └── colorful-git-branch-terminal-prompt.md ├── README.md └── _HTML └── seo-meta-favicon.md /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules -------------------------------------------------------------------------------- /_CSS/smooth-scroll-margin/README.md: -------------------------------------------------------------------------------- 1 | # Smooth Scroll and Scroll Margin -------------------------------------------------------------------------------- /_GCP/error-forbidden.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsohndata/docs-build-recipes/HEAD/_GCP/error-forbidden.pdf -------------------------------------------------------------------------------- /images/wakatime-email.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsohndata/docs-build-recipes/HEAD/images/wakatime-email.webp -------------------------------------------------------------------------------- /images/wakatime-dashboard.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsohndata/docs-build-recipes/HEAD/images/wakatime-dashboard.webp -------------------------------------------------------------------------------- /_CSS/image-zoom/images/readme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsohndata/docs-build-recipes/HEAD/_CSS/image-zoom/images/readme.png -------------------------------------------------------------------------------- /_CSS/button-effect/images/readme.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsohndata/docs-build-recipes/HEAD/_CSS/button-effect/images/readme.webp -------------------------------------------------------------------------------- /_CSS/image-zoom/images/image-01.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsohndata/docs-build-recipes/HEAD/_CSS/image-zoom/images/image-01.webp -------------------------------------------------------------------------------- /_CSS/image-zoom/images/image-02.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsohndata/docs-build-recipes/HEAD/_CSS/image-zoom/images/image-02.webp -------------------------------------------------------------------------------- /_CSS/image-zoom/images/image-03.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsohndata/docs-build-recipes/HEAD/_CSS/image-zoom/images/image-03.webp -------------------------------------------------------------------------------- /_CSS/text-gradient/images/readme.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsohndata/docs-build-recipes/HEAD/_CSS/text-gradient/images/readme.webp -------------------------------------------------------------------------------- /_CSS/background-blend/images/readme.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsohndata/docs-build-recipes/HEAD/_CSS/background-blend/images/readme.webp -------------------------------------------------------------------------------- /_CSS/button-effect/images/image-021.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsohndata/docs-build-recipes/HEAD/_CSS/button-effect/images/image-021.webp -------------------------------------------------------------------------------- /_CSS/button-effect/images/image-022.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsohndata/docs-build-recipes/HEAD/_CSS/button-effect/images/image-022.webp -------------------------------------------------------------------------------- /_CSS/button-effect/images/image-023.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsohndata/docs-build-recipes/HEAD/_CSS/button-effect/images/image-023.webp -------------------------------------------------------------------------------- /_CSS/smooth-scroll-margin/smooth-scroll-margin.css: -------------------------------------------------------------------------------- 1 | html { 2 | scroll-behavior: smooth; 3 | } 4 | 5 | section { 6 | scroll-margin-top: 90px; 7 | } -------------------------------------------------------------------------------- /_CSS/modal-backdrop-filter/images/readme.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsohndata/docs-build-recipes/HEAD/_CSS/modal-backdrop-filter/images/readme.webp -------------------------------------------------------------------------------- /_Express/redirect-mozarts-ghost/images/readme.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jsohndata/docs-build-recipes/HEAD/_Express/redirect-mozarts-ghost/images/readme.webp -------------------------------------------------------------------------------- /_CSS/modal-backdrop-filter/styles.css: -------------------------------------------------------------------------------- 1 | /* CSS Needed 2 | ************************************* */ 3 | 4 | 5 | /* Ignore For Setup 6 | ************************************* */ -------------------------------------------------------------------------------- /_CSS/text-gradient/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |

The journey of a thousand miles begins with a single step. ― 老子 (Lao Tzu)

-------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "workbench.colorCustomizations": { 3 | "terminal.background": "#24253a", 4 | "activityBar.background": "#032A6A", 5 | "titleBar.activeBackground": "#043A95", 6 | "titleBar.activeForeground": "#FAFCFF" 7 | }, 8 | "liveServer.settings.port": 5501 9 | } -------------------------------------------------------------------------------- /_VSC/keyboard-shortcuts.md: -------------------------------------------------------------------------------- 1 | # VSC: Visual Studio Code - Keyboard Shortcuts 2 | 3 | ## Primary Side Bar 4 | > Command(⌘) + B 5 | 6 | ## Panel (aka: call Jarvis) 7 | > Command(⌘) + J 8 | 9 | ## Open a document to its own window 10 | > press Command(⌘) + K , then O (without holding Command(⌘) ) -------------------------------------------------------------------------------- /_CSS/background-blend/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 |
6 |

The future depends on what you do today.

7 |

Mahatma Gandhi

8 |
9 |
-------------------------------------------------------------------------------- /_TailWind/README.md: -------------------------------------------------------------------------------- 1 | ## TailWind Component 2 | * [hyperui.dev](https://www.hyperui.dev/) 3 | * [tailwind-kit.com](https://www.tailwind-kit.com/) 4 | * [tailblocks.cc](https://tailblocks.cc/) 5 | 6 |
7 | 8 | ## Videos 9 | Container, Row, Col 10 | [Recreate Bootstrap Grid System in Tailwind CSS](https://youtu.be/L_R2gP4fBhw) -------------------------------------------------------------------------------- /_GH/readme-enhancer.md: -------------------------------------------------------------------------------- 1 | # ReadMe.md Enhancer 2 | 3 | * [streak-stats.demolab.com](https://streak-stats.demolab.com/demo/) 4 | * [wakatime.com](https://wakatime.com/) 5 | * [github.com/anuraghazra/github-readme-stats](https://github.com/anuraghazra/github-readme-stats) 6 | * [profile-readme-generator.com](https://profile-readme-generator.com/) 7 | * [gprm.itsvg.in](https://gprm.itsvg.in/) -------------------------------------------------------------------------------- /_CSS/text-gradient/README.md: -------------------------------------------------------------------------------- 1 | # CSS: Text Gradient 2 | [![screenshot](./images/readme.webp)](https://codepen.io/jsohndata/pen/wvyxoYd) 3 | 4 |
5 | 6 | ## Site 7 | * 👉 [CodePen.io](https://codepen.io/jsohndata/pen/wvyxoYdZ) 8 | 9 |
10 | 11 | ## Resource 12 | * [fossheim.io](https://fossheim.io/writing/posts/css-text-gradient/) 13 | * [cssgradient.io](https://cssgradient.io/blog/css-gradient-text/)` -------------------------------------------------------------------------------- /_Express/redirect-mozarts-ghost/Index.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import cors from "cors"; 3 | import { getRedirect } from "./src/getRedirect/index.js"; 4 | 5 | const app = express(); 6 | app.use (express.json()); 7 | app.use(cors()); 8 | const PORT = 3000; 9 | 10 | app.get("/redirect/:id", getRedirect); 11 | 12 | app.listen(3000, () => { 13 | console.log(`Server running on port ${PORT}`); 14 | } ); -------------------------------------------------------------------------------- /_VSC/config.md: -------------------------------------------------------------------------------- 1 | # VSC: Visual Studio Code - Config 2 | 3 | ## Go to Settings 4 | > Command(⌘) + , 5 | 6 |
7 | 8 | ## Compact Folder 9 | `settings > compact folder` 10 | 11 |
12 | 13 | ## Tab Size 14 | `setting > tab size => 2` 15 | 16 |
17 | 18 | ## Extension 19 | * Window Color 20 | * HTML CSS Supoort 21 | * Live Server 22 | * Prettier 23 | * GitLens 24 | * ESLint 25 | * + Community Material Theme 26 | -------------------------------------------------------------------------------- /_CSS/button-effect/README.md: -------------------------------------------------------------------------------- 1 | # CSS: Button Effect 2 | [![readme](./images/readme.webp)](https://codepen.io/jsohndata/pen/QWZzpOo) 3 | 4 | Give it a go and experience a simple CSS hover effect that allows you to scale an image or any other element, like a button, effortlessly. 5 | 6 |
7 | 8 | # Site 9 | * 👉 [CodePen](https://codepen.io/jsohndata/pen/QWZzpOo) 10 | * 👉 [Live Sample: jsohndata.com](https://jsohndata.com/) 11 | -------------------------------------------------------------------------------- /_CSS/image-zoom/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
6 |
7 | 8 |
9 | 10 |
11 | 12 |
13 | 14 |
15 | 16 |
17 |
18 | -------------------------------------------------------------------------------- /_CSS/background-blend/README.md: -------------------------------------------------------------------------------- 1 | # CSS: Background Blend Mode 2 | [![screen shot](./images/readme.webp)](https://codepen.io/jsohndata/pen/dygwvEd) 3 | 4 | Discover the simplicity of adjusting your background's image quality effortlessly by utilizing the `background-blend-mode`. 5 | 6 |
7 | 8 | ## Site 9 | * 👉 [CodePen](https://codepen.io/jsohndata/pen/dygwvEd) 10 | 11 |
12 | 13 | ## Note: 14 | Edge prior 79 do not support the `background-blend-mode` property. 15 | -------------------------------------------------------------------------------- /_CSS/image-zoom/README.md: -------------------------------------------------------------------------------- 1 | # CSS: Image Zoom 2 | [![readme](./images/readme.png)](https://codepen.io/jsohndata/pen/oNaQRQV) 3 | A simply elegant CSS technique for gracefully zooming images using the "transform" and "overflow hidden" properties. 4 | 5 |
6 | 7 | # Site 8 | * 👉 [CodePen](https://codepen.io/jsohndata/pen/oNaQRQV) 9 | * 👉 [Live Sample: jsohndata.com](https://jsohndata.com/) 10 | * 👉 [Live Sample: synthational](https://jsohndata.github.io/synthational/) 11 | -------------------------------------------------------------------------------- /_CSS/text-gradient/style.css: -------------------------------------------------------------------------------- 1 | /* CSS Needed 2 | ************************************* */ 3 | h1 { 4 | background-image: linear-gradient(72deg, #ed2af1, #e0c705); 5 | background-clip: text; 6 | -webkit-text-fill-color: transparent; 7 | -webkit-background-clip: text; 8 | -moz-background-clip: text; 9 | -moz-text-fill-color: transparent; 10 | } 11 | 12 | 13 | 14 | 15 | 16 | /* Ignore For Setup 17 | ************************************* */ 18 | h1 { 19 | font-family: sans-serif; 20 | font-size: 4rem; 21 | font-weight: 800; 22 | } -------------------------------------------------------------------------------- /_CSS/button-effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 9 | 10 |
-------------------------------------------------------------------------------- /_CSS/smooth-scroll-margin/core.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --padding: 20px; 3 | --margin-bottom: 10px; 4 | --height: 90px; 5 | } 6 | 7 | 8 | section, 9 | footer { 10 | padding: var(--padding); 11 | margin-bottom: var(--margin-bottom); 12 | } 13 | 14 | nav { 15 | background-color: pink; 16 | position: sticky; 17 | top: 0; 18 | height: var(--height); 19 | margin-bottom: var(--margin-bottom); 20 | } 21 | 22 | section { 23 | background-color: greenyellow; 24 | } 25 | 26 | footer { 27 | background-color: #131313; 28 | color: #f4f5f6; 29 | text-align: center; 30 | } -------------------------------------------------------------------------------- /fun-facts.md: -------------------------------------------------------------------------------- 1 | # Fun Facts 2 | 3 | ## Bug 4 | The term `bug` in programming is commonly used to refer to an error in a program that produces an incorrect or unexpected results. 5 | 6 | The first recorded instances of the use of the term "bug" to refer to a technical problem occurred in 1947, when a moth was found inside a relay of the Harvard Mark II computer. The engineers working on the computer famously "debugged" the system by removing the moth from the relay, and the term "bug" has been used in computing ever since. 7 | 8 | [Article: National Geo - Wrolds First Computer Bug](https://education.nationalgeographic.org/resource/worlds-first-computer-bug/) -------------------------------------------------------------------------------- /_GH/create-repo-via-cli.md: -------------------------------------------------------------------------------- 1 | # Git: Create and Push to a Repo to GitHub via Terminal 2 | 3 | Prereq: Have gh installed 4 | ``` 5 | npm install -g gh 6 | ``` 7 | 8 |
9 | 10 | ## Flags 11 | * --source=. :The current directory 12 | * --public: Make the repo public 13 | * --push: Push it to GitHub 14 | 15 |
16 | 17 | ## For Single GitHub owner 18 | Create a repo using the currently directory name, make the repo public, then push it 19 | ``` 20 | gh repo create --source=. --public --push 21 | ``` 22 | 23 |
24 | 25 | ## For Multiple GitHub owners with Custom Repo Name 26 | Create a repo under the owner GIT_USER_NAME, title of the repo will be REPO_NAME_OF_CHOICE, make it puiblic, then push it 27 | ``` 28 | gh repo create GIT_USER_NAME/REPO_NAME_OF_CHOICE --source=. --public --push 29 | ``` -------------------------------------------------------------------------------- /_Express/redirect-mozarts-ghost/README.md: -------------------------------------------------------------------------------- 1 | # Express: Redirect (Mozart's Ghost) 2 | [![readme](./images/readme.webp)](https://notiempo.lol/mozartsghost/0) 3 | This is a straightforward script that redirects users based on a parameter ID. If the parameter ID matches an index in the array, it will proceed with the matching process and redirect the user. If the parameter ID matches the letter "r", the code will trigger a randomization process. Any invalid parameters will redirect the users to the hottest band on the internet [Mozart's Ghost](https://www.youtube.com/watch?v=hoWEYBSlctc). 4 | 5 |
6 | 7 | ## Site 8 | * 👉 [Valid URL: notiempo.lol/mozartsghost/5](https://notiempo.lol/mozartsghost/5) 9 | * 👉 [InValid: notiempo.lol/mozartsghost/100](https://notiempo.lol/mozartsghost/1000) 10 | * 👉 [Random: notiempo.lol/mozartsghost/r](https://notiempo.lol/mozartsghost/r) 11 | 12 | -------------------------------------------------------------------------------- /_CSS/background-blend/style.css: -------------------------------------------------------------------------------- 1 | /* CSS Needed 2 | ************************************* */ 3 | .main-container { 4 | width: 100%; 5 | height: 100vh; 6 | background-image: url("https://jsohndata.s3.amazonaws.com/images/codepen/bg-01.webp"); 7 | background-repeat: no-repeat; 8 | background-position: center; 9 | background-size: cover; 10 | background-attachment: fixed; 11 | 12 | background-color: rgba(0, 0, 0, 0.583); 13 | background-blend-mode: color; 14 | } 15 | 16 | 17 | 18 | 19 | 20 | 21 | /* Ignore For Setup 22 | ************************************* */ 23 | body { margin: 0; padding: 0; } 24 | 25 | .content { 26 | width: 55%; 27 | margin: 0 auto; 28 | position: relative; 29 | top: 10rem; 30 | } 31 | 32 | h1,p { 33 | font-family: "Arial"; 34 | color: #ffffff; 35 | margin-bottom: 0 36 | } 37 | 38 | h1 { 39 | font-size: 4.5rem; 40 | } 41 | 42 | p { 43 | text-align: end; 44 | font-size: 1.7rem; 45 | } 46 | 47 | -------------------------------------------------------------------------------- /_VSC/customize-workspace-theme-color.md: -------------------------------------------------------------------------------- 1 | # VSC: Visual Studio Code - Workspace Color Setting 2 | 1. Create a directory called `.vscode`. 3 | 2. In that directory create a file called `settings.json`. 4 | 3. Add the info below and adjust the colors. 5 | 6 | ``` 7 | { 8 | "workbench.colorCustomizations": { 9 | "activityBar.background": "#3d4802", 10 | "titleBar.activeBackground": "#334821", 11 | "titleBar.activeForeground": "#f7f4f7", 12 | 13 | "foreground": "#00ff00", 14 | "sideBar.background": "#022b47", 15 | "sideBar.foreground": "#8aeb22", 16 | "sideBarTitle.foreground": "#00ff3c", 17 | "editor.background": "#272c2c", 18 | 19 | "panel.background": "#241f1f", 20 | "panel.border": "#104022", 21 | "terminal.background": "#181a1b" 22 | } 23 | } 24 | ``` 25 | 26 |
27 | 28 | ## Links 29 | * [More detail info VSC Theme Color](https://code.visualstudio.com/api/references/theme-color) 30 | * [VSC Extension: Window Colors](https://marketplace.visualstudio.com/items?itemName=stuart.unique-window-colors) -------------------------------------------------------------------------------- /_CSS/button-effect/style.css: -------------------------------------------------------------------------------- 1 | /* CSS Needed 2 | ************************************* */ 3 | .button-effect { 4 | cursor: pointer; 5 | transform: scale(1.0); 6 | transition: transform 0.23s ease-in-out; 7 | } 8 | 9 | .button-effect:hover { 10 | transform: scale(1.13); 11 | filter: drop-shadow(0 0 10px rgb(0, 0, 0)); 12 | } 13 | 14 | /* Disable hover effects on mobile */ 15 | @media (max-width: 768px) { 16 | .button-effect:hover 17 | { 18 | transform: scale(1.0); 19 | filter: none; 20 | } 21 | } 22 | 23 | 24 | 25 | 26 | /* Ignore For Setup 27 | ************************************* */ 28 | body { 29 | background-image: radial-gradient( circle farthest-corner at 32.7% 82.7%, rgba(173,0,171,1) 8.3%, rgba(15,51,92,1) 79.4% ); 30 | font-family: 'Open Sans', sans-serif; 31 | font-size: 16px; 32 | line-height: 1.5; 33 | color: #333; 34 | } 35 | 36 | .image-container { 37 | display: flex; 38 | justify-content: center; 39 | flex-direction: row; 40 | margin-top: 10%; 41 | } 42 | 43 | .image-container img { 44 | width: 90%; 45 | } 46 | 47 | @media screen and (max-width: 768px) { 48 | .image-container { 49 | flex-direction: column; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /_CLI/colorful-git-branch-terminal-prompt.md: -------------------------------------------------------------------------------- 1 | # Colorful Git Branch Terminal Prompt (OS X Monterey) 2 | 3 | ![Demo of color theme](https://jsohndata.s3.amazonaws.com/images/github-readme/git-branch-colorful-135-14-162.png) 4 | ``` 5 | function parse_git_branch() { 6 | git branch 2> /dev/null | sed -n -e 's/^\* \(.*\)/[\1]/p' 7 | } 8 | 9 | COLOR_PATH=$'%F{49}' 10 | COLOR_GIT=$'%F{202}' 11 | COLOR_SEPARTOR=$'%F{10}' 12 | 13 | setopt PROMPT_SUBST 14 | export PROMPT='${COLOR_PATH}%~%f ${COLOR_GIT}$(parse_git_branch)%f${COLOR_SEPARATOR}:%f' 15 | ``` 16 | ## Inspiration 17 | Saw [@neiloler's Gist](https://gist.github.com/doubleknd26/c4fcd2e65c3397947248878065b644ed) and decided to tweak it a bit. Thank you @neiloler. :) 18 | 19 |
20 | 21 | ## Let's Go 22 | Copy paste the code in your .zshrc. ] 23 |
24 | Located at `~/.zshrc` 25 | 26 |
27 | 28 | ## Your Color 29 | Change the digits in the variables `%F{49}`. 30 |
31 | I found this [color table](https://user-images.githubusercontent.com/995050/47952855-ecb12480-df75-11e8-89d4-ac26c50e80b9.png) to be very useful by [@fnky](https://gist.github.com/fnky/458719343aabd01cfb17a3a4f7296797#ansi-escape-sequences). 32 | 33 |
34 | 35 | ## Sample Theme 36 | ### 141, 190, 31 ![Sample theme](https://jsohndata.s3.amazonaws.com/images/github-readme/git-branch-colorful-141-190-31.png) 37 | 38 | ### 49, 202, 10 ![Sample theme](https://jsohndata.s3.amazonaws.com/images/github-readme/git-branch-colorful-49-202-10.png) -------------------------------------------------------------------------------- /_Express/redirect-mozarts-ghost/src/getRedirect/index.js: -------------------------------------------------------------------------------- 1 | const links = [ 2 | /* 00 */ "https://www.youtube.com/watch?v=hoWEYBSlctc", // mozart's ghost 3 | /* 01 */ "https://www.youtube.com/watch?v=9E6b3swbnWg", // random 4 | 5 | /* 02 */ "https://assenfuego.com/", 6 | /* 03 */ "https://jsohndata.github.io/bluenight-in-seoul/", 7 | /* 04 */ "https://jsohndata.github.io/kardashev-scale/", 8 | /* 05 */ "https://jsohndata.github.io/bubble-trails/", 9 | /* 06 */ "https://system-overload-solution.web.app/", 10 | /* 07 */ "https://jsohndata.github.io/magic-color-xxl/", 11 | /* 08 */ "https://jsohndata.github.io/cogito-ergo-sum/", 12 | /* 09 */ "https://jsohndata.com", 13 | /* 10 */ "https://jsohndata.github.io/synthational/" 14 | ]; 15 | 16 | export function getRedirect(req, res) { 17 | const id = req.params.id; 18 | 19 | console.log("TO", typeof id); 20 | 21 | // Check for the valiity of the id 22 | const isValidId = id => id >= 0; 23 | 24 | let redirectLink; 25 | 26 | switch (id) { 27 | case "r": 28 | redirectLink = links[Math.floor(Math.random() * links.length)]; 29 | break; 30 | 31 | default: 32 | isValidId(id) 33 | // if id equals end of the array, redirect to the first link--in this case 2. 34 | ? id == links.length 35 | ? redirectLink = links[2] 36 | : redirectLink = links[id] 37 | : redirectLink = links[0]; 38 | break; 39 | } 40 | 41 | // Redirect to the link 42 | res.status(200).redirect(redirectLink); 43 | } -------------------------------------------------------------------------------- /_GH/waka-time.md: -------------------------------------------------------------------------------- 1 | # How to get Wakatime to your GitHub 2 | 3 | ## What is WakaTime? 4 | It is a personal analytics service for programmers that shows you how you spend your time and helps you be more productive. 5 | 6 |
7 | 8 | ## How to Install 9 | 1. Signup at [wakatime.com](wakatime) 10 | 11 | 2. Fill out profile info [wakatime.com/settings/profile](https://wakatime.com/settings/profile) 12 | - Display photo publicly ✅ 13 | - Total code time badge ✅ 14 | - Display code time publicly ✅ -> Set to "All Time" 15 | - Display langauges, editors, categories, publicily ✅ 16 | 17 | 3. Verify your email address with Wakatime. 18 | 19 | 4. Link Wakatime to your VSC [wakatime.com/vs-code](https://wakatime.com/vs-code) 20 | 21 | 5. In your readme add the following code. 22 | `INSERT-YOUR-GH-USERNAME` => Enter your Github 23 | ``` 24 | languages graph 25 | ``` 26 | 27 | 6. Wait about an hour for the widget to show on your readme. Give it 24 hour to populate with data. 28 | 29 |
30 | 31 | ## Sample of WakaTime 32 | 33 | ### Widget on Readme 34 | languages graph 35 | 36 |
37 | 38 | ### Wakatime Dashboard (at wakatime.com) 39 | ![dashboard](../images/wakatime-dashboard.webp) 40 | 41 |
42 | 43 | ### Wakatime Email 44 | ![email](../images/wakatime-email.webp) 45 | -------------------------------------------------------------------------------- /_CSS/image-zoom/style.css: -------------------------------------------------------------------------------- 1 | /* CSS Needed 2 | ************************************* */ 3 | figure { 4 | /* hide the overflow of the scaled image */ 5 | overflow: hidden; 6 | border: 5px solid #fff; 7 | transition: all 0.9s ease-in-out; 8 | } 9 | 10 | figure:hover { 11 | transition: all 0.9s ease-in-out; 12 | border: 5px solid #cf4bf0; 13 | } 14 | 15 | figure img { 16 | transform: scale(1.0); 17 | /* Add a smooth transition. Also this is for when the user hovers out */ 18 | transition: all 0.9s ease-in-out; 19 | } 20 | 21 | figure img:hover { 22 | transform: scale(1.6); 23 | transition: all 0.5s ease-in-out; 24 | box-shadow: 0 0 10px rgba(23, 1, 1, 0.831); 25 | } 26 | 27 | /* Disable hover effects on mobile */ 28 | @media screen and (max-width: 768px) { 29 | .image-container figure img:hover { 30 | transform: scale(1.0); 31 | } 32 | } 33 | 34 | 35 | 36 | 37 | 38 | 39 | /* Ignore For Setup 40 | ************************************* */ 41 | body { 42 | background: rgb(224,69,137); 43 | background: linear-gradient(184deg, rgba(224,69,137,1) 0%, rgba(237,134,179,1) 11%, rgba(148,187,233,1) 52%); 44 | font-family: 'Open Sans', sans-serif; 45 | font-size: 16px; 46 | line-height: 1.5; 47 | color: #333; 48 | } 49 | 50 | .image-container { 51 | display: flex; 52 | justify-content: center; 53 | flex-direction: row; 54 | margin-top: 10%; 55 | } 56 | 57 | .image-container img { 58 | width: 100%; 59 | } 60 | 61 | @media screen and (max-width: 768px) { 62 | .image-container { 63 | flex-direction: column; 64 | } 65 | } 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /_CSS/modal-backdrop-filter/README.md: -------------------------------------------------------------------------------- 1 | ## Backdrop-Filter 2 | [![Read Me](./images/readme.webp)](https://jsohndata.github.io/synthational/) 3 | This applies a filter to the area behind an element, which is also known as the `backdrop`. It can be used to create various visual effects such as blurring, color shifting, and saturation. 4 | 5 | The `backdrop-filter` property is currently supported by most modern web browsers (Chrome, Firefox, Safari, and Edge). It is important to note that it can be resource-intensive and may affect the performance of your website if overused or applied to large areas. 6 | 7 | ``` 8 | // MODAL 9 | 14 | {id} 18 | 19 | 20 | // CSS 21 | .backdrop-effect { 22 | background-color: rgba(0, 0, 0, 0.4); 23 | backdrop-filter: brightness(100px); 24 | -webkit-backdrop-filter: brightness(100px); 25 | backdrop-filter: blur(3px); 26 | -webkit-backdrop-filter: blur(3px); 27 | } 28 | ```` 29 | 30 |
31 | 32 | ## Additional Filters 33 | ``` 34 | backdrop-filter: blur(2px); 35 | backdrop-filter: brightness(60%); 36 | backdrop-filter: contrast(40%); 37 | backdrop-filter: drop-shadow(4px 4px 10px blue); 38 | backdrop-filter: grayscale(30%); 39 | backdrop-filter: hue-rotate(120deg); 40 | backdrop-filter: invert(70%); 41 | backdrop-filter: opacity(20%); 42 | backdrop-filter: sepia(90%); 43 | backdrop-filter: saturate(80%); 44 | ``` 45 | 46 |
47 | 48 | ## Site 49 | * 👉 [jsohndata.github.io/synthational](https://jsohndata.github.io/synthational/) 50 | 51 |
52 | 53 | ## Resource 54 | * [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter) 55 | * [w3schools.com](https://www.w3schools.com/cssref/css3_pr_backdrop-filter.php) 56 | * [redstapler.co](https://redstapler.co/css-backdrop-filter-vs-filter-which-one-to-use/) 57 | -------------------------------------------------------------------------------- /_GCP/create-and-deploy-api.md: -------------------------------------------------------------------------------- 1 | # Note: How to deploy an API on GCP (Google Cloud Platform) 2 | 3 | ## 1.0) Initialize Hosting 4 | 5 | ### 1.1) Run Command 6 | `firebase init hosting` 7 | * Project: Use an existing - Make sure it is set to Blaze Plan. 8 | 9 | Press enter for the following 10 | * public directory: `public` 11 | * rewrite all urls to /index.html: `No` 12 | * automatic builds and deploys with GitHub: `No` 13 | 14 | ### 1.2) Clean up 15 | Remove the following 16 | * public/index.html 17 | * public/404.html` 18 | 19 |
20 |
21 | 22 | ## 2.0) Initialize Functions 23 | >⚠️⚠️ !IMPORTANT: Functions is the API. Functions cannot see outside its own directory. 24 | 25 | ### 2.1) Run command 26 | `firebase init functions` 27 | * Javascript: `Yes` 28 | * ES lint: `No` 29 | * Install dependecnes: `Yes` 30 | 31 |
32 | 33 | ### Main Directory 34 | 35 | #### 2.2-Main) .gitignore 36 | >⚠️⚠️ !IMPORTANT: I have only one in the main directory, delete the one inside fuctions. #DRY 37 | 38 | ``` 39 | functions/node_modules 40 | functions/.env 41 | .DS_Store 42 | ``` 43 | 44 | #### 2.3-Main) firebase.json 45 | Open firebase.json, add code below. 46 | ``` 47 | "rewrites": [{ 48 | "source": "**", 49 | "function": "api" 50 | }], 51 | ``` 52 | 53 | Sample how it would appear on firebase.jsohn 54 | ``` 55 | { 56 | "hosting": { 57 | "public": "public", 58 | "rewrites": [{ 59 | "source": "**", 60 | "function": "api" 61 | }], 62 | "ignore": [ 63 | "firebase.json", 64 | "**/.*", 65 | "**/node_modules/**" 66 | ] 67 | }, 68 | ``` 69 | 70 |
71 | 72 | ### Functions Directory 73 | 74 | ### 2.4-functions) packages.json 75 | 76 | Add the following 77 | 78 | `"type": "module"` 79 | 80 | ### 2.5-functions) Express, Cors and others 81 | Beyond Express and Cors I install `dotenv` and `mongodb` 82 | 83 | `cd functions && npm install express cors dotenv mongodb` 84 | 85 | 86 | ### 2.6-functions) index.js 87 | Top: Replace `require` with the following 88 | `import functions from "firebase-functions"` 89 | 90 | Bottom: Add the following. 91 | `export const api = functions.https.onRequest( app );` 92 | 93 |
94 |
95 | 96 | ### 2.7-functions) CD to main directory 97 | Once all setup is done, CD back to the main directory. 98 | >⚠️⚠️ !IMPORTANT: Perform all git commands from the main directory not functions 99 | 100 |
101 |
102 | 103 | ### Sample Express Code 104 | ``` 105 | import functions from 'firebase-functions'; 106 | import express from 'express'; 107 | import cors from 'cors'; 108 | 109 | const app = express(); 110 | app.use(express.json()); 111 | app.use(cors()); 112 | const rootUri = process.cwd(); 113 | 114 | /* Root and 404 */ 115 | app.get("/", (req,res) => { 116 | res.status(200).send("I am gRoot"); 117 | }); 118 | 119 | app.get("*", (req,res) => { 120 | res.status(404).send("404 Not Found"); 121 | }); 122 | 123 | export const api = functions.https.onRequest(app); 124 | 125 | ``` 126 | 127 |
128 | 129 | ## 3.0) Test and Deploy 130 | Emulate: `firebase emulators:start` 131 | 132 | Deploy: `firebase deploy` 133 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Resource Bookmarks for Software Engineers, Designers, and Developers. 2 | 3 | ## Free API 4 | * [Random User Data](https://randomuser.me/) 5 | * [E-comm related](https://fakestoreapi.com/) 6 | * [Map and navigation](https://mapbox.com) 7 | * [Free audio, images, and video](https://www.shutterstock.com/developers) 8 | * [Search engine](https://serpapi.com/) 9 | 10 |
11 | 12 | ## Favicon 13 | * [Favicon Converter](https://favicon.io/favicon-converter/) 14 | * [Favicon Previewer](https://metatags.io/) 15 | 16 |
17 | 18 | ## React Libraries 19 | * [CSS Animation](https://www.framer.com/motion/introduction/) 20 | 21 |
22 | 23 | ## Patterns / Icons 24 | * [Graphic Pattern](https://www.freepik.com/free-photos-vectors/seamless-pattern) 25 | * [Graphic Pattern 2](https://www.vecteezy.com/png/1209782-square-pattern) 26 | * [Wood Pattern](https://www.pexels.com/search/wood%20texture/) 27 | * [Icon](https://icon-icons.com/) 28 | * [SVG](https://www.svgrepo.com/) 29 | 30 |
31 | 32 | ## Free Stock Photo 33 | * [Free Stock Photo](https://www.pexels.com/) 34 | * [WikiMedia Commons](https://commons.wikimedia.org/wiki/Main_Page) 35 | * [Free Images](https://www.freepik.com/) 36 | 37 |
38 | 39 | ## Browser Extension 40 | * [awesomescreenshot.com](https://www.awesomescreenshot.com/) 41 | * [What The Font](https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en) 42 | 43 |
44 | 45 | ## UX 46 | * [lawsofux.com](https://lawsofux.com/) 47 | 48 |
49 | 50 | ## Font 51 | * [Google Font](https://fonts.google.com/) 52 | 53 |
54 | 55 | ## QR Code 56 | * [QR Code Generator](https://www.qr-code-generator.com/) 57 | 58 |
59 | 60 | ## HTML 61 | * [HTML ASCII Code Reference](https://www.toptal.com/designers/htmlarrows/symbols/) 62 | * [Pi Symbol](https://www.pisymbol.net/#:~:text=Alt%2B960%20Press%20and%20hold,enter%20960%20on%20numeric%20keypad.) 63 | 64 |
65 | 66 | ## CSS / Graphic 67 | * [Background Color Generator](https://cssgradient.io/) 68 | * [Gradient Generator](https://gradients.shecodes.io/) 69 | * [LowPoly Generator](https://cojdev.github.io/lowpoly/) 70 | * [Drop Shadow Generator](https://webcode.tools/generators/css/drop-shadow) 71 | * [Text Shadow Generator](https://html-css-js.com/css/generator/text-shadow/) 72 | * [Background Remove](https://www.erase.bg/) 73 | 74 |
75 | 76 | ## README 77 | * [Read Me Generator](https://rahuldkjain.github.io/gh-profile-readme-generator/) 78 | * [Formating Syntax](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax) 79 | 80 |
81 | 82 | ## Video Production 83 | * [Video Editing](https://app.clipchamp.com/) 84 | * [MP4 to Webp](https://ezgif.com/video-to-webp) 85 | * [Video Compression](https://www.veed.io/tools/video-compressor/mp4-compressor) 86 | 87 |
88 | 89 | ## Converters / Utilitiy Tools 90 | * [Image Converter. eg: jpg -> webp](https://ezgif.com/jpg-to-webp) 91 | * [Aspect Ration Converter](https://andrew.hedges.name/experiments/aspect_ratio/) 92 | * [Google Photo Embed To Site](https://www.publicalbum.org/blog/embedding-google-photos-albums) 93 | 94 | 95 | 96 | ## Lesson 97 | * [Typing for Coder](https://www.speedcoder.net/) 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /_HTML/seo-meta-favicon.md: -------------------------------------------------------------------------------- 1 | # Social Media and Favicon in Head Tag 2 | 3 | ## React.js (/public/index.html) 4 | * Combine prexisiting code such as `favicon`, `view port`, etc 5 | * I put meta realated assets such as favicon in `/meta` for clearn organization purpose. Therefore, I have update my `manifest.json` to match the new URI. 6 | 7 | ``` 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 38 | 39 | 48 | _TITLE 49 | 50 | 51 | 52 |
53 | 63 | 64 | 65 | 66 | 67 | ``` 68 | 69 |
70 | 71 | ## HTML 72 | 73 | ``` 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | a 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | _TITLE 99 | ``` 100 | -------------------------------------------------------------------------------- /_CSS/smooth-scroll-margin/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Smooth Scroll 10 | 11 | 12 | 13 | 14 | 21 | 22 |
23 |

HeadLine 1

24 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

25 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

26 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

27 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

28 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

29 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

30 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

31 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

32 |
33 | 34 | 35 |
36 |

HeadLine 2

37 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

38 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

39 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

40 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

41 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

42 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

43 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

44 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

45 | 46 |
47 |

HeadLine 3

48 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

49 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

50 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

51 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

52 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

53 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

54 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

55 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere placeat amet quos mollitia dolore exercitationem a nesciunt esse autem tempore quia assumenda deserunt, id aperiam expedita dicta adipisci. Possimus, incidunt?

56 | 57 | 60 | 61 | 62 | --------------------------------------------------------------------------------