DEV Community: Joel Diharce

New note format!

Joel Diharce — Tue, 13 Sep 2022 23:30:19 +0000

Synopsis: Well, we had our first class in which expectations were set, and resources were given. Knowing what I know about the course now, I need a new note format. Each number will be a separate post, and contain the bullets that follow it:

Each week's roadmap contains many topics, and each topic will get its own post, covering all the topic's sections. To protect both any future student's educational integrity, and to preserve the rights of the course, these posts will be saved as drafts only, and not published. The projects however will be discussed openly. To help you, I'll share my best method I could think of for my journaling. I'll update this as I make changes as well.

Subject Title.00X (to keep repeated titles in order)

Topic
- Section #1
- Section #2...Etc...
- Thoughts about what was learned. +Likes and Dislikes +Possible uses/applications of the learned material +Where have I seen this before? (if applicable)

First class summary

The above note format will be for material. The first class didn't cover material we're learning, so I won't be following the new format for this post. Instead, I'll go over what I did to prepare myself. Maybe it can help you too!

Part of the expectations is that I need to devote at least 20-25 hours a week to learning on my own, and that class is to discuss what we learned, not to be taught from scratch. I knew that's what it takes to make this career change, and I am completely committed. So, the first thing I did was make a calendar to budget my time according to their guidelines. I have 4 hours of study time every 6 days, with one day of rest. I have remote class 2 times a week, and in-person class once a week. Sundays are my chosen free day, and oh-me-oh-my am I gonna make the most of them! 😁
The second thing I did was set expectations with my household so that I can have the dedicated time I need.
The third and final thing I did was to inform work that my schedule would need to change in order to accommodate the class and study time.

I'm ready!!

You thought we were done with forms... hahaha...

Joel Diharce — Sat, 10 Sep 2022 06:21:02 +0000

Welcome to forms pt 2! Is there an end in sight? Who knows! Ok, I do. Yes, and this is it.

So, there are text areas that can be created for larger inputs. The user can adjust them as needed, and sometimes they're limited in how big they can get.

The tags used are <textarea></textarea>, and the are used with attributes within the opening tag - the "cols" attribute, and the "rows" attribute - each has a value of pixels to define their size. If you add text in between the text area tags, you would be adding placeholder text! That's just how they work, and I'm looking forward to finding out how exactly they work that way.

Here is an example:

<form>
     <p>What's your favorite food?</p>
     <textarea cols="50" rows="10">
     Describe your favorite food here!
     </textarea>
</form>

Funny thing... When you have the placeholder text in a separate line of the code, you will find that its alignment in the text field is centered.

Example:

If you want it to be at the very start of the text field, you'll have to put it directly against the text area tags. Example:

<form>
     <p>What's your favorite food?</p>
     <textarea cols="50" rows="10">Describe your favorite food here!</textarea>
</form>

Photo:

Radio inputs are next!

You can give people options for them to select just one, and for this, we'd use radios. To use radios, you have to use the input tags, and make them the type "radio". Here is an example:

<form>
     <p>What are planning on doing tonight?</p>
     <input type="radio">
     Hang with my family at home
     <input type="radio">
     Pig out on a bucket of Popeye's chicken
     <input type="radio">
     Play a game on my phone
     <input type="radio">
     Learn HTML and make blog posts about it
     <input type="submit">
</form>

I wrapped each input tag and the accompanying text with paragraph tags to make it a vertical list like so:

Notice anything? I could select multiple things at once. Apparently, radio buttons are supposed to be for one selection, not multiple. And of course, the recorded lesson will show me how to implement this restriction on the radio buttons.

The "name" attribute will label the data as a specific type of data when sent to the server. If I add the name tag with the name "time spent", then each of the options to choose from will send data labeled as "time spent", regardless of the value of the option that is chosen. With this attribute, we can now restrict the radio buttons to select one option: Using the same name in each name attribute will link the options together, and allow you only one choice.

