DEV Community: Christian Cedeno

Scrape the web with puppeteer!

Christian Cedeno — Wed, 28 Aug 2024 14:38:31 +0000

Puppeteer full guide pt.1

Puppeteer: The Power Tool for Web Automation

In today's fast-paced web development landscape, automation is key—and that's where Puppeteer comes in. Developed by Google, Puppeteer is a powerful Node.js library that allows developers to control Chrome browsers using JavaScript. Whether you're navigating the web in headless mode for efficiency or in a full browser for visual feedback, Puppeteer makes it easier than ever to automate tasks like web scraping, testing, and more. With Puppeteer, what once required manual effort is now just a script away.

Why web scraping?

In a recent project, I worked with a client who needed a landing page for his forex trading community. He wanted something similar to the stock tickers you see on MarketWatch or Yahoo Finance, but instead of stocks, he wanted real-time currency conversion rates for $1 USD displayed across the site.

While there are APIs available that could provide the data—with usage limits and monthly fees—I saw an opportunity to create a custom solution using Puppeteer. By investing some time upfront, I was able to scrape and display the data for free, ultimately saving my client from recurring costs.

Clients website: Majesticpips.com

Setting up puppeteer made simple

Before we can start scraping the web for all its glory, we must install puppeteer to our application.

Just as described on the docs

Step 1

Install library using your choice of npm, yarn or pnpm.

npm i puppeteer
yarn add puppeteer
pnpm add puppeteer

This will download compatible version of chrome during installation which is easier for beginners to get things up and running quickly.

If you are a more seasoned developer and have specific chrome/chromium version you'd like to work with; then installing these packages

npm i puppeteer-core
yarn add puppeteer-core
pnpm add puppeteer-core

would be best for you, the package will be lightweight as it only installs puppeteer and leaves the chrome version up to you to decide.

Installing 'puppeteer' is the better option for first time tester. It simplifies the setup and ensures you have a working version of Chromium, allowing you to focus on writing your scripts.

Step 2

now on your JS file, you'd want to import puppeteer for applications using ES module systems(ES6 standards) with node versions 12 and above.

import puppeteer from 'puppeteer'; (recommended)
or
import puppeteer from 'puppeteer-core';

or you can use the require syntax for commonJs module system for Node.js that is also compatible with older versions of Node.js.

const puppeteer = require('puppeteer');
or
const puppeteer = require('puppeteer-core');

Step 3

After importing Puppeteer, we can start writing the commands to perform web scraping. The code below shows what you'll need to use.

We launch the browser using these methods provided by the library.

const browser = await puppeteer.launch();

const page = await browser.newPage();

await browser.close();

puppeteer.launch() = This method launches a new browser instance.

browser.newPage() = This method creates a new page (or tab) within the browser instance.

browser.close() = This method closes the browser instance.

In puppeteer.launch(), we can pass arguments to customize the browser launch according to our preferences. We’ll cover this in more detail in part 2. However, by default, puppeteer.launch() has preset values, such as headless mode being set to true.

Step 4

The browser has been launched, and we now have a page ready to surf the web. Let's navigate to the website where we'll scrape some data.

