DEV Community: Abby

Nuggets of Knowledge Series: Revisiting HTML (Part I)

Abby — Tue, 30 Jun 2020 23:41:31 +0000

Following up on my last post about starting like a newbie again, I wanted to begin the rediscovery adventure with the HTML Essential Training course by Jen Simmons.

Let’s dig right into it!

Oh sturdy, HTML, our resilient, human-readable, and forgiving friend. How I’ve missed going into depth with you!

HTML is the foundation of everything web… without it, it would be like the human body without a skeleton. It defines the meaning and structure of web content; the markup language for documents designed to be displayed in the web browser. A markup that provides meaning between the human and the computer

I want to divide this blog post into the stand out sections from the course, with a little more information on the topics and extra links for your in-depth pleasure!

Formatting HTML elements:

Tags:
- all html markup is surrounded by carets like: “<” and “>”
- Example: <p>,</p>, <video>, or </video>;
Elements:
- contains a starting tag, content and closing tag
- " <p> You are very smart. </p> "
Sometimes the words 'tags' and 'elements' are used interchangeably, but I like to be super specific.
The hard part comes when you are trying to figure out what to use when
- You ask yourself… should I use <h2> or <h4> here?
- To answer that question, head over to Using h1-h6 to identify headings for more insight.

DOM Tree

When you start accumulating all of these tags... you start creating a family tree! Congrats!!!

Well... it's really a Document Object Model (DOM) tree, which can look like this:

Each branch of the tree is a node and each node is an object. This means you can do ALOT of things with them, including adding DOM methods.
DOM methods are actions you can perform on HTML elements, you'll be able to modify the structure, style, or alter the content of the documents.
Some examples are:
- focus() - which gives focus to an element
- getElementsByClassName() - which will return a collection of child elements with that specific class name
- replaceChild() - replaces a child node in the element

*Check out the list of the many properties and methods that can be used on all HTML elements here.

HTML Attributes

Tags are cool, but what if you wanted to enhanced them?

Hello Attributes! Attributes provide HTML elements with more information and usually comes in name/value pairs like: name="value".

An attribute is just an additional value that configures the elements or adjusts it's behavior.

Let's take a look!

Here's an example:

What attributes do you see there?

I see...."charset", "href", "rel", "type", "class" and "src"

Want to get to know more attributes? You got it: HTML Attribute Reference Sheet

Bold and Italics

This honestly seemed like a simple enough concept, but I wanted to emphasize the differences between <em> ( emphasis) versus <i>(italics). They both visually make their words italicized, but are perceived very differently.

There is a big difference between:

“I am really craving tacos” (uses <em>)

And

“One of my favorite books is The Brief Wondrous Life of Oscar Wao by Junot Diaz.” (uses <i>)

Think about it as a word that is being emphasized versus a word that is used as a title for something.

This is incredibly important because of screen readers and how they interpret the text on the page.

Apply the same kind of thinking to <bold> and <strong>.

By saying the word as you intended it to be understood, you would be giving the user on the other end of the screen reader a much better experience.

ARIA roles and ARIA labels

Speaking of user experience...it's so important that everyone can read your website. It's an absolute human right for all types of people to be able to access your webpage.

Let's talk about ARIA aka Accessible Rich Internet. ARIA is a set of attributes that modify the way those elements are translated in the accessibility tree.

<button aria-label="screen reader only label"></button>

<div aria-live="polite"> <span>GOOG: $400</span> </div>

<div role="alert"> Please upgrade your computer! </div>

As a developer, you have to take into account that sometimes what you see is not what is read by a screenreader, so take some extra time for this.

For a glorious deep dive into how ARIA roles can work, take a look at the Google Chrome Developers A11ycasts series.

Superscripts, subscripts, and small text

Sometimes <sub> and <sup> aren't enough to show your mathematical examples.

I was reintroduced to MathML, a mathematical markup language used to add mathematical and scientific content on the web.

Here's an example:

This is the output of the for the code above:

Pretty cool!

Play around with MathML when you get a chance!

