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:

267
active users

#frontenddev

0 posts0 participants0 posts today
xoron :verified:<p>Are Web Components &amp; 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 v2.0.0이면
색 추출 → UI 팔레트 자동 → JSON 변환까지!
프론트엔드 개발자 혼자서도 디자인감 있는 결과 가능🔥

월 $2 / 평생 $70 (5년 대비 $50 절약)
🚀 지금 10만명 한정 3개월 무료 쿠폰!
PALETTEBOXFREE3MONTH

👉 chromewebstore.google.com/deta
#FrontendDev #UIDesign #IndieDev #WebDevTools #ColorPalette #ChromeExtension

Think front of the front end dev skills don’t matter anymore? Think again.

At #DCAVL25, 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.

Learn how these skills support accessibility, templating, and strong collaboration across teams—especially in Drupal.

Let’s give front of the front end devs the spotlight they deserve.
drupalasheville.com/2025/sessi
#Drupal #FrontEndDev #Accessibility

People print websites, so I wrote an article over on @piccalilli about how to make sure they don’t feel the need to pull out all their hair while printing yours.

Decimate a rainforest, spend a fortune on some new ink cartridges, unjam the mechanism, print off the article, and give it a read.

https://piccalil.li/blog/printing-the-web-making-webpages-look-good-on-paper/

Page image for Piccalilli
PiccalilliPrinting the web: making webpages look good on paperDeclan Chidlow takes us on a really interesting tour of the often, under-reported world of print stylesheets, how to use them and also how to debug them.

React-like functional webcomponents, but with vanilla HTML, JS and CSS

Introducing Dim – a new #Framework that brings #ReactJS-like functional #JSX-syntax with #VanillaJS. Check it out here:
🔗 Project: github.com/positive-intentions
🔗 Website: dim.positive-intentions.com

My journey with #WebComponents started with Lit, and while I appreciated its native browser support (less #Tooling!), coming from #ReactJS, the class components felt like a step backward. The #FunctionalProgramming approach in React significantly improved my #DeveloperExperience and debugging flow.

So, I set out to build a thin, functional wrapper around #Lit, and Dim is the result! It's a #ProofOfConcept right now, with "main" #Hooks similar to React, plus some custom ones like useStore for #EncryptionAtRest. (Note: #StateManagement for encryption-at-rest is still unstable and currently uses a hardcoded password while I explore #Passwordless options like #WebAuthn/#Passkeys).

You can dive deeper into the #Documentation and see how it works here:
📚 Dim Docs: positive-intentions.com/docs/c

This #OpenSource project is still in its early stages and very #Unstable, so expect #BreakingChanges. I've already received valuable #Feedback on some functions regarding #Security, and I'm actively investigating those. I'm genuinely open to all feedback as I continue to develop it!

GitHubGitHub - positive-intentions/dimContribute to positive-intentions/dim development by creating an account on GitHub.

New arrival from Twitter – will probably re-do this #introduction at some point but for now:

I’m into hearing about #ux and #uxdesign, #contentstrategy, #productmanagement and #frontenddev, while my work centres around #creativecampaigns at the moment. My background is in #culturalstudies, #culturaltheory, #philosophy and #sociology.

In my downtime, I’m into #TTRPGs, #D&D, playing #bass, #videogames and #gaming, #gigs, #punk, drinking #coffee, general #nerdshit and walking my #dogs.