co-depends
co-depends is a suite of web components based on code-pen entries.
Text Scramble
Entry 1.Pure CSS Minesweeper
Entry 2.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:
...
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.
Parallax Flipping Cards
Entry 3.CSS-Only Nested Dropdown Navigation (ARIA)
Entry 4.Simple Text Animation
Entry 5.Responsive Honeycomb
Entry 6.Available in deframed version, or js version, which is ~3 times slower:
Square In a Circle
Entry 7.Available in deframed version, or the slower js version:
Periodic Table
Entry 8.Available in deframed version, or the slower js version: