DEV Community: Miguel T Rivera

New Year: New Goals

Miguel T Rivera — Thu, 14 Jan 2021 01:30:30 +0000

Last fall, I started blogging. However, I took a break and didn't get back to it. I plan to start again but will aim for two posts monthly. I believe more practice writing posts will result in better content.

Things I'm working on now:

I decided to do the devchallenges full-stack path. I'll be writing about my progress.
Made significant progress with Python. I hope to use Django as part of the devchallenges path.
I'm going to earn AWS certifications. The plan is first the cloud practitioner, and than solutions architect.
Learn more about Docker and Kubernetes. Currently, using Docksal for a volunteer work. I would like to know more about it.
I want to hone my SQL skills, so I plan to expand knowledge with PostgreSQL.

Resources:

devchallenges

PostgreSQL Tutorial

Docker and Kubernetes - Full Course for Beginners

AWS Certified Cloud Practitioner Training 2020 - Full Course

AWS Certified Solutions Architect - Associate 2020 (PASS THE EXAM!)

Photo by Matheus Bertelli from Pexels

Current Status

Miguel T Rivera — Mon, 21 Sep 2020 23:26:19 +0000

I couldn't think of anything to write this week, but thought I would post a general update:

1) I've been learning Python🐍 and it's been going well. Currently, learning about Strings, next up is Lists.

2) Decided to begin my React Native project. I'm not sure how it will go, but want to finish it before November. I'll attempt to document the process, so keep an eye out.

3) Recently bought Atomic Design by Robert Frost. I plan to post a review of it soon.

4) I was awarded a copy of Learn Eleventy from Scratch by Andrew Bell. Furthermore, I'll post a review of this course too. Stay tuned.

Time management and planning will be key to this being successful. Good luck everyone!

Cat Tax: Miss Meow Meow

NOTE: My desk isn't messy anymore :)

Book Review: Code by Charles Petzold

Miguel T Rivera — Mon, 14 Sep 2020 19:52:38 +0000

Introduction

As part of an online syllabus, one of the requirements is to read the book: Code: The Hidden Language of Computer Hardware and Software by Charles Petzold. This is a review of the paperback edition. The book targets people who have a general interest in computing. You will build a computer from scratch, using old technology. It assumes no prior knowledge. From the back of the book:

Using everyday objects and familiar language systems such as Braille and Morse code, author Charles Petzold weaves an illuminated narrative for anyone who's ever wondered about the secret inner life of computers and other smart machines.

Listed Chapters

Chapter One – Best Friends
Chapter Two – Codes and Combinations
Chapter Three – Braille and Binary Codes
Chapter Four – Anatomy of a Flashlight
Chapter Five – Seeing Around Corners
Chapter Six – Telegraphs and Relays
Chapter Seven – Our Ten Digits
Chapter Eight – Alternatives to Ten
Chapter Nine – Bit by Bit by Bit
Chapter Ten – Logic and Switches
Chapter Eleven – Gates (Not Bill)
Chapter Twelve – A Binary Adding Machine
Chapter Thirteen – But What About Subtraction?
Chapter Fourteen – Feedback and Flip-Flops
Chapter Fifteen – Bytes and Hex
Chapter Sixteen – An Assemblage of Memory
Chapter Seventeen – Automation
Chapter Eighteen – From Abaci to Chips
Chapter Nineteen – Two Classic Microprocessors
Chapter Twenty – ASCII and a Cast of Characters
Chapter Twenty-One – Get on the Bus
Chapter Twenty-Two – The Operating System
Chapter Twenty-Three – Fixed Point, Floating Point
Chapter Twenty-Four – Languages High and Low
Chapter Twenty-Five – The Graphical Revolution

Overview

Each chapter contains the following:

A real-world problem
Terms and definitions
Diagrams and/or pictures
Solving the real-world problem
History
Summary

Final Thoughts

