Inautilo#Development #Introductions
The HTML Sanitizer API · Safer web development with HTML sanitization https://ilo.im/16cqyw
_____
#HTML #Sanitization #ProgressiveEnhancement #Security #XSS #APIs #Browsers #WebDev #Frontend #DOM
sayzardProgressive Web Components
Elena는 Progressive Web Components라는 디자인 철학을 구현한 경량(2.6kB) 오픈소스 라이브러리로, HTML과 CSS를 우선 렌더링하고 이후 JavaScript로 점진적 상호작용을 추가한다. 이 접근법은 서버 사이드 렌더링(SSR) 호환성과 접근성 문제, 레이아웃 이동 문제를 해결하며, React Server Components 같은 프레임워크와도 호환된다. Elena는 크로스 프레임워크 호환성, 상태 관리, 이벤트 위임 등을 지원해 웹 컴포넌트 개발의 복잡성을 줄여준다. 현재 v1.0.0-rc.7 릴리즈 후보가 공개되어 디자인 시스템 구축에 관심 있는 팀에 적합하다.
https://arielsalminen.com/2026/progressive-web-components/
#webcomponents #progressiveenhancement #ssr #designsystems #javascript
Special Gift – Don MinotauroUsing an old computer (i386) with #Dillo web browser as a test environment has been a great #performance and #accessibility wakeup call, would absolutely recommend. 🐂🔧
#TinyCoreLinux #ProgressiveEnhancement #SoftwareDevelopment #LibreSoftware
Frontend DogmaNever Lose Form Progress Again, by @Aaron:
https://www.aaron-gustafson.com/notebook/never-lose-form-progress-again/
Never Lose Form Progress Again :: Aaron Gustafson
Few things are more annoying than losing your progress halfway through a form. Maybe the browser crashes. Maybe the tab gets closed. Maybe your kid yells from the other room and you come back three hours later wondering why you ever thought now was a good time to fill out a mortgage application. Whatever the cause, form-saver makes those interruptions a lot less obnoxious. Which is nice, because forms are usually annoying enough on their own.
KerfuffleSo I've got #Kotlin + #Javalin + #HTMX + #Maven + #Freemarker + #ProgressiveEnhancement + #DesignSystem + #Playwright working. Now the question is: do I call it a day or do I add #ActivityPub integration?
#Development #Guides
Never lose form progress again · A web component storing and restoring form values https://ilo.im/16cbuk
_____
#Forms #Storage #WebComponents #ProgressiveEnhancement #Browsers #WebDev #Frontend #DOM #HTML #JavaScript
Never Lose Form Progress Again :: Aaron Gustafson
Few things are more annoying than losing your progress halfway through a form. Maybe the browser crashes. Maybe the tab gets closed. Maybe your kid yells from the other room and you come back three hours later wondering why you ever thought now was a good time to fill out a mortgage application. Whatever the cause, form-saver makes those interruptions a lot less obnoxious. Which is nice, because forms are usually annoying enough on their own.
#Development #Techniques
Scroll spy with pure CSS · A modern way to highlight active TOC links https://ilo.im/16c1tx
_____
#ModernCSS #Scrolling #Content #ProgressiveEnhancement #Browsers #WebDev #Frontend #HTML #CSS
#Development #Approaches
Inverted themes with light-dark() · Flipping color modes with container style queries https://ilo.im/16c2kq
_____
#ColorSchemes #LightMode #DarkMode #ProgressiveEnhancement #Polyfill #Browser #WebDev #Frontend #CSS #JavaScript
Inverted themes with light-dark()
We rolled out adaptive light-dark() support on our design system themes and it’s been a delightful upgrade. Creating light and dark variable sets isn’t difficult, but delivery has trade-offs. Most apps that do this probably ship both sets of token values in a single stylesheet. That’s fine until you have multiple kilobytes of duplicate definitions. To get around the performance problems we built two separate stylesheets –which is also not great– but my coworker Zacky found a good trick with <link disabled> to make it tolerable. Ultimately, we wanted to offer a single stylesheet for our human (and agent) friends to control theming.
#Development #Techniques
CSS ‘position: sticky’ per axis · Get ready for sticky headers and columns in data tables https://ilo.im/16bshn
_____
#CSS #Scrolling #Headers #DataTables #FeatureDetection #ProgressiveEnhancement #Chrome #Browser #WebDev #Frontend
CSS position: sticky now sticks to the nearest scroller on a per axis basis!
If you’ve ever tried to build a data table with a sticky header and a sticky first column, you know the pain. You’d think a simple position: sticky with top: 0 and left: 0 would be enough, but the reality was that only one of both would stick. A recent change to CSS fixes this: position: sticky now plays nice with single-axis scrollers, allowing you to have sticky elements that track different scroll containers on different axes. This change is available in Chrome 148 with the experimental web platform features flag flipped.
#Development #Launches
Elena · A tiny library for building progressive web components https://ilo.im/169a4a
_____
#WebComponents #DesignSystems #ProgressiveEnhancement #Frameworks #OpenSource #WebDev #Frontend #HTML #CSS #JavaScript
