Lucy @lucy

Negative12DollarBillHi, <a href="https://techhub.social/tags/Today" class="mention hashtag" rel="nofollow noopener" target="_blank">#Today</a> I decided to try to <a href="https://techhub.social/tags/getfedihired" class="mention hashtag" rel="nofollow noopener" target="_blank">#getfedihired</a> — I've got many years of experience with web development, programming and production (<a href="https://techhub.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a>, <a href="https://techhub.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a>, <a href="https://techhub.social/tags/Javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#Javascript</a>), I can make myself useful in anything on the open-source side of back end, i.e. the <a href="https://techhub.social/tags/Perl" class="mention hashtag" rel="nofollow noopener" target="_blank">#Perl</a>, <a href="https://techhub.social/tags/Python" class="mention hashtag" rel="nofollow noopener" target="_blank">#Python</a>, <a href="https://techhub.social/tags/PHP" class="mention hashtag" rel="nofollow noopener" target="_blank">#PHP</a>, <a href="https://techhub.social/tags/MySQL" class="mention hashtag" rel="nofollow noopener" target="_blank">#MySQL</a>, <a href="https://techhub.social/tags/Linux" class="mention hashtag" rel="nofollow noopener" target="_blank">#Linux</a> kind of area.I live in <a href="https://techhub.social/tags/Sydney" class="mention hashtag" rel="nofollow noopener" target="_blank">#Sydney</a> Australia and would be happy to work in-office, remote or hybrid.Let me know of any opportunities, or pass this on to anyone else who might know of something? Thanks.

Friday Front-EndPopping preconceived popover ponderings: "It does a lot in terms of not having to wrangle CSS overflows or z-index clashes. But by itself, it doesn’t do everything you may need for fully accessible custom popovers. It wasn’t meant to, nor should it." <a href="https://hachyderm.io/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://hachyderm.io/tags/a11y" class="mention hashtag" rel="nofollow noopener" target="_blank">#a11y</a> <a href="https://www.scottohara.me/blog/2025/03/14/popovers.html" rel="nofollow noopener" translate="no" target="_blank">https://www.scottohara.me/blog/2025/03/14/popovers.html</a>

CSS by T. Afif :verified:💡 CSS Tip!Split and assemble an image with a cool hover effect and a few lines of code. Single-element implementation (the image tag) powered by CSS mask.<a href="https://css-tip.com/assemble-image/" rel="nofollow noopener" translate="no" target="_blank">https://css-tip.com/assemble-image/</a><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a>

Aral BalkanNew Kitten release• Now leaves <style> tags within <template> tags alone when collating and normalising the CSS on a page so as not to interfere with scoped styles in declarative shadow DOM.(Kitten’s Streaming HTML workflow¹ – which uses htmx and WebSockets under the hood – combined with built-in support for slots, etc., in Kitten components² means the use of declarative shadow DOM is mostly useful if you want scoped styles. Ideally, of course, use classes to scope styles to your components and be specific in your CSS selectors in general so as not to pollute elements in your components. Although that’s a bit like saying you should floss everyday. Yeah, we all know we should…) :)Update: All that said, I’d highly recommend you don’t use Shadow DOM in your Kitten apps. For one thing, htmx’s WebSocket extension doesn’t seem to play well with it. And for another, you really don’t need it and definitely not just to get scoped CSS.Enjoy!:kitten:💕¹ <a href="https://kitten.small-web.org/tutorials/streaming-html/" rel="nofollow noopener" translate="no" target="_blank">https://kitten.small-web.org/tutorials/streaming-html/</a> ² <a href="https://kitten.small-web.org/tutorials/components-and-fragments/" rel="nofollow noopener" translate="no" target="_blank">https://kitten.small-web.org/tutorials/components-and-fragments/</a><a href="https://mastodon.ar.al/tags/Kitten" class="mention hashtag" rel="nofollow noopener" target="_blank">#Kitten</a> <a href="https://mastodon.ar.al/tags/SmallWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#SmallWeb</a> <a href="https://mastodon.ar.al/tags/SmallTech" class="mention hashtag" rel="nofollow noopener" target="_blank">#SmallTech</a> <a href="https://mastodon.ar.al/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.ar.al/tags/CSSScoping" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSSScoping</a> <a href="https://mastodon.ar.al/tags/ShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#ShadowDOM</a> <a href="https://mastodon.ar.al/tags/shadowRoot" class="mention hashtag" rel="nofollow noopener" target="_blank">#shadowRoot</a> <a href="https://mastodon.ar.al/tags/DOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#DOM</a> <a href="https://mastodon.ar.al/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://mastodon.ar.al/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://mastodon.ar.al/tags/JS" class="mention hashtag" rel="nofollow noopener" target="_blank">#JS</a> <a href="https://mastodon.ar.al/tags/style" class="mention hashtag" rel="nofollow noopener" target="_blank">#style</a> <a href="https://mastodon.ar.al/tags/template" class="mention hashtag" rel="nofollow noopener" target="_blank">#template</a> <a href="https://mastodon.ar.al/tags/declarativeShadowDOM" class="mention hashtag" rel="nofollow noopener" target="_blank">#declarativeShadowDOM</a> <a href="https://mastodon.ar.al/tags/NodeJS" class="mention hashtag" rel="nofollow noopener" target="_blank">#NodeJS</a> <a href="https://mastodon.ar.al/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#web</a> <a href="https://mastodon.ar.al/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#dev</a>

