Forem: Ahmet Erkan Paşahan

5 Ways to Enhance Your TypeScript Code Quality

Ahmet Erkan Paşahan — Tue, 08 Oct 2024 14:54:32 +0000

Writing code is not just about providing functionality; it also requires ensuring that the code you write is maintainable, reliable, and sustainable. Although TypeScript is a powerful language that offers developers more control and security during the software development process, situations often arise where productivity decreases due to things that should or shouldn’t be done, leading to unmanageable complex code structures.

In general, when working in a software process, it’s important not only to get the project up and running but also to make your code more professional and free from common pitfalls, ensuring it is understandable, reusable, extendable, and flexible to changes.

Let’s explore five ways to write more professional and efficient code with TypeScript!

1- Defining Exact Types Instead of Using Any

Many of us use the any type in many places and as much as possible in order to be quick at the beginning. However, knowing what kind of data a variable holds allows the compiler to perform type checks and anticipate errors before runtime, which is not possible with the use of any.

For example, let’s assume we have a boolean variable named isAdmin. If we try to print the length of this variable to the console, it won't throw a compile-time error, but it will result in a runtime error.

Using any reduces type safety and readability, which are among the most important advantages of TypeScript, so exact types should be preferred whenever possible.

2- Using Type Guards for Null and Undefined Checks

Again, many of us try to control the situation with an if statement when there is a possibility that a variable or function's return value may be null or undefined. This is because values like null or undefined can lead to serious potential errors in our code. However, performing extensive checks with if can sometimes lead to incorrect comparisons or result in repeating the same check multiple times. Fortunately, with TypeScript’s Optional Chaining feature, we can check whether an expression is null or undefined simply by using ?.

Let’s consider a scenario where we perform an operation with a user’s name information;

Optional Chaining is a great alternative for writing more sustainable and clean code.

3- Using the Spread Operator Instead of Object.assign

Sometimes we may encounter various scenarios for copying or merging objects. A common method is to combine existing objects under a new object using Object.assign. However, in detailed situations like nested objects, instead of copying, references to these objects are shared. In this case, any changes made to the new object will also affect the nested objects of the original object.

Using the … operator is much more efficient for both spreading the properties of existing objects into a new object and performing the assignment in a cleaner and easier way.

4- Using Partial Instead of Default Parameters

Writing functions with default parameters is one of the common usages we often need. However, when we want to use the same code for similar purposes in different situations, the necessity to adhere to default parameters can be a disadvantage that reduces efficiency.

Using the Partial<T> type instead allows all properties of an object to become optional. This way, it makes the usage more flexible by only providing the necessary properties as parameters, resulting in a more efficient implementation without the need to modify the existing function.

5- Using Union Types Instead of Enums

In many scenarios, such as user roles, colors, error states, or order statuses, we define constant values to create groupings and aim to enhance code readability. However, in more comprehensive scenarios, these constant values can become quite complex and abstract, turning into a disadvantage that reduces efficiency. At this point, using Union Types which is another practical solution to simplify the code, is a more effective method.

Although they may seem like small details at first, once you start implementing these methods in your projects, you will notice that you are writing cleaner, error-free, and future-proof code. I consider these suggestions only as a starting point. Always exploring new ways to improve your code quality and applying better methods will take you one or several steps further on your software development journey.

There is no end to learning! Every new piece of information can be the key to another. Especially in the field of software, the ability to learn and develop oneself is of vital importance. Remember, may your hunger for knowledge never cease!

I wish you enjoyable reading and discoveries.

If You Enjoyed It, Don’t Forget to Like and Follow! 👏

If you found this article helpful, don’t forget to like and follow me for more content! I’ll continue sharing the latest developments in the world of software, along with useful tips and insights in upcoming articles.

Social Media:

Twitter: @aepasahan_dev
LinkedIn: Ahmet Erkan Paşahan
Instagram: aepasahan.dev
GitHub: aepasahan

I’m always open to new ideas and feedback. If you have any questions or would like to share something, feel free to reach out to me on social media. Stay tuned! 😊

Why SCSS is Better for Writing CSS

Ahmet Erkan Paşahan — Fri, 27 Sep 2024 16:24:32 +0000

When writing CSS, you might face some common problems: repeating the same code, managing complex styles, or keeping things organized in large projects. This is where SCSS comes in. SCSS (Sassy CSS) is an upgraded version of CSS that helps you write cleaner, more organized, and reusable code.

