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

krisleech

Renew GPG key

Given that your key has expired.

$ gpg --list-keys
$ gpg --edit-key KEYID

Use the expire command to set a new expire date:

Rich-Harris

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.

hofmannsven

Git

Global Settings

• Related Setup: https://gist.github.com/hofmannsven/6814278
• Related Pro Tips: https://ochronus.com/git-tips-from-the-trenches/
• Interactive Beginners Tutorial: http://try.github.io/
• Git Cheatsheet by GitHub: https://services.github.com/on-demand/downloads/github-git-cheat-sheet/

Reminder

Press minus + shift + s and return to chop/fold long lines!

cobyism

Deploying a subfolder to GitHub Pages

Sometimes you want to have a subdirectory on the master branch be the root directory of a repository’s gh-pages branch. This is useful for things like sites developed with Yeoman, or if you have a Jekyll site contained in the master branch alongside the rest of your code.

For the sake of this example, let’s pretend the subfolder containing your site is named dist.

Step 1

Remove the dist directory from the project’s .gitignore file (it’s ignored by default by Yeoman).

addyosmani

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

sebmarkbage

var Bar1 = base => class extends base {
  componentWillMount(){
    super.componentWillMount();
    console.log('Bar1');
  }
};

var Bar2 = base => class extends base {
  componentWillMount(){
    super.componentWillMount();

bluesmoon

<script id="nb-loader-script">
(function(url) {

  // document.currentScript works on most browsers, but not all
  var where = document.currentScript || document.getElementById("nb-loader-script"),
      promoted = false,
      LOADER_TIMEOUT = 3000,
      IDPREFIX = "__nb-script";

  // function to promote a preload link node to an async script node

eyeseast

I have an updated version of this on my blog here: https://chrisamico.com/blog/2023-01-14/python-setup/.

Python

This is my recommended Python setup, as of Fall 2022. The Python landscape can be a confusing mess of overlapping tools that sometimes don't work well together. This is an effort to standardize our approach and environments.

Tools and helpful links:

• Python docs: https://docs.python.org/3/
• Python Standard Library:  - Start here when you're trying to solve a specific problem

jkrems

JavaScript File Format Differences

There's the pervarsive notion that all JS is created equal and that there's only minor and easily detectable differences between the various file formats used to author JavaScript. This is correct, from a certain point of view.

For many people writing JavaScript that gets passed into build tools,