Hey everyone βοΈ Here's a quick look at this week's newsletter:
πΌ Interactive Design Systems Explained
π« Auto-Grow Textareas with CSS
π Uplift UX with Composable CSS Utilities
Enjoy this weeks edition π - Adam at Unicorn Club.
Join 2,000+ People. Every Wednesday.
Carefully curated newsletter for developers, designers, and makers. 100% Free.
Brought to you by Shift Kit
Shift Kit - Your secret weapon to unlock better products
Shift Kit is a set of 19 templates for Notion, Miro, Figma, and print that helps teams tackle problems faster.
When used together, these powerful exercises can take you and your team from problem to prototype in just days, instead of weeks or months.
π οΈ Resources & Tools
The freeCodeCamp community publishes technical tutorials in many forms. We publish shorter, more focused guides that aim to answer a specific question.
Make your Design System interactive
Design GUI is a browser extension for Tailwind CSS. Edit colours, components or even your entire Design System
β¨οΈ HTML
We're Bringing Responsive Video Back!
We used to have standard, cross-browser responsive video. However, in 2014, media attribute support for HTML video sources was deleted from the HTML standard
ποΈ CSS
Responsive type scales with composable CSS utilities
With the help of calc(), clamp(), and a somewhat wonky use of CSS vars, we can simplify this process and tap into the dynamism that modern CSS affords.
Textareas with auto-increasing height using CSS
Textareas areas are great when it comes to accepting a large amount of text from the user. But, the problem with textareas is that they have a fixed height.
How to create a smooth worm or snake animation, with HTML and CSS.
Thereβs no such thing as a desktop screen
Next time you think βthis is a desktop-only appβ, think again. Responsiveness is a bit more nuanced than that.
Type safe CSS design systems with @property
CSS types are a worthy investment into type safety in your front-end work. We're still awaiting cross browser interop, but we'll get there.
π₯ Promoted Links
Share with 2,000+ readers, book a classified ad.
React Advanced London - Oct 20 & 23
Passionate about cutting-edge web dev with React (Native), GraphQL, TypeScript & eager to learn from top experts? Use "unicornclub10" to get 10% off a hybrid ticket!
Become part of a global network of developers, testers, and hackers enhancing their API exploitation skills.
Freelance Freedom, Without the Grind
Meet your first clients, learn how to sell $10K+ deals, and enjoy freelance freedom without the grind.
Support the newsletter
If you find Unicorn Club useful and want to support our work, here are a few ways to do that:
π Forward to a friend
π¨ Recommend friends to subscribe
π’ Sponsor or book a classified ad
βοΈ Buy me a coffee
Thanks for reading β€οΈ
@AdamMarsdenUK from Unicorn Club