Forem: KemotiaDev

Differences and Benefits of Using 'px' vs 'em' in CSS Styling

KemotiaDev — Thu, 26 Jan 2023 04:24:54 +0000

In CSS, "px" (pixels) and "em" (ems) are both units of measurement used to specify the size of text, images, and other elements on a web page. The main difference between the two is that "px" is an absolute unit of measurement, while "em" is a relative unit of measurement.

When using "px", the size of an element is fixed and will not change based on the user's device or browser settings. For example, if an element is set to have a font size of 16px, it will always be displayed at 16 pixels on the user's screen, regardless of the user's device or browser settings.

On the other hand, when using "em", the size of an element is relative to the size of the parent element's font. For example, if an element is set to have a font size of 1em, it will be displayed at the same size as the parent element's font. So if the parent element's font is 16px, the child element will also be displayed at 16px. This can be useful if you want to create a responsive design that adapts to the user's device or browser settings.

Here is an example of using "px" and "em" in CSS:

/* Using "px" */
h1 {
  font-size: 36px;
}

/* Using "em" */
h2 {
  font-size: 2em;
}

In general, "px" is a better choice for designs that require precise control over the size of elements. "px" is also the preferred choice for elements that need to be a specific size, such as images or buttons. On the other hand, "em" is a better choice for designs that need to be responsive and adapt to the user's device or browser settings.

Conclusion

In summary, "px" is a better choice for designs that require precise control over the size of elements, and "em" is a better choice for designs that need to be responsive and adapt to the user's device or browser settings.

Unlocking the Potential of ChatGPT: 10 Real-Life Applications

KemotiaDev — Mon, 23 Jan 2023 10:43:52 +0000

ChatGPT, also known as the Generative Pre-training Transformer, is a state-of-the-art language model developed by OpenAI. It is capable of understanding and generating human-like text, making it a powerful tool for a wide range of applications. Here are ten ways that ChatGPT can be used in real life:

Content creation: ChatGPT can be used to generate high-quality, unique content for websites, blogs, and social media. It can also be used to create compelling product descriptions, marketing copy, and other forms of written content.

Language translation: ChatGPT can be trained on large datasets of bilingual text, allowing it to translate text from one language to another with high accuracy.

Virtual assistants: ChatGPT can be integrated into virtual assistants, such as chatbots, to provide a more natural and human-like conversational experience.

Customer service: ChatGPT can be used to help companies improve their customer service by providing automated responses to common customer inquiries.

Text summarization: ChatGPT can be used to summarize large amounts of text, making it easier for people to quickly understand the main points of an article, report, or other written work.

Automatic text completion: ChatGPT can be used to automatically complete sentences, paragraphs or even articles based on the input provided.

Email and document generation: ChatGPT can be used to generate emails, reports, and other types of documents, allowing users to save time and increase productivity.

Code generation: ChatGPT can be trained on a dataset of code and be able to generate code snippets based on natural language input.

Dialogue generation: ChatGPT can be trained on a dataset of dialogues and be able to generate human-like dialogue for use in video games, chatbots and other interactive experiences.

Sentiment analysis: ChatGPT can be trained on a dataset of labeled text and be able to determine the sentiment (positive, neutral or negative) of a given text.

ChatGPT's ability to understand and generate human-like text makes it a valuable tool for a wide range of applications. From content creation, language translation, and virtual assistants, to customer service, text summarization, and code generation, the possibilities are endless. As this technology continues to advance, we can expect to see even more innovative uses for ChatGPT in the future.

Conclusion

ChatGPT is a powerful language model that has the potential to revolutionize the way we interact with computers and the way we process text. It's a versatile tool that can be used in various industries and help companies to improve their operations and provide a better experience to their customers. The above-mentioned applications are just a few examples of what ChatGPT can do. It's a tool that can help us to automate repetitive tasks, generate high-quality content, and even create new forms of human-computer interaction. As the technology continues to advance, we can expect to see even more innovative uses for ChatGPT in the future.

And what do you think about ChatGPT?

A Comprehensive Guide to CSS Flexbox: Understanding and Using the Layout Module

KemotiaDev — Sat, 21 Jan 2023 20:33:33 +0000

CSS Flexbox is a powerful layout module in CSS that allows for the creation of flexible and responsive designs. It is a one-dimensional layout system that can be used to align and distribute elements within a container, and it provides a way to control the layout of elements in multiple dimensions.

To use Flexbox, you first need to create a container element and set its display property to flex. Once you've done this, you can then use the various Flexbox properties to control the layout of the child elements within the container.

One of the key features of Flexbox is the ability to control the direction of the layout. By default, Flexbox elements are arranged in a row, but you can also set them to arrange in a column. This is done using the flex-direction property, which can take the values of row, row-reverse, column, and column-reverse.

Another important property is the justify-content property, which controls the alignment of elements along the main axis of the flex container. It accepts the values of flex-start, center, flex-end, space-between, space-around, and space-evenly.

The align-items property controls the alignment of elements along the cross axis of the flex container. It accepts the values of stretch, center, flex-start, flex-end and baseline.

The align-content property controls the alignment of elements when there are multiple lines. It accepts the values of stretch, center, flex-start, flex-end, space-between, and space-around.

The flex-wrap property controls whether the elements within a flex container should be wrapped onto multiple lines or not. It accepts the values of nowrap, wrap, and wrap-reverse.

The flex-flow property is a shorthand property for setting the flex-direction and flex-wrap properties. It accepts values in the form of flex-direction flex-wrap

The flex property is a shorthand property for setting the flex-grow, flex-shrink, and flex-basis properties. It accepts values in the form of flex-grow flex-shrink flex-basis

The order property controls the order in which elements appear within a flex container. It accepts any numeric value, and elements with a lower order value will appear first.

The align-self property allows you to override the alignment set by the align-items property on individual flex items. It accepts the same values as align-items.

Flexbox also provides a way to create more complex layouts by using multiple dimensions. For example, you can use the flex-wrap property to wrap elements onto multiple lines, and the flex-direction property to change the direction of the layout.

In addition, Flexbox provides a way to create responsive designs that adapt to different screen sizes and devices. For example, you can use media queries to change the layout of elements based on the screen size, and you can use the flex-basis property to control the initial size of elements.

Conclusion

Flexbox is a powerful layout module that allows you to create flexible and responsive designs. It provides a wide variety of properties and options that can be used to control the direction, alignment, and distribution of elements within a container. With Flexbox, it's easy to create complex layouts that adapt to different screen sizes and devices.

Mastering Dark Mode in CSS and Sass

KemotiaDev — Sat, 21 Jan 2023 08:22:20 +0000

Dark mode is a popular design trend that has gained a lot of attention in recent years. The idea behind dark mode is to provide a low-light interface that reduces eye strain and improves visibility in low-light environments. In this article, we will explore how to handle dark mode in CSS and Sass.

First, let's define some basic CSS variables that we will use to handle dark mode. We will use CSS variables to store the primary and secondary colors, as well as the text and background colors, for both light and dark mode.

:root {
  --primary-color-light: #ff0000;
  --secondary-color-light: #00ff00;
  --text-color-light: #000000;
  --background-color-light: #ffffff;

  --primary-color-dark: #660000;
  --secondary-color-dark: #006600;
  --text-color-dark: #ffffff;
  --background-color-dark: #000000;
}

Next, we need to create a CSS class that will toggle between light and dark mode. We will use the prefers-color-scheme media query to check the user's preferred color scheme and apply the appropriate CSS variables.

.dark-mode {
  --primary-color: var(--primary-color-dark);
  --secondary-color: var(--secondary-color-dark);
  --text-color: var(--text-color-dark);
  --background-color: var(--background-color-dark);
}

@media (prefers-color-scheme: dark) {
  body {
    color-scheme: dark;
  }
}

Now, we can use these CSS variables in our CSS and Sass files to handle dark mode. For example, we can use the --primary-color variable to set the background color of a button:

.btn {
  background-color: var(--primary-color);
  color: var(--text-color);
}

In Sass, we can use the lighten() and darken() functions to create variations of the primary and secondary colors for different states, such as hover and active.

.btn {
  background-color: var(--primary-color);
  color: var(--text-color);

  &:hover {
    background-color: darken(var(--primary-color), 10%);
  }

  &:active {
    background-color: lighten(var(--primary-color), 10%);
  }
}

In addition, we can also use the @if directive to create different styles for light and dark mode.

@if light-mode {
  .btn {
    background-color: var(--primary-color-light);
    color: var(--text-color-light);
  }
} @else {
  .btn {
    background-color: var(--primary-color-dark);
    color: var(--text-color-dark);
  }
}

Conclusion

Handling dark mode in CSS and Sass is a powerful way to create a visually appealing and accessible user interface.

Understanding the Event Loop in Javascript

KemotiaDev — Sat, 21 Jan 2023 08:07:36 +0000

JavaScript is a single-threaded programming language, which means it can only process one task at a time. However, it can handle asynchronous code execution through the use of the event loop. In this article, we will explore the concept of the event loop and how it works in JavaScript.

The event loop is a mechanism that allows JavaScript to handle asynchronous code execution by continuously checking the message queue for new messages (also known as events) and executing them one by one. The event loop is implemented in the JavaScript runtime and runs continuously in the background.

One of the key features of the event loop is that it can handle multiple events at the same time, even though JavaScript is a single-threaded language. This is achieved by using a callback function, which is a function that is called after an event is completed.

Here is an example of how the event loop works in JavaScript:

console.log("Start");
setTimeout(() => {
  console.log("Timeout");
}, 0);
console.log("End");

In this example, the event loop will first execute the first console.log statement, then it will add the setTimeout function to the message queue. The setTimeout function will wait for 0 seconds before it is executed, and the event loop will continue to execute the next console.log statement. After that, the setTimeout function will be executed and the "Timeout" message will be logged to the console. The output will be:

Start
End
Timeout

The event loop also plays a crucial role in handling promises and async/await in JavaScript. Here's an example of how the event loop works with promises:

console.log("Start");
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Promise resolved");
  }, 1000);
});
promise.then((res) => console.log(res));
console.log("End");

In this example, the event loop will first execute the first console.log statement, then it will create a new promise and add it to the message queue. The promise will wait for 1 second before it is resolved, and the event loop will continue to execute the next console.log statement. After that, the promise is resolved and the "Promise resolved" message will be logged to the console. The output will be:

Start
End
Promise resolved

Conclusion

The event loop is a fundamental concept in JavaScript that allows the language to handle asynchronous code execution. It continuously checks the message queue for new messages and executes them one by one, providing a way for JavaScript to handle multiple events simultaneously. Understanding how the event loop works is crucial for writing efficient and performant JavaScript code.

How to handle THEMING with CSS global variables in SASS

KemotiaDev — Fri, 20 Jan 2023 09:58:04 +0000

In this article, we will explore how to create a dynamic and customizable theme for your website using CSS variables and SASS. By utilizing the power of SASS and CSS variables, we can easily change the look and feel of our site by simply adjusting a few variables.

We will cover the basics of setting up a theme using SASS and CSS variables, as well as some advanced techniques for creating a truly dynamic and customizable experience for your users.
So, whether you're a seasoned developer or just starting out, this article will provide you with the tools and knowledge you need to take your website's design to the next level.

Let's jump right into it, shall we?

Ok, but why would we want to use CSS variables in SASS, if we can simply create a SASS variables.
Well, once you'll create a SASS variables, they are closely binded to your app and your style sheets. Once you compile it, they are kind of gone so you can't easily apply any dynamic theming to your application.

What do I mean by that? If after compiling and deploying your app you'd like to change your theme via some external property, plugin or any third party JS code, you won't be able to do it with SASS variables.

Ok, but let me show you how it really looks.
Let's start of with setting up two CSS variables that we'll be working with:

:root {
    --color-primary: hsl(50 80% 44%);
    --button-size: 20px;
}

This will be our default theme.

And now let's use these variables in our SASS _variables.scss file via var keyword.

$primary-color: var(--color-primary);
$button-size: var (--button-size);

We just achieved a basic setup that allows us to externally modify the theme.
Here's a quick example:

const redTheme = {
    primaryColor: 'red',
    buttonSize: '12px'
};

