Skip to content

Instantly share code, notes, and snippets.

View umaar's full-sized avatar

Umar Hansa umaar

1.4k followers · 1.4k following
View GitHub Profile
@nick-jonas
nick-jonas / bubbles-dom.js
Last active August 29, 2015 13:57
Animating bubbles using the transform property on multiple DOM elements
// updates the position of a bubble element
updatePosition: function($elem, x, y){
var value = 'translate3d(' + x + 'px, ' + y + 'px, 0.1px)';
// use Modernizr to get all the vendor prefixes
value = Modernizr._prefixes.join('transform' + ':' + value + '; ');
value = value.split(';');
var props = {};
// create an object to apply the vendor prefixed CSS properties
for(var i = 0; i < value.length; i++){
var thisVal = value[i].split(':');
@davidtheclark
davidtheclark / test-extends.scss
Created April 5, 2014 23:04
for comparing gzipping of Sass extends and mixins
@import "../bower_components/scut/dist/scut";
@for $i from 1 through 200 {
.test-#{$i} {
@extend %scut-hide-visually;
@extend %scut-image-replace;
@extend %scut-triangle;
@extend %scut-clearfix;
@extend %scut-fill;
@extend %scut-list-unstyled;
@arnaudbreton
arnaudbreton / async-process-jasmine.Spec.js
Last active August 29, 2015 14:00
The 5 best front-end developer tools blogpost: testing with Mocha and Jasmine
AsyncProcess = require('./async-process').AsyncProcess
describe('AsyncProcess', function() {
var asyncProcess;
beforeEach(function() {
asyncProcess = new AsyncProcess();
});
it('should process 42', function() {
@annevk
annevk / gist:3db3fbda2b95e5ae9427
Last active August 29, 2015 14:01
Platform requests to TC39
  • IO streams. (Domenic is leading an effort on GitHub. This is high priority, like promises was last year.)
  • Asynchronous iteration (event streams?). (Database cursor, going through a directory, going through entries in storage, scanning TV channels.)
  • A plan around distinct Error types and detection (e.g. for APIs that can fail in multiple ways where you might want to recover from certain class of errors; think network APIs, databases)
  • A better way to define ES APIs than WebIDL. (Part of the problem here is lack of maintenance. So maybe it's as "simple" as finding someone.)
@axemclion
axemclion / Readme.md
Last active August 29, 2015 14:03
GPU Composited CSS - Performance

Ariya Hidayat has written an excellent article on GPU Composited CSS and how it can be used to optimize web rendering performance.

The impact of adding CSS transforms is evident in developer timline and this experiment is a way to capture that information using browser-perf. The results from this experiment clearly indicate how certain CSS properties move rendering load to the GPU, and how that that impact the overall responsiveness of the page.

Pre-requisites

  1. Ensure that you have node and npm installed
  2. Ensure that you have Selenium running, or can connect to Sauce Labs
  3. Dowload this gist using git clone https://gist.github.com/853d34ebd776047836f3.git
  4. Install other dependencies using npm install
@rjharmon
rjharmon / gist:789bfaa8dc5ab91bd515
Last active August 29, 2015 14:06 — forked from dmethvin/gist:1676346
function debugAccess(obj, prop, debugGet){
var origValue = obj[prop];
var newKey = "__debug_access_"+prop;
obj[newKey] = origValue;
Object.defineProperty(obj, prop, {
get: function () {
if (this !== obj && this.hasOwnProperty(newKey)) {
console.log("Inherited object gets its existing COPY of '", prop, "' in ", newKey);
return this[newKey];
@aslushnikov
aslushnikov / console-search-reveals-messages.html
Created October 27, 2014 09:12
Developer Tools layout test explained
<!--
Developer Tools has a lot of different tests. Here we'll go through the most
common type which tests Developer Tools front-end.
Every front-end test is just a webpage. The testing system (which is essentially a special
lightweight browser, content_shell) opens this page, and then opens Developer Tools to inspect
it.
-->
<html>
@simonsarris
simonsarris / gist:9b16e436e035f90ec35f
Last active August 29, 2015 14:09

Subject: Apologies for the downtime, but we're coming back stronger.

Dear Simon,

As you may already know, BrowserStack experienced an attack on 9th November, 2014 at 23:30 GMT during which an individual was able to gain unauthorized access to some of our users’ registered email addresses. He then tried to send an email to all our registered users, but he was only able to reach less than 1% (our estimate is 5,000 users). The email contained inaccurate information, even claiming that BrowserStack would be shutting down.

When we realized this, our only concern was to protect our users. This involved temporarily taking down the service, as we scrutinized each component carefully. This inconvenienced our users for several hours, and for that we are truly sorry.

What happened?

@remy
remy / less-watch.sh
Last active August 29, 2015 14:09
Watch the cwd for changes to .less files and generate their matched .css file.
watch -n 1 'FILE=$(find . -name "*.less" -mtime -2s); [ ! -z "$FILE" ] && CSSFILE=${FILE%.*}.css && lessc --source-map=$(basename $CSSFILE).map $FILE $CSSFILE'
@nzakas
nzakas / job.md
Last active August 29, 2015 14:18
Staff Software Engineer, Front-end Frameworks, Box

Staff Software Engineer, Front-end Frameworks (Los Altos, CA)

Box's Front-end Frameworks team is looking for an experienced engineer to join us at our Los Altos, CA headquarters on our mission to make building web applications on top of the Box infrastructure easy, fast, and fun.

About the Team

Front-end Frameworks ensures that Box web applications are built on top of the best tools and frameworks available. We actively evaluate third-party libraries and frameworks, as well as building our own, to make sure our feature teams can be as effective and iterative as possible. In the past two years, we've led the establishment of front-end best practices, created a lightweight client-side framework that has improved developer experience by enforcing conventions and loose coupling, and started putting together a Node.js framework to power the next generation of Box web applications.

About the Job