Glassmorphism with Tailwind CSS Under 60 seconds

David — Fri, 18 Dec 2020 14:43:34 +0000

Glassmorphism is an ongoing trend right now in User interfaces. The new macOS, Big Sur brings a lot of it into the OS, and Microsoft has it for years with Aero UI, then later FluentUI.

To recreate this effect on the web, we only need a few css properties, but what if we want to use Tailwind?

Tailwind 2.1 Update

Tailwind 2.1 introduced first-party support of background-blur utility, so I'm back with a revision of this post.

The only classes you need to apply to your element right now:
bg-clip-padding backdrop-filter backdrop-blur-xl bg-opacity-60 border border-gray-200

Here's the Play link for the updated code

Original article:

(Only read this if you are curious about how it worked before Tailwind 2.1)
If you prefer a quick 1 min video:

This article originally posted on Davidlevai.com blog.

We need these utility classes: bg-opacity-{xy}, bg-clip-padding, bg-{color}. We can add a little border and shadow to look better with these: border border-{color}, shadow-{size}.

And to completely recreate the effect, we should blur the background. We've got 2 options here:

1. Inline styles

Add a style property to the card div: style="backdrop-filter: blur(20px);".

You can access the full code here

2. Extend Tailwind

We can use Tailwindcss-filters to extend it and use backdrop-filter as a utility class.

Just yarn add tailwindcss-filters, then extend your tailwind.config file:

// tailwind.config.js
module.exports = {
  theme: {
    backdropFilter: {
      'none': 'none',
      'blur': 'blur(20px)',
    },
  },
  plugins: [
    require('tailwindcss-filters'),
  ],
};

And now you can use the backdrop-filter-blur utility class on your HTML.

Do you have any other quick & easy solutions to common things with Tailwind?

Programming YouTube channels

David — Tue, 24 Mar 2020 12:06:31 +0000

Hey Guys!

What are your best recommendations for programming Youtube channels?

I've just uploaded my first tutorial video and I want to check out some fellow developer youtubers, whom I don't know.

Productive Remote Teamwork For Product Teams + 5 Free Awesome Tools

David — Wed, 18 Mar 2020 21:24:43 +0000

Work culture evolved like 5 years in early 2020. Now, I’ve summarised my experiences working with 10+ remote teams and clients in the last half-decade. In the following lines, you’ll find some help on how to maintain human contacts, how to be productive, and what tools & apps I recommend for your team to maximize efficiency.

Meetings, chat

No one likes meetings. Especially meaningless chit-chats about nothing. So home office is a great opportunity for you & your team to practice effective meetings. The most important point is to schedule meetings ahead of time for everyone to arrive prepared, because this way, all meetings will become more effective.

I highly recommend to do so-called Stand ups. These meetings work as an overview of what your team did since the last stand up meeting and what are the next steps. Here, you should talk about how are the projects state, this way everyone will get a response to their questions in time, and the team lead will know about possible blocking issues or any other problems. A stand up meeting should not take more time than 1.5-2.5 minutes/team member. I recommend doing it asynchronously with the help of a Slackbot, and one online /week.
Ps.: These meetings are called “stand up” because, in a normal environment, every member is standing to be as quick as possible and maximize focus on the meeting itself.

The other meetings you should be aware of are Retrospectives. In a retrospective, the team talks about the last few weeks and analyze the teamwork. A retro call looks like this: everyone should tell what they think, the team did great, what they didn’t do well and needs to improve, and what should the team start doing to be more effective. This calls could be really long if you’ve got at least 4 teammates. So I highly recommend everyone to prepare for it at least half an hour before to be more effective.

Tools I recommend: Google Meet/Calendar, Zoom, Slack, Discord, Geekbot

We are not robots 🤖

It’s really important to track the time everyone spent on work. It mainly helps with invoicing, but if no one gets paid by worked hours, it still a great idea to see how you spend your home office time. It’s really easy to just quickly do the laundry, walk the dog, cook a 3-course meal, watch 1 episode of Friends, etc. and suddenly find yourself in the middle of the night, and you finished nothing today. (Trust me, I know about this. I’m doing this time to time…)

So I recommend you to set up a time tracking tool and learn the habit of tracking everything you do. It not only helps you know how much time you spent bingeing YouTube videos, but it subconsciously motivates you to be productive.
It is really easy to find yourself at the other end of the spectrum too. If you are an entrepreneur, it won’t be a surprise if you find yourself working 12-16 hours/day from time to time. (Trust me, I know about this. I’m doing this really often…)

Tools I recommend: Clockify, Toggl

Be clear with tasks

It’s easy to just briefly write 2 sentences about a task, like “Change text color to red.”, but nobody’s gonna understand that. Make sure, that the tasks you’re writing to a project management tool is clear and understandable for a 7 year old kid, who just barely knows what a company is.

Sure, this definitely needs more time to write, but a lot of headaches & unnecessary communications avoided this way.
Always add due dates to tasks to have an agreement about what is the latest deadline. Use labels/subtasks to categorise and break down complex tasks.

A brief checklist about delegation

Do what
What not
Provide examples of "positive" & "negative"
Timeline
How
Tools
Status updates
Way of delivery
Delegate in written form

Tools I recommend: Trello, Linear, Clickup, Google Drive, Dropbox

Companies did software donation for COVID-19 (The tools that you came for)

There’re a sh*t ton of tools ready to help you work remotely, but it’s easy to lose focus and find yourself in the “tool hell”. You don’t need to use and try out new productivity/chat/file-sharing/meeting/time logging apps every month or so. It’s easier for everyone to use only the necessary apps and integrate them into one single source of truth. Ex. Slack or Discord has some nice integrations with hundreds of other tools.
For your fortune, there’re a lot of great tech companies decided to help teams & people who just went to home office by giving their solution for free for some months.

My personal favorite, Reclaim is free until the end of 2021! Zoom allows unlimited meetings, Go to Meeting by LogMeIn helps you present, Zoho Remotely went free as a complete remote work solution, MS Teams giving you 6 months of premium for free, and Discord let’s you go live for more people.

A great source to check out some other companies who did charities like this is Software Donation.

Summary

Do some stand up meetings. 1 synchronous and daily async to have an overview about the current situation and tasks. Do retrospective calls, where the team analyzes’ the last few weeks process and results. This way you all make sure what everybody needs to maintain productivity. Do not forget that you’re still humans, just on different places, so take your time for some human contacts, like playing some video games or chatting about books, Netflix series, etc.

Use remote work, project management, time logging, and productivity tools wisely. You don’t need to do a meeting for everything¹ if you have Slack/Discord or any other chat applications. Be clear with task descriptions and use due dates, roadmaps to manage product timeline. And log your time to have an overview about how do you spend your days.

Should it be a Meeting? ↩

DEV Community: David