Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

View hinok's full-sized avatar

Dawid Karabin hinok

View GitHub Profile
@paulirish
paulirish / what-forces-layout.md
Last active April 23, 2024 06:51
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
@rikukissa
rikukissa / POST.md
Last active January 27, 2020 08:10
Unit testing Angular.js app with node.js, mocha, angular-mocks and jsdom #angular.js #testing
title slug createdAt language preview
Unit testing Angular.js app with node.js, mocha, angular-mocks and jsdom
unit-testing-angular-js-app-with-node
2015-07-05T18:04:33Z
en
Majority of search result about unit testing Angular.js apps is about how to do it by using test frameworks that run the tests in a real browser. Even though it's great to be able to test your code in multiple platforms, in my opinion it creates a lot of boilerplate code and makes it hard to run the tests in, for instance a CI-server.

Testing Angular.js app headlessly with node.js + mocha

Lean unit tests with minimal setup

@sebmarkbage
sebmarkbage / Enhance.js
Last active January 31, 2024 18:33
Higher-order Components
import { Component } from "React";
export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
}
componentDidMount() {
this.setState({ data: 'Hello' });
}
render() {
@linkesch
linkesch / gist:74a0f6640b11c99c04c9
Created January 19, 2015 14:36
Batch image resize on Mac OS X
sips -Z 640 *.jpg
import Ember from 'ember';
var get = Ember.get;
export default Ember.Component.extend({
didInsertElement: function(){
Ember.$(document).bind('click', this.closeThis);
},
closeThis: function(event) {
@mziwisky
mziwisky / Oauth2.md
Last active February 15, 2024 23:31
Oauth2 Explanation

OAUTH2

The Problem

I’m a web app that wants to allow other web apps access to my users’ information, but I want to ensure that the user says it’s ok.

The Solution

I can’t trust the other web apps, so I must interact with my users directly. I’ll let them know that the other app is trying to get their info, and ask whether they want to grant that permission. Oauth defines a way to initiate that permission verification from the other app’s site so that the user experience is smooth. If the user grants permission, I issue an AuthToken to the other app which it can use to make requests for that user's info.

Note on encryption

Oauth2 has nothing to do with encryption -- it relies upon SSL to keep things (like the client app’s shared_secret) secure.

@yocontra
yocontra / gulpfile.js
Last active January 1, 2016 00:29
gulpfile for a simple livereload static web server. this is a proof of concept that uses no plugins to do the work. obviously there are plugins that eliminate almost all of this code but i thought it would be a fun demonstration. this will trigger livereload any time any file is modified in the current working directory. it also serves the curre…
var gulp = require('gulp');
var gutil = require('gulp-util');
var express = require('express');
var path = require('path');
var tinylr = require('tiny-lr');
var createServers = function(port, lrport) {
var lr = tinylr();
lr.listen(lrport, function() {
gutil.log('LR Listening on', lrport);
@rjmoggach
rjmoggach / responsive-margins.less
Last active August 30, 2017 00:47
Responsive Margin & Padding Shortcuts for Twitter Bootstrap Using LESS CSS
//
// Responsive Margin & Padding Shortcuts for Twitter Bootstrap 3.0
// ---------------------------------------------------------------
// This is an addition to Twitter Bootstrap that allows additional margin and padding shortcuts
// for enhanced layout control purposes. It should be included after the bootstrap.less
// import statement or precompiled as you see fit. It differs from bootstrap standards in
// that for any given screen size it predetermines the margin/padding size. All you have to
// do is specify the size you want xs,sm,md,lg, or xl. The exception is for items that you
// want to be centered using auto left/right margins. This can be device responsive by
// specifying mc-xs, mc-sm, mc-md, or mc-lg depending on when you want that behavior.
@CMCDragonkai
CMCDragonkai / angularjs_directive_attribute_explanation.md
Last active November 29, 2023 15:35
JS: AngularJS Directive Attribute Binding Explanation

AngularJS Directive Attribute Binding Explanation

When using directives, you often need to pass parameters to the directive. This can be done in several ways. The first 3 can be used whether scope is true or false. This is still a WIP, so validate for yourself.

  1. Raw Attribute Strings

    <div my-directive="some string" another-param="another string"></div>
@SlexAxton
SlexAxton / .zshrc
Last active April 25, 2023 03:57
My gif workflow
gifify() {
if [[ -n "$1" ]]; then
if [[ $2 == '--good' ]]; then
ffmpeg -i $1 -r 10 -vcodec png out-static-%05d.png
time convert -verbose +dither -layers Optimize -resize 600x600\> out-static*.png GIF:- | gifsicle --colors 128 --delay=5 --loop --optimize=3 --multifile - > $1.gif
rm out-static*.png
else
ffmpeg -i $1 -s 600x400 -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=3 > $1.gif
fi
else