Skip to content

Instantly share code, notes, and snippets.

View kwarkjes's full-sized avatar

Yassine el Ouazzani kwarkjes

16 followers · 14 following
View GitHub Profile
@kwarkjes
kwarkjes / proxy.js
Created July 17, 2023 10:16
Proxy Nuxt 3 traffic with server routes (Uses Nitro)
// server/routes/proxy.js
export default defineEventHandler((event) => {
return proxyRequest(event,`https://www.google.com/search?q=${event.node.req.url}`)
});
@kwarkjes
kwarkjes / very complicated condition.js
Last active July 4, 2018 16:52
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
@kwarkjes
kwarkjes / #Fronteers - Bram Stein - Web fonts performance.md
Last active April 1, 2016 09:19

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
@kwarkjes
kwarkjes / #Fronteers - Tobias - Animation & performace.md
Last active April 1, 2016 09:27

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
@kwarkjes
kwarkjes / maxlength.js
Last active May 31, 2016 11:34
// 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();
@kwarkjes
kwarkjes / css-checkbox.html
Last active August 29, 2015 14:17
// source http://jsbin.com/sinaxuloze/2
<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 {
@kwarkjes
kwarkjes / img-fluid.html
Last active August 29, 2015 14:10
// source http://jsbin.com/getof
<!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;}
@kwarkjes
kwarkjes / index.html
Created August 29, 2014 15:07
// source http://jsbin.com/papaq/7
<!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;