Debugging HTML

Oh no! Your code is messing up, there's a bug, go get it!!

No need to worry! DEBUGGER IS HERE!!!!!

If you use Chrome like I do, the Elements tab in Inspector is going to be your best friend!

How to get into the Elements Tab?
- Click on the right mouse button --> Inspect --> Elements Tab

There are so many things you can do within the inspector to debug your HTML.

Want to learn more? Of course you do! Check out How to Debug Front-end by Michał Witkowski. It dives much deeper! I might write another post just on this down the line!

What to expect in the next post?

More code samples and a deep dive into links, images, media and more!

See you then!

Resources to check out:

HTML Living Standard
MDN Web Docs

Commencer comme un débutant...encore

Abby — Fri, 26 Jun 2020 04:28:09 +0000

En tant que ingénieur logiciel , l'apprentissage est essentiel.

Chaque jour, il y a quelque chose de nouveau à apprendre. C'est ce qui rend le travail si intéressant !

Ce que j'ai remarqué, cependant, c'est que lorsque vous travaillez dans une grande entreprise de technologie ou dans n'importe quelle entreprise pendant un certain temps, vous commencez à rouiller lorsqu'il s'agit de code en dehors de l'orbite de l'entreprise.

On peut se sentir trop à l'aise avec les outils internes de l'entreprise et être un peu trop à l'aise avec leur façon unique de construire les choses. Si vous faites cela pendant des années et que vous n'avez pas de projets extérieurs... vous pouvez devenir vraiment rouillé.

Cela peut devenir un problème lorsque vous vous trouvez à la recherche d'un nouvel emploi et que vous vous rendez compte que vous n'avez plus de pratique. Ah !

Personnellement, je ne voulais pas devenir rouillé et je voulais que mon jus créatif coule à nouveau. Je voulais recommencer depuis le début et je voulais une remise à zéro.

Comment vais-je m'y prendre ?

Dans les prochaines semaines, je vais suivre le parcours "Become a Front-End Web Developer" sur Linkedin Learning pour consolider tout ce que j'ai appris dans ma carrière jusqu'à présent.

Est-ce que je me souviens des bases ? Voyons voir.

J'ai toujours mieux appris en regardant des vidéos et en réalisant des projets avec un peu d'encadrement.

Voici les cours que je vais terminer:

Succeeding in Web Development: Full Stack and Front End by Ray Villalobos

Web Programming Foundations by Morten Rand-Hendriksen

Programming Foundations: Fundamentals by Annyce Davis

User Experience for Web Design by Chris Nodder

UX Foundations: Accessibility by Derek Featherstone

HTML Essential Training by Jen Simmons

CSS Essential Training by Christina Truong

Javascript Essential Training by Morten Rand-Hendriksen

Responsive Layout by Clarissa Peterson

Learning GitHub by Aaron Stewart

Sass Essential Training by Ray Villalobos

Learning React.js by Eve Porcello

Tout au long du voyage, je documenterai tout ce qui se détachera en cours de route !

Rendez-vous au prochain poste ! :)

Starting like a Newbie...again

Abby — Thu, 25 Jun 2020 21:50:35 +0000

As a developer, learning is everything.

Everyday, there is something new to learn. That's what make the job so interesting!

What I've noticed, however, is that when you work at a big tech company or at any company for a while, you start getting rusty when it comes to code outside the company's orbit.

You can get wayyy too comfortable using the company's internal tools and get a little too snug with their unique way of building things. If you do this for years and don't have any outside projects... you can become really rusty.

It can become a problem when you find yourself looking for a new job and realize you're out of practice. Ah!

I, personally, didn't want to get rusty and wanted my creative juices flowing again. I wanted to start from the beginning and wanted a reset.

How am I going to do this?

In the next couple of weeks, I will be doing the "Become a Front-End Web Developer" path on Linkedin Learning to solidify everything I've learned in my career so far.

Do I remember the very basics? Let's see.

I have always learned best from videos and doing projects with a little bit of guidance.

Here are the courses I will be completing: