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
@Merott
Merott / tailwind-colors-as-css-variables.md
Last active April 29, 2025 10:43
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 January 28, 2025 02:30
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 March 21, 2025 09:26
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.

@Yimiprod
Yimiprod / difference.js
Last active May 4, 2025 11:59
Deep diff between two object, using lodash
/**
* This code is licensed under the terms of the MIT license
*
* Deep diff between two object, using lodash
* @param {Object} object Object compared
* @param {Object} base Object to compare with
* @return {Object} Return a new object who represent the diff
*/
function difference(object, base) {
function changes(object, base) {