# spikes

### Advanced CSS

How can we use advanced CSS features to create complex custom components?

#### Questions to consider

1. What are "combinator" selectors? Can you provide examples where they're useful?
2. What are pseudo-elements? Can you provide examples where they're useful?
3. How might you create custom-styled checkboxes using both of the above?

#### Useful resources

* [CSS selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
* [A Whole Bunch of Amazing Stuff Pseudo Elements Can Do](https://css-tricks.com/pseudo-element-roundup/)
* [Under-Engineered Custom Radio Buttons and Checkboxen](https://adrianroselli.com/2017/05/under-engineered-custom-radio-buttons-and-checkboxen.html)

### Advanced DOM

How can we use advanced DOM features to make rendering complex UIs easier.

#### Questions to consider

1. What is a NodeList?
   * How is it different from an array?
   * What's the different between "live" and "static" NodeLists?
2. What is the `<template>` element?
   * How can we use this to render dynamic UI?

#### Useful resources

* [NodeList | MDN](https://developer.mozilla.org/en-US/docs/Web/API/NodeList)
* [The Content Template Element | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)
* [Template element example](https://codepen.io/oliverjam/pen/yLNEOQO?editors=1010)

### Checking our code

What are all the different ways to make sure our code is correct?

#### Questions to consider

1. What is Prettier? How might it help us write better code?
2. What is static analysis? How can a linter help us avoid bugs?
3. What are the pros and cons of unit, integration and end-to-end tests?

#### Useful resources

* [How To Format Code with Prettier in Visual Studio Code](https://www.digitalocean.com/community/tutorials/how-to-format-code-with-prettier-in-visual-studio-code)
* [ESLint Getting Started](https://eslint.org/docs/user-guide/getting-started)
* [Static vs Unit vs Integration vs E2E Testing for Frontend Apps](https://kentcdodds.com/blog/unit-vs-integration-vs-e2e-tests)

### Testing methodologies

How do different testing methodologies try to improve the way we write tests?

#### Questions to consider

1. What is Test-Driven Development (TDD)? Can it help us write better code?
2. What is Behavior-Driven Development (BDD)? How do we translate user requirements into automated tests?
3. What is test coverage? Can this tell us about the _quality_ of our tests?

#### Useful resources

These resources are helpful extra reading that may clarify or enhance concepts you're learning in the main curriculum.

* [TDD changed my life](https://medium.com/javascript-scene/tdd-changed-my-life-5af0ce099f80)
* [Behavior Driven Development and Functional Testing](https://medium.com/javascript-scene/behavior-driven-development-bdd-and-functional-testing-62084ad7f1f2)
* [Test Coverage](https://www.martinfowler.com/bliki/TestCoverage.html)
*   #### [Make Your Test Fail](https://kentcdodds.com/blog/make-your-test-fail)

    Good testing practices so you can be confident your tests are working.
*   #### [The advantages of the template element](https://codepen.io/oliverjam/pen/yLNEOQO?editors=1010)

    A comparison of creating DOM elements manually versus using the `<template>` element. Useful technique if you're dynamically rendering lots of stuff with JS.
