Forem: Vaibhav Khulbe

Tailwind CSS from Zero to Hero - Up and Running (Part 1 of 4) 🚀

Vaibhav Khulbe — Thu, 06 May 2021 11:49:38 +0000

Check out the next articles in the series >

Welcome to the complete Tailwind CSS guide you need to build high-quality frontend webpages. In this entire series of articles, we will be covering every single topic needed in order to master the complete workflow of Tailwind.

Starting from absolutely nothing you will get to know all about it, including why you should use it, what features does it offers and what are the benefits over other frameworks.

And don’t worry there will be examples, clear explanations, and details you need to know about each topic covered. Not only that, we will be focussing on some lesser-known features which are useful for real-life applications.

So who is ready to dive into the world of Tailwind? Let’s start with the most common question you might have now.

What is Tailwind CSS?

Tailwind is a utility-first CSS framework that lets you add styles to your web pages without writing a single line of custom CSS code.

Let’s dissect the two important things I wrote above:

‘Utility-first’ means that instead of regular and old-fashioned framework classes, it works on low-level utilities which are essential to style any HTML element you wish. These may include styles like padding, display, width, height etc.
‘Without writing a single line of custom CSS code’ means that well...you are getting rid of those long CSS code blocks you need to write just to style one element according to the design provided to you. Tailwind handles this all.

So instead of pre-built components, it provides utility classes. That’s what makes it different from others. Adam Wathan, the creator of Tailwind, writes how a utility class is approached in this article.

But why Tailwind?

I get it. There are many CSS frameworks and libraries like Bootstrap, Bulma, Foundation, etc. which are really popular and used widely. You might feel, “Why do I need to learn about yet another CSS framework? What’s the use? How will it benefit me?” And my answer is, “While it may not be the perfect solution to your style needs, it does have the following features that you should reflect on and try…”:

You use only what you need: most of its competitors give you too many unnecessary classes, straight at your face. That becomes a lot to digest especially when you are working on some large-scale projects. With Tailwind you choose what styles you need to apply, code it and there it reflects immediately.
You don’t need to code custom CSS: well, in most cases you don’t need to override base classes. Until you have a very complex design system with tons of the custom element, you will be using the in-built styles provided by this framework as it always gives you low-level utility classes.
It even removes the not-used CSS code! Thanks to PurgeCSS (we will talk about this next), when you run its commands, it will automatically remove every CSS code we aren’t using in our project. The output of the final bundle we get is clean without any heavy load, thereby improving CSS load time and thus the overall load time of the page.
Really easy to customize, if you like: of course, there are times when what’s provided isn’t enough. You are free to change its config file, add your own mix, and deliver on what your design lead said! It’s just a matter of adding some objects to its JSON file and there you have it!
Built-in responsive classes: no need to write those tricky media queries. With Tailwind, you plug in the responsive powers directly in your HTML. Everything changes magically once you have applied the breakpoints.
Awesome auto-complete support: if you are working on the popular VS Code tool to write code, you can install the Tailwind CSS IntelliSense extension which provides you autocomplete suggestions, linting, class definitions, etc. So if you forget what padding size to apply, just start typing and see the difference.
Support for dark mode, new CSS features like Grids, and even their own component library. Need I say more?

The PurgeCSS Effect

Tailwind CSS is blessed with Purge. PurgeCSS is a tool to remove unused CSS from your CSS file. You can easily integrate it with your Tailwind project.

While optimizing for production (more about production in Part 4 of this series), when you use Purge, it will check for all of the unused classes in your HTML code. You just add any file extension that includes a markup code like .html, .jsx, .vue, etc. to the config object and then run the Purge command. You can see your output build files are much optimized and use only the classes they need.

Don’t worry, we will get to know all about this towards the end of the article series.

Now you know what all it has to offer and why it just might be the next CSS framework for your web app.

Part 1 of this article series will cover how to get started with Tailwind and make a quick webpage section. Just the barebones you need to have the confidence in writing the code.

Here’s a quick rundown of the entire process we will go through:

Installation
Basic concepts
Browser support
A quick demo
Conclusion
What’s next?

Installation

Pssst...wait. I have to tell you that there is no such thing as running some npm commands for now. We will be scratching only the upper layer of simply pulling the CDN for the current demo.

The main goal right now is not to start with a heavy workflow but to understand the basic concepts.

With that, you can open up your index.html file, write the initial HTML code and then add the following:

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

This pulls in the latest configuration build via CDN so that you can use the base classes on the go.

Okay, looks like this really quick installation is done! Can we move on with what we are about to build? Not yet. First, let’s clear out some basic concepts.

Basic concepts

Tailwind comes with a good amount of utility classes that you should know. Let’s take a look at the most common ones with an example.

If you were to make this small box which is aligned to the center of the webpage you will need to write the following CSS (the exact numbers will vary):

div {
  width: 200px;
  height: 200px;
  display: block;
  background: white;
  border-radius: .5rem;
  box-shadow: 3px 0px 14px -1px rgba(0,0,0,0.16);
  margin: 0 auto;
}

But the same style can be done with Tailwind CSS as:

<div class="min-h-screen bg-gray-200 flex flex-col justify-center">
    <div class="sm:mx-auto">
        <div class="bg-white shadow-lg p-20 rounded-lg" />
    </div>
</div>

At first glance this might be a bit uneasy for you to comprehend what is written but allow me to explain each entity here:

There are three div elements we need to create that element from scratch. The first one provides the whole container a minimum height of 100vh so that now we can use the power of Flexbox to align the entire element to the center of the screen.
The second div has some responsive alignment class which can be realized when you change the width of the viewport (see the live demo link to this code below).
Finally, we have the actual square element with all the style properties.

Let’s now understand what utility classes are being used.

min-h-screen: this equals min-height: 100vh; in CSS.
bg-gray-200: this gives the webpage body element a background color of light gray or rgba(229, 231, 235, 1) to be specific.
flex flex-col justify-center: these are all the Flexbox styles. It tells Tailwind to use display: flex; use flex-direction like column and then justify the content to center.
sm:mx-auto: every time you see a prefix applied to a Tailwind property, you can be sure that it’s either using a responsive design feature or some state prefixes like hover, focus, and other states. Here on the small viewports, we want the horizontal margin (i.e. left and right margins) of our container to be auto.
bg-white shadow-lg p-20 rounded-lg: all of these corresponds to how the box we made actually ‘looks’. Starting from making its color white to adding a large shadow, adding padding of 5rem, and then rounding off the corners.

Now from where I got to know that p-20 equals padding: 5rem;? Well, all of these are very well documented on their official documentation. It's good to know that Tailwind sizes are based on the multiplications of 0.25rem units.

If you like then you can try to play with this code I wrote above here.

Browser support

It is really important to know which browsers Tailwind supports and how to manage vendor prefixes if any so that a wide array of browsers and systems are supported.

As of the time of writing this article, Tailwind CSS supports the latest stable versions of Chrome, Firefox, Edge, and Safari. But if you are the old IE guy and need support for that (in any case) then the latest (v2.0) version of Tailwind isn’t for you. You have to downgrade to v.1.9 for that.

For those who are not using the Tailwind CLI tool (which adds all the vendor prefixes automatically), you can use Autoprefixer.

A quick demo

Time to put some things into practice as we make the following button with Tailwind CSS. Let’s try making this one:

1️⃣ Padding: first, we use the <button> HTML element, add the label and give it proper padding values. Now, this might be something different from what we usually do in proper CSS. No need to add custom height and width values or use display: block; We are simply using the padding values both on the x and y axes.

The button is rectangular and thus we can give it more x padding value than y. In the language of Tailwind, it is px-8 py-4 respectively.

px-8 equals padding-left: 2rem; padding-right: 2rem;
py-4 equals padding-top: 1rem; padding-bottom: 1rem;

<button class="py-4 px-8">Join now</button>

2️⃣ Background: this button has a blue background and Tailwind comes with a lot of different color shades for one prominent color. For us bg-blue-500 suits as it gives us the 500 color shade of the blue color. Here is the entire list of background colors to choose from.

The higher the shade number, the darker the color gets and vice-versa.

bg-blue-500 equals background-color: rgba(99, 102, 241, 1);

OUTPUT:

3️⃣ Rounded corners: here we can either use rounded-xl or rounded-lg classes which simply means ‘extra-large rounded corners’ or ‘large rounded corners’. The first one fits well and thus xl seems a good choice.

rounded-xl equals border-radius: 0.75rem;

<button class="py-4 px-8 bg-blue-500 rounded-xl">Join now</button>

OUTPUT:

4️⃣ Text color, transform, and weight: the black text on a blue background calls for contrast issues. So we have to change it to white. For text colors, you can simply say text-white. As for making it uppercase, it’s simply the uppercase utility class. Easy!

The font-weight is not the regular one or full-blown bold. Hence font-semibold is the way to go!

text-white equals color: rgba(255, 255, 255, 1);
uppercase equals text-transform: uppercase;
font-semibold equals font-weight: 600;

<button class="py-4 px-8 bg-blue-500 rounded-xl text-white uppercase font-semibold">Join now</button>

OUTPUT:

5️⃣ Shadows: the final step is to add some shadows around our button. The shadow-lg class gives us the appropriate shadow values we need for our button. It’s not entirely big and not very small.

shadow-lg equals:
box-shadow: --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

<button class="py-4 px-8 bg-blue-500 rounded-xl text-white uppercase font-semibold shadow-lg">Join now</button>

FINAL OUTPUT:

And there you go! You just styled a button without coding any CSS! The best part? You never left your HTML document and it was way quick and easy to make such elements.

Here’s the entire code with responsive utility classes included just like we did it in the box above:

<div class="min-h-screen flex flex-col justify-center">   
    <div class="sm:mx-auto">
        <button class="py-4 px-8 bg-blue-500 rounded-xl text-white uppercase font-semibold shadow-lg">Join now</button>
    </div>
</div>

Conclusion

In this article, you were introduced to what Tailwind is, how it provides you with its special utility classes, its features, and how you can make a custom button element without ever leaving the HTML file.

It was all about kickstart your Tailwind journey as a complete beginner. I hope I was able to give you a quick glimpse of the topic.

What’s next?

In the next tutorial of the Tailwind CSS from Zero to Hero series, we will look into how the utility-first approach really works and how Tailwind uses it to make more dynamic and functional elements. Stay tuned!

Hope you liked the information. You can comment below with your thoughts about it.

And now...as always, enjoy a meme! 😆

The #DevHumour Corner 😂

Some of my previous articles

Find me on

Twitter 🐦	Instagram 📸	LinkedIn 👨🏻‍💻	Everywhere else 🌐

📫 Subscribe to my weekly developer newsletter 📫

Next articles in the series

Create powerful and flexible forms with React Hook Form. 🪝

Vaibhav Khulbe — Wed, 21 Apr 2021 14:39:53 +0000

Someone inputting his details and hitting that ‘Submit’ button is one of the most widely used and reliable forms of getting the data from a user on any website. We call such web entities ‘forms’ and forms on a webpage are nothing but a collection of elements that allows a user to enter data that is then sent over to the server for further processing.