Third spruce tree on the left<a href="https://sakurajima.moe/@mangaispolitical" class="u-url mention" rel="nofollow noopener" target="_blank">@mangaispolitical</a> Alternatively, you can put <a href="https://mas.to/tags/writefreely" class="mention hashtag" rel="nofollow noopener" target="_blank">#writefreely</a> AND another webservice for your images behind <a href="https://mas.to/tags/Ngnix" class="mention hashtag" rel="nofollow noopener" target="_blank">#Ngnix</a>. Lets say `wf.yourdomain` and `images.yourdomain`DirtSWS is a little <a href="https://mas.to/tags/single" class="mention hashtag" rel="nofollow noopener" target="_blank">#single</a> <a href="https://mas.to/tags/binary" class="mention hashtag" rel="nofollow noopener" target="_blank">#binary</a> <a href="https://mas.to/tags/webserver" class="mention hashtag" rel="nofollow noopener" target="_blank">#webserver</a> that does nothing but host <a href="https://mas.to/tags/static" class="mention hashtag" rel="nofollow noopener" target="_blank">#static</a> <a href="https://mas.to/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> and files, with a simple single-file remote upload capability. Here's a sample site: <a href="https://static.awadwatt.com/index.html" rel="nofollow noopener" translate="no" target="_blank">https://static.awadwatt.com/index.html</a>

CSS BasicsDivided We Fall: "A game that helps you challenge yourself and improve your <a href="https://hachyderm.io/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> and <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> skills " <a href="https://divided-we-fall.therobinlord.com/" rel="nofollow noopener" translate="no" target="_blank">https://divided-we-fall.therobinlord.com/</a>

Peter MüllerWow. Diese Leser-Mail »made my day«:»... ich habe mir vor 3 Wochen ihr Buch "Einstieg in HTML und CSS" gekauft und bin fleißig am lernen ... Sie erklären fantastisch und das mit einem Humor, der genau meinen trifft. Ich wollte einfach kurz Danke sagen!… und nun bin ich so aufgeregt und voller Freude beim Lernen, dass ich ständig die Zeit vergesse und es kaum erwarten kann wieder aufzuwachen um weiterzumachen. Was haben Sie denn da angerichtet?«<a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mastodon.social/tags/lernen" class="mention hashtag" rel="nofollow noopener" target="_blank">#lernen</a><a href="https://html-und-css.de/" rel="nofollow noopener" translate="no" target="_blank">https://html-und-css.de/</a>

