events/2024-09-26-front-end-study-hall
Front End Study Hall #011 was an IndieWeb meetup on Zoom held on 2024-09-26.
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
- 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:
- 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