Skip to content

Commit

Permalink
bld? Build
Browse files Browse the repository at this point in the history
  • Loading branch information
jimbob3806 committed Feb 6, 2024
1 parent cd59027 commit 10ff610
Show file tree
Hide file tree
Showing 14 changed files with 19 additions and 8 deletions.
4 changes: 4 additions & 0 deletions dist/web/index.0328ad40.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions dist/web/index.0328ad40.js.map

Large diffs are not rendered by default.

4 changes: 4 additions & 0 deletions dist/web/index.3c1c5c61.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions dist/web/index.3c1c5c61.js.map

Large diffs are not rendered by default.

4 changes: 0 additions & 4 deletions dist/web/index.6581faf8.js

This file was deleted.

1 change: 0 additions & 1 deletion dist/web/index.6581faf8.js.map

This file was deleted.

2 changes: 1 addition & 1 deletion dist/web/index.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Blurrid</title><link rel="icon" type="image/x-icon" href="/favicon.81e22c64.ico"><link rel="stylesheet" href="/404.898d5046.css"></head><body> <div class="page-item"> <h2 class="item-title">About</h2> <p> This is a demo page for <a href="https://github.com/blameitonyourisp/blurrid">blurrid</a>, a <a href="https://nodejs.org/en">nodejs</a> image blur module based on the <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">dct algorithm</a>, paired with a custom <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components">web component</a> for rendering blurred placeholder images on the client before the original image is loaded. </p> <p> This can help increase loading speeds of sites with many image assets by reducing the bandwidth required for the initial load. Additionally, a blurred placeholder image looks aesthetically pleasing, whilst preventing <a href="https://css-tricks.com/content-jumping-avoid/">content jumping</a> when the original image is loaded. See the <a href="#gallery">gallery below</a> for some examples. </p> <p> The blur module and custom web component demonstrated on this page are open source. Please visit the github link below to review or contribute to the code, or to find out more about using this package in your own project. </p> <a href="https://github.com/blameitonyourisp/blurrid" class="card-action"> <img src="/github.61897066.svg" alt="Github icon"> blurrid </a> </div> <div class="page-item"> <a name="gallery"><h2 class="item-title">Gallery</h2></a> <p> Below are some example blurred placeholder images created using the <a href="https://github.com/blameitonyourisp/blurrid">blurrid</a> package, and rendered using the included custom web component. All examples have been generated using 16 max samples, "4:2:2" <a href="https://en.wikipedia.org/wiki/Chroma_subsampling">chroma subsampling</a>, with a 64 character long <a href="https://datatracker.ietf.org/doc/html/rfc4648#section-5">url-safe base 64</a> encoded "blurrid" string. </p> <p> Similar to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading">loading property</a> on standard image elements, the blurrid custom web component offers both <code>lazy</code> and <code>eager</code> loading methods for scheduling when to load the original image. Additionally the blurrid web component provides an <code>onclick</code> loading method which will not load the original image until the blurred placeholder is clicked. All placeholders below use the <code>onclick</code> loading method. </p> <div class="note"> <i data-lucide="info"></i> <p> <b>NOTE:</b> To load the original image, click on each blurred placeholder. </p> </div> <div class="gallery-container"> <figure class="gallery-item"> <img is="blurrid-image" data-src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=640" data-loading="onclick" data-blurrid="B4ALPQsQiURfkGRL6f5mmBSg1nAbo5qUvBciOYTHCn3EjhOkeobdbIiDwUgtBQmA" data-size="32" alt="Woman in portrait orientation"> <figcaption>Photo by <a href="https://unsplash.com/@cikstefan?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Štefan Štefančík</a> on <a href="https://unsplash.com/photos/smiling-woman-wearing-white-and-black-pinstriped-collared-top-QXevDflbl8A?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a> </figcaption> </figure> <figure class="gallery-item"> <img is="blurrid-image" data-src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=640" data-loading="onclick" data-blurrid="B4AFABALiUc_iSQTxSY21AYQMqwA0J97yRxOBuYSSrCUi0ONRkKUHw7FQtEYVXkC" data-size="32" alt="Woman in landscape orientation"> <figcaption>Photo by <a href="https://unsplash.com/@chrisjoelcampbell?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Christopher Campbell</a> on <a href="https://unsplash.com/photos/shallow-focus-photography-of-woman-outdoor-during-day-rDEOVtE7vOs?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a> </figcaption> </figure> <figure class="gallery-item"> <img is="blurrid-image" data-src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?q=80&w=640" data-loading="onclick" data-blurrid="B4AFABALiUZNhPyXCMBZ2BMg87AkiEEuAjlWwgLAwYJT8sGT8HApRYIj6uuo4LCw" data-size="32" alt="Lots of fruit"> <figcaption>Photo by <a href="https://unsplash.com/@jimmydean?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Jimmy Dean</a> on <a href="https://unsplash.com/photos/assorted-fruits-on-brown-wooden-bowls-Yn0l7uwBrpw?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a> </figcaption> </figure> <figure class="gallery-item"> <img is="blurrid-image" data-src="https://images.unsplash.com/photo-1565299507177-b0ac66763828?q=80&w=640" data-loading="onclick" data-blurrid="B4AKVAwQiUchieT6oRF1YPuH3IRYLLIhyIFJREe6aCU4Ij6Cw5k16LAsQzvCEToL" data-size="32" alt="Cheesy burger"> <figcaption>Photo by <a href="https://unsplash.com/@briewilly?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Chad Montano</a> on <a href="https://unsplash.com/photos/burgers--GFCYhoRe48?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a> </figcaption> </figure> </div> </div> <script type="module" src="/index.6581faf8.js"></script> </body></html>
<!DOCTYPE html><html lang="en"><head><script nomodule defer src="/index.runtime.e6379ac9.js"></script><script type="module" src="/index.runtime.69c18e5e.js"></script><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Blurrid</title><link rel="icon" type="image/x-icon" href="/favicon.81e22c64.ico"><link rel="stylesheet" href="/404.898d5046.css"></head><body> <div class="page-item"> <h2 class="item-title">About</h2> <p> This is a demo page for <a href="https://github.com/blameitonyourisp/blurrid">blurrid</a>, a <a href="https://nodejs.org/en">nodejs</a> image blur module based on the <a href="https://en.wikipedia.org/wiki/Discrete_cosine_transform">dct algorithm</a>, paired with a custom <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components">web component</a> for rendering blurred placeholder images on the client before the original image is loaded. </p> <p> This can help increase loading speeds of sites with many image assets by reducing the bandwidth required for the initial load. Additionally, a blurred placeholder image looks aesthetically pleasing, whilst preventing <a href="https://css-tricks.com/content-jumping-avoid/">content jumping</a> when the original image is loaded. See the <a href="#gallery">gallery below</a> for some examples. </p> <p> The blur module and custom web component demonstrated on this page are open source. Please visit the github link below to review or contribute to the code, or to find out more about using this package in your own project. </p> <a href="https://github.com/blameitonyourisp/blurrid" class="card-action"> <img src="/github.61897066.svg" alt="Github icon"> blurrid </a> </div> <div class="page-item"> <a name="gallery"><h2 class="item-title">Gallery</h2></a> <p> Below are some example blurred placeholder images created using the <a href="https://github.com/blameitonyourisp/blurrid">blurrid</a> package, and rendered using the included custom web component. All examples have been generated using 16 max samples, "4:2:2" <a href="https://en.wikipedia.org/wiki/Chroma_subsampling">chroma subsampling</a>, with a 64 character long <a href="https://datatracker.ietf.org/doc/html/rfc4648#section-5">url-safe base 64</a> encoded "blurrid" string. </p> <p> Similar to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading">loading property</a> on standard image elements, the blurrid custom web component offers both <code>lazy</code> and <code>eager</code> loading methods for scheduling when to load the original image. Additionally the blurrid web component provides an <code>onclick</code> loading method which will not load the original image until the blurred placeholder is clicked. All placeholders below use the <code>onclick</code> loading method. </p> <div class="note"> <i data-lucide="info"></i> <p> <b>NOTE:</b> To load the original image, click on each blurred placeholder. </p> </div> <div class="gallery-container"> <figure class="gallery-item"> <img is="blurrid-image" data-src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?q=80&w=640" data-loading="onclick" data-blurrid="B4ALPQsQiURfkGRL6f5mmBSg1nAbo5qUvBciOYTHCn3EjhOkeobdbIiDwUgtBQmA" data-size="32" alt="Woman in portrait orientation"> <figcaption>Photo by <a href="https://unsplash.com/@cikstefan?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Štefan Štefančík</a> on <a href="https://unsplash.com/photos/smiling-woman-wearing-white-and-black-pinstriped-collared-top-QXevDflbl8A?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a> </figcaption> </figure> <figure class="gallery-item"> <img is="blurrid-image" data-src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=640" data-loading="onclick" data-blurrid="B4AFABALiUc_iSQTxSY21AYQMqwA0J97yRxOBuYSSrCUi0ONRkKUHw7FQtEYVXkC" data-size="32" alt="Woman in landscape orientation"> <figcaption>Photo by <a href="https://unsplash.com/@chrisjoelcampbell?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Christopher Campbell</a> on <a href="https://unsplash.com/photos/shallow-focus-photography-of-woman-outdoor-during-day-rDEOVtE7vOs?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a> </figcaption> </figure> <figure class="gallery-item"> <img is="blurrid-image" data-src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?q=80&w=640" data-loading="onclick" data-blurrid="B4AFABALiUZNhPyXCMBZ2BMg87AkiEEuAjlWwgLAwYJT8sGT8HApRYIj6uuo4LCw" data-size="32" alt="Lots of fruit"> <figcaption>Photo by <a href="https://unsplash.com/@jimmydean?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Jimmy Dean</a> on <a href="https://unsplash.com/photos/assorted-fruits-on-brown-wooden-bowls-Yn0l7uwBrpw?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a> </figcaption> </figure> <figure class="gallery-item"> <img is="blurrid-image" data-src="https://images.unsplash.com/photo-1565299507177-b0ac66763828?q=80&w=640" data-loading="onclick" data-blurrid="B4AKVAwQiUchieT6oRF1YPuH3IRYLLIhyIFJREe6aCU4Ij6Cw5k16LAsQzvCEToL" data-size="32" alt="Cheesy burger"> <figcaption>Photo by <a href="https://unsplash.com/@briewilly?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Chad Montano</a> on <a href="https://unsplash.com/photos/burgers--GFCYhoRe48?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a> </figcaption> </figure> </div> </div> <script type="module" src="/index.0328ad40.js"></script><script src="/index.3c1c5c61.js" nomodule defer></script> </body></html>
2 changes: 2 additions & 0 deletions dist/web/index.runtime.69c18e5e.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions dist/web/index.runtime.69c18e5e.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions dist/web/index.runtime.e6379ac9.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 10ff610

Please sign in to comment.