If you're looking to add a touch of class to your website, then you should definitely consider using the glassmorphism design trend

Learn how to easily create a custom navbar using the Tailwind CSS framework. This tutorial shows you how to use the backdrop-blur feature in your tailwind.css file

If you're looking to add a touch of class to your website, then you should definitely consider using the glassmorphism design trend. I’ve also implemented this methodology to my navigation bar in this personal website if you have noticed. This methodology involves applying a backdrop-blur to an element, giving it a sense of translucency and distinct perspective from its surrounding elements.

One of the best ways to achieve a glassmorphism effect is through the use of Tailwind CSS. This utility-first CSS framework provides all the tools necessary to create sophisticated glassmorphism designs without having to write any custom CSS code.

In this article, I will show you step by step how to create a basic glassmorphism nav bar using Tailwind CSS.

Let's get started with some HTML semantic to build a navigation bar:

<>
  <div>
    <a href="#">Home</a>
    <a href="#"> Work </a>
    <a href="#"> About </a>
    <a href="#"> Blog </a>
    <a href="#"> Contact </a>
    <button type="button">Contact me</button>
  </div>
  <div>
    <h1>Hello world!</h1>
  </div>
</>;

 To make the element more appealing, let’s add some css to it, making it to behave like a genuine navigation bar:

import type { FC } from 'react';
import Container from './container';

const App: FC = () => (
  <div className="bg-slate-100 pb-96">
    <div>
      <Container>
        <div className="flex items-center justify-between py-4">
          <img src="logo.png" alt="logo" width="45" height="45"/>
          <div className="space-x-4">
            <a className="text-green" href="#">
              Home
            </a>
            <a href="#"> Work </a>
            <a href="#"> About </a>
            <a href="#"> Blog </a>
            <a href="#"> Contact </a>
          </div>

          <button
            type="button"
            className="bg-orange-300 text-slate-900 
             border-orange-400 rounded-t-lg
             rounded-b-lg border-2 p-2"
          >
            Contact me
          </button>
        </div>
      </Container>
    </div>
  </div>
);

export default App;

 background color: bg-bg-white/60 - means white background with 60% opacity

z-50 - order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Lower number will be actual entire page. So Nav bar sits on top now.

fixed top-0 left-0 right-0 - position of nav bar will be fixed to the top 

border-b  border-gray-200/90 - add As it stands now, the frosted glass navbar can be hard to distinguish from the background of the website if your website color is white so we add a border as it allows to harsh the color contrast  the blurry background of the navbar, visually identifying the end of the element. It’s subtle, but adds a whole new layer to the overall presentation

The layout of your website will look something like the image above. Finally, we will add the blur effect to the navigation bar. 

Following step: #backdrop-blur-md

To insert the backdrop-blur-md utility classes, add them to the parent <div> element. 

import type { FC } from 'react';
import Container from './container';

const App: FC = () => (
  <div className="bg-slate-100 pb-96">
    <div
      className="border-gray-200/90 bg-white/60 firefox:bg-white 
      fixed top-0 left-0
      right-0 z-50 border-b py-3 backdrop-blur-md
      transition-all">
      <Container>
        <props />
      </Container>
    </div>
  </div>
);
export default App;

The navbar's design is sleek and stylish, but its transparency can make it difficult to see on a white background. Adding a subtile thine line at the bottom of the nav bar will assist in the distinction of the navbar's blurry background and visually mark the element's conclusion.

If you're previewing your site on Firefox, you might notice that the blur effect doesn't show up at all. That's because Firefox doesn't support CSS backdrop-blur.

The workaround is to increase the opacity of the navbar only on devices that use Firefox. This way, users will still be able to see the content behind the navbar.

 add the following code under the plugins property:

plugins: [
    plugin(function ({addVariant, e, postcss}) {
      addVariant("firefox", ({container, separator}) => {
        const isFirefoxRule = postcss.atRule({
          name: "-moz-document",
          params: "url-prefix()",
        });
        isFirefoxRule.append(container.nodes);
        container.append(isFirefoxRule);
        isFirefoxRule.walkRules((rule) => {
          rule.selector = `.${e(
            `firefox${separator}${rule.selector.slice(1)}`
          )}`;
        });
      });
    }),
  ],
};

Now head back to the <div> parent element and include the following class:

In conclusion, the blurry menu bar can be a helpful way to add depth and visual interest to your website. However, it's important to keep in mind that this approach may not work for every site. You'll need to experiment to see what looks best on your particular site. 

