DEV Community: Stephanie Obiekezie

Mastering CSS Naming Conventions: The Key to Debugging Efficiency

Stephanie Obiekezie — Wed, 21 Aug 2024 12:51:17 +0000

When working on a huge project, it's normal for your CSS codes to quickly build up and that can become messy and hard to locate a particular class or tag if you don't have a naming style. But by using a smart naming convention, hours of debugging can be avoided and used for other useful things. In this article, you will learn how to master and use one.

Keep It Consistent

Consistency is key. When you name classes and IDs in a predictable way, it’s easier to understand your CSS and find problems when they pop up.

Why do consistency matters?

Makes code easier to read: If your naming is predictable, anyone looking at your code can quickly understand what’s going on.
Reduces mistakes: Consistent names help avoid errors like using the same class name for different things.
Helps teamwork: When everyone on the team follows the same naming rules, it’s easier to work together without confusion.

Pick a Naming Style That Fits

There’s no single “best” way to name your CSS, but here are some popular methods:

BEM (Block, Element, Modifier): This method creates clear, descriptive names that help avoid conflicts and make your code more reusable.

Example:

<button class="button button--primary">Primary Button</button>
<div class="header__logo">
  <img src="logo.png" alt="Site Logo">
</div>

button is the block, button--primary is a modifier indicating a primary button, and header__logo is an element of the header block.

OOCSS (Object-Oriented CSS): Focuses on creating reusable, independent pieces of code.

Example:

Copy code
<div class="media-object">
  <img src="avatar.png" class="media-object__image" alt="Avatar">
  <div class="media-object__body">
    <p>User profile details go here.</p>
  </div>
</div>
<div class="grid-layout">
  <div class="grid-layout__item">Item 1</div>
  <div class="grid-layout__item">Item 2</div>
</div>

media-object and grid-layout are independent components that can be reused across different parts of your site.

SMACSS (Scalable and Modular Architecture for CSS): Organizes your styles into categories like base, layout, module, state, and theme.

Example:


<header class="layout-header">
  <nav class="module-nav">
    <ul>
      <li class="module-nav__item is-active">Home</li>
      <li class="module-nav__item">About</li>
    </ul>
  </nav>
</header>

layout-header is part of the layout, module-nav is a module, and is-active indicates the current state of the navigation item.

Choose the method that makes the most sense for your project, and stick with it. Mixing styles can create confusion and lead to bugs.

Be Clear but Brief

Your class names should clearly describe their purpose but without being too long.

Example:

<!-- Not good: -->
<div class="header1">...</div>
<button class="btn1">Click me</button>

<!-- Better: -->
<div class="header-main">...</div>
<button class="btn-primary">Click me</button>

Instead of vague names like .header1 or .btn1, use more descriptive names like .header-main or .btn-primary.

Use Prefixes to Stay Organized

For bigger projects, using prefixes can help keep your styles organized and avoid naming conflicts.

Example:

<!-- Component-based prefixes: -->
<button class="btn-submit">Submit</button>
<nav class="nav-main">
  <ul>
    <li class="nav-item">Home</li>
    <li class="nav-item">About</li>
  </ul>
</nav>

<!-- Utility prefixes: -->
<div class="u-text-center">This text is centered</div>
<div class="is-active">This item is active</div>

btn-, nav-, u-, and is- are prefixes that help group related styles together, making the CSS more organized and easier to manage.

Use Hyphens and Underscores Smartly

Hyphens and underscores can make your class names easier to read, but use them consistently.

Example:

<div class="card-header">...</div>
<p class="text-center">Centered text</p>

<!-- Using underscores in BEM: -->
<div class="block__element">...</div>
<button class="block--modifier">Modified Button</button>

Hyphens are generally used to separate words in a class name, while underscores are often used in BEM to separate elements and modifiers.

End Note

A good naming convention is not one of those things you think you should maybe learn, it's a must have if you take your profession seriously. Choosing a particular naming style, making it brief but clear and being consistent at this will save you alot of debugging time and make collaborating with others easier.

Mastering the 'this' Keyword in JavaScript

Stephanie Obiekezie — Wed, 21 Aug 2024 02:48:00 +0000

The this keyword in JavaScript can be quite tricky if not understood. It's one of those things that even experienced developers find hard to easily grasp but once you do, it can save you alot of time.

In this article, we will see what it is, how it works in different situations and common mistakes you shouldn't fall into when using it.

Understanding `this` in JavaScript

this simply refers to the object that's currently being used in a javascript code. But here’s the tricky part: what this refers to can also change depending on where and how you use it in your code. one might ask "why is that?" Well, this is dynamic in nature =, meaning that - its value is determined when a function is called, not when it's written.

`this` in Global and Function Contexts

When you use this in a global context, it often refers to a global object, which quite makes sense right? So, if you just type this in your browser’s console, it’ll point to the window.

While when used inside a function, it behaves quite differently. For example: if you call a function "myFunction" for instance, this will still point to the global object but if you use the strict mode in Javascript, it will make it undefined inside that function.

Yeah, I know it's quite confusing, just follow along. I will explain better.

`this` in Objects

When you use this inside a method (a function that’s a property of an object), this refers to the object that the method belongs to.

Example:

const myObject = {
    name: 'Alice',
    greet: function() {
        console.log(this.name);
    }
};

myObject.greet(); // Output: 'Alice'

Here, this.name refers to myObject.name, which is 'Alice'.

`this` in Constructors and Classes

Constructors: When you create an object using a constructor function or a class, this refers to the new object being created.

Example:

function Person(name) {
    this.name = name;
}

const person1 = new Person('Bob');
console.log(person1.name); // Output: 'Bob'

In the code, this.name refers to the name property of the new Person object.

Common Mistakes and How to Avoid Them