For this example, we'll be scraping data from a qoutes website.

 await page.goto(https://quotes.toscrape.com/)

 await page.screenshot({ path: 'screenshot.png' })

I've added await page.screenshot({ path: 'screenshot.png' }) to the mix. This is a great tool to ensure everything is going according to plan. When this code executes, you'll have an image file in your project directory capturing the current state of the website you're scraping. You can also adjust the file name to your liking.

If everything checks out then proceed to step 5.

Step 5

Now that our script is taking shape, let’s dive into the key part where we extract data from the web page. Here's how our script looks so far:

const puppeteer = require('puppeteer');

(async () => {

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto(https://quotes.toscrape.com/)

await page.screenshot({ path: 'screenshot.png' })

 const quotesScraper = await page.evaluate(() => {

const quotes = document.querySelectorAll(".quote"); 
    const quotesArray = [];

   for (const quote of quotes) { 
       const texts = quote.querySelector(".text").innerText; 
         const author = quote.querySelector(".author").innerText;  

        quotesArray.push({
           quote: texts,
           author
         });

     }
     return quotesArray;
});

console.log(quotesScraper);

await browser.close();

})();

To verify that the data was successfully scraped, we can run node "server-file-name" in the CLI, and the data will be displayed in the console using console.log(quotesScraper);.

[
  {
    quote: '“The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.”',
    author: 'Albert Einstein'
  },
  {
    quote: '“It is our choices, Harry, that show what we truly are, far more than our abilities.”',
    author: 'J.K. Rowling'
  },
  {
    quote: '“There are only two ways to live your life. One is as though nothing is a miracle. The other is as though everything is a miracle.”',
    author: 'Albert Einstein'
  },
  {
    quote: '“The person, be it gentleman or lady, who has not pleasure in a good novel, must be intolerably stupid.”',
    author: 'Jane Austen'
  },
  {
    quote: "“Imperfection is beauty, madness is genius and it's better to be absolutely ridiculous than absolutely boring.”",
    author: 'Marilyn Monroe'
  }
....
]

await page.evaluate(() => { ... }): This is where the magic happens. The evaluate method allows us to run JavaScript code within the context of the page we're scraping. It's as if you're opening the browser's developer console and running the code directly on the page.

const quotes = document.querySelectorAll(".quote");: Here, we're selecting all elements on the page that match the .quote class. This gives us a NodeList of quote elements.

const quotesArray = [];: We initialize an empty array to store the quotes we extract.

for (const quote of quotes) { ... }: This loop iterates over each quote element. For each one, we extract the text of the quote and the author.

quotesArray.push({ quote: texts, author });: For each quote, we create an object containing the quote text and the author, then push this object into the quotesArray.

return quotesArray;: Finally, we return the array of quotes, which is then stored in quotesScraper in our Node.js environment.

This method of extracting data is powerful because it allows you to interact with the page just like a user would, but in an automated and programmatic way.

Closing the Browser

await browser.close();: After scraping the data, it's important to close the browser to free up resources. This line ensures that the browser instance we launched is properly shut down.

Looking Ahead to Part 2

With this script, you've successfully scraped data from a website using Puppeteer. But we're just scratching the surface of what's possible. In Part 2, we’ll explore more advanced techniques like handling dynamic content and use Express.JS to create API functionality of scrapped data. Stay tuned as we delve deeper into the world of Puppeteer!

JS stacks DS&A intro

Christian Cedeno — Wed, 14 Aug 2024 20:37:42 +0000

If you use any modern device, you’ve likely encountered stack operations, even if you didn’t realize it. Stacks are fundamental in many programming tasks, from managing function calls to enabling undo operations.

What are Stacks?

Stacks are a linear data structure that follows order of operations organizing data in a LIFO or FILO structure.

LIFO: Last in, First out.

FILO: First in, Last out.

Stacks are used to perform operations on a collection of elements such as adding and removing elements, displaying top elements and displaying if collection is empty or full.

For example:

When you are on your web browser currently visiting www.ESPN.com and you accidentally click on a ad for Chicago White Sox baseball tickets. We added to our stack, maybe not intentionally but now it's at the top of our stack. Then we realize that the Chicago White Sox have lost 15 games in a row. Well ... let's hit that back button(removing that element from the top of the stack).

Yes, that one right up there. This demonstrates the LIFO principle in stacks operations, we are leaving(removing) the last visited page from our history(or Stacks) to return to www.ESPN.com ... maybe next year White Sox's.

Stacks operations are used often in applications that need to maintain order web browser history, undo and redo on text editors and function call stacks to name a few.

Functions commonly used when altering stacks are as follows:

.Push = to add element onto a stack.

.pop = to remove top element from a stack.

.peek = to display the top element of a stack.

.length/.size = to determine the total of indexes in a stack. Javascript uses (.length)

.isEmpty = checks if a stack is empty.

.isFull = checks if a stack is full; if array has a fixed size.

Stacks data structure can be created with a stacks class or with a regular array.

Implementing stacks without class:

When performing stacks operations without a stacks class, we simulate stack operations with an array.

Below will be an example of using the stacks operations to reverse an array of numbers. I will use JSON.stringify to compare the values of the array outcome to the desire array outcome.

Ex:

// Reverse an array using stack operations

let number = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; // original array
let numberList = [9, 8, 7, 6, 5, 4, 3, 2, 1, 0]; // reversed array
let ordernumberList = []; // array to store the reversed order

// Loop through the numberList array to reverse its order
for (var i = 0; i < number.length; i++) {
  let currentValue = numberList.pop(); // using the key .pop method to remove the last element from numberList
  ordernumberList.push(currentValue); // using the key .push method to push the popped element into ordernumberList
}

console.log(ordernumberList + " vs " + number); // compare the arrays

// Convert both arrays into JSON strings for comparison
if (JSON.stringify(ordernumberList) === JSON.stringify(number)) {
  console.log("The number list is reversed: " + ordernumberList);
  return ordernumberList;
} else {
  console.log("The number list is not reversed: " + ordernumberList);
}

I want to highlight the if-else statement at the very end. I used the JSON.stringify method to compare the two arrays because, without it, the comparison would return false, triggering the else condition, even though the arrays have identical content. This happens because, when comparing arrays in JavaScript, the comparison checks their references (i.e., their memory locations) rather than the actual content inside the arrays.

As we can see throughout the for-loop, our method .pop (removed) the last index in the numberList array first(LIFO). Then using the .push method to add it into the new array ordernumberList, reversing the original array.

FILO comes in on the new array formulated as the first indexes pushed into ordernumberList array will be the last ones out(FILO) if ever modified with the stacks operations.

In this article, we’ve explored how stacks operate using the LIFO and FILO principles, implemented stack operations in JavaScript. Understanding stacks is essential for many programming tasks, as seen in real-world scenarios like web browsing.

Unraveling Rails Serialization: Formatting Web APIs

Christian Cedeno — Wed, 22 Nov 2023 13:11:36 +0000

Hello, I'm Christian, and I'm excited to guide you through a comprehensive mini-series focused on mastering serialization in Ruby on Rails. Throughout this series, we will dive into the essentials of Rails serializers, explore their efficiency, and discuss how to customize and optimize them for peak performance. Additionally, we'll uncover best practices to ensure your serialization processes are seamless and effective.

What are serializers?

In Rails, dealing with complex data structures, such as objects, can be challenging. Fortunately, Rails provides us with a powerful tool: serializers. This can be utilized in various aspects of your programming journey.

Web APIs: Streamlining the process of sending and receiving data.

Web APIs

Web APIs brings your application to life. Usually the backbone of an application, providing the platform with data to animate the functionalities making the web application dynamic. Serialization aids web APIs, by transforming information into consistently formatted data for client and server side to transmit data efficiently between each other. Data is commonly formatted to readable JSON , XML or others for specific use cases. This allows the transmission of data to flow through application seamlessly.

Choosing the Best Format

JSON: Javascript Object Notation

JSON is the most widely used format in modern web APIs due to its simplicity, readability, and ease of use in web applications.

It represents data as key-value pairs, resembling JavaScript object syntax, which makes it a natural choice for web applications, especially those using JavaScript.

JSON API format example

{ “id”: 1, “first_name”: “John”, “last_name”: “Smith”, “age”: 25 }
Benefits: It's easily parsed by browsers and server-side languages, and supported natively by JavaScript.

XML: eXtensible Markup Language

XML is historically popular, especially in SOAP (Simple Object Access Protocol) based APIs and enterprise systems.

It uses tags (similar to HTML) to define objects and their attributes.

XML API format example

<user> <id>1</id> <name>John Doe</name> <email>john.doe@example.com</email> </user>

Benefits: Self-descriptive, hierarchical, and suitable for complex data structures, though it tends to provide more excessive information compared to JSON.

Additional formats include:

CSV (Comma-Separated Values)

CSV, although not commonly used for web applications. CSV is used to represent tabular data(data displayed in columns and rows, ex: spreadsheets).

CSV is a great format for importing and exporting data to be read by spreadsheet softwares(excel, google spreadsheets, etc.)

Protobuf (Protocol buffers)

A binary serialization format developed by google. It’s known to be more efficient relative to speed and size compared to its counter part JSON and XML formats.
This is your ideal format for high performance and low latency applications.

In conclusion WebAPIs can be parsed into many different formats. The choice of data format—be it JSON, XML, CSV, or Protobuf, a chosen format heavily relies on the requirements, performance and consideration needs of the application and the environment it operates on. With many data formats to choose from, mastering serializers within Ruby on Rails, developers can significantly elevate the functionality and user experience of their web applications, turning what might seem like a challenging endeavor into a more approachable and rewarding one.

Building a QR code generator

Christian Cedeno — Sun, 16 Apr 2023 02:07:47 +0000

What is a QR code?

QR code is a later version of a data matrix barcode invented in japan in 1994, data matrix barcode was used to label automotive parts, these labels when scanned would output information pertaining to the automotive part the code referenced. This was a great way to have accessible information contained and hidden only to be accessed when needed.

Qr codes are widely used to store a variety information for business and personal use. From links to websites, advertisements, contact info, restaurant menus and payment processing etc. QR codes hold more information than data matrix barcode and makes information easier to access for anyone with a smart device camera.

I will be walking you through a simple QR code generator application made with Javascript and HTML using the JS library called qrcode on the CDNJS platform (https://cdnjs.com/libraries/qrcode). However, for those who want to use a Framework there are Node packages for QR code generation as well (https://www.npmjs.com/package/qrcode#highlights).

Let’s Build!

To begin the Process of building out your QR code generator we will add the Qr code script into the head of our HTML structure.

<script 
src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" 
  integrity="sha512-CNgIRecGo7nphbeZ04Sc13ka07paqdeTu0WR1IM4kNcpmBAUSHSQX0FslNhTDadL4O5SAGapGt4FodqL8My0mA==" 
   crossorigin="anonymous" referrerpolicy="no-referrer">
</script>

In the example below a form element is created for users to submit a URL and the size of the Qr code they prefer. (This library will also allow users to pick the color of the Qr code also if you are interested.)

<form id="generate-form">
  <input id="url"
         type="url" 
           placeholder="Enter URL here"
/>

  <select id="size">
    <option value="100">100x100</option>
    <option value="200">200x200</option>
    <option value="300" selected>300x300</option>
    <option value="400">400x400</option>
    <option value="500">500x500</option>
    <option value="600">600x600</option>
    <option value="700">700x700</option>
</select>

   <button type="submit"> 
         Generate QR Code
   </button>

</form>

The form element will submit the URL and size value needed for QR code generator functionality.

Javascript functionality

Begin with declaring two variables, form element and the element that will display the Qr code.

const form = document.getElementById('generate-form');
const qr = document.getElementById('qrcode');

Next add this code provided by the library we are using, generateQRCode() will take in two arguments and generate the QR code correlated to the arguments passed in.

const generateQRCode = (url, size) => {
        const qrcode = new QRCode('qrcode', {
            text: url, 
            width: size, 
            height: size
        })
    }

Submit function

const form = document.getElementById('generate-form');
const qr = document.getElementById('qrcode');

const generateQRCode = (url, size) => {
   const qrcode = new QRCode('qrcode', {
        text: url, 
        width: size, 
        height: size
      })
  };

const onSubmit = (e) => {
e.preventdefault();

const url = document.getElementById('url').value;
    const size = document.getElementById('size').value;
if(url === '') {
        alert('Please enter a URL');
    } else {
generateQRCode(url, size);
  }
};

form.addEventListener("submit", onSubmit);

Two variables are declared to contain the input value, a if statement to ensure filled input, if not alert user to fill input and lastly calling the generateQRCode function with the passed in arguments.

To give onSubmit functionality to form element we add event listener to listen for form submissions of Qr code and pass in the event "submit" follow by the function onSubmit.

With this you should have a functioning Qr code generator!

Functional Email Form in React with EmailJS

Christian Cedeno — Fri, 10 Mar 2023 18:19:33 +0000

Require installs: $ npm install @emailjs/browser --save

Email has been one of the worlds best form of communication for several decades. However, with the rise of text messaging and social media, emails dominance has been challenge in recent years. Email still remains relevant in todays world due to its variety forms of usage, for example it's used as a professional way of online communication, has a great use case for user verification and its efficient for sending data, images, files, etc.

Email is essential part of any web application, With emailJS its never been easier to implement a functional email form to your application. I’ll be walking you through the steps to get a functioning email form for your react app!

Step 1.

Before we touch any code, we must create an account below. This will take you to EmailJs.com, here you can create a free Account and have access to receive 200 emails per month completely FREE!

Send email from Javascript - no server code required | EmailJS

Once your account has been created and you have signed into your account, on the tab to the left of the page you’ll see “Email services” click it. This is where you’ll pick a email service that you want to receive emails to, allow access.

Step 2.

We will then create a email template, this is located on the tab on the left of the page. Customize the template to your preference.

Keep in mind the value that is placed inside double curly bracket(Template parameters) will be referenced in your input element name attribute.

below is a example of my template:

To the right of the screen you’ll see a “To Email*” make sure your recipient email is listed and the “From Email*” check box is mark as checked. All other inputs on the right of the screen is optional.

Make sure to test out your email!

Step 3.

Time to code! Let’s get a react application running with the code below. Side note emailJS can also be used with Angular, Vue.Js, Svelte and Wix code as well, there are examples of this on the emailJS docs.

$ npx create-react-app "app-name"
$ npm start

Once the react application is up and running, install emailJS.

$ npm install @emailjs/browser --save

This will install and save into your package json dependency.

Step 4.

The next step is to designate a component to import emailJS.

import React, { useRef } from 'react';
import emailjs from '@emailjs/browser';

export const ContactUs = () => {
  const form = useRef();

In the example above emailJs is imported to the ContactUs component.

useRef hook is imported also, useRef will remember the information put in the input element. It will then send that information to the emailJs server.

Next will be the function we add to this component that requires service ID, template ID and API Key that all can be found in your emailJS account.

const sendEmail = (e) => {
    e.preventDefault();

    emailjs.sendForm('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', form.current, 'YOUR_PUBLIC_KEY')
      .then((result) => {
          console.log(result.text);
      }, (error) => {
          console.log(error.text);
      });
  };

*below is examples of where to find the required input: *

Service ID

Template ID

API key

All that is left is to add the sendEmail function as a onSubmit event and useRef hook to the Form element lastly a “name” attribute to each input elements that correlates to the email template parameters.

return (
    <form **ref={form}** **onSubmit={sendEmail}**>
      <label>Name</label>
      <input type="text" **name="name"** />
      <label>Email</label>
      <input type="email" **name="email"** />
      <label>Message</label>
      <textarea **name="message"** />
      <input type="submit" value="Send" />
    </form>
  );
};

The name attributes above correlates to the email template parameters displayed below.

example:

The name attribute’s value in the input element must match what’s in the double curly bracket. This is how emailJS knows where the value is intended to be displayed in the email.

You now have a fully functional way to receive emails from users on your web application!

Using Axios Guide

Christian Cedeno — Mon, 12 Dec 2022 06:23:54 +0000

Below is a beginner guide on how to install and use Axios in React.js

how to install

using npm:
$ npm install axios

using yarn:
$ yarn add axios

how to import:

import axios from 'axios';

The import must be added to the top of the react component axios is being implemented in.

Axios usage:

Axios is a HTTP client library used in React JS and Vanilla JS to make request to a specified endpoint. These request are known as HTTP request. The request usually made are GET which is known as Read in CRUD, POST is known as Create in CRUD, PATCH is to update in CRUD and lastly DELETE.

HTTP Request Examples

GET Request:

const [post, setPost] = useState([]); useEffect(() => { axios.get('url') .then((response) => { setPost(response.data); }); }, []);

POST Request:

function createPost() { axios.post(baseURL, { title: "Hello World!", body: "my latest post." }) .then((response) => { setPost(response.data); }); }

PATCH request:

function updatePost() { axios.patch(url/${id}, { body: "an update of my latest post." }) .then((response) => { setPost(response.data); }); }

DELETE Request:

function deletePost() { axios.delete(url/${id}) .then(() => { alert("Post deleted!"); setPost(null) }); }

Using async and await:

async-await syntax in axios allows for less code since the .then and .catch callback functions aren't needed.

GET Request with Async-Await

const [post, setPost] = useState([]); const client = axios.create({ baseURL: "https://jsonplaceholder.typicode.com/posts" }); useEffect(() => { async function getPost() { const response = await client.get("/1"); setPost(response.data); } getPost(); }, []);

Why should you consider using axios to make your http request:

Axios have built in crud functions to make request simple.
Ex: axios.get, axios.patch, axios.post, axios.delete.

You'll use less lines of code to make endpoint request since request with axios requires only one .then()

What the CRUD Active Record

Christian Cedeno — Thu, 17 Nov 2022 09:14:49 +0000

The following will be a tutorial on CRUD methods used in ruby Active Record to manipulate(read/write)data. Learn more about Active Record here Active Record documentation

CRUD?
What is it, what does it mean? If you aren't familiar already with CRUD, I can help explain the concepts briefly.
CRUD is an acronym for CREATE, READ, UPDATE and DELETE.

Why CRUD?
CRUD is used heavily in programming as a way to communicate with stored data. These so called stored data usually come from API's and or databases. To access or manipulate the information we use CRUD.

CRUD examples
Below I will demonstrate the usage of the crud methods and the output of these invoked methods. I recommend referring to the Active Record documentation for any clarifications! CRUD methods

Create

In active record, we can create objects using either the .new method or the .create method. We use the .create method to create and save a new object. Normally in Active Record the .create method is invoked on a Ruby class to create instances of said class. This method takes in a argument in the form of variables or hash.

//.create method 

adele_album = Album.create(song1: "hello", song2: "someone like you")

or

adele_song = Song.create("hello")

// .new method

album = Album.new
album.song1 = "hello"
album.song2 = "someone like you"
album.save

When creating a new object with the .new method it is required to use the save method for the object to persist in the database unlike the .create method which creates and saves the object all together.

Read

Active Records makes retrieving data from the database fairly easy, think of it as a getter method since it returns based on the method invoked.

for example:

//the .all method will return all instances of album. 

Album.all
=> [song1: "hello", song2: "someone like you"]

//the .find method returns based on the id passed in as a argument. 

Album.find(2)
=> [song2: "someone like you"]

Keep in mind when using Active Record 'id' are autonomously generated by active record when objects are created with the .create method or when saved aft6edr using the .new method.

//the first and last method returns the first object/instance //in the class and the last method returns the last //object/instance

Album.first
=>[song1: "hello"]

Album.last
=>[song2: "someone like you"]

Update

Before we are able to update a object it must first be read. This will give us the exact object we want to update. Update can be done with the .save method or the .update method.
.save method is best used for objects not already present in the database, the .update is best used on a object present in a database that needs to be altered.

//for objects not already in the database we use .save

song = Album.find_by(song1: "hello")
song.song1 = "Rolling in the deep"
song.save

or 

song = Album.find_by(song1: "hello")
song.update(song1: "Rolling in the deep")

check the database to make sure changes were made.

delete

When deleting objects you can read the object or pass in the object as a argument depending on the delete method used. Below will be several examples of the delete method.

//when using the .destroy method, read the object first. 
first_song = Album.first 
first_song.destroy

//the code above can be short handed 
Album.first.destroy 

//we can be specific with the key and values of a class //instance we want to destroy by using the .destroy_by method
//this method takes in an argument of what you want deleted

//however the destroy_by will delete all instances that have //the argument passed in, in this example all song1 keys with //the value "hello" will be deleted.

Album.destroy_by(song1: "hello")

//to delete all instances in a class use the .destroy_all //method

Album.destroy_all

//all instances in the Album class will be deleted.

Ruby: nested hash iterations

Christian Cedeno — Sat, 15 Oct 2022 15:59:58 +0000

How to iterate over nested hashes in ruby?

Before we can iterate through nested hashes, we must first know what a hash is.

hash: a hash is a collection of keys and values enclosed in curly brackets, hashes are identical to javascript objects.

nested hash ex:

 apple = {
 "Hardware Products" => {
   :computers => "Mac",
   :laptops => ["Macbook Pro", "Macbook Air"],
   :tablets => ["Ipad Air", "Ipad Pro"],
   :phones => "Iphone"
   },
   "Software Products" => {
    :entertainment => ["Apple Music", "Apple Tv", "Apple Podcast"],
    :finance => ["Apple Wallet", "Apple Card"],
    :other => ["Apple Fitness", "Apple Maps"]
   }
   }

nested hash of Apple's Hardware and Software products

The code block above is an example of a nested hash. A nested hash is normally a value pair in a hash.

Now that we are clear on what a hash is, how do we iterate over the nested hash?

example deliverable: output the :finance value["Apple Wallet", "Apple Card"]to the terminal.

step 1:
Iterate over the parent hash using each method, set two parameters to reference the key and value (product_type, inventory).

finance_products = apple.each do |product_type, inventory|
puts "product_type: #{product_type}"
puts "inventory: #{inventory}"
end

=> product_type => "Hardware Products"

=> inventory: => {
   computers => "Mac",
   laptops => ["Macbook Pro", "Macbook Air"],
   tablets => ["Ipad Air", "Ipad Pro"],
   phones => "Iphone"
   }

=> product_type => "Software Products"

=> inventory: => {
 :entertainment => ["Apple Music", "Apple Tv", "Apple Podcast"],
 :finance => ["Apple Wallet", "Apple Card"],
 :other => ["Apple Fitness", "Apple Maps"]
}

step 2:
Using a conditional statement (more on conditionals here) we access the value in "Software Products". Then iterate over value(inventory) and pass 2 parameters, these will reference the nested hash keys and values!

finance_products = apple.each do |product_type, inventory|

if product_type == "Software Products"

inventory.each do |product, type|
puts "product: #{product}"
puts "type: #{type}"
    end
   end
  end

"terminal output"

product: entertainment
type: ["Apple Music", "Apple Tv", "Apple Podcast"]
product: finance
type: ["Apple Wallet", "Apple Card"]
product: other
type: ["Apple Fitness", "Apple Maps"]

step 3:
Using a conditional statement to retrieve the :finance key from (product), we then iterate over the values(type) using each method and pass a parameter(finance) and print (finance) to meet the deliverable.

finance_products = apple.each do |product_type, inventory|

if product_type == "Software Products"

inventory.each do |product, type|

if product == :finance

type.each do |finance|
puts "#{finance}"

    end
   end
  end
 end 
end

"terminal output"

Apple Wallet
Apple Card

Taking the LEAP p1

Christian Cedeno — Mon, 19 Sep 2022 00:50:11 +0000

Thinking about it

These are three phases I gone through before making the decision to take the LEAP! and become a software engineer part 1.

We've all gone through it, At some point in life we had that discussion with ourselves. I want to change careers, I want something more challenging to do, I want a new field of work. For those individuals i'm happy to tell you, you aren't alone. I too was in this position, I planned on transitioning from Physical Therapy to Accounting until a patient of mine convinced me to give Software Engineering a try. I did some googling and realized how cool the tech field was. But I needed to do some self reflecting before going forth with this decision.I asked myself three questions:

"Why do I want to join tech?"

"Is this the best fit for me?"

"How do I plan on achieving this?"

asking myself these questions were crucial, NEVER rush a decision. Below are my reasoning and thought process.

Why I wanted to join tech?

Technology is the backbone in today's society, all the advancement in technology has lead to a more connected, convenient and informative way of life. I've had the privilege of watching technology grow over the past decades and seeing the impact of softwares like educational platforms, financial technology apps, Social media. This was a big motivator for me to get into tech, the ability to create and impact many lives through software was inspiring to me and it is why I decided to learn software engineering.

Is this the best fit for me?

You may be asking "how do I know if this is the best fit for me?" The way I found out for myself was by going on youtube, learning about the industry from others currently in it. I used beginner friendly apps like mimo and challenged myself with web apps like https://freecodecamp.org. By applying myself I was able to know if tech was a good fit for me. I paid attention to my ability in problem solving and my approach on it. I observed how it made me feel when I was stuck on the same problem/errors for hours. I Come to realize how entertained I was by the challenge of creating working lines of code. I noticed how fast time flew by when I began coding, hours would go by and I would not sense any kind of fatigue. I knew it was right for me when being consistent with learning didn't feel like a chore.

How do I plan on achieving this?

My approach to becoming a software engineer is to get better everyday, learn a minimum of one concept a day. When you understand the overall concept of a method, you will better understand how to implement your knowledge. I will also get comfortable with googling things I don't know! it'll serve me well. Google, stackOverflow, w3Schools are great resources to use when you are coding these are your tools. Repetition and consistency is how I plan to achieve my goals of becoming a full stack engineer. I'm currently attending Flatiron school's software engineer bootcamp!

This was my thought process through my decision to take the leap on becoming a full stack engineer.