Front End Study Hall #011 was an IndieWeb meetup on Zoom held on 2024-09-26.

• Archived from: https://etherpad.indieweb.org/2024-09-26-front-end-study-hall

Front End Study Hall #011

September 26, 2024

Participants

• Joe Crawford
• Al Abut
• Emily Norton
• Michael Kupietz (https://michaelkupietz.com)
• benji
• pcarrier.com
• Dr. Matt Lee

Notes

• Today Joe Crawford's background is from 2012: The main page for Bootstrap now at https://getbootstrap.com/
  • Bootstrap remains by far the most popular CSS framework, meant to encapsulate basic layouts, mobile support, and user interface elements
• Getting back to HTML + CSS, how to learn and get back to it?
  • MSN Curriculum
  • https://developer.mozilla.org/en-US/curriculum/
  • Talking about SASS, and bootstrap and how it uses SASS:https://github.com/twbs/bootstrap/blob/main/scss/bootstrap.scss (when it was first released it used LESS as the tooling for that)
• CodePen
  • Found an example of a 3-D book https://codepen.io/_fbrz/pen/eYrNeW
• Michael's example of boosting his page performance with a new CSS property:
  • https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility
  • https://michaelkupietz.com
  • Also showed off https://developer.wordpress.org/reference/functions/wp_enqueue_style/ and setting a parameter to set a cachebust based on the changed time of the style (related to Emily's cache question)
  • Sticky position on selectors to nest
  • https://developer.mozilla.org/en-US/docs/Web/CSS/:not
• Claude.ai - using AI tools to accompany learning about code
  • Al Abut going to demo his usage of Claude as a tool alongside coding https://claude.ai
  • ClaudeArtifacts https://claudeartifacts.com/ which has "prompt/conversation" side by side with code artifacts
  • Treating "Claude" like a simulation of "pair programming"
• How Claude's Artifacts was created:
  • 3 min video: https://www.youtube.com/watch?v=vUdNaAAc4FY
  • Long form interview: https://newsletter.pragmaticengineer.com/p/how-anthropic-built-artifacts?utm_campaign=post&utm_medium=web
• benji was able to use ChatGPT to help with the syntax of sed
• Web service that can summarize youtube videos via a browser extension (this is firefox's): https://addons.mozilla.org/en-US/firefox/user/17689705/?utm_source=firefox-browser&utm_medium=firefox-browser&utm_content=addons-manager-user-profile-link
• Google's Gemini is particularly good at digesting youtube videos
• DesignCode.io contains courses on design and code https://designcode.io/ which includes Claude.ai to do React
• Prompted from the last FrESH events/2024-09-12-front-end-study-hall
• avif files by Al Abut - how to use srcset and avif files
  • https://caniuse.com/?search=avif
  • For more background for images see https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
  • https://docs.astro.build/en/basics/astro-syntax/
  • Al Abut uses Automator https://support.apple.com/guide/automator/welcome/mac to create avif versions of different source images
  • imagemagick is the tool on the command line for creating images
  • `<picture>` and `<source>` https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
  • Pierre (on the train, cannot talk) uses an 11ty plugin that converts into <picture/> with all the versions (avif with jpeg fallback, multiple sizes) generated automatically from the original. Testing in Chrome DevTools, mobile emulation, "Responsive" layout, resizing the viewport to various sizes to confirm everything looks good. https://github.com/pcarrier/blog/blob/main/.eleventy.js#L16-L28 (https://nothing.pcarrier.com/posts/meta/ for an intro to the overall toolchain).
• Debugging CSS animation performance
  • http://jankfree.org/
  • https://web.dev/articles/animations-guide
  • Looking at Preformance tab in Firefox DevTools
  • Many animation transitions? Is there a difference between discrete numbers and continuous transition values in impact of the CPU