export const setTheme(theme) {
    if (!theme) return;

    document.documentElement.style.setProperty("--color-primary", theme.primaryColor);
    document.documentElement.style.setProperty("--button-size", theme.buttonSize);
};

As you can see a simple JS function can modify the theme in the way you want. It can by done by you, your customer or any third party which will be working with your product at the later stage.

Is this a perfect solution?
Well, yes and no. Connecting CSS variables with SASS variables is pretty simple and easy to modify from the outside, but there's a cost.
The way how SASS translates var(--color-primary) unfortunately breaks the built in SASS functions like darken, lighten, alpha and so on.

There are however ways to handle this, but some effort is required. Most of them are really time consuming but there's one that is pretty simple which I'd like to show you.

What for instance SASS darken() does is, it transforms your color into HSL and then modifies the L which stands for lightness.

So if you know in advance, that you'll need a color-primary that is 10% darker, you can simply modify the L with calc(), subtract 10% and save that into CSS variable color-primary-dark. Like so:

:root {
    --color-primary: hsl(50 80% 44%);
    // let's create a variable that is 10% darker
    --color-primary-dark: hsl(50 80% calc(44% - 10%));
    --button-size: 20px;
}

and then add it into our SASS _variables.scss file

$primary-color: var(--color-primary);
$primary-color-dark: var(--color-primary-dark);
$button-size: var (--button-size);

That way our $primary-color-dark is basically equal to this darken($primary-color, 10%);

You can do the same for lightening the color.
Alpha is fairly simple to achieve since if you want to make it 50% transparent, you can change your regular hsl hsl(50 80% 44%) into hsla where a stands for alpha and set it to 50%: hsla(50 80% 44% / 50%).

Last but not least, what if we'd like to do any sorts of calculations? Well, calc() works without any issues so if you'd like to increase your button size by 10px, you can do this

$primary-color: var(--color-primary);
$button-size: var (--button-size);

.button-primary {
    background-color: $primary-color;
    width: calc($button-size + 10px);
}

As simple as that.

Conclusion

Using CSS variables in SASS provides a dynamic and customizable theme for your website. It is a simple and easy way to modify the theme from outside, but it does have its limitations. With a bit of effort, you can work around these limitations and achieve a truly dynamic and customizable experience for your users. With the techniques outlined in this tutorial, you will have the tools and knowledge to take your website's design to the next level.

Are SASS @mixins really that lightweight? And what are %placeholders?

KemotiaDev — Tue, 10 Jan 2023 12:55:06 +0000

Mixins are a powerful feature in Sass that allow you to reuse a set of CSS declarations across multiple selectors.

One of the main advantages of using Mixins is that they can help keep your CSS code organized and maintainable, making it easier to update and maintain styles across a large code base.
However, one concern that some developers have with Mixins is whether they are lightweight to use, and if they add unnecessary bloat to your CSS code.

In this article, we will take a closer look at Mixins in Sass and explore whether they are a lightweight solution for reusing CSS styles.

Let's dive right into it!

I'm assuming that you already have a basic knowledge about what mixins are and how they work. If not, I encourage you to have a look at the official documentation.

Mixins, as mentioned previously, allow you to create a block of code and reuse it later in your application.
Sometimes, I see that people gets temptated to use them as a main provider for their styles.

... which is not a good idea. Let me show you why

Let's assume we have a huge e-commerce store with a plenty of buttons and we have created a mixin, that will share some basic styles among them.

Here's our simple mixin:

@mixin ButtonStyles {
    margin: 0 3px;
    color: white;
    border: none;
    outline: none;
    transition: all .3s ease;
    cursor: pointer;
    display: inline-flex;

    svg {
        width: 15px;
    }
}

Alright, and now let's use it with @include ButtonStyles!

.btn_primary {
    @include ButtonStyles;
    background: black;
    width: 45px;
}

.btn_secondary {
    @include ButtonStyles;
    background: blue;
    width: 60px;
}

.btn_contrast {
    @include ButtonStyles;
    background: yellow;
    width: 60px;
}

What do you think will happen now if you will compile your SASS code into CSS? Try to answer yourself.

