Skip to content

Instantly share code, notes, and snippets.

View tomsarduy's full-sized avatar

Tom Sarduy tomsarduy

View GitHub Profile
@forabi
forabi / Webpack 2.0.7-beta vs Rollup
Last active January 28, 2020 08:54
Webpack 2 vs Rollup
❯ rollup --version
rollup version 0.25.3
❯ time rollup -c ./rollup.js
rollup -c ./rollup.js 4.65s user 0.22s system 118% cpu 4.131 total
❯ time webpack
Hash: ebb00bbccd954c114d3c
Version: webpack 2.0.7-beta
Time: 3623ms
@paulirish
paulirish / what-forces-layout.md
Last active July 5, 2024 08:26
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
@webinista
webinista / selectmenu.css
Created December 7, 2014 21:34
CSS for fancy select / dropdown menu arrows in modern browsers
/**
* See it in action http://demos.tiffanybbrown.com/2014/select-menu/
**/
/**
* For later versions of Firefox, Safari, Chrome, and Opera
**/
select {
-webkit-appearance: none; /* Safari, Chrome, Opera, etc */
-moz-appearance: none; /* Firefox */
@jish
jish / promise.js
Created October 28, 2014 22:35
An example "always" behavior for ES6 promises. This only works if you do not create / return intermediate promises.
// A thing I want to do
// This flow only involves **one** promise, for example an ajax call
// None of the subsequent `then` or `catch` calls, return new promises.
var explode = false;
var promise = new Promise(function(resolve, reject) {
if (explode) {
@tomsarduy
tomsarduy / SVG background image with fallback to PNG
Last active September 21, 2016 20:22
SVG background image with fallback to PNG via jQuery and CSS, with Modernizr library.
Via jQuery:
if (!Modernizr.svg) {
$("#logo").css("background-image", "url(fallback.png)");
}
Via CSS:
#logo {
background: url(logo.svg); //svg by default
@lorenzopolidori
lorenzopolidori / has3d.js
Last active December 4, 2020 10:52 — forked from webinista/has3d.js
Testing for CSS 3D Transforms Support
function has3d(){
if (!window.getComputedStyle) {
return false;
}
var el = document.createElement('p'),
has3d,
transforms = {
'webkitTransform':'-webkit-transform',
'OTransform':'-o-transform',
@madrobby
madrobby / gist:3202087
Created July 29, 2012 22:01
Fallback to PNG if SVG is not supported
<!-- example for the http://retinafy.me ebook -->
<style>
div.rss {
background: url(rss.svg);
width: 32px;
height: 32px;
}
body.no-svg div.rss {
@bebraw
bebraw / gameengines.md
Created January 6, 2011 18:07
List of JS game engines. You can find a wikified version at https://github.com/bebraw/jswiki/wiki/Game-Engines. Feel free to modify that. I sync it here every once in a while.

IMPORTANT! Remember to check out the wiki page at https://github.com/bebraw/jswiki/wiki/Game-Engines for the most up to date version. There's also a "notes" column in the table but it simply does not fit there... Check out the raw version to see it.

This table contains primarily HTML5 based game engines and frameworks. You might also want to check out the [[Feature Matrix|Game-Engine-Feature-Matrix]], [[Game Resources]] and [[Scene Graphs]].

Name Size (KB) License Type Unit Tests Docs Repository Notes
Akihabara 453 GPL2, MIT Classic Repro no API github Intended for making classic arcade-style games in JS+HTML5
AllBinary Platform Platform Dependent AllBinary 2D/2.5D/3D n
@paulirish
paulirish / README.md
Created January 4, 2010 02:38
imagesLoaded() jquery plugin