Modern Background Patterns & Gradients Snippets — FullStack Bulletin #437
Discover PatternCraft for fast site design, pinpoint AI's role in product design, and ride solo with React Server Components.
Hi there,
Another week, another issue full of hand picked nuggets of full-stack knowledge and inspiration (and admittedly, a little bit of AI too, because we cannot escape it these days).
This one mixes quick wins with deep dives. Fresh CSS and Tailwind patterns you can paste straight in. A reality check on what AI can do for product design. A slick gallery for UI inspiration when your brain is out of juice. RSC without a framework for the brave. OKLCH colors that make palettes feel sane. A price per token dashboard for anyone shipping with models. And a practical look at the new React's <Activity> boundary to hide views while keeping state.
Grab a coffee, pick your lane, and let your curiosity drive. If something sparks an idea or a rant, hit reply and tell me about it.
Happy reading and coding!
— Luciano
"In C++ it's harder to shoot yourself in the foot, but when you do, you blow off your whole leg"
— Bjarne Stroustrup, Computer Scientist
Modern Background Patterns & Gradients Snippets — PatternCraft is a neat little resource I discovered last week. I love tiny utilities that help you spice up a site fast, and this one delivers. It generates background patterns in geometric, gradient, decorative, and other styles. Every pattern is built with modern CSS and Tailwind, no images required. Copy any pattern with one click and drop it into your HTML. Want to go further? Plug it into your theme and swap colors on the fly, perfect for light versus dark mode or brand palettes. It is totally free and a smart pick if you are building a new site or giving an old one a fresh coat of paint CSS! Read Article
Beyond The Hype: What AI Can Really Do For Product Design — Lately I have become more and more interested in finding a good balance between using AI and doing it all myself. I am convinced that today AI cannot finish big ambitious projects on its own (at least not to an acceptable level of quality). It needs a lot of steering. I call it AI assisted development. You keep both hands on the wheel, and a very capable assistant handles the boring bits. That is for development. So what can AI really do for product design? Let us find out. Read Article
Viewport UI: UI curated experiences for you inspiration. — Viewport UI is another neat resource that helps you find great inspiration for interactions and all kinds of UI moments across platforms. The gallery is curated and easy to browse, with categories for web, desktop, mobile, watch, iOS, Android, icons, and motion. Check it out if you want an alternative to Dribbble for design inspiration and a faster way to spark ideas for your next build. Read Article
React Server Components support without a framework — I have to admit I am still not entirely sold on React Server Components (RSC), although I do see the appeal. I cannot quite explain why, but the setups I have seen feel too complicated, half baked or brittle, or too dependent on a framework. Yes, I am looking at you Next.js! This article introduces Forket, a tool that splits your code into client and server so you can run RSC without a framework. I have not used it yet, but it looks extremely promising. Read Article
What are OKLCH colors? — We have covered OKLCH colors before, but I feel we have not covered them enough. So what is special about them? OKLCH is a perceptual color model. Tweaks map to how we actually see color, which makes everyday work a lot more predictable. The killer move is consistent brightness. Pick a base color, keep lightness steady, then slide hue to spin the wheel and you get a balanced palette without surprises. This piece shows the idea with clear visuals and plenty of practical notes. CSS oklch(), contrast tips, and how to swap palettes for light versus dark mode. I am already experimenting and enjoying the results. Are you? Let me know! Read Article
Compare LLM API Prices For Over 300 Models — We are back for more AI info. This one is an incredibly practical resource. There are so many models out there, and if you are building an LLM powered application it can be tough to pick the right one. Fit to your use case matters most, but price deserves serious attention. Price per Token gives you a handy dynamic table that shows the actual cost across models. input and output dollar cost per million tokens. It also lists context length and the potential cost for caching when supported. Check it out if you are comparing providers or planning your runway. Read Article
Using Activity with Suspenseful data — Here is the key value of <Activity> (still experimental). It lets you hide parts of the UI while preserving each component’s internal state. Set its mode to visible or hidden. When hidden, React applies display: none, preserves the children’s state, and cleans up their Effects. Reveal it and React restores the previous state so the view pops back instantly. Perfect for tabs, drawers, and sidebars where you do not want to lose input or scroll position. The demo in this article uses a table that fetches course rows from a CMS. The parent controls visibility with radio filters while each row decides whether it should show. You get snappy filters with preserved row state and suspenseful fetches that keep preloading in the background. There is also a handy video that explains the main ideas in about three minutes, plus a concise demo of <Activity> with suspenseful data. Read Article
📕 Book of the week!
AI as a Service: Serverless machine learning with AWS, by Peter Elger, and Eoin Shanaghy
AI as a Service is a practical handbook to building and implementing serverless AI applications, without bogging you down with a lot of theory. Instead, you'll find easy-to-digest instruction and two complete hands-on serverless AI builds in this must-have guide! Companies everywhere are moving everyday business processes over to the cloud, and AI is increasingly being given the reins in these tasks. As this massive digital transformation continues, the combination of serverless computing and AI promises to become the de facto standard for business-to-consumer platform development—and developers who can design, develop, implement, and maintain these systems will be in high demand! AI as a Service is a practical handbook to building and implementing serverless AI applications, without bogging you down with a lot of theory. Instead, you'll find easy-to-digest instruction and two complete hands-on serverless AI builds in this must-have guide!
Buy on Amazon.com - Buy on Amazon.co.uk
Extra goodies for the curious minds! 🔍
- Designing a Clickable Card with Semantic HTML in Mind
- You no longer need JavaScript (for most things)
- Elements of Rust: Core Types and Traits
- CSS boilerplate
- i18n-check: Validate i18n translation files
- Speeding up the JavaScript ecosystem: Semver
- Eliminating JavaScript cold starts on AWS Lambda
- Lambda and Java with Mark Sailes (AWS Bites podcast)
Final chapter complete! 📚
Final bytes processed! Your thoughts and suggestions fuel our passion: hit reply and share what's on your mind! 🔥