Performance-Optimized Video Embeds With Zero JavaScript, by @stfbauer.bsky.social (@frontendmasters.com): https://frontendmasters.com/blog/performance-optimized-video-embeds-with-zero-javascript/ #multimedia #performance

⚡Featured posts this week: ✨ INP is Baseline: @tunetheweb.com & @mmocny.com ✨ Performance Video Embeds: @stfbauer.bsky.social ✨ A better way to update web apps: Dan Murphy & Dibyajyoti Pal ✨ Ecommerce | The Web Almanac: Amandeep Singh & Barry Pollard 🙏 Special thanks to the authors! #webperf

Pretty exited fo my first blog post on Frontend Masters.

SPFx 1.22 feels like a “2.0” release: new build chain, Heft migration, lots of moving parts. I wrote up a reproducible, AI-driven upgrade flow (risk assessment → upgrade branch → acceptance build → full docs) + a copy/paste prompt. n8d.at/ai-driven-sp...

📝 Markshell, a shell viewer for Markdown files, was recently featured on the Shop Talk Show podcast, alongside other notable projects. github.com/stfbauer/mar... For more details, you can listen to the episode here: shoptalkshow.com/695/ #webdevelopment #markdown #shell #sideprojects

Once more for the folks in the back: accessibility is a human right. Your web standards godfather shares thoughts on a small atrocity.

Fun, informative read | "Mythbusting: Image Accessibility in SharePoint" by @stfbauer.bsky.social. Get a closer look at how modern SharePoint handles images and accessibility, including the importance of ALT text when using the Image web part. Bust that myth! n8d.at/mythbusting-...

SharePoint + AI can build pages fast. It can also amplify bad patterns just as fast. I wrote a guide for site authors on using the Image web part accessibly – image links, lightbox, captions, “open in new window”, all the spicy bits. 🔗 n8d.at/sharepoint-i... #SharePoint #Accessibility #a11y

😳 when you sit in the waitroom of an hospital an the loud speaker calls out: ”Mr Death - Room 3 please’

Prediction for 2026 - tailwind got killed by AI. 😂

🚀 Old Fashioned CSS Sorter v1.0.0 is live! ✨ 90.8% test coverage, smart CSS variables, 3 sorting strategies 🎯 CSS/SCSS/SASS + VS Code integration 📦 VS Code Marketplace + NPM Turn messy CSS into organized code instantly! #CSS #WebDev #VSCode 🔗 marketplace.visualstudio.com/items?itemNa...

Fluent UI 9 and SharePoint Brand Center finally speak the same language — typography. 🎨 I mapped the missing link between Fluent UI tokens and SharePoint’s custom font slots. Read it here 👉 n8d.at/mapping-flue... #FluentUI #SPFx #SharePoint

When Copilot agent is in panic mode because it lost a file for the analysis, that was there before :D

GDrive is the Windows 95. You upload a document with a long name and it replaces it with "MyFile~1.docx". The you have to go in and rename the file and everthing works fine. Sure you don't need to write you life's story in the filename, but a behaviour like this in 2025?

🎨 Want to make your #SharePoint & #Teams solutions look as good as they work? At @collabdaysne.org, @stfbauer.bsky.social#SharePoint#Teamsill help you level up your front-end skills with his session: “Design and Styling 101: SharePoint Online and Microsoft Teams” 👉 Secure your spot today:

See you there!!!

I wrote a blog post this moring how to query your work items directly in VS Code from Azure DevOp: Soon an MCP Server is coming out but meanwhile this is how it works. n8d.at/how-to-query...

When people say functional components do they mean they wrote something that actually works on top of it is a component? 🤣

🏆 Celebrating a decade as a Microsoft MVP! 🏆 I am thrilled to announce that after 10 years, I have achieved again the Microsoft MVP in M365 Development. This year brought an extra special honor as I also received recognition in Web Development. Thank you Microsoft #mvp #webdevelopment #m365

Input fields of type number in HTML might seem to be a great option at first glance, but the negative side effects outweight the issues they have. In my latest blog post I take a deep dive, what those issues are. n8d.at/inputtypenum... #ux #i18n #html #webdevelopment

Working with @stfbauer.bsky.social to create a style guide can exponentially speed up the development process and bring better outcomes. Watch/listen to the full episode, #004 | Optimizing SharePoint Framework Projects with Reusable Code 👇 📺 youtu.be/qP0SRfI9Rok 🎧 aka.codedeploygo.live/e004

@toddklindt.bsky.social on How I use AI to Write Amazing PowerShell At the amazing #techiramabe

Too all the NodeJS developers out there. I found a really usefull tool to check if a number is-even with AI. Especially usefull when you try to create a random number, because it is statistically 50% right and 50% wrong. www.npmjs.com/package/is-e...

