
<!DOCTYPE html>
<html class="no-js" lang="en-US">
    <head>
        <meta charset="utf-8"/>
        <title>My name is Salem.</title>
        <meta name="description" content="This is my website."/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <meta name="theme-color" content="#ffd700"/>

        <meta name="author" content="Salem Hilal"/>
        <meta name="og:title" content="My name is Salem."/>
        <meta name="og:url" content="https://salem.io"/>
        <meta name="og:type" content="profile"/>
        <meta name="og:description" content="This is my website."/>
        <meta name="og:image" content="https://salem.io/img/thumb.png"/>
        <meta name="profile:first_name" content="Salem"/>
        <meta name="profile:last_name" content="Hilal"/>

        <meta name="twitter:card" content="summary_large_image"/>
        <meta name="twitter:site" content="@technoheads"/>
        <meta name="twitter:title" content="My name is Salem."/>
        <meta name="twitter:description" content="This is my website."/>
        <meta name="twitter:image" content="https://salem.io/img/thumb.png"/>
        <meta name="twitter:image:alt" content="My name is Salem. I care about web performance, front-end infrastructure, and public transportation. I am a software engineer on Etsy's Web Platform team."/>

        <script>document.documentElement.classList.remove("no-js");window.matchMedia("(prefers-color-scheme: dark)").matches?document.documentElement.classList.add("dark"):document.documentElement.classList.remove("dark")</script>
        <link rel="stylesheet" href="/style.css" type="text/css" media="all"/>
        
        <link rel="preconnect" href="https://fonts.googleapis.com"> 
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
        <link href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">

    </head>

    <body class="bg-yellow fade-in black">
        <div class="mw7 center pa3 pa4-ns mb4">
            
<!--[if IE]>  
    <p class="ba br1 mb4 pa3 blue bg-washed-blue browserupgrade">
        You are using an <strong>outdated</strong> browser. Please
        <a href="https://browsehappy.com/">upgrade your browser</a> to improve
        your experience and security.
    </p>
<![endif]-->
            <div>
    <a href="/" class="b mr3 black link underline hover-bg-black-90 hover-yellow">home</a>
    <a href="/writing" class="b mr3 black link underline hover-bg-black-90 hover-yellow">writing</a>
    <a href="/feed.xml" class="b mr3 black link underline hover-bg-black-90 hover-yellow">rss</a>
    <a href="mailto:hello@salem.io" class="b black link underline hover-bg-black-90 hover-yellow">contact</a>
