DEV Community: Stacy Daniel

S Collection:

Stacy Daniel — Thu, 23 Dec 2021 20:26:05 +0000

This is it!…what felt like years of hard work, frustration, tears and of course the many victories is all finally coming together!!

Project:

My final project here at Flatiron… S COLLECTION is a e commerce web application built using Ruby on Rails for the backend and React JS for the front. I wanted to venture out of my comfort zone and create something completely different to be able to add to my portfolio. This application consist of three models: User, Product and Transaction.

A user is able to Signup/Login to view a list of the pieces in the COLLECTION. They’re also able to select a specific piece to view more information and to be able to add it to his/her cart. I also implemented user authentication using Bcrypt and Jwt.

Challenges Faced:

One of the things I struggled most with was updating my state after my "REMOVE_FROM_CART" Delete action was fired. In order words, I needed my current state, my action(delete) to return a newState upon deleting an item.

Final remark:

As my journey in the bootcamp draws near, I know that learning is something that never stops, especially in the world of development. I am extremely excited to see what the future holds. I am super thankful for Flatiron, for giving me the opportunity to break into Tech , and for also pushing me out my comfort zone . I will be forever grateful when I look back and see how far I have come.

Happy Coding 😁

A Beginner's Guide to DOM Manipulation

Stacy Daniel — Wed, 27 Oct 2021 04:59:12 +0000

JavaScript has many abilities and one of the most unique and useful is its ability to manipulate the DOM.

What is the DOM?

Document Object Model(DOM) is an interface that allows a programming language to manipulate the content, structure, and style of a website. It can simply be understood as a tree of nodes created by the browser. Each of these nodes has its own properties and methods which can be manipulated using JavaScript. Almost anytime a website performs an action, such as rotating between a slideshow of images, or toggling a navigation menu, that is the result of JavaScript accessing and manipulating the DOM.

The Document Object:

At the most basic level, a website consist of a HTML Document. The browser creates a representation of that document, the (DOM) as it loads and parses the HTML.

Below is a visual representation of what the DOM tree looks like:

Here we have the document object.This is the core foundation of the DOM, which is a built-in object that has many properties and methods which can be used to access and modify the DOM. To perform any form of DOM manipulation, you first have to access the document object.

Accessing the DOM:

In order to be able to manipulate an element in the DOM, you first have to select that particular element. Luckily for us, there are 5 major ways in which one can select elements in a DOM.

getElementById
The most common way to access an HTML element is to use the id of the element. This method document.getElementById() as its name implies, returns an element from the DOM for the specified Id.

getElementsByClassName
This method document.getElementsByClassName() returns a collection of all the elements in the document which matches the specified Class name.

getElementsByTagName
This method document.getElementByTagName() is nearly identical to getElementsByClassName().. but its main difference is that it accepts a tag name/type(example: (p)paragraph) and returns all the elements of the specified Tag type.

querySelector
Just like the previous methods, document.querySelector() will return whatever we place between the parentheses. Its main difference is that, it's not limited to just one type. We can use querySelector to either retrieve an id, a class or even a HTML tag. One thing to note is that this method will return the first element that matches the specified CSS Selector.

Lastly,querySelectorAll
This method works similar to above. Whereas querySelector() can only return a single element, document.querySelectorAll() returns a node list collection of all the elements which matches the specified CSS Selector.

Creating/Deleting Elements:

document.createElement()
this method creates an Element Node with the specified name.
document.createElement('button')
After the element is created, use the
element.appendChild()
method to insert/get the element onto the page.
document.body.appendChild(btn)
element.remove()
this method removes the specified element from the page.

Summary:

Knowing how to access and work within the DOM with JavaScript is super important. These are just a few of the basic overview. I hope you find this article useful. Thank you guys for reading and Happy Coding!😀

Understanding Constructor Functions in JavaScript

Stacy Daniel — Mon, 18 Oct 2021 03:00:32 +0000

What is a constructor ?

In Javascript, a constructor is a special function which creates an instance of a class which is typically called an "object". They are technically regular functions, but What makes them special is that they are always invoked with a powerful operator in JavaScript called the new operator. Constructors provide the means to create as many objects as needed, whilst attaching properties and behaviors to them as required. As convention, the constructor function name usually starts with a capital letter, to be easily recognizable in code.

What happens when a constructor gets called ?

When a Constructor is invoked:

A new empty object is created.
The Javascript keyword this starts to refer to the newly created object.
The value of the newly created object this is then returned.

Example

here is an example of a Bird constructor, which will allow us to create new objects:

     function Bird() {
       this.name = "Tweety";
       this.color = "blue";
     }      

  let blueBird = new Bird();

this inside the constructor always refers to the object being created.

When calling a constructor, the new operator is used to tell Javascript to create a new instance of the Bird constructor that is called blueBird. Note that the constructor function is not changed, the newly created new context is changed! Without the new operator, this inside the constructor would not point to the newly created object, giving unexpected results. when a constructor is invoked without the new operator it is invoked as a regular JavaScript function.

Summary

Note the main purpose of constructors are to implement reusable object creation code.

Constructor functions are regular functions but with a common agreement to defined them with the first letter capitalized.
Constructors use the keyword this to set properties of the object they will create.
Constructor functions can be used to create multiple similar objects.

Thank you for reading this article, I hope you found it useful. Happy Coding 😀

Flatiron Javascript Portfolio

Stacy Daniel — Thu, 07 Oct 2021 03:46:29 +0000

We were tasked with creating a single page Application using a Rails API backend with a Vanilla Javascript frontend. For my project , I decided to build a app called PlantScape where users/plant moms like myself are able to post their plants along with their care and is also able to view or comment on other plants.

Generating a New Rails API:

To begin creating my Rails application, I first needed to generate a New Rails API: rails new plant-api --api --database=postgresql.
The --api flag is specified so rails knows to set it up as an API , and the --database=postgresql flag will ensure that your app uses postgres for the database rather than the default sqlite3 , if one plans to deploy to heroku.

Upon generating my new rails project, I navigated to my gemfile and uncomment gem 'rack-cors', which will allow Cross Origin Resource Sharing in my API.

I also went ahead an added the active_model_serializers gem which converts data into a format which can be easily transferred, as well as the 'faker' gem which generates random data in many different categories.

Connecting My Frontend:

My App is structured such that the frontend(Javascript)sends a get fetch request to my backend(Rails Api) hosted on http://localhost:3000/plants which returns a Json data response to my frontend.