Reilly Spitzfaden (they/them)This is a good reminder for me to add some more comments into my website's HTML“Let’s build websites that are source-readable by humans and let’s help people learn how to build websites. I believe it will also help us build websites that are using the correct semantic HTML elements, are more accessible and are not just div soup.”<a href="https://hamatti.org/posts/view-source-explorers-welcome/" rel="nofollow noopener" translate="no" target="_blank">https://hamatti.org/posts/view-source-explorers-welcome/</a><a href="https://hachyderm.io/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://hachyderm.io/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDev</a> <a href="https://hachyderm.io/tags/IndieWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#IndieWeb</a> <a href="https://hachyderm.io/tags/Coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#Coding</a> <a href="https://hachyderm.io/tags/Programming" class="mention hashtag" rel="nofollow noopener" target="_blank">#Programming</a>

𝙹𝚘𝚑𝚊𝚗<a href="https://cr8r.gg/tags/MastodonTools" class="mention hashtag" rel="nofollow noopener" target="_blank">#MastodonTools</a> <a href="https://cr8r.gg/tags/Markdown" class="mention hashtag" rel="nofollow noopener" target="_blank">#Markdown</a>...И тут до него дошло, что использование нулевого пробела в середине слова — всё же не есть хорошо с т.з. копипаста. Что у нас еще есть? Есть <a href="https://cr8r.gg/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a>-тег и спецсимвол &shy;. Пробуем:<a href="https://cr8r.gg/tags/tag" class="mention hashtag" rel="nofollow noopener" target="_blank">#tag</a>s — <a href="https://cr8r.gg/tags/tag" class="mention hashtag" rel="nofollow noopener" target="_blank">#tag</a>s — &shy; <a href="https://cr8r.gg/tags/tag" class="mention hashtag" rel="nofollow noopener" target="_blank">#tag</a>s — &ZeroWidthSpace;В итоге корректно копируется в буфер только первый. Поэтому отлеплять окончание от тега следует при помощи .

Jobs for Developers3Pillar Global is hiring Senior Software Engineer - React🔧 <a href="https://mastodon.world/tags/javascript" class="mention hashtag" rel="nofollow noopener" target="_blank">#javascript</a> <a href="https://mastodon.world/tags/typescript" class="mention hashtag" rel="nofollow noopener" target="_blank">#typescript</a> <a href="https://mastodon.world/tags/react" class="mention hashtag" rel="nofollow noopener" target="_blank">#react</a> <a href="https://mastodon.world/tags/serverless" class="mention hashtag" rel="nofollow noopener" target="_blank">#serverless</a> <a href="https://mastodon.world/tags/aws" class="mention hashtag" rel="nofollow noopener" target="_blank">#aws</a> <a href="https://mastodon.world/tags/cicd" class="mention hashtag" rel="nofollow noopener" target="_blank">#cicd</a> <a href="https://mastodon.world/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://mastodon.world/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://mastodon.world/tags/seniorengineer" class="mention hashtag" rel="nofollow noopener" target="_blank">#seniorengineer</a> 🌎 Romania ⏰ Full-time 🏢 3Pillar GlobalJob details <a href="https://jobsfordevelopers.com/jobs/senior-software-engineer-react-at-3-pillarglobal-com-mar-4-2025-25bdd4?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting" rel="nofollow noopener" translate="no" target="_blank">https://jobsfordevelopers.com/jobs/senior-software-engineer-react-at-3-pillarglobal-com-mar-4-2025-25bdd4?utm_source=mastodon.world&utm_medium=social&utm_campaign=posting</a> <a href="https://mastodon.world/tags/jobalert" class="mention hashtag" rel="nofollow noopener" target="_blank">#jobalert</a> <a href="https://mastodon.world/tags/jobsearch" class="mention hashtag" rel="nofollow noopener" target="_blank">#jobsearch</a> <a href="https://mastodon.world/tags/hiring" class="mention hashtag" rel="nofollow noopener" target="_blank">#hiring</a>

CSS by T. Afif :verified:💡 CSS Tip!A simple CSS code to smoothly stop the rotation of your element on hover. The rotation will resume smoothly on mouse-out as well.<a href="https://css-tip.com/stop-rotation/" rel="nofollow noopener" translate="no" target="_blank">https://css-tip.com/stop-rotation/</a><a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a>

