Directory

← Back

co-depends

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

Author

Rating

Popularity

<100

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 CaseNetwork ThrottlingCPU throttlingFirst Meaningful Paint (sec)DOM Loaded(sec)
Pure JSSlow 3G6x69
Pure JSSlow 3G4x57
Pure JSSlow 3G1x4.55
Pure Deframed HTMLSlow 3G6x88
Pure Deframed HTMLSlow 3G4x35
Pure Deframed HTMLSlow 3G1x22.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:

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • xtal-latx#0.0.82
  • deframe#0.0.22
  • h2h-tf#0.0.3
Released
2019-01-17
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Browser
Browser Independent

co-depends - Vaadin Add-on Directory

A suite of web components based on code-pen entries. co-depends - Vaadin Add-on Directory
# co-depends co-depends is a suite of web components based on code-pen entries. ## Entry 1. [Text Scramble](https://codepen.io/soulwire/pen/mErPAK) ## Entry 2. [Pure CSS Minesweeper](https://codepen.io/bali_balo/pen/BLJONk) 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](https://www.webcomponents.org/element/deframe) version can be seen in action [here](https://bahrus.github.io/co-depends/css-minesweeper/demo/dev.html). You reference it via an iframe: ```html ... ``` 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 CaseNetwork ThrottlingCPU throttlingFirst Meaningful Paint (sec)DOM Loaded(sec)
Pure JSSlow 3G6x69
Pure JSSlow 3G4x57
Pure JSSlow 3G1x4.55
Pure Deframed HTMLSlow 3G6x88
Pure Deframed HTMLSlow 3G4x35
Pure Deframed HTMLSlow 3G1x22.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](https://codepen.io/tyrellrummage/pen/wqGgLO) ## Entry 4. [CSS-Only Nested Dropdown Navigation (ARIA)](https://codepen.io/gabriellewee/pen/oWyObX) ## Entry 5. [Simple Text Animation](https://codepen.io/yemon/pen/pWoROm) ## Entry 6. [Responsive Honeycomb](https://codepen.io/gzuzkstro/pen/ebdxZQ) Available in [deframed version](https://www.webcomponents.org/element/deframe), or js version, which is ~3 times slower: ## Entry 7. [Square In a Circle](https://codepen.io/raymondyang/pen/eWGewE) Available in [deframed version](https://www.webcomponents.org/element/deframe), or the slower js version: ## Entry 8. [Periodic Table](https://codepen.io/mikegolus/pen/OwrPgB) Available in [deframed version](https://www.webcomponents.org/element/deframe), or the slower js version:
View on NPM
View on GitHub

co-depends version 0.0.0
### Dependencies

co-depends version 0.0.1
### Dependencies * xtal-latx#0.0.76

co-depends version 0.0.2
### Dependencies * xtal-latx#0.0.76

co-depends version 0.0.3
### Dependencies * xtal-latx#0.0.76

co-depends version 0.0.4
### Dependencies * xtal-latx#0.0.76

co-depends version 0.0.5
### Dependencies * xtal-latx#0.0.76

co-depends version 0.0.6
### Dependencies * xtal-latx#0.0.76 * deframe#0.0.10

co-depends version 0.0.7
### Dependencies * xtal-latx#0.0.76 * deframe#0.0.10

co-depends version 0.0.8
### Dependencies * xtal-latx#0.0.79 * deframe#0.0.10

co-depends version 0.0.9
### Dependencies * xtal-latx#0.0.82 * deframe#0.0.10

co-depends version 0.0.10
### Dependencies * xtal-latx#0.0.82 * deframe#0.0.10

co-depends version 0.0.11
### Dependencies * xtal-latx#0.0.82 * deframe#0.0.10

co-depends version 0.0.12
### Dependencies * xtal-latx#0.0.82 * deframe#0.0.10

co-depends version 0.0.13
### Dependencies * xtal-latx#0.0.82 * deframe#0.0.10 * h2h-tf#0.0.3

co-depends version 0.0.14
### Dependencies * xtal-latx#0.0.82 * deframe#0.0.10 * h2h-tf#0.0.3

co-depends version 0.0.15
### Dependencies * xtal-latx#0.0.82 * deframe#0.0.10 * h2h-tf#0.0.3

co-depends version 0.0.16
### Dependencies * xtal-latx#0.0.82 * deframe#0.0.10 * h2h-tf#0.0.3

co-depends version 0.0.17
### Dependencies * xtal-latx#0.0.82 * deframe#0.0.10 * h2h-tf#0.0.3

co-depends version 0.0.18
### Dependencies * xtal-latx#0.0.82 * deframe#0.0.10 * h2h-tf#0.0.3

co-depends version 0.0.19
### Dependencies * xtal-latx#0.0.82 * deframe#0.0.22 * h2h-tf#0.0.3

co-depends version 0.0.20
### Dependencies * xtal-latx#0.0.82 * deframe#0.0.22 * h2h-tf#0.0.3

co-depends version 0.0.21
### Dependencies * xtal-latx#0.0.82 * deframe#0.0.22 * h2h-tf#0.0.3

co-depends version 0.0.22
### Dependencies * xtal-latx#0.0.82 * deframe#0.0.22 * h2h-tf#0.0.3

co-depends version 0.0.23
### Dependencies * xtal-latx#0.0.82 * deframe#0.0.22 * h2h-tf#0.0.3

Online