DEV Community: Austin

VS Code & Web Dev

Austin — Thu, 23 Jul 2020 02:15:15 +0000

There are many different text editors out there but by far one of my favorites is VS Code. It's an incredibly lightweight option with the added benefit of being open source makes it a great choice for new developers or experienced professionals. In this article, we are going to talk about some great extensions to use, and how to install if you don't already have it.

Extensions

An extension is a way to add features and functionality to VS Code examples include languages, debuggers, and tools.

Beautify

While programming my main goal is to get the program, feature, or product running quickly (yes, of course after I seek to find ways to optimize) and with that formating usually falls to the wayside. One of my favorite extensions is to help me quickly format is Beautify.

Beautify is a great way to format the HTML, JS, and more.

Better Comments

The next one I use quite often is Better Comments. I am an incredibly visual person when it comes to learning. The Better Comments extension will help you create more human-friendly comments in your code.

With this extension, you will be able to categorize your annotations into:

Alerts
Queries
TODOs
Highlights
Commented out code can also be styled to make it clear the code shouldn't be there
Any other comment styles you'd like can be specified in the settings

Chrome Debugger

Lastly probably the most needed extension is incorporating a debugger. The one that I use for Web development is Google Chrome Debugger.

The benefits here allows you to:

Setting breakpoints, including in source files when source maps are enabled
Stepping, including with the buttons on the Chrome page The Locals pane
Debugging eval scripts, script tags, and scripts that are added dynamically
Watches
Console

If you thought any of these extensions are great or would like to try Visual Studio Code here is the link to download: https://code.visualstudio.com/download

Already using Visual Studio Code, put your favorite extension in the comments below! Thanks for reading follow for more!

Angular Component Building Blocks

Austin — Sat, 13 Jun 2020 18:24:47 +0000

This is a continuation of my Angular series, in the last article we talked about how to set up Angular on our device and how to create a new project.

(Find the first article here: https://dev.to/amsuarez/getting-started-with-angular-4p37)

In this post we are going to talk about the role components play in Angular and how to display data on to an HTML file.

What are Angular Components

Angular components form the data structure for your application. Each component has a set of files that are automatically created when components are generated. These files include two main files that we will focus on are the HTML and the TypeScript file located in our App component.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'tutorial';
  projects = ["HTML Basics", "CSS Fundamentals", "Angular Foundation"];
}

app.component.html

<div>
</div>

You may wonder why the HTML document is incredibly simplistic that is because in Angular components can embed into other html documents. In simple terms this component is just part of the public HTML index.html document.

In fact to illustrate this lets look at the larger HTML document (index.html)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tutorial</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Here we can see familiar tags for HTML such as head, body, and document declaration. Among these common elements is the app-root element. This is our entry point for components, in this case the app.component.html will take its place when the project is ran.

Displaying Data

Now that we have that basic understanding of Angular components, let's dive into using them to display data. To do this we are going to use a concept called interpolation allowing us to refer to expressions into text. To do this we will utilize a double bracket as such {{}} with the variable in between.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My Site';
  projects = ["HTML Basics", "CSS Fundamentals", "Angular Foundation"];
}

app.component.html

<div>
 {{title}}
</div>

This works great in regards to single data variables but when it comes to lists there is an optimal option that will reduce the code we right.

Lastly we are going to demonstrate how to use ngFor directives for an easy way to display lists of data.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My Site';
  projects = ["HTML Basics", "CSS Fundamentals", "Angular Foundation"];
}

app.component.html

<div>
 {{title}}
 <p *ngFor="let project of projects">{{project}} </p>
</div>

Well that's it for this lesson! Hopefully you found value in it and if you want more follow/react/comment to show support!

CSS Basics

Austin — Sat, 13 Jun 2020 15:05:23 +0000

CSS (cascading style sheets) is one simple way from going to a plain boring website to a professional looking masterpiece.

Sounds interesting right, but where do we start?

Basics

CSS helps you selectively stylize HTML elements. In this article we will talk about structure of a CSS rule-set and what selector types there are.

One example of this is styling an element:

p {
  color: red;
}

