DEV Community: jimenezfede

Typescript with React

jimenezfede — Mon, 24 Oct 2022 20:29:10 +0000

I didn't think typescript with JavaScript was too bad. But when I tried it with React, I had a really hard time getting used to it. From passing down props, to setting up state, and then returning HTML, I really struggled.

Props
Whenever passing props into a component, the type of props has to be identified. This is more lines of code to write, but it is worth it, so you don't have to try to remember which properties were in the props. Or having to flip back and forth between the file passing the props and the file receiving them. The props can be identified by types or interfaces.

type BlogProps = {
name: string;
}

export const Blog = ({name}: BlogProps): JSX.Element => <div>{name}</div>

State
Before typescript, setting up state was simply done inside the parenthesis of setState. And when doing so with primitive types, it's still the same, just through a string or number inside the parenthesis. But when setting up state with complex types, then the type has to be identified also. This can be done by writing the type before setting state, then passing that type between setState and the ().

export const Blog = (): JSX.Element => {
const [name, setName] = useState('');
useEffect(() => setName('fede'), [])
return (<div>{name}</div>)
}

Errors
Typescript errors can seem to be a paragraph long. It's also a lot of new syntaxes to get used to. When installing @types/react we get the whole react types library. This means all the HTML elements. This is what's used to check if the element is being used right. And by used right, I mean using the attributes the element has right. This also means not trying to use attributes that don't exist in the element. Then there are the custom elements. The errors from these are usually from defining the right type for the props going in them.

Typescript seems to be the solution to having to guess what type of value passes through a component. This means no more having to flip through files to see what kind of prop I'm getting anymore. It came at a cost of losing my mind learning it, but it was worth it.

Sources

- https://react-typescript-cheatsheet.netlify.app

Intro to Bootstrap

jimenezfede — Mon, 10 Oct 2022 14:01:18 +0000

I always enjoyed drawing. I'm pretty decent at it. But when it comes to styling a webpage, it's as if I can't stay coloring inside the lines, so to speak. Learning CSS is pretty difficult for me. And using bootstrap is like grabbing a drawing, placing a piece of paper over it, then drawing the outline. Bootstrap does all the heavy lifting for styling.

Structure
Bootstrap has a grid system structure with containers that are wrappers for rows, which then are wrappers for columns. To use a container, simply assign the element's class to the type of container as so <div class='container'><div>. Bootstrap has three different types of containers: .container, .container-fluid, and .container-{breakpoint}. Breakpoints are the size of the container. There are six breakpoints: xs, sm, md, lg, xl, and xxl. The same goes for using rows and columns.

Sass
Bootstrap uses sass variables and mixins to query breakpoints. Variables are prefixed with $ and can be found in _variable.scss. Media queries are prefixed with @ and are used through sass mixins.

Components
Bootstrap has many components.

Alerts
Badge
Breadcrumb
Buttons
Button group
Card
Carousel
Collapse
Dropdowns
Forms
Input group
Jumbotron
List group
Modal
Navs
Navbar
Pagination
Popovers
Progress
Scrollspy
Tooltips

Thanks to bootstrap, styling is a lot easier. Still gotta do the research on how to use bootstrap, but after a couple of hours on the docs, and some practice, it finally clicks on how to use it. And it is definitely worth the time to do it. Cause afterwards, you may just feel like Michelangelo styling the sistine chapel on your webpage. But if not, then at worst, you'll be able to stay coloring inside the lines in your webpage, so to speak.

Sources

Intro to Vim

jimenezfede — Mon, 26 Sep 2022 07:15:11 +0000

Ever been stuck in the terminal for not including a message when committing? Can't get out by pressing esc or q. Seriously had to google how to exit vim or nano every time.

Madness? This is a top-of-the-line text editor!

