DEV Community

Sid Saythongphet
Sid Saythongphet

Posted on

1 3

First Project

A month ago I started on an endeavor, to become a Software Engineer. I had no experience in coding before making this decision, but the idea had always intrigued me. Little did I know, this was going to be quite the knowledge overload! However, after the last four weeks, and still knowing I have a long way to go, I feel like I can get a hang of this!

I began this process by joining the Flatiron Flex Software Engineer Bootcamp in mid December, where we have been mainly focused on JavaScript for this first phase. Looking back, I had no idea what I was getting into. Functions, arrays, objects, and methods had no context to me. The complexity of running an application began to unfold.

For my first project, I created a single-page website for journaling. Now with this journaling application, I wanted to take into consideration the Two Minute Rule, which I became familiarized with after reading "Atomic Habits" by James Clear. With this rule stating a new habit shouldn't take more than 2 minutes to do, this website takes that into account and binds you to journal for only a few short minutes.

What originally started out as an interactive page that would include a timer, text input, and a collection of past entries, became a far more complex puzzle that I thoroughly enjoyed solving.

Screenshot of journal page of project

Screenshot of entries page of project

It amazed me how many different ways the code could be constructed to build a functioning webpage. As I continued to work on it, I found different ways to write a code to eliminate the redundancy. I particularly became fond of the use of functions to reduce repetition. In the beginning, for example, I was doing things such as:

const secOne = document.createElement('section')
secOne.id = 'section-one'
secOne.className = 'col s12'
const secTwo = document.createElement('section')
secTwo.id = 'section-two'
secTwo.className = 'col s12'
const secThree = document.createElement('section')
secThree.id = 'section-three'
secThree.className = 'col s12'
Enter fullscreen mode Exit fullscreen mode

This process became time consuming, but was easily fixed by making a function that took in some arguments!

const createSection = (id, className) => {
    const section = document.createElement('section')
    section.id = id
    section.className = className
    return section
}

const secOne = createSection('section-one', 'col s12')
const secTwo = createSection('section-two', 'col s12')
const secThree = createSection('section-three', 'col s12')
Enter fullscreen mode Exit fullscreen mode

This helped tremendously to clean my code and I know there may be even better ways to refactor the code for simplicity, but it was a really good feeling to know all the learning from the last month was starting to click.

Once I knew I was getting more comfortable working with functions and arguments, the project process continued faster than before. I began to try different ways of writing my existing code. It became even more interesting to refactor the code than it was to write it the first time!

Now that I am at a point that I believe my first project is complete, I am eager to work on my next! The future is looking bright for this new adventure I am on and hope to soak up as much knowledge I can!

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay