Merge pull request #70 from shinsenter/v2.0

Updated README.md
shinsenter · Feb 10, 2021 · 16d09ff · 16d09ff
2 parents 5599811 + 69ccd5f
commit 16d09ff
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -48,6 +48,7 @@ to flexibly optimize other resources in your website.
 
 ## Key features
 
+- 🧶 Under 1KB (gzipped)
 - 🎯 No dependencies, no jQuery
 - ⚡️ Native API, blazing fast
 - ✅ Legacy browsers support (IE9+)
@@ -58,9 +59,11 @@ to flexibly optimize other resources in your website.
 
 ## Browser support
 
-Available in latest browsers, also works perfectly with Internet Explorer 9 and later.
+Available in latest browsers,
+also works perfectly with Internet Explorer 9
+<sup title="With including `IntersectionObserver` polyfill library">*</sup> and later.
 
-- 🖥 IE9+
+- 🖥 IE9+ / Microsoft EDGE *
 - 🖥 Firefox 4+
 - 🖥 Safari 3+
 - 🖥 Chrome *
@@ -73,7 +76,7 @@ Available in latest browsers, also works perfectly with Internet Explorer 9 and
 
 ### Basic
 
-Insert `defer.min.js` of this library into your HTML page,
+Add `defer.min.js` from this library into your HTML page,
 just below the opening `<head>` tag:
 
 ```html
@@ -82,7 +85,8 @@ just below the opening `<head>` tag:
   <title>My Awesome Page</title>
 
   <!-- Put defer.min.js here -->
-  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@2.0.0/dist/defer.min.js"></script>
+  <script src="defer.js/dist/defer.min.js"></script>
+  <!-- From CDN: https://cdn.jsdelivr.net/npm/@shinsenter/defer.js/dist/defer.min.js -->
 
   <!-- ... -->
 </head>
@@ -100,7 +104,8 @@ instead of `defer.min.js`.
 
 ```html
 <!-- Put defer_plus.min.js here -->
-<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@2.0.0/dist/defer_plus.min.js"></script>
+<script src="defer.js/dist/defer_plus.min.js"></script>
+<!-- From CDN: https://cdn.jsdelivr.net/npm/@shinsenter/defer.js/dist/defer_plus.min.js -->
 ```
 
 ### Inlining the library
@@ -121,7 +126,6 @@ to minimize the number of requests.
   <!-- ... -->
 </head>
 ```