In this article, we will explain why SCSS is a great tool and how it can solve some of the challenges that CSS alone cannot handle.

Why Use SCSS?

While CSS is simple and works well for small projects, it can become difficult to manage as your website grows. SCSS gives you more powerful tools to write better code. Here are the main reasons to use SCSS:

Variables: SCSS lets you create variables for values like colors and font sizes. This means you can change a value in one place and it updates everywhere.
Mixins: SCSS allows you to create reusable pieces of code, called mixins. This saves time and reduces repetition.
Modularity: SCSS helps you split large CSS files into smaller parts, making it easier to manage.

How SCSS Solves Common CSS Problems

Using Variables to Avoid Repetition

In CSS, you often have to repeat the same colors, fonts, or sizes. With SCSS, you can store these values in variables and reuse them anywhere.

CSS:

.button {
  background-color: #007BFF;
  color: #FFFFFF;
}

.link {
  color: #007BFF;
}

SCSS:

$primary-color: #007BFF;
$text-color: #FFFFFF;

.button {
  background-color: $primary-color;
  color: $text-color;
}

.link {
  color: $primary-color;
}

In SCSS, you define colors in variables ($primary-color), and then use them in your styles. If you need to change the color later, you only update the variable, and it changes everywhere.

Using Mixins for Reusable Code

CSS:

.button {
  padding: 10px 20px;
  border-radius: 4px;
  background-color: #007BFF;
  color: white;
}

.link {
  padding: 5px 10px;
  border-radius: 4px;
  background-color: transparent;
  color: #007BFF;
}

SCSS:

@mixin button-style($padding, $bg-color, $text-color) {
  padding: $padding;
  border-radius: 4px;
  background-color: $bg-color;
  color: $text-color;
}

