DEV Community: Duncan Teege

CSS Specificity Explained

Duncan Teege — Fri, 17 Mar 2023 16:42:02 +0000

If you've ever run into weird, "unexplainable" styling issues, there's a high chance it was something regarding specificity. Specifi-what-ty? Specificity. Let's dive into it.

Note: For the entirety of this tutorial, we will use CSS. If you use something else, I'm assuming you can translate this article into your preferred language of styling yourself. If not, let me know by asking your question in the comment or emailing me if you are reading this on my own website.

What is specificity?

Let's be specific about it. Jokes aside, it can be quite difficult to understand at first. Specificity is a calculation being made to determine which CSS rules should be applied. This doesn't make it a lot clearer, so let's look at the selectors we use in CSS to define our styles: ID, CLASS, and TYPE. Notice the order of these, as it is important to understand specificity. First, let's refresh and look at examples of each of these selectors.

ID

This one is relatively simple. It's used to style something that shouldn't be reused throughout the entire application. It's extremely specific. An example of this would be #gallery. The HTML would be <div id="gallery">...</div>.

CLASS

The first example of this type of selector would be the obvious class selector .blogpost. You would use a class selector to define something a little less specific, something that might be used in multiple places or at multiple times. In HTML, this would be defined as <div class="blogpost">...</div>. Another example of what would fall under the class column of specificity are attribute selectors. These are selectors that target based on the attributes of an element. For example, [type="checkbox"]. Another example are pseudo-class selectors like :hover.

TYPE

Type selectors are selectors where you directly refer to the type of HTML element. Think of the paragraph, h1, or even table elements.

Okay... let's talk specificity now

We just looked at examples of selectors we can use while styling. The specific selector we use is important as it determines what the specificity is. Specificity is basically a little list with counters. Each type of selector (ID, CLASS, or TYPE) has its own column in the list. If we would write it out, we could say it like this: "ID - CLASS - TYPE". The CSS styling with the highest numbers, starting from the left, will get applied. This is all quite dry and might be hard to understand, so let's look at some examples.

Examples to start with

Let's say we define the following CSS selectors:

#gallery {
... styling
}

This would have a specificity of "1-0-0". Why? Well, #gallery is an ID selector, so that value will be increased to 1. Let's look at another example.

.blogpost .heading {
... styling
}

What do you think? I see two classes... classes are in the middle column. If you thought this would have a specificity of "0-2-0", you would be correct! Let's look at one more relatively simple example.

p {
... styling
}

Just a simple type selector. This applies to all paragraphs, so it's not that specific. What would the calculation for this be? If you thought "0-0-1", you're correct!

Okay, let's look at one more "simple" example before we dive head first into the more difficult calculations to see which styling would be applied.

p.blue {
...styling
}

What do you think the specificity is here? I think you got this by now... because it's "0-1-1"!

Intermediate examples

We covered the basics so now let's look at some more realistic examples of how we would have written our rule sets and see what styling would be applied in the end. This can get quite difficult the more selectors you have, but you got this!

header h1#title {
color: red
}


header #title {
color: blue
}

So, which one would get applied? Try it yourself and see if you're right. Here's a codepen to see the result. SPOILER ALERT: The specificity is "1-0-2" vs. "1-0-1". So the header h1#title styling would be applied.

This is pretty fun; let's look at one more example before wrapping it up.

fieldset div label #max {
color: red;
}


#max {
color: blue;
}

So, would the text be red or blue? I'm not going to give you the answer this time... I will give you the link to a codepen, though! But before clicking on it and seeing the result, try to figure it out yourself! This is the codepen for the example above.

Conclusion

Specificity is quite difficult once you have loads of selectors in your production application. We didn't cover all the different types of examples, but if you follow the explanation given, you should get very far! There are certain tools out there that calculate the specificity for you, but I recommend getting the hang of this yourself. Practice it a bit more if you need to. It's definitely a decent skill to have in your toolbelt!

Did you enjoy this article and want to read more from me? Follow me on dev.to or subscribe to my newsletter at my website!

How to create a free email subscription form in NextJS, Netlify and MailerLite

Duncan Teege — Wed, 08 Mar 2023 21:53:42 +0000

For the past months I have thought multiple times about starting my own blog and creating content for social media. Something which always bothered me was the fact that I did not know how to create an emailing list even though I knew having one is very valuable! I will share with you the end result of what I am currently using on my blog, duncanteege.com

Important money saving tip

There are many ways to go about creating an email subscription list using a form. One of those ways is by using the functionality of writing your own endpoints in NextJS and using that to communicate to an email service like MailerLite. The downside is that this will make use of Node because of you defining an API route. This in itself definitely is not a downside, however having to host this might be a potential downside as it could bring extra costs. I first chose to go this route and hosted my website on DigitalOcean on an app platform. They gave me estimated costs of $5 a month just for hosting a static website with an endpoint! I thought “Nah, gotta be a different way right?”... and there is!

