DEV Community: Tyler Montobbio

Learning TypeScript ep.1

Tyler Montobbio — Tue, 06 Dec 2022 23:14:31 +0000

TypeScript is an intuitive way to factor your code. When writing vanilla JavaScript won't always give you a hint where your syntax is bad, using TypeScript will highlight errors and give you more in-depth clues as to where your bugs will be. This system is useful to catch things early in development versus finding out during your production phase.

I'll be writing in VSCode using npm version 6, node.js version 10, and Ubuntu/WSL on windows 10. To begin, make sure you have NPM and node.js installed.

Check Versions

npm -v
//>6.14.4

node -v
//>v10.19.0

Install typescript globally

npm i -g typescript

You may have to set permissions if you get an error within your /usr/ directory.

whoami
//>tyler

// For linux this worked for me
sudo chown -R tyler: /usr/local/lib/node_modules

Create your practice directory

//create folder
mkdir ts-practice

cd /ts-practice/

touch index.ts
touch tsconfig.json

// Create your json file to allow dependencies in node_modules
npm init

When you run npm init you'll have to run through the settings so that a package.json is generated (most of the important stuff will have default values).

How it works

For these examples we'll be writing our code in the index.ts file. We will instruct the compiler after we've written what we want to compile. Lets start with my silly goose function, if we put this into our ts file and run tsc index.ts, which will start the compiler.

//index.ts
let matt = "Silly Goose"

function isGuyCool(person) {
    if (person == "Silly Goose") {
        console.log("Silly Goose detected!!")
    } else {
        console.log("Person is not silly...")
    }
}

What happened? For one, we created an index.js file with our "compiled" code output - but the code remained exactly the same? This is because any valid JavaScript can be written, TypeScript wont change your vanilla code necessarily. By default, TypeScript compiles to es3, which doesn't allow us to use things like async functions. Go ahead and throw this into your index.ts file and compile it with tsc index.ts in the terminal...

//index.ts
async function foo(){
    return "bar"
}

What shows up in your index.js? A whole load of stuff! This output isn't what we want. This is where the tsconfig.json comes in handy. We can configure our compiler to do a few things..

//tsconfig.json
{
    "compilerOptions" : {
        // The target is which "Flavor" of JS were using in the compiler.
        // esnext will allow us to compile async functions
        "target": "esnext",
        // watch will automatically compile our code when we save index.ts, removing the need to use tsc index.ts
        "watch": true,
        // Lib automatically includes typing functionality for certain environments like the DOM, es2017, ect...
        // Useful for object oriented JS code (classes and such) without compilation errors.
        "lib": ["dom", "es2017"]
    }
}

Next run tsc in terminal to start compiler watch service. Sweet! Now we can just write our code and save, our async function should output normal now. Now lets say we want to use DOM classes such as the URL class, with our TypeScript configured the way we have it, we can get VSCode's nifty autocomplete and intelisense features to work with our typescript.

// index.ts
const url = new URL()

If you hover over your new line of code, the tooltip will give you more relevant information about how to fix it before moving on. "An argument for "url" was not provided.". You'll also note that the code is underlined in red.

const url = new URL("www.google.com")

There, that's better. Another nifty tool is our ability to right click the new class, and go to "Type Definition" to see more information about the URL class.

Conclusion

TypeScript is a very neat tool, and because you can pick and chose when to use TypeScript features, it integrates seemlessly with your vanilla JavaScript. Its learn-as-you-go methodology makes it very simple to learn. This is all I can offer for now as I'm still trying to learn TypeScript myself, but I'll add more content on this topic in the future. Thanks for reading, now you're set up to play with TypeScript!

Ruby is pretty neat

Tyler Montobbio — Fri, 16 Sep 2022 18:25:58 +0000

OOP is an interesting concept, one that many languages revolve around. During my introduction to JavaScript, OOP was a part of the course I hadn't touched. Needless to say, once I got into Ruby the concept was a little difficult to wrap my head around.

What is OOP?

(almost) Everything in ruby is an object, which is kind of a weird concept. Objects can hold state, react to other methods, and even have a unique identity. You can call .object_id on anything in ruby and get a unique number that is never repeated.

arr = [1, 2, 3, 4]
#=> [1, 2, 3, 4]

arr.object_id
#=> 360

arr.class
#=> Array

Above you can see the .class method as well, every ruby object belongs to a class, but what does that mean?

Classes & Instances

My instructor put it like this, Classes are like little factories responsible for managing and creating instances. We can define a class for anything, and create unique methods.to.chain.onto.it!

Here's a fun example:

class Dog

  def greet
    puts "Woof Woof!"
  end

end

Bug = Dog.new

Bug.greet
#=> "Woof Woof!"

Bug.class
#=> Dog

