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.
elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
| Moved to https://github.com/ebidel/puppeteer-examples |
I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.
I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.
Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.
| #!/bin/sh | |
| base=$1 | |
| convert "$base" -resize '29x29' -unsharp 1x4 "Icon-Small.png" | |
| convert "$base" -resize '40x40' -unsharp 1x4 "Icon-Small-40.png" | |
| convert "$base" -resize '50x50' -unsharp 1x4 "Icon-Small-50.png" | |
| convert "$base" -resize '57x57' -unsharp 1x4 "Icon.png" | |
| convert "$base" -resize '58x58' -unsharp 1x4 "Icon-Small@2x.png" | |
| convert "$base" -resize '60x60' -unsharp 1x4 "Icon-60.png" | |
| convert "$base" -resize '72x72' -unsharp 1x4 "Icon-72.png" | |
| convert "$base" -resize '76x76' -unsharp 1x4 "Icon-76.png" |
| # IE is still braindead so still use favicon.ico | |
| convert -resize x16 -gravity center -crop 16x16+0+0 -flatten -colors 256 input.png output-16x16.ico | |
| convert -resize x32 -gravity center -crop 32x32+0+0 -flatten -colors 256 input.png output-32x32.ico | |
| convert output-16x16.ico output-32x32.ico favicon.ico | |
| # Then, HTML needs to specify size="XxY" as largest size due to browser bugs | |
| <link rel="shortcut icon" href="/favicon.ico" sizes="32x32"> |
| // Support routines for automatically reporting user timing for common analytics platforms | |
| // Currently supports Google Analytics, Boomerang and SOASTA mPulse | |
| // In the case of boomerang, you will need to map the event names you want reported | |
| // to timer names (for mPulse these need to be custom0, custom1, etc) using a global variable: | |
| // rumMapping = {'aft': 'custom0'}; | |
| (function() { | |
| var wtt = function(n, t, b) { | |
| t = Math.round(t); | |
| if (t >= 0 && t < 3600000) { | |
| // Google Analytics |
| //========================================================== | |
| // CUSTOM JAVASCRIPT CONSOLE | |
| // built by jakub fiala | |
| // | |
| // this small script intercepts the standard console methods | |
| // and provides a way of accessing their messages, | |
| // as well as stack traces, which is really cool. | |
| // it formats the stack traces for popular browsers | |
| // | |
| // contributions welcome! |
| #!/usr/bin/env bash | |
| # Must be run on an Amazon Linux AMI that matches AWS Lambda's runtime which can be found at: | |
| # https://docs.aws.amazon.com/lambda/latest/dg/current-supported-versions.html | |
| # | |
| # As of May 21, 2019, this is: | |
| # Amazon Linux AMI 2018.03.0 (ami-0756fbca465a59a30) | |
| # | |
| # You need to prepend PATH with the folder containing these binaries in your Lambda function | |
| # to ensure these newer binaries are used. |
| 0% | |
| 0% risk | |
| 777 | |
| 99% | |
| 99.9% | |
| 100% | |
| 100% more | |
| #1 | |
| $$$ | |
| 100% free |