DEV Community: Cecilio Navarro

Arduino Project 05

Cecilio Navarro — Wed, 03 Sep 2025 04:59:39 +0000

Introduction
When starting an Arduino project, I like to ensure that I understand what I am doing. I have been coding for a while, and my courses at CSUB were mostly in C++. Therefore, when I am learning projects in the Arduino Projects Book and coding, I like to not just copy the code but describe what is happening and then attempt to code the solution myself.

Building The Circuit
I start by looking at the schematic view in the book and then the illustration. I try to insert the wires using the grid on the breadboard. They don’t always line up with the picture. For example, in the book the black, red, and white wires are in a different order than the ones that come on the servo provided in the kit. I always double-check that all my wires are in the correct place logically and not just based on the pictures.

The servo motor comes with female connectors, so I added these header pins.

Coding
After completing the circuit and making sure that it was wired correctly, I read through the coding section. I wrote down a quick and messy description of what is happening in the code. I would then use this to program it without looking at the book so that I could learn the syntax to program an Arduino. I only allowed myself to look at the Arduino documentation.

I began to code. After getting stuck for a bit on a section, I referred to the book and covered the rest of the code with a sticky note.

I heard somewhere that before, when screens were smaller and there was no autocomplete, short concise names were important. However, now this was not a necessity, self documenting code became a thing, and long descriptive names were beneficial. I use this as an excuse to have descriptive variable and funtion names. See how I made the variable names longer when writing them out myself.

#include <Servo.h>
Servo myServo;

const int potentiometerPin = A0;
int potentiometerValue;
int angle;

void setup() {
  myServo.attach(9);

  Serial.begin(9600);
}

void loop() {
  int potentiometerValue = myServo.read();
  Serial.println(potentiometerValue);
}

I was stuck for a little bit and then realized that my potentiometerValue does not come from myServo, so I needed to change that. I forgot and referred to the documentation, then changed myServo.read() to analogRead(). Again, I was not looking at the book or using AI.

I ended up with the following code. When I compared it to the original, I noticed that I had written const int instead of int const, which is something I now have engrained in me because of this mistake.

I heard from popular programming YouTuber ThePrimeagen that he doesn’t have all these algorithms memorized line by line. He just remembers the path to them so he can recreate them. This is the approach I take in learning many programming concepts. I memorized what map() did here, and I was able to recall it later. It needed a value and then the upper and lower bounds for the “from” and the “to.” So, from 0 and 1023 to 0 and 179. These may seem like random numbers, but they are derived from the analog signal (1024) and 180 degrees.

#include <Servo.h>
Servo myServo;

const int potentiometerPin = A0;
int potentiometerValue;
int angle;

void setup() {
  myServo.attach(potentiometerPin);

  Serial.begin(9600);
}

void loop() {
  int potentiometerValue = analogRead(potentiometerPin);
  Serial.println(potentiometerValue);
  angle = map(potentiometerValue, 0, 1023, 0, 179);
  myServo.write(angle);
  delay(15);
}

Troubleshooting & Success
When I finished and uploaded the code, nothing moved. I thought I had messed up the wiring somehow. I also checked my serial connection, and it was giving me weird jumps in numbers. I remembered that when I initially connected it again with the new circuit, it still had the old code stored on it, and the servo was jittering. So I loaded the previous program again. It did nothing, so I thought I had broken the motor. Then I loaded the current program again, and it started to work. That managed to refresh the code on the Arduino and it worked with the same code.

Learning About Capacitors
I understood the circuit but not the point of the capacitors in this case. They were new to me, so I researched them. I saw them explained in parallel to water and a storage tank: if flow is cut to the storage tank, the flow from the storage tank outwards still continues. I realized that their purpose here was to remove jitters, since servo motors may go from no power to needing a lot all of a sudden.

I learned that voltage allows us to see the difference between two points. Capacitance is measured in farads, and for circuit boards usually in microfarads. The voltage rating on the capacitor is the maximum voltage the capacitor can handle, and if it exceeds this it may explode.

2 - Making Reusable Sections

Cecilio Navarro — Fri, 29 Aug 2025 01:58:47 +0000