Does this make sense? We defined a whole new class of objects called Dog, and were creating a special method for it! Think of it like .map() in JavaScript, we can only call the .map() method on an array and nothing else. While this example isn't quit as strict as that, the idea here is to create instances of dogs and a method to grab some information or interact with that dog object.

What does an instance look like?

Lets create an instance, but lets also give it a little more information. We can do this with instance variables.

class Dog
  def name=(name)
    # @name is an instance variable
    @name = name
  end

  def name
    @name
  end
end

dog1 = Dog.create
dog1.name = "Bug"

dog1.name
#=> "Bug"

Now if we were to grab that instance we named Bug, it would look like this!

# .first is a built in class method that will grab the first 
# instance of a class
Dog.first
#=> <Dog:0x000055ed811b7b90 id: 1, name: "Bug">

You can see that the Dog instance also was assigned a unique ID, this is useful for when we need to store multiple instances, with or without a name. These instances sort of resemble an array, or JavaScript object. We can even access data from them similarly to a JavaScript object.

Dog.first.name
#=> "Bug"

The Takeaway

I should become pretty clear how this structure could be useful. Instances could be users in a game, you could store them in a database, and have a separate table in that database be that users inventory. We can tie everyone together with ID's, receive a request from a client and build custom methods to interact with our data before sending back the response! The possibilities are pretty expansive, and reading Ruby is very easy compared to other languages. I cant wait to design my first little game in ruby!

My introduction to react: fun, dynamic webpages

Tyler Montobbio — Sun, 28 Aug 2022 21:37:12 +0000

In the first phase at Flatiron school we learned the fundamentals of JavaScript, which to be honest was pretty hard to wrap my head around. Until we were applying these concepts to real world things, creating our own websites, a lot of them didn't make a whole lot of sense to me.

JavaScript is difficult for me because there's many ways to produce the same result, which is sort of a double-edged sword. JSX and React was lifechanging for me. I got to read code that had that familiar "HTML" feel but produced complex JavaScript flavored webpages.

For instance, If I wanted to render a list to the DOM using JavaScript I would have to do something like this:

JavaScript

This function is assuming I have an array of objects. I'll be fetching data from an API, and then creating a card with each with the details..

// imagine listDiv is my container holding the cards
const dogs = [ 
{name: "Bug" image: "doggoimage.com/bug"},
{name: "Stella" image: "doggoimage.com/stella"}]

document.addEventListener("DOMContentLoaded", () => {
const dogCard = (dog) => {

const card = document.createElement("div")
card.className = "card"
listDiv.append(card)

const name = document.createElement("h3")
name.textContent = dog.name
card.append(name)

const image = document.createElement("img")
image.className = "good-doggo-image"
image.src = dog.image
  }
// fetch request here....
}

That's a lot of work! You might ask yourself, why should I learn react? It's just another way of doing the same thing. The above code is referred to as imperative; We are manually manipulating the DOM to achieve a specific result. With imperative programming we are telling the DOM what do to, every step of the way. This leads to repetitive code that's harder to read.

With JSX in React, I can achieve the same results with less repetition, and with its unique under-the-hood workings, I can re-use each "JSX component" over and over again without re-writing it.

Lets say we have a component called , I want to render a dog card for each of my dog objects like we did above in JS.

React

Assuming the same dog array of dog objects above..

import React, { useState } from "react"

export default function DogList(){
const [doggos, setDoggos] = useState([])

fetch("doggoimage.com")
  .then(r => r.json)
  .then(dogs => setDoggos(dogs))

const renderedCard = doggos.map((doggo) => {
  return (
    <DoggoCard name={doggo.name} image={doggo.image} />
  )
})
     return (
       <div className="card-container">
       {renderedCard }
       </div>
  )
}

Now! with all that set up, we can go down one level to our child component, the card itself. While above we set up that data that is going into each card, we can use the child component as a template for how we want that data to look.

import React from "react"

export default function DoggoCard({ name, image }){
    return (
      <div className="doggo-card">
        <span className="doggo-name">{name}</span>
        <img alt={name} src={image} />
      </div>
  )
}

This might look like the same amount, or even more work to do, but with JavaScript you'd have to do so much more to make edits, add things, even re-write the original code over and over. This format does a lot of work for us under the hood and enables us to focus on styles and the fun parts of web development. React also allows us to add unique functions to our components with only a few lines of additional code. Want to have an alternate image when you click on a card? Easy! Just add an onClick event listener to the card template and do what you want!

import React from "react"

export default function DoggoCard({ name, image }){
    return (
      <div className="doggo-card">
        <span className="doggo-name">{name}</span>
        <img 
          alt={name} 
          src={image} 
          onClick={(e) => console.log("You clicked me!")}
         />
      </div>
  )
}

Of course that console log doesn't really do much, but you get the idea. You could replace that function with a multitude of other things, even pass in a function from within another JSX component.

Conclusion

My experience with react at first was daunting, it was hard enough learning the basics of JavaScript, let alone translate that into a whole new world of syntax. If you're like me, and you have some experience with HTML then this syntax doesn't look to foreign after all. Once you get the hang of everything that's going on, you'll realize the reason why React is so popular in the web development community. Taking puzzle pieces and plopping them into place is a satisfying feeling. Creating the bones of your web-app with React becomes super easy, allowing you to spend the rest of your time trying to decrypt the mysteries behind CSS ;).

