Paweł Lesiecki plesiecki

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.

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

To make this work in CSS:

background: url('images.svg#chart');

or img:

<img src="images.svg#chart">

Long Live Icon Fonts!

or, a Quick PSA on icon fonts and ligatures.

tl;dr: keep using icon fonts, they are nice, just enable ligatures

These are my talking notes at the http://wwweeklies.com/ on 2015-12-04:

This Seriously, Don’t Use Icon Fonts post came out
This I agree with: SVG is really nice for the Web

lodash v4.17.20

Using `<details>` in GitHub

Suppose you're opening an issue and there's a lot noisey logs that may be useful.

Rather than wrecking readability, wrap it in a <details> tag!

<details>
 Summary Goes Here

Stuff I wish I'd known sooner about service workers

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.

Use Canary for development instead of Chrome stable

~~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.~~

	var elements = document.querySelectorAll("div"),
	callback = (el) => { console.log(el); };

	// Spread operator
	[...elements].forEach(callback);

	// Array.from()
	Array.from(elements).forEach(callback);

	// for...of statement

	import Foundation
	import WebKit

	final class WebCacheCleaner {

	class func clean() {
	HTTPCookieStorage.shared.removeCookies(since: Date.distantPast)
	print("[WebCacheCleaner] All cookies deleted")

	WKWebsiteDataStore.default().fetchDataRecords(ofTypes: WKWebsiteDataStore.allWebsiteDataTypes()) { records in