DEV Community: Ethan Huang

TIL # 6 Flexbox

Ethan Huang — Thu, 10 Aug 2023 03:05:37 +0000

Flexbox is another way to position the elements on your homepage. I find it a bit easier to understand than the box model. Flexbox Froggy is a webpage minigame to help understand the different properties that are available in Flexbox.

To start, we need to understand that flex containers and flex items are 2 separate things. Flex containers will contain flex items, so the direct child elements of flex containers are considered as flex items. To specify a flex container, you must add a CSS declaration of display: flex or display: inline-flex. There are several properties and their values that we will discuss too, these will include justify-content, align-items, flex-grow, flex-shrink, flex-basis, flex, flex-wrap, align-content, flex-direction, and flex-flow. If any of the topics are linked, it means it was challenging to describe it in a post To quickly describe what display: flex does, lets imagine 3 squares vertically stacked with the div class. If you added display: flex in CSS, it would cause those squares to line up horizontally side by side. display: inline-flex works pretty similarly, but will leave inline elements as they are instead of turning them into blocks.

justify-content consists of 5 values, flex-start, flex-end, center, space-around, and space-between. Let's imagine 3 boxes, side by side, flushed to the left as their default position. flex-start will normally position all 3 boxes flushed to the left, or the start of the line. flex-end however will take the 3 boxes and flush them to the right, or the end of the line. center, accordingly named, will take the 3 boxes and put them side by side in the center of the page. space-around will leave a gap of space between the 3 boxes, as well as 2 gaps at the start and end of a line (space 1 - box 1 - space 2 - box 2 - space 3 - box 3 - space 4). space-between will only create 2 larger spaces that separate box 1 from box 2, and box 2 from box 3 (box 1 - space 1 - box 2 - space 2 - box 3), so that box 1 and box 3 are flushed to the start and end, and box 3 assumes the center spot.

align-items deals with items inside the container, and also has 5 values, although I'm not as confident at explaining 2 of them so I will leave a link to visually understand it all . This time we will discuss we are reusing flex-start, flex-end, and center, however we are also now including baseline and stretch (both of which I have a slightly harder time explaining). If we take our 3 identical squares before, placing them side by side and in the center of a container, flex-start will place the items flushed at the top of the container and remaining in the middle. flex-end will place the items all at the bottom of the container. center is straightforward once again, and would place the items floating in the middle of the container.

Very brief, but the flex property includes all of flex-grow, flex-shrink, and flex-basis all at the same time, the values just need to be placed in that respective order.

flex-wrap has 3 values, wrap, wrap-reverse, and nowrap. Let's imagine 5 squares numbered 1-5 (in order left to right) aligned in a row. As a page compresses sideways, the squares will squeeze together and reorient themselves. In wrap, square 5 will drop down a row, followed by square 4 on its left. In wrap-reverse, the entire row except for square 5 drops down a row, then square 4 joins it on square 5's left. In nowrap however, the squares will remain in place and won't move despite how smushed the webpage is.

Unfortunately I couldn't explain everything, but sometimes seeing how it works on your own is better than simply reading an explanation. I hope that this post could be of some use!

TIL #5 The Box Model Lite

Ethan Huang — Wed, 09 Aug 2023 20:05:41 +0000

The box model is quite hard for me to explain, but I have embedded several links to resources that have more visual guides to explain how they work! Here are some of the basics.

BOX MODEL

The box model is a way to understand how spacing works for the elements on an HTML page. These include the dimensions (width and height), borders, paddings, and margins of an element's box. Without a visual guide, think of a small rectangle that is encompassed by 3 slightly larger rectangles of increasing sizes. The smallest, innermost rectangle is the content, then as you go up the rectangle sizes, the spaces between are the padding, border, then margin (largest and outermost) rectangle. It is important to play around with the dimensions so that the content of your page doesn't get too crowded as you keep adding more stuff into it.

As it is called the box model, we use CSS to make changes to how the boxes look. You can add a border color as well as radius (thickness) to have it pop out more. Adding padding can space out the border further away from your content in order to not crowd it, you can do this by adding px to either all or any direction. If you decide to write it in a shorthand method but will several directions, you can list out all the paddings in the direction of top, right, bottom, left like: padding: 6px 11px 4px 9px;. There is even shorthand for 3 (top, left & right, bottom) or just 2 (top & bottom, left & right) directions as well. Margins function similarly to padding, except it applies to the space outside the border, and separates content from each other. Margins can also be applied with auto to make the left and right margins become centered.

Something to note about the box model is also setting a minimum and maximum width and height. This is to ensure that reading the content on a page doesn't appear too wonky if you're looking at the same website on a phone or a laptop. Another property you can also add is overflow, and includes hidden, scroll, or visible that affect how content that leaks of their respective box can be viewed.