While the traditional approach to build, code and gather information from a form in a webpage can simply be done with the power of HTML code, but when the website gets complex or scales up in size, (say, when you are on an e-commerce website), we need to leverage some of the external libraries that were meant to get things done easily and are able to integrate with other tech stacks quickly.

One such open-source library to handle all things related to forms is React Form Hook and in this article, we will get to know how to use this with a suitable example.

About the library

React Form Hook is a React library that is used to make performant, flexible, and extensible forms with easy-to-use validation support.

Sure, there have been other libraries like Formik, React Final Form, etc. that falls under similar lines but here’s why it goes above all those:

Small in size: it’s a tiny library with no other dependencies to install.
Performance: the best part is that it minimizes the re-renders required and also mounts up fairly quickly, thereby increasing the overall experience.
Uses existing HTML: you can leverage the powers of HTML to work with this library.
Less code and more features: almost every form handling scenario is covered all in fairly fewer lines of code.

Now that we have some information, here’s what the rest of the blog will tell you about:

Installation
API references with examples
A quick but powerful demo
Conclusion

Installation

Time to make our forms powerful with the use of React Hook Forms! Fire up your terminal and then execute the following commands which makes a new React project:

npx create-react-app react-form-hook-demo 
cd react-form-hook-demo
npm start

Your default React project should be running in your browser by now. Next, we need to add the library. Use the following command to install:

npm install react-hook-form

API References

Before we move ahead typing code carelessly, we need to know how this library works, or more precisely what are the different APIs it has and how they function. Here are some common ones:

1️⃣ The useForm API: this is one of those functions which you will be calling first before you apply any handling logic to your existing forms. It takes some optional arguments like mode, defaultValues, shouldFocusError, etc.

const { register } = useForm({
  mode: 'onSubmit',
  reValidateMode: 'onChange',
  defaultValues: {},
  resolver: undefined,
  context: undefined,
  criteriaMode: "firstError",
  shouldFocusError: true,
  shouldUnregister: true,
})

As for its methods, take a look at how these are used:

register: allows you to register an input/select ref and apply validation rules into React Hook Form based on both HTML default and custom validations.

<input name="test" ref={register} />

<input
  name="test"
  ref={
    register({
      required: true
    })
  }
/>

unregister: allows you to unregister a single input or an array of inputs.

const {  unregister } = useForm();

<button type="button" onClick={() => unregister("lastName")}>unregister</button>

errors: it’s an object which contains form errors and error messages corresponding to each field.

Note that this will get deprecated in the next major version (i.e. v7). formState is likely to be the alternative.

const { errors } = useForm();

<input name="singleErrorInput" ref={register({ required: true })} />
{errors.singleErrorInput && "Your input is required"}

handleSubmit: it’s a function that will pass the form data when form validation is successful and can be invoked remotely as well.

const { register, handleSubmit } = useForm();
const onSubmit = (data, e) => console.log(data, e);
const onError = (errors, e) => console.log(errors, e);

<form onSubmit={handleSubmit(onSubmit, onError)}>
      <input name="firstName" ref={register} />
      <input name="lastName" ref={register} />
      <button type="submit">Submit</button>
 </form>

setError: allows you to manually set one or more errors.

const { setError, errors } = useForm();

<input 
  name="username"
  type="text"
  onChange={() => {
      setError("username", {
      type: "manual",
      message: "Dont Forget Your Username Should Be Cool!"
    });
  }}
  ref={register} />

  {errors.username && <p>{errors.username.message}</p>}

2️⃣ The Controller API: it’s a wrapper component that makes it easier to work with external components from other libraries and frameworks like React-Select, Material UI, etc.

<Controller
  control={control}
  name="test"
  render={(
    { onChange, onBlur, value, name, ref },
    { invalid, isTouched, isDirty }
  ) => (
    <Checkbox
      onBlur={onBlur}
      onChange={(e) => onChange(e.target.checked)}
      checked={value}
      inputRef={ref}
    />
  )}
/>

3️⃣ The useWatch API: if you want to reduce the re-rendering at the component level of your form then this API ‘watches’ for any changes to result in better performance.

function IsolateReRender({ control }) {
const firstName = useWatch({ control, name: 'firstName', defaultValue: 'default' });

return <div>{firstName}</div>; 
}

function App() {
  const { register, control, handleSubmit } = useForm();

  return (
    <form onSubmit={handleSubmit(data => console.log("data", data))}>
      <input ref={register} name="firstName" />
      <input ref={register} name="last" />
      <IsolateReRender control={control} />

      <input type="submit" />
    </form>
  );
}

A Quick but powerful Demo

Okay, now we know most of the APIs and functions to use from this library. Let’s put that into work by creating something fruitful. How about we make the following form?

Here is what’s happening in the form interface:

We have six basic elements in the form; 4 text fields, 1 select field, and lastly a button. We will be adding some important form validations in each of these elements except the select field. Here are all the rules to be implemented:

The First Name: it should not be empty and should have a minimum length of 5 characters.
The Last Name: it is required and has a maximum of 15 characters.
The Email: like others, this cannot be left blank.
Username: this also should not be blank but also we have a custom validation where only the string “John” will be accepted. The error will pop out asynchronously after 3 seconds.

Finally, when you click on the Submit button, an alert is shown along with the entered details. If any validation check goes wrong, the error will be shown instantly and the data won’t submit.

Okay, enough of the information, let’s quickly begin coding all of this..

1. Code the interface

Open the index.js file and inside the return statement, start by using a <form> element. Make sure you don’t add any action or method attributes. Everything will be handled by the library.

Our first label will be of the “First Name” field. Make sure you add a suitable placeholder value to its <input> element. Here we added “John”. The same goes for the “Last Name” field.

Then we have the “Email” field. Here we can specify that the type of the form element is “email” so that it knows beforehand that a proper email syntax should be added. Why not use some good old powers of HTML!

The “Username” field is the same as the name fields. So, it’s important to add a placeholder value here too.

Up next the select field is to be added with the name attribute along with multiple options you want to provide in the drop-down. Here we need to make sure that each of the elements must have a proper “value” attribute attached to it. It will be used later when we use the library.

After you have coded all the form interface you will have a code similar to this:

<form>
     <h1>Sign Up</h1>

     <label>First Name</label>
     <input
       name="name"
       placeholder="John" />

     <label>Last Name</label>
     <input
       name="name"
       placeholder="Doe"  />

     <label>Email</label>
     <input
       name="email"
       type="email"
       placeholder="john@doe.com" />

     <label>Username</label>
     <input
       name="username"
       placeholder="Only John is accepted" />

     <label>How you got to know about us?</label>
     <select name="info">
       <option value="">Select source...</option>
       <option value="Twitter">Twitter</option>
       <option value="Facebook">Facebook</option>
       <option value="Other">Other</option>
     </select>

     <input type="submit" />
 </form>

2. Power up the form with validation

With the single useForm hook, we will be doing almost all of the operations to make it functional.

Start by importing the hook from the library:

import { useForm } from "react-hook-form";

Now it’s time to register all the inputs we have used in the HTML code above. For that, we will be calling the imported useForm hook as:

const { register, handleSubmit, errors } = useForm();

We have to handle the functioning of the data submission. For that, we will be using the onSubmit attribute of the <form> element. We call the handleSubmit function passing on a new onSubmit() method to it. We haven’t added any code to this new method so let’s do that first.

Make this new method after you register the inputs. We will pass on the data obtained from the form. We use JavaScript’s alert() method inside which we use string interpolation so that we have a dynamic text string shown in the alert box. We can also log down the data into the console just to make sure our object prints out as we are expecting.

const onSubmit = (data) => {
   console.log(data);
   alert(
     `Here are your details: \nName: ${data.name} \nEmail: ${data.email} \nUsername: ${data.username} \nSource: ${data.info}`
   );
 };

With the power of refs in React, we access a particular DOM node in the render() method. Hence, for all the 4 inputs and the 1 select element of the form, we add the ref attribute which calls the register function of the useHook API.

Now here comes all the goodies! Everything we need to validate, we can pass inside this register function. This makes the form very flexible to change and each element can have similar or dissimilar validations as you like.

For the “First Name” and the “Last Name” fields, we pass on the boolean true value to the required property along with a minLength of 5 and max length of 15 characters.

To apply the error messages to a specific field (say, name), simply use the errors prop along with the property name like errors.name or errors.name.type. Then we can add any HTML element inside this check like a simple paragraph that says “First Name is required!”.

{errors.name && errors.name.type === "required" && (
    <p>First name is required!</p>
)}

As for the message for the minimum length check, we check the errors.name.type === "minLength" and pass on the custom message.

{errors.name && errors.name.type === "minLength" && (
       <p>This requires min length of 5!</p>
)}

But what about the Username field where we only want specific data to be valid? For this to work as expected, we need to use the validate property of the register function. The value of this property can be a separate function where the actual logic of the validation can be stored.

We are using the sleep() method so that the error is shown after 3 seconds to the user and this will only fire if the value of the string is not equal to “John”.

const validateUserName = async (value) => {
   await sleep(3000);

   if (value === "John") return true;

   return false;
 };

Make sure you predefine the async event code for this to function:

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

Sweet! The form should now be backed by powerful validations and is equally flexible with its elements. Test out your new form and you will see an alert box with all the inputs.

Here’s the entire code along with accessibility attributes we wrote for making this form:

function App() {
 const { register, handleSubmit, errors } = useForm();

 const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));

 const onSubmit = (data) => {
   console.log(data);
   alert(
     `Here are your details: \nName: ${data.name} \nEmail: ${data.email} \nUsername: ${data.username} \nSource: ${data.info}`
   );
 };

 const validateUserName = async (value) => {
   await sleep(3000);

   if (value === "John") return true;

   return false;
 };

 return (
   <form className="App" onSubmit={handleSubmit(onSubmit)}>
     <h1 aria-level="1">Sign Up</h1>

     <label htmlFor="First name">First Name</label>

     <input
       name="name"
       aria-invalid={errors.name ? "true" : "false"}
       placeholder="John"
       ref={register({ required: true, minLength: 5 })}
     />

     {errors.name && errors.name.type === "required" && (
       <p role="alert">First name is required!</p>
     )}

     {errors.name && errors.name.type === "minLength" && (
       <p role="alert">This requires min length of 5!</p>
     )}

     <label htmlFor="Last name">Last Name</label>
     <input
       name="name"
       placeholder="Doe"
       aria-invalid={errors.name ? "true" : "false"}
       ref={register({ required: true, minLength: 5, max: 15 })}
     />

     {errors.name && errors.name.type === "minLength" && (
       <p role="alert">This requires a min length of 5!</p>
     )}

     <label>Email</label>
     <input
       name="email"
       type="email"
       aria-invalid={errors.email ? "true" : "false"}
       placeholder="john@doe.com"
       ref={register({ required: true })}
     />

     <label>Username</label>

     <input
       name="username"
       aria-invalid={errors.username ? "true" : "false"}
       placeholder="Only John is accepted"
       ref={register({
         required: true,
         validate: validateUserName
       })}
     />

     <label>How you got to know about us?</label>

     <select
       name="info"
       aria-invalid={errors.info ? "true" : "false"}
       ref={register({ required: true })}
     >
       <option value="">Select source...</option>
       <option value="Twitter">Twitter</option>
       <option value="Facebook">Facebook</option>
       <option value="Other">Other</option>
     </select>

     <input type="submit" />
   </form>
 );
}