I rate this book a three out of five. Although its full of technical and historical information, its not beginner friendly. Some of the information here is a refresher for me, but its very intense. I enjoyed chapter eleven, since I was not familiar with gates. If you want to learn about this information, IMO, a project-oriented resource is best. I linked some courses which you can audit for free.

Resources

Syllabus-Python & Django Focus
Code Book
CS50 - edx
Build a Modern Computer from First Principles - Coursera

Photo by Kaboompics .com from Pexels

Divide by Zero Equals Infinity?

Miguel T Rivera — Tue, 08 Sep 2020 00:08:21 +0000

Introduction

Wrapping up the freeCodeCamp metric-imperial converter project, I discovered a strange bug. A possible user input is a fractional number w/unit such as 3/4mi. However, there is a possibility a user could input 3/0mi. Decided to test this out in the console and got the following:

3/0
// Infinity

I was expecting an error but got the value Infinity. Let's explore this to see if we can find out why.

Explore

First, I went to MDN to see if that was the expected result:

2.0 / 0     // Infinity

2.0 / 0.0   // Infinity, because 0.0 === 0

2.0 / -0.0  // -Infinity

It looks to be the expected answer, but I noticed something. Dividing by a negative zero results in a negative Infinity. Not sure what that means, I decided to check the ECMAScript.

NOTE: ECMAScript is the official specification of JavaScript.

According to the ECMAScript:

The result is determined by the specification of IEEE 754-2019 arithmetic

...

Division of a nonzero finite value by a zero results in a signed infinity. The sign is determined by the rule already stated above

Unfortunately, I do not have access to IEEE documents. So my journey ends here. However, here are some lecture notes, see pg 10 I found about the subject.

Solution

At first I tried a try/catch solution:

var [numerator, denominator] = num.split('/');
try {
    // The plus converts a string to a number
    result = +(numerator) / +(denominator);
} catch(e) {
    throw new RangeError('Cannot divide by zero');
}
// Infinity

As expected we get Infinity. Searching MDN I found a useful method [isFinite]:(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isFinite)

The global isFinite() function determines whether the passed value is a finite number. If needed, the parameter is first converted to a number.

I used that to come up with my final solution:

if (isFinite(result)) {
  return result;    
}
return 'Cannot divide by zero';

Of course, a user could input Infinity/Infinity but we'll save that for another time.

Final Thoughts

It was interesting that an error would not result from dividing by zero. According to the IEEE specification, which the ECMAScript implements, it follows the rules. Something to look out for on your coding journey. The results you expect might not be so clear.

Resources

MDN - Division(/)
ECMAScript 6.1.6.1.5
MDN - isFinite

Image is Lina from Dota 2

How to Draw a Pretty Pattern with Turtle

Miguel T Rivera — Wed, 02 Sep 2020 18:34:13 +0000

Forgot to post last week but here we go. I decided on Python🐍 to add to my skillset. Primarily back-end (Flask, Django) but may branch out in the future. I’m following the guide posted by /u/TravisJungroth on reddit. I’m currently going through Runestone Interactive and the thinkcspy course.

NOTE: You should be familiar with Python basics such as variables, for loop, and functions. Also, the Turtle library.

This is the pattern we will create:

At first this pattern looks very complex, but if we break it down into small chunks, its manageable. Looking for shapes, we see can see, a pie slice:

If we look further, we notice a square:

Further examination, we see a grid of four squares:

Let’s start small and work are way to a solution. First, let’s import the turtle library and setup our canvas.



import turtle

tess = turtle.Turtle()
wn = turtle.Screen()

tess.speed(10)
tess.pensize(2)
tess.color('blue')
wn.bgcolor('lightgreen')

Let’s examine each line:



import turtle

This imports the Turtle library.



tess = turtle.Turtle()

This creates tess our turtle object.



wn = turtle.Screen()

wn creates the screen object where are pattern will be drawn.



tess.speed(10)

This adjusts the speed of the pen draw. 1 is slow and 10 is fast.