</div>
            <!-- Hello This Is My Business Card™ -->
            <div class="mb4 mb5-ns mt6-ns">
                <!-- who am i? -->
                <h1 class="f1 lh-title border-salem pb1 mb3">
                    My name is
                    <span class="yellow bg-black-90">Salem</span>.
                </h1>
                <!-- who am i? -->
                <div class="f3 f2-ns lh-copy">
                    I care about web performance, front-end infrastructure, and public
                        transit. I was a founding engineer at 
                    <a class="black link underline hover-bg-black-90 hover-yellow" href="https://www.getoctane.io">Octane</a>, 
                        and was previously a staff engineer on
                    <a class="black link underline hover-bg-black-90 hover-yellow" href="https://www.etsy.com/listing/212856925/million-dollar-frog">Etsy</a>'s
                        Web Platform team. I put my good ideas on
                    <a class="black link underline hover-bg-black-90 hover-yellow" href="https://github.com/salemhilal">GitHub</a>
                        and my bad ideas on
                    <a class="black link underline hover-bg-black-90 hover-yellow" href="https://twitter.com/technoheads">Twitter</a>.
                </div>
            </div>

            <div class="f3 f4-ns lh-copy">
                <!-- TODO: this divider is desktop-only. should it be? -->
                <div class="f4 b mb4 tc dn-ns">
                  —
                </div>

                <!-- TypeScript -->
                <div class="mb4 entry-salem">
                    I planned and lead the effort to migrate Etsy's codebase to TypeScript. The project was a huge success, and taught me a lot about making large-scale changes without interrupting work. I wrote about the experience 
                    <a class="black link underline hover-bg-black-90 hover-yellow" href="https://codeascraft.com/2021/11/08/etsys-journey-to-typescript/">here</a>.
                </div>

                <!-- Kevin -->
                <div class="mb4 entry-salem">
                    I wrote a small server to make developing with Webpack in large codebases less painful. It is called
                    <a class="black link underline hover-bg-black-90 hover-yellow" href="https://codeascraft.com/2020/04/06/developing-in-a-monorepo-while-still-using-webpack/">Kevin</a>
                        and it powers the development environment at Etsy. I wrote about why Kevin exists and how it works for Etsy's
                    <a class="black link underline hover-bg-black-90 hover-yellow" href="https://codeascraft.com/2020/04/06/developing-in-a-monorepo-while-still-using-webpack/">Code as Craft</a> blog.

                </div>

                <!-- JSConf 2019-->
                <div class="mb4 entry-salem">
                    I gave a talk on migrating Etsy to Webpack at
                    <a class="black link underline hover-bg-black-90 hover-yellow" href="https://2019.jsconf.us/speakers/salem-hilal">JSConf 2019</a>
                    and there's a
                    <a class="black link underline hover-bg-black-90 hover-yellow" href="https://www.youtube.com/watch?v=nDAvXOePowM">video of it</a>. There are some
                    <a class="black link underline hover-bg-black-90 hover-yellow" href="https://speakerdeck.com/salemhilal/jsconf-2019-we-started-using-webpack-and-it-took-a-while">slides</a>
                    as well, if that's your thing. I shortened the talk and gave it again
                                        at QueensJS, which was a
                    <a class="black link underline hover-bg-black-90 hover-yellow" href="https://twitter.com/technoheads/status/1169442246565015553">lot of fun</a>.
                </div>

                <!-- Github Contributions -->
                <div class="mb4 entry-salem">
                    I've made small contributions to a number of projects, including to
                    <a class="black link underline hover-bg-black-90 hover-yellow" href="https://github.com/prettier/prettier/pull/3830">Prettier</a>
                    and
                    <a class="black link underline hover-bg-black-90 hover-yellow" href="https://github.com/webpack/webpack/issues/10771">Webpack</a>.
                </div>

                <!-- Here's my soundcloud -->
                <div class="mb4 entry-salem">
                    Sometimes I
                    <a class="black link underline hover-bg-black-90 hover-yellow" href="https://salemhilal.bandcamp.com/music">make</a>
                    <a class="black link underline hover-bg-black-90 hover-yellow" href="https://kshack.bandcamp.com/album/reduction-kschk002">music</a>.
                </div>

                <div class="f4 b mb4 tc">
                  —
                </div>
            </div>
        </div>
        
<script>
// Lazy load images
!function(e,t,s){if("loading"in HTMLImageElement.prototype){var n=document.querySelectorAll(".lazy"),a=n.length;if(a>0)for(var c=0;c<a;c++)n[c].src=n[c].dataset.src,"srcset"in n[c].dataset&&(n[c].srcset=n[c].dataset.srcset)}else{var r=document.createElement("script");r.async=!0,r.src="https://cdn.jsdelivr.net/npm/lazysizes@5/lazysizes.min.js",document.body.appendChild(r)}}()

