DEV Community: likaiZnazis

Red LED blinking does not stay constant on ESP32

likaiZnazis — Wed, 02 Apr 2025 23:17:09 +0000

ESP32 red light blinking

likaiZnazis ・ Apr 2

ESP32 red light blinking

likaiZnazis — Wed, 02 Apr 2025 23:15:33 +0000

This might be a little lengthy post since I saw a couple of posts talking about this problem but I couldn't find a solution on the forms or other places, so i thought I could share my way of fixing this issue. So if you don't have a ESP32 you might go along with your day. This post is made that you can start interacting with esp32 as fast as possible. It does not go into detail why things are the way they are, could be cool to know but I'm new to this. If you are facing any other problems let me know.

The ESP32 that I have can be bought - https://www.amazon.co.uk/AZDelivery-NodeMCU-CP2102-Development-Parent/dp/B07ZZFXRTY?th=1

Problems that I faced

When I plugged my USB cable inside ESP32 I saw the red light blink a couple of times and then it went silent. At first I did not think much of it since I heard the device connect to my computer USB connected sound. Also there was a new device that showed up on Device Manager. What made me think that it is a faulty product is that the red LED did not stay on. Many tutorials show that when plugging the USB red light was constant and did not blink. TLDR: it is okay for the red light to blink. Also my ESP32 did not connect when using Arduino IDE.

First things first - install drivers so that your computer can understand what device is being connected. The driver for my ESP32 could be found on this resource - https://www.silabs.com/developer-tools/usb-to-uart-bridge-vcp-drivers?tab=downloads. The driver might be different for your ESP32. Keep in mind we need driver so that our computer inside Device manager will put the ESP32 device under PORTS(COM & LPT).

Now that ESP32 is under PORTS(COM & LPT) let's start interacting with the board. The first thing that I found is that you can hold -> BOOT -> press RST -> hold BOOT for couple of more seconds. This made that my ESP32 starts blinking. Don't know if this step is necceseery but I did it.

Then I followed this tutorial - https://docs.espressif.com/projects/esp-idf/en/stable/esp32/get-started/index.html#manual-installation. Choose your platform.

The program setup might take a couple of minutes. There should open up cmd or PowerShell inside directory - C:\Espressif\frameworks\esp-idf-v5.4.1>. Navigate to directory - C:\Espressif\frameworks\esp-idf-v5.4.1\examples\get-started\hello_world> here are some sample projects that you can try out. Then run command - idf.py build. If you did not get any errors you can now run command - idf.py -p COM-yourCOM flash. Then run the command - idf.py -p COM5 monitor. You should see Hello world! appear inside the console.

Drop down language button

likaiZnazis — Mon, 17 Feb 2025 12:15:02 +0000

Hello. Today I tried to create a language button that has a drop down with other languages. I wanted the button to be round and not move other objects that are on the page. I didn't really succeed with this task.
I created a drop down button but not the way I wanted it to work. However wanted to share this maybe someone knows how you can achieve this. Further I will explain in more detail what I wanted to achieve and what problems I ran into.

Idea

I wanted to create a round button. When the round button is clicked a smooth sliding down transition should happen with other languages. Sounds pretty simple. Button that i made:

Button that i wanted:

It should have filled the middle with the background color. This was not achievable if I wanted that the expanded button wouldn't move any elements.

There were two main problems that I ran into. It's either I don't make the other languages position absolute and then other elements move around the screen when language options appear or make something like what i made there.

How I approached the problem

HTML

<header>
        <nav>
          <div class="company-name">ZS-DZINTRAS</div>

          <ul class="navigation-links">
            <li><a href="#">Flowers</a></li>
            <li><a href="#">Bouquets</a></li>
            <li><a href="#">Contact</a></li>
            <li class="language-box">
              <div class="main-langugage">
                <span>LV</span>
                <svg width="20" height="20" class="main-langugage-arrow">
                  <use
                    href="/src/Images/illustations.svg#icon-alert-triangle"
                  ></use>
                </svg>
              </div>
              <ul class="other-langague">
                <li><span>ENG</span></li>
              </ul>
            </li>
          </ul>
        </nav>
      </header>

There is pretty much a parent element - (language-box). Inside the parent element there are two child elements: one that shows the main language and the other that shows other languages - (main-langugage,other-langague).

CSS

  .language-box {
    position: relative;
    background-color: $background;
    color: $text;
    justify-content: center;
    align-items: center;
    border-radius: 2rem;
    font-family: "Lato", sans-serif;
    font-size: 105%;
    letter-spacing: 0.07rem;
    font-weight: 500;
  }
  .main-langugage {
    padding: 0.6rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0.2rem;
    &-arrow {
      cursor: pointer;
      transition: transform 0.3s ease-in-out;
      transform: rotate(180deg);
      color: $primary;
    }
  }
  .other-langague {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: inherit;
    list-style: none;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    padding: 0;
    transform: translateY(100%); 
    border-radius: 2rem;
  }
  .language-box.active {
    .other-langague {
      max-height: 150px;
      padding: 0.5rem;
    }
  }
  .language-box.active .main-langugage-arrow {
    transform: rotate(0deg);//this rotates the arrow
  }
}