Amber WeinbergI scream with the rage of a thousand suns.<a href="https://front-end.social/tags/css" class="mention hashtag" rel="nofollow noopener" target="_blank">#css</a> <a href="https://front-end.social/tags/html" class="mention hashtag" rel="nofollow noopener" target="_blank">#html</a> <a href="https://front-end.social/tags/webdevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdevelopment</a> <a href="https://front-end.social/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#webdev</a>

𝙹𝚘𝚑𝚊𝚗<a href="https://cr8r.gg/tags/%D0%92%D0%B5%D0%B1%D0%94%D0%B8%D0%B7%D0%B8%D0%B3%D0%BD" class="mention hashtag" rel="nofollow noopener" target="_blank">#ВебДизигн</a> <a href="https://cr8r.gg/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://cr8r.gg/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://cr8r.gg/tags/%D0%92%D0%BE%D0%BF%D1%80%D0%BE%D1%81" class="mention hashtag" rel="nofollow noopener" target="_blank">#Вопрос</a>: а почему <code>hyphens: auto;</code> не используется всеми, всгда и повсеместно? 🤔

Maxi, wortschöpfungsverdrossen 🌺 :comfyblobcat:Hey <a href="https://corteximplant.com/tags/webdev" class="mention hashtag" rel="tag">#webdev</a> bubble - can any of y'all recommend resources to learn about accessibility?I'm aware of the WCAG guidelines as the "golden standard", but I'm looking for something more bite sized / approachable than 75 pages of raw paragraphs and rulesBoosts welcome! :boost_request:<a href="https://corteximplant.com/tags/wcag" class="mention hashtag" rel="tag">#wcag</a> <a href="https://corteximplant.com/tags/accessibility" class="mention hashtag" rel="tag">#accessibility</a> <a href="https://corteximplant.com/tags/html" class="mention hashtag" rel="tag">#html</a>

CSS by T. Afif :verified:An infinite logos animation? Here is the real infinite logos animations! ♾️<a href="https://css-tip.com/infinite-logos-animation/" rel="nofollow noopener" translate="no" target="_blank">https://css-tip.com/infinite-logos-animation/</a> <a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://front-end.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a>

ResearchBuzz: FirehoseAna Rodrigues: In defense of unpolished personal websites. “My imperfect and unpolished code on my personal website isn’t the full reflection on my technical abilities or knowledge of web development standards. It’s a constant draft where my handwriting is legible and where I want optimization takes a backseat. It’s where I use the little free time I have to actually write on it and […]<a href="https://rbfirehose.com/2025/03/13/ana-rodrigues-in-defense-of-unpolished-personal-websites/" class="" rel="nofollow noopener" target="_blank">https://rbfirehose.com/2025/03/13/ana-rodrigues-in-defense-of-unpolished-personal-websites/</a>

alltechpacks<a href="https://mastodon.social/tags/Programming" class="mention hashtag" rel="nofollow noopener" target="_blank">#Programming</a> <a href="https://mastodon.social/tags/Python" class="mention hashtag" rel="nofollow noopener" target="_blank">#Python</a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener" target="_blank">#JavaScript</a> <a href="https://mastodon.social/tags/CSharp" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSharp</a> <a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://mastodon.social/tags/Code" class="mention hashtag" rel="nofollow noopener" target="_blank">#Code</a> <a href="https://mastodon.social/tags/Tech" class="mention hashtag" rel="nofollow noopener" target="_blank">#Tech</a> <a href="https://mastodon.social/tags/DeepSeek" class="mention hashtag" rel="nofollow noopener" target="_blank">#DeepSeek</a> <a href="https://mastodon.social/tags/LLM" class="mention hashtag" rel="nofollow noopener" target="_blank">#LLM</a> <a href="https://mastodon.social/tags/OpenAI" class="mention hashtag" rel="nofollow noopener" target="_blank">#OpenAI</a> <a href="https://mastodon.social/tags/Chatgpt" class="mention hashtag" rel="nofollow noopener" target="_blank">#Chatgpt</a>