// InstantClick 3.1.0 | (C) 2014 Alexandre Dieulot | http://instantclick.io/license 
var InstantClick=function(d,e){function w(a){var b=a.indexOf("#");return 0>b?a:a.substr(0,b)}function z(a){for(;a&&"A"!=a.nodeName;)a=a.parentNode;return a}function A(a){var b=e.protocol+"//"+e.host;if(!(b=a.target||a.hasAttribute("download")||0!=a.href.indexOf(b+"/")||-1<a.href.indexOf("#")&&w(a.href)==k)){if(J){a:{do{if(!a.hasAttribute)break;if(a.hasAttribute("data-no-instant"))break;if(a.hasAttribute("data-instant")){a=!0;break a}}while(a=a.parentNode);a=!1}a=!a}else a:{do{if(!a.hasAttribute)break;
if(a.hasAttribute("data-instant"))break;if(a.hasAttribute("data-no-instant")){a=!0;break a}}while(a=a.parentNode);a=!1}b=a}return b?!1:!0}function t(a,b,c,g){for(var d=!1,e=0;e<B[a].length;e++)if("receive"==a){var f=B[a][e](b,c,g);f&&("body"in f&&(c=f.body),"title"in f&&(g=f.title),d=f)}else B[a][e](b,c,g);return d}function K(a,b,c,g){d.documentElement.replaceChild(b,d.body);if(c){history.pushState(null,null,c);b=c.indexOf("#");b=-1<b&&d.getElementById(c.substr(b+1));g=0;if(b)for(;b.offsetParent;)g+=
b.offsetTop,b=b.offsetParent;scrollTo(0,g);k=w(c)}else scrollTo(0,g);d.title=S&&d.title==a?a+String.fromCharCode(160):a;L();C.done();t("change",!1);a=d.createEvent("HTMLEvents");a.initEvent("instantclick:newpage",!0,!0);dispatchEvent(a)}function M(a){G>+new Date-500||(a=z(a.target))&&A(a)&&x(a.href)}function N(a){G>+new Date-500||(a=z(a.target))&&A(a)&&(a.addEventListener("mouseout",T),H?(O=a.href,l=setTimeout(x,H)):x(a.href))}function U(a){G=+new Date;(a=z(a.target))&&A(a)&&(D?a.removeEventListener("mousedown",
M):a.removeEventListener("mouseover",N),x(a.href))}function V(a){var b=z(a.target);!b||!A(b)||1<a.which||a.metaKey||a.ctrlKey||(a.preventDefault(),P(b.href))}function T(){l?(clearTimeout(l),l=!1):v&&!m&&(p.abort(),m=v=!1)}function W(){if(!(4>p.readyState)&&0!=p.status){q.ready=+new Date-q.start;if(p.getResponseHeader("Content-Type").match(/\/(x|ht|xht)ml/)){var a=d.implementation.createHTMLDocument("");a.documentElement.innerHTML=p.responseText.replace(/<noscript[\s\S]+<\/noscript>/gi,"");y=a.title;
u=a.body;var b=t("receive",r,u,y);b&&("body"in b&&(u=b.body),"title"in b&&(y=b.title));b=w(r);h[b]={body:u,title:y,scrollY:b in h?h[b].scrollY:0};for(var a=a.head.children,b=0,c,g=a.length-1;0<=g;g--)if(c=a[g],c.hasAttribute("data-instant-track")){c=c.getAttribute("href")||c.getAttribute("src")||c.innerHTML;for(var e=E.length-1;0<=e;e--)E[e]==c&&b++}b!=E.length&&(F=!0)}else F=!0;m&&(m=!1,P(r))}}function L(a){d.body.addEventListener("touchstart",U,!0);D?d.body.addEventListener("mousedown",M,!0):d.body.addEventListener("mouseover",
N,!0);d.body.addEventListener("click",V,!0);if(!a){a=d.body.getElementsByTagName("script");var b,c,g,e;i=0;for(j=a.length;i<j;i++)b=a[i],b.hasAttribute("data-no-instant")||(c=d.createElement("script"),b.src&&(c.src=b.src),b.innerHTML&&(c.innerHTML=b.innerHTML),g=b.parentNode,e=b.nextSibling,g.removeChild(b),g.insertBefore(c,e))}}function x(a){!D&&"display"in q&&100>+new Date-(q.start+q.display)||(l&&(clearTimeout(l),l=!1),a||(a=O),v&&(a==r||m))||(v=!0,m=!1,r=a,F=u=!1,q={start:+new Date},t("fetch"),
p.open("GET",a),p.send())}function P(a){"display"in q||(q.display=+new Date-q.start);l||!v?l&&r&&r!=a?e.href=a:(x(a),C.start(0,!0),t("wait"),m=!0):m?e.href=a:F?e.href=r:u?(h[k].scrollY=pageYOffset,m=v=!1,K(y,u,r)):(C.start(0,!0),t("wait"),m=!0)}var I=navigator.userAgent,S=-1<I.indexOf(" CriOS/"),Q="createTouch"in d,k,O,l,G,h={},p,r=!1,y=!1,F=!1,u=!1,q={},v=!1,m=!1,E=[],J,D,H,B={fetch:[],receive:[],wait:[],change:[]},C=function(){function a(a,e){n=a;d.getElementById(f.id)&&d.body.removeChild(f);f.style.opacity=
"1";d.getElementById(f.id)&&d.body.removeChild(f);g();e&&setTimeout(b,0);clearTimeout(l);l=setTimeout(c,500)}function b(){n=10;g()}function c(){n+=1+2*Math.random();98<=n?n=98:l=setTimeout(c,500);g()}function g(){h.style[k]="translate("+n+"%)";d.getElementById(f.id)||d.body.appendChild(f)}function e(){d.getElementById(f.id)?(clearTimeout(l),n=100,g(),f.style.opacity="0"):(a(100==n?0:n),setTimeout(e,0))}function m(){f.style.left=pageXOffset+"px";f.style.width=innerWidth+"px";f.style.top=pageYOffset+
"px";var a="orientation"in window&&90==Math.abs(orientation);f.style[k]="scaleY("+innerWidth/screen[a?"height":"width"]*2+")"}var f,h,k,n,l;return{init:function(){f=d.createElement("div");f.id="instantclick";h=d.createElement("div");h.id="instantclick-bar";h.className="instantclick-bar";f.appendChild(h);var a=["Webkit","Moz","O"];k="transform";if(!(k in h.style))for(var b=0;3>b;b++)a[b]+"Transform"in h.style&&(k=a[b]+"Transform");var c="transition";if(!(c in h.style))for(b=0;3>b;b++)a[b]+"Transition"in
h.style&&(c="-"+a[b].toLowerCase()+"-"+c);a=d.createElement("style");a.innerHTML="#instantclick{position:"+(Q?"absolute":"fixed")+";top:0;left:0;width:100%;pointer-events:none;z-index:2147483647;"+c+":opacity .25s .1s}.instantclick-bar{background:#29d;width:100%;margin-left:-100%;height:2px;"+c+":all .25s}";d.head.appendChild(a);Q&&(m(),addEventListener("resize",m),addEventListener("scroll",m))},start:a,done:e}}(),R="pushState"in history&&(!I.match("Android")||I.match("Chrome/"))&&"file:"!=e.protocol;
return{supported:R,init:function(){if(!k)if(R){for(var a=arguments.length-1;0<=a;a--){var b=arguments[a];!0===b?J=!0:"mousedown"==b?D=!0:"number"==typeof b&&(H=b)}k=w(e.href);h[k]={body:d.body,title:d.title,scrollY:pageYOffset};for(var b=d.head.children,c,a=b.length-1;0<=a;a--)c=b[a],c.hasAttribute("data-instant-track")&&(c=c.getAttribute("href")||c.getAttribute("src")||c.innerHTML,E.push(c));p=new XMLHttpRequest;p.addEventListener("readystatechange",W);L(!0);C.init();t("change",!0);addEventListener("popstate",
function(){var a=w(e.href);a!=k&&(a in h?(h[k].scrollY=pageYOffset,k=a,K(h[a].title,h[a].body,!1,h[a].scrollY)):e.href=e.href)})}else t("change",!0)},on:function(a,b){B[a].push(b)}}}(document,location);

// ga-lite v2.0.5 | https://github.com/jehna/ga-lite
!function(e,t,n,i,s,a,c){e[n]=e[n]||function(){(e[n].q=e[n].q||[]).push(arguments)},a=t.createElement(i),c=t.getElementsByTagName(i)[0],a.async=!0,a.src="https://cdn.jsdelivr.net/npm/ga-lite@2/dist/ga-lite.min.js",c.parentNode.insertBefore(a,c)}(window,document,"galite","script");
galite('create', 'UA-3331012-7', 'auto');
galite('send', 'pageview');

// Konami code easter egg. Love, Salem.
!function(){var o=-1,r=["ArrowUp","ArrowUp","ArrowDown","ArrowDown","ArrowLeft","ArrowRight","ArrowLeft","ArrowRight","b","a"];document.addEventListener("keydown",function(e){var t=r[o+1];e.key===t?o++:o=-1,o===r.length-1&&(document.body.classList.add("rainbow"),document.body.classList.remove("bg-yellow"),setTimeout(function(){document.body.classList.remove("rainbow"),document.body.classList.add("bg-yellow"),o=-1},1e3))},!1)}();
      
</script>
    </body>
</html>