Hero Section

Originally, for the hero section, I chose to make the picture smaller and place the words around it, but the client preferred a full-sized background instead.

I switched to a full-sized dark background to help the title stand out. I also converted the original .heic photos to .webp format to improve website performance, and applied the same optimization to all other photos. I ended up liking this approach as well. I make it a priority to get frequent feedback from clients, so I don’t spend time designing something they might not agree with.

The hero section was set to 80% of the screen height to avoid giving users the “illusion of completeness” — encouraging them to scroll down while leaving a glimpse of the next section at the bottom.

The two sections were built with a grid and justified to the ends. I used a <span> to size the copyright symbol differently from the surrounding text.

Next, I created a simple theme and imported a custom font using Neue Montreal and its mono version. The style follows the elegant Helvetica family.

@theme {
  --color-brand: #A52A2A;
  --color-accent: #FFCA50;
  --color-accent: #FFCA50;
  --color-dark: #141413;
  --color-light: #F1F0E4;

  --font-neue: "NeueMontreal", sans-serif;
  --font-ppneue-mono: "PPNeueMontrealMono", sans-serif;
  ...
}

I started making components for all repeated sections, such as headers. While the page doesn’t switch between light and dark themes, I created black and white versions of every component to suit different background colors.

I built the call-to-action and footer sections. Later, I realized manually adding padding to each section wasn’t efficient, so I created a reusable section component that automatically applied font and background colors.

Call To Action Section

For the call-to-action, I wanted a small “bento box” on the bottom left corner to balance out the email input on the opposite side. It took several iterations.

Even AI-generated attempts failed, so I broke the problem into simple steps. I stopped trying to design with the original content of the boxes and instead used placeholder text.

Once the grid was done, I made the first box span the full column height.

After that, I made sure to center the leftmost box.

I reduced the padding to create a battery-shaped figure.

Then, I made sure the other two boxes were left-justified and added borders.

Finally, I added the icon and realized that I had added a left margin to the component earlier, which caused issues in the beginning. By breaking it into simple steps, I was able to achieve the final design.

Frequently Asked Questions Section

For the FAQ section, I again broke everything into its constituent parts and worked on the look before the logic. I used the standard map() function and put the data into an array of objects.

I had issues with the section closing. The text would erase slowly because of the ease-in-out effect and then snap closed.

I realized I needed to make the answer its own section, spanning the full width at the bottom, and attach the border to that instead of the FAQ question. The fix required animating the height difference, not just the answer itself. I completed it by toggling the grid rows:
isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"

I had the answers sticking out, so I hid them. At first, I tried covering the answers by using a background on the questions, but the last answer leaked out.

I eventually had to remove the background and instead hide the overflow of the answers.

Retro Overlapping Text

I wanted text with an overlapping effect. Since this text was about motion, I wanted to visually convey movement.

I set the first text to relative and then translated the overlapping text to the right. aria-hidden is used for text you don’t want to be read or highlighted.

<h1 className="relative font-bold text-[12rem]">
  <span className="relative text-accent">FUTURE</span>
  <span className="aria-hidden absolute inset-0 text-brand translate-x-2">FUTURE</span>
  <span className="aria-hidden absolute inset-0 text-dark translate-x-4">FUTURE</span>
</h1>

1 - Setting Up A Client Website

Cecilio Navarro — Thu, 28 Aug 2025 22:58:34 +0000

Client
I am making a website for a mobile detailing business. I start with a simple roadmap when making a website for a client. First, I talk with the client about what they want. Then, I make a list of questions about their business. This is to create the content for the website, and I place it in my notes or in Google Docs. I then interview the business owner and write down the answers to all my questions. This interview allows me to form the paragraphs for the different sections and pages.

I learned from The Website Architect to only begin forming the layout and design after getting the content. This allows you to make the design custom-fit to the content.

Design And Ideation
I make a mood board on Figma to gather inspiration for the website. I find websites everywhere I can, like from Awwwards.

My wireframing was done on my iPad, and the basic components were created there with the document from earlier. The iPad gives me the ability to quickly edit my big ideas, like changing the layout, without having to gather content and then erase it. I move everything to Figma once I have a feel for the website.