🧼 I built Old-Fashioned CSS because I missed what CSSComb did right—clean, logical, and smart sorting for CSS & SCSS. Open Source → github.com/StfBauer/old... 🏪 marketplace.visualstudio.com/items?itemNa... Blog: n8d.at/old-fashione... #css #scss #vscode #frontenddev #opensource

Four years ago I started to implement hTWOo using gulp as the engine driver to compile CSS. see: lab.n8d.studio/htwoo/ For now I have a custom build chain for SASS, TS and a hot reloader. I call it ICE. ice-build: www.npmjs.com/package/@n8d... ice-hotreloader: www.npmjs.com/package/@n8d...

Sorry what do I need to agree too. Great User Experience and design. Seems like I need to agree to the small print or just an empty list. 🤔

6 years ago i created a real mega menu for a customer. Now working on a mild relaunch and use some new CSS features to make the navigation more flexible. Pretty amazed how far #css and feature rich it has become. The rest of the navigation code still looks really ancient tbh.

Curious about using brand centre fonts in your SharePoint projects? Check out these articles for guidance and documentation. Learn to assemble them into reusable code! Questions? Suggestions? Comment below! 🚀 Link: n8d.at/leverage-sha... #SharePoint #CodingTips

🎉 Exploring SharePoint Design 🎉 Created custom backgrounds for seamless alignment in SharePoint's flexible layout. Using golden ratio & rule of thirds templates. Considering more patterns to refine Microsoft templates. What design patterns do you find useful? Share your insights!

On my way home from an amazing MVP Summit with many friends. #mvpbuzz

On my way to this years MVP Summit - first stop NYC #mvpbuzz

Intereseting I can inspect SPFx application directly in the teams application by simply right click and inspect. I wonder when this happend. No to teams in browser but directly in the app.

One step further: Step 5 in progress

But an !!important trick.

In SharePoint Framework something interesting happens, when you burry your SASS files 3 levels deep suddenly you code start to work. If not you might end up with an error message that looks like this: > CssSyntaxError (2:1) Unclosed block This is because #SPFx does some ugly string manipulation.

Since we all have nvm, fnm or other things to run multiple versions of node. I created a small script that lets you sync global installed dependencies from one nodeJS version to another. Add global packages from my node 20 to the newly installed 22. #nodejs

You know when your developer has dangerous CSS knowledge when you find code like this. The only thing missing: ‼important. 🤦‍♂️ All font-* attributes and text-* and line-* are inherated by default from the parent container. So if you do it again, no harm but useless and bloated code too. ##css

Well haven't you seen in a while. > object [object] #spfx

Fully automated upgrade to SPFx 1.20 using M365 cli and Github Copilot. Of course it has even a rollback option. #SPFx

I'm not sure our best practices for responsive & fluid #CSS typography are actually *the best*. On my own site, using the widely accepted approach, a user preference of 16px gives me ~24px font. A pref for 24px gives me ~36px. Where did we go wrong? https://www.oddbird.net/2025/02/12/fluid-type/

🚀 🆕 style-observer: A robust solution for observing CSS property changes in JS. Developed with @d12n.me’s help over the last month. Made possible by the pioneering work of @bram.us, Artem Godin, @janeori.propjockey.io and many others! Blog post: lea.verou.me/blog/2025/st... Docs: observe.style

That was fun - Was able to use CSS custom properties in media queries. So I can set the breakpoint based on dynamically evaluated width, which then shows up the mobile version of something ❤️ #CSS

👀 brb, just working my way through 759 lines of CSS to find the right custom property (design token) to use. If you want to easily find the right design decision in your codebase, check out this article on "Organising Outputs with Style Dictionary". www.alwaystwisted.com/articles/a-d... 🙏🖤

💪 Just to shorten the time a bit until Microsofts new flexible layout options arrive on my tenant. I was curious how I would find a solution to the flexible layout. Take a look and let me know what you think #microsoft #sharepoint #sharepointdesign #funfriday

The year is young and I already landed two sessions at conferences. Stay tuned. I'm coming to two really great conferences!!!

Quick afternoon web part hack - create custom draggable flex zone. - Cannot wait to see the new one that is coming to SharePoint. Had help from this blog post: phuoc.ng/collection/r...

🎨 The SharePoint Brand Center does not allow to export created theme. Well ... 👻 Here is a trick that allow you to export a theme using an unofficial API from the brand center. n8d.at/how-to-expor... #Microsoft365 #SharePoint

Lumon Macrodata Refinement for real - Awesome implemenation of the Serverance's TV Series Check this out: codepen.io/cobra_winfre...

Seems like Microsoft Designer places secret advertisments in their generated images. Starbucks #FTW

Docker get's identified by MacOS as malware. github.com/docker/for-m...