Skip to content

Instantly share code, notes, and snippets.

Yassine Elouazzani kwarkjes

View GitHub Profile
View very complicated condition.js
var y = [Math.PI, Math.cos(Math.PI)];
(!!y / 0) - y[0] === Math.min((!!y / 0)) && (Math.PI / 0).toString().length === (y.length * (parseInt(Math.PI) + Array.isArray(y)))
// y?
// output => true
View #Fronteers - Bram Stein - Web fonts

Web fonts performance - Bram Stein

  • 60% of the pages use web fonts
    • multiple fonts per page
    • avg. 400kB of web fonts per page
  • FOIT vs FOUT
  • FOUT should be the default behavior
  • font-display: auto, block, swap fallback, optional -block will hide text until the ont is loaded -swap fallback imminently and loads the font later
View #Fronteers - Tobias - Animation &

Animation performance - Tobias Ahlin

  • Spinkit animations lib
  • animate with transition or with the animation prop
  • animation prop is a set of keyframes
  • opacity, transform, filter are GPU accelerated (use them)
    • don't use top use trasnalteX
    • don't use width use scaleX instead... and go on
  • Example: background animation:
    • use a psudo element and transition the opacity of it
View maxlength.js
// See demo:
$('[data-maxlength]').each(function() {
var $checker = $(this);
var data = $'maxlength');
$(data.selector).keyup(function() {
var diff = parseInt(data.max - $(this).val().length);
$checker.text(diff).css('color', diff < 1 ? 'red' : '');
View css-checkbox.html
<style id="jsbin-css">
.tcon-checkbox {
position: relative;
cursor: pointer;
-webkit-transform: translateZ(0);
transform: translateZ(0);
cursor: pointer;
padding-left: 20px;
.tcon-checkbox:before {
View img-fluid.html
<!DOCTYPE html>
<script src=""></script>
<link href="" rel="stylesheet" type="text/css" />
<script src=""></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.row.flush-col > [class*="col-"] {padding:0;}
View index.html
<!DOCTYPE html>
<script src=""></script>
<meta charset="utf-8">
<title>JS Bin</title>
<script type="text/javascript" src=""></script>
<style id="jsbin-css">
#map {
height: 800px;
You can’t perform that action at this time.