POSITIONING

In the previous section we talked about the box model, but now we'll talk about how these boxes can be ordered and the positions they can assume. First off, all boxes start in a static position, which is the default position. There are also relative, absolute, fixed, and sticky positions as well, which can be played around with for different results. Admittedly, these are a bit hard to explain by text without any visuals, so I will hyperlink each position to its corresponding Codecademy link above.

To add a bit more to the relative position, you can also add a z-index as well. If that is unfamiliar term, let's think about a cheeseburger. It has a bottom bun (z-index = 0), burger (z-index = 1), cheese (z-index = 2), top bun (z-index = 3). Now look at the burger from a bird's eye view, bottom bun on the table, you'll only see the top bun right? Z-index's can be thought of as layers, and having a higher index gives it more visibility than a box or object that has a lower z-index.

Float is a property to wrap text around an image, and essentially tries to force whatever it is applied to in the direction it is given. Clear is a property that stops elements from 'bumping' into one another. Again, this needs more of a visual guide, so I will link it once again to Codecademy.

TIL #4 CSS

Ethan Huang — Tue, 08 Aug 2023 06:02:14 +0000

CSS- cascading style sheets; this is used to style HTML, the reason why it is called cascading is because it applies properties going down line by line, so if there are overlaps of certain affected elements than the lowest property will be applied

Just going to talk about CSS in this post, the box model and flexbox that are coming up next will be separate posts!

SETUP AND SYNTAX

CSS is a separate file from and HTML one, and it is more commonly practiced to put all the styling into a CSS file. In HTML, you will have to link it to a CSS file like so: <link href="./style.css" rel="stylesheet"> this is normally put in the head. "style.css" is the name of the CSS file, you can name it whatever you want but style.css seems to be some sort of unspoken default, so I use that too. href refers to the path of the CSS file (./ means the files is in a relative path, because normally the HTML and CSS is in the same folder), while rel refers to the relationship of the HTML and CSS file, in this case it is the stylesheet.

There are 5 different features that a CSS ruleset, or a single block of CSS, shares with the inline CSS that you can do in HTML. There are selectors, the declaration block, the declaration, the property, and the value. This Codecademy page shows the CSS ruleset to CSS inline style conversion of CSS to HTML. Let's break down a CSS ruleset.

h1 {
   color: yellow;
}
<!--The selector targets an element, so that's the h1 -->
<!--The declaration block is all the code between the {} brackets -->
<!--The property shows how the element will be changed,
in this case it is the color -->
<!--The value shows how the property will change,
in this it is yellow -->
<!--The declaration consists of the property & value pair
in this case it is color:yellow; -->

If you really want to inline style CSS inside HTML, you just need to add style='declaration' inside an opening tag. You can put multiple declarations if needed. I really don't see the practically when making a new CSS page is much cleaner, the only thing it seems to be meant for is if you're working with a very small HTML page or just want to play around with how something looks (please comment if there are other practical uses for inline styling!). That would look something like <h1 style='color:yellow;'>Why inline styling?</h1>. This is inconvenient because you need to manually input inline CSS into every individual element if you want to target multiple elements. You can however play around this by putting style in the head, and type it out like CSS.

<head>
  <style>
    h1 {
      color: yellow;
      font-size: 20px;
      }
  </style>
</head>

SELECTORS

You can declare a certain type of element to be styled by starting the line of CSS with the element type, followed by brackets, and included inside it would be the declaration for example p{ color: maroon }. If you use an * instead for the selector, this is considered universal and will be applied to everything else. Selectors can also be done going by classes and id's, for these you would have to write them by .class and #id, with a period or hashtag symbol respectively. Another thing to note is that you can add multiple selectors in a row to add more specificity, and the more specific you are it can override other overarching declarations that are less specific. You can also separate multiple elements so that they can share a few similar declarations, but still allow for additional separate declarations.

p {
  color: blue;
  <!--Normal targeting one element -->
}

.main p {
  color: red;
  <!--Specified targeting of a p under a main class -->
}

.main, p {
  color: yellow;
  <!--Targeting both main and p-->
}

ATTRIBUTE

