Skip to content

Instantly share code, notes, and snippets.

View alexHlebnikov's full-sized avatar

Alexander Khlebnikov alexHlebnikov

32 followers · 23 following
  • 2gis
  • Russia
View GitHub Profile
@alexHlebnikov
alexHlebnikov / sm-annotated.html
Created January 7, 2016 19:20 — forked from hdragomir/sm-annotated.html
The deferred font loading logic for Smashing Magazine. http://www.smashingmagazine.com/
<script type="text/javascript">
(function () {
"use strict";
// once cached, the css file is stored on the client forever unless
// the URL below is changed. Any change will invalidate the cache
var css_href = './index_files/web-fonts.css';
// a simple event handler wrapper
function on(el, ev, callback) {
if (el.addEventListener) {
el.addEventListener(ev, callback, false);
@alexHlebnikov
alexHlebnikov / LICENSE.txt
Created December 14, 2015 08:44 — forked from larryfox/LICENSE.txt
Determine if an elements background color is light or dark!
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2015 Larry Fox <http://larryfox.us>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
@alexHlebnikov
alexHlebnikov / perf.js
Created October 11, 2015 12:38 — forked from tkadlec/perf.js
Super simple example of adding perf timing to the page display during dev work
(function () {
var perfBar = function(budget) {
window.onload = function() {
window.performance = window.performance || window.mozPerformance || window.msPerformance || window.webkitPerformance || {};
var timing = window.performance.timing,
now = new Date().getTime(),
output, loadTime;
@alexHlebnikov
alexHlebnikov / what-forces-layout.md
Created September 29, 2015 16:24 — forked from paulirish/what-forces-layout.md
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.

Element

Box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
  • elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
  • elem.getClientRects(), elem.getBoundingClientRect()
@alexHlebnikov
alexHlebnikov / FE Meetup #2
Created June 4, 2014 11:08 — forked from porqz/FE Meetup #2
1. Общие принципы: Use the keyboard, Luke
Упор на горячие клавиши. Мышь — медленно, клавиатура — быстро. Модель GOMS это подтверждает.
Что такое модель GOMS?
Подход к количественному анализу моделей интерфейсов.
Перевод: правила для целей, объектов, методов и выделения (the model of goals, objects, methods and selection rules).
Позволяет предсказать, сколько времени потребуется опытному пользователю на выполнение конкретной операции.
K = 0,2 c — нажатие клавиши;
@alexHlebnikov
alexHlebnikov / sc-dl-min.js
Last active January 2, 2016 16:39 — forked from duncanbeevers/sc-dl-min.js
(function(e){var t,n,r;var i=$(".sound");var s=require("config").get("client_id");var o=require("lib/connect").getAuthToken();var u=require("lib/helpers/conversion-helper");var a,f;var l,c,h;for(t=i.length-1;t>=0;t--){n=$(i[t]);var p="https://soundcloud.com"+(n.find(".soundTitle__title").attr("href")||e.location.pathname);l={url:p,client_id:s};h=function(e){return function(t){var n={client_id:s};c=require("lib/url").stringify({query:n},t.stream_url+".mp3");r=$(e.find(".sound__soundActions .sc-button-group")[0]);f=r.find(".sc-button:first")[0].className.match(/sc-button-((?:small)|(?:medium))/)[1];a=$('<a class="sc-button sc-button-download sc-button-icon sc-button-responsive">Download</a>').attr({title:"Download this sound ("+u.bytesToMB(t.original_content_size)+")",href:c,download:e.find(".soundTitle__title").first().text()+".mp3"}).addClass("sc-button-"+f);if(0==e.find(".sc-button-download").length){r.append(a)}}}(n);$.getJSON("http://api.soundcloud.com/resolve.json",l).success(h)}})(window)