RWD Weekly #449 — the one about TailwindCSS

Read online

Hello again, welcome back to RWD Weekly #449.

This week we're packing the tutorials in to keep you busy on the first Friday of Spring, and the last Friday of home schooling for the UK.

The feature site this week comes from a project that I helped collaborate on with a group of people I only ever met via Discord. It's the first time I've ever worked in a decentralised team and it was thoroughly enjoyable!
 

Headline

Pablito Planeta - Design Astrologist

Your design astrologist i here ready to read your stars and tell you what to expect for 2021.

 


Sponsor

Stay current with today's best web design practices


Spanning the spectrum from advanced CSS to inclusive and cross-cultural design, to web components and PWAs to user research, An Event Apart Online Together: Spring Summit features fifteen important sessions from world-class experts to keep you up-to-date with today’s best practices. Join us online April 19–21.

 

Save $100 on any multi-day pass with promo code AEARWD21.


See the detailed three-day agenda and register now.
View details
Advertise your product, service, or job opportunity to 26,357 tuned in web designers and developers. Find out more.

Article

 

How to Get a Dysfunctional Team Back on Track

A different kind of post from Liam than you usually see on A List Apart, but one which I think is really important for everyone to read. Whether you’re managing a team, working as part of a long established team, or are new into a team, there’s lots of actionable parts of this post. The situation isn’t one which should be a mystery to anyone, and if it is then you should still take notes because you’ll be in this predicament at some point in your career journey.
 

This Web Site is a Tech Talk

A few years ago I came across a site that made you look like a hacker. Now Zach can help you look like a web developer.
 

State of Design 2021

Recently Abstract surveyed over 1,000 designers and asked them how they work, what they value, and what kinds of challenges they’re facing. Here’s what they found
 

Building User Trust In UX Design

Building trust is one of the central goals of user experience design. And yet trust is a concept that’s very hard to define in a precise manner. We all know it when we feel it but often fall short of putting it in words. Being able to turn the elusive and intangible into actionable and concrete steps, however, is exactly what makes UX so crucial in the modern business ecosystem.
Great article from Adam Fard


Tutorials

 

CSS transitions and hover animations, an interactive guide

There's a surprising amount of depth to this topic. In this tutorial, Josh will dig in and teach you a bit more about CSS transitions, and how you can use them to create lush, polished animations.
 

The Things I Add to Tailwind CSS Right Out of the Box

I've mentioned Tailwind a few times in this edition, so let's look at a couple things that you might want to customise if you ever find yourself reaching to use it.
 

Debugging Media Queries: A Dev Tools Wish List

The Level 5 Media Queries specification brings us the ability to detect a whole load of different user preferences from within our CSS file, and serve up styles accordingly, let's look at Michelle's favourites.
 

Measuring Network Performance in Mobile Safari

Harry walks through the setup you need to test performance on mobile IOS devices.
 

Tailwind CSS tutorial with examples. Get started in 13 minutes

If you're looking to get started using Tailwind, this 13 minute (read) tutorial will get you up to speed and ready to go.
 

Diving into the ::before and ::after Pseudo-Elements

The ::before and ::after pseudo-elements are incredibly versatile tools in the CSS toolkit. Understanding them can help you craft practical CSS to solve all sorts of situations. Or you can take things further and use them to create impressive feats of CSS trickery.
 

Writing Good Alt Text

Jake and Surma tackle the age-old problem: what should you include in an image's alt text? Jake starts by looking at a profile image of himself for the Google Chrome summit and points out all the things you don’t get from “Picture of Jake Archibald” and what you should do.
 

Tailwind CSS: From Zero to Production

I was really against Tailwind to start with because of the utility class approach, but after helping set up an decentralised product that relies on community contributions it’s been a helpful way to approach front end builds. Bramus shares a link to a great tutorial from the Tailwind team themselves this week.
 

The State Of Mobile And Why Mobile Web Testing Matters

This article from Kelvin tells us something that most of us are well aware of... mobile usage is higher than desktop and we should be spending time to create responsive sites. What you might not be familiar with is the tools and approaches on mobile testing that are outlined in this article.
 

The Ultimate CSS Grid Tutorial for Beginners (With Interactive Examples)

 

Position sticky



Resources, Releases & Tools


What's New In DevTools (Chrome 90)

Lots of updates from Jecelyn Yeen this week, and my favourite was the new CSS Debugging tool. I often just add flex in the CSS and then 'work it out' inside the browser, now I've got some visual guides to help me rather than just guessing which justify-content I want to use.

 

Jobs


Front End Developer role

“The Natural History Museum in London is looking for a Front End Developer to join the Digital Media department, working on the Museum’s public facing digital experiences. Salary up to £37K, closing date 17th March, 9am. Find more details and apply here

Finally


That's all for this week. Thanks for stopping by, if you found something useful please recommend us to a friend and help us continue to grow.