The most confusing part of vim to me was the modes. What's the point of all these modes? Well, after a lot of research, I found my answer. Now bear with me here, I'm still new to coding, so every time I hear of a keyboard shortcut I get excited. It's like finding hidden treasure. And you know those coders that are so good their hands never leave the keyboard to touch the mouse? They are like grand master coders to me. Well, with these text editors, the mouse doesn't exist. There is no scrolling up and down and clicking on a word with the mouse. So how does one move around? With the keyboard. For example, the letters h, j, k & l are used to move left, down, up & right. What if I need to type using those letters? Switch modes, normal mode is the movement mode, and insert mode is for typing. This is how one keeps their hands off the mouse or the arrow keys, for the most part. Now when first starting, like I am, being restricted to only these few commands along with a few others I learned on :Tutor from nvim keeps me pretty slow. Kind've like how I started learning to code with var. Now, I can't even remember the last time I actually used var. Whenever I come across var, I'm like, 'what's this?'.

List of basic moment commands

move around = h - left, j - down, k - up, l - right
hope forward by word = w
hope backwards by a word = b
jump to the beginning of line = SHIFT I
jump to the end of line = SHIFT A
search for word = / (equivalent to CTRL F)
- jump through results = n or backwards SHIFT N

List of basic editing commands

insert before the cursor = i
insert after the cursor = a
add line below and enter insert mode = o
add line above and enter insert mode = SHIFT O
copy/yank a word = y
copy/yank line = yy
paste line one line below = p
delete character = x
delete line = dd (goes to same register as yank command)
undo last command = u
exit to normal mode = Esc || CTRL [
Enter Visual Mode = v
highlight a word = w
highlight line below = j
delete current word and forward = dw
delete current line plus one down = dj
yank word = yw
yank current line plus one down = yj
help with specific word = :help <topic> or :helpgrep <topic>

Now my first interaction with vim, back when I forgot to commit a message, I saw a plain, boring editor. No colors or special fonts. Well, vim is the most powerful when it's stripped of all those things that make it pretty. But vim is very customizable, just not easy to do. So here's where neovim comes to the rescue.
Not only are there so many configurations for neovim, but it's easier to configure.

Just like with learning any new language, it's best to start with the basics. I started with :Tutor with neovim. There's also vimtutor from vim, which says it's only 20 minutes. Neovim's tutor took me longer than 20 minutes, but it doesn't have colors. Vim's tutor vimtutor looks like it might be shorter.

Sources

http://derekwyatt.org/vim/tutorials/novice/#Welcome

Docker

jimenezfede — Mon, 22 Aug 2022 05:08:20 +0000

What does Docker do? What are containers? What are images? Why is this service so popular? I kept hearing about docker and how it uses containers. But had no clue as to why or what exactly these containers are or do. So after spending a couple of hours on dockers website, I got my answers.

Images

To create an image, Docker uses a file called Dockerfile. This file contains a list of commands of what should be in an image when it gets built. Once this list is completed, it’s sent to the Docker engine which then builds the image by running the commands. Each of these commands are layers. When a change is made on a certain layer, then only that layer gets rebuilt. This is why the containers are ‘lightweight’. So let’s say I have an outfit. My shirt, pants, and shoes are separate layers. And if I want to change my shirt, instead of having to get a whole new outfit, I can just throw away my shirt and get a new one.

Containers

A container is a process that’s kept separate from the rest of the system. It holds all the configurations and supporting files, which are images, needed for an app to run. It can have one or multiple images. The set up is made so that if an image goes down, then it can easily and quickly be replaced. A container also has its own file system and network. This is why when running the container, a specific port needs to be given. And this is also what makes it really secure. And if more than one container is needed on the same network, then they can be made to share the port. Containers are simply set on ‘isolation’ mode by default.

Docker Client

Docker Client are the commands to run when communicating with Docker.

Docker build - builds the Dockerfile
Docker run — runs a new container
Docker image - manages an image
Docker container - manages a container
Docker pull — pulls an image from DockerHub
Docker push - pushes an image to DockerHub

Docker solves the environmental issues of running an application on ones own computer. No more having to worry about if my computer is gonna give me problems with running my app. I have a hard enough time just getting through git commands and eslint format issues when trying to commit.

I can have my whole app run with docker. The code I write, the database, whatever I want. Simply just set everything in containers and let them work their magic. Gives me more time to code more console.log(‘Hello World’).

Sources

MySQL

jimenezfede — Mon, 15 Aug 2022 03:55:00 +0000

Short for Structured Query Language, is a language for handling data in a relational database management system (RDBMS) like MySQL, Oracle, Postgres, etc. So think of a spreadsheet going super Saiyan by having the ability to sort out all the columns and rows in any combination possible really fast.

SYNTAX
Its common practice to use all capital letters when writing SQL commands. And to end statements with a semicolon. The capital letters are more for readability so that it's easy to distinguish when SQL commands are being used. But the semicolon is required in some RDBMS like MySQL. The reason is, a command may run more than one line, and so a semicolon is used to establish the end of the command.

NAVIGATING
Just navigating through databases is a learning process. Because whenever one of these databases is started, it just shows a blank prompt. There is a help command that lists a lot of helpful commands. The command show databases will list all the databases if any. Then the command use followed by the name of the database name selects that database. Once using a database, show tables will list all the tables. Then another useful command is describe which will show how the table is made.

w3schools has these commands as the most common ones

SELECT
UPDATE
DELETE
INSERT INTO
CREATE DATABASE
ALTER DATABASE
CREATE TABLE
ALTER TABLE
DROP TABLE
CREATE INDEX
DROP INDEX

CREATING
Creating a database is as simple as just using CREATE DATABASE dc_universe. But creating a table takes a little more. With creating a table, the table's name, column name, and the datatype of the values going into that column. There are a lot of datatypes to choose from. But for this, I will just use int (integer) and varchar(variable character). Varchar takes in a number representing the limit of characters for it. 255 is commonly used.

CREATE TABLE superheroes(
ID int,
Alias varchar(10),
firstName varchar(10),
lastName varchar(10)
);

INSERTING
Then to add to the table, use the insert into keyword followed by the name of the table, then the keyword with the information to add.

INSERT INTO superheroes VALUES (1, 'Batman', 'Bruce', 'Wayne');
INSERT INTO superheroes VALUES (2, 'Superman', 'Clark', 'Kent');
INSERT INTO superheroes VALUES (3, 'Wonder Woman', 'Diana', 'Prince');

SELECTING
From here, to see the actual values in the table, the SELECT and FROM keywords are needed. SELECT chooses the column. FROM picks the table.
SELECT Alias FROM superheroes; will list just the alias name.
SELECT * FROM superheroes; will list all the columns in the table.

DELETING
I actually made a mistake adding batman to the table while practicing. I forgot to add to the ID column. Thankfully, deleting is pretty easy to do.

DELETE FROM superheroes
WHERE ID is NULL;

WHERE filters out the table by the criteria. Here I'm filtering out where the ID doesn't have a value since I forgot to give it a value.

Using SQL can seem tedious when just starting to use it. I myself kept getting error messages from using the wrong syntax to trying to access tables that don't exist. But like anything else, just takes practice.

Sources

EXPRESS JS

jimenezfede — Mon, 08 Aug 2022 05:05:00 +0000

Express is a very popular application to create servers in node. And for good reason, it's really convenient to use. And when learning anything, gotta start with the basics.

To set up express, the express package needs to be downloaded npm install express. Then require it in the file with const express = require('express'). To create the express application, simply just call it and assign it to a variable like so const app = express(). Now that the application has been created, the ‘listen’ method is used to make it run on a port, app.listen(3000). And with express, the order in which it is set up does matter. So the listen method will have to be at the bottom. Even below any other methods that will be set up.

In the internet world, the slashes in the url direct to specific routes. The code above creates a homepage on route localhost:3000. So any interaction with the server has to be done with the route. And here is where Express excels. Express has many methods to interact with routes.

Route Methods

Express route methods, like get, post, etc, come from HTTP request methods. The get method takes in at least 2 arguments. The first is the route. The route can be a string or a variable. The second argument is a function that acts like middleware by handling the request object sent to the route.

app.get('/', (req, res) => {
res.send('Homepage')

For example, this get request has the route set to the homepage with just a forward slash ‘/’. And the middleware is just a function that has request and response parameters. Then it just sends a response ‘Homepage’ when a request is made to the homepage.

Multiple Middlewares

A route can have multiple middleware functions to handle the request object. When using multiple functions, then having a third parameter called ‘next’ is needed. The purpose of this ‘next’ function is to pass the request to the next middleware function in that route or to another different route.

app.get('/user/:id', (req, res, next) => {
if (req.params.id === 'Batman') next('/Batcave)
else next()
}, (req, res, next) => {
res.send('Go away Robin')
})

Express also has a 'use' method that will pass the middleware for every method used below it. For example, passing json through will then automatically parse data when sending it.

app.use(express.json)
app.post('/batsignal', (req, res) => {
res.send('Nana Nana Nana' + req.body.batman)
})

Chainable Route Handlers

A route can be chained with multiple handlers, like get, post, put, etc. Which helps not to have repeat code. This is done with the Router() method which makes a new router object.

const express = require('express')
const router = express.Router()
router.route('/:batsuit')
.get((req, res) ⇒ {
res.send(`Get batsuit ${req.params.batsuit}`)
})
.post((req, res) ⇒ {
res.send(`Add batsuit ${req.params.batsuit}`)
})
.put((req, res) ⇒ {
res.send(`Update batsuit ${req.params.batsuit}`)
})

Express has so many more methods, these are just the ones I’ve been exposed to the most. Except for route chaining, I just learned about that one. I'm already daydreaming about how pretty my code will look when I use it. The express docs are pretty easy to navigate. After writing this, I am definitely a big fan of express.

Sources

Python

jimenezfede — Mon, 27 Jun 2022 13:47:42 +0000

Python is a very popular coding language. Its creator Guido van Rossum made it to be read easily and to be used for any task. Guido has a master’s degree in computer science and mathematics, which explains why python works great with mathematics. It’s open-source so anybody can help by contributing to the language. Today python’s latest update is a major version 3. As much as I wanna go over everything in python, I’m going to just go over the very basics of syntax and forming strings. Python uses a new line to finish an operation, whereas javascript uses a semicolon. For loops, functions, and classes are made through spaces with python, javascript uses curly braces. At least one space is needed, but four is the standard practice. The amount of spaces chosen has to be used on each line for the block of code to work, else python gives an error.

Variables

Python creates variables by assigning them to a value. Theres no declaring a variable in python as there is in javascript.

name = 'Bruce Wayne'

Pseudo coding, writing comments, is done by writing after the # character. In python, a variable can be set to a particular datatype through a process called casting.

x = str('1') # prints '1'
x = int(1) # prints 1

Type method is a python function that returns the datatype of a variable

print(type(name)) # prints <class 'str'>

Python's string datatype can be formed with single or double quotes. For a string that will run more than one line, they can be formed with three single or double quotes.

achilles = '''Let no man forget how menacing we are, we are lions! Do you know
whats waiting beyond that beach? Immortality! Take it! It's yours!'''

If looking for a word inside of a string, the keyword in can be used.

print('lions' in achilles) # prints true

Can also use an if conditional to check for a word

sparta = 'SPARTANS! what is your profession?'

if 'profession' in sparta:
  print('HA-OOH! HA-OOH! HA-OOH!') # prints HA-OOH! HA-OOH! HA-OOH!

Or can check if a word isn’t in a string with the not keyword

if 'cook' not in sparta :
  print('false') # prints false

To turn the characters in a string from lower case to upper case, theres an upper method.

upperCaseBatman = name.upper()
print(upperCaseBatman) # prints BATMAN

print(upperCaseBatman.lower()) # prints batman

Adding a string and a variable can be done with the addition operator.

def vengeance():
  print('I am ' + name)

vengeance() # prints I am Batman

Python has many methods for strings. These are just a few. The syntax is pretty easy to catch on. And I must admit, it does make python very easy to read. Also makes it look really clean.

Sources

https://www.w3schools.com/python/default.asp

npm install care-package

jimenezfede — Mon, 20 Jun 2022 04:53:47 +0000

Node.js is a repository of open-source software. npm manages the packages in node.js. So if I wanted to use somebody else’s code library, like underscore.js, then I would need to install it into my own project through npm.
This saves me time and headache from having to write my project from scratch. But first, I would need to install npm in my computer globally to use it.

What’s the difference between installing globally and installing in my project (locally)? Well, let’s get into that.

Installing something globally makes it accessible from anywhere in my computer’s terminal. Whereas installing something locally, like in a new project’s directory, will make it accessible only in that directory. So if I create another project, let’s call it ‘callOfDuty’, then the underscore’s package won’t be accessible here. Why not just install everything globally so I won’t have to keep installing packages on each project every time I make a new project? Well because some packages can take up a lot of memory if it is also using some other package to run its own. This brings up a package’s dependencies.

When installing a package, npm will read the package’s project.json file. This file will have a dependencies property that will list any other packages it uses. So npm will also install those other packages as well with their dependencies also and so on. I mean look at all these dependencies.

Therefore it’s probably best to just install all this into a project’s directory.

What is nvm? Nvm manages the version of node.js. So if I had multiple versions of node.js installed on my computer, nvm would be in charge of each node.js version. Now, why would I want to have multiple versions of node.js on my computer? Well, some packages installed on a certain project may not be up to date, so they may still be using an older version of node.js. Therefore, having an older version could be useful.

How are packages made? To create a package, simply type npm init in the terminal inside of the directory for the project. Then just answer a few questions npm has about the package. Another option is to type npm init -y, and npm will create the package with default values. And those default names can be changed later.

Resources:

Git Thanos

jimenezfede — Wed, 27 Apr 2022 01:26:16 +0000

Git can be pretty scary. Especially for a person that’s new to coding like me. But the way to get better , no pun intended, is to get familiar with it. So let’s start off with what git is. It's a software that tracks changes in repos. And yes, a repo is short for repository. A repo consists of snapshots, each snapshot is called a commit. I create a repo called ‘getThanos’ in my github account. Then I clone it to my local computer by typing git clone nameOfTheRepoGoesHere. The repo comes with its first commit named ‘main’.

Git add
I start working on my file getThanos.js. My first edit is to gather all the avengers. I like this edit so I add it to my staging area by typing git add getThanos.js. The staging area is where you place your edits before making another commit of them. The staging area notifies git that there’s been some changes to the file.

Git commit
So now the avengers have a plan to get thanos. But this is risky and dangerous, so I wanna be safe and commit now. I do this by typing git commit -m 'gathered avengers and now have a plan'. The -m is for adding a message to my commit so that I know what edits that commit has. In this case, that commit has the avengers plan to get Thanos.

Git branch
Now before going forward with the plan, I wanna make some sort of version to try out my plan, so that if something goes horribly wrong, I can go back. Well in git, they have branches, where you can do edits and it won’t affect the main branch. So I do this by typing git branch sendOutSpiderman.

Git checkout
I created a branch, but I’m still on the ‘main’ branch. To do edits on the ‘sendOutSpiderman’ branch, I have to check it out with the command git checkout sendOutSpiderman. So now I proceed with the plan. But spiderman runs into problems, he’s not focused since he wasn’t accepted into MIT. Okay so this plan isn’t gonna work, let’s go back to the main branch by typing git checkout main. We have another plan to send out the Hulk. So we create another branch, git checkout -b sendOutHulk. Combining ‘checkout’ with ‘-b’ is a shortcut to creating a branch and checking it out in one step.

Git merge
Now we proceed with the Hulk. He couldn’t get Thanos, but there is some good in this edit, spiderman got accepted to MIT here. So I wanna save this edit and bring it into my main branch. To combine branches, git has a merge command. I save these edits and commit them, git add getThanos.js then git commit -m 'spiderman got into MIT'. Now I’m ready to combine them, so I checkout my main branch with git checkout main then combine with git merge sendOutHulk.

Git revert / git reset
Now let’s fast forward to the end, you know where Ironman snaps his fingers. Let’s say I’m too heartbroken by this and want to go back right before that happened. There’s two ways git allows this. One is reset and the other is revert. Reset will move my current branch main back a commit. Which they say is like “rewriting history”. But when sharing a branch with others, reset can confuse other users. Revert will move the current branch to a new commit. This new commit won’t have the edits made in the commit I didn’t want. So in the situation with Ironman, let’s say my commit before that was when Star-Lord got mad at Thanos for killing Gamora. Revert will make a new commit after my current commit with Ironman snapping his fingers, but this new commit will be a copy of the Star-Lord commit. And now I can rewrite the ending. In this way, my Ironman snapping his fingers is still in my history, and I can use it for my bloopers.