Skip to content

Instantly share code, notes, and snippets.

View stoikerty's full-sized avatar
⚫
•

Jorge Antunes stoikerty

⚫
•
21 followers · 28 following
View GitHub Profile
@stoikerty
stoikerty / what-forces-layout.md
Last active May 14, 2020 13:40 — forked from paulirish/what-forces-layout.md
What forces layout/reflow in Chrome. 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()
@stoikerty
stoikerty / javascript.js
Last active May 31, 2020 14:02
Gulp + Browserify - multi-file recipe (JSX, coffeescript, uglify & sourcemaps)
// Config that can be loaded externally, similar
// to [gulp-starter](https://github.com/greypants/gulp-starter)
var src = './app/assets';
var dest = './public';
var config = {
javascript: {
src: src + '/javascript_app/**/*.{js,coffee}',
rootFiles: [
{
@stoikerty
stoikerty / gist:40ee7d3ee6016a485092
Last active April 9, 2020 18:59
Mixin for creating Google’s “Material Design” in SCSS
// Creating Google’s “Material Design” in SCSS
// (specifically Material Shadow, uses compass)
// see: http://www.google.com/design/spec/layout/layout-principles.html#layout-principles-paper-craft
// Demo: http://codepen.io/stoikerty/full/Glwxi/
// Animating Box-Shadow is EXPENSIVE:
// http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/#toc-
// Moving between z-index-depths is done via opacity & multiple
@stoikerty
stoikerty / svg-left-center
Last active December 26, 2015 01:29
A snippet of code to remind myself the power of svg independent positioning
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle">
<g transform="scale(0.4 0.4)">
<polygon points="0,0 100,0 50,100"/>
</g>
</svg>
<svg class="svg-triangle" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<polygon points="0,0 100,0 50,100"/>
</svg>
@stoikerty
stoikerty / index.slim
Created June 4, 2013 13:53
A CodePen by Stoikerty. Oranges and Lemons - A Reflow story - How to reset a CSS transition by removing and adding a class, via javascript. Reflow needs to be triggered between the class change, this is accomplished using element.offsetWidth.
#awesome-element
/ We all like to
| Woohoo
@stoikerty
stoikerty / Issue with nested anchor tags. Slim v1.3.8
Created May 10, 2013 16:14
Edit: It is not a slim issue, it's the browser that refuses to parse it that way because certain kinds of "phrasing content"-nesting are not standard compliant. See: https://github.com/slim-template/slim/issues/324 ------ Issue with nested anchor tags. Slim v1.3.8 The div with the class `.problem` is placed beside the anchor tag 2, instead of in…
div
div
div
a.item
| 1
a.item
| 2
div.problem
a.item
| 3
@stoikerty
stoikerty / .gitignore
Created April 17, 2013 07:49 — forked from mrrooijen/.gitignore
.DS_Store
*.swp
*.swo
Gemfile.lock
@stoikerty
stoikerty / dabblet.css
Last active December 15, 2015 11:49
Making transparency work on IE8
/**
* Making transparency work on IE8
*/
.element{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
@stoikerty
stoikerty / dabblet.css
Created March 24, 2013 12:06
draggable iOS-like switch (webkit-only, also works in iOS safari)
/* draggable iOS-like switch (webkit-only, also works in iOS safari) */
/* Don't get your hopes up for using this in anything else besides
* webkittys, ::webkit-slider-thumb is proprietary.
* Here's some more info if you're interested:
* http://davidbcalhoun.com/2011/implementing-iphone-slider-unlock-with-input-type-range
* http://css-tricks.com/almanac/properties/a/appearance/
*/
.switch {
@stoikerty
stoikerty / dabblet.css
Last active July 6, 2022 15:37
SVG alternative to fittext.js, see http://dabblet.com/gist/5231222
/* SVG alternative to fittext.js */
div {
width: 300px;
height: 150px;
float: left;
margin-right : 10px;
background: #f06;
font: bold 150% sans-serif;
text-shadow: 0 1px 2px rgba(0,0,0,.5);