Conclusion

This is just the tip of an iceberg when you start making forms with React Hook Form. With its easy-to-go syntax and great features, you can also use it with TypeScript, create wizard-like multiple forms and even use their online form builder where you simply add the elements you want along with rules, and bam! You get your generated code in one click.

Hope you liked the information. You can comment below with your thoughts about it.

And now...as always, enjoy a meme! 😆

The #DevHumour Corner 😂

Some of my previous articles

Find me on

Twitter 🐦	Instagram 📸	LinkedIn 👨🏻‍💻	Everywhere else 🌐

📫 Subscribe to my weekly developer newsletter 📫

Create smoking hot toast notifications in React with React Hot Toast. 🔥

Vaibhav Khulbe — Mon, 22 Mar 2021 14:10:48 +0000

Ding ding! A new toast shop is around your town and what a unique take to make toasts! But more importantly, to notify others of their presence!

Well, what is this new toast? How does it help developers in particular? Here’s all you need to know about the hottest new React library to make toast notifications.

About the library

React Hot Toast is a library that aims to include toast notifications in your React applications easily and intuitively.

It’s a three-step process to add the simplest of all notifications in your app. But before we even start doing anything with it, we need to take a look at some of the features it has to offer.

Here are its top 5 features:

Easy to use: just three simple steps needed to start.
Lots of customizations: there are many ways you can set a notification to your liking.
Uses native Promise API: after all, everything is in JavaScript so why not use its wonderful event feature!
Support for headless hooks: by this, you can make your custom notifications.
Supports emojis! 🤩

Now that we have some information, here’s what the rest of the blog will tell you about:

Installation
A basic demo
API references with examples
A smoking hot real-life example
Conclusion

Installation

Ready to start off making some toasts? Let’s begin by creating an empty React project from scratch. Open up your terminal and run the following commands:

npx create-react-app hot-toast-demo 
cd hot-toast-demo 
npm start

This will start a new React project on the current directory and will run it on your default browser window. Let’s just do the necessary things first. It’s time to install the react-hot-toast package!

On the terminal, under the same project directory, run the following command:

npm install react-hot-toast

Or, if you are using Yarn as the package manager:

yarn add react-hot-toast

Basic demo

Now that we have the library installed, we can go ahead and do some changes. We will modify the entry-level app.js file so that we have a very basic interface to kick things off.

Simply remove all the code you have on the file and then follow the below steps to have an interface similar to this:

As you can see we have three buttons, the first one simply sends a toast notification with a text message, the second one is a success toast message which tells us that the action you did was successful, and the third button is just the opposite, it notifies that the action was not successful.

Okay, let’s code now.

Step 1: Build the interface

export default function App() {
 return (
   <div className="App">
     <h1>React Hot Toast 🍞</h1>
     <button onClick={notify}>Make me a toast</button>
     <button onClick={sucessNotify}>Make me a sucess toast</button>
     <button onClick={errorNotify}>Make me a error toast</button>
     <Toaster />
   </div>
 );
}

Under the default App export, we have one <h1> heading and three buttons <button> with their onClick handlers like notify, sucessNotify and errorNotify linked to three different functions which are defined outside the App() scope. Next, we have the component which comes from the react-hot-toast package we installed earlier. So, make sure you import the following line:

import { Toaster } from "react-hot-toast";

The notification that pops up after clicking the button comes from the Toaster component. Next, let’s add the notify logic by working on the functions.

Step 2: Add the notifications

We have three things to do here, the usual text notification, the success one, and then the error notification.

Adding the basic notification:

const notify = () => toast("Here is my toast!");

The notify function simply takes in the toast function. Inside it, we can pass any text we want to display in the notification toast. Notice we are using the arrow syntax here to write our function.

Adding the success notification:

const sucessNotify = () => toast.success("Sucess!");

The successNotify creates an animated check mark notification. For that, we need to call in the toast.success() method. Just pass in any string you want to show alongside the check icon.

Adding the error notification:

const errorNotify = () => toast.error("Error");

This creates a toast notification with an animated cross icon. Simply call the toast.error() method. Just pass in any string you want to show alongside the cross icon.

Here’s our entire code for now:

import toast, { Toaster } from "react-hot-toast";

const notify = () => toast("Here is my toast!");
const sucessNotify = () => toast.success("Sucess!");
const errorNotify = () => toast.error("Error");

export default function App() {
 return (
   <div className="App">
     <h1>React Hot Toast 🍞</h1>
     <button onClick={notify}>Make me a toast</button>
     <button onClick={sucessNotify}>Make me a sucess toast</button>
     <button onClick={errorNotify}>Make me a error toast</button>
     <Toaster />
   </div>
 );
}

Now click on each button we made and it will pop up the notification presets we added!

API references

We are about to build something more usable now. Before we do that, we first need to understand its two important APIs:

1. The `toast()` API

This is the most basic API from where all the toasts are made. You can call this method anywhere you like. It even works outside React. For it to work, you need to define the <Toaster /> component first.

Apart from the three methods used in the above examples the toast() API has the following two advanced usages:

1. The Loading state: this is used when you need to define that the action done by the user is currently being processed.

toast.loading('Waiting for the action to complete...');

But using only the loading indication should be avoided as we can’t end this action, the notification will persist indefinitely causing the app to use more resources and finally, slowing it down. Instead, we can use the next alternative…

2. The Promise state: this is based on the asynchronous Promise concept of ES6. It maps the Promise to the notification used and updates automatically when the Promise is resolved or failed. You can give proper arguments as to what needs to be there in the toast for either of the cases.

 toast.promise(myPromise, {
 loading: 'Data is loading...',
 success: 'Got the data!',
 error: 'Error when fetching data :(',
});

2. The `Toaster` API

Here things get exciting. You can make your own notifications from this API. You can render any component you want, all Toaster does is that it provides the notification’s current state.

Here’s an example:

const buildNotification = () => {
 const { myToasts } = useToaster();

 return (
   <div>
     {myToasts.map((toast) => (
       <div>{toast.message}</div>
     ))}
   </div>
 );
};

toast('Hey toast!');

A practical example

Let’s make a more practical example with this library. Here’s what we are trying to achieve:

As you can see in the embed above, this is a chat-like interface where you can type your message in the input and hit the “Send a hot toast 🍞 ” button to get a customized toast notification. Moreover, if you try to send toast several times, you see the notification which came earlier goes away first with a transition, and if you start hovering the cursor over any of these elements, the notification stays there, just like we have on our systems! It goes away when you stop hovering.

Note that the input box does nothing but shows you a practical scenario where we can use this library. We have a lot to explore here, so let’s get to code.

Step 1: Code the interface

There are three UI elements here:

The input field
The button
The notification itself

return (
   <div className="App">
     <HotToastNotifications />
     <input placeholder="Write your toast here..." />
     <button onClick={() => toast("🛎 Toast message sent!")}>
       Send a hot toast 🍞
     </button>
   </div>
 );

On the onClick of the button we need to fire the toast() method wherein we add the string needed to show on the notification. Here it says, "🛎 Toast message sent!". We render the notification component named HotToastNotifications beforehand.

Next, let’s make something unique. Here, we will be using the useToaster() headless API to make our custom component from scratch.

Step 2: Create handlers and the notification component

const { toasts, handlers } = useToaster();

In the HotToastNotifications component, we first define the two handlers for useToaster() i.e. toasts and handlers. The first one will be used to map over the number of notifications to render and the latter is to add the hover-based handling.

