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 performance.md

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 & performace.md

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: http://codepen.io/kwarkjes/pen/VjYYqG
$('[data-maxlength]').each(function() {
var $checker = $(this);
var data = $checker.data('maxlength');
$(data.selector).keyup(function() {
var diff = parseInt(data.max - $(this).val().length);
$checker.text(diff).css('color', diff < 1 ? 'red' : '');
}).keyup();
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>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></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>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<style id="jsbin-css">
#map {
height: 800px;
You can’t perform that action at this time.