Jonelle Noelani Yacapin
Certified Sommelier and Flatiron School Software Engineering Grad


Image for post
Image for post
Photo by Sean Stratton on Unsplash

Not going to lie, I don’t remember learning a whole lot of CSS (Cascading Style Sheets) in the flurry of Ruby and JavaScript at Flatiron School. Maybe the CSS files were available for me to look at in some labs if I wanted to see what was under the hood. In any case, we were given a quick rundown of CSS before jumping into our JavaScript final projects, as well as a quick rundown of bootstrap.

My project was functional but the CSS was definitely lacking. I was able to add background colors and fonts; and kind of move things…

Image for post
Image for post
CI/CD chart courtesy of XenonStack

I’m a new Software Engineer on the quest for a job. So far, I’ve come across several languages that are repeatedly listed: JavaScript, TypeScript, Python, Go, Ruby, Java, C++, C# etc.

And then there are frameworks: React.js, Angular, Bootstrap, jQuery, Apache Spark etc.

And more qualifications to be familiar with: Node.js, AWS and cloud computing, SCRUM, Kubernetes etc.

It makes job hunting equal parts daunting yet exciting as I figure out which direction I want to head in my career.

Then, there is CI/CD. I have no idea what this stands for; I can’t even guess. …

Image for post
Image for post
Task Lister Lite in action

Now that I have a couple projects under my belt I decided to revisit an old vanilla JavaScript lab that I initially struggled with. The first challenge was understanding my code that I haven’t touched in awhile and deciphering my notes and bits and pieces of trials and errors.

I reorganized everything and made progress. It felt good to realize that I haven’t completely forgotten everything I learned in my time at Flatiron.

Then, the final challenge. The syntax needed to delete a specific list item from an unordered list based on the ‘click’ event of a button attached (appended)…

Image for post
Image for post
Quaking Aspen — Arbor Day Blog

It is good practice to create git branches to code on before merging it back into the master branch but did you know that you should also consider deleting those old branches?

I was cleaning up my code when it crossed my mind on whether it’s ok to reuse a git branch after merging it in with the master.

In my quest for a clear answer it turned out that I needed a better understanding of some key concepts like: Git, commits, branches and so on.

What Is Git?

It’s a version control system for source code management where each copy or repo…

At the time of this writing, I’m in my 15th and final week of the Software Engineering Bootcamp at Flatiron School. Part of the curriculum is to write 5 blogs related to programming, of which, 1 of them can be non-technical and about why I’m doing what I’m doing. And, here it is!

For those who’d prefer audio and visuals, I also made a vlog!

From Wine To Code

This program has been quite the rollercoaster. There were definitely times where I wasn’t sure I would keep up the pace or get my projects up and running in time. But…

Image for post
Image for post

I’m making a single page application (SPA) with a Ruby on Rails as an API backend and HTML/CSS/JavaScript for the frontend. The wine resource has an attribute of price. What datatype should I use to have 19.00 (with the 2 zeros after the decimal) passed to the front end where I can just prepend a $ sign and walk away?


Initially, I thought to use a float data type for my price attribute since it allows for decimals. But, when I set my price to be 50.00 in the seeds.rb file it converts it to 50.0 …

Image for post
Image for post
Cereal Guy

After dabbling in Ruby on Rails and venturing into JavaScript, I found it very useful to have Rails as the backend API. It is setup in such a way where it can easily render JSON data to be used on the JavaScript side and therefore the browser.

Building my app was going well until it came time to render attributes of a model in relation to another model.

In Ruby, the relationships are set up like so and through naming conventions it knows where to look for whatever it’s looking for. Here, I have 3 models in a many-to-many relationship.

Image for post
Image for post
clipart of arrows from

I’m diving deeper into basic vanilla JavaScript and following a simple code-along where I just uncomment pieces of code step-by-step to see how each piece contributes to making a “Simple Liker” social-media-esque app.

function likeCallback(e) {  let heart =;  mimicServerCall()    .then(function(serverMessage){      alert("You notified the server!");      alert(serverMessage);      heart.innerText = glyphStates[heart.innerText]; = colorStates[];    })    .catch(function(error) {      alert("Something went wrong!");    });}

WOAH! There’s a lot going on here that I don’t need to immediately understand at this point. It’s basically the action(s) that happen when a user clicks on a heart element to “like” something in the “Simple Liker” app.

How I made some sense of regular expressions

I’m coding along in Ruby and given a string of items separated by a comma and space plus ANOTHER string of items separated just by a space. The program I’m building should be able to take in these strings as arguments and convert them to a standard format where both are an array of individual strings. So, I need to build ONE method that can parse these items into their own individual strings in an array.


vineyard_1 = “riesling, chardonnay, viognier”vineyard_2 = “grenache syrah mourvedre”


vineyard_1 = [“riesling”, “chardonnay”, “viognier”]vineyard_2 = [“grenache”, “syrah”, “mourvedre”]

Seems pretty…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store