toasts.map((toast) => {
       const offset = calculateOffset(toast.id, {
         reverseOrder: false,
         margin: 10
       });

Using JavaScript’s native map() method, we loop over each individual toast element, calculating its offset position defined on the calculateOffset handler of useToaster API. In this, we need to pass the toastId which is a unique identifier for each toast, the reverseOrder which is a boolean property to state whether notifications appear in reverse order or not, and the margin between each notification when they appear together.

Step 3: Create a custom shape of the component

const ref = (el) => {
         if (el && !toast.height) {
           const height = el.getBoundingClientRect().height;
           updateHeight(toast.id, height);
         }
       };

Next, to make the shape of the custom notification, we are using the getBoundingClientRect() method on the element which returns DOMRect object to get the precise size of the height of the element. Then with the updateHeight handler, we set it to the toast’s ID and the calculated height.

Step 3: Style the notification

return (
         <div
           role="alert"
           aria-label="notification"
           key={toast.id}
           ref={ref}
           style={{
             position: "absolute",
             width: "13rem",
             padding: "0.7rem",
             background: "rgba(175, 75, 62, 0.1)",
             borderRadius: "3rem",
             transition: "all 0.2s",
             transform: `translateY(${offset}px)`,
             opacity: toast.visible ? 1 : 0
           }}
         >
           {toast.message}
         </div>
       );

Time to add some styles to the custom notification we just made! You can choose any HTML element to make them but usually <div> works just fine. We give it the necessary key which is the ID of the toast, the ref element we made above, and finally, the style property where you can add any CSS styling to your need. Notice that we have dynamic opacity here so when toast is removed, it turns the opacity to 0 else, it stays at 1.

Step 4: Create the hover based interactions

Finally, we have one last thing left. We want that until we hover the notification, it shouldn’t go away. It can go when we remove hovering.

<div
     style={{
       position: "fixed",
       top: 10,
       left: 10
     }}
     onMouseEnter={startPause}
     onMouseLeave={endPause}
   >

To make this possible we make the same <div> element but we do two important things; first, we need to style it such a way that its position stays the same until we remove the hover, and second, we use onMouseEnter and onMouseLeave events and set it to the startPause and endPause handlers respectively.

And that’s it! If you implement all the code above you can now play with your own custom toast notification sent whenever the onClick event is triggered! Here’s the entire code of the custom notification component we made:

const HotToastNotifications = () => {
 const { toasts, handlers } = useToaster();
 const { startPause, endPause, calculateOffset, updateHeight } = handlers;
 return (
   <div
     style={{
       position: "fixed",
       top: 10,
       left: 10
     }}
     onMouseEnter={startPause}
     onMouseLeave={endPause}
   >
     {toasts.map((toast) => {
       const offset = calculateOffset(toast.id, {
         reverseOrder: false,
         margin: 10
       });
       const ref = (el) => {
         if (el && !toast.height) {
           const height = el.getBoundingClientRect().height;
           updateHeight(toast.id, height);
         }
       };
       return (
         <div
           key={toast.id}
           ref={ref}
           style={{
             position: "absolute",
             width: "13rem",
             padding: ".7rem",
             background: "rgba(175, 75, 62, 0.1)",
             borderRadius: "3rem",
             transition: "all 0.2s",
             transform: `translateY(${offset}px)`,
             opacity: toast.visible ? 1 : 0
           }}
         >
           {toast.message}
         </div>
       );
     })}
   </div>
 );
};

Conclusion

Wasn’t it that easy! I mean, the ability to use hooks to make a custom notification is so mind-blowing and that comes with such ease to make. Let me know how you will be using this library, you can surely open a new issue to its GitHub and let the library author know of any bugs you encountered or a new feature to include!

Hope you liked the information. You can comment below with your thoughts about it.

And now...as always, enjoy a meme! 😆

The #DevHumour Corner 😂

Some of my previous articles

Find me on

Twitter 🐦	Instagram 📸	LinkedIn 👨🏻‍💻	Everywhere else 🌐

📫 Subscribe to my weekly developer newsletter 📫

5 really cool web technologies to know! 🤩

Vaibhav Khulbe — Sat, 09 Jan 2021 17:56:39 +0000

Welcome to my first article in 2021! This time I'm not focusing much on writing articles every week but of course, I will continue to write useful content whenever I feel the need.

Okay okay, back to the grind...

There are some web technologies which you already know and must’ve mastered. Need examples? How about JavaScript libraries, PWAs, or even CSS Subgrids?

There are all quite common and used in most of the projects (well, I don't know about Subgrids though). But there are some more really cool ones out there about which you might or mightn’t have heard about.

Here are 5 of those about which I recently got to know about and they can be the future, who knows!

1. Web Animation API ✨

➡️ What is it?

The Web Animations API allows developers to describe animations to DOM elements by syncing animation with the help of the Timing and Animation model..

➡️ Why use it?

It combines the best of CSS animation and transition to give you the best performance without using any external optimizations.

You can:

Use both CSS or JavaScript.
Move animations from stylesheets to JavaScript easily.
You no longer rely on writing CSS properties and scoping classes onto elements to control the playback of animations.
You can now dynamically set values from properties to durations.

➡️ What about the browser support?

Here's what caniuse.com says. The red blocks mean it's not supported and the green ones symbolize it is supported. Everything in between the two colors means partial support:

92.67% usage

➡️ How to write the code?

Usually, if I say you to write an animation code for an HTML element, you would do something like this:

#element {
  animation: animationName infinite 1s linear;
}

@keyframes animationName {
  0% {
    transform: rotate(0) translate3D(-50%, -50%, 0);
  }
  50% {
    transform: rotate(0) translate3D(-50%, 50%, 0);
  }
  100% {
    transform: rotate(360deg) translate3D(-50%, -50%, 0);
  }
}

For the Web Animation API you would do something like this:

// 1. Representing the keyframes
var animationName = [
  { transform: 'rotate(0) translate3D(-50%, -50%, 0)' },
  { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)' }
];

// 2. Representing timing properties
var animTiming = {
  duration: 1000,
  iterations: Infinity
}

//3. Applying the animation
document.getElementById("element").animate(
  animationName,
  animTiming
}

➡️ Where can I get more resources?

Apart from the documentation linked above:

Let’s talk about the Web Animations API by Daniel C. Wilson.
Web Animations API improvements in Chromium 84 by Una Kravets and Kevin Ellis.
web-animations-js by Web Animations.

2. WebRTC 🔌

➡️ What is it?

WebRTC or Web Real-Time Communication is a technology that enables web apps and websites to store and stream audio/video media, as well as to exchange data between browsers without the need of any plugin or a third-party software/tool.

➡️ Why use it?

Because it supports:

Media capture.
Media streaming.
Video and audio conferencing.
File transfer.
Screen share.
Interfacing with legacy devices.

➡️ What about the browser support?

Here's what caniuse.com says:

93.91% usage

➡️ How to write the code?

Here's a quick example of sending a text message:

// Signalling the server and greeting a user with a text message

//1. Get the WebSocket library 
var WebSocketServer = require('ws').Server; 

//2. Create a server at port 8080
var wss = new WebSocketServer({port: 8080});

//3. User connects to the sever 
wss.on('connection', function(connection) { 
   console.log("user connected"); 

   //4. Server gets a message from a connected user 
   connection.on('message', function(message) { 
      console.log("Got message from a user:", message); 
   }); 

   connection.send("Hello from server"); 
});

➡️ Where can I get more resources?

Apart from the documentation linked above:

samples repo by webrtc.
WebRTC website. -Real time communication with WebRTC by Google Codelabs.

3. Web Speech API 🗣

➡️ What is it?

The Web Speech API enables you to incorporate voice data into your web apps. It has two parts: SpeechSynthesis (Text-to-Speech), and SpeechRecognition (Asynchronous Speech Recognition).

➡️ Why use it?

In the year 2018, Google reported that 27% of the global online population is using voice search on mobile.

With speech-enabled, users can speak across the website to access the data they need.

➡️ What about the browser support?

Here's what caniuse.com says:

93.85% usage.

➡️ How to write the code?

I really liked the following example to showcase the speech API by Lindsay Greene, check out the article:

“Talk to Me” Beginner’s Tutorial: Using the web speech API | by Lindsay Greene | Voice Tech Podcast | Medium

Lindsay Greene ・ Jan 19, 2021 ・
Medium

➡️ Where can I get more resources?

Apart from the documentation linked above:

Speech to text in the browser with the Web Speech API by Phil Nash.
web-speech-api repo by mdn.
Voice to Text with Chrome Web Speech API by Benson Ruan.

4. WebXR Device API (formerly WebVR) 🎮

➡️ What is it?

The WebXR Device API implements the core of the WebXR feature set, from the selection of output devices, rendering of the 3D scenes to the chosen device, and managing motion vectors created using input controllers.

But what is this WebXR?

Just like VR is Virtual Reality, AR is Augmented Reality and MR is Mixed Reality, in a similar fashion WebXR combines a group of standards that are used together to support rendering 3D scenes for VR, or for adding graphical imagery to AR.

➡️ Why use it?

Although all these 'reality' based technologies are starting to boom, and you need a setup like below (which isn't much popular yet):

Still, with this enabled you can:

Render a 3D scene at an appropriate frame rate.
Mirror the output to a 2D display.
Create vectors representing the movements of input controls.
Use the full potential of technologies like ARCore or use hardware like Oculus Rift.
Gain the benefit of WebGL's rich development tool ecosystem and a large

➡️ What about the browser support?

Here's what caniuse.com says:

7.09% usage.

➡️ How to write the code?

To access the WebXR API, we use navigator.xr property of the current window which returns the XRSystem object.

// Initiating the XR interface to use
class App {
  ...
  async init() {
    if (navigator.xr && XRSession.prototype.requestHitTest) {
      try {
        this.device = await navigator.xr.requestDevice();
      } catch (e) {
        this.onNoXRDevice();
        return;
      }
    } else {
      this.onNoXRDevice();
      return;
    }

    document.querySelector('#enter-ar').addEventListener('click', this.onEnterAR);
  }
}

➡️ Where can I get more resources?

Apart from the documentation linked above:

WebXR website.
Building an augmented reality (AR) application using the WebXR Device API by Google Codelabs.
Using WebXR With Babylon.js by Preston So.

5. WebSocket 🎛

➡️ What is it?

The WebSocket API makes it possible to open a two-way interactive communication session between the client and a server.

➡️ Why use it?

You can send messages to a server and receive event-driven responses without having to poll the server for a reply. So you can use it on social feeds, multiplayer games, collaborative environment, etc.

➡️ What about the browser support?

Here's what caniuse.com says:

95.85% usage.

➡️ How to write the code?

// 1. Create a new WebSocket
var exampleSocket = new WebSocket("wss://www.example.com/socketserver", "protocolOne");

//2. Send data to the server
exampleSocket.send("Text to server");

//3. Closing the connection
exampleSocket.close();

➡️ Where can I get more resources?

Using WebSocket to build an interactive web application by Spring.io.
WebSockets tutorial: How to go real-time with Node and React by LogRocket.
WebSocket by The Modern JavaScript Tutorial.

Hope you liked the information. You can comment below with your thoughts about it.

And now...as always, enjoy a meme! 😆

The #DevHumour Corner 😂

Some of my previous articles

Find me on

Twitter	Instagram	LinkedIn	Everywhere else

📫 Subscribe to my weekly developer newsletter 📫

The importance of writing a technical article consistently. ✍️

Vaibhav Khulbe — Fri, 25 Dec 2020 13:33:02 +0000

One article a week, throughout the year: My reflections

Yes, you read that correctly.

I wrote one article, each week, throughout the year 2020, consistently, there was no stopping me.

This was me, in the first week of the year:

How to start a coding project making sure you remember it months later 🌟

Vaibhav Khulbe ・ Jan 1 '20

#project #code #beginners #programming

And this is me now, in the last week of the year:

The importance of writing a technical article consistently. ✍️

Vaibhav Khulbe ・ Dec 25 '20

#discuss #writing #productivity #webdev

In the first week, we didn’t know how harsh this year would be. I have seen, heard, and saw many people online (mostly) and offline saying, "2020 is the worst." Well, every time I would hear the words 2020 and worst together, I wondered "Why 2020 isn't bad for me? Why every third person I meet say the same thing?"

Little did I knew I was to embark on a journey that would last forever with me. The journey isn’t just about writing articles, the journey is definitely about being consistent like mad!

In my last article of this year, I write some of the reflections I can pass to the readers.

What was my goal? 🎯

More than a 'goal' or a 'target', this was my 'thought':

I became active on DEV towards the end of December 2019. I just read posts, bookmarked, liked, commented (with a slight fear). Then I had a thought, "Why do I just like and leave? Why can't I write here just like I did on Medium for 3+ years?"

And then, it was almost the 31st of the month, that morning I sat down to write some markdown. I decided to hit the 'Publish' button the next year. Nothing was planned. But the next week was about to start, so I drafted my 2nd article and the cycle continued from that day and hasn't stopped till now.

That was that! Nothing fancy or crazy like writing on my notes and sticking them on my desk. The onset of thought was everything for me.

Quality of articles v/s quantity of articles. 🙃

You may ask, "But Vaibhav, how do you get topics to write each week? You must've focused on the more the articles, the better approach?"

To which I would answer, "Hey! You know what, I just did what others would. I DOCUMENTED. When you document what you are learning, working on, where and how you got solutions to your problems, how you solved them on your projects, what were you shortcoming, what you can share with others...then you just can't focus on the quantity!"

I always made sure:

I write what I'm working on at the present moment.
I have a good knowledge of that topic. Not a God-level knowledge.
I write with less complex words so that even a beginner in the dev industry can connect.
I formatted and used a clear and good-grammar.

And honestly, if I cared just about the numbers (followers, likes, engagement numbers) you would see a LOT of the following type of articles on my profile:

THE TOP 10 LANGUAGES WHICH WILL GUARANTEE YOU TO GET A JOB!
MY TOP VSCODE EXTENSIONS FOR EVERY DEVELOPER OUT THERE.
GET THESE TIPS FROM A 3+ YEARS EXPERIENCED DEVELOPER TO SHINE LIKE A STAR.
THE DEVELOPER ROADMAP YOU NEED TO FOLLOW NOW.

You get the idea, right? I already know these type of posts gets the maximum engaging, but how many of these give some value?

So what benefits you got? 💐

The one thing you can get by creating content consistently on any platform is that you improve your communication skills to a great extent.

Scared of talking in front of an audience, break out, give that talk (online/offline), in the same way, if you are not sure if someone will read what you write, just kill that thought for a moment and focus on the content.

By improving my communication (in my opinion more important than your technical skills), I got to showcase my talent, my projects, my concepts, my way of writing to a community. Thanks to this wonderful DEV Community, I get these comments:

aman-sagar • Oct 16 '20

Okay, this was my first hacktober fest participation, was eager to choose plant a tree option, then my 4 pull requests got approved and passed the review period today. And then I thought of requesting a t-shirt, you know the craze of a hacktoberfest t-shirt, right? Then, i tried finding alternatives, found some, but then I thought of finding the some inspiration to plant a tree, I cam across your post, read it, and right away chose the plant a tree option.
Thank you for inspiring me to plant a tree!!!......

Gagandeep Singh • Oct 27 '20

I wanna say, you are awesome man!!
Thanks for sharing such a rich content.

Binyamin Green • Mar 4 '20

This is one of those moments where I wish I could save comments on DEV!
@ben nudge nudge

Juan Alejandro Morais • Mar 5 '20

Thanks for this great article, Vaibhav. It will definitely help me, and many others, in their writing journey.

All the best! :)

Ridhik Govind • Oct 25 '20

What an article man ! No doubt its one of the best articles I've read ! Keep up with the good writing !

Dhruvam • Jan 1 '20

Amazing article. Made me want to go into self-introspection right away. Keep writing and inspiring :)

And much more to me on my socials.

Oh, before I forget...@NimrodKramer's 👇

What I really appreciate about @vaibhav_khulbe is his consistency. Every day he reads a few articles and shares his insight. Let alone the incredible and thoughtful posts he writes every week. A true role model for self-learning.

Do yourself a favor and follow him ASAP 🎸 https://t.co/cDIsIDeOxA
— Nimrod Kramer (@NimrodKramer) November 25, 2020

Not only I published articles weekly, the 'consistent me', did the following throughout the year:

Composed my weekly dev newsletter with more than 50+ resources.
I read 6+ books, summarised in my own words on my Instagram stories.
I wrote code, each day (minus the weekends). I honestly don’t do #100DaysOfCode! 😂
I improved my UI/UX design skills. For each of my articles, I designed Instagram carousel posts on Adobe XD.
I got 5 freelance offers all because I was consistent.

What more examples you need than these!?

What are your own favorite articles? 👀

Of course, I will say, "Most of them are...can't decide". But, if I had to nit-pick (in no particular order):

The bottom line. ⚡️

I'm not saying write articles regularly, write consistently.

And never forget:

You need to make sacrifices to achieve a goal. Go make that sacrifice!

The sole aim to write this article towards the end of the year was so that I get to know how well I followed my 'thought', how disciplined I am to get results, and what value I can bring to the community.

I could have shown you my stats, how many reactions I got, how many total views are there, and how many people follow me here, but I NEVER believe in these numbers. Just take a sweet guess while you visit my profile. :)