Next is the "value" attribute, which is the content of the data that is sent to the server once submitted. This attribute along with the "name" attribute are necessary to send data to a server. The "name" attribute will label the type of data being sent, and the "value" attribute will designate the content of the data being sent.

One way to confirm this is to submit one of the options and look at the URL above. Just now, I chose the option "Pig out on a bucket of Popeye's chicken", because yeah buddy!!! When I look at the URL, I see the following at the end:
[...]?Time+spent=Fried+Chicken+Feast Notice that the type of data is "Time spent", and the value is "Fried Chicken Feast" When sent to the server, the data will be placed in a table where the column is named "Time spent", and the value will be placed in the next empty cell in that column.

Example:

<form>
    <p>What are you planning on doing tonight?</p>
    <input type="radio" name="Time spent" value="Family Night">
    Hang with my family at home
    <p><input type="radio" name="Time spent" value="Fried Chicken Feast">
    Pig out on a bucket of Popeye's chicken</p>
    <p><input type="radio" name="Time spent" value="Mobile Gaming">
    Play a game on my phone</p>
    <p><input type="radio" name="Time spent" value="HTML Blog">
    Learn HTML and make blog posts about it</p>
    <p><input type="submit"></p>
</form>

If you want to choose multiple options (like I do - I intensely enjoy the time I spend doing the things I listed in the code!!), the checkbox attribute can be used instead:

<form>
     <p>What are planning on doing tonight?</p>
     <input type="checkbox">
     Hang with my family at home
     <input type="checkbox">
     Pig out on a bucket of Popeye's chicken
     <input type="checkbox">
     Play a game on my phone
     <input type="checkbox">
     Learn HTML and make blog posts about it
     <input type="submit">
</form>

This is what it looks like:

Another way of submitting data from a form is to use a dropdown menu. We do this using the select tags <select></select> and the option tags <option></option>. This attribute is different than the others, as you don't need to give the attribute "name" to each individual option. You just need to give it once, in the opening select tag. However, you should keep in mind that the value attribute is still necessary for each individual option. Also, when displayed on the browser, one of the options in the dropdown is always selected. By default, it is the first option, but you can choose which one by adding the word "select" after the value attribute of the option you want selected, like so:

<form>
    <p>What are planning on doing tonight?</p>
    <select name="Time spent">
    <option value="Family Night" selected>Hang with my family at home</option>
    <option value="Fried Chicken Feast">Pig out on a bucket of Popeye's chicken</option>
    <option value="Mobile Gaming">Play a game on my phone</option>
    <option value="HTML Blog">Learn HTML and make blog posts about it</option>
    </select>
    <input type="submit">
</form>

Personally, I'm curious about how to get placeholder text in the dropdown menu... Thanks to google, I found the information I needed! And thanks to VS Code, I know what the attributes in the element mean!
So, to add an option that is placeholder, you have to set the value to nothing with a pair of quotations: "", and you have to use the attributes "disabled" and "selected". "disabled" makes the option something that you can't select. If you select one of the options, then select the placeholder, it won't be selected. It will go back to the option you selected before. As you know, "selected" makes the placeholder be the first thing displayed in the drop down so that it's showing constantly. In addition to these, you can add the "hidden" attribute, which will hide the placeholder from visibility in the dropdown completely. It will still show on the drop down when the page loads, but it won't be listed. I chose to not use "hidden", and instead use the other two.

Here is the code!

<p>What are planning on doing tonight?</p>
<select name="Time spent">
<option value="Family Night">Hang with my family at home</option>
<option value="Fried Chicken Feast">Pig out on a bucket of Popeye's chicken</option>
<option value="Mobile Gaming">Play a game on my phone</option>
<option value="HTML Blog">Learn HTML and make blog posts about it</option>
<option value="" disabled selected>Choose your path...</option>
</select>
<input type="submit">
</form>

