FullStack Bulletin

Subscribe
Archives
March 4, 2024

🤓 #362: Shoelace: A forward-thinking library of web components

Waku, console.delight, Making SVG Loading Spinners, Dead Simple Sites, CSS :has() Interactive Guide, More JSDoc - Less TypeScript

View this email in your browser

Logo

Howdy dear *|LIST:NAME|*

...and welcome to issue #362. This is yet another issue rich of lovely full-stack content and I hope you'll enjoy every single bit of it!
I have only one service call for you this week. This Wednesday (6th of March), I'll be talking at the Rust Dublin Meetup. It will be a remote event and it will be live-streamed on YouTube, so, if you are interested in Rust and want to learn a thing or two about parsing, make sure to hit the notify button here: An intro to nom, parsing made easy for Rustaceans. I'd love to see you there! :)
— Luciano

“Measuring programming progress by lines of code is like measuring aircraft building progress by weight“

— Bill Gates , Entrepreneur

Shoelace: A forward-thinking library of web components.

Shoelace: A forward-thinking library of web components —  Last week, I was researching UI components libraries for a new project and I bumped into Shoelace, a component library based on custom elements but that also offers facades for React, Vue, and Angular. It seems very promising but it doesn't pass yet my personal litmus test in terms of components completeness: having a date-time picker component... Hopefully they'll add that soon! Read article

Waku: the minimal React framework — During my research, I also bumped into Waku, which seems like a potentially interesting alternative to the myriad of react frameworks such as Next.js, Remix, Astro, etc. It tries to be different by taking a very minimalistic stance on focusing mostly on providing good support for server-side rendering. If you are only looking for a thin layer to do just that, Waku might really be worth a look. Read article

console.delight — Everyone knows you can use console.log() to log text and variables to the console. Did you know you could also render (limited) CSS, SVGs, and even HTML in it?!? It might be convenient for some original Easter eggs... Read article

Making SVG Loading Spinners: An Interactive Guide — Our friends at Fffuel brought us this fantastic interactive article on how to create amazing SVG-based loading spinners. If you always wondered how to draw and animate arcs and circles with SVGs and a bit of CSS, you'll surely enjoy reading through this one! Your next loading screen is certainly not going to be boring! ☺️ Read article

Dead Simple Sites — Minimal Website Inspiration — If you are a lover of minimalist websites with a great focus on typography and care for whitespace but without many bells and whistles, this site is for you. A great gallery of "Dead Simple Sites" for you to find inspiration. Check it out! Read article

CSS :has() Interactive Guide — Time for another interactive tutorial! This time with everything you need to know about the CSS :has() selector. What I really liked about this article is that it has tiny exercises that you can complete on the page itself to test your understanding. These king of things make articles like this so much more fun to go through! Read article

JSDoc as an alternative TypeScript syntax — This argument keeps popping up now and then. Should you use TypeScript and take the hit on extra setup and compilation time, or should you rather adopt type annotations in JSDoc? If you think the latter is a good tradeoff, this guide will give you some good tips on how to do that correctly. Read article

ReactJS by Example- Building Modern Web Applications with React

by Vipul A M

ReactJS by Example- Building Modern Web Applications with React

tarting with a project on Open Library API, you will be introduced to React and JSX before moving on to learning about the life cycle of a React component. In the second project, building a multi-step wizard form, you will learn about composite dynamic components and perform DOM actions. You will also learn about building a fast search engine by exploring server-side rendering in the third project on a search engine application. Next, you will build a simple frontpage for an e-commerce app in the fourth project by using data models and React add-ons. In the final project you will develop a complete social media tracker by using the flux way of defining React apps and know about the best practices and use cases with the help of ES6 and redux.

Buy on Amazon.com
Buy on Amazon.co.uk

Are you thirsty for more content? 🚰

  • Bloom Filters
  • How to find the AWS Account ID of any S3 Bucket
  • Going beyond pixels and (r)ems in CSS - Container query length units
  • A practical guide to using shadow DOM
  • Playing with Infinity in CSS
  • MDN Curriculum
  • A Fun Line of Code

👋 That’s all for this week. See you next Monday!

Greetings from your full stack friends Luciano & Andrea

🙌 Support us

If you enjoy FullStack Bulletin, consider sharing this newsletter with your friends and colleagues.


If there's something we can improve, let us know!


You can also sponsor the next issue!

Website iconTwitter iconInstagram icon

Copyright (C) 2024 FullStack Bulletin. All rights reserved.
*|IFNOT:ARCHIVE_PAGE|*

FullStack Bulletin is a FREE weekly curated newsletter for ambitious full stack developers. We sift the internet for builders, covering frontend, backend, databases, DevOps, and architecture to find what truly matters. Expect practical picks, clear takeaways, and fresh ideas that cut the noise, sharpen your skills, and fuel your creativity so you can put them to work right away.

*|END:IF|*

Our mailing address is:
*|IFNOT:ARCHIVE_PAGE|**|HTML:LIST_ADDRESS|**|END:IF|*

Want to change how you receive these emails?

You can update your preferences or unsubscribe

Don't miss what's next. Subscribe to FullStack Bulletin:
Powered by Buttondown, the easiest way to start and grow your newsletter.