co-depends
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:
Links
Compatibility
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 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
...
| 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 |
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