tess.pensize(2)

This adjust the size of the line drawn.



tess.color('blue')

This sets the pen color to blue.



wn.bgcolor('lightgreen')

This sets the canvas background color to lightgreen.

Now all the setup code is done, let’s tackle the problem.
Let’s start with creating a drawSquare function.



def drawSquare(t, sz):
    for i in range(4):
        t.fd(sz)
        t.left(90)

Let’s go through each line:



def drawSquare(t, sz):

This declares the drawSquare function that takes two parameters. t represents a turtle object and sz the size of a square side length.



for i in range(4):

We create a for loop that iterates four times: 0,1,2,3.



    t.fd(sz)

This moves the turtle object forward sz units.



   t.left(90)

This rotates the turtle 90 degrees.

Let’s try our function by calling it:



drawSquare(tess, 100)

We call drawSquare with two arguments: tess as the turtle object and 100 as the size. We should get the following result:

Now that we know our drawSquare works, we can start making the grid. Something to keep in mind. Back in elementary school, I used a compass to draw unique shapes or circles. Furthermore, I centered the compass to draw the shapes. This knowledge will help us later on. Let’s build the drawGrid function.



def drawGrid(t, sz):
    for i in range(4):
        drawSquare(t, sz)
        t.left(90)



def drawGrid(t, sz):

We declare the drawGrid function which takes two parameters. t is a turtle object and sz is the size of the square side length in the grid.



for i in range(4):

Again, we create a for loop that iterates four times: 0,1,2,3. This accounts for the four squares in the grid.



    drawSquare(t, sz)

This calls the drawSquare function with two parameters. t is the turtle object and sz is the size of the square.



t.left(90)

This will turn the turtle left 90 degrees.

Now that our drawGrid function is complete, let’s test it out.



drawGrid(tess, 100)

This calls drawGrid with two arguments. tess is the turtle object and 100 is the square length size.

We should get the following result:

NOTE: Arguments and parameter have different meaning. Arguments is data passed to function and parameters are what the function accepts.

Notice where the turtle is currently. It's at position (0, 0). This is the origin for drawing the squares and the grid. This is needed so the grid does not get distorted when rotating them, as we will see later on.

We are almost done. Now we need to create the pie slices in the circle. Earlier, if you looked at the pretty pattern we're making, you might of noticed something:

It’s a stack of grids that rotate slightly. Another observation, there are five pie slices in each square of the grid. Let’s wrap this up:



def main():
    for i in range(5):
        drawGrid(tess, 100)
        tess.left(18)

main()

Line by line:



def main():

We declare a main function to hold our code. This isn’t required but it keeps the code organized.



 for i in range(5):

Remember the five pie slices? Yes, we iterate that many times, which creates five grids. This for loop iterates five times: 0,1,2,3,4.



drawGrid(tess, 100)

We call drawGrid with two arguments. tess as the turtle object and 100 as the square side length.



tess.left(18)

After a grid is drawn we turn 18 degrees left. You might wonder, where does the number 18 comes from? Remember, we turn 90 degrees after drawing each square. Since we are drawing five grids we divide that to get the turn angle after each grid is drawn. 90 // 5 = 18.

Final code:



# pretty-picture.py
import turtle

tess = turtle.Turtle()
wn = turtle.Screen()

tess.speed(10)
tess.pensize(2)
tess.color('blue')
wn.bgcolor('lightgreen')

def drawSquare(t, sz):
    for i in range(4):
        t.fd(sz)
        t.left(90)

def drawGrid(t, sz):
    for i in range(4):
        drawSquare(t, sz)
        t.left(90)

def main():
    for i in range(5):
        drawGrid(tess, 100)
        tess.left(18)

main()

We could refine this further and move the turtle setup code to the main function. I hope this tutorial helped you in problem solving. Although the problem looked difficult at first, changing it to small bits reduced its complexity. For more information, checkout the resources below:

Additional Resources
Turtle Library Documentation
Runestone Interactive