Hope some of my articles helped you in a way or two. Merry Christmas 🎄 and Happy Holidays! 😄

This #microservices architecture is only suitable for children/developers age 3 and upwards ⚠️#microservices #microprofile #Devhumour @turnoff_us #monolith #programminghumour pic.twitter.com/eCHmdGZkoD
— Payara (@Payara_Fish) December 23, 2020

📫 Subscribe to my weekly developer newsletter 📫

PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, here's my Medium profile.

Bring the power of semantic HTML to make a hero section with MVP.css. 🕴

Vaibhav Khulbe — Fri, 18 Dec 2020 13:45:55 +0000

What do you call a developer who can make efficient websites with ease? A developer who is ever-ready to finish making landing pages like a pro, or a dev who literally doesn't use any cool frameworks out there but still manages to output a world-class product?

You may call them: "Most Valuable Dev (MVD)".

But what if a new dev comes, they just take the bare minimum, focus on meaning and structures the code to the best of their knowledge, and still does very best then that MVD?

You should definitely call them: "Most Valuable Professional (MVP)".

You got to have some respect for that MVP

Now, what all was this for? How does an MVP have to do with a developer? Let's take a look.

No class names, no frameworks, just semantic HTML, and you're done!

That's not what I promise, that's exactly what MVP.css promises it to be!

What is MVP.css?

It is a minimalist stylesheet for HTML elements.

Counting on features? Here are some:

Out of the box CSS styling.
No class names or no framework(s) to learn.
Uses semantic HTML.
Straight up HTML and nothing else.
Responsive by default.

I have previously tried a similar library where with just HTML, you can have a decent looking webpage.

Style your next blog with vanilla HTML. No CSS. 😵

Vaibhav Khulbe ・ Jun 12 '20

#beginners #html #css #tutorial

But that had some specific tags and was geared towards a more complex approach I guess. Here, MVP.css tries to simplify things way more.

In my opinion, if you need a quick 'starter-template' for your next e-book, product, or you made a really awesome dev library, then this can definitely help. The process is extremely fast, the webpage you get is lightweight, and it follows semantic rules!

What we will be making?

This:

We are not much concerned about the design, but more on the overall building process.

Consider (the aptly named) "Ideanator" to be a fictional service provider whose aim is to make online products. Here are a few things this hero section has:

The navigation (with dropdown).
The sale banner.
The heading, subheading, and call-to-action buttons.
The testimonial.

Pretty basic of course but let's see how it's done.

➡️ Step 1: Add the MVP to your webpage

There's literally ZERO configuration you need in order to start. No need for any npm install or some complex SDK integration. Simply load the core mvp.css file to your index.html file:



<link rel="stylesheet" href="https://unpkg.com/mvp.css">

➡️ Step 2: Start making the structure!

The game of MVPs is all about being semantic. If you're unsure what semantic HTML means take a look at this MDN documentation.

According to them, there are around 100 semantic HTML elements including:

Of course, these elements are supported but there are a few more that can spice things up:

The ones that are bold, we can make use of those.

Let's start with the <header>. This houses our <nav> with <ul> / <li> lists and the headings. As for the following dropdown:

This can be achieved by simply adding a set of lists under an <ul> as shown:



<li><a href="#">Learn more</a>
    <ul>
        <li><a href="#">About us</a></li>
        <li><a href="#">Contact us</a></li>
        <li><a href="#">Get help</a></li>
    </ul>
</li>

Next up we have the sale tagline. I thought that can be a good use case of the <article> tag to achieve the desired result. So, inside it, we will have our <aside> with the text needed. Now to center the text, we can surely use the famous CSS trick of text-align but as we are some kind of MVP, so we will use HTML's native <center> tag. 😎

That quirky "MADE WITH ❤️ IN MY BACKYARD" might look cliché but that can be a good use of some of the skills to showcase! It's done with the help of the <sup> tag. Sup!? This is generally a superscript tag but MVP.css makes it look so cool!

The heading is simply the <h1> tag with a few not-so-common mark and code tags.

As for the CTA buttons, they simply don’t use the usual <button> tag. A nice trick is to use the <p> along with the <a> anchor tag for adding links. MVP will take care of the rest.



<h1>Where ideas <mark>thrive</mark> with <code>code</code>.</h1>
<p>We are world's <b>#1</b> idea building company 💡 
coding all night long 👨🏻‍💻 </p>

<br>

<!-- CTA BUTTONS -->
<p><a href="#"><i>Get Quote</i></a><a href="#"><b>
Get Started &rarr;</b></a></p>

The content section comes next, which semantically means the <main> area. So that the hero section doesn't become too long (or becomes longer than the viewport), we will just include a testimonial here.

What great way to make a testimonial with the actual quote and the quoter's name than using the <blockquote>. Inside this, you can write the quote sentence (and can make it italic with the <i> tag). As for the name, the <footer> is more than enough for us. It gives us the perfect style needed.



<main>
    <blockquote>
        <i>"One of the best services you can get in the year 2020."</i>
        <footer>- <b>PEETER LOO</b>, COO, Kingley Products Inc</footer>
    </blockquote>   
</main>

Boom! We are done. 🙊

Hah, two steps in, and you got a solid landing page! That's was super quick if you ask me. ⚡️

Here's the CodePen of the above example for you to try:

More resources 🤩

Be a good MVP and follow these pieces online for better understanding:

Thanks for reading. I appreciate it! Have a good day. (✿◕‿◕✿)

This week's Dev Humour. 😂 👇#DevHumour #Developer #Programmer pic.twitter.com/369TOve9FP
— Microsoft Developer UK (@msdevUK) December 4, 2020

📫 Subscribe to my weekly developer newsletter 📫

PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, here's my Medium profile.

Create a crazy input interaction with lax.js. 🤪

Vaibhav Khulbe — Fri, 11 Dec 2020 13:26:31 +0000

What's common between circles turning to cubes, pair of shoes swinging around left to right, that cube experiencing inertia (yes, that physics thing), a text dancing when your cursor meets it, or you are just typing things in a text field and bam! That thing rotates like hell for no reason!

Well, what I'm even talking about? ┐(￣ヘ￣;)┌

I'm talking about some weird and super crazy web experiences you can make (including the examples I gave above) just to have some fun in your websites or implement them cautiously to make a website visitor feel joyful!

Meet this JavaScript library that can make things look cool with crazy interactions. It's called LAX!

Don't just relax, but lax...!

What do I mean by relax.js? 🧐

Lax.js is a JavaScript library to create smooth & beautiful animations when you scroll.

But that's not all! Lax is really, really small. When gzipped, it's less than 4 kilobytes in size! 🤯

Here are some of its features:

It has a new JS animation syntax for advanced animation combinations to work on.
Now, animations can be given a kick of interia while scrolling.
It comes with nice animation easings.
You can create custom CSS bindings.
Not only scroll-based, but animations can also be done while typing (we will do a demo of this later), scroll positions, or even according to date and time!

What will we make? 👀

This:

Whoops! We are not doing a scroll but an input interaction here. 🤪

Let's create this input interaction 🌚

The HTML

Add an <input> field to a new or an existing project file. Make sure you give it a proper id as it will be needed later when we code the Lax logic.

Optionally, you can give it the autofocus attribute so that when the page loads, it automatically focusses on the input. This way, we can start typing weird words right away without the need of having to click on the input field. Also, we should give some placeholder value to it. Here I have just used a cute smiling kaomoji, but you can have something like, "Input here" or "type here".

<input id='input' placeholder="(⊃｡•́‿•̀｡)" autofocus />

The CSS

Time to make it looks like a dull stick :') I won't explain each CSS rule here, just the ones so that it looks somewhat like our finished version.

To start, remove all the borders and outlines, and give it a background-color of #95853B. As for the black colored outline you see, it's a shadow added to the element. I have used both rgba() and rgb() methods to achieve the result. Add a bit of padding, center the text, and give it a base font-size.

#input {
    text-align: center;
    width: 30%;
    font-size: 25px;
    border: 0;
    outline: 0;
    background-color: #95853B;
    padding: 15px;
    color: #fff;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px, 
                rgb(51, 51, 51) 0px 0px 0px 3px;
  }

::placeholder {
    color: #fff;
}

The Lax.js!

Installation ⬇️

You can use both Yarn or NPM scripts to install the library:

npm install lax.js
// OR
yarn add lax.js

And then in your JS file, import it as usual:

import lax from 'lax.js';

Or, as I did here for the demo, grab its CDN file from JS Delivr to add it on top of your HTML <script> tags.

<script src="https://cdn.jsdelivr.net/npm/lax.js" ></script>

Setup 🛠

For the library to work, what we need is a driver at least one of the lot as it provides values for our animations, as well as the element animation bindings. This is done by the addDriver() method.

Make some interaction! ✨

We want our interaction to start on page load, or more specifically, whenever the Window is attached to the DOM. Therefore, we make use of its onload event handler to create a function that will house all of the Lax code.

Next, we initialize the library by using the init() method.

As we gave an id to the input in the HTML code, here, we will use it to grab the element and store it inside the input variable. This is a simple JS thing we do all day...

const input = document.getElementById('input');

Remember I said we need to add a driver? Now we will use this driver to control the animation. Simply call lax.addDriver(). This takes in the animation value and a function that returns the calculated amount. In our case, it is the inputLength and calculating the total length of characters added in the input element.

lax.addDriver('inputLength', function () {
    return input.value.length
});

Next, to actually start triggering the interaction, what we need is to use addElements() that takes in an element selector rule along with the animation data. Hence, we select #input and inputLength we defined previously for this.

If you notice, as soon as we start typing inside the input field, it does two things simultaneously; first, it rotates anticlockwise, and also it fades at some specific speed. This effect is achieved by using both rotate and opacity CSS properties that is supported by the Lax library.

"rotate": [
    [0, 180],
    [0, 360],
],
"opacity": [
    [0, 100],
    [1, 0]
]

Now from where those numbers come from? Well, technically, they are called Value Maps. These are used to manipulate the driver or CSS property values. The two values inside an object are the In and Out values. For example, the rotation above starts from 0, rotates from right to left to 180 degrees, and then to a complete circle of 160 degrees.

The same goes for opacity. To make it look like a fade-in animation, we start from 0 i.e. no fade to 1 i.e. complete fade.

Here's the complete JS code for your reference:

window.onload = function () {
      lax.init()
      const input = document.getElementById('input')

      lax.addDriver('inputLength', function () {
        return input.value.length
      })

      lax.addElements("#input", {
        'inputLength': {
          "rotate": [
            [0, 180],
            [0, 360],
          ],
          "opacity": [
            [0, 100],
            [1, 0]
          ]
        }
      })
    }

Here's the CodePen embed for you to play around :')

More resources 🤩

Go ahead with and learn more about Lax to make soothing interactions from these resources:

Thanks for reading. I appreciate it! Have a good day. (✿◕‿◕✿)

🙄 pic.twitter.com/1G4L5SedDv
— Sasha Rosenbaum (@DivineOps) November 19, 2020

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

CSS: Overscroll, Overflow & Touch Actions. ⛷

Vaibhav Khulbe — Fri, 04 Dec 2020 13:42:26 +0000

Okay, three more cool CSS properties before we end this year. Just for a quick recap, previously I have covered topics like subgrids, writing modes, color gamut, etc. Check out what all it's about:

CSS: Color gamut & Containment. 🌈

Vaibhav Khulbe ・ Oct 23 '20

#css #html #webdev #tutorial

CSS: Subgrids, Multi-column, & Writing Modes. 🥸

Vaibhav Khulbe ・ Nov 20 '20

#css #html #webdev #tutorial

Alright then, now it's time to know more about what is overscroll, how overflow can help and why do you even need something like touch actions!

Let that brew overflow!!

➡️ CSS Overscroll

The overscroll property tells the browser what to do when the body content reaches the boundary of the scroll area. Hence the name over-scroll.

So whenever you don't add any overscroll property in your web projects, it defaults to auto. On mobile, you might have experienced a bounce effect when you try to scroll to the bottom (or top) of the page, this behavior of a webpage is controlled by overscroll.

Usually, you will end up using one of the following two properties:

overscroll-behavior-x: to handle the browser scroll behavior when the horizontal (x-axis) boundary is reached.
overscroll-behavior-y: it's the same thing as above but on the vertical (y-axis) boundary.

Also, you might have also used these properties to hide the default scrollbar of a webpage. If not, here's how to do it:

Simply go to your CSS file and add the following lines of code to the body element:



body {
  overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}

Of course, I won't recommend you to completely get rid of scrollbars (unless you have an accessible custom scrollbar) but for some small demos, this trick is helpful.

Some of the keyword values supported by overscroll are:

overscroll-behavior: auto; The default mode on all webpages. Does, practically, nothing :')
overscroll-behavior: contain; This will prevent scrolling on underlying elements.
overscroll-behavior: none; The default behavior is prevented and quite common in removing scrollbars :')

🤩 Some overscroll resources!

Up next...

➡️ CSS Overflow

The overflow is a CSS shorthand property that is used to set the, well, the overflow behavior of an element.

If you see content that is overflowing its parent element's boundary, then it's likely that the overflow is visible and you need to fix this by hiding the overflowing content.

Check this cool example:

Did you notice how the text is just overflowing from its container? It's most likely that they have used something like overflow: visible;. Now, what are the different options we have here?

overflow: visible; This is the default behavior which is, yes, pretty bad when you have that para or an image overflowing on a card layout. The content is not clipped and is rendered outside the defined margin/padding.
overflow: hidden; That's your rescue! Now the content is clipped (as it should be) but note that there will not be any scrollbars added for you here. Also, you won't be able to drag, scroll in any direction.
overflow: scroll; You got the scrollbars here! But the content is still clipped according to the padding. Note that the scrollbar will always be visible no matter what. :')
overflow: auto; This will automatically decide whether to clip the content or not. If there the content fits inside the container, it will be similar to the default visible behavior.

To achieve this scroll:

You need to add the following in your CSS:



p {
  .
  .
  .
  width: 12em;
  height: 6em;
  overflow: scroll; /* always show scrollbars */ 
  .
  .
  .
}

🤩 Some overflow resources!

And finally, we got...

➡️ CSS Touch Actions

We come to the touch-enabled devices land!

The touch-action property sets how an element's region can be changed on a touch-enabled device.

The exciting features that come with touchscreens like pinch-to-zoom, pan, double-tap to quick zoom, etc can all be controlled with this amazing CSS property.

So, when you start a gesture with your fingers on your smartphone, what happens in the background is that the browser intersects with the touch-action values of the touched element (like a draggable box) and its ancestors (like a body container), up to the one that implements the gesture.

Here are some of the exciting values it comes with:

auto: All the panning and zooming features are allowed.
none: With this, you disable all the panning and zooming features.
pan-x and pan-y: You enable the single-finger horizontal and vertical gestures respectively. Also, there are some sub-values like pan-x, pan-up, pan-left etc.
manipulation: Here the standard gestures like panning and pinch-zoom features are turned ON but some non-standard ones like double-tap to zoom are turned OFF. A sweet spot? 😏
pinch-zoom: The most exciting of the lot! Enable multi-finger panning and zooming of the page combined with any of the pan- values.

Try to interact with the following demo on a touch-enabled device:

🤩 Some touch-action resources!

Thanks for reading, I appreciate it! Have a good day. (✿◕‿◕✿)

Adopting a #CloudNative architecture means moving in #Kubernetes and the challenges that come with it! Payara Cloud will save you time and effort running apps on the cloud, and ensure everything works with #K8s. Watch this space!#CloudNative #DevHumour #Devmeme #K8meme #DevOps pic.twitter.com/iIEANhfVRt
— Payara (@Payara_Fish) November 17, 2020

📫 Subscribe to my weekly developer newsletter 📫

PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, here's my Medium profile.

Create a CSS art without HTML. 🤯

Vaibhav Khulbe — Fri, 27 Nov 2020 13:15:41 +0000

Well well well, no catch here. As I have said already, learning CSS and using some of its properties carefully, is no joke.

The concept of CSS art is usually to practice our CSS skills. How to add this property, how to add such values, when to use this unit for precise craft or how to even choose one property over the other.

If you're into these type of questions or just want to know why you should dive into making art with CSS, then I would recommend you all to check the following article written by @Suzanne on her learnings after she completed 50 Days of CSS:

5 lessons from 50 days of CSS art

Suzanne Aitchison ・ Jul 4 '20

#css #codepen #showdev #webdev

Okay, so everyone uses some sort of HTML markup to have a basic structure of CSS art but what if you're feeling super cool with your CSS skills and just want to skip the markup? How about we just don't use any HTML code and make CSS art possible?

Of course, most of you might already know the 'trick' we will be using but if you're a beginner in CSS or in making art with CSS, read on because we are about to make an emoji which is a blend of 🤯 and 🤪...

What is CSS art? 🌚

Hehe, I forgot to even introduce you to this term in case you're unaware...

It's the act of using only HTML and (of course) CSS to create any art form.

Now that's a made-up sentence above to convey the meaning briefly. The art form can include anything you can imagine from a cartoon character to illustrations, basically anything that comes under the category of 'art'.

So you can go from this glass of water...

...to this ridiculously detailed Mona Lisa painting:

Yes, that 'painting' you just saw is not just a <img> tag with an image attached to it, every element you see there is made from scratch!

What we will make? 👀

Of course, not another Mona Lisa but yes, we can make a simple (yet different) emoji like this:

...and not this:

Dang dang! How is it? Of course, not beautiful but yes, might have some taste of humor in it?

Breaking down the layout 🖼

Before writing any code, we must understand:

How many elements we will need?
What properties we are aware of?
How can we use those CSS properties?
Is there any new properties or a CSS feature we need to learn?
What units should be used for measurement? em, rem, or just %?

Let's visually enhance the output we need (dev mode on!):

Yeah, you can appreciate my Figma skills for that, lol 😆

We can clearly see (thanks to the dotted borders):

There is an overall container to hold our emoji (represented in blue background).
Then we have the main body of the emoji which is a circle filled with yellow color.
Inside this, we have the two eyes (super light brown) and then the vague wide mouth (dark brown).

Three quick elements and we got three quick minutes, ready? (I randomly added the 'three minutes' thing, please take as much time you need to fully understand the concept).

Start making CSS art with zero HTML characters 🤪

The markup 🤒

Oops, nothing much here but make sure to either link your CSS file externally or internally, whatever you feel is good.

The real deal 😎

Open up your stylesheet. Everything we need can be encapsulated inside the <body> of the DOM. So we first start by using the body selector. Here's a cool CSS Tricks article on HTML vs Body if you're into that.

Whatever property you write inside the body selector will target the DOM's <body> element. It consists of basically all of the HTML content you can see. But using just body and adding some colors will simply apply the entire color to the full page. We don't want that.

What we need is the 'trick'! And that is to use a pseudo-element on the body! 🥳

A pseudo-element is a keyword that is attached to any selector that lets us style a specific part of that selected element.

With this, we can make an infinite amount of shapes, vectors, and yes, CSS art by simply using a single element. In this case, we will just need to work on the body part and nothing else.

There is a range of pseudo-elements available, one of the most important among those is the ::before pseudo-element. This one selects the first child of the selected element and is generally used to add a special element by using the mandatory content property which generated the value.

