# 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 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](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: