millermedeiros

" =============================================================================
" Miller Medeiros .vimrc file
" -----------------------------------------------------------------------------
" heavily inspired by: @factorylabs, @scrooloose, @nvie, @gf3, @bit-theory, ...
" =============================================================================


" -----------------------------------------------------------------------------
" BEHAVIOR

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

jakub-g

<script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)

DavidWells

/* Ultra lightweight Github REST Client */
// original inspiration via https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb
const token = 'github-token-here'
const githubClient = generateAPI('https://api.github.com', {
  headers: {
    'User-Agent': 'xyz',
    'Authorization': `bearer ${token}`
  }
})

salcode

# -----------------------------------------------------------------
# .gitignore for WordPress @salcode
# ver 20180808
#
# From the root of your project run
# curl -O https://gist.githubusercontent.com/salcode/b515f520d3f8207ecd04/raw/.gitignore
# to download this file
#
# By default all files are ignored.  You'll need to whitelist
# any mu-plugins, plugins, or themes you want to include in the repo.

romainl

My Vim-related gists

Long-form

• How to use Tim Pope's Pathogen
• Idiomatic vimrc (superseded by idiomatic-vimrc)
• Clipboard sharing on Mac OS X is easy
• Apprentice — The Making Of
• Vim: pushing built-in features beyond their limits
• The right way to override any highlighting if you don't want to edit the colorscheme file directly

JulienPradet

<script>
  import {trapFocus} from "./trapFocus";
</script>

<div use:trapFocus>
  <button>Hi!</button>
  <button>Second button</button>
</div>

cheeaun

JavaScript error logging services

To allow easier contributions, I've moved this to https://github.com/cheeaun/javascript-error-logging. Thanks! 😄

• http://errorception.com/ - translate error messages to English
• http://www.exceptionhub.com/
• http://jserrlog.appspot.com/
• http://www.muscula.com/ - source maps, translate error messages to English
• https://www.airbrake.io/ - tracekit, source maps

rviscomi

Crash Course in CrUX

CrUX is the Chrome UX Report from Google. This crash course will take you through everything you need to get the most out of the data.

1. Official Docs

https://developers.google.com/web/tools/chrome-user-experience-report/

2. Guides on web.dev

igrigorik

Web Performance Power Tool: HTTP Archive (HAR) - blog post with video and details about the projects we covered.

The HAR Show GDL episode on YouTube

---

• HAR Spec: http://www.softwareishard.com/blog/har-12-spec/

• HTTP Archive (powered by HAR files): www.httparchive.org

• HAR Viewer: http://code.google.com/p/harviewer/