From 19253b920b5d43e554103ff84350f76100998637 Mon Sep 17 00:00:00 2001 From: Okiki Ojo Date: Fri, 28 Jun 2024 14:59:11 -0400 Subject: [PATCH] chore: ... --- README.md | 2 +- build/pug/layouts/layout.pug | 1 - packages/animate/README.md | 4 ++-- packages/emitter/README.md | 2 +- packages/manager/README.md | 2 +- packages/native/README.md | 2 +- 6 files changed, 6 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 5155cd4e..be346b82 100644 --- a/README.md +++ b/README.md @@ -67,7 +67,7 @@ _Note: you can install it as a separate package from the rest of the `@okikio/na ## Bundling -***Note**: All package in the `native` initiative are built for ES2020, This project expects the user to use a build tool to support older versions of browsers, the idea being most people are using evergreen browsers, so, why are web developers piling on polyfill code that most users don't need. I suggest `esbuild`, `rollup`, `*typescript`, or `webpack` for bundling the library, and for polyfills `babel` or `polyfill.io`.* +***Note**: All package in the `native` initiative are built for ES2020, This project expects the user to use a build tool to support older versions of browsers, the idea being most people are using evergreen browsers, so, why are web developers piling on polyfill code that most users don't need. I suggest `esbuild`, `rollup`, `*typescript`, or `webpack` for bundling the library, and for polyfills `babel`.* **I have found typescript to be the best method for bundling for older browsers e.g. IE11. I only suggest you use `babel` for polyfilling `Promise`, `fetch`, etc...* diff --git a/build/pug/layouts/layout.pug b/build/pug/layouts/layout.pug index c8e648dc..f127e86d 100644 --- a/build/pug/layouts/layout.pug +++ b/build/pug/layouts/layout.pug @@ -35,7 +35,6 @@ html.dark +footer - script(src="https://cdn.polyfill.io/v3/polyfill.min.js?features=default,es2015,es2018,Array.prototype.includes,Map,Set,Promise" async) block scripts script(src='./js/legacy.min.js' nomodule) script(src='./js/main.min.js' type='module' async) diff --git a/packages/animate/README.md b/packages/animate/README.md index a5f5b70d..6b370629 100644 --- a/packages/animate/README.md +++ b/packages/animate/README.md @@ -8,9 +8,9 @@ I suggest reading the in depth article I made on CSS-Tricks about `@okikio/anima _**Note**: [Custom Easing](#custom-easing), as well as a proper [Timeline](#timeline-class) are now supported._ -*Before even getting started, you will most likely need the Web Animation API, Promise, WeakMap, Set, and Map polyfills. If you install [@okikio/animate](https://www.skypack.dev/view/@okikio/animate) via [npm](https://www.npmjs.com/package/@okikio/animate) you are most likely going to need [rollup](https://rollupjs.org/) or [esbuild](https://esbuild.github.io/). You can use [web-animations-js](https://github.com/web-animations/web-animations-js), or [polyfill.io](https://polyfill.io/) to create a polyfill. The minimum feature requirement for a polyfill are Maps, Set, WeakMap, Promise, and a WebAnimation polyfill (that supports KeyframeEffect), e.g. [https://cdn.polyfill.io/v3/polyfill.min.js?features=default,es2015,es2018,Array.prototype.includes,Map,WeakMap,Set,Promise,WebAnimations](https://cdn.polyfill.io/v3/polyfill.min.js?features=default,es2015,es2018,Array.prototype.includes,Map,WeakMap,Set,Promise), and [https://cdn.jsdelivr.net/npm/web-animations-js/web-animations-next.min.js](https://cdn.jsdelivr.net/npm/web-animations-js/web-animations-next.min.js). I suggest checking out the [demo](../../build/ts/webanimation-polyfill.ts) to see how I setup the Web Animation Polyfill* +*Before even getting started, you will most likely need the Web Animation API, Promise, WeakMap, Set, and Map polyfills. If you install [@okikio/animate](https://www.skypack.dev/view/@okikio/animate) via [npm](https://www.npmjs.com/package/@okikio/animate) you are most likely going to need [rollup](https://rollupjs.org/) or [esbuild](https://esbuild.github.io/). You can use [web-animations-js](https://github.com/web-animations/web-animations-js) to create a polyfill. The minimum feature requirement for a polyfill are Maps, Set, WeakMap, Promise, and a WebAnimation polyfill (that supports KeyframeEffect), e.g. [https://cdn.jsdelivr.net/npm/web-animations-js/web-animations-next.min.js](https://cdn.jsdelivr.net/npm/web-animations-js/web-animations-next.min.js). I suggest checking out the [demo](../../build/ts/webanimation-polyfill.ts) to see how I setup the Web Animation Polyfill* -***Warning**: polyfilling may not fix animation format bugs, e.g. [composite animations](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/composite) don't work on older browsers, so, if you use `polyfill.io` and set it to check if the browser supports the feature before applying the polyfill, your project might encounter errors, as the browser may only have partial support of the Web Animation API.* +***Warning**: polyfilling may not fix animation format bugs, e.g. [composite animations](https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/composite) don't work on older browsers, so, your project might encounter errors, as the browser may only have partial support of the Web Animation API.* ***Also Note**: to properly understand `@okikio/animate`, please read up on the [Web Animation API](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate) on MDN.* diff --git a/packages/emitter/README.md b/packages/emitter/README.md index 28eee75e..de4c2b33 100644 --- a/packages/emitter/README.md +++ b/packages/emitter/README.md @@ -4,7 +4,7 @@ A small Event Emitter written in typescript with performance and ease of use in mind, it weighs **~838 B** (minified and gzipped). -*You will need a Map and Promise polyfill for older browsers. If you install `@okikio/emitter` via [npm](https://www.npmjs.com/package/@okikio/emitter) you are most likely going to need [rollup](https://rollupjs.org/) or [esbuild](https://esbuild.github.io/). You can use [polyfill.io](https://polyfill.io/), or another source to create a polyfill. The minimum feature requirement for a polyfill are Maps and Promises e.g. [https://polyfill.io/v3/polyfill.min.js?features=Promise,Map](https://polyfill.io/v3/polyfill.min.js?features=Promise,Map).* +*You will need a Map and Promise polyfill for older browsers. If you install `@okikio/emitter` via [npm](https://www.npmjs.com/package/@okikio/emitter) you are most likely going to need [rollup](https://rollupjs.org/) or [esbuild](https://esbuild.github.io/). You can use another source to create a polyfill. The minimum feature requirement for a polyfill are Maps and Promises.* You can try out `@okikio/emitter` using Gitpod: diff --git a/packages/manager/README.md b/packages/manager/README.md index d3ee00e7..4589cfc7 100644 --- a/packages/manager/README.md +++ b/packages/manager/README.md @@ -4,7 +4,7 @@ A superset of the Map class, it extends the Map classes capabilities with awesome new features; it weighs **~361 B** (minified and gzipped). -*You will need a Map and Promise polyfill for older browsers. If you install `@okikio/manager` via [npm](https://www.npmjs.com/package/@okikio/manager) you are most likely going to need [rollup](https://rollupjs.org/) or [esbuild](https://esbuild.github.io/). You can use [polyfill.io](https://polyfill.io/), or another source to create a polyfill. The minimum feature requirement for a polyfill are Maps and Promises e.g. [https://cdn.polyfill.io/v3/polyfill.min.js?features=Maps,Promise](https://cdn.polyfill.io/v3/polyfill.min.js?features=Maps,Promise).* +*You will need a Map and Promise polyfill for older browsers. If you install `@okikio/manager` via [npm](https://www.npmjs.com/package/@okikio/manager) you are most likely going to need [rollup](https://rollupjs.org/) or [esbuild](https://esbuild.github.io/). You can use another source to create a polyfill. The minimum feature requirement for a polyfill are Maps and Promises.* You can try out `@okikio/manager` using Gitpod: diff --git a/packages/native/README.md b/packages/native/README.md index 741ccd94..174c5c16 100644 --- a/packages/native/README.md +++ b/packages/native/README.md @@ -16,7 +16,7 @@ Currently many websites rely on older code to make sure they reach as wide an au `@okikio/native` uses modern browser api's like the Maps, pushState, etc.... to achieve high efficiency and performance. The browser API's can be difficult to work with, so, I developed [@okikio/manager](https://www.npmjs.com/package/@okikio/manager), [@okikio/emitter](https://www.npmjs.com/package/@okikio/emitter), and [@okiko/animate](https://www.npmjs.com/package/@okikio/animate) libraries to make them more managable. I developed these libraries to ensure the framework is well optimized and to avoid large number of dependencies. -*You will need a Map, Promise, and fetch polyfill for older browsers. If you install `@okikio/native` via [npm](https://www.npmjs.com/package/@okikio/native) you are most likely going to need [rollup](https://rollupjs.org/) or [esbuild](https://esbuild.github.io/). You can use [polyfill.io](https://polyfill.io/), or another source to create a polyfill. The minimum feature requirement for a polyfill are Map, Promise, and fetch e.g. [https://cdn.polyfill.io/v3/polyfill.min.js?features=default,es2015,es2018,Array.prototype.includes,Map,Promise,fetch](https://cdn.polyfill.io/v3/polyfill.min.js?features=default,es2015,Array.prototype.includes,Object.values,es2018,Map,Promise,fetch).* +*You will need a Map, Promise, and fetch polyfill for older browsers. If you install `@okikio/native` via [npm](https://www.npmjs.com/package/@okikio/native) you are most likely going to need [rollup](https://rollupjs.org/) or [esbuild](https://esbuild.github.io/). You can use another source to create a polyfill. The minimum feature requirement for a polyfill are Map, Promise, and fetch.* You can try out `@okikio/native` using Gitpod: