Skip to content

Instantly share code, notes, and snippets.

View stepanjakl's full-sized avatar
💻
Computering

stepanjakl

💻
Computering
3 followers · 28 following
View GitHub Profile
@clineamb
clineamb / month_select.nunjucks
Last active November 1, 2023 12:32
Nunjucks Date/Time Field Macros
/*
* For use with the nunjucks templating system
* http://mozilla.github.io/nunjucks
*
* I created a bunch of macros for quickly creating date/time fields.
* Import into your nunjucks template:
* "{% import "path/to/datefields.nunjucks" as datefields %}"
* And use...
* {{ datefields.month_select("yo_month", "M", "", "form-control") }}
*
@ourmaninamsterdam
ourmaninamsterdam / LICENSE
Last active April 24, 2024 18:56
Arrayzing - The JavaScript array cheatsheet
The MIT License (MIT)
Copyright (c) 2015 Justin Perry
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
@Yimiprod
Yimiprod / difference.js
Last active July 13, 2024 15:07
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) {
@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
@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 <you@youremail.com>",
"license": "MIT",
"postcss": {
"plugins": {
"postcss-easy-import": {},
"postcss-preset-env": {
@drwpow
drwpow / smooth-scrolling.js
Last active October 15, 2023 12:51
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 = () => {
@fnky
fnky / variable-fonts.md
Last active June 15, 2024 04:38
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

@Merott
Merott / tailwind-colors-as-css-variables.md
Last active July 23, 2024 18:34
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.




  


  




    


          
    

      

        
        

          

              @oze4
          

          

            
                oze4
                / 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
        

  





    


  




    


          
    

      

        
        

          

              @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>