uvacoder Uvacoder
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| a { | |
| background-image: linear-gradient( | |
| to right, | |
| var(--black), | |
| var(--black) | |
| ); | |
| background-size: 100% 0.125rem; | |
| background-position: 0 100%; | |
| background-repeat: no-repeat; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html { | |
| background: url(image.jpg) no-repeat center center fixed; | |
| -webkit-background-size: cover; | |
| -moz-background-size: cover; | |
| -o-background-size: cover; | |
| background-size: cover; | |
| } |
Uvacoder
/ flex-rows.css
Created
December 16, 2021 13:10
CSS Flexbox with specified number of boxes in rows
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .flex-container { | |
| display: flex; | |
| flex-wrap: wrap; | |
| --flex-gap: 1.25rem; | |
| gap: var(--flex-gap); | |
| } | |
| .flex-child { | |
| --flex-items-per-row: 3; |
Uvacoder
/ fetch-api.js
Created
December 16, 2021 13:11
JavaScript fetch() API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| async function postData(url = '', data = {}) { | |
| // Default options are marked with * | |
| const response = await fetch(url, { | |
| method: 'POST', // *GET, POST, PUT, DELETE, etc. | |
| mode: 'cors', // no-cors, *cors, same-origin | |
| cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached | |
| credentials: 'same-origin', // include, *same-origin, omit | |
| headers: { | |
| 'Content-Type': 'application/json' | |
| // 'Content-Type': 'application/x-www-form-urlencoded', |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .flex { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <a href="https://domain.tld" target="_blank" rel="noopener noreferrer"> | |
| Link that opens in new tab | |
| </a> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ::-webkit-scrollbar { | |
| width: 0.9375rem; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| border: 0.3125rem solid rgba(0, 0, 0, 0); | |
| background-clip: padding-box; | |
| border-radius: 1000rem; | |
| background-color: var(--black); | |
| } |
Uvacoder
/ darken-background-image.css
Created
December 16, 2021 13:12
Darken background image: https://stackoverflow.com/a/23208450
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| element { | |
| background: | |
| /* top, transparent black, faked with gradient */ | |
| linear-gradient( | |
| rgba(0, 0, 0, 0.7), | |
| rgba(0, 0, 0, 0.7) | |
| ), | |
| /* bottom, image */ | |
| url(image.jpg); | |
| } |
Uvacoder
/ header-blurred-background.css
Created
December 16, 2021 13:13
Blur background of a header: https://stackoverflow.com/a/64606048
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| header { | |
| position: sticky; | |
| top: 0; | |
| z-index: 999; | |
| width: 100%; | |
| height: 50px; | |
| background: rgba(255, 255, 255, 0.2); | |
| backdrop-filter: saturate(180%) blur(2px); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| async function getYouTubeVideos() { | |
| const youtubeApiKey = process.env.YOUTUBE_API_KEY // Get API key at https://console.cloud.google.com/marketplace/product/google/youtube.googleapis.com | |
| const channelId = process.env.CHANNEL_ID | |
| const numberOfVideos = 10 | |
| const youtubeQuery = await fetch( | |
| `https://www.googleapis.com/youtube/v3/search?key=${youtubeApiKey}&channelId=${channelId}&part=snippet,id&order=date&maxResults=${numberOfVideos}` | |
| ) | |
| const youtubeQueryRes = await youtubeQuery.json() |