One common mistake with this is losing its correct value in callbacks or event handlers. For instance, if you pass a method from an object as a callback, this might not refer to the object anymore.

Solution: To avoid this, you can use an arrow function or bind to keep this pointing to the right object.

const myObject = {
    name: 'Eve',
    greet: function() {
        setTimeout(() => {
            console.log(this.name);
        }, 1000);
    }
};

myObject.greet(); // Output: 'Eve'

Conclusion

The this keyword can be a pain in the ass, but all you have to take note is that it changes depending on how and where you choose to call it. To get better at it, use it to practice with loads of examples, and with no time, you will become a pro with it.

Using AI to Covert Image to Functioning Codes in 2024

Stephanie Obiekezie — Wed, 21 Aug 2024 00:31:49 +0000

Gone are those days where we had to work really hard to learn anything in tech. In this era, AI is favoring those who are able to adapt quickly to its continuous advancement. For example; today, you can quickly produce real codes by using AI to convert an image into a functioning code. isn't that magical? who would have thought about that years back?

AI tools like ChatGPT have also been able to help developers with their work issues like hours spent on debugging their codes and producing clean and maintainable codes.

In this article, we will see how you can use ChatGPT to convert an image to a functioning html and css code.

Converting an image to code

To follow along, you can download the image below and follow the prompt we are about to use.

Now, let the magic begin!!

Simply go to chatGPT, after you must have attached the image of your choice, write the prompt: "perfectly convert this image to a functioning html and css code" and send.

Like this:

Now, ChatGPT will do its thing and generate some code for you. Check mine below

Just copy and paste the code to your VS Code tool and test it. Mine was pretty impressive but needed some work. I mean, see what the codes turn out to be:

I won't lie, it still needs some extra work but the layout and structuring was almost done for me. That's going to save me a lot of time compared to me doing it manually.

Well, that's where we will stop for today, like and comment how you are using AI to improve your work life in 2024.

Mastering File Uploads with HTML

Stephanie Obiekezie — Tue, 20 Aug 2024 23:17:06 +0000

File uploads are now a common thing in most websites. Whether you're creating a social network, an online shop, or a blog, allowing users to upload their photo, video or documents just makes your site a little bit interactive and better. In this article, we will learn how to create one, and spice things up by adding extra features that can allow multiple file upload and restrict the kind of file types users are allowed to upload.

Without wasting much time, let's get right into it.

Building a Simple HTML Form

Let's start by enveloping everything in the form tag with our html. It serves as a container that we can now use to insert other information such as the file upload button and other form fields we will be needing from the user.

The best part is when you now include the <input type="file"> element. This is the magic behind the feature that enables your local computer to recognize it's a file or document upload and enables that document modal to open like this:

Here’s a simple code example to achieve this:

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="fileUpload">Select a file:</label>
  <input type="file" id="fileUpload" name="file">
  <input type="submit" value="Upload">
</form>

In this form:

The action tells the form where to send the file (e.g., /upload).
The method is set to post because that’s how files should be sent.
The enctype="multipart/form-data" ensures the file is sent correctly.

Customizing the File Input

let's make it more understanding for users by adding some label to it. Like this:

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="fileUpload">Select a file (PDF, DOC, JPG):</label>
  <input type="file" id="fileUpload" name="file">
  <input type="submit" value="Upload">
</form>

Styling the File Input with Basic CSS

Okay, I know our result is looking quite plain and rough now, so let's add some beauty to it to make it look better and better suited for something users will likely want to interact with.

 #fileUpload {
    border: 2px solid #4CAF50;
    padding: 5px;
    border-radius: 5px;
    cursor: pointer;
  }

  input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

This CSS adds a border and some padding to the file input and styles the submit button to make it more attractive.

Result

Allowing Multiple File Uploads

For cases where users need to upload more than one file at a go, you can achieve this by including the multiple attribute to the file input. Like this:

<input type="file" id="fileUpload" name="file" multiple>

Now, users can select and upload several files at once.

Restricting File Types with the accept Attribute

You can also control what type of files you want your users to be able to upload by simply adding the accept attribute. Like this:

<input type="file" id="fileUpload" name="file" accept=".pdf, .doc, .jpg">

In this case, pdf, doc, and jpg are all accepted and thus, can be uploaded.

Displaying Selected Files

Wouldn't it be nice if you can see what you want to upload before doing so? well, you can but not with only HTML. You will need a little javaScript for that and that's a guide for another day.

But what we can do is let users know that their selected files will be shown after they choose them. Like this:

<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="fileUpload">Select a file (PDF, DOC, JPG):</label>
  <input type="file" id="fileUpload" name="file" multiple>
  <p>Selected files will appear here after selection.</p>
  <input type="submit" value="Upload">
</form>

In Summary

In this guide, we saw how we could upload a file, customize it and also restrict it to accepting only the specified file types we define.

DEV Community: Stephanie Obiekezie

Mastering CSS Naming Conventions: The Key to Debugging Efficiency

Keep It Consistent

Pick a Naming Style That Fits

Be Clear but Brief

Use Prefixes to Stay Organized

Use Hyphens and Underscores Smartly

End Note

Mastering the 'this' Keyword in JavaScript

Understanding this in JavaScript

this in Global and Function Contexts

this in Objects

this in Constructors and Classes

Common Mistakes and How to Avoid Them

Conclusion

Using AI to Covert Image to Functioning Codes in 2024

Converting an image to code

Mastering File Uploads with HTML

Building a Simple HTML Form

Customizing the File Input

Styling the File Input with Basic CSS

Result

Allowing Multiple File Uploads

Restricting File Types with the accept Attribute

Displaying Selected Files

In Summary

Understanding `this` in JavaScript

`this` in Global and Function Contexts

`this` in Objects

`this` in Constructors and Classes