TUF, Issue N5

A bi-weekly newsletter sent on Wednesdays with 4 links about Front-End and UI/UX design.


May 05, 2021 • View in browser ⟶

“If you optimize everything, you will always be unhappy.” – Donald Knuth


The Albatross flew across the ocean

Art by Andy Edwards »



Welcome to Issue N5

Hello everyone! how are you all doing?

Well, here i am again. What a week of findings, and doing new things. Let's have a look to some interesting stuff.

You are receiving this email because you have subscribed to TUF, written by Michael Andreuzza from his kitchen . Do you have a product or service to promote in TUF? Sponsor an issue.




How to make 80's Retrowave Art in HTML, CSS & SVG and Figma!!

"We're taking a trip back 40 years and creating an 80's inspired retrowave landing page using SVG, HTML and CSS. While you probably will never need to create *this* exact type of project, there's a lot of interesting techniques tucked in here, as it pertains to CSS.

80's retrowave is inspired by the use of bright colors (pinks, purples, blues), glowing text, neon glows and other elements, grids, palm trees and more. It really is a fun and unique aesthetic that brings older folks such as myself some nostalgia."

- I have liked this style for quiet a long time, and decided to create a template with the aesthetics. Is less difficult than you may think...





Build a Glassmorphic Navbar with TailwindCSS.

"Glassmorphism, a design trend that spiked in popularity in late 2020, is a methodology where a background-blur is applied to an element, giving it a sense of translucency and distinct perspective from its surrounding elements. .... "

- Well, after Tailwind CSS launched the blur thingy, everyone started to do so, personally, I had donde on Wicked when I saw it on Vercel, I got inspired by them, but now theres a huuuuuge number of sites doing so.I am changhing mine...Meh.





How To Style Your Next.JS Projects EXACTLY Like Google.

"Sticking to a consistent style guide is something that we all love doing as programmers. Whether it's spaces instead of tabs, double quotes instead of single, or putting your {'s on a new line (if you are a savage). ..."

- If you have your own way, don't do so, but if you do not mind, carry on.





I studied the fonts of the top 1000 websites. Here's what I learned.

"The median depth of the font-family stack is 4: one primary font and three backup fonts..."

- Mmmm, yeah I used to have 2 fonts on my projects, but now I am only using one with different weights, Inter or IBM Plex Sans/Mono it dependes...for a stack I go like this: Inter, system-ui, apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol.





Thank you for reading...

...and if you have missed the last issue, here it is. Issue N4