DEV Community: Uzoma Nwanne

How to resolve 'yaml: found character that cannot start any token'

Uzoma Nwanne — Fri, 25 Oct 2024 16:22:02 +0000

Today, I was trying to run serverless, an npm package that allows us to run AWS serverless function on our local machine. After setting it up and executing the command, it started successfully but ended up showing the error message 'yaml: found character that cannot start any token'.
I did a lot of things to resolve this issue. However, all was to no avail until I had a look at the .yml file associated with serverless. The file was serverless.yml in my case.

SOLUTION

I now had to remove all the indentations to be sure they were not indentated using tabs and this fixed the issue in my case.
In case, you see this error, checking the .yml file and ensuring the indentation is done using space characters might be the fix you are looking for.

Happy coding.

What I learnt creating a custom File Upload Button

Uzoma Nwanne — Sat, 01 Jul 2023 15:57:50 +0000

In handling your form, not all the data will be in the form of a string. You might need to send data such as images in various file formats and even multimedia files to the backend and that is where the file upload button comes in handy.
The regular file upload button does the job but the challenge is that it tends to disconnect from the UI and this can be a quite a challenge.
The code snippet shows a typical file upload button styled with tailwindCSS

<div className="border w-full border-[#ADADAD] rounded-lg">
        <input
            type="file"
            placeholder="choose image"
            className="w-full h-full"
            onChange={handleImage}
            accept="image/png, image/jpg, image/gif, image/jpeg"
          />
        </div>

From the image, the file upload button is just bland and does not go with the theme of the UI.

To design a custom file upload button we need to do the following:

Make the container div tag of the file upload component to have a relative positioning. The essence of this is so that we can apply absolute positioning to the file upload button with reference to its containing div.
Apply an absolute positioning to the file upload button.
Style the file upload button by adjusting its width and height to covers the entire div component.
Add an opacity of 0 to the file upload button so that the file is not visible but is present on the UI. 5.Add a span tag and a regular button with the appropriate styling you need. This is what is now visible on your UI.
So this creates an illusion to the user that the styled button is what is doing the file upload work whereas in the real sense, the traditional file upload button is still doing its work.

The image below shows how the new file upload UI will look like

The code snippet below shows the code for the custom file upload UI.

<div className="relative border w-full border-[#ADADAD] rounded-lg  mt-3 mb-6 h-12">
          <input
            type="file"
            placeholder="choose image"
            className="opacity-0 absolute top-0 left-0 w-full h-full"
            onChange={handleImage}
            accept="image/png, image/jpg, image/gif, image/jpeg"
          />
          <span
            className=" text-center w-[70%] inline-block"
            name="file-text"
            id="file-text"
          >
            {fileName}
          </span>
          <button
            type="button"
            name="attach-button"
            id="attach-button"
            className="w-[30%] h-full border bg-[#2F63AA] text-white cursor-pointer font-roboto sm:text-[18px]"
          >
            Attach File
          </button>
        </div>

One interesting experience I had is that an element with absolute positioning always stays on top no matter the z-index value of the elements around it. I also did not discuss the react code responsible for making the file upload button interactive as I wish to restrict myself to the Html and CSS.

Congrats, you now have a custom file upload button.

The Broken Window Theory

Uzoma Nwanne — Tue, 06 Dec 2022 11:12:08 +0000

The Broken Window Theory suggests that neglected urban alleys encourage crimes. Most dilapidated buildings in urban alleys start with a small neglect which encourages other persons to gradually and unknowingly aid in vandalizing the building because the owners have given the impression that they do not care.

As developers, this theory is applicable to our work. Small neglects that you should have corrected initially encourage further neglects from you and your team members and before you know it, you have a heap of messed up code that should have been avoided.

So as you code, make conscious efforts from the beginning to comment on your code, and use proper naming conventions that make sense. If you find yourself copying a segment of code more than twice, you should consider refactoring that code. Ensure that your classes are not tightly coupled.

What other practices can we adopt to ensure we have quality code? I look forward to getting more suggestions.

Crown Clothing Web Store

Uzoma Nwanne — Fri, 07 Oct 2022 10:02:16 +0000

Hey, I created this frontend for an ecommerce shop using React JS.

Being able to create and deploy this web application on Netlify is quite a milestone for me. This is because I was used to working in Java and PHP and learnt React quite recently.

I made use of function components, styled-components and sass, contexts, reducers, React Routes and several other React Hooks.

For the authentication, Google Firebase was used while firestore was used as the NoSQL database.

In the coming weeks, I hope to add a Node Backend for orders and payment processing and then consume them using my Front End Application.

I also hope to add another Frontend Web Application for store administration.

You can view the application here

I would sincerely love to get your feedbacks on this project.