etdev

const ALGOLIA_APP_ID = "<your algolia app id>";

addEventListener('fetch', event => {
  try {
    const request = event.request;
    if (request.method.toUpperCase() === 'POST') return event.respondWith(handlePostRequest(event));
    return handleRequest(request);
  } catch (e) {
    return event.respondWith(new Response('Error thrown ' + e.message));
  }

zenolahaye

/* fix iOS bug not displaying 100vh correctly */

/* Ipad Pro - Landscape-breakpoint */
@media only screen and (min-device-width : 1024px) and (max-device-width : 1024px) and (min-device-height : 1366px) and (max-device-height : 1366px) and (min-width: 1366px) and (max-width: 1366px) {
	.fullheight {
		height: 1024px;
	}
}

/* Ipad Pro - Portrait-breakpoint */

juyal-ahmed

#Steps to Install

1. Download and Install ImageMagick http://imagemagick.org/script/binary-releases.php#windows
2. Visit ImageMagic installation directory and module/coders copy all files and past on D:\xampp\apache\bin
3. Download Binary https://pecl.php.net/package/imagick/3.4.0RC5/windows php 5.6 TS one according to phpinfo Architecture if it is x86/x64
4. Exatract and copy php_imagick.dll to D:\xampp\php\ext
5. Add php_imagick.dll on php.ini
6. Copy 8 CORE_*.dll to D:\xampp\apache\bin
7. Restart Apache
8. done and visit phpinfo

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

paulirish

function u() {
    requestAnimationFrame(u);

    g = p ? 
        audio.currentTime * 60 : (
            audio = "RIFFdataWAVEfmt " + atob("EAAAAAEAAQAAeAAAAHgAAAEACAA") + "data",

            b.style.background = "radial-gradient(circle,#345,#000)",
            b.style.position = "fixed",
            b.style.height = b.style.width = "100%",

paulirish

Just jotting some notes on delivering webfonts performantly…

still an incomplete draft.

Any critical fonts must be requested asap.

Critical fonts are neccessary for the above-the-fold content to be useful. Identify which of the fonts you NEED for the first render, as they get very different treatment vs the others.

You want the network reqs for your critical fonts to start ASAP. ideally the @font-face req is in a style tag, following CRP guidelines

paulirish

console.log wrap resolving for your wrapped console logs

I've heard this before:

What I really get frustrated by is that I cannot wrap console.* and preserve line numbers

We enabled this in Chrome DevTools via blackboxing a bit ago.

If you blackbox the script file the contains the console log wrapper, the script location shown in the console will be corrected to the original source file and line number. Click, and the full source is looking longingly into your eyes.