vasanthk

<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)

fay-jai

import React from "react";
import { render } from "react-dom";

const ParentComponent = React.createClass({
  getDefaultProps: function() {
    console.log("ParentComponent - getDefaultProps");
  },
  getInitialState: function() {
    console.log("ParentComponent - getInitialState");
    return { text: "" };

vasanthk

System Design Cheatsheet

Picking the right architecture = Picking the right battles + Managing trade-offs

Basic Steps

1. Clarify and agree on the scope of the system

• User cases (description of sequences of events that, taken together, lead to a system doing something useful)
  • Who is going to use it?
  • How are they going to use it?

azu

// ==UserScript==
// @name        Medium: remove location hash
// @namespace   http://efcl.info/
// @description Remove location hash from medium
// @include     https://medium.com/*#*
// @version     1
// @grant       none
// ==/UserScript==

function removeLocationHash(){

paulirish

/* bling.js */

window.$ = document.querySelectorAll.bind(document);

Node.prototype.on = window.on = function (name, fn) {
  this.addEventListener(name, fn);
}

NodeList.prototype.__proto__ = Array.prototype;

gregrickaby

/**
 * Be sure to include library scripts in this order. Can be placed either
 * in the header or footer.
 */
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>

reygreen1

###移动技术

根据mobileTech项目整理而成，原文地址。

####webapp实践的总结

It’s not a web app. It’s an app you install from the web.

当前 WEB APP 开发的最佳实践

yyx990803

百度：Tangram

基本上就是个百度版jQuery，2.0版本使用链式API，更像了。
配套的还有UI库Magic和模版引擎BaiduTemplate（和ejs很像）

腾讯：JX

理念在介绍里面写的很详细，代码清晰，注释丰富，可读性很好，但只有文档没有实例。
比较传统的大块头框架，本质上来说还是一堆工具方法和对象的堆积，提供了很基本的模块化的开发方式，但没有模块间的依赖关系支持。

mikedfunk

This uses Twitter Bootstrap classes for CodeIgniter pagination.

Drop this file into application/config.

paulmillr

Most active GitHub users (git.io/top)

The count of contributions (summary of Pull Requests, opened issues and commits) to public repos at GitHub.com from Wed, 21 Sep 2022 till Thu, 21 Sep 2023.

Only first 1000 GitHub users according to the count of followers are taken. This is because of limitations of GitHub search. Sorting algo in pseudocode:

githubUsers
 .filter(user => user.followers > 1000)