Mark Wyner Won’t Comply :vm:This is wild. I began designing and building websites in 1995. From today, in 2025, I’ve been designing and writing code for most of the internet’s existence. 👀<a href="https://mas.to/tags/Web" class="mention hashtag" rel="nofollow noopener" target="_blank">#Web</a> <a href="https://mas.to/tags/Internet" class="mention hashtag" rel="nofollow noopener" target="_blank">#Internet</a> <a href="https://mas.to/tags/Design" class="mention hashtag" rel="nofollow noopener" target="_blank">#Design</a> <a href="https://mas.to/tags/Code" class="mention hashtag" rel="nofollow noopener" target="_blank">#Code</a> <a href="https://mas.to/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://mas.to/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://mas.to/tags/WebDesign" class="mention hashtag" rel="nofollow noopener" target="_blank">#WebDesign</a> <a href="https://w3c.social/@w3c/114150554471950167" rel="nofollow noopener" translate="no" target="_blank">https://w3c.social/@w3c/114150554471950167</a>

CSS BasicsUsing & Styling The Details Element: "5+ years into the details element, and we know more about it than ever before. I thought I’d round that information up so it’s in one place I can reference in the future without having to search to find it." <a href="https://hachyderm.io/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> <a href="https://hachyderm.io/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#CSS</a> <a href="https://css-tricks.com/using-styling-the-details-element/" rel="nofollow noopener" translate="no" target="_blank">https://css-tricks.com/using-styling-the-details-element/</a>

Tommi 🤯I got nostalgic, so I ended up browsing pictures from <a href="https://pan.rent/tags/DWebCamp2023" class="mention hashtag" rel="nofollow noopener" target="_blank">#DWebCamp2023</a>, and I found these wild shots of me and <a href="https://w3c.social/@timbl" class="u-url mention" rel="nofollow noopener" target="_blank">@timbl</a>. Almost two years have passed, and I still cannot completely believe that I spent time chatting with the creator of the <a href="https://pan.rent/tags/WorldWideWeb" class="mention hashtag" rel="nofollow noopener" target="_blank">#WorldWideWeb</a> and that he autographed <a href="https://tommi.space/csss/" rel="nofollow noopener" target="_blank">my thesis</a>!Unbelievable things happen at <a href="https://pan.rent/tags/DWebCamp" class="mention hashtag" rel="nofollow noopener" target="_blank">#DWebCamp</a>.(Thanks to <a href="https://social.coop/@mai" class="u-url mention" rel="nofollow noopener" target="_blank">@mai</a> for the stolen shot 🌻)Fun fact: <a href="https://mastodon.archive.org/@mark" class="u-url mention" rel="nofollow noopener" target="_blank">@mark</a> kindly came and picked me up at the airport and he drove me and TBL to DWeb Camp. The first thing they asked me about while getting to the car was this patch I had, simulating the hammer and sickle communist symbol, but actually representing a sickle popping open an Aperol Spritz. So there was me, super jet-lagged and hungover (because I had my last exam of my bachelor the day before) trying to explain what that was to the creator of <a href="https://pan.rent/tags/HTML" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTML</a> and the director of the <a href="https://pan.rent/tags/WaybackMachine" class="mention hashtag" rel="nofollow noopener" target="_blank">#WaybackMachine</a>. It was super embarrassing but it is a great story to tell.<a href="https://social.coop/@dweb" class="u-url mention" rel="nofollow noopener" target="_blank">@dweb</a> <a href="https://pan.rent/tags/TBL" class="mention hashtag" rel="nofollow noopener" target="_blank">#TBL</a> <a href="https://pan.rent/tags/WWW" class="mention hashtag" rel="nofollow noopener" target="_blank">#WWW</a> <a href="https://pan.rent/tags/Internet" class="mention hashtag" rel="nofollow noopener" target="_blank">#Internet</a> <a href="https://pan.rent/tags/InternetHistory" class="mention hashtag" rel="nofollow noopener" target="_blank">#InternetHistory</a> <a href="https://pan.rent/tags/decentralization" class="mention hashtag" rel="nofollow noopener" target="_blank">#decentralization</a> <a href="https://pan.rent/tags/HTTP" class="mention hashtag" rel="nofollow noopener" target="_blank">#HTTP</a> <a href="https://pan.rent/tags/Web" class="mention hashtag" rel="nofollow noopener" target="_blank">#Web</a>

Recent searches

Search options

Administered by:

Server stats:

#HTML