Netlify Forms

It’s free! Netlify proudly presents the Netlify Forms functionality. They allow you up to 100 form submissions per site per month in their free “starter” tier. This is very generous and this is one of the many things why I love Netlify. (I am not sponsored, just amazed at what they offer 🙂) It must be hard to implement the form if it is free… right?

Nope. It is ridiculously easy. All you have to do is add a simple attribute netlify to your form. Yes it is that simple! What happens is that Netlify bots find the attribute by inspecting the HTML of your site before it is published. This means there is no other API call needed! Something to note is that using Netlify Forms means you have to host your website on Netlify.

What does the form look like in NextJS

Let’s get dirty with some code.

<form
  name="subscribe"
  method="POST"
  data-netlify="true"
  onSubmit={handleSubmit}
>
  <div className={`${styles.formContainer}`}>
    <div className={`${styles.inputGroup}`}>
      <label htmlFor="name"></label>
      <input
        type="text"
        id="name"
        name="name"
        value={subscriberName}
        required
        placeholder="What is your first name?"
        className={`${styles.input}`}
        onChange={(e) => setSubscriberName(e.target.value)}
      />
    </div>
    <div className={`${styles.inputContainer}`}>
      <label htmlFor="email"></label>
      <input
        type="email"
        id="email"
        name="email"
        required
        value={subscriberEmail}
        placeholder="On what email can I reach you?"
        className={`${styles.input}`}
        onChange={(e) => setSubscriberEmail(e.target.value)}
      />
    </div>
    <SubmitButton text="Subscribe" />
  </div>
</form>

This is the form I use on my blog duncanteege.com. Note how there’s just a simple data attribute to notify Netlify bots that I want to make use of Netlify Forms? Besides that, the form just looks like a normal HTML form in React.

Do not reload or navigate to a new page

Standard behaviour of using Netlify Forms is that it navigates you to a different page when submitting. I did not want this on my website. I wanted users to submit and then see the subscribe block change, but not a whole page refresh. Luckily they had a very nice example in their documentation where they explain how to use fetch to POST to the website so you could change based on the response of the request. This code looks like this:

const handleSubmit = async (e: any) => {
    e.preventDefault();

    const form = e.target;
    const formData = new FormData(form);
    try {
      await fetch("/", {
        method: "POST",
        headers: { "Content-Type": "application/x-www-form-urlencoded" },
        body: new URLSearchParams(formData as any).toString(),
      });
      setFormState(FormState.SUCCESS);
    } catch (error) {
      setFormState(FormState.ERROR);
      console.error(error);
    }
  };

It is not super exciting, but this cancels the page refresh and enables me to act on state changes based on the response of the request! This code runs on the onSubmit of my form. I handle the form status in my own state so I can act upon changes of this state.

What to do in MailerLite

There are many email services out there. I did some research and it looked like MailerLite was the best option for me. It offered, just like Netlify, a very generous free tier. It is free for up to 1000 subscribers. Next to this, you can send up to 12.000 emails a month in the free tier! That’s… like 12.000 emails a month! Holy smokes.

Before we look at how to hook it all together, let us prepare the necessary keys we need to create a successful request to our email service. I will show you what you need to do in MailerLite, but feel free to skip the next paragraph if you do not use MailerLite.

In MailerLite there is a menu item called “Integrations”. When you click on this item, you will see a page with possible integrations you could use with MailerLite. Quite an impressive list, but we’re interested in the “API” functionality as we want to call the API from our Netlify functions. More about Netlify functions later. Click on “use” and generate an API token. Make sure to save this token (but don’t commit it to your repo, store it in your .env file). Something you should also take note of is the header they want you to send:

Content-Type: application/json
Accept: application/json

And the base url is https://connect.mailerlite.com/

Cool, but how do we actually make use of this api? This is where Netlify Functions comes in clutch.

Using Netlify Functions

So we use Netlify Forms to submit our forms. Our submits end up in Netlify form submissions. We could manually type these submissions into MailerLite… but we’re developers right? Manual work is not for us. Luckily Netlify also offers Netlify Functions! Again Netlify is generous by offering 125.000 invocations per month in the “starter” tier. I mean… what? That’s an insane amount. But how do we use it with our form submissions?

This sounds like we should listen to some kind of event or trigger. If we look at the documentation, it states that there are a couple of events we could listen to… including submission-created. Hold up! That’s what we need! So how do we use this?

Netlify wants you to create a specific folder for serverless functions. This folder lives in the root level of your project, the same level as src if you are also doing this in NextJS. This folder is called netlify. In this folder you create another folder called functions. This is where your serverless functions will live. In order to listen to the submission-created event, we create a file called submission-created.ts (to use TypeScript) in the functions folder. In this folder they expect an async function called handler. In this function you can get the body of the POST request from the form and handle it the way you need it to handle. This is what the handler could look like.

const axios = require("axios");