I form the theme according to the business. This is a site for a mobile detailing business, so I make it car- and retro-themed with checkered icons and colors.

Setup
When I move on to coding, I follow what I call "maps," and these guide me through the repetitive procedures of each project. I first make the repository and copy the first three lines GitHub provides when making a new repo:

echo "# 05-garcia-auto-detailing" >> README.md
git init
git add README.md

I paste them into the terminal, which initializes the project on my local computer. Next, I copy and paste the next four, making my first commit:

git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/cecilionavarro/05-garcia-auto-detailing.git
git push -u origin main

I chose Vite to start my site and paired it with Tailwind CSS. I originally went with ShadCN to learn it, but since ShadCN uses Tailwind, I decided to get a strong foundation in Tailwind first.

I used the documentation to install Tailwind CSS with Vite and followed the instructions. I erased everything from my index.css and added @import "tailwindcss"; at the top. Here is where I would build my themes and add custom fonts.

I got stuck when making variables for Tailwind the old way, by using a tailwind.config file, but with Tailwind v4 all we have to do is:

@theme {
  --color-brand: #A52A2A;
  --font-neue: "NeueMontreal", sans-serif;
  ...
}

Once done with installing Tailwind, I installed React Router DOM for my navigation. This makes Single Page Applications and makes the website pages load faster by not resetting the entire page.

Small Details
Sometimes we don’t take the time to figure out simple things. When I was first learning to code, I thought ternary operators were difficult, and seeing them made me think a piece of code was complex—until I Googled it and found the structure was just a one-line if-else statement.

While setting up this project, I realized something obvious that I had not paid attention to: copy path and copy relative path. I thought about it for two seconds and realized that the relative path is relative to the original workspace folder, while copy path copies your entire path from the root folder. I normally would click either one when importing assets, until I thought about it for a second.

Sometimes we don’t take the time to think through very obvious things, and perhaps that “laziness” is comparable to the saying about how fear is a mile wide and an inch deep.

1 - Building a Worship Resource Library

Cecilio Navarro — Thu, 26 Jun 2025 23:20:30 +0000

Introduction
My church has used different methods for storing our music resources. Right now, we are using OneDrive with different types of formats for the chords. The brass has their notes scattered, with individual notes on Apple Notes and ad hoc handwritten notes on Keynote.

I suggested the idea to improve our flow through the project I am presenting today. I have built the minimum viable product and have shown it to our music director. She approved it and said the church would like to invest in it. The following describes just that — the MVP (Minimum Viable Product) built with JavaScript, EJS, and MongoDB.

I brainstormed and wrote down the requirements for my project to start. The main ones are: storing our chords and wind notes here at a centralized location and having tags and labels to quickly and accurately find our songs. Afterward, I sketched out the low-fidelity wireframe. I started off with the Waterfall Model but switched to the Agile Methodology, so I made a Jira account. I like the approach of tackling the basic functionality first and then making incremental improvements. This would help me cut out some of the fogginess from the "I don't know what I don't know" stage. Without this MVP, there may be requirements or features you write down that in practice aren't needed — or requirements you missed.

Main Feature
The most important feature is adding a song. Adding a song will contain all the relevant information, like the title, key, chords, wind notes, and tags. In the future: transposition, author, group, and personal notes.

Second Most Important Feature
The second most important feature is the 'tags'. They help filter out songs by their properties. For example, if a worship leader is making a setlist and would like a song where the brass has an 'ending' in order to smoothen the transition to another song, they can do so by checking that tag. If they make an altar call, they can select 'ministración' (ministry in Spanish) to find appropriate songs that fit what the moment calls for.

Thoughts
I don't know how I will handle the different instances of songs. It makes the most sense to have one source of truth and then transpose to all other keys from it. I have the idea of admins being able to turn off and on the different keys of a song. I would then have to think of how to handle the source of truth there.

I am still determining how to do things and will start asking more of the right questions along the way. I have now begun the backend and a basic frontend.

The next step is authentication and JWT. Let's get started!