As easy as 1, 2, 3!
Updated:
- Aug, 08, 2022 update
config
docs for npm 8+ - Jul 27, 2021 add private scopes
- Jul 22, 2021 add dist tags
- Jun 20, 2021 update for
--access=public
- Sep 07, 2020 update docs for
npm version
At the top of the file there should be a short introduction and/ or overview that explains what the project is. This description should match descriptions added for package managers (Gemspec, package.json, etc.)
Show what the library does as concisely as possible, developers should be able to figure out how your project solves their problem by looking at the code example. Make sure the API you are showing off is obvious, and that your code is short and concise.
(function() { | |
var CSSCriticalPath = function(w, d, opts) { | |
var opt = opts || {}; | |
var css = {}; | |
var pushCSS = function(r) { | |
if(!!css[r.selectorText] === false) css[r.selectorText] = {}; | |
var styles = r.style.cssText.split(/;(?![A-Za-z0-9])/); | |
for(var i = 0; i < styles.length; i++) { | |
if(!!styles[i] === false) continue; | |
var pair = styles[i].split(": "); |
(by @andrestaltz)
If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.
// UPD: | |
// Now available as npm module! | |
// Check out https://github.com/RReverser/better-log for details. | |
console.log = (function (log, inspect) { | |
return function () { | |
return log.apply(this, Array.prototype.map.call(arguments, function (arg) { | |
return inspect(arg, { depth: 1, colors: true }); | |
})); | |
}; |
javascript:(function(){var styles = document.querySelectorAll('link[rel=\'stylesheet\']'); for (var s = 0; s < styles.length; s++) {styles[s].mediax = styles[s].media;if (styles[s].media === 'only x') { styles[s].media = styles[s].mediax; } else if (styles[s].media !== 'print') {styles[s].media = 'only x';}}})(); |
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