Skip to content

Instantly share code, notes, and snippets.

@zakirt
zakirt / timeout.js
Last active May 21, 2020 05:30
Provides the ability to clear all timeouts in JavaScript. Uses Proxy objects to intercept setTimeout & clearTimeout functions.
/*
* Clears all timeouts while addressing the concern raised in the commment #11069768
* related to HTML5 spec for timer IDs.
* https://stackoverflow.com/questions/8860188/javascript-clear-all-timeouts#comment-11069768
*
* The example uses IIFE, but can be easily converted into a Node, or ES6 module.
* Proxies are used to intercept native setTimeout and clearTimeout functions, so that
* we can store the timeouts in the Set collection object.
* Calling the function without any parameters will clear all of the previously set timeouts.
*/
@zakirt
zakirt / animated-gif-detect.js
Last active October 6, 2023 08:33
Detecting if GIF file is animated using JavaScript
/**
* @author Zakir Tariverdiev
* @class animatedGifDetect
* @description
* GIF file reader that checks whether GIF image is animated, or not.
* Uses information gathered from the website below:
* http://www.matthewflickinger.com/lab/whatsinagif/bits_and_bytes.asp
*/
(function(window, undefined) {
'use strict';
@zakirt
zakirt / css-load.html
Last active September 28, 2015 00:19
Optimize CSS performance with requestAnimationFrame bug fixed.
<!DOCTYPE html>
<html>
<head>
<style>
/*
Inline above the fold CSS
*/
</style>
@zakirt
zakirt / SassMeister-input.scss
Last active September 5, 2015 18:53
Useful Sass list functions
// ----
// libsass (v3.2.5)
// ----
// ----------------------------------------------------------------------------------
// Checks if the list contains the specified value.
// Param: {list} $list - list to search.
// Param: $search-item - value to search the $list for.
// Returns: {boolean} true if the $search-item was found and false otherwise.
// ----------------------------------------------------------------------------------
@zakirt
zakirt / scrollto.js
Last active August 29, 2015 14:07
Scroll to numeric position, DOM element, jQuery object, or jQuery selector
/**
* @author Zakir Tariverdiev
* @description jQuery scroll utility method alllowing animated scrolling
* to the specified entity.
* Chckout example http://jsfiddle.net/zakirt/hsb2v9ju/
* @param {number|string|Element|jQuery} - numeric position,
* jQuery selector string, DOM element, or jQuery object to scroll to.
* @returns promise object
*/
@zakirt
zakirt / siblings-by-count.scss
Last active July 25, 2017 09:33
Sass mixin for styling elements based on sibling count.
// -----------------------------------------------------------------------------
// @author Zakir Tariverdiev
// @created August 2, 2014
// @desc Sass mixin that provides convenient way to style element's siblings.
// Based on the example from Lea Verou's blog:
// http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/
// @param (string) $sibling-count - number of expected siblings. You can also use
// use such forms as "n + 3" and "3n" for "at least 3 siblings" and
// "siblings divisible by 3," for example. These forms must be enclosed in
// quotes for proer parsing though.
@zakirt
zakirt / triangle.scss
Last active August 29, 2015 13:56
Triangle - Sass mixin used to generate CSS triangles.
// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// @author Zakir Tariverdiev
// @created Feb 25, 2014
// @desciption Generates triangle based on the parameters passed.
// @param $direction - direction which triangle is facing
// @param $size - size of the triangle.
// @param $sides - size of the triangle's sides
// @param $color - color of the triangle.
@zakirt
zakirt / Gorm-Composition.markdown
Last active August 29, 2015 13:55
Grails GORM composition.
@zakirt
zakirt / Event-Module.markdown
Last active July 16, 2018 10:26
Event - JavaScript module handling addition/removal of multiple events

JavaScript Event Handling Module

A JavaScript module allowing addition and removal of multiple events and callback handlers. Its most useful feature is the ability to keep track of attached event handlers. Multiple event handlers can be attached and removed to/from a specific event. The module allows removal of all event listeners at the same time for a specific event, or all listeners for all events, if the user so desires.

  • Can be used with collections, or with a single DOM object.
  • Works on older browsers.

This module was inspired by this answer at Stack Overflow: http://stackoverflow.com/a/4386514

A simple example using Event module can be seen here: http://codepen.io/zakirt/pen/tjkEg

@zakirt
zakirt / Solutions-to-"JavaScript-Under-Pressure"-game.markdown
Last active August 26, 2023 21:27
Solutions to JavaScript Under Pressure Game