Let's break this down into parts and discover whats happening. In this CSS format we see that we are referring to the HTML "p" or paragraph tag. This part of the CSS is known as the selector and within brackets "{ }" we see the declaration setting the color to red.

Putting all this information together it will turn all paragraph elements in an HTML page red.

Selectors

Now that we have an idea how the structure of a simple CSS rule-set what other selectors can we use to identify HTML elements you want to style.

Simple Selectors these are the items based on name, class, and id.

Combinator Selectors which will allow for more than one selector

You can use a Combinator selector with any of the following.

descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)

div p {
 color: red;
}

div > p {
 color: red;
}

div + p {
 color: red;
}

div ~ p {
 color: red;
}

That's all for this post! Follow/React for more articles on basic web development.

HTML Basics Part ✌️

Austin — Sat, 13 Jun 2020 02:44:12 +0000

If you haven't read the previous article on getting started with HTML check out Part 1 here:

Since we last left off we ended up with a document that looks like this:https://dev.to/amsuarez/html-basics-part-ii-4ah6

<!DOCTYPE html> 
<html lang="eng">
 <head> 
 </head>
 <body>
 </body>
</html>

Today we are going to over the basics on creating content within the body. The three we are going to be covering to day are heading tags, paragraph, and comment tags.

Heading Tags

Heading tags are a great way to define importance in a document. Heading tags exist for 1 - 6 each heading level will have its own default styling. It is important to understand that you can restyle these tags in css but using appropriate tags is important. Screen readers recognize these levels, users can skim through the document based on the levels, and search engines can use them for indexing.

<!DOCTYPE html> 
<html lang="eng">
 <head> 
 </head>
 <body>
  <h1>My Website</h1>
  <h2>My Projects</h2>
 </body>
</html>

Paragraph

Paragraphs are general areas to hold text. You can use it for a lot of text or even just a couple of words.

<!DOCTYPE html> 
<html lang="eng">
 <head> 
 </head>
 <body>
  <h1>My Website</h1>
  <h2>My Projects</h2>
  <p>I write a blog about HTML</p>
 </body>
</html>

Comments

Lastly is for this article we will showcase how to write comments. Comments are not displayed in the browsers. They are useful to explain your code and ideas to others reading and most of the time for yourself. The comment tag is shown as .

<!DOCTYPE html> 
<html lang="eng">
 <head> 
 </head>
 <body>
  <h1>My Website</h1>
  <h2>My Projects</h2>
  <!-- Here I will write about my projects. -->
  <p>I write a blog about HTML</p>
 </body>
</html>

That's it for this article hopefully you enjoyed it!
Follow and like for future web dev basics and advanced tips.

HTML Basics Part I

Austin — Fri, 12 Jun 2020 14:33:13 +0000

Hyper Text Markup Language or HTML is the skeleton of any web page. It is incredibly easy to get started and an important first step of learning to make a website.

The Basics

HTML consists of an elements that tell a Web browser how to structure a website. In this article we are going to cover four basic elements to build a page quickly.

DOCTYPE & HTML

An element begins with the < and ends with > character. The first element to an HTML page consist of the an element is declaration that tells the file what to expect. Now using HTML files without declaring DOCTYPE may work but may result in the browser being forced into quirks mode.

Quirks mode is a technique used by some web browsers for the sake
of maintaining backward compatibility designed for old web browsers.
src: https://en.wikipedia.org/wiki/Quirks_mode

The html tag is the start of the document and will contain all HTML tags with the exception of doctype. Here you should also display the language of the web page.

To start your document with DOCTYPE and an html element type the following.

<!DOCTYPE html> 
<html lang="eng">
</html>

This declaration will let the browser know that the document is HTML5.

Head

The next common element known as head is used to house metadata for the website. Common things to place in head include page title, style, character, and scripts.

<!DOCTYPE html> 
<html lang="eng">
 <head> 
 </head>
</html>

Body

Last of the elements we are covering today is body. In this element tag is going to consist of everything that appears on your webpage. Here you would place text, images, and more.

<!DOCTYPE html> 
<html lang="eng">
 <head> 
 </head>
 <body>
 </body>
</html>

Now that we have built our basic file let's add on more element tag to display text. We are going to add the paragraph tag in the body element. We will discuss further on what the paragraph element is in later articles.