Here is what the drop down looks like when the page loads:

Lastly, here is what it looks like when the dropdown is expanded:

Curiosity satisfied!

Sleep time! Good night!

Forms!!!

Joel Diharce — Sat, 10 Sep 2022 02:41:49 +0000

Ever sign up for a service online, and you have to enter your name and information? You filled out a form. These are heavily used in web development. There different uses for forms like a sign in forms for logging into your user account, or a search bar like on google (these have just one field, but still - they're a form).

Right now, we're only learning the front-end part of the form, not the back-end.

Tag!

The <form></form> tags used by themselves won't display anything. You'll need a <p> tag to label the field, and also the <input> tag in order to make the form show (there is no closing input tag).

It seems that most input tags are given a "type" attribute that will help the form display text in helpful ways. One example is the log in form:

<form>
     <p>Username</p>
     <input type="text">
     <p>Password</p>
     <input type="password">
</form>

It looks like this:

You can see how the password is obfuscated in order to protect it from nosy people.

You can also add placeholder text to the form too! We use another attribute to do this called "placeholder". Here you can see the form empty, showing what the code above would look like without any fields being filled in:

Here is the code that would add the placeholder.

<form>
     <p>Username</p>
     <input type="text" placeholder="Username here please!">
     <p>Password</p>
     <input type="password" placeholder="Password here please!">
</form>

You can see the text we put in in the empty fields to help guide users on what to do:

Now the submit button!

To make the space in between the password field and the submit button like what you see on sign in forms everywhere, you have to add in two <br> tags consecutively, then add the input type submit:

<form>
     <p>Username</p>
     <input type="text" placeholder="Username here please!">
     <p>Password</p>
     <input type="password" placeholder="Password here please!">
     <br><br>
     <input type="submit">
</form>

Here it is:

There's more!!!

There are two attributes for the form tag itself: action and method:
The action attribute is the URL that receives the forms data.
The method attribute will ascribe one of two http methods to the form: Get or Post.

Example!

<form action="/fake-url-for-submission" method="post">
     <p>Username</p>
     <input type="text" placeholder="Username here please!">
     <p>Password</p>
     <input type="password" placeholder="Password here please!">
     <br><br>
     <input type="submit">
</form>

Well, that's all that was covered, so before I go, I can very briefly share some of the little nugget of knowledge I have about the http methods mentioned here:
Get retrieves data. Post data is being sent to a server for the creation of a file/record/data. Put also exists, and is different than post, even though they semantically sound the same.

Onwards!!!

Spreadsheets?! No - TABLES y'all.

Joel Diharce — Sat, 10 Sep 2022 01:58:57 +0000

I'm a lover of spreadsheets. They're the first real tool I learned how to use, and kind of my natural segway into programming, so I have a bit of an appreciation for them. What we're going over isn't a spreadsheet, and doesn't have the functionality of one, but I imagine it is the closest to a spreadsheet that I can get at this level (I mean, if google can do it with Sheets, I'm sure I can get there, right?)

Like all things html, there are tags for this:

<table></table> - these are the table tags, and they surround the table's inner elements along their content, defining the start and end of the table.
<th></th> - these are used to create the table headers, or, the name each column.
<tr></tr> - these are used to create the table rows
<td></td> - these are used to put data into each row.

The way this works is you start with the table tags, put in table rows, and enter the table headers as the first row's data. The table header tags are kind of interchangeable with the table data tags, in that you can use either to fill in a table row for example:

<table>
<tr>
     <th>product</th>
     <th>cost</th>
</tr>
<tr>
     <td>Milk</td>
     <td>$6.16</td>
</tr>
</table>

This will look like:

product	cost
Milk	$6.16
Keebler Sandies Pecan Shortbread Cookies	$3.28

I can switch the table data and table header tags too, making the table a little weird...

Milk	$6.16
product	cost
Keebler Sandies Pecan Shortbread Cookies	$3.28