Hope you find this blog helpful. Now, go make some fun with Tailwind CSS backdrop-blur!

Navbar with Tailwind CSS  backdrop-blur

Here are 3 important factors to consider when choosing first programming langauge to start out with.

Best programming language for beginners in 2022

Here are 3 important factors to consider when choosing first programming langauge to start out with... If you are interested in developing web applications, then choose a language supporting that platform such as Javascript and React. While there are other suitable languages designed for mobile applications, including React, Swift (iOS) and blah (Android). Or, if you are more interested in making video games, you need other languages like blah blah. In other words, depending on the technology you want to develop, you'll need to learn different languages in order to write software.

Many university students or even experienced professionals in other industries are interested in programming careers because of the great employment opportunities and higher salaries. The number of people searching for "Web Developer" on Google has increased dramatically, according to Indeed Hiring Trends. One of the biggest reason behind the trend is that learning how to code will allow you to have a wide range of skills that is often required as fundamental expertise in various profession, including technology and design industry.

If you're looking to start your career in programming, the first question that will come across your mind would be 'What program language should I learn?' I wanted to help those looking for some advice make an informed decision when choosing the best programming language to start with as a beginner in this blog. I had to ask myself 'What is my long-term goals for learning to code?' to make the decision when I just started out learning to code. 

When it comes to choosing the first coding language to learn, you shouldn't be swayed by current trends in the industry. Then, what question should you ask yourself? Here are 3 important factors to consider in order to make wise choice.

Let's say you're simply interested in finding out what it's all about. It's better for you to begin with a language that teaches you the fundamentals of programming, such as writing in a structured syntax, for instance HTML and CSS. Even though HTML and CSS are not truly programming languages, it's a good place to start. You may then use your first expertise to see if programming is something you want to pursue further.

If you want to learn to code to get a job as a programmer, then you should research high in demand programming languages, such as currently Python, Java, Javascript and C++ in 2022. You don't know where to start? You can simply start by going through job postings on platforms like Linked in, Indeed or Seek to get an idea of the most required language by companies.

However, you should also keep in mind that the trends and demands are always changing in tech industry. Besides, jobs with the most popular language might not turn out to be the field you’ll enjoy.

Question 1. Why do you want to learn to code?

Technology has never been more accessible than it is today. We are immersed in technology literally 24/7. What technologies pique your interest and encourage you to learn more? If you spot one, you've found a good starting point in selecting a first programming language.

Before diving in to the details, let me explain why there are so many programming languages. It's because one language can't be used to create software for every platform. You'll need a different language to develop certain programs for each technology.

I went through which programming languages you'll need based on the applications and technologies you want to building. Let's look at the illustration below. This is not an exact list, but it's a good start. Please keep in mind that this is only a general idea of what programming languages are popular for which type of applications and you should do plenty of research before starting a project.

Question 2. What technologies and industries interest you?

Let's put it in this way. If you are interested in developing web applications, then choose a language supporting that platform such as Javascript. While there are other suitable languages designed for mobile applications, including React Native, Swift (iOS) and Kotlin (Android). Or, if you are more interested in making video games, you need other languages like C++ , Java, C# or Javascript. In other words, depending on the technology you want to develop, you'll need to learn different languages in order to write software.

Depending on your weekly availability, you might want to consider the language's level before investing your time in learning it. If you have a tight schedule, you can start with comparably easy languages that has low entry barrier for beginners such as Php, Ruby, and Python. 

Remember that it's better to stick to one language until you're more comfortable with it rather than switching to several languages too soon and losing confidence because you're bored or exhausted. You may want to try another language if you discover that it's not the right fit for you after putting in considerable amount of time and effort. However, before you move on to another language and attempt that one, I recommend you complete at least one or a few projects in the language you've chosen.

Question 3. What's your level of commitment in learning to code?

These 3 factors serve as a just starting point for you to consider how you should choose your first programming language. Don't put too much pressure on to picking the right one for you because at the end of the day, the first language won't define what type of developer you are forever. You will find as you keep practicing and experimenting your coding over the next years and most likely, you'll eventually have to write more than one language because most of applications need multiple languages. 

I suggest you also look up resources like coding bootcamps, online courses and books to supplement your learning. One of the most important things is to get started coding as soon as possible regardless of which language you choose. And don't forget to have fun while coding!

"The only way to learn a new programming language is by writing programs in it.”
- Dennis Ritchie

Fresh ideas and new updates from Ugi Stelmokaitis on Development, Javascript, Tailwind css and Startups.