The main thing that makes that other elements not move around when other languages are expanded - we make the parent element relative so that we can place other languages absolute to that parent element.
3iple dot (...) is other code that is not that important for that section.

 .language-box {
    position: relative;
    ...
}
.other-langague {
    position: absolute;
    left: 0;
    bottom: 0;
    ...
}

This is cool but without a smooth drop down transition to make this more appealing. To make a drop down menu that does not fade or appear instantly in, we need to play with height and other spacing properties. Also we need to make the overflow hidden that the language options are not showing because it has position absolute and placed at the bottom of the parent element.

Before we can manipulate these properties that would expand other languages. First we need to set a active class to the parent element so that we know other languages should appear. You can probably do this with CSS or a bunch of other ways, but I use JS.

Javascript

document
  .querySelector(".main-langugage-arrow")
  .addEventListener("click", function () {
    const languageButtonEl = document.querySelector(".language-box");
    languageButtonEl.classList.toggle("active");
  });

The javascirpt is pretty simple. All that is being done here that we are applying a active class when the language arrow is clicked.

When this toggles the active class now we need to look at this part of the CSS:

 .other-langague {
    max-height: 0;
    padding:0;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    padding: 0;
    transform: translateY(100%); 
    border-radius: 2rem;
    ...
  }
  .language-box.active {
    .other-langague {
      max-height: 150px;
      padding: 0.5rem;
      overflow: visible; //not necessary but there
    }
  }
  .language-box.active .main-langugage-arrow {
    transform: rotate(0deg);//this just rotates the arrow
  }

So when the active class is added, other languages grow in size and space around the box (max-heihgt and padding). Also it moves down 100% Y axes so that it is not on top of it. This could also be achieved if we positioned the element 100% from top. Then the transfromY(100%) would not be needed but I did it this way. Like so:

.other-language{position: absolute; top:100%;...}

Hope I gave you some ideas on how to make these types of buttons if you didn't know. Not saying that is is the correct or the best way to do it. If you have any ideas how to make a button that I wanted or even some suggestions for the button that I have. Leave a comment hinting to something or a article that tried to do something like that. It would help me a lot. Have a nice day!

What happens when you press enter in a browsers search bar?

likaiZnazis — Mon, 10 Feb 2025 17:54:12 +0000

Recently I started to make websites but didn't really know how fundamentally the browser works or talks to the server. So thought I could make a post about it.

First there are a couple of terms that everyone should familiarize themselves with:

Web page - document that can be displayed inside a browser. These are often called "pages" and written in HTML.
Website - collection of "pages" that are grouped together into a single resource. There are links that are connecting these "pages".
Web server - computer that holds the resources associated with the website.
Search engine - service that allows you to find all kinds of websites.
Browser - software that request, retrieves and displays web pages from the internet.

These terms might be simple and you already know them. However there could be a misconception between a search engine and a browser also web server and a website. For example when we open a browser some people might think that it's a search engine or when a web server is not responding they refer to it as the website is not working.

open up FireFox
The first thing there is already a new tab. Inside the search bar where the website URL goes there is some placeholder text -

As we can see that it offers us two options:

Search for something using Google (search engine).
Enter a address.

Let's enter a address. - example.com

First of all how does it know where it could find this address (example.com) domain? This is where DNS comes into play. DNS is short for Domain Name System. In short it maps domain names (example.com) with IP addresses. So your browser essentially requests to a DNS server - "What is the IP address of this domain?". Then if it locates that IP address to the requested domain name then returns it to the browser. DNS involves a lot more steps between.

When browser retrieves this IP address it sends a HTTP request to that IP address and asks if it could get a copy of the website to the browser. This IP address is a web server where the website resources are located. All of these messages between browser and the web server are using TCP/IP.

If the website approves this request it will respond to the browsers request with a "200 OK" response message. After this response message it will start sending the website files as a series of chunks or so called packets.

Then the browser will put these packets together and show the web page. In some sites they can have dynamic content so based on your actions more requests could be made and more packets put together to show a different page or something more to a page.

My analogy - Let's say you want to wear a green T-shirt today. You can't find it anywhere. You ask your mother - "Do we have a green T-shirt"? She responds - "your brother has one". You go to your brother and ask - "could I wear your green T-shirt." If you have a good relationship with your brother he will give it to you :). In this case you are the browser, your mother is the DNS server. Your brother is the web server. You are making a request to your brother and getting a response.

This might not be the best analogy :D. Don't know how DNS works completely. From this analogy could mean that you are talking in one language to your mother and in a another to your brother.
Let me hear some of your analogies! Have heard about a road where you are going to a store.

Next topics I could write about: HTTP requests and responses, TCP/IP, packets, URL, dynamic websites. Later on will write more about DNS seemed a bit complicated.