Skip to content

Instantly share code, notes, and snippets.

View alexHlebnikov's full-sized avatar

Alexander Khlebnikov alexHlebnikov

View GitHub Profile
(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)
1. Общие принципы: Use the keyboard, Luke
Упор на горячие клавиши. Мышь — медленно, клавиатура — быстро. Модель GOMS это подтверждает.
Что такое модель GOMS?
Подход к количественному анализу моделей интерфейсов.
Перевод: правила для целей, объектов, методов и выделения (the model of goals, objects, methods and selection rules).
Позволяет предсказать, сколько времени потребуется опытному пользователю на выполнение конкретной операции.
K = 0,2 c — нажатие клавиши;
@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 / 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 / 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 / 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 / Opinion.md
Created July 13, 2016 10:09 — forked from ALF-er/Opinion.md
ReactJS Conf 2016

Disclaimer 1: Первую которая "про то чего мы достигли" я таки пропустил.

Disclaimer 2: Многие доклады смотрелись и отчёты писались в состоянии алкогольного опьянения.

Сейчас посмотрел Ben Alpert - What Lies Ahead она про то какие идеи они имеют о дальнейшем развитии. И они делят на UX-идеи и DX-идеи. В UX у них:

@alexHlebnikov
alexHlebnikov / genymotionwithplay.txt
Created July 20, 2016 05:35 — forked from wbroek/genymotionwithplay.txt
Genymotion with Google Play Services
Download the following ZIPs:
ARM Translation Installer v1.1 (http://www.mirrorcreator.com/files/0ZIO8PME/Genymotion-ARM-Translation_v1.1.zip_links)
Download the correct GApps for your Android version:
Google Apps for Android 6.0 (https://www.androidfilehost.com/?fid=24052804347835438 - benzo-gapps-M-20151011-signed-chroma-r3.zip)
Google Apps for Android 5.1 (https://www.androidfilehost.com/?fid=96042739161891406 - gapps-L-4-21-15.zip)
Google Apps for Android 5.0 (https://www.androidfilehost.com/?fid=95784891001614559 - gapps-lp-20141109-signed.zip)
Google Apps for Android 4.4.4 (https://www.androidfilehost.com/?fid=23501681358544845 - gapps-kk-20140606-signed.zip)
Google Apps for Android 4.3 (https://www.androidfilehost.com/?fid=23060877490000124 - gapps-jb-20130813-signed.zip)
/**
* Print Stylesheet fuer Deinewebsite.de
* @version 1.0
* @lastmodified 16.06.2016
*/
@media print {
/* Inhaltsbreite setzen, Floats und Margins aufheben */
/* Achtung: Die Klassen und IDs variieren von Theme zu Theme. Hier also eigene Klassen setzen */
@alexHlebnikov
alexHlebnikov / AnimatedImplementation.js
Last active January 18, 2017 05:01 — forked from polacekpavel/AnimatedImplementation.js
tweaked AnimatedImplementation for react-native-mapview (updated for RN 0.34.0)
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*
* @providesModule AnimatedImplementation
* @flow