For our emoji art, we don't need any special content inside so we can leave this property's value as blank "".

Position the emoji 📐

Next, we need to position the emoji. To make something visible you can add a background-color of orangered because the plain red value is almost like coding at night with a light theme and maximum screen brightness...

We need to make positioning absolute to the original body element. Now we need to set where on the viewport we need to show the emoji. For this we use:

.
.
.
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
.
.
.

This ensures the CSS art is centered throughout the webpage. Next just give a decent amount of width and height say, 15rem units. And yes, as the body of the emoji perfect round, just add border-radius: 50%; to make that happen.

By now you should have the emoji centered and with fixed dimensions.

Working with the background! 🟡

Everyone changes from here! We need to make those facial features like eyes and the mouth.

The background (specifically the background-color) property of CSS accepts something cool along with the usual color value i.e. gradients!

For our demo, we need to only use the radial-gradient(), a CSS function which creates a gradient that radiates (like a circle) from the center. It has the following syntax:

radial-gradient(circle at center, red 0, blue, green 100%)

We first provide from where the circle needs to be drawn and then what colors are needed (with the amount).

As you saw in the layout breakdown, we have 3 circles for 2 eyes and 1 mouth. So, for each of those, we will need to use the radial-gradient. As for the background of the emoji body, you can change that later. Here how our circles would go:

1️⃣ The first eye is a big one. First, we need to position it. For that, after circle at we use a rough estimate of both horizontal and vertical placements in terms of percentages. Here I have chosen 30% and 40% respectively.

Next, we give it a color of #b58c1b (light brown) and a 20% scale from its original scale. The more you increase this percent, the bigger the circle would be.

The third parameter is simply making it transparent so that it doesn't affect the color of the emoji body.