.button {
  @include button-style(10px 20px, #007BFF, white);
}

.link {
  @include button-style(5px 10px, transparent, #007BFF);
}

Here, the button-style mixin helps you avoid repeating the same styles. Instead of writing the same properties over and over again, you define them in the mixin and use them where needed.

Conclusion

SCSS is a powerful tool that helps solve many common problems in CSS. It makes your code more organized, easier to manage, and more flexible. With SCSS, you can use variables, nesting, and mixins to write cleaner, reusable code. If you want to work more efficiently, especially on large projects, learning SCSS is a great choice!

Stay Updated!

If you found this article helpful and want to learn more about modern CSS techniques and web development tips, make sure to follow me for future updates. Let’s stay connected!

What Are Design Tokens and Why Should We Use Them?

Ahmet Erkan Paşahan — Tue, 24 Sep 2024 13:06:28 +0000

Design tokens have become a crucial part of modern design systems, allowing for consistent and scalable design across different platforms. They help bridge the gap between design and development, ensuring that everyone speaks the same "language" when it comes to design elements. But what exactly are design tokens, why are they important, and how can we use them effectively?

In this article, we'll explore:

What design tokens are
Why we should use them
Different types of design tokens
Practical ways to implement design tokens

What Are Design Tokens?

Design tokens are the smallest units of a design system that capture design decisions such as colors, spacing, typography, and more. These values are stored in a format that both designers and developers can easily use across platforms (web, mobile, etc.).

In simpler terms, design tokens are variables that store the design properties of a system in a structured and reusable way.

Example:

{
  "color-primary": "#007BFF",
  "spacing-small": "8px",
  "font-size-base": "16px",
  "border-radius": "4px"
}

In this JSON format, tokens like color-primary, spacing-small, and font-size-base represent design decisions that are reusable across different components.

Why JSON?

Platform independence: JSON is platform-neutral, making it easier to convert tokens into various formats (CSS, SCSS, Android, iOS, etc.).
Consistency: JSON tokens ensure consistency in design across different platforms.

Why Should We Use Design Tokens?

Design tokens play a crucial role in creating scalable and consistent user interfaces. Here are the key benefits of using design tokens:

Consistency Across Platforms

Design tokens help ensure that every element in your design system is consistent. Whether you’re developing for the web, mobile, or even desktop applications, design tokens keep the colors, typography, and spacing the same across every platform.

Improved Collaboration Between Designers and Developers

By storing design decisions as tokens, both designers and developers speak the same "language." Designers can update the tokens in a design tool, and developers can directly use those tokens in the codebase, ensuring seamless handoff and communication.

Faster Updates and Maintenance

Design tokens allow for quick updates. For example, if you need to change your primary brand color, you only need to update the color-primary token in one place. This update will then reflect across your entire design system without having to go into each individual component.

Scalability

As your project grows, maintaining consistency becomes challenging. Design tokens make your design system scalable, allowing you to maintain consistency even as you add new features or platforms.

Different Types of Design Tokens

There are various types of design tokens that you can define, depending on the elements of your design system. Here are the most commonly used types:

Color Tokens

Colors are the most common type of design token. These can include primary, secondary, background, text, border colors, etc.

{
  "color-primary": "#007BFF",
  "color-secondary": "#6C757D",
  "color-background": "#FFFFFF",
  "color-text": "#212529"
}

Typography Tokens

Typography tokens define the font sizes, line heights, font weights, and font families used in your design system.

{
  "font-size-base": "16px",
  "font-size-heading": "24px",
  "font-family": "'Roboto', sans-serif",
  "font-weight-bold": "700"
}

Spacing Tokens

Spacing tokens are used to define margins, padding, and spacing between elements.

{
  "spacing-small": "8px",
  "spacing-medium": "16px",
  "spacing-large": "32px"
}

Border Tokens

Borders and radii are also captured as tokens, which helps maintain consistency in button styles, cards, and other components.

{
  "border-radius": "4px",
  "border-width": "1px",
  "border-color": "#E0E0E0"
}

Shadow Tokens

For box shadows, you can store the values in tokens to maintain consistency across components.

{
  "shadow-small": "0px 2px 4px rgba(0, 0, 0, 0.1)",
  "shadow-large": "0px 4px 8px rgba(0, 0, 0, 0.2)"
}

Practical Ways to Use Design Tokens

Now that we understand what design tokens are and the different types, let’s explore how to use them in practice.

Using Tokens in CSS or SCSS

Design tokens can be integrated directly into your CSS or SCSS files using variables. This allows you to update the tokens easily across your entire codebase.

Example:

$color-primary: #007BFF;
$spacing-small: 8px;
$font-size-base: 16px;

button {
  background-color: $color-primary;
  padding: $spacing-small;
  font-size: $font-size-base;
}

In this example, if you change the $color-primary value, every button using that token will automatically update.

Using Design Tokens in Design Tools

Tools like Figma and Sketch now support design tokens. You can create shared styles for colors, typography, and other design elements, and when you update a token, all components using that token will update automatically.

Figma: Use the Styles feature to manage design tokens within the design tool.

Sketch: Use the Shared Styles to define and reuse tokens.

Image source: https://sketchelements.com/plugins/design-tokens/

Design Tokens Sketch Plugin

Using Design Tokens with JavaScript

Design tokens can also be used in JavaScript frameworks. By integrating tokens into your code, you can dynamically change your UI's design properties based on user preferences or themes (e.g., light and dark mode).

Example:

const theme = {
  colorPrimary: "#007BFF",
  spacingSmall: "8px",
  fontSizeBase: "16px"
};

const button = document.querySelector('.button');
button.style.backgroundColor = theme.colorPrimary;
button.style.padding = theme.spacingSmall;
button.style.fontSize = theme.fontSizeBase;

Using Design Tokens in Theming

Design tokens are particularly useful when creating themes for your application. For example, switching between a light theme and a dark theme can be easily achieved by swapping token values.

Example:

{
  "light": {
    "color-background": "#FFFFFF",
    "color-text": "#000000"
  },
  "dark": {
    "color-background": "#000000",
    "color-text": "#FFFFFF"
  }
}

By toggling between the light and dark tokens, your entire app can switch themes seamlessly.

Conclusion

Design tokens are a fundamental part of modern design systems, allowing for consistent, scalable, and efficient design across platforms. Whether you're using them to define colors, typography, or spacing, tokens help maintain consistency and make updates easier. By integrating design tokens into your workflow, you can streamline collaboration between design and development, reduce maintenance time, and create a more flexible and scalable design system.

Start using design tokens today and see how they can help you build a more consistent, efficient, and scalable design system!

Stay Updated for More Design System Insights

I hope this article helped you understand the importance of design tokens and how they can streamline your design system. If you’re interested in learning more, best practices, and how to implement scalable solutions in your projects, make sure to follow me for more updates!

Feel free to connect with me on social media, or reach out if you have any questions I’d love to hear from you!

Combining Flexbox and Grid for a Personal Website Landing Page

Ahmet Erkan Paşahan — Sun, 22 Sep 2024 10:56:50 +0000

In the previous article, we discussed how CSS Flexbox and CSS Grid simplify responsive design by making layouts adaptable to different screen sizes. Now, let’s take things a step further and see how we can combine both Flexbox and Grid to create a personal website landing page.

CSS Grid vs Flexbox: A Detailed Guide to Responsive Design

Ahmet Erkan Paşahan ・ Sep 19

#css #programming #html #design

This landing page will include:

A header with navigation links.
A main section with a profile photo, a short description, and social media links.
A footer for copyright information.

We'll use CSS Grid to manage the overall structure and Flexbox to align the content inside specific sections. By combining both, we can create a modern, flexible, and fully responsive landing page. In this example, the focus is more on how CSS Grid and Flexbox can be used together, rather than on the design itself.

Why Combine Flexbox and Grid?

Flexbox and Grid each have their strengths:

CSS Grid is perfect for handling the larger layout, dividing the page into sections like header, main content, and footer.
Flexbox excels at aligning smaller items inside those sections, such as navigation links or buttons.

By using both, we can create a responsive layout that works well on any screen size.

Let's Code

Let's build a personal website landing page using both Grid and Flexbox. Here’s the full HTML and CSS code.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Personal Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <header class="header">
      <h1 class="header__title">John Doe</h1>
      <nav class="header__nav">
        <ul class="header__list">
          <li><a href="#about" class="header__link">About</a></li>
          <li><a href="#contact" class="header__link">Contact</a></li>
          <li><a href="#projects" class="header__link">Projects</a></li>
        </ul>
      </nav>
    </header>

    <main class="main">
      <section class="profile">
        <img src="profile.jpg" alt="John Doe" class="profile__photo">
        <div class="profile__info">
          <h2 class="profile__name">John Doe</h2>
          <p class="profile__bio">Web Developer with a passion for creating interactive and user-friendly websites.</p>
          <div class="profile__social">
            <a href="https://twitter.com" class="social__link">Twitter</a>
            <a href="https://linkedin.com" class="social__link">LinkedIn</a>
            <a href="https://github.com" class="social__link">GitHub</a>
          </div>
        </div>
      </section>
    </main>

    <footer class="footer">
      <p class="footer__text">© 2024 John Doe - All Rights Reserved</p>
    </footer>
  </div>
</body>
</html>

CSS:

/* General Styles */
body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

.container {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header"
    "main"
    "footer";
  height: 100vh; /* Full-page layout */
}

/* Header */
.header {
  grid-area: header;
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

.header__title {
  font-size: 36px;
  margin: 0;
}

.header__nav {
  margin-top: 10px;
}

.header__list {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.header__link {
  color: white;
  text-decoration: none;
}

.header__link:hover {
  text-decoration: underline;
}

/* Main */
.main {
  grid-area: main;
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile {
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile__photo {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
}

.profile__name {
  font-size: 28px;
  margin: 0;
}

.profile__bio {
  font-size: 18px;
  color: #666;
  margin: 10px 0 20px;
}

.profile__social {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.social__link {
  color: #333;
  text-decoration: none;
  font-size: 16px;
}

.social__link:hover {
  text-decoration: underline;
}

/* Footer */
.footer {
  grid-area: footer;
  background-color: #333;
  color: white;
  padding: 10px;
  text-align: center;
}

.footer__text {
  margin: 0;
}

How This Layout Works

Grid for Page Structure: We use CSS Grid to structure the page, dividing it into three main sections: header, main, and footer. The grid-template-areas property ensures each section takes up the right amount of space.
Flexbox for Alignment: Inside the header and main section, we use Flexbox to align elements like the navigation links and social media buttons. Flexbox makes it easy to center items both horizontally and vertically.
Responsive Design: This page will adapt well to different screen sizes. The Grid layout handles the overall page structure, while Flexbox ensures the content inside is spaced and aligned properly on any screen.

In this example, the focus is more on how CSS Grid and Flexbox can be used together, rather than on the design itself. The goal is to demonstrate how both tools complement each other to create responsive layouts with minimal effort.

Conclusion

By combining CSS Grid and Flexbox, you can build modern and responsive personal website landing pages with ease. Grid helps structure the layout, while Flexbox ensures the elements inside are neatly aligned. Together, they give you powerful control over your designs, making it easy to create layouts that adapt beautifully to any screen size.

Stay Updated for More Web Development Insights

If you found this example helpful and want to explore more advanced CSS techniques like combining Flexbox and CSS Grid, make sure to follow me for future updates! I regularly share tips, tutorials, and examples to help you build better websites.

Feel free to connect with me on social media or reach out if you have any questions—I’d love to hear from you!

CSS Grid vs Flexbox: A Detailed Guide to Responsive Design

Ahmet Erkan Paşahan — Thu, 19 Sep 2024 12:55:30 +0000

When creating a website, it's important to make sure your layout adapts well to different screen sizes—whether it's a desktop, tablet, or mobile device. Both CSS Flexbox and CSS Grid are powerful tools that help developers create flexible and responsive designs. They allow your layout to adjust based on the user's screen size, making your website more user-friendly and efficient.

In this guide, we will explain the basics of Flexbox and CSS Grid, how they simplify responsive design, and provide detailed examples of how they work in real world situations.

What Is Flexbox and How It Helps?

Flexbox is a layout model that allows you to arrange items in a row or a column, making it a one-dimensional layout tool. Flexbox is great for responsive design because it automatically adjusts the size and position of elements based on the available space, making it easier to align items on different screen sizes.

Key Features of Flexbox:

Flexible Layouts: Flexbox allows items to grow or shrink based on the available space. This is especially useful in responsive design, where screen sizes can vary greatly.
Alignment Control: Flexbox makes it easy to align items vertically and horizontally, even when the container's size changes.
Order Control: You can easily change the order of items, without changing the HTML structure, making it perfect for mobile-first designs.

Example: Responsive Navigation Bar

In many websites, navigation bars need to be responsive, shrinking on smaller screens (like mobile phones) and expanding on larger screens (like desktops). Flexbox makes this easy to achieve.

HTML:

<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item"><a href="#">Home</a></li>
    <li class="nav__item"><a href="#">About</a></li>
    <li class="nav__item"><a href="#">Services</a></li>
    <li class="nav__item"><a href="#">Contact</a></li>
  </ul>
</nav>

CSS:

.nav__list {
  display: flex;
  justify-content: space-around;
  list-style: none;
  padding: 0;
}

.nav__item a {
  text-decoration: none;
  padding: 10px 20px;
  color: #333;
}

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
  .nav__list {
    flex-direction: column; /* Stack items vertically on smaller screens */
    align-items: center;
  }

  .nav__item {
    margin-bottom: 10px;
  }
}

Explanation:

Flexbox allows the navigation links to be evenly spaced in a horizontal row on larger screens (using flex-direction: row by default).
When the screen width is smaller (under 768px), media queries change the layout to stack the links vertically (flex-direction: column), making it more suitable for mobile devices.
Responsive alignment is achieved with minimal code, and Flexbox automatically handles spacing and positioning.

What Is CSS Grid and How It Simplifies Responsive Design?

CSS Grid is a two-dimensional layout tool that allows you to control both rows and columns at the same time. This makes CSS Grid ideal for creating complex layouts, where elements need to be positioned in both directions. It’s especially useful for responsive web design, as it allows you to easily rearrange your layout on different screen sizes without complex calculations.

Key Features of CSS Grid:

Two-Dimensional Layout: You can create both rows and columns simultaneously, making it easier to manage complex designs.
Responsive Grids: CSS Grid makes it easy to adjust the layout based on the screen size, ensuring your content is well-organized across all devices.
Explicit Positioning: You can control exactly where items should appear on the grid, making it easy to create flexible and responsive layouts.

Example: Responsive Blog Layout

Let’s imagine you are creating a blog layout where you want two columns on large screens, but a single column on smaller screens (like mobile devices). CSS Grid makes this process much simpler.

HTML:

<div class="blog-grid">
  <article class="blog-post">Post 1</article>
  <article class="blog-post">Post 2</article>
  <article class="blog-post">Post 3</article>
  <article class="blog-post">Post 4</article>
</div>

CSS:

.blog-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two columns of equal size */
  gap: 20px;
}

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr; /* One column for smaller screens */
  }
}

.blog-post {
  background-color: #f0f0f0;
  padding: 20px;
}

Explanation:

CSS Grid is used to create a two-column layout for larger screens, with equal-sized columns (1fr 1fr).
On smaller screens (under 768px), the grid-template-columns property changes to 1fr, creating a single-column layout for mobile devices.
This example shows how easy it is to switch between different layouts using Grid, without having to modify the HTML structure.

When to Use Flexbox and CSS Grid?

Flexbox:

Simple layouts: Flexbox is perfect for navigation bars, rows of buttons, and form elements that need to align in a single direction.
Responsive items: Flexbox is ideal when you need items to adjust their size and position based on the available space.

CSS Grid:

Complex layouts: CSS Grid shines when you need to create full-page layouts, galleries, or designs that require both rows and columns.
Precise control: Use Grid when you need to position elements exactly where you want them in a structured layout.

Combining Flexbox and Grid for Responsive Design

In many cases, you can use both Flexbox and CSS Grid together to create even more responsive and flexible layouts. Here’s an example where we combine both tools to build a responsive product page.

Example: Responsive Product Page

This product page features a header, a main section with product information and images, and a footer. CSS Grid is used to create the main layout, while Flexbox helps align items inside the sections.

HTML:

<div class="product-page">
  <header class="header">
    <h1>Product Name</h1>
  </header>

  <main class="main">
    <section class="product-info">
      <img src="product.jpg" alt="Product Image" class="product-image">
      <div class="product-details">
        <h2>Product Details</h2>
        <p>This is a high-quality product.</p>
        <button class="buy-now">Buy Now</button>
      </div>
    </section>
  </main>

  <footer class="footer">
    <p>&copy; 2024 My Store</p>
  </footer>
</div>

CSS:

/* Grid Layout for the Overall Structure */
.product-page {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header"
    "main"
    "footer";
  height: 100vh;
}

.header {
  grid-area: header;
  background-color: #333;
  color: white;
  text-align: center;
  padding: 20px;
}

.main {
  grid-area: main;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer {
  grid-area: footer;
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

/* Flexbox for Product Info Section */
.product-info {
  display: flex;
  gap: 20px;
}

.product-image {
  width: 200px;
  height: auto;
}

.product-details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.buy-now {
  background-color: #007BFF;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
}

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
  .product-info {
    flex-direction: column;
    align-items: center;
  }

  .product-image {
    width: 100%;
  }
}

Explanation:

Grid is used to structure the overall page, creating sections for the header, main content, and footer.
Inside the main content, Flexbox is used to align the product image and details side-by-side on larger screens.
On smaller screens, Flexbox switches the product info layout to a vertical stack, making it more mobile-friendly.

Conclusion

Both CSS Grid and Flexbox simplify responsive design in their own ways. Flexbox is perfect for aligning items in a single direction, making it ideal for navigation bars and simple layouts. CSS Grid, on the other hand, excels at creating complex, two-dimensional layouts that adapt to different screen sizes. By understanding when and how to use these two tools, you can build responsive, user-friendly websites with ease.

For even better results, you can combine Flexbox and Grid to take full control of your layout and ensure that your designs are flexible, adaptable, and responsive across all devices.

Stay Updated for More Tips

I hope this guide helped you understand how Flexbox and CSS Grid can simplify responsive design. If you're interested in learning more about web development, layout techniques, and best practices for building user-friendly websites, make sure to follow me for future updates!

Feel free to connect with me on social media or reach out if you have any questions—I’d love to hear from you!

Mastering CSS BEM naming with Practical Examples: Pure HTML, Angular, and Next.js

Ahmet Erkan Paşahan — Tue, 17 Sep 2024 13:32:59 +0000

In the previous article, we explored the basics of the BEM naming convention in CSS and why it's crucial for maintaining clean and scalable code.

CSS BEM Naming Convention: What It Is, Why It Matters, and How to Use It?

Ahmet Erkan Paşahan ・ Sep 14

#css #bem #html #programming

This time, we will dive deeper with practical examples to see how BEM works across different environments: Pure HTML, Angular, and Next.js.

BEM is not limited to basic HTML structures; it can be effectively applied in any modern frontend framework. By the end of this article, you'll have a clearer understanding of how to implement BEM in various development setups.

Example 1: Using BEM in Pure HTML

In this example, we’ll create a user profile card that dynamically changes its style based on the user’s online or offline status. This is a common use case in real-world applications where elements need to change based on state or condition.

HTML:

<div class="user-card user-card--offline">
  <img src="profile.jpg" alt="User Avatar" class="user-card__avatar" />
  <div class="user-card__info">
    <h2 class="user-card__name">John Doe</h2>
    <p class="user-card__status">Offline</p>
  </div>
</div>

CSS:

.user-card {
  display: flex;
  align-items: center;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background-color: #f5f5f5;
  max-width: 300px;
}

.user-card__avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 15px;
}

.user-card__info {
  display: flex;
  flex-direction: column;
}

.user-card__name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.user-card__status {
  font-size: 14px;
  color: #888;
}

.user-card--online {
  border-color: #4caf50;
  background-color: #e8f5e9;
}

.user-card--online .user-card__status {
  color: #4caf50;
}

.user-card--offline {
  border-color: #f44336;
  background-color: #ffebee;
}

.user-card--offline .user-card__status {
  color: #f44336;
}

Explanation:

The user-card is the block representing the user profile card.
Modifiers like user-card--online and user-card--offline change the appearance of the card based on the user's status.
user-card__avatar, user-card__name, and user-card__status are elements of the user-card block representing the avatar, name, and status, respectively.
The use of BEM makes it clear which styles apply to the block and which styles change based on the status of the user.

Example 2: Applying BEM in Angular

In this Angular example, we'll create an interactive button that shows a loading state when clicked. This is a frequent use case in forms or interactive elements where the state of the button changes based on user interaction or API calls.

Angular Component (button.component.html):

<button class="button" [ngClass]="{'button--loading': isLoading, 'button--primary': !isLoading}" (click)="handleClick()">
  <span *ngIf="!isLoading">{{ buttonText }}</span>
  <span *ngIf="isLoading">Loading...</span>
</button>

Component Styles (button.component.css):

.button {
  padding: 12px 24px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.button--primary {
  background-color: #007BFF;
}

.button--loading {
  background-color: #666;
  cursor: not-allowed;
}

.button--loading span {
  font-size: 14px;
}

Component Logic (button.component.ts):

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-button',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css']
})
export class ButtonComponent {
  @Input() buttonText: string = 'Submit';
  isLoading: boolean = false;

  handleClick() {
    this.isLoading = true;

    setTimeout(() => {
      this.isLoading = false;
    }, 2000);
  }
}

Explanation:

The button block represents the base button.
The [ngClass] directive dynamically adds button--loading when the button is in a loading state and button--primary when it’s in its default state.
The button’s text changes based on the isLoading state.
The handleClick method simulates a loading state and resets it after 2 seconds, representing a typical API call scenario.

Example 3: Implementing BEM in Next.js

In this Next.js example, we'll create a navigation menu that highlights the active page dynamically. This is a common scenario in web applications where the current page needs to be visually indicated in the navigation.

Next.js Component (components/NavBar.js):

import { useRouter } from 'next/router';

export default function NavBar() {
  const router = useRouter();

  return (
    <nav className="nav">
      <ul className="nav__list">
        <li className={`nav__item ${router.pathname === '/' ? 'nav__item--active' : ''}`}>
          <a href="/" className="nav__link">Home</a>
        </li>
        <li className={`nav__item ${router.pathname === '/about' ? 'nav__item--active' : ''}`}>
          <a href="/about" className="nav__link">About</a>
        </li>
        <li className={`nav__item ${router.pathname === '/contact' ? 'nav__item--active' : ''}`}>
          <a href="/contact" className="nav__link">Contact</a>
        </li>
      </ul>
    </nav>
  );
}

Next.js Styles (styles/NavBar.module.css):

.nav {
  background-color: #333;
  padding: 10px;
}

.nav__list {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav__item {
  margin: 0;
}

.nav__link {
  color: white;
  text-decoration: none;
}

.nav__item--active .nav__link {
  font-weight: bold;
  color: #007BFF;
}

Explanation:

The useRouter hook from Next.js is used to get the current route (router.pathname).
The nav__item--active modifier is applied dynamically based on whether the current page matches the menu item.
The active page is highlighted by changing the text color and making the font bold.
The nav__link is an element inside the nav__item block.

Conclusion

Using BEM in your project allows you to maintain consistency and scalability in your CSS, even when dealing with dynamic components and changing states. By leveraging BEM for state management, dynamic class changes, and conditional styling, you can keep your code structured, modular, and easy to maintain.

These detailed examples highlight how BEM can be applied in real-world applications, making it easier to manage complex UI components across different frameworks.

Follow Me for More Updates!

I hope this article helped deepen your understanding of using CSS BEM in different platforms. If you're interested in more articles, practical tips, and insights into web development, make sure to follow me for regular updates. Don’t hesitate to reach out if you have any questions or feedback—I’d love to connect and hear from you!

CSS BEM Naming Convention: What It Is, Why It Matters, and How to Use It?

Ahmet Erkan Paşahan — Sat, 14 Sep 2024 16:34:35 +0000

Writing clean and organized CSS is important, especially for larger projects. One of the best ways to structure your CSS is by using the BEM naming convention. In this article, we will explain what BEM is, why it's important, its pros and cons, and show you how to use it with two examples.

What Is BEM?

BEM stands for Block, Element, and Modifier. It's a naming system for writing CSS class names that makes your code easier to understand and maintain. The main goal of BEM is to help developers write reusable, modular, and scalable CSS.

1. Block: A standalone component that makes sense on its own (e.g., a button or a form).
2. Element: A part of the block that has no meaning on its own and is dependent on the block (e.g., a button icon).
3. Modifier: A different version of a block or an element (e.g., a button with a different color).

.block {}
.block__element {}
.block--modifier {}

Why Use BEM?

Using BEM helps you avoid messy and confusing CSS. It brings several benefits:

Consistency: All class names follow the same pattern, making your code more predictable and easier to understand.
Reusability: Blocks and elements can be reused across different parts of a project.
Easy Maintenance: Other developers can easily read and modify your code.
Avoids Conflicts: BEM helps you prevent CSS conflicts between different components.

How to Use BEM: Examples

Example 1: A Simple Button

Let’s start with a basic button block and see how BEM works.

HTML:

<button class="button button--primary">
  Submit
</button>

CSS:

.button {
  padding: 10px 20px;
  background-color: #333;
  color: white;
  border: none;
}

.button--primary {
  background-color: blue;
}

Explanation:

button is a block, representing the main button style.
button--primary is a modifier, applying a blue background to this specific button version.

Example 2: A Card Component

Now let’s create a card block with a title and description (elements), and a small size version (modifier).

HTML:

<div class="card card--small">
  <h2 class="card__title">Title</h2>
  <p class="card__description">This is a description.</p>
</div>

CSS:

.card {
  padding: 20px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
}

.card__title {
  font-size: 18px;
  margin-bottom: 10px;
}

.card__description {
  font-size: 14px;
  color: #666;
}

.card--small {
  padding: 10px;
}

Explanation:

card is a block representing the card component.
card__title and card__description are elements, specific parts of the card.
card--small is a modifier, reducing the padding for the smaller version of the card.

Pros and Cons of BEM

Pros:

1. Organized and Consistent: Helps keep your CSS clean and well-structured.
2. Avoids CSS Conflicts: Reduces the risk of styles from one component affecting another.
3. Reusability: Blocks and elements can be used in multiple places across a project.
4. Easy to Maintain: Makes it easier to update and manage CSS, even as your project grows.

Cons:

1. Long Class Names: BEM class names can be quite long, which may seem overwhelming at first.
2. Learning Curve: It takes some time to get used to the BEM structure, especially if you are new to CSS.

Why BEM Is Important?

BEM is a popular CSS methodology because it promotes clean and scalable code. In large projects, CSS can quickly become hard to manage. With BEM, each class name is unique and descriptive, which makes it easier to understand the purpose of each class. It also prevents issues like style conflicts and makes collaboration between developers smoother.

If you want a consistent and modular way of writing CSS, BEM is an excellent choice. It may take some time to learn, but in the long run, it will save you time and make your CSS more maintainable.

Conclusion

BEM naming convention is a great way to keep your CSS organized and scalable. It helps avoid conflicts, makes your code more maintainable, and promotes reusable components. Although it might seem challenging at first due to long class names and the learning curve, the benefits far outweigh the downsides. If you're looking to write cleaner CSS and improve collaboration in your projects, give BEM a try!

Follow Me for More Updates!

I hope you found this article helpful in understanding CSS BEM naming conventions. If you want to stay updated on more articles like this, tips, and web development insights, be sure to follow me. Feel free to reach out if you have any questions or suggestions. I’d love to hear from you!