Skip to content

Instantly share code, notes, and snippets.

View emilio-martinez's full-sized avatar
🙃

Emilio Martinez emilio-martinez

🙃
View GitHub Profile
@developit
developit / *constant-locals-loader.md
Last active February 4, 2022 17:15
Inline Webpack CSS Modules classNames, reducing bundle size. https://npm.im/constant-locals-loader

constant-locals-loader for Webpack

This loader optimizes the output of mini-css-extract-plugin and/or css-loader, entirely removing the potentially large CSS classname mappings normally inlined into your bundle when using CSS Modules.

Run npm install constant-locals-loader, then make these changes in your Webpack config:

module.exports = {
 module: {
@ksenzee
ksenzee / grid_mixins.scss
Created December 8, 2017 22:49
Mixins that make it possible to use CSS Grid in IE 10/11 as well as in modern browsers. Based on mixins by Sascha Fuchs at https://medium.com/@gisugosu/css-grid-layout-spec-2-to-spec-1-transpiler-with-sass-415dff4dd31b.
/// Add Gap between the boxes
///
/// @author Sascha Fuchs
///
/// @group core - cssgrid
///
/// @param {list} $boxes - List with box sizes
/// @param {string} $gap - Optional column gap
@function box-gap($boxes, $gap) {
$box: ();
@paulirish
paulirish / what-forces-layout.md
Last active May 26, 2024 09:59
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@jlong
jlong / uri.js
Created April 20, 2012 13:29
URI Parsing with Javascript
var parser = document.createElement('a');
parser.href = "http://example.com:3000/pathname/?search=test#hash";
parser.protocol; // => "http:"
parser.hostname; // => "example.com"
parser.port; // => "3000"
parser.pathname; // => "/pathname/"
parser.search; // => "?search=test"
parser.hash; // => "#hash"
parser.host; // => "example.com:3000"
@gre
gre / easing.js
Last active May 17, 2024 03:33
Simple Easing Functions in Javascript - see https://github.com/gre/bezier-easing
/*
* This work is free. You can redistribute it and/or modify it under the
* terms of the Do What The Fuck You Want To Public License, Version 2,
* as published by Sam Hocevar. See the COPYING file for more details.
*/
/*
* Easing Functions - inspired from http://gizma.com/easing/
* only considering the t value for the range [0, 1] => [0, 1]
*/
EasingFunctions = {
//
// Regular Expression for URL validation
//
// Author: Diego Perini
// Created: 2010/12/05
// Updated: 2018/09/12
// License: MIT
//
// Copyright (c) 2010-2018 Diego Perini (http://www.iport.it)
//