People
 :bowtie: |
😄 :smile: |
😆 :laughing: |
|---|---|---|
😊 :blush: |
😃 :smiley: |
:relaxed: |
😏 :smirk: |
😍 :heart_eyes: |
😘 :kissing_heart: |
😚 :kissing_closed_eyes: |
😳 :flushed: |
😌 :relieved: |
😆 :satisfied: |
😁 :grin: |
😉 :wink: |
😜 :stuck_out_tongue_winking_eye: |
😝 :stuck_out_tongue_closed_eyes: |
😀 :grinning: |
😗 :kissing: |
😙 :kissing_smiling_eyes: |
😛 :stuck_out_tongue: |
| Type | Emoji | code |
|---|---|---|
| feat | ✨ | :sparkles: |
| fix | 🐛 | :bug: |
| docs | 📚 | :books: |
| style | 💎 | :gem: |
| refactor | 🔨 | :hammer: |
| perf | 🚀 | :rocket: |
| test | 🚨 | :rotating_light: |
| build | 📦 | :package: |
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.
| ## Pre-requisite: You have to know your last commit message from your deleted branch. | |
| git reflog | |
| # Search for message in the list | |
| # a901eda HEAD@{18}: commit: <last commit message> | |
| # Now you have two options, either checkout revision or HEAD | |
| git checkout a901eda | |
| # Or | |
| git checkout HEAD@{18} |
| <!doctype html> | |
| <title>Site Maintenance</title> | |
| <style> | |
| body { text-align: center; padding: 150px; } | |
| h1 { font-size: 50px; } | |
| body { font: 20px Helvetica, sans-serif; color: #333; } | |
| article { display: block; text-align: left; width: 650px; margin: 0 auto; } | |
| a { color: #dc8100; text-decoration: none; } | |
| a:hover { color: #333; text-decoration: none; } | |
| </style> |
| input { | |
| height: 34px; | |
| width: 100%; | |
| border-radius: 3px; | |
| border: 1px solid transparent; | |
| border-top: none; | |
| border-bottom: 1px solid #DDD; | |
| box-shadow: inset 0 1px 2px rgba(0,0,0,.39), 0 -1px 1px #FFF, 0 1px 0 #FFF; | |
| } |
| [ | |
| {name: 'Afghanistan', code: 'AF'}, | |
| {name: 'Åland Islands', code: 'AX'}, | |
| {name: 'Albania', code: 'AL'}, | |
| {name: 'Algeria', code: 'DZ'}, | |
| {name: 'American Samoa', code: 'AS'}, | |
| {name: 'AndorrA', code: 'AD'}, | |
| {name: 'Angola', code: 'AO'}, | |
| {name: 'Anguilla', code: 'AI'}, | |
| {name: 'Antarctica', code: 'AQ'}, |
Visit the new improved script here! Smooth scroll to top of page (Improved!)
If you need a plain JavaScript function to add a smooth scrolling back to the top of the page, you can use this script.
<body> tag. Like this: <body id="top">onclick function to the link. Like this: <a href="#top" onclick="scrollToTop(); return false">Back to Top ↑</a>
| Profile | download (kb/s) | upload (kb/s) | latency (ms) |
|---|---|---|---|
| Native | 0 | 0 | 0 |
| GPRS | 50 | 20 | 500 |
| 56K Dial-up | 50 | 30 | 120 |
| Mobile EDGE | 240 | 200 | 840 |
| 2G Regular | 250 | 50 | 300 |
| 2G Good | 450 | 150 | 150 |
| 3G Slow | 780 | 330 | 200 |
| // ⚠ IMPORTANT: this is old and doesn't work for many different edge cases but I'll keep it as-is for any of you want it | |
| // ⚠ IMPORTANT: you can find more robust versions in the comments or use a library implementation such as lodash's `merge` | |
| // Merge a `source` object to a `target` recursively | |
| const merge = (target, source) => { | |
| // Iterate through `source` properties and if an `Object` set property to merge of `target` and `source` properties | |
| for (const key of Object.keys(source)) { | |
| if (source[key] instanceof Object) Object.assign(source[key], merge(target[key], source[key])) | |
| } |