Attributes are how you will make edits to the HTML elements. These include color, width, height, font-style, Flexbox, and so much more. Something you can add to the end of a declaration (but still enclosed by the ; is !important, which will override any style regardless of specificity. A couple of the more complicated attributes to understand was one that I had previously mentioned, Flexbox, as well as the box model, which I will cover in another TIL!

TIL #3 HTML

Ethan Huang — Wed, 19 Jul 2023 02:50:15 +0000

Some notes I wanted to leave while reviewing HTML. The CSS notes are coming after! Big shoutout to the team for teaching me about markdown for the blog, it really helped with cleaning up how the blog post looks. If you also need the shortcuts, while editing click on the 'Commonly used syntax' option under the 'Editor Basics' to the right of where you are typing the blog post.

HTML = hypertext markup language; structure and presentation of raw text, includes links to access other text

BASIC STRUCTURE

We want to start our HTML page with <!DOCTYPE html> as the first line of code. In short, this tells the browser that the file is going to be in HTML. Don't forget to save this as .html as well. Just because it has been declared as an HTML document, we still need to include the HTML open and closing tags to embody the rest of the code.

Speaking of tags and the content it surrounds, altogether it would be called an HTML element (referring to below)

<p>Hello World!</p> 
<!-- <p> and </p> are the opening and closing tags respectively, Hello World! is the content -->

Basic structure of an HTML file will consist of the head and body. The head is where metadata (fancy word for info that describes and explains data) is contained, the title is an element that would fit here (this will be seen as the name of the tab. The body is where most of your HTML content will belong, for example the text, pictures, or buttons. A bare-bones basic HTML document will follow a similar structure like:

<!DOCTYPE html>
 <head>
  <body>
   <div>
   </div>
  </body>
 </head>

ELEMENTS AND TAGS

HTML is classified with parent and child elements. Elements that are contained within another are considered the children , while the one that encompasses it is the parent. When CSS is later applied to the HTML, the children may sometimes be affected by the parent's styling. Usually, the parent will be less indented compared to the child element, so having clean looking code is important.

<body> <!-- parent element -->
 <p>Hello World!</p> <!-- child element -->
</body> <!-- parent element -->

Headings are defined by h1, h2, ... h6, with the size decreasing as you get closer to 6. Important titles and headings should have lower h#, like h1 or h2. Paragraphs or p tags normally act as the child element under headings for the main content. There are other ways to space content besides paragraphs, line breaks or br tags will act similarly. If one br is used, the next sentence will continue on the next line, while if 2 br are used, there will be a gap between the sentences. hr is another kind of break, that will actually create a physical horizontal line within the text. It is nice that the br and hr tags do not need a closing tag, makes it slightly more convenient.

One br ex:
Here is the first sentence.
Here is the second sentence.

Two br ex:
Here is the first sentence.

Here is the second sentence.

hr ex:
Here is the first sentence.

Here is the second sentence.

div tags will separate elements into containers that will make it easier to style a specific group of elements. Referring to when I was writing about the parent and child elements, the divs can stop a child from inheriting the parent's styling if you can target the div that the child is in.

Attributes can be placed in an element's tag for additional styling, and to me the id and class attributes are super useful for targeting specific elements for CSS, like a more precise div element. Styling can also be done within the tags such as using em and strong, for italics and bold (respectively). Unfortunately, we can't Ctrl+i or Ctrl+b as a shortcut.

Lists are convenient ways to show separate items. There are 2 ways to do this, through ul tags or ol tags. ul, or unordered lists, will sort items out in bullet point fashion. ol, or ordered lists, will sort items out in number fashion. The former is great for things like grocery lists or listing out many different places you might want to visit, while the latter is good for steps to cook a recipe or doing a top 10 ranking of something. Both list tags do share the li child element which stands for list item, and all the list tags require both open and closing tags.

Ex Costco grocery list
<ul>
  <li>Milk</li>
  <li>Eggs</li>
  <li>Chicken Nuggets</li>
</ul>

Milk
Eggs
Chicken Nuggets

Ex Errands/Events by order for today
<ol>
  <li>Lunch with uncle</li>
  <li>Buy groceries</li>
  <li>Go to Nando's Peri Peri with friends</li>
</ol>

Lunch with uncle
Buy groceries
Go to Nando's Peri Peri with friends

It's nice to see pictures from time to time while reading a casual wall of text. It might seem a bit daunting at first, but all you really need to remember is having <img src="image_link_here.jpg"/> and place the image link within the "". If I recall, it is nice to have the image downloaded because if you get the picture off the Internet, and the picture gets deleted, then nothing will show up. If the picture doesn't load, that's where you can add an alt attribute to the picture, to at least provide some text of what the picture was supposed to show. The alt simply goes after the src="" like so:

<img src="image_link_here.jpg" alt="Great description of the image"/>

I haven't played around with adding videos on HTML, but it seems very similar to the images, but with extra steps. First thing to note is that video needs to have both an open and closing tag, The second thing is that you need to set a width and height appropriately to view the video comfortably (this can be played around with, depending if the video should be seen horizontally or vertically). Third is that you need to include basic playback options with the controls element. Finally if you want to add a similar alt attribute, you simply type it after closing the opening video tag. Looking over it overall, it seems pretty intuitive.

<video src="video_link_here.mp4" width="300" height="200" controls>
If you see this text, the video is not working </video>

LINKS

In HTML, you have the ability to hyperlink certain words or phrases that will take you to another page. This is great on sites like Wikipedia since it often refers to many other topics, so being able to quickly switch to learn about a new topic is useful. The way we add links to a word or phrase is by surrounding it with a anchor tags, and including an href attribute in the opening tag. Without the href, the phrase will be clickable but it won't lead to anywhere. You can also make your link open up a new tab instead of replacing the current tab. To do this, you can add a target attribute with a _blank value. It would go after the href link. Images can also be turned into links as well, we just need to add an img element.

<a href="https:/google.com">This link will lead to Google </a>
<!-- This will open Google in the same tab for the clickable link-->

<a href="https:/google.com" target="_blank">This link will lead to Google </a>
<!-- This will open Google in a new tab for the clickable link-->

<a href="https://e.wikipedia.org" target="_blank"><img src="https://wikipedia_logo.jpg" alt="The Wikipedia Logo"/></a>
<!-- Note that for the picture, you need to place the `img src` within the `a`, and you can also add an alternate description if the picture doesn't load. -->

In addition, another thing you can do is make links between external and internal pages. Let's start with external pages, and use a restaurant website as an example. Some different pages you would probably expect would be an about page, the menu, maybe a catering page, and a place to leave reviews, meaning you need to make a separate file for each different page. In HTML , you have to create these separate files all in a single folder (technically not true, but will make things so much easier) so that you can link them using a relative path ./ (which means look for a file in the current folder).

ricobenes/
|--about.html
|--menu.html
|--catering.html
|--reviews.html
<!-- Great price and value, would definitely recommend the wings or breaded steak sandwich. Unfortunately not sponsored -->

<a href="./about.html">About</a>
<a href="./menu.html">Menu</a>
<a href="./catering.html">Catering</a>
<a href="./reviews.html">Reviews</a>

For internal pages, let's look at using Wikipedia as another example. Say you are reading about an actor and want to skip to the list of movies they've acted in, normally near the top there should be a table of contents that lists several topics. By clicking it, you can jump to it directly without needing to scroll. To do this, add an id to certain target elements by placing the id within an element's opening tag. This should then match the #id of its respective element in the list.

<p id="high">I have the high ground</p>
<h2 id="mid">That movie is kinda mid</h2>
<h1 id="low">What a low blow</h1>

<ul>
 <li><a href="#high">High</a></li>
 <li><a href="#mid">Mid</a></li>
 <li><a href="#low">Low</a></li>
</ul>

OTHER THINGS

There is a lot of importance in having clean code. While you can technically write code all in one line.. why would you when you can space it out evenly? The computer ignores the whitespace in between lines of code, so there is quite a bit of freedom in terms of the spacing. Indenting is also important because it can separate parent from child elements to keep better track. Indenting can either be done simply with the 'Tab' button or 2 spaces. Comments are also nice to include so you can make notes telling yourself what each part of your code means, or just to write a reminder to revisit something you are stuck on. This is done with  and it will be ignored by the browser.

TIL #2 Codespace

Ethan Huang — Tue, 18 Jul 2023 03:44:38 +0000

TLDR: Codespace = VS Code in browser

I think it's crazy that a tool as powerful as VS Code can be done all within a browser, without needing the extensive download times, extensions, and packages (unless that comes in the future). Codespace is a really neat tool, and going through this assignment helped me understand a new way to perform source control. I was so used to typing in the 'git push', 'git commit - m', etc. that I didn't realize that Codespace just needed 3 clicks instead. Well, maybe VS Code can do that too, but when I used it beforehand I didn't know it was that simple. Leaving myself a few notes here, in case I need the refresher especially with the new 'rackup' and 'rake grade' commands.

Checking live preview and running tests in the terminal

Click the + sign to add another Bash prompt
Type "rackup" as the command (no "")
Live preview complete!
Click on ports
Under 'Local Address' click the globe to open in new browser
Git Source Control (left side squiggly icon)
Add a comment describing changes
Commit/ Sync Changes
Go to normal Bash Prompt
Type "rake grade"
Open Rake Grade assignment and copy paste the assignment token (rinse and repeat until everything works, click the red tests to find issues!)

P.S- I'm going to look into what exactly the Bash terminal is (and puma!)

TIL #1 Posting to DPI Dev News

Ethan Huang — Fri, 14 Jul 2023 19:28:01 +0000

Add profile page link to the assignment and let the background worker (BW) collect the posts
Open https://dev.to/
'Create Post' in the upper right hand corner
Get typing!
Publish
Revisit post to make edits if needed

It was a bit strange to not see a 'Create Post' button on https://news.dpi.dev/ , but at the very least I get it now! It's cool that there is a BW able to fetch the new posts. I am a bit curious, is the BW an actual person manually retrieving these posts, or is a bot that was written using code (and if the latter, what code was used to do it?)?