xoron :verified:<p>Quick project update on my new UI component library based on Material UI. Hitting a key milestone on bringing a sleek and powerful UI to life for my apps. More to share soon!</p><p><a href="https://ui.positive-intentions.com" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ui.positive-intentions.com</span><span class="invisible"></span></a></p><p><a href="https://infosec.exchange/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDevelopment</span></a> <a href="https://infosec.exchange/tags/FrontendDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontendDev</span></a> <a href="https://infosec.exchange/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>javascript</span></a>#ReactJS <a href="https://infosec.exchange/tags/MUI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>MUI</span></a> <a href="https://infosec.exchange/tags/Developers" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Developers</span></a> <a href="https://infosec.exchange/tags/Programming" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Programming</span></a> <a href="https://infosec.exchange/tags/DesignSystem" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DesignSystem</span></a> <a href="https://infosec.exchange/tags/components" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>components</span></a> <a href="https://infosec.exchange/tags/ComponentLibrary" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ComponentLibrary</span></a> <a href="https://infosec.exchange/tags/AppDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AppDev</span></a> <a href="https://infosec.exchange/tags/DevelopmentUpdate" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DevelopmentUpdate</span></a> <a href="https://infosec.exchange/tags/CodeProgress" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodeProgress</span></a> <a href="https://infosec.exchange/tags/SoftwareDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SoftwareDevelopment</span></a> <a href="https://infosec.exchange/tags/PrivateProject" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>PrivateProject</span></a> <a href="https://infosec.exchange/tags/sideproject" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>sideproject</span></a></p>
shakedown.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
A community for live music fans with roots in the jam scene. Shakedown Social is run by a team of volunteers (led by @clifff and @sethadam1) and funded by donations.
Administered by:
Server stats:
271active users
shakedown.social: About · Status · Profiles directory · Privacy policy
Mastodon: About · Get the app · Keyboard shortcuts · View source code · v4.4.2
#frontenddev
1 post · 1 participant · 0 posts today
xoron :verified:<p>Are Web Components & Cybersecurity A Better Combo?</p><p>I'm not trying to dunk on popular <a href="https://infosec.exchange/tags/UI" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UI</span></a> <a href="https://infosec.exchange/tags/frameworks" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frameworks</span></a> – I'm sure they're totally fine for <a href="https://infosec.exchange/tags/cybersecurity" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cybersecurity</span></a> stuff, probably get loads of reviews and <a href="https://infosec.exchange/tags/audits" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>audits</span></a>.</p><p>But from my angle: Web Components are *native* to the <a href="https://infosec.exchange/tags/browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>browser</span></a>. Doesn't that just inherently reduce the risk of **<a href="https://infosec.exchange/tags/SupplyChainAttacks" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SupplyChainAttacks</span></a>** (you know, like a rogue `npm install` on a bad network) for your <a href="https://infosec.exchange/tags/AppSecurity" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>AppSecurity</span></a>?</p><p>Or am I overthinking it, and the <a href="https://infosec.exchange/tags/framework" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>framework</span></a> choice is less important than the <a href="https://infosec.exchange/tags/browser" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>browser</span></a>, <a href="https://infosec.exchange/tags/OS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OS</span></a>, or <a href="https://infosec.exchange/tags/device" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>device</span></a> running it? What are your thoughts, <a href="https://infosec.exchange/tags/DevCommunity" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DevCommunity</span></a>?</p><p>---</p><p>Quick context: I've got a <a href="https://infosec.exchange/tags/ReactJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ReactJS</span></a> <a href="https://infosec.exchange/tags/messagingApp" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>messagingApp</span></a> (repo here: <a href="https://github.com/positive-intentions/chat" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/positive-intentions</span><span class="invisible">/chat</span></a>) and a separate <a href="https://infosec.exchange/tags/UIFramework" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UIFramework</span></a> (repo here: <a href="https://github.com/positive-intentions/dim" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/positive-intentions</span><span class="invisible">/dim</span></a>) built with <a href="https://infosec.exchange/tags/Lit" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Lit</span></a> (which uses Web Components). I'm genuinely wondering if there's a compelling <a href="https://infosec.exchange/tags/cybersecurity" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cybersecurity</span></a> reason to refactor the chat app to use my <a href="https://infosec.exchange/tags/WebComponent" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponent</span></a> UI framework. Might be a whole new level of <a href="https://infosec.exchange/tags/SecurityByDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>SecurityByDesign</span></a> for <a href="https://infosec.exchange/tags/FrontEndDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontEndDev</span></a>.</p><p>FYI, same question's on Reddit here: <a href="https://www.reddit.com/r/ExperiencedDevs/comments/1lmk1rg/are_web_components_better_for_cybersecurity/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">reddit.com/r/ExperiencedDevs/c</span><span class="invisible">omments/1lmk1rg/are_web_components_better_for_cybersecurity/</span></a>, got some good <a href="https://infosec.exchange/tags/insights" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>insights</span></a>, but want to make sure nothing's getting overlooked! Let's discuss <a href="https://infosec.exchange/tags/InfoSec" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>InfoSec</span></a> <a href="https://infosec.exchange/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> <a href="https://infosec.exchange/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JavaScript</span></a> <a href="https://infosec.exchange/tags/OpenSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OpenSource</span></a> <a href="https://infosec.exchange/tags/TechQuestion" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>TechQuestion</span></a>.</p>
mitten<p>Can anyone point me at a modern explainer, written by a human being, for how to structure an img element with srcset properly? I just want to serve up smaller res images for smaller screens. </p><p><a href="https://social.lol/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HTML</span></a> <a href="https://social.lol/tags/FrontEndDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontEndDev</span></a></p>
Palette Box<p>🔥 ¡Velocidad dev = colores rápidos!<br>Extrae → guarda paleta → JSON auto</p><p>Con Palette Box v2.0.0:<br>Colores UI listos, sin specs de diseño.<br>Perfecto para devs indie, publishers, frontend🔥</p><p>$2/mes o $70 lifetime (ahorra $50 vs 5 años)<br>🚀 ¡3 meses GRATIS! PALETTEBOXFREE3MONTH</p><p>👉 <a href="https://chromewebstore.google.com/detail/palette-box/dbokpdajfkdaglkgojjjocclfnilbhao" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">chromewebstore.google.com/deta</span><span class="invisible">il/palette-box/dbokpdajfkdaglkgojjjocclfnilbhao</span></a><br><a href="https://mastodon.social/tags/FrontendDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontendDev</span></a> <a href="https://mastodon.social/tags/UIDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UIDesign</span></a> <a href="https://mastodon.social/tags/ColorPalette" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ColorPalette</span></a> <a href="https://mastodon.social/tags/DevTools" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DevTools</span></a> <a href="https://mastodon.social/tags/IndieDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>IndieDev</span></a> <a href="https://mastodon.social/tags/ChromeExtension" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ChromeExtension</span></a></p>
Palette Box<p>🔥 開発速度＝色準備が鍵！<br>Web色抽出 → パレット保存 → JSON化！</p><p>Palette Box v2.0.0なら<br>デザイン仕様なしでもUIカラー即用意。<br>ソロ開発・パブリッシャー・フロントエンド必携🔥</p><p>月$2 / 買切$70（5年より$50お得）<br>🚀 3ヶ月無料！PALETTEBOXFREE3MONTH</p><p>👉 <a href="https://chromewebstore.google.com/detail/palette-box/dbokpdajfkdaglkgojjjocclfnilbhao" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">chromewebstore.google.com/deta</span><span class="invisible">il/palette-box/dbokpdajfkdaglkgojjjocclfnilbhao</span></a><br><a href="https://mastodon.social/tags/FrontendDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontendDev</span></a> <a href="https://mastodon.social/tags/UIDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UIDesign</span></a> <a href="https://mastodon.social/tags/ColorPalette" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ColorPalette</span></a> <a href="https://mastodon.social/tags/DevTools" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DevTools</span></a> <a href="https://mastodon.social/tags/IndieDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>IndieDev</span></a> <a href="https://mastodon.social/tags/ChromeExtension" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ChromeExtension</span></a></p>
Palette Box<p>🔥 Dev speed = faster color prep!<br>Extract colors → Save palette → Auto JSON</p><p>With Palette Box v2.0.0:<br>UI colors ready fast—even without design specs.<br>Perfect for indie devs, publishers, frontend pros🔥</p><p>$2/month or $70 lifetime (save $50 vs 5 yrs)<br>🚀 3-month FREE: PALETTEBOXFREE3MONTH</p><p>👉 <a href="https://chromewebstore.google.com/detail/palette-box/dbokpdajfkdaglkgojjjocclfnilbhao" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">chromewebstore.google.com/deta</span><span class="invisible">il/palette-box/dbokpdajfkdaglkgojjjocclfnilbhao</span></a><br><a href="https://mastodon.social/tags/FrontendDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontendDev</span></a> <a href="https://mastodon.social/tags/UIDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UIDesign</span></a> <a href="https://mastodon.social/tags/ColorPalette" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ColorPalette</span></a> <a href="https://mastodon.social/tags/DevTools" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DevTools</span></a> <a href="https://mastodon.social/tags/IndieDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>IndieDev</span></a> <a href="https://mastodon.social/tags/ChromeExtension" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ChromeExtension</span></a></p>
Palette Box<p>🔥 개발 속도, 색 뽑는 데서 갈린다!<br>웹에서 색 추출 → 팔레트 저장 → JSON 변환까지 한방!</p><p>Palette Box v2.0.0이면<br>디자인 가이드 없이도 UI 색상 빠르게 준비 끝.<br>1인 개발자, 퍼블리셔, 프론트엔드에 강력 추천🔥</p><p>월 $2 / 평생 $70 (5년 대비 $50 절약)<br>🚀 3개월 무료 쿠폰: PALETTEBOXFREE3MONTH</p><p>👉 <a href="https://chromewebstore.google.com/detail/palette-box/dbokpdajfkdaglkgojjjocclfnilbhao" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">chromewebstore.google.com/deta</span><span class="invisible">il/palette-box/dbokpdajfkdaglkgojjjocclfnilbhao</span></a><br><a href="https://mastodon.social/tags/FrontendDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontendDev</span></a> <a href="https://mastodon.social/tags/UIDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UIDesign</span></a> <a href="https://mastodon.social/tags/ColorPalette" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ColorPalette</span></a> <a href="https://mastodon.social/tags/DevTools" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DevTools</span></a> <a href="https://mastodon.social/tags/IndieDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>IndieDev</span></a> <a href="https://mastodon.social/tags/ChromeExtension" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ChromeExtension</span></a></p>
Palette Box<p>🔥 ¿Te has quedado bloqueado por colores?<br>“Sin diseñador… ¿qué color uso?”</p><p>Con Palette Box v2.0.0:<br>Extrae → paleta UI auto → JSON!<br>Devs indie → UIs pro sin diseñador🔥</p><p>$2/mes o $70 lifetime (ahorra $50 vs 5 años)<br>🚀 ¡3 meses GRATIS! PALETTEBOXFREE3MONTH</p><p>👉 <a href="https://chromewebstore.google.com/detail/palette-box/dbokpdajfkdaglkgojjjocclfnilbhao" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">chromewebstore.google.com/deta</span><span class="invisible">il/palette-box/dbokpdajfkdaglkgojjjocclfnilbhao</span></a><br><a href="https://mastodon.social/tags/FrontendDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontendDev</span></a> <a href="https://mastodon.social/tags/UIDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UIDesign</span></a> <a href="https://mastodon.social/tags/IndieDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>IndieDev</span></a> <a href="https://mastodon.social/tags/WebDevTools" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDevTools</span></a> <a href="https://mastodon.social/tags/ColorPalette" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ColorPalette</span></a> <a href="https://mastodon.social/tags/ChromeExtension" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ChromeExtension</span></a></p>
Palette Box<p>🔥 配色でコーディング止まったことない？<br>「デザイナーいない…色どうしよう」</p><p>Palette Box v2.0.0なら<br>色抽出 → UIパレット自動生成 → JSON化！<br>ソロ開発でもおしゃれUI作成🔥</p><p>月$2 / 買切$70（5年より$50お得）<br>🚀 3ヶ月無料！PALETTEBOXFREE3MONTH</p><p>👉 <a href="https://chromewebstore.google.com/detail/palette-box/dbokpdajfkdaglkgojjjocclfnilbhao" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">chromewebstore.google.com/deta</span><span class="invisible">il/palette-box/dbokpdajfkdaglkgojjjocclfnilbhao</span></a><br><a href="https://mastodon.social/tags/FrontendDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontendDev</span></a> <a href="https://mastodon.social/tags/UIDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UIDesign</span></a> <a href="https://mastodon.social/tags/IndieDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>IndieDev</span></a> <a href="https://mastodon.social/tags/WebDevTools" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDevTools</span></a> <a href="https://mastodon.social/tags/ColorPalette" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ColorPalette</span></a> <a href="https://mastodon.social/tags/ChromeExtension" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ChromeExtension</span></a></p>
Palette Box<p>🔥 Ever stopped coding just over colors?<br>“No designer… which color should I use?”</p><p>With Palette Box v2.0.0:<br>Extract → Auto UI palette → JSON!<br>Solo devs can build pro-level UIs🔥</p><p>$2/month or $70 lifetime (save $50 vs 5 yrs)<br>🚀 3-month FREE for 100K users!<br>PALETTEBOXFREE3MONTH</p><p>👉 <a href="https://chromewebstore.google.com/detail/palette-box/dbokpdajfkdaglkgojjjocclfnilbhao" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">chromewebstore.google.com/deta</span><span class="invisible">il/palette-box/dbokpdajfkdaglkgojjjocclfnilbhao</span></a><br><a href="https://mastodon.social/tags/FrontendDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontendDev</span></a> <a href="https://mastodon.social/tags/UIDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UIDesign</span></a> <a href="https://mastodon.social/tags/IndieDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>IndieDev</span></a> <a href="https://mastodon.social/tags/WebDevTools" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDevTools</span></a> <a href="https://mastodon.social/tags/ColorPalette" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ColorPalette</span></a> <a href="https://mastodon.social/tags/ChromeExtension" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ChromeExtension</span></a></p>
Palette Box<p>🔥 색상 때문에 코드 멈춘 적 있죠?<br>“디자이너 없는데 이 색 뭘 써야 해…”</p><p>Palette Box v2.0.0이면<br>색 추출 → UI 팔레트 자동 → JSON 변환까지!<br>프론트엔드 개발자 혼자서도 디자인감 있는 결과 가능🔥</p><p>월 $2 / 평생 $70 (5년 대비 $50 절약)<br>🚀 지금 10만명 한정 3개월 무료 쿠폰!<br>PALETTEBOXFREE3MONTH</p><p>👉 <a href="https://chromewebstore.google.com/detail/palette-box/dbokpdajfkdaglkgojjjocclfnilbhao" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">chromewebstore.google.com/deta</span><span class="invisible">il/palette-box/dbokpdajfkdaglkgojjjocclfnilbhao</span></a><br><a href="https://mastodon.social/tags/FrontendDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontendDev</span></a> <a href="https://mastodon.social/tags/UIDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>UIDesign</span></a> <a href="https://mastodon.social/tags/IndieDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>IndieDev</span></a> <a href="https://mastodon.social/tags/WebDevTools" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDevTools</span></a> <a href="https://mastodon.social/tags/ColorPalette" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ColorPalette</span></a> <a href="https://mastodon.social/tags/ChromeExtension" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ChromeExtension</span></a></p>
DrupalAsheville<p>Think front of the front end dev skills don’t matter anymore? Think again.</p><p>At <a href="https://mstdn.social/tags/DCAVL25" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DCAVL25</span></a>, join What a Front of the Front-End Developer Brings to Your Team and explore why HTML, CSS, and presentational JS expertise are still essential.</p><p>Learn how these skills support accessibility, templating, and strong collaboration across teams—especially in Drupal.</p><p>Let’s give front of the front end devs the spotlight they deserve.<br><a href="https://www.drupalasheville.com/2025/session/what-front-front-end-developer-brings-your-team" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">drupalasheville.com/2025/sessi</span><span class="invisible">on/what-front-front-end-developer-brings-your-team</span></a> <br><a href="https://mstdn.social/tags/Drupal" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Drupal</span></a> <a href="https://mstdn.social/tags/FrontEndDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontEndDev</span></a> <a href="https://mstdn.social/tags/Accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Accessibility</span></a></p>
Vale<p>People print websites, so I wrote an article over on <span class="h-card"><a class="u-url mention" href="https://front-end.social/@piccalilli" rel="nofollow noopener" target="_blank">@<span>piccalilli</span></a></span> about how to make sure they don’t feel the need to pull out all their hair while printing yours.</p><p>Decimate a rainforest, spend a fortune on some new ink cartridges, unjam the mechanism, print off the article, and give it a read.</p><p><a href="https://piccalil.li/blog/printing-the-web-making-webpages-look-good-on-paper/" rel="nofollow noopener" target="_blank">https://piccalil.li/blog/printing-the-web-making-webpages-look-good-on-paper/</a></p><p><a class="hashtag" href="https://fedi.vale.rocks/tag/webdev" rel="nofollow noopener" target="_blank">#WebDev</a> <a class="hashtag" href="https://fedi.vale.rocks/tag/frontenddev" rel="nofollow noopener" target="_blank">#FrontEndDev</a> <a class="hashtag" href="https://fedi.vale.rocks/tag/css" rel="nofollow noopener" target="_blank">#CSS</a></p>
xoron :verified:<p>React-like functional webcomponents, but with vanilla HTML, JS and CSS</p><p>Introducing Dim – a new <a href="https://infosec.exchange/tags/Framework" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Framework</span></a> that brings <a href="https://infosec.exchange/tags/ReactJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ReactJS</span></a>-like functional <a href="https://infosec.exchange/tags/JSX" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JSX</span></a>-syntax with <a href="https://infosec.exchange/tags/VanillaJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>VanillaJS</span></a>. Check it out here:<br>🔗 Project: <a href="https://github.com/positive-intentions/dim" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/positive-intentions</span><span class="invisible">/dim</span></a><br>🔗 Website: <a href="https://dim.positive-intentions.com" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="">dim.positive-intentions.com</span><span class="invisible"></span></a></p><p>My journey with <a href="https://infosec.exchange/tags/WebComponents" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebComponents</span></a> started with Lit, and while I appreciated its native browser support (less <a href="https://infosec.exchange/tags/Tooling" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Tooling</span></a>!), coming from <a href="https://infosec.exchange/tags/ReactJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ReactJS</span></a>, the class components felt like a step backward. The <a href="https://infosec.exchange/tags/FunctionalProgramming" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FunctionalProgramming</span></a> approach in React significantly improved my <a href="https://infosec.exchange/tags/DeveloperExperience" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>DeveloperExperience</span></a> and debugging flow.</p><p>So, I set out to build a thin, functional wrapper around <a href="https://infosec.exchange/tags/Lit" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Lit</span></a>, and Dim is the result! It's a <a href="https://infosec.exchange/tags/ProofOfConcept" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ProofOfConcept</span></a> right now, with "main" <a href="https://infosec.exchange/tags/Hooks" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Hooks</span></a> similar to React, plus some custom ones like useStore for <a href="https://infosec.exchange/tags/EncryptionAtRest" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>EncryptionAtRest</span></a>. (Note: <a href="https://infosec.exchange/tags/StateManagement" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>StateManagement</span></a> for encryption-at-rest is still unstable and currently uses a hardcoded password while I explore <a href="https://infosec.exchange/tags/Passwordless" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Passwordless</span></a> options like <a href="https://infosec.exchange/tags/WebAuthn" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebAuthn</span></a>/#Passkeys).</p><p>You can dive deeper into the <a href="https://infosec.exchange/tags/Documentation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Documentation</span></a> and see how it works here:<br>📚 Dim Docs: <a href="https://positive-intentions.com/docs/category/dim" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">positive-intentions.com/docs/c</span><span class="invisible">ategory/dim</span></a></p><p>This <a href="https://infosec.exchange/tags/OpenSource" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>OpenSource</span></a> project is still in its early stages and very <a href="https://infosec.exchange/tags/Unstable" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Unstable</span></a>, so expect <a href="https://infosec.exchange/tags/BreakingChanges" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>BreakingChanges</span></a>. I've already received valuable <a href="https://infosec.exchange/tags/Feedback" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Feedback</span></a> on some functions regarding <a href="https://infosec.exchange/tags/Security" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Security</span></a>, and I'm actively investigating those. I'm genuinely open to all feedback as I continue to develop it!</p><p><a href="https://infosec.exchange/tags/FrontendDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontendDev</span></a> <a href="https://infosec.exchange/tags/JSFramework" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>JSFramework</span></a> <a href="https://infosec.exchange/tags/Innovation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Innovation</span></a> <a href="https://infosec.exchange/tags/Coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Coding</span></a> <a href="https://infosec.exchange/tags/Programmer" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Programmer</span></a> <a href="https://infosec.exchange/tags/Tech" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Tech</span></a></p>
Katrin Zaks<p>👋 Hello Mastodon! I’m a frontend dev who shares stories from my tech-life balance — coding, accessibility, React, travel tales, and a bit of gardening.</p><p>Expect <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> thoughts, <a href="https://mastodon.social/tags/Accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Accessibility</span></a> tips, and maybe my <a href="https://mastodon.social/tags/BalconyGarden" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>BalconyGarden</span></a> updates.</p><p><a href="https://mastodon.social/tags/Introduction" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Introduction</span></a> <a href="https://mastodon.social/tags/FrontendDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>FrontendDev</span></a> <a href="https://mastodon.social/tags/ReactJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>ReactJS</span></a> <a href="https://mastodon.social/tags/Mastodon" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Mastodon</span></a> <a href="https://mastodon.social/tags/Accessibility" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Accessibility</span></a> <a href="https://mastodon.social/tags/BalconyGarden" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>BalconyGarden</span></a></p>
Vale<p>There is very little in this world more satisfying than getting CSS shorthand correct first time.</p><p><a class="hashtag" href="https://fedi.vale.rocks/tag/css" rel="nofollow noopener" target="_blank">#CSS</a> <a class="hashtag" href="https://fedi.vale.rocks/tag/webdev" rel="nofollow noopener" target="_blank">#WebDev</a> <a class="hashtag" href="https://fedi.vale.rocks/tag/frontenddev" rel="nofollow noopener" target="_blank">#FrontEndDev</a></p>
Vale<p>I’m Vale, a front-end developer making web stuff. I post about:</p><ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li>User Experience (UX)</li><li>User Interface (UI)</li><li>Handy tidbits</li><li>FOSS</li><li>Linux</li><li>The IndieWeb</li><li>Digital gardening</li><li>What I’m working on</li><li>My photography</li><li>Whatever else my brain gurgitates</li></ul><p><a class="hashtag" href="https://fedi.vale.rocks/tag/introduction" rel="nofollow noopener" target="_blank">#Introduction</a> <a class="hashtag" href="https://fedi.vale.rocks/tag/frontenddev" rel="nofollow noopener" target="_blank">#FrontEndDev</a> <a class="hashtag" href="https://fedi.vale.rocks/tag/webdev" rel="nofollow noopener" target="_blank">#WebDev</a></p>
Just started compiling some of my favourite blogs on my site.
I’m certain I’m missing tons, so please let me know of your favourites!
Vale.RocksLinksA curated collection of intriguing and valuable links I've discovered while surfing the web.
FE devs: what is your favorite non-Bootstrap framework for getting a simple, small, static HTML/CSS site off the ground quickly for non-FE devs? #frontenddev #html #css #iknowenoughtobedangerous
Are there any #React devs out there who have deployed to #AzureStaticWebApps?
I’m looking to get a feel for how to think about cost since it scales with bandwidth. I would assume that bundle size/caching becomes a bigger concern given the pricing model. Is it trivial to achieve scalable costs or did you find your costs ballooning compared to a more traditional deployment model?
TrendingLive feeds
Mastodon is the best way to keep up with what's happening.
Follow anyone across the fediverse and see it all in chronological order. No algorithms, ads, or clickbait in sight.
Create accountLoginDrag & drop to upload