const API_KEY = process.env.MAILERLITE_PRODUCTION_API_KEY;
const BASE_URL = process.env.MAILERLITE_PRODUCTION_BASE_API_URL;
const GROUP_ID = process.env.MAILERLITE_PRODUCTION_NEWSLETTER_GROUP_ID;


async function handler(event: any) {
  if (!event.body) {
    return;
  }
  const { email, name } = JSON.parse(event.body).payload;
  const url = `${BASE_URL}/subscribers`;


  const data = {
    email: email,
    fields: {
      name: name,
    },
    groups: [`${GROUP_ID}`],
  };


  const options = {
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${API_KEY}`,
    },
  };


  try {
    await axios.post(url, data, options);
    return {
      statusCode: 201,
      body: JSON.stringify({
        message: "Subscriber successfully created and added to group",
      }),
    };
  } catch (error: any) {
    console.log(error);
    return {
      statusCode: 500,
      body: JSON.stringify(error),
    };
  }
}

export { handler };

Note: as you can see I make use of environment variables. These environment variables should be added to your website in Netlify to make sure that the handler works. You can use environment variables in a .env file. They are defined like this:

MAILERLITE_PRODUCTION_API_KEY = “your-api-key-here”
MAILERLITE_PRODUCTION_BASE_API_URL = https://connect.mailerlite.com/api
MAILERLITE_PRODUCTION_NEWSLETTER_GROUP_ID = “your-group-id-here”

In the code snippet above of the handler you can also see I create a data object with all the data I want to send to MailerLite. Since I also directly want to add the new subscribers to a specific newsletter group, I add that to my data object as well. It is important to remember that in order for the serverless function to work, the project actually needs to be deployed as well.

Summary

This turned out to be quite a long blog post, but all in all it is relatively easy to set up. There are a couple of steps you need to take in order to successfully create your own form without paying for a Node server with an API route if you are just starting out. Netlify offers a lot of features and we made use of the very generous starter tier of their plans! Oh and… I’m not sponsored by Netlify or MailerLite. Just a big fan of their services.

If this post helped you and you want more of these posts, consider subscribing to my newsletter! I'll share quality content once a month, no spam.

Why I am building in public

Duncan Teege — Wed, 08 Mar 2023 18:59:00 +0000

Before you read the entire blog post, I want you to know that this is mostly a brain dump. Alright, let’s get into it. I’ve been talking to my friends about building my own blog and using it as my own learning platform to dive into new challenges head first. While doing this, I want to share my thoughts, learnings and adventure in said blog posts. But… why would anyone be vulnerable and share their progress to the world?

Well, for me there are many reasons. The first thing is that it’s a personal learning goal for me to stop waiting around until things are perfect before it can be shared. What is perfect anyways? Maybe that’s worth another blog post. The thing is that I tried creating projects perfectly. It had to start with a perfect schedule. It had to have a specific goal. It had to have absolutely zero bugs whatsoever. If you are familiar with programming, we all know that bug free code is something we all wish to achieve or even see in real life, but it’s a myth. Nothing can be perfect and neither will my blog (or even this blog post) be! I have to deal with this imperfect thing in my own way and one of those ways is writing this!

Next to this, building in public allows for instant communication regarding the subjects that are being shared. If I’m writing a blog post on a particular subject and someone else has a different view on it, it can be discussed. This is a very interesting thing to me because it also allows a community to be built around the subjects I’m talking about. Let’s take the blogpost I wrote about how I built my own blog. If someone took a different approach for building their blog and wants to share that, I’d totally encourage that! I love hearing about other people’s procedures and it almost always has a hidden lesson in it somewhere for you to take along.

Another thing is that I’m planning to also be active on several social media accounts. By actively sharing my learnings on my own website, I always have a place to direct people too. I already mentioned the community part, but building a community is something I aspire to do as well. I think it would be a lot of fun to help each other get better at programming and build awesome things (in public!). If you want to get updated on my latest blogpost, feel free to subscribe to my newsletter. I send this email monthly and it consists of a couple blog post which you might find interesting. When I start posting videos on social media, I'll make sure that these will be included in the newsletter as well!

By writing about my process and my goals (alongside of the many programming / development blog posts), I’m hoping to inspire those who’ve been waiting on the sidelines for too long too. Those who are afraid of taking steps for the sake of failing, being too successful (yes I’ve said that I'm afraid of it being too successful too!) or just the unknown in general. Let’s start doing what we want to do and start doing it now. I’m building my blog in public and writing about my progress. Why? Because starting is already difficult… but starting with an audience looking at what you’re doing? Now you’re committed and you have the ability to improve because of feedback!

However let's not get ahead of ourselves. The best thing about starting is that you've just taken the hardest step. The only thing you need to do now is... keep going at it! As long as you're having fun, I don't think continuing will be very difficult.

That's it for now. I will be writing a lot more posts and I can't wait to publish my next articles, but for now... feel free to view my website!