Front End Study Hall #015

November 21, 2024

Participants

Notes

Happy Thursday, everyone :)

https://codepen.io/artlung/pen/RwXmXYw a Codepen showing a input type="radio" button to set state for a layout and has() to read the radio button
https://artlung.com/ uses that technique to do hamburger-style sidebars
- Joe uses the transform() function to display his sidebar, it starts at -100% (outside the viewport) and scaled down to 10% of the size, and then slides into view as it grows.
  - We changed the transition from .5s(?) to 12s to see it go slower (and it looked similar to the old MacOS genie effect!)
  - On the topic of accessibility of menus and sidebars, Jira shows a popup on the top left corner when you're tabbing through the page to allow users to switch between areas of the screen: https://ibb.co/qjjt9Rn

Trying to recreate the steps in https://www.gov.uk/learn-to-drive-a-car

Reference Markup:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>How to make a website</h1>
    <ol>
        <li><h2>Register a domain</h2><p>like namecheap</p></li>
        <li><h2>Choose a hosting service</h2><p>like wordpress</p></li>
        <li><h2>Share with friends</h2><p>like on Mastodon</p></li>
    </ol>
</body>
</html>

Further reading:
- ol#type
- ::marker
- counter
- counter-reset
- counter-increment

Benji's version

Collectively-Built Timeline

Front End Study Hall (FrESH)
	Find upcoming Front End Study Hall Events on events.indieweb.org/tag/frontend
2024	04-24 • 05-07 • 05-23 • 06-06 • 06-18 • 07-02 • 07-16 • 08-01 • 08-27 • 09-12 • 09-26 • 10-10 • 10-24 • 11-07 • 11-21 •