Lightnews — Scholar-powered news

Web Awesome @webawesome.com · 9m

No tricks…all treats! The initial version of Web Awesome Pro's Figma file is coming later this month! 🎃

Screenshot of a login form in Figma using Web Awesome components. The focus is on the Log In button, and the sidebar is open showing variant, appearance, size, and other options.

Web Awesome @webawesome.com · 1d

At 12:00pm ET, the Web Awesome website will be offline briefly for scheduled maintenance. We expect this to take less than an hour.

Thanks for your patience as we prepare for launch later this month!

1

Web Awesome @webawesome.com · 1d

Every Web Awesome theme comes with dark mode built-in 🌛

1 8

Web Awesome @webawesome.com · 1d

This is the correct way to read them 👇

Slime @slime.camp · 4d

Everyone reads @webawesome.com element names like they are Wario in their head right? is Wah!-button

4

Web Awesome @webawesome.com · 9d

Generating QR codes has never been easier!

value="webawesome.com"
label="QR code linking to webawesome.com"
>

Screenshot of a QR code example from the Web Awesome docs

5

Web Awesome @webawesome.com · 9d

The components are built with JavaScript. It's no JavaScript for the user 😅

1

Web Awesome @webawesome.com · 9d

Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes with <wa-animation>

2

Web Awesome @webawesome.com · 12d

Use <wa-intersection-observer> to easily add classes to elements when they appear in the viewport. No JavaScript required!

1 1 6

Web Awesome @webawesome.com · 13d

Eight new icon packs?

Great work, @fontawesome.com! 🫡

Font Awesome @fontawesome.com · 13d

7 new Icon Packs isn’t cool. You know what is? 8 new Icon Packs!

FA Utility is hot off the presses! To celebrate this release, you can get a 20% off discount on the first year of a Pro+ subscription and see what all the fuss is about!

Grab it now: fontawesome.com/plans/pro-pl...

Grid of Utility icons on a navy background

1

Web Awesome @webawesome.com · 13d

Web Awesome bakes accessibility in!

Form controls automatically wire up their labels and hints under the hood, allowing you to write cleaner HTML with less chance for error. 💪

Screenshot of the Nickname example from the <wa-input> docs.

1

Web Awesome @webawesome.com · 15d

Docs: webawesome.com/docs/compone...

Drawer

Drawers slide in from a container to expose additional options and information.

webawesome.com

Web Awesome @webawesome.com · 15d

Web Awesome makes drawers easy. And with declarative invokers, you can open and close them without writing any JavaScript.

Screenshot of a Web Awesome drawer from the docs.

1 2 13

Web Awesome @webawesome.com · 16d

Format relative times like a champ with our declarative wrapper around the platform's Intl.RelativeTimeFormat API.

webawesome.com/docs/compone...

Screenshot of the first relative time example from the docs.

2 5

Web Awesome @webawesome.com · 16d

Link: webawesome.com/docs/compone...

Rating

Ratings give users a way to quickly view and provide feedback.

webawesome.com

Web Awesome @webawesome.com · 16d

🌟 Add user feedback to your app with ease!

The <wa-rating> component lets you customize ratings with labels, precision, sizing, custom icons, and more.

Check out the docs and make your UI shine! 📊✨

1 2 4

Web Awesome @webawesome.com · 20d

Friendly reminder that Web Awesome is — and always will be — free and open source 👑

Screenshot of the "Make something AWESOME with open-source web components" banner from the Web Awesome website.

2 14

Web Awesome @webawesome.com · Sep 15

Update: bsky.app/profile/weba...

Web Awesome @webawesome.com · Sep 15

Web Awesome 3.0.0-beta.6 has just been published to npm.

This version is safe to use, as it pins the affected dependency to the last safe version. You can update to 3.0.0-beta.6 by running the following command:

npm i @awesome.me/[email protected]

Web Awesome @webawesome.com · Sep 15

⚠️ SECURITY ALERT: An npm dependency used by Web Awesome was compromised a few hours ago.

This ONLY affects npm installs — CDN users are safe.

DO NOT install Web Awesome via npm right now. New unaffected version is publishing now…

1

Web Awesome @webawesome.com · Sep 15

Web Awesome 3.0.0-beta.6 has just been published to npm.

This version is safe to use, as it pins the affected dependency to the last safe version. You can update to 3.0.0-beta.6 by running the following command:

npm i @awesome.me/[email protected]

Web Awesome @webawesome.com · Sep 15

⚠️ SECURITY ALERT: An npm dependency used by Web Awesome was compromised a few hours ago.

This ONLY affects npm installs — CDN users are safe.

DO NOT install Web Awesome via npm right now. New unaffected version is publishing now…

2 8

Web Awesome @webawesome.com · Sep 15

bsky.app/profile/sock...

Socket @socket.dev · Sep 15

🚨 Malicious update to @ctrl/tinycolor on npm is part of an active supply chain attack hitting 40+ packages across multiple maintainers. Audit & remove affected versions.

Our analysis of the malware: socket.dev/blog/tinycol... #NodeJS #JavaScript

Malicious update to @ctrl/tinycolor on npm is part of a supply-chain attack hitting 40+ packages across maintainers

socket.dev

1 1

Web Awesome @webawesome.com · Sep 15

Details on the affected dependency can be found here: t.co/pvhIvAA7N1

http://socket.dev/npm/package/@ctrl/tinycolor/overview/4.1.2

t.co

1 3

Web Awesome @webawesome.com · Sep 15

⚠️ SECURITY ALERT: An npm dependency used by Web Awesome was compromised a few hours ago.

This ONLY affects npm installs — CDN users are safe.

DO NOT install Web Awesome via npm right now. New unaffected version is publishing now…

1 4 6

Web Awesome @webawesome.com · Sep 10

🚀 3.0.0-beta.5

🎨 Added color generation to Theme Builder (pro)
📐 now works with @fontawesome.com 7
👀 Added component
💬 Added the Hindi translation
🐛 Various bug fixes and improvements

Changelog: webawesome.com/docs/resourc...

Changelog

Changes to each version of the project are documented here.

webawesome.com

5 12

Web Awesome @webawesome.com · Sep 10

I created this issue to make sure this gets updated. github.com/shoelace-sty...

Show what pro components do in the docs instead of paywalling them · Issue #1431 · shoelace-style/webawesome

Currently, visiting <wa-page> without being logged in takes you to this. We need to show folks what these components do, though.

github.com

1

Web Awesome @webawesome.com · Sep 10

Sorry we missed this message. Thanks for bringing this up. We'll get it fixed soon! — CL

1

Web Awesome @webawesome.com · Aug 11

Thinking of doing a podcast soon. Part of it will have a Q&A. What questions do you have for us? 🤔

5