a) Code from the mixin will not be repeated.
b) Code from the mixin will be repeated everytime you call @include ButtonStyles

Well, I bet you already know the answer!
Using a mixin in this particular case will basically copy paste the entire code from that mixin into your code as many times as you @include it.

Here's the result:

.btn_primary {
    margin: 0 3px;
    color: #fff;
    border: none;
    outline: none;
    transition: all .3s ease;
    cursor: pointer;
    display: inline-flex;
    background: #000;
    width: 45px
}

    .btn_primary svg {
        fill: #fff;
        width: 15px
    }

.btn_secondary {
    margin: 0 3px;
    color: #fff;
    border: none;
    outline: none;
    transition: all .3s ease;
    cursor: pointer;
    display: inline-flex;
    background: blue;
    width: 60px
}

    .btn_secondary svg {
        fill: #fff;
        width: 15px
    }

.btn_contrast {
    margin: 0 3px;
    color: #fff;
    border: none;
    outline: none;
    transition: all .3s ease;
    cursor: pointer;
    display: inline-flex;
    background: yellow;
    width: 60px
}

    .btn_contrast svg {
        fill: #fff;
        width: 15px
    }

Not very efficient if you want to optimize your CSS weight.

Imagine how bloated the code can become, if you'll do it many times in your application.

Well... how to solve it then?

Answer is pretty simple. If you want to keep the idea of having a single block that you can reuse in your Sass code, use placeholder.

%placeholder

Don't be mislead by the name, it's not an HTML placeholder you put into your inputs, it's a SASS placeholder with % sign attached to it's name.

Example:

%buttonStyles {
    margin: 0 3px;
    color: white;
    border: none;
    outline: none;
    transition: all .3s ease;
    cursor: pointer;
    display: inline-flex;

    svg {
        width: 15px;
    }
}

SASS placeholder is the most efficient way of creating your styles template, because it doesn't get compiled into your CSS code and is never repeated.
Also, you can't use @include like you do with Mixins, with placeholder you use @extend keyword instead.

Curious to see how does it work in practice?
Here we go!

Let's first @extend desired styles in our buttons:

.btn_primary {
    @extend %buttonStyles;
    background: black;
    width: 45px;
}

.btn_secondary {
    @extend %buttonStyles;
    background: blue;
    width: 60px;
}

.btn_contrast {
    @extend %buttonStyles;
    background: yellow;
    width: 60px;
}

And now let's have a look at the result after compiling SASS code into CSS.

.btn_secondary, .btn_primary, .btn_contrast {
    margin: 0 3px;
    color: #fff;
    border: none;
    outline: none;
    transition: all .3s ease;
    cursor: pointer;
    display: inline-flex
}

    .btn_secondary svg, .btn_primary svg, .btn_contrast svg {
        width: 15px
    }

.btn_primary {
    background: #000;
    width: 45px
}

.btn_secondary {
    background: blue;
    width: 60px
}

.btn_contrast {
    background: yellow;
    width: 60px
}

And voilà!
Your CSS code is much lighter since nothing there was repeated.
This is super useful in large applications, where each kb matters.

Alternatively to a %placeholder you can use .class instead and extend it similarly by @extend .buttonStyles but this will result in applying this class name to the css class names list.
In our case scenario it would change this

.btn_secondary, .btn_primary, .btn_contrast {
  ...code 
}

into this

.buttonStyles, .btn_secondary, .btn_primary, .btn_contrast {
  ...code 
}

Note the .buttonStyles class applied to the classes list.
It's not a bad solution, but since you are already extending styles, why not do it perfectly?
Moreover, if you really care about every kb, you might save a bunch by not having unused class names in class lists.

Conclusion
Mixins in Sass are a great way to reuse CSS styles, but they can add unnecessary bloat to your CSS code if they are not used carefully.
An alternative approach to using Mixins is to use placeholders. Placeholders allow you to reuse a set of CSS declarations without generating any actual CSS code.
Instead, they are only used as a reference and only generate code when they are referenced by other selectors. This can help keep your CSS code more efficient and lightweight. By using placeholders instead of Mixins, you can ensure that your CSS code is lean and efficient, making your web application faster and more responsive for your users.