Cheers,

Justin.

Twitter
Facebook
Website
Copyright © 2021 Simple Things, All rights reserved.
You are receiving this email because you rock! You wanted to know more about Responsive Web Design so you signed up to this list to receive a weekly update with links to articles, tools and tricks of the trade.

Our mailing address is:
Simple Things
Simple Things LTD
Thame, Oxfordshire OX92EQ
United Kingdom

Add us to your address book


Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list

Email Marketing Powered by Mailchimp

Older messages

RWD Weekly #448 — the one about shadows

Friday, February 26, 2021

Shadows, tools for AVIF, WebGL gallery Read online Hello again, welcome back to RWD Weekly #448. This is the second to last week of home schooling in the UK and a small step towards returning a small

RWD Weekly #447 — the one about Z Index

Friday, February 19, 2021

Z Index, Web frameworks, history of the web and more Read online Hello again, welcome back to RWD Weekly #447. Our feature site this week comes from a course which I've signed up for called The

RWD Weekly #446 — the one about position: sticky

Saturday, February 13, 2021

Keep users in context with position:sticky, and learn why it's you that has changed and not the web. Read online Hello again, welcome back to RWD Weekly #446. The feature site this week has X-FRAME

RWD Weekly #445 — the one about GitHubs homepage

Friday, February 5, 2021

Pixelated art, CSS animated gradients, performant home pages and more. Read online Hello again, welcome back to RWD Weekly #445. Our feature site this week was suggested by Raquel Freitas because she

RWD Weekly #444 — the one about scroll-margins

Friday, January 29, 2021

Open Web Docs, Haptic effects in the browser, avoiding layout shifts and a tonne more. Read online Hello again, welcome back to RWD Weekly #444. This week we're taking a look at a classic website

Inside Claude Monet's Home at Giverny

Wednesday, June 16, 2021

(image) Architectural Digest AD PRO Logo Image may contain: Garden, Outdoors, Arbour, and Porch Forget the Gardens: The Best Part of Giverny Is Monet's Kitchen Read More → (image) Condé Nast

Typography Trends, Tutorials UX, Safari 15, Brave Onboarding, Loaf

Wednesday, June 16, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 16 2021 Typography Trends in 2021: What Should You Know?

Issue 307

Tuesday, June 15, 2021

Fixing up all the table things, equal columns with flexbox, avoiding layout shift when loading web fonts. CSS Layout News Issue 307 By Rachel Andrew – 15 Jun 2021 – View online → It's still sunny

✏ Samsung Redesigns the Save Icon, 22 Exciting New Tools, Typography Trends, and more…

Tuesday, June 15, 2021

Samsung Gives the “obsolete” Floppy Disc Save Icon a Facelift for the 2020s ITSNICETHAT.COM COMMENTS 22 Exciting New Tools for Designers, June 2021 WEBDESIGNERDEPOT.COM COMMENTS Typography Trends in

96 / Not boring avatars for your apps, design resources, iOS 15 UI kit and epic fails

Tuesday, June 15, 2021

Product Disrupt Logo Product Disrupt Half-Monthly Jun 2021 • Part 1 View in browser Image Boring Avatars Tiny JavaScript React library that generates custom, SVG-based, round avatars from any username

Smashing Newsletter #305: Color Palettes Generators and Tools

Tuesday, June 15, 2021

With CSS variables, HSLA, color generators, color combinations and color scales for data visualizations. Issue #305 • June 15, 2021 • View in the browser 💨 Smashing Newsletter Ciao Amici, Color may

👨‍⚕️ Curative Medical UI Kits + 🏆 Challenge Updates

Tuesday, June 15, 2021

Don't Miss This Week's UpLabs Designer Digest 👇 Firstly, we'd like to wish a warm congratulations to Yolan Puspa, the winner of our latest 🎙Clubhouse App Redesign Challenge! Secondly, we

✏ Is A Graphic Design Career For You? Create React Custom Hooks, Health Icons, and more...

Monday, June 14, 2021

Is a Graphic Design Career for You? (7 Questions to Ask Yourself) DRIBBBLE.COM COMMENTS When CSS Isn't Enough: JavaScript Requirements for Accessible Components SMASHINGMAGAZINE.COM COMMENTS Health

A Filmmaker's Kubrickian Loft

Monday, June 14, 2021

Design editor Wendy Goodman takes you inside the city's most exciting homes and design studios. Design Hunting A visual diary by Design Editor Wendy Goodman The living room (that's not really a

This New Tabletop Collection Has Us Falling Back in Love With Formality

Monday, June 14, 2021

Plus, 10 kitchen trends taking TikTok by storm (image) Architectural Digest AD PRO Logo The Expert Taps Former Domino EIC Jessica Romm Perez to Lead Partnerships Read More → CeCe Barfield's New