getPlants = () => fetch(this.api + "/plants).then(res => res.json())

Conclusion:

Most challenging for me was structuring a delete method in order to delete a specific plant by its URI. All in all, I'm very happy with the way my application turned out. I hope to build onto it in the future and eventually add more functionality.

Thank you for reading and Happy Coding!😄

Js-Quiz `A JavaScript Frontend with a Rails API backend`

Stacy Daniel — Sun, 04 Jul 2021 03:07:39 +0000

This was the moment where I started to feel like an actual developer 😁! For my phrase four project here at Flatiron, We were required to build a single page application using a Rails API backend with a Vanilla JavaScript frontend. I was overjoyed and excited and so I decided to build a Quiz App predominantly on JavaScript.

`Note: it's important to have both the frontend and backend in two separate repos, for faster error handling and to also avoid any deployment issues.`

Setting Up My Rails API:

To begin creating my Rails Application, I first had to generate a New Rails API.

`rails new js-quiz-api --api-database=postgresql`

The --api flag ensures that a Rails API only application is created and also assigns the database to use Postgres rather than the default Sqlite3. The Rails Api sets up its dependency gems. I also had to add the active_model_serializers gem to my gemfile, which is used to convert data into a format which can be easily transferred.

class Quiz < ApplicationRecord

   has_many :js_questions

   has_many :results

class QuizSerializer < ActiveModel::Serializer

attribute: id, :name, :description, :js_questions

Connecting My Frontend:

My App is structured such that the frontend(JavaScript)sends a get fetch request to my backend(rails api) hosted on http://localhost:3000/quizzesand returns a JSON data to use on my web page.

getQuizzes()

 fetch(this.baseUrl + "/quizzes")

 .then(res => res.json())

 .then(quizzes => quizzes.forEach(quiz => {

   const quizObject = new Quiz(quiz)

   quiz.js_questions.forEach(question => {

      new Question(question)

   })

   quizObject.render()

 }))

In Conclusion:

Creating this app was a challenge, yet rewarding at the same time. It seemed very simple at first but it did take me some time to figure out all the working parts and to put everything into place. Being a Frontend Developer is a dream of mine and so I am super ecstatic to be on this journey, and to continue to dive deeper into learning JavaScript!
Happy Coding!😀

My First Ruby on Rails Project

Stacy Daniel — Wed, 28 Apr 2021 12:21:45 +0000

Phew 😮💨

It has been a hell of a crazy month 🤣...yes a month. The initial two weeks to create the project plus the other two, to pass the review, but I finally did it 👏!

My third project here at Flatiron was required to build a Web App using the Ruby on Rails framework. I decided to create a parent forum website, open to current and soon to be parents in the surrounding neighborhoods of Brooklyn NY.

This forum has the customary signup/login/logout functionality, as well as a third party login authentication using a google.

There were many challenges with this project that ran from appropriately setting up my google omniauth, getting my delete button to work, but my biggest challenge by for was rendering the proper routes within my methods as well as within my forms.

My Skeleton App Setup

class User < ApplicationRecord

has_secure_password
has_many :posts 
has_many :comments, through: :posts

validates :username, :email, presence: true, uniqueness: true

class Post < ApplicationRecord

belongs_to :user
has_many :comments 
has_many :users, through: :comments

validates :title, :content, presence: true

class Comment < ApplicationRecord

belongs_to :user
belongs_to :post

validates :content, presence: true

...

Overview

Once a user joins/signup and is logged in, they are directed to their homepage/profile, where they're able to create and then share a post.

Users can respond to a question or suggestion to any of the post shared, by responding with a comment.

Only the creator of the post can edit and or delete said post.

Conclusion

I honestly thought that phrase 3/rails project would have been the simplest, being that the labs were very self explanatory, but after weeks of mulling over errors after errors, I was finally able to get the web functionality I wanted!. I must admit it was a very close one, but having that drive and determination to succeed in becoming a Developer...kept me going!!
Happy Coding y'all!😁

My Sinatra Base Web Application..."Hello Efitness!"

Stacy Daniel — Sat, 27 Feb 2021 10:00:53 +0000

Getting Started: Woohoo

I must admit, This time around I wasn't as nervous and confused as I was when building my very first project here at Flatiron. I was very well prepared. I had a clear idea as to what I wanted to build and how I wanted my app to look. I decided to build a Fitness tracker Web App, in which a user/users are able to signup/login and begin tracking their workouts.

Project Structure:

Gem install Corneal

Corneal is a super convenient gem which is used for creating Sinatra base templates. The gem magically creates the file structure as well as providing useful gems in a Gemfile in other to manage the dependencies in the App.

After getting my file structure up and running, I went ahead an created my project folders and subfolders. I decided on four models: A User, Workout, Exercise and Exercise_workout. Their relationships are as follows:

class User < ActiveRecord::Base
    has_secure_password
    has_many :workouts

class Workout < ActiveRecord::Base
    belongs_to :user 
    has_many :exercise_workouts
    has_many :exercises, through: :exercise_workouts

class Exercise < ActiveRecord::Base
    has_many :exercise_workouts
    has_many :workouts, through: :exercise_workouts

class ExerciseWorkout < ActiveRecord::Base
    belongs_to :exercise
    belongs_to :workout

Routes and Controllers

I was able to utilize RESTful routes in my App through the following:

ApplicationController is the parent controller of my App. It requires the necessary files and configures views and sessions. This controller only has one route, A Get request which renders to the homepage, along with helper methods, to check whether or not a user is logged in.

UserController has Get request which renders the user index page, signup form, as well as a Post request to create a user.

SessionsController has Get request which renders the login form, as well as a Post request to login/authenticate a user.

WorkoutController has Get requests to render the workouts index page, the form to create a new workout, as well as a Post request for that new workout created. This controller also renders the form to either update and or delete a workout.

Conclusion

This project was very rewarding and fun to work on. My biggest challenge was styling, which I ultimately decided to leave very basic. I learned how important it is to organize/have a rough idea prior to coding. I hope that the information provided will be helpful as other students like myself embark on this portion of their journey here at Flatiron. Happy coding!😁

My Very First Flatiron Project!

Stacy Daniel — Tue, 16 Feb 2021 02:59:48 +0000

OVERVIEW

For my first project at Flatiron, I was given the task of building a Ruby CLI Application, by either scrapping or utilizing an API from a public website.

Initially I struggled with ideas for the project. I went through many different ideas and APIs before deciding to build an app that would utilize data on the newly developing islands in the Caribbean.

DEVELOPMENT

My application uses the Rest Countries Caricom regional bloc Api, which allows any user to list a few of the countries along with its data.

First thing I needed to do was build a API class, which gathered all the information from my Apis endpoint. Secondly, a Country class which initializes object instances for the countries. And last, but not least, a Cli class which interacts with the user/users.

CONCLUSION

I learned alot during this entire process, including being able to create a new repository, adding, committing and pushing my work through github in order to save it.

My hardest struggle was not being able to properly execute my ideas in the Cli class, but after weeks of ferociously coding and with the help of my tutor Brandon, I can proudly say I am very happy to be able to immerse myself in greater depths of understanding Ruby!

My First Flatiron Project!

Stacy Daniel — Mon, 14 Dec 2020 00:47:48 +0000

For my very first project at Flatiron, I was given the task of building a Ruby CLI Application, by either scrapping or utilizing an API from a public website.

Initially I struggled with ideas for my project. I went through so many different APIs before deciding to build an app that would utilize data on the newly developing islands in the Caribbean.

My application uses the Rest Countries Caricom regional bloc API, which allows any user to list a few of the Caribbean Community, better known as the Caricom countries along with their capital cities and population.

First thing I needed to do was build an API class, which gathered all the information from my url. Secondly, a Country class which initializes object instances for my Caricom countries. And last but not least, a CLI class which interacts with the user/users.

Overall, I am very happy with how my project came out. My hardest struggle was not being able to properly execute my ideas in the CLI class, but after weeks of ferociously coding and with the help of my tutor Brandon, I can proudly say I am very happy to be able to immerse myself in greater depths of understanding Ruby!

Why I decided to learn Software Engineering!

Stacy Daniel — Sun, 25 Oct 2020 21:27:21 +0000

After many years of job instability, financial strain and most recently the 2020 covid-19 pandemic, I found myself questioning everything: What excites me? What was I good at? What could I be good at given the opportunity? I knew I wanted to do something satisfying , most importantly, something which made a difference in myself as well as others.

A profession in technology was never of interest to me. I had so many preconceived notions about what I thought a programmer was. That all changed when I stumbled upon a post on youtube captioned "A day in the life of a developer", the youtuber -herself a web developer, got me pumped and interested in learning about code.

After many hours of late night reading, researching and exploring free prep courses in software engineering, I became more and more excited and fascinated in learning to code. I became hooked!

Before realizing I wanted to start a career in the tech industry, I came from a completely different background, with zero knowledge or experience in coding. Flatiron was recommended to me by a trusted family member and after some in depth research and careful consideration, I decided to apply to their software engineering program. Their well structured curriculum, and job placement record being the deciding factors for me.

A career in software engineering will be life changing. The ability to create using languages not known to the general public is amazing! I would be doing something completely fulfilling while gaining financial security.

Upon my completion of the program, my ultimate goal is to continuously learn and grow to become the best developer that I can be!!

For more Content:
Like, share and follow😍