Skip to content

Instantly share code, notes, and snippets.

View stepanjakl's full-sized avatar
💻
Computering

stepanjakl

💻
Computering
View GitHub Profile
await new Promise(function (resolve) {
setTimeout(function () {
resolve();
}, 1000);
});
// ... Can be shortened to:
await new Promise(function (resolve) {
setTimeout(resolve, 1000);
@oaluna
oaluna / index.html
Created December 8, 2020 18:43
Stripe Website Gradient Animation
<html>
<head>
<title>Stripe Gradient</title>
</head>
<body>
<canvas id="gradient-canvas" data-js-darken-top data-transition-in>
<!--
Remove data-js-darken-top to keep the same brightness in the upper part of the canvas
-->
</canvas>
@matthewoestreich
matthewoestreich / DOMRegex.js
Last active March 16, 2023 23:30
Essentially querySelectorAll with regex support. Modified from: https://stackoverflow.com/a/62144522
/**
* @plug
* DOMRegex.js
* https://mattoestreich.com
*
* @description
* Modified from: https://stackoverflow.com/a/62144522
* TLDR; querySelectorAll with regex support
*
* @important
@CodeMyUI
CodeMyUI / index.html
Last active September 29, 2025 11:29
LIGHT Flickering Animation (Vanilla CSS)
<div>
<span id="L">L</span>
<span id="I">I</span>
<span id="G">G</span>
<span id="H">H</span>
<span id="T">T</span>
</div>
@Merott
Merott / tailwind-colors-as-css-variables.md
Last active July 7, 2025 22:40
Expose Tailwind colors as CSS custom properties (variables)

This is a simple Tailwind plugin to expose all of Tailwind's colors, including any custom ones, as custom css properties on the :root element.

There are a couple of main reasons this is helpful:

  • You can reference all of Tailwind's colors—including any custom ones you define—from handwritten CSS code.
  • You can define all of your colors within the Tailwind configuration, and access the final values programmatically, which isn't possible if you did it the other way around: referencing custom CSS variables (defined in CSS code) from your Tailwind config.

See the Tailwind Plugins for more info on plugins.

@fnky
fnky / variable-fonts.md
Last active August 22, 2025 02:35
Awesome Variable Fonts

Awesome Variable Fonts

A list of open source and free* variable fonts.

* Some fonts may require a license to be used for commerical use.

Open Source

@drwpow
drwpow / smooth-scrolling.js
Last active November 2, 2024 03:53
Performant, 60FPS smooth scrolling in Vanilla JavaScript using requestAnimationFrame
/**
* @param {number} yPos Pixels from the top of the screen to scroll to
* @param {number} duration Time of animation in milliseconds
*/
const scrollTo = (yPos, duration = 600) => {
const startY = window.scrollY;
const difference = yPos - startY;
const startTime = performance.now();
const step = () => {
@felixdorner
felixdorner / package.json
Last active December 25, 2022 15:00
Example workflow: NPM scripts to process PostCSS while watching files, starting a server and syncing with the browser.
{
"name": "Example",
"version": "0.0.1",
"description": "Example workflow",
"author": "You <[email protected]>",
"license": "MIT",
"postcss": {
"plugins": {
"postcss-easy-import": {},
"postcss-preset-env": {
@mirajehossain
mirajehossain / js.md
Created August 25, 2017 15:34 — forked from nuhil/js.md
Javascript Handbook

Javascript Handbook

A hand crafted markdown document contains all major Javascript topics covered, taken from different sources. Brush Up your JS memory.

Comments


Single line comments start with //. For multi-line commands, you use /* ... */

// This is a single line comment
@ffoodd
ffoodd / improved-sr-only.markdown
Last active September 9, 2025 13:36
Improved .sr-only

Improved .visually-hidden

Theorically bulletproof CSS class for visually hide anything and keep it accessible to ATs.

A Pen by ffoodd on CodePen.

License.