Skip to content

Instantly share code, notes, and snippets.

Yassine Elouazzani kwarkjes

Block or report user

Report or block kwarkjes

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
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.