And If I want to add borders, I can! I just have to put an attribute <border> into the opening table element, equaling a pixel amount like so:

<table border="1"> <tr> <th>product</th> <th>cost</th> </tr> <tr> <td>Milk</td> <td>$6.16</td> </tr> <tr> <td>Keebler Sandies Pecan Shortbread Cookies</td> <td>$3.28</td> </tr> </table>

Here is what this looks like:

ONWARD!!!

Divs and Spans... O_o;

Joel Diharce — Sat, 10 Sep 2022 01:16:46 +0000

At first, while learning about this I thought "This has a use, but I just don't know it yet!" Then, BAM!! I was shown exactly how useful this is!

Div tags (<div></div) surround the elements you'd like to group together. The elements can be separate or in the same line, it doesn't really matter as long as they're surrounded by the div tags. An effect of the divs is that the elements within it are grouped into a "block level box", which would make the div, and all the elements it contains, act kind of like how the <p> tags containing text: The contents of the dive tags will get their own line.

Span tags (<span></span>) are different in that the elements they contain don't get their own line. You could surround one word in a paragraph with the span tags, and the word wouldn't get its own line.

You can give both divs and spans IDs/classes. :D

Once again, as I suspected, when we learn CSS we'll see more about how this works, as it's mostly useful with CSS.

Onward!!

Classes and IDs? Feels like school again. Wait a minute...

Joel Diharce — Sat, 10 Sep 2022 01:02:38 +0000

I'm listening to this lesson, and paused it after it finished the third sentence immediately - from what I know about javascript, this topic sounds awfully similar to objects/instances. So if you know some javascript, this may sound familiar.

I was wrong!! Haha... heh...

Classes and IDs are used to identify an element in html. Classes can identify multiple, and IDs can identify just one. I know: "What is that useful for?" I thought the same thing. Apparently, you can use them in CSS to be able to select elements individually, or in groups, in order to apply some styles to them.

No examples on this yet, but we will go over it more when we learn about CSS. :) Exciiitiiiing!

(Pre-class) Project #1!

Joel Diharce — Sat, 10 Sep 2022 00:42:40 +0000

Well, it's finally here! I know enough (apparently) to build a webpage!

I'm following a model, about a lizard programmer with likes and dislikes. Well, it's gonna be about my dog instead. Screenshots shared!

The code!

The page!

...Et voila!

Errors beware...

Joel Diharce — Wed, 07 Sep 2022 06:19:22 +0000

What do you do when you run into errors on your programming journey? Ask Google! Programming is hard, and it's certain that many people have already run into the issue you've encountered, and likely also blogged about it (;D). My favorite line from this video is "...being a programmer is being a glorified Googler." This is confirmed by my programmer partner.

You've basically gotta know how to search using google in order to be a good programmer. My programming partners says "There is no shame in learning from others", and he is RIGHT. One website that we're encouraged to use as a search result resource is Stack overflow, We are also encouraged to be patient with the search because some of the subjects are obscure, or we just don't know how to describe them with the purpose of searching for them. If you can't figure it out, reach out to a peer!

...Speaking of, my partner disappeared... 🤨

Hyperrrrr-linx (sp?) ;D

Joel Diharce — Tue, 06 Sep 2022 06:49:37 +0000

Google docs and sheets just automatically makes hyperlinks when you enter a URL. Well, apparently html creates hyperlinks with an anchor tag (<a>) and an href attribute, which is required.