Learning Iteration: A love story (or the opposite, really)

Tyler Montobbio — Mon, 08 Aug 2022 00:02:00 +0000

What is iteration?

This was the first question I had when exposed to the abstracts that make up JavaScript methods. I didn't love all these concepts, in fact most of them made my brain hurt. I am by no means an expert, merely a student sharing his journey.

Reading pages upon pages of text and code can be daunting, stressful even. When reading about iterators I asked myself, "Why the heck would you need to "go through" or iterate over an object or array?". After a couple weeks of bombarding my brain with various other concepts it became clear to me.

To show where my learning started, here's an example.

const numbers = [1, 2, 3, 4];

for (num = 0; num < numbers.length; num++) {
  console.log(numbers[num]);
} 

//=> [ 2, 3, 4, 5 ]

This kind of makes sense, right? I chose num to represent the numbers in our array; num starting at zero, while num is less than(total length), increment num by 1 - until it reaches the length of the array. Pretty neat! This concept is easy to understand, there are many uses for incrementing numbers.

The one that boggled my brain..

The concept that took me a while to understand, going back to my preface; ...bombarding my brain with various other concepts it became clear to me... is the forEach() loop. The forEach() loop is interesting, it does exactly what it says, "Iterate through this object or array and for EACH of these items, do this!".

A simple example, lets add 1 to each item in our array.

const numbersArray = [1, 2, 3, 4];

numbersArray.forEach((num, index) => {
  numbersArray[index] = num + 1;
});

console.log(numbers);

//=> [ 2, 3, 4, 5 ]

While this also makes a lot of sense at first glance, both of these concepts can be applied to bigger, more complex things. The one I'm really trying to focus on is the forEach() loop.

forEach(biggerTHING)

I truly realized the power of the forEach() loop when I started learning about appending elements to the DOM. In JavaScript we can start with our basic HTML as you may know, and determine some CSS rules to stylize our headers, paragraphs, ect. In a situation where we have multiple elements on a page, with the same basic structure (think of yelp results displaying restaurant info) we can avoid the repetition of hard-coding each restaurant card containing all the same relevant info by using a forEach(). This also makes our code more dynamic; one day there might be 10 restaurants that fit our search criteria, but the next day, two more might open up. Writing code in this way makes our function reusable no matter how many results remain relevant without the need to go back and un-do, or re-do our hard coded restaurant cards.

Here's an example...

// Our returned fetch object:

 const restaurant = {
    name: "Midtown Sushi",
    rating: "4.3",
    location: "2801 P Street",
  };

  // To keep it simple, lets pretend that searchQuery is a
  // form that calls this function when you search for food.

  searchQuery.addEventListener("submit", (e) => {
    e.preventDefault();

    const restaurantQuery = (rest) => {
      // Select our list and give it a variable name
      const restaurantList = document.querySelector("#restaurant-list");
      // Create a 'home' for each of our fetch data items
      const card = document.createElement("div");
      card.className = "rest-info";
      const header = document.createElement("h2");
      header.textContent = rest.name;
      card.append(header);
      const rating = document.createElement("p");
      rating.textContent = rest.rating;
      card.append(rating);
      const location = document.createElement("p");
      location.textContent = rest.location;
      card.append(rating);
      // Append that new 'card' to our list
      restaurantList.append(".rest-info");

      fetch("http://your-local-restaurant-api.com")
        .then((r) => r.json())
        .then((data) => data.forEach((restaurant) => displayCard(restaurant)));
    };
  });

This example is missing tons of relevant data, and much more complex that I could really fit on a single blog post.

Really the point is, that when designing a dynamic website, we can fetch relevant data, and use JavaScript to give that data homes for their key/value pairs. forEach() of our restaurant cards, we make this template do the work for us! This kind of template gives us so much flexibility and makes it possible to re-use snippits of code instead of having to go back all the time and edit stuff.

Conclusion

While this topic goes much deeper than what I've shown, its a good illustration of the power JavaScript gives us in web development. Iteration provides a unique tool to a repetitious problem, it allows us to apply simple (or complex) actions to help us avoid repetition. I'm still learning, and I'm sure there's mistakes in my examples but I hope this will help a beginning developer understand a little bit more about iterators and their value within our code. If you think there's a better, simpler, or even just a cleaner way to illustrate my example please drop a comment below and I can edit this!

Thanks for reading!
-Tyler