Links:
bistro.here24.co/
github.com/DavidWaumsley/bistro-demo.
bistro.here24.co/info (show notes and links)
Also mentioned:
ua-cam.com/video/NbOtbHW4zlA/v-deo.html
A video on the light and dark mode toggle.
ua-cam.com/video/TreBK-EyACQ/v-deo.html
A great talk by the author of wakamaifondue.com/beta/ (what can my font do)
We have called a Bistro, but it could work for a coffee, restaurant or café website.
This is what AI thinks the episode is about:
Nathan kicks things off by sharing his experiences tweaking live site code and the satisfaction of seeing those changes come to life-despite the occasional hiccup. They explore using GitHub for tracking modifications and Netlify for easy updating, along with the advantages of committing even the smallest changes. A humorous tone runs through their conversation, making the technical details accessible and engaging.
We then move on to discuss their plans to create simple, user-friendly CSS solutions tailored for small businesses. Nathan is particularly excited about developing bento box-style websites that allow users with minimal coding knowledge to manage their sites effortlessly.
Nathan also highlights some of the practical challenges they faced, such as implementing SVGs for dark and light modes, maintaining compliance with WCAG 2.2, and ensuring accessibility at 200% zoom. These real-world examples offer valuable insights into the complexities of modern web design.
The hosts touch upon the use of various tools, such as the Chrome extension and web developers toolbar, to examine how pages render without JavaScript, and Nathan shares some hiccups seen on older phones with increased font size.
Towards the end of the episode, they revisit their ongoing project of redesigning a coffee shop website with a focus on clean HTML and accessibility. They also discuss future plans to enhance the user experience by creating educational CSS templates.
If you're interested in web design, accessibility, and practical solutions to common challenges, this episode is for you.
00:00 Default is light mode; dark mode toggle available.
03:10 Default light theme, optional dark mode toggle.
07:43 Modern CSS isn't validated; impacts browser performance.
12:22 Resolved issue easily due to grid adjustments.
15:26 Explore custom CSS with font features online.
18:25 Focus on food plate, not surroundings.
22:29 Grid template columns with gap and border.
25:10 SVG dark-light workarounds: gradient, PNG switch.
28:56 Accessibility settings caused grid layout issue.
30:37 Accessibility changes might affect viewport, font size.
36:09 Simple, customisable bento box-style websites proposal.
36:53 Simplify homepage CSS for next attempt.