.
.
.
radial-gradient(circle at 30% 40%, #b58c1b 0%, 
#b58c1b 20%, transparent 0%),
.
.
.

2️⃣ The second eye is the same but here we need a small size so just change the scale to 13%:

.
.
.
/* Big eye */
radial-gradient(circle at 30% 40%, #b58c1b 0%, 
#b58c1b 20%, transparent 0%),

/* Small eye */
radial-gradient(circle at 70% 45%, #b58c1b 0%, 
#b58c1b 13%, transparent 0%),
.
.
.

3️⃣ The wide mouth is also made up of the same radial gradient but here apart from a different position and color, we need to define the wideness or the length of the mouth. That slight wide mouth feel can be done by giving external width and height of 80rem and 5rem respectively.

And make sure to add no-repeat towards the end else, this mouth would go crazy all over the face!

.
.
.
/* Big eye */
radial-gradient(circle at 30% 40%, #b58c1b 0%, 
#b58c1b 20%, transparent 0%),

/* Small eye */
radial-gradient(circle at 70% 45%, #b58c1b 0%, 
#b58c1b 13%, transparent 0%),

/* Wide mouth */
radial-gradient(circle at 50%, #672e00 10%, 
transparent 10%) 50% 100% / 80rem 5rem no-repeat
.
.
.

Finally, the emoji background color hex value can be added towards the end as:

.
.
.
background:
    radial-gradient(circle at 30% 40%, #b58c1b 0%, 
    #b58c1b 20%, transparent 0%),

    radial-gradient(circle at 70% 45%, #b58c1b 0%, 
    #b58c1b 13%, transparent 0%),

    radial-gradient(circle at 50%, #672e00 10%, 
    transparent 10%) 50% 100% / 80rem 5rem no-repeat

    #ffcf34;

So now the entire code of the CSS emoji looks like this:

body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 15rem;
    height: 15rem;
    border-radius: 50%;
    background:  
        radial-gradient(circle at 30% 40%, #b58c1b 0%, 
    #b58c1b 20%, transparent 0%),
        radial-gradient(circle at 70% 45%, 
    #b58c1b 0%, #b58c1b 13%, transparent 0%),
        radial-gradient(circle at 50%, 
     #672e00 10%, transparent 10%) 50% 100% / 80rem 5rem no-repeat
        #ffcf34;
}

That's it! You just made CSS art without a single line of HTML but most importantly you learned what is a pseudo-element, how it works, how to make good use of gradients to make art forms, and more!

Here's the CodePen embed of the above code:

Lol, there's just a CSS tab, looks weird... 🌚

More resources 🤩

Go ahead with your new CSS art skills and get more knowledge from these resources:

Thanks for reading, I appreciate it! Have a good day. (✿◕‿◕✿)

Always remember to leave yourself useful comments! 👇#DevHumour #Developer pic.twitter.com/VJsR6YYVSs
— Microsoft Developer UK (@msdevUK) November 13, 2020

📫 Subscribe to my weekly developer newsletter 📫

PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, here's my Medium profile.

CSS: Subgrids, Multi-column, & Writing Modes. 🥸

Vaibhav Khulbe — Fri, 20 Nov 2020 13:28:26 +0000

Three cool topics to cover here! If you're totally new to the Cascading Style Sheets (CSS) this might not be the right article to read!

But wait! If you really want to dive into some of the un-common (or not-so-famous) terms and practices in the frontend development world, then you're more than welcome :)

Previously I tried to cover CSS color gamut and containment pattern, you can read all about it here:

CSS: Color gamut & Containment. 🌈

Vaibhav Khulbe ・ Oct 23 '20

#css #html #webdev #tutorial

And now, we're into subgrids, multi-column layouts and writing modes so let's talk a bit about each of them briefly in this article.

Enjoy these daisies while you start reading this...

➡️ Subgrids

This is something which Firefox lovers are so proud of. Why? Because as of now, this feature is only supported on Firefox. Not to worry, let's take a look at what it actually is.

CSS Subgrid allows a grid-item with its own grid to align in one or both dimensions with its parent grid.

Yeah, we're dealing with display: grid but here it's nested! When you add this code to a grid container, we see that only its direct children elements become the actual grid items which are then placed on the newly created grid.

Now, these grids are usually independent of their parent grid, so naturally, they won't take the grid track sizing. But if you set grid-template-columns: subgrid or even grid-template-rows: subgrid, instead of creating a new grid track, listing it here on the nested grid, it uses the tracks defined on the parent.

Let's take a simple example:

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
    grid-template-rows: auto auto auto;
}

.item {
    grid-column: 2 / 6;
    grid-row: 1 / 3;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

This example has 6 column and 3-row tracks defined by the grid-template property. The nested grid is a grid item on the parent .grid spanning from column 2 to 6, the same goes for the row which goes from row line 1 to 3.

Now, as we used the value of subgrid on grid-template-columns and grid-template-rows of the .item, this means that the nested row now has 4-column with 2-row tracks. These values come from the same sizing defined on the parent. With this defined, we can assume that any change to the track sizing on the parent grid will be followed by the nested grid.

Here's how it looks on the Firefox browser with dev tools in action:

This is why the Firefox dev tool is so awesome, it shows you all the overlays and line numbers!

Subgrids are way cooler when you have multiple nested items:

.grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr;
    grid-template-rows: auto auto auto;
}

.item {
    grid-column: 2 / 6;
    grid-row: 1 / 3;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

.subitem {
    grid-column: 2 / 4;
    grid-row: 2;
}

Here, we got the .subitem which is nested inside the .item class. This yields the following output:

🤩 Some subgrid resources!

Why we need CSS subgrid by Ken Bellows
Introduction to CSS Subgrid by Sam Pakvis
#FutureCSS - The CSS SUBGRID is Awesome! by DesignCourse

Onto the next topic...

➡️ Multi-column layout

Working on a website layout where you need to display text like this?:

Maybe you need a newspaper layout, a magazine, an e-book, or an infographic type layout, you're in for the multi-column mode of CSS...

The CSS Multi-column Layout adds support for multiple-column layouts. With this, you can establish the number of columns needed for a layout along with how the content inside each column should flow.

You can control the gap size between the columns, the dividers in between the columns, fragmenting the content, and much more.

Check-out the following example:

This uses the following 3 properties:

column-count: this is used to break the content inside the element into a number of specified columns. The higher the count, the more number of columns it produces.
column-gap: this acts as the gap (formerly grid-gap) property of the columns. The value you give here will add that much amount of gutter gap between the columns.
column-rule: acts much like the border between the two columns. So you have the freedom to add all the styling options of the border like solid 2px red etc.

🤩 Some multi-col resources!

When And How To Use CSS Multi-Column Layout by Rachel Andrew.
Guide to Responsive-Friendly CSS Columns by Katy DeCorah
CSS Multi-Columns - Awesome Newspaper Style Layouts (NO Flexbox or Grid) by DesignCourse

Talking about some writing...

➡️ CSS Writing Mode

Want a document to show from top to bottom instead of the usual flow of left to right? What do you think is the CSS behind the Arabic words when you visit a webpage in that language? Most probably, you want to fiddle around with the writing modes.

The CSS Writing Mode property sets the layout of the text as well as the direction of the content block along which the entire web document flows.

Take a look at this CodePen demo:

You might find the text "Octavia Butler" written in an unusual style. This is all done via the writing mode. Let's take a look at different values we can provide to make the text go in unusual directions:

horizontal-tb: If your document text is in ltr scripts like English or Spanish, then the content will flow horizontally from left to right as we commonly see. If it's in rtl script like Arabic or Hebrew, then it reverses, now it will for from right to left.
vertical-rl: Use it for the vertical top to bottom flow. Also, the next line is positioned to the left of the previous line. For rtl, this flows bottom to top and the next line will be towards the right of the previous one.
vertical-lr: This is 50% similar to the vertical-rl approach, the only difference being in the flow of the next line, for rtl it's vertically from bottom to top and vice-versa for ltr.

🤩 Some writing mode resources!

Writing Modes And CSS Layout by Rachel Andrew
CSS Writing Modes by Jen Simmons
writing-mode by Robin Rendle

Okay, now we've reached the end...

Thanks for reading, I appreciate it! Have a good day. (✿◕‿◕✿)

🙄 pic.twitter.com/1G4L5SedDv
— Sasha Rosenbaum (@DivineOps) November 19, 2020

📫 Subscribe to my weekly developer newsletter 📫

PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, here's my Medium profile.

Create a theme with styled-components easily in 3 steps. 💅

Vaibhav Khulbe — Fri, 13 Nov 2020 13:44:47 +0000

What if you're working on a React based project and suddenly your design team says:

"Yo, we need to completely change the entire theme of the app due to blah and blah reasons..."

Maybe you're not convinced with their reasons or maybe you just need to do this for fun. Whatever the reason, it's quite annoying if you’re just using plain old CSS (even with variables) to apply the global or per-element styles.

What comes to the rescue is some method by which you can easily change the entire color, font, gradient, etc. values in one go, a place where all of these are defined in a central place so you don’t have to change things here and there.

What I'm talking about is creating your own theme with styled-components.

A quick note on styled-components 📝

styled-components is a library that allows you to write actual CSS code to style your components inside a JS file. This follows the CSS-in-JS concept which allows developers to style using tagged template literals giving extensive flexibility and more control.

All in all, a great merger of CSS and JS! Here are some of its features:

Automatic critical CSS: it keeps track of which components are rendered and injects their styles and nothing else, automatically.
No class name bugs: there are no duplication, overlap, or misspellings.
Easier deletion of CSS: if the component is unused and gets deleted, all its styles get deleted with it.
Simple dynamic styling: styling of a component based on its props without having to manually manage dozens of classes.

What we will be styling? 💅

This:

We will be theming out two buttons using styled-components. Notice that we have:

Different default and hover colors.
Different font styles.

Not this:

Create global styles! 😍

After you're done installing the library, head over to your index.js file. Here, all the theme data will go such as the colors, fonts, etc.

STEP 1️⃣ : Create a `theme` object

This will house all the theme objects we need. Currently, we are only changing the colors and fonts.

const theme = {
  colors: {
    primary: "#6200ee",
    primaryVariant: "#ede6ff",
    secondary: "#008073",
    secondaryVariant: "#deffff"
  },
  fonts: {
    material: "Roboto",
    default: "Montserrat"
  }
};

As we can see, there are four color options, one for each variant; primary and secondary. As for the font, we also need to include them in our index.html file via the <link> method as follows:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap" rel="stylesheet" />

STEP 2️⃣ : Use the `ThemeProvider` component

Next, import the ThemeProvider helper component from styled-components. This is used to inject the theme into all styled-components in the component tree, via the Context API.

We need to wrap our top-level component i.e. <App /> with this. But for it to actually recognize the theme object we wrote above, we need it to pass it on as:

<ThemeProvider theme={theme}>
    <React.StrictMode>
        <App />
    </React.StrictMode>
  </ThemeProvider>

Hence, now the render methods becomes:

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </ThemeProvider>,
  rootElement
);

STEP 3️⃣ : Create the buttons and add the theme!

Before we hop into the buttons, did you see that the body color of the demo is not white but instead off-white? Well, here, the global style of the app was triggered.

Using the createGlobalStyle helper function, we can change or reset the base styles of the entire application.

For this to happen, we need to add the <Global /> component just before the <App /> starts inside the App() function.

Now we can add global styles by defining the usual styled-component:

const Global = createGlobalStyle`
  body {
    width: 50%;
    padding: 10px;
    background: #fffaeb;
  }
`;

Okay, let's move to those two buttons. We can create two components; <PrimaryButton /> and <DefaultButton />

The usual styles (without colors and fonts) for the buttons are as follows:

  .
  .
  .
  width: 50%;
  height: 50px;
  cursor: pointer;
  transition: all 200ms ease;
  text-decoration: none;
  outline: none;
  border: none;
  border-radius: 10px;
  float: left;
  .
  .
  .

To get the value from the theme which is passed via the ThemeProvider component, we will use our good old friend in React, i.e. props!

Start with the template literal syntax to pass on the props parameter to our arrow function, this can now get the global theme object via props.theme. Now we got the theme object, so we can assign the values as follows:

background: ${(props) => props.theme.colors.primary};
color: ${(props) => props.theme.colors.primaryVariant};

We applied the colors, now what about the hover effect? styled-components makes it really easy to add pseudo-classes whether it's :hover or :active. Just invert the values of the background and color inside the :hover object:

:hover {
    background: ${(props) => props.theme.colors.primaryVariant};
    color: ${(props) => props.theme.colors.primary};
  }

The same method is applied to other objects inside our theme such as for the different fonts:

  .
  .
  .
  font-family: '${(props) => props.theme.fonts.material}';
  font-weight: 500;
  .
  .

And that's pretty much it! You have used a theme in styled-components. Of course, this is just the beginning, you can bring in the entire library of design assets and tokens with your theme to make it even more dynamic.

More resources 🤩

Go ahead with theming when you read from these resources:

Thanks for reading, I appreciate it! Have a good day. (✿◕‿◕✿)

When the going gets tough, the tough get going. 💪

Image source: https://t.co/f3Mij3xXQs #DevHumour #CodingMemes #Developer pic.twitter.com/bouXm7eVlx
— Microsoft Developer UK (@msdevUK) November 6, 2020

📫 Subscribe to my weekly developer newsletter 📫

PS: From this year, I've decided to write here on DEV Community. Previously, I wrote on Medium. If anyone wants to take a look at my articles, here's my Medium profile.

CSS variables but with a dash of JavaScript. ✨

Vaibhav Khulbe — Fri, 06 Nov 2020 09:04:20 +0000

Okay, we'll go with this quick and straight. When you first start diving into CSS, you do the usual thing like changing color, changing fonts, etc. Then you dive deep into media queries, cross-browser properties, and finally to variables.

But what if we use these variables in our CSS files alongside with some magic of our old friend JavaScript, then imagine what we can achieve! Something cool? Yes, you're correct. Let's do this and make something nice.

Something to sprinkle!

Quick note on CSS variables 📝

Of course, some basics first.

CSS Custom Properties or CSS Variables allows us to store a value stored in one place, then referenced in multiple other places.

Sometimes specific values need to be reused throughout a document. A typical example is when you get a specific color palette from designers, and you need to add specific hex values of colors, font-sizes, or even some responsive breakpoints. You assign these values to your custom-made CSS properties called variables here.

This is useful not only because they can be used at multiple instances and makes editing the values easy but also, it makes the properties easier to read when referring to it later. For example: --headline-color is better to read than #000.

Check out this wonderful CodePen example:

Usage and syntax

Declaring a custom CSS property is created by assigning the double hyphen (--) in front of the variable name, and then the property value is written like any other CSS property.

Check out this example:

element {
  --main-bg-color: lightgray;
}

Now, to use this custom property anywhere in your CSS file you can do this:

element {
  background-color: var(--main-bg-color);
}

So, you don't need to write lightgray value for the background-color in all places where there is a need to use the var() function and pass in the CSS custom variable inside.

Introducing JavaScript ✨

Time to start interacting with the web developer's favorite language.

Let's see how we can write a new property value in JavaScript.

➡️ `setProperty`

var element = document.documentElement;
element.style.setProperty('--name', value);

So, what these new functions mean?

document.documentElement: this returns the Element which is usually the root element of your HTML document.
style.setProperty(): it sets a new value for a property on a CSS style declaration object.

The setProperty() takes in the property name, it's value, and optionally the priority.

The code you saw above sets a new value for a globally defined property. This type of JavaScript code is useful when you are managing state and then modifying CSS styles based on given values.

➡️ `getPropertyValue`

element.style.getPropertyValue('--my-color');

Yeah, exactly what you're thinking right now. Just as with any other language, we have setters and getters here too. With the setProperty we were setting a new value, and here with getPropertyValue, we return a DOMString containing the value of the above-specified CSS property.

Here's a practical example:

element.style.setProperty('--accent-color', '#663399');
element.style.getPropertyValue('--accent-color');

This will return the value of --accent-color as #663399 when the browser renders the webpage.

➡️ `removeProperty`

element.style.removeProperty('--my-color');

The removeProperty method will remove the provided property from a CSS style declaration object.

So, if you want to dynamically remove the attached custom CSS property, then you can have code similar to this:

element.style.setProperty('--accent-color', '#663399');
element.style.getPropertyValue('--accent-color');

element.style.removeProperty('--accent-color');

Using event listeners 👂

If there's some JavaScript code, then there are events happening! What if you want to change a div's position on cursor click?

First, start off with declaring the CSS variables:

:root {
  --cursor-pos-x: 10px;
  --cursor-pos-y: 10px;
}

By declaring them at :root, we're putting them into the root element of the DOM tree. Typically, it's the <html> element.

Next, we will be using these variables in our <div> as follows:

div {
  .
  .
  .
  left: var(--cursor-pos-x);
  top: var(--cursor-pos-x;
  .
  .
  .
}

As you know by now, it translates into:

 div {
  .
  .
  .
  left: 10px;
  top: 10px;
  .
  .
  .
}

We have set the initial position of the <div>, now let's interact with an event listener.

let root = document.documentElement;

root.addEventListener('click', event => {
  root.style.setProperty('--cursor-pos-x', event.clientX + "px");
  root.style.setProperty('--cursor-pos-y', event.clientY + "px");
});

We are simply using the clientX and clientY properties of the MouseEvent interface, whose function is to move the corresponding div in both X and Y directions, respectively.

The result will be similar to this:

That is it! There are endless possibilities when it comes to combining the power of CSS variables with JavaScript. You can make awesome DOM-based games, use it to change component styles dynamically, and more!

More resources 🤩

Go ahead and learn more about custom CSS properties from the resources given below:

Thanks for reading. I appreciate it! Have a good day. (✿◕‿◕✿)

Team printf!#programmingmemes #DEVCommunity pic.twitter.com/Ou4sNRPRE7
— 🎵PhonoForest🌳GameDev🎮 (@PhonoForest) October 28, 2020

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

Forem: Vaibhav Khulbe

Tailwind CSS from Zero to Hero - Up and Running (Part 1 of 4) 🚀

What is Tailwind CSS?

But why Tailwind?

The PurgeCSS Effect

Installation

Basic concepts

Browser support

A quick demo

Conclusion

What’s next?

The #DevHumour Corner 😂

Some of my previous articles

Find me on

Next articles in the series

Create powerful and flexible forms with React Hook Form. 🪝

About the library

Installation

API References

A Quick but powerful Demo

Conclusion

The #DevHumour Corner 😂

Some of my previous articles

Find me on

Create smoking hot toast notifications in React with React Hot Toast. 🔥

About the library

Installation

Basic demo

Step 1: Build the interface

Step 2: Add the notifications

Adding the basic notification:

Adding the success notification:

Adding the error notification:

API references

1. The toast() API

2. The Toaster API

A practical example

Step 1: Code the interface

Step 2: Create handlers and the notification component

Step 3: Create a custom shape of the component

Step 3: Style the notification

Step 4: Create the hover based interactions

Conclusion

The #DevHumour Corner 😂

Some of my previous articles

Find me on

5 really cool web technologies to know! 🤩

1. Web Animation API ✨

➡️ What is it?

➡️ Why use it?

➡️ What about the browser support?

➡️ How to write the code?

➡️ Where can I get more resources?

2. WebRTC 🔌

➡️ What is it?

➡️ Why use it?

➡️ What about the browser support?

➡️ How to write the code?

➡️ Where can I get more resources?

3. Web Speech API 🗣

➡️ What is it?

➡️ Why use it?

➡️ What about the browser support?

➡️ How to write the code?

“Talk to Me” Beginner’s Tutorial: Using the web speech API | by Lindsay Greene | Voice Tech Podcast | Medium

Lindsay Greene ・ Jan 19, 2021 ・ Medium

➡️ Where can I get more resources?

4. WebXR Device API (formerly WebVR) 🎮

➡️ What is it?

➡️ Why use it?

➡️ What about the browser support?

➡️ How to write the code?

➡️ Where can I get more resources?

5. WebSocket 🎛

➡️ What is it?

➡️ Why use it?

➡️ What about the browser support?

➡️ How to write the code?

➡️ Where can I get more resources?

The #DevHumour Corner 😂

1. The `toast()` API

2. The `Toaster` API

Lindsay Greene ・ Jan 19, 2021 ・
Medium