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

• A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

• Under-Engineered Custom Radio Buttons and Checkboxen

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
• The Content Template Element | MDN
• Template element example

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
• ESLint Getting Started
• Static vs Unit vs Integration vs E2E Testing for Frontend Apps

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
• Behavior Driven Development and Functional Testing
• Test Coverage
• Make Your Test Fail

  Good testing practices so you can be confident your tests are working.

• The advantages of the template element

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