events/2024-09-12-front-end-study-hall
Front End Study Hall #010 was an IndieWeb meetup on Zoom held on 2024-09-12.
Front End Study Hall #010
September 12, 2024
Participants
Notes
- capjamesg passed the baton to Joe for longest meeting ever
- artlung recapping previous FReSH
- web component for blink tags now works! (
<my-blink>) https://codepen.io/artlung/pen/RwzJmLz
- web component for blink tags now works! (
Link Checking and Linters and validators
- w3c link checker - suggested by
Tantek Çelik https://validator.w3.org/checklink
- running on capjamesg's site as a demo
- 300 typos recently fixed, hopefully no broken links
- cheated -- checked it yesterday!
- artlung used a tool called: linklint (http://linklint.org)
- it's in homebrew (!)
brew install linklint- does not appear to work with https sites (it's a 23 year old perl script)
linklint -http -host mat.tl- other examples: wget, etc
Joe Crawford will put out a call for link checking tools that work on a local set of files
- how does local development work with link checkers?
- XML/XHTML horror stories
- embedding HTML code from elsewhere often breaks validation
- Always worthwhile to mention https://validator.w3.org/
- React vs. small pages
- Legacy software
- Pages with a reliance on JavaScript
- curlability
- Discussion of Cloudflare and tooling to prevent bad actors from abusing your website as a network resource
Full Width Images with narrower content discussion
- Question from
capjamesg about adding nice big images to a narrow layout? - https://www.woodlandtrust.org.uk/blog/2020/10/why-autumn-leaves-change-colour/
- Q: How does it work to have a centered column with images that extend wider than the screen
- 1. Have a grid to decide some content is in a primary content grid positions, and then images can extend into the wider grid?
- 2. Negative margins for full bleed images with regular content constrained to normal margins and the size of the content
- https://nazhamid.com/journal/seattle/
- https://alabut.com/writing/intro/
- Al uses a special class to designate images that can break out of the usual width of the layout
- https://lux.camera
Optimizing Performance Discussion
- History - at one time "mobile web" implied using entirely different markup from HTML for the "mobile" version of a website:
- WML was at one time a solution for this: https://en.wikipedia.org/wiki/Wireless_Markup_Language
Dr. Matt Lee had a WAP-phone and used it for mobile data for a number of years because the data plan was near-free
- WML was at one time a solution for this: https://en.wikipedia.org/wiki/Wireless_Markup_Language
- Google AMP has a similar idea and has fallen out of favor somewhat
- But mobile devices changed the direction of the web profoundly as screen size, performance capability and battery life constrained what could be done with the web, this also stunted the ascent of Flash as a format
- Thoughts on Flash https://web.archive.org/web/20100501010616/http://www.apple.com/hotnews/thoughts-on-flash/
- Dr. Matt Lee ran Linux on PowerPC at the time so no Flash player
- Thoughts on Flash https://web.archive.org/web/20100501010616/http://www.apple.com/hotnews/thoughts-on-flash/
- https://hardcover.app/ website and app is an example of a highly performant applicaton
- Discussion: What editor are you using?
- VS Code is popular
- Cursor ("AI" editor, using Claude (sp?) https://www.cursor.com/
- Todd uses Vim tune
.vimrcfile to stick to keyboard usage - Dr. Matt Lee uses Nova, plus BBEdit for some things that are text-mangling and mg in a Terminal. Previous GNU Emacs for a *long*, *long* time.
- Zed is a new editor whose selling point is speed. Zed.dev - capjamesg otherwise uses VS Code
- https://zed.dev/
- Clickhouse on performance: https://clickhouse.com/docs/en/faq/general/why-clickhouse-is-so-fast
- A site whose design James likes: https://hardcover.app/books/before-the-coffee-gets-cold
- Chrome DevTools Workspaces
- The iteration cycle of write code -> see result ought to get to be as tight and short as possible - the goal is always to see the results of the code you write as quickly as possible
- Discussion: Performance - what's your tip?
- Static pages = converting WP to static html
- https://github.com/mattl/wordpress-to-eleventy
- added to2ds's Synergy to the buzzwords in the README
- Lazy load those images, decode async
- Static Website - webp some images - avif - only vanilla js
- 80% compression on avif images is a solid quality level says
Al Abut - Measure - metrics - PageSpeed Insights, if an interation feels slow it's probaly is
- Framework wolrd: improves server side rendering of frameworkd
- Do less, do it in advance, load lazily -- Pierre
- Avif is great - srcset with avif srcset - topic for the next Front End Study Hall
- And about