-
 ## Functions
 
 * [Defer(func, [delay])](#Defer) ⇒ <code>void</code>
@@ -163,8 +167,10 @@ Delay some heavy DOM manipulations in JavaScript.
 
 ```js
 Defer(function() {
+  // Some JavaScript that may block page rendering
+  // such as calling jQuery's fadeIn() feature
   jQuery('div').hide().fadeIn().show();
-});
+}); // <- script runs after the page has completely loaded
 ```
 **Example**  
 Delay the same JavaScript as above for 3000ms.
@@ -434,7 +440,7 @@ to add animation to the successfully loaded elements.
 ```
 **Example**  
 This function can be used similarly for other tags
-such as ifram, video, audio, picture tags.
+such as `<iframe>`, `<video>`, `<audio>`, `<picture>` tags.
 
 ```html
 <script>

diff --git a/docs/_config.yml b/docs/_config.yml
@@ -0,0 +1 @@
+theme: jekyll-theme-tactile
diff --git a/wiki/about.md → docs/about.md b/wiki/about.md → docs/about.md
@@ -48,6 +48,7 @@ to flexibly optimize other resources in your website.
 
 ## Key features
 
+- 🧶 Under 1KB (gzipped)
 - 🎯 No dependencies, no jQuery
 - ⚡️ Native API, blazing fast
 - ✅ Legacy browsers support (IE9+)
@@ -58,9 +59,11 @@ to flexibly optimize other resources in your website.
 
 ## Browser support
 
-Available in latest browsers, also works perfectly with Internet Explorer 9 and later.
+Available in latest browsers,
+also works perfectly with Internet Explorer 9
+<sup title="With including `IntersectionObserver` polyfill library">*</sup> and later.
 
-- 🖥 IE9+
+- 🖥 IE9+ / Microsoft EDGE *
 - 🖥 Firefox 4+
 - 🖥 Safari 3+
 - 🖥 Chrome *
@@ -73,7 +76,7 @@ Available in latest browsers, also works perfectly with Internet Explorer 9 and
 
 ### Basic
 
-Insert `defer.min.js` of this library into your HTML page,
+Add `defer.min.js` from this library into your HTML page,
 just below the opening `<head>` tag:
 
 ```html
@@ -82,7 +85,8 @@ just below the opening `<head>` tag:
   <title>My Awesome Page</title>
 
   <!-- Put defer.min.js here -->
-  <script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@2.0.0/dist/defer.min.js"></script>
+  <script src="defer.js/dist/defer.min.js"></script>
+  <!-- From CDN: https://cdn.jsdelivr.net/npm/@shinsenter/defer.js/dist/defer.min.js -->
 
   <!-- ... -->
 </head>
@@ -100,7 +104,8 @@ instead of `defer.min.js`.
 
 ```html
 <!-- Put defer_plus.min.js here -->
-<script src="https://cdn.jsdelivr.net/npm/@shinsenter/defer.js@2.0.0/dist/defer_plus.min.js"></script>
+<script src="defer.js/dist/defer_plus.min.js"></script>
+<!-- From CDN: https://cdn.jsdelivr.net/npm/@shinsenter/defer.js/dist/defer_plus.min.js -->
 ```
 
 ### Inlining the library
@@ -121,4 +126,3 @@ to minimize the number of requests.
   <!-- ... -->
 </head>
 ```
-
diff --git a/wiki/apis.md → docs/apis.md b/wiki/apis.md → docs/apis.md
@@ -39,8 +39,10 @@ Delay some heavy DOM manipulations in JavaScript.
 
 ```js
 Defer(function() {
+  // Some JavaScript that may block page rendering
+  // such as calling jQuery's fadeIn() feature
   jQuery('div').hide().fadeIn().show();
-});
+}); // <- script runs after the page has completely loaded
 ```
 **Example**  
 Delay the same JavaScript as above for 3000ms.
@@ -310,7 +312,7 @@ to add animation to the successfully loaded elements.
 ```
 **Example**  
 This function can be used similarly for other tags
-such as ifram, video, audio, picture tags.
+such as `<iframe>`, `<video>`, `<audio>`, `<picture>` tags.
 
 ```html
 <script>

diff --git a/wiki/links.md → docs/links.md b/wiki/links.md → docs/links.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@shinsenter/defer.js",
   "title": "defer.js",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.2",
   "description": "🥇 A super small, super efficient library that helps you lazy load everything like images, video, audio, iframes as well as stylesheets, and JavaScript.",
   "homepage": "https://code.shin.company/defer.js#readme",
   "author": {
@@ -58,7 +58,7 @@
     "lint": "eslint --config build/.eslintrc --ext .js src --fix",
     "cleanup": "rm -rf ./node_modules package-lock.json",
     "tools": "npm -g install jsdoc-to-markdown eslint html-minifier js-beautify uglify-js",
-    "readme": "jsdoc2md --separators -l html -g grouped ./src/*.js > ./wiki/apis.md && cat ./wiki/*.md > README.md",
+    "readme": "jsdoc2md --separators -l html -g grouped ./src/*.js > ./docs/apis.md && cat ./docs/*.md > README.md",
     "pull": "npm run cleanup && npm run tools && npm i",
     "polyfill": "uglifyjs --config-file build/.uglifyjs -o dist/polyfill.min.js node_modules/intersection-observer/intersection-observer.js",
     "build": "npm run lint && npm run s1 && npm run s2 && npm run polyfill && npm run demo & npm run readme",

diff --git a/src/defer.js b/src/defer.js
@@ -201,8 +201,10 @@
      *
      * ```js
      * Defer(function() {
+     *   // Some JavaScript that may block page rendering
+     *   // such as calling jQuery's fadeIn() feature
      *   jQuery('div').hide().fadeIn().show();
-     * });
+     * }); // <- script runs after the page has completely loaded
      * ```
      *
      * @example
@@ -479,7 +481,7 @@
      *
      * @example
      * This function can be used similarly for other tags
-     * such as ifram, video, audio, picture tags.
+     * such as `<iframe>`, `<video>`, `<audio>`, `<picture>` tags.
      *
      * ```html
      * <script>

diff --git a/v1.1/README.md b/v1.1/README.md
@@ -111,10 +111,8 @@ Available in latest browsers. This library also works perfectly with Internet Ex
 - 📱 iOS 3.2+
 
 
-
 ## Install to your page
 
-
 You can load the library via **CDN** and include it right after the opening `<head>` tag of your page.
 
 ```html