Remember how images use the relative or the absolute URLs? Well, heheh... yup, hyperlinks can use either too. If the hyperlink uses to a webpage on our own website, then we would use the relative URL. If it leads to a different website (not within the server file containing our website, which is most likely the case if it's a different website), we would use the absolute URL. To remind you, relative URLs are made up of the file path that leads to the webpage file within the enclosing website's server file. Relative URLs usually start with the file name, and Absolute URLs typically start with https://www.[__].com

Example Time!

Here is the code as written:

<a href="https://www.boredpanda.com/cat-virus-exe-funny-pics/?utm_source=google&utm_medium=organic&utm_campaign=organic">When kittehs strike!</a>

And, here is the code as I intend the user to view it:

When kittehs strike!

Disclaimer: no code was harmed in the making of this blog post. Also, markdown apparently creates a hyperlink just from entering the URL, hence the "codified" URL above, near the top.

Using images! ;D

Joel Diharce — Tue, 06 Sep 2022 04:03:56 +0000

Ever come across a webpage without an image? I have, but I'm probably older than you, so don't worry. This video showed me how the world became able to use html for images, thus improving my web experience forever.

<img> tag. This little bit of html tagging makes it possible to add images to a web page. There is no closing tag for this little one. It does however required two attributes:

src (source) - tells the browser where the image is located.
alt (alternative text) - gives a text description of the image if the image can't be displayed for some reason.

When putting an image in a webpage, you have to consider the source. If the source is a file on your computer, you can use a relative URL, which is simply the file path from the folder containing the html file. If it is from the web, you would have to use an absolute URL, which is the URL address of the image (ex: http://...[etc]).

note: ever find a webpage with a missing source error where an image should be? They used an absolute URL that leads to where the image used to be! ;D

Looking further, you can define the height and width of the image by adding two more attributes named "height" and "width". The dimensions would be entered as pixels, so be sure you know how many pixels you will want each to be.

In order to put this into practice, we have to create a folder on our desktop, name it, create another folder within the named folder, name it, and then put the image we intend to use inside of the inner folder. Next, we create a new html file in VS Code.

I did all this and found that the html displays the images perfectly. Also, I used the height and width attributes and found that it worked perfectly. :D

You'll want to keep in mind that if you use pixel dimensions that aren't in ratio to the original, you'll end up stretching the image or squishing it.

Now that I learned this, it's time to find some Pikachus and make them have really long faces. ;D

Joel out!

Attributes, a mystery...

Joel Diharce — Tue, 06 Sep 2022 03:35:52 +0000

Attributes are a major part of HTML... D:

They give extra information about an element that the encoder uses to do things in a specific way. They don't seem to need their own tags to do this either. :D

Apparently, you just add them in within other tags.

The first example we're given is:

<p lang="en-US">Things to do today</p>

The attribute is the lang='en-US" within the p tag. Broken down, attributes are given a name and a value (<p name="value">)

In this video, this is all we're given. This is fine, because we're told we will learn more about this soon. :D Onward!!

Shortcuts are every coder's best friend

Joel Diharce — Tue, 06 Sep 2022 03:26:22 +0000

Alrighty... So I opened the next video, and found that it went over ways to implement shortcuts in Sublime, which is what the instructor of the videos (also, a teacher in my bootcamp. ;D) uses in the videos. Well, I'm using VS Code because that's what the instructors of my bootcamp directed us to use. So, I decided to see what I could find in making shortcuts in VS Code!

Thanks to (Hannah Gooding's post on Dev.to)(https://dev.to/hannahgooding/vs-code-shortcuts-and-tricks-that-i-wish-i-knew-sooner-3mcj) (much appreciated, Hannah!), I learned that there is a boiler plate that exists in VS Code! :D Just typing "!" and pressing enter, brings up the following boiler plate in my version:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Now, this is the default that comes with VS code, so it's different from what we have in the instructional video I just watched, so I need to create one. Well, apparently I can do that too (thanks again Hannah!) So, first, you go to the preferences of VS Code, and choose "User Snippets", then you find the file "html.json" where you can add a new snippet! You have to use json language to create the snippet, but there is a tool that every new coder's new BFF Hannah directs you to that will help you write your desired html snippet in json!

Note: I wasn't able to find the original emmet file that has the prefix I wanted to use, so I just created a new one in the html.json file.

Joel out! :D