TUF, Issue N1

View this email in your browser ⟶

border="0" alt="The Albatross flew across the ocean" width="100%" height="auto" hspace="0" vspace="0" style="max-width:100%; " class="image">

Art by Roggie ⟶

Welcome to issue 1.

"I am Michael the Spaniard. And I come back to you now… at the turn of the tide."

Hello everybody, here we are on the first issue without resources...! finally. Is not that they are bad, but there is a lot of newsletters doing the same, and yes, also many sending tutorials and articles, I am aware of that, but I rahter to share some knowledge than just linkin back to products. At the same time, I will learn too.

Not Susbscribed?

Now, please enjoy this issue.

Chrome will stop displaying focus rings when clicking buttons. Here are ways to keep accessibilty.

So,..Chrome, Edge, and other Chromium-based browsers display a focus indicator, the infamous ugly ring. But, Safari and Firefox do not do this.

Definately not the nicest thing to see when using the keyboard but great for accessibilty. You can prevent to show it, and here are some workarounds.

In my case, I build with Tailwind CSS and I use "focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2" this classes will remove the indicator and add a nice ring witht an animation when highlighting a button, on links you could use "focus:shadow-outline focus:outline-none"

I do this in most of my projects, if you want to try it out you can visit TUF's website and press any button. In fact if you subscribed on the landing page, you have seen it already.

By Šime Vidas

Page Transitions: Creative Examples, Resources and some Tips.

Page transitions are a fundamental part of website navigation and user experience, they help to create visual continuity and entertain the user while all the assets are loading. The perception of fluidity and continuity is the key to superb app design, and animated transitions between views is the magic of the majority of SOTDs.

Personally, I do not think they are needed in every single web or app. Sometimes, they are just not needed. I do not use page transitions or super animations when building my own projects, only on "hover" or "click" and very subtle.

By Awwwards

AlpineJS for Beginners.

a new javascript library/framework that focuses on simple javascript interactivity, and it does it really well. If you're looking for a JS framework with routing, state management, and a bit more complexity. Well then, Vue or React may be a better fit.

I have been using myself alpine.js on all my sideprojects since I rebuilt them with Tailwind, mostly on Wicked Blocks and the templates that I sell on Wicked Templates, because it requires more. I use it for responsive navigation and tabs mostly. In fact, th

By Tony Lea

Creating a scene with Three.js

The goal of this section is to give a brief introduction to three.js. We will start by setting up a scene, with a spinning cube. A working example is provided at the bottom of the page in case you get stuck and need help.

By Threejs docs.

Michael Andreuzza