Cover Photo by Iva Muškić from Pexels

Error Handling: Read the console output!

Miguel T Rivera — Tue, 18 Aug 2020 22:54:53 +0000

I'm currently going through Metric-Imperial Converter project on freeCodeCamp. Furthermore, I'm working on the Error Handling part of the user stories.

I've encountered different types of error, but I'll focus on one for this article.

TypeError: Cannot read property 'includes' of null
    at ConvertHandler.getNum (/home/username/webdev/metric-imperial-converter/controllers/convertHandler.js:24:13)
    at /home/username/webdev/metric-imperial-converter/routes/api.js:21:36
    at Layer.handle [as handle_request] (/home/username/webdev/metric-imperial-converter/node_modules/express/lib/router/layer.js:95:5)
    at next (/home/username/webdev/metric-imperial-converter/node_modules/express/lib/router/route.js:137:13)
    at Route.dispatch (/home/username/webdev/metric-imperial-converter/node_modules/express/lib/router/route.js:112:3)
    at Layer.handle [as handle_request] (/home/username/webdev/metric-imperial-converter/node_modules/express/lib/router/layer.js:95:5)
    at /home/username/webdev/metric-imperial-converter/node_modules/express/lib/router/index.js:281:22
    at Function.process_params (/home/username/webdev/metric-imperial-converter/node_modules/express/lib/router/index.js:335:12)
    at next (/home/username/webdev/metric-imperial-converter/node_modules/express/lib/router/index.js:275:10)
    at urlencodedParser (/home/username/webdev/metric-imperial-converter/node_modules/body-parser/lib/types/urlencoded.js:91:7)

This seems intimidating at first, but the solution may be located in the first few lines. Let's look at the first line:

TypeError: Cannot read property 'includes' of null

There are two includes methods: one on the String object, and the other the Array object.

Note: the Array includes is case-sensitive when comparing strings and characters.

I should be passing a string or an array as an argument, but its receiving null as the value. Let's if the error message can still help us:

at ConvertHandler.getNum (/home/username/webdev/metric-imperial-converter/controllers/convertHandler.js:24:13)

From this we can gather that it takes place in the getNum method part of the ConvertHandler module.

Let's look at the code:

this.getNum = function(input) {
    var result = null;
    var num = null;
    var numRe = (/\d\.?\d*\/?\d?\.?\d*/g);

    // Check if fraction
    if (num.includes('/')) {
    ...
    }
  };

A simple mistake. I forget to update the num variable. I set it to null at first, since it receives a value later.

Revised code:

this.getNum = function(input) {
    var result = null;
    var num = null;
    var numRe = (/\d\.?\d*\/?\d?\.?\d*/g);

    num = input.match(numRe).join('');    // Fix Type Error

    // Check if fraction
    if (num.includes('/')) {
    ...
    }
  };

I hope this helps you with debugging. The console can be a valuable resource in squashing bugs.

NOTE: Recently, I improved the code. However, I think others might benefit from my mistake, and help with their own debugging.

Resources:
String includes
Array includes

Photo by Franco Atkins from Pexels

New Journey

Miguel T Rivera — Tue, 11 Aug 2020 05:21:59 +0000

Hello, my name is Miguel T Rivera. I’m a self-taught developer going through the freeCodeCamp program. This will be my first foray into blogging. Some of the material that will makeup my posts:

React Native: I plan to create a mobile app for my mom. I’m still not sure this is the best solution, but I want to see it through.
Python / Go: I want to learn another language for back-end development. I still plan to build with Node.js, but would like to have another option. Both have pros/cons but will focus on one near the end of the month.
freeCodeCamp: I’m going through the curriculum, currently at the Quality Assurance Projects section.
Much more

My goal is to reinforce my learning and show my voice to prospective employers. I plan to post every Monday but may post at other times as needed. I hope you can take away something from my posts as I start this new journey.

Photo by Simon Matzinger from Pexels