<!DOCTYPE html> 
<html lang="eng">
 <head> 
 </head>
 <body>
  <p>Hello World</p>
 </body>
</html>

Now when we open this file in the web browser we will see the text "Hello World" being displayed.

Follow and like for more articles on web dev basics.

Getting Started with Angular

Austin — Fri, 12 Jun 2020 02:33:57 +0000

What is Angular?

Angular is an open source web application framework lead by Google and by community developers.

It is based on TypeScript which is a strict syntactical superset of JavaScript which adds optional static typing to the language. While Typescript needs to be compiled it does offer a benefit in prototyping.

Getting Started

To use the Angular framework you should be familiar with:

JavaScript
HTML
CSS

Another important thing to understand is that Angular apps require libraries that are available as npm packages.

Step 1: Install the Angular CLI 👨‍💻

To install the CLI using npm, open the terminal and enter

npm install -g @angular/cli

Step 2: Create a workspace and initial application 👷‍♂️

To create a new workspace and initial starter app:

Run the CLI command ng new and provide the name my-application, as shown here:

ng new my-application

Angular will now get to work building the application. The client will create all folders and files necessary.

To run type:

ng serve

This will run the application through localhost:4200/

Follow and like for the next article on "Angular Building Blocks"

Jewels 💎 and Stones ⛰

Austin — Fri, 03 Apr 2020 01:28:48 +0000

Here is a rocking problem that shows how to deal with arrays.

You're given strings J representing the types of stones that are jewels, and S representing the stones you have. Each character in S is a type of stone you have. You want to know how many of the stones you have are also jewels.

The letters in J are guaranteed distinct, and all characters in J and S are letters. Letters are case sensitive, so "a" is considered a different type of stone from "A".

Example 1:

Input: J = "aA", S = "aAAbbbb"
Output: 3

Example 2:

Input: J = "z", S = "ZZ"
Output: 0

Brute Force 👊

Looking at a brute force method I would use a double for loop which would increase my BigO notation to the length of S multiplied by length J. Here I would have to iterate through the stones multiple times for each jewel I am referencing.

An Optimal Solution

Looking at this problem what comes to mind is using some sort of hashmap or set. Today I'm going to be switching it up and using C++. In C++ there is a structure you can take advantage of known as an unordered_set. This will let us store unique values in a container based on a key 🔑. Looking at this problem here I can make the jewels my unordered set and search them quickly. This will also allow me to decrease my time complexity to the length of S plus by length J.

There are a couple of other ways to solve this problem so put your solution down below! Thanks for reading, like and follow for more! 🙃

Single Number

Austin — Thu, 02 Apr 2020 03:34:56 +0000

Here is a simple problem dealing with arrays.

Given a non-empty array of integers, every element appears twice except for one. Find that single one.

Example 1:

Input: [2,2,1]
Output: 1

Example 2:

Input: [4,1,2,1,2]
Output: 4

There are a couple of ways on how to deal with this problem the easiest approach, in my opinion, is to use a dictionary.

Using a Dictionary:

Dictionaries allow you to store key-value pairs allowing us to store a number and the count of times you see the number. Now there are a couple of ways to implement a dictionary if you want to create your own but here I am going to use the built-in one. Using this method allows for an O(n) BigO notation but does use memory.

2 For Loop solution:

One way to do it without using much extra memory is to use a double for loop to go through the array. Going through the array once you find a duplicate you can change the digit to undefined. If you pass through the list without finding a duplicate you can return it. Note this will destroy the integrity of the list as you are changing values.

There are a couple of other ways to solve this problem so put your solution down below! Thanks for reading, like and follow for more! 🙃

Rotting Oranges 🍊

Austin — Wed, 01 Apr 2020 03:24:44 +0000

This is a great problem looking at how to deal with grid problems.

In a given grid, each cell can have one of three values:

the value 0 representing an empty cell;
the value 1 representing a fresh orange;
the value 2 representing a rotten orange.

Every minute, any fresh orange that is adjacent (4-directionally) to a rotten orange becomes rotten.

Return the minimum number of minutes that must elapse until no cell has a fresh orange. If this is impossible, return -1 instead.

Example 1:

Input: [[2,1,1],[1,1,0],[0,1,1]]
Output: 4

Example 2:

Input: [[2,1,1],[0,1,1],[1,0,1]]
Output: -1
Explanation: The orange in the bottom left corner (row 2, column 0) is never rotten, because rotting only happens 4-directionally.

Example 3:

Input: [[0,2]]
Output: 0
Explanation: Since there are already no fresh oranges at minute 0, the answer is just 0.

Since this problem deals with a grid you can already start thinking of two different techniques. Either you utilize a depth-first or breadth-first method.

Solution 🙌

Looking at this I utilized a queue in a breadth-first traversal to solve this problem. First I iterate through the grid and add all rotten oranges to a list, this will give me a starting point. After I have gotten all initial rotten oranges I go through each rotten orange and convert it's neighbors to rotten if an orange exists. With a list of neighbors that have turned rotten, I add them to my rotten list with a counter denoting the "minute" that it turned. I use this minute each time I add a new set of neighbors to the rotten list.

Hope you liked this post, please follow and clap for more! Throw your implementations in the comments below! 🙏

Container With Most Water 💧

Austin — Tue, 31 Mar 2020 01:20:05 +0000

Here is a fun problem dealing with arrays.

Given n non-negative integers a1, a2, ..., a(n), where each represents a point at coordinate (i, ai). n vertical lines are drawn such that the two endpoints of line i is at (i, ai) and (i, 0). Find two lines, which together with x-axis forms a container, such that the container contains the most water.

Note: You may not slant the container and n is at least 2.

The above vertical lines are represented by an array [1,8,6,2,5,4,8,3,7]. In this case, the max area of water (blue section) the container can contain is 49.

Example:
Input: [1,8,6,2,5,4,8,3,7]
Output: 49

Looking at this problem there are two ways I would attack it. The first being a brute force approach and iterating through possible combinations of walls to find the boundary that holds the most water.

Brute Force Approach 👊

Looking at a double for loop approach, the most important factor for this problem is the smallest wall. Iterating with two indices you can pick the smallest wall and multiply that wall by the distance between the two indices.

Two pointer approach:

Looking to see how we can improve upon this process we can two different pointers to yield us a better BigO notation of O(n).

Hope you liked this post, please follow and clap for more! Throw your implementations in the comments below! 🙏

Two Sum Problem

Austin — Mon, 30 Mar 2020 19:43:57 +0000

Here is a classic problem that has been given on plenty of interviews.

Given an array of integers, return indices of the two numbers such that they add up to a specific target.

You may assume that each input would have exactly one solution, and you may not use the same element twice.
Given nums = [2, 7, 11, 15], target = 9,

Because nums[0] + nums[1] = 2 + 7 = 9,
return [0, 1].

Now there are a couple of ways to solve this problem. The first way you might think is to look at it and approach it through a brute force method.

Brute Force Method 👊

I see that I need two different indexes so I could use two for loops and propagate through this list comparing every possible combination to see if I have a pair that hits the target.

Code for two for loops a brute force method to solve this problem
In this scenario, we are going to loop through the array with both for loops allowing you to compare every single possible combination. This is obviously not the most efficient way as it will yield a big O of (n²) due to both for loops. In the event that there is a long list of numbers it can be less likely that your code will pass in the given time it needs.

Dictionary Approach:

Now looking at how to better improve this solution there is one data structure called a dictionary that will definitely assist us. A dictionary makes use of a key-value pair, this is can be extremely useful given that the search of a Dictionary is big o(1).

Code for two sum problem dictionary creation then search for pair
Here we are building a dictionary with the key being the number and the value being the index the number exists. Creating a dictionary allows us to search for the value as we go. In our next for loop as we search for the other number to complete the sum that hits the target we only have to iterate through the array ones at a time giving us a big-O (n). That being said all though we were able to reduce the big-O in time by not using a double for loop we increased the space complexity from the creation of the dictionary.

Better Dictionary Approach:

Now how can we make this a bit more efficient? Well, we can remove the need to have a separate loop for creating the dictionary by using a if-else block.

Code for two sum problem dictionary creation and search for pair
Hope you liked this post, please follow and clap for more! 🙃