A suite of web components based on code-pen entries.

co-depends

co-depends is a suite of web components based on code-pen entries.

Entry 1. Text Scramble

Entry 2. Pure CSS Minesweeper

Being that this is css-only, it seems quite ridiculous to have to encode it in JS to make it a web component. So a deframed version can be seen in action here.

You reference it via an iframe:

<body>
    ...
    <iframe src="../css-minesweeper.html"></iframe>
    <co-depends-css-minesweeper></co-depends-css-minesweeper>
</body>

Or you can turn the beautiful css-only implementation into a js-only implementation as shown below:

It is quite interesting (to me) to compare the performance using Chrome Tools, with various throttling settings. I don't know how much of these differences are due to the way the throttling simulation works, vs. what one would see in the field.

Test Case Network Throttling CPU throttling First Meaningful Paint (sec) DOM Loaded(sec)
Pure JS Slow 3G 6x 6 9
Pure JS Slow 3G 4x 5 7
Pure JS Slow 3G 1x 4.5 5
Pure Deframed HTML Slow 3G 6x 8 8
Pure Deframed HTML Slow 3G 4x 3 5
Pure Deframed HTML Slow 3G 1x 2 2.5

It appears that the pure HTML (deframed version) outperforms when network is highly throttled, but the pure JS has an edge when CPU is highly throttled.

Entry 3. Parallax Flipping Cards

Entry 4. CSS-Only Nested Dropdown Navigation (ARIA)

Entry 5. Simple Text Animation

Entry 6. Responsive Honeycomb

Available in deframed version, or js version, which is ~3 times slower:

Entry 7. Square In a Circle

Available in deframed version, or the slower js version:

Entry 8. Periodic Table

Available in deframed version, or the slower js version:

Install

Link to this version
ImportedReleased 02 December 2018MIT License
Framework Support
Browser Independent
Install with
npm install co-depends"@0.0.9"
Run the above npm command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.0.9

Dependencies

  • xtal-latx#0.0.82
  • deframe#0.0.10