DEV Community: Dom

Web Developer Bootcamp Day Three Part 2

Dom — Wed, 14 Oct 2020 22:03:05 +0000

Section 5: HTML: Forms & Tables

The table element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data. Not for layout's like in the 90's!

Forms

The HTML form element represents a document section containing interactive controls for submitting information.

The following attributes control behavior during form submission.

action
The URL that processes the form submission.
method
The HTTP method to submit the form with. Possible (case insensitive) values:
post: The POST method; form data sent as the request body.
get: The GET method; form data appended to the action URL with a ? separator. Use this method when the form has no side-effects.

(mdn)
The HTML input element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The input element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.

The HTML label element represents a caption for an item in a user interface.

Associating a label with an input element offers some major advantages:

The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
You can click the associated label to focus/activate the input, as well as the input itself. This increased hit area provides an advantage to anyone trying to activate the input, including those using a touch-screen device.
To associate the with an element, you need to give the an id attribute. The then needs a for an attribute whose value is the same as the input's id.
Alternatively, you can nest the directly inside the , in which case the for and id attributes are not needed because the association is implicit

Buttons

The HTML button element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality. By default, HTML buttons are presented in a style resembling the platform the user agent runs on, but you can change buttons’ appearance with CSS.

button type

The default behavior of the button. Possible values are:

submit: The button submits the form data to the server. This is the default if the attribute is not specified for buttons associated with a form, or if the attribute is an empty or invalid value.
reset: The button resets all the controls to their initial values, like input type="reset". (This behavior tends to annoy users.) A button that resets the contents of the form to default values. Not recommended.
button: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.

Name

Name of the form control. Submitted with the form as part of a name/value pair. when each item of data is sent it is paired/identified by the name.

Radio Buttons, Checkboxes, & Selects

A check box allowing single values to be selected/deselected.
A radio button, allowing a single value to be selected out of multiple choices with the same name value.

The HTML Select element

represents a control that provides a menu of options:
The above example shows typical select usage.
It is given an id attribute to enable it to be associated with a label for accessibility purposes, as well as a name attribute to represent the name of the associated data point submitted to the server.
Each menu option is defined by an option element nested inside the select.
Each option element should have a value attribute containing the data value to submit to the server when that option is selected. If no value attribute is included, the value defaults to the text contained inside the element. You can include a selected attribute on an option element to make it selected by default when the page first loads.

Client-side form validation

Before submitting data to the server, it is important to ensure all required form controls are filled out, in the correct format. This is called client-side form validation, and helps ensure data submitted matches the requirements set forth in the various form controls.
Client-side validation is an initial check and an important feature of good user experience; by catching invalid data on the client-side, the user can fix it straight away. If it gets to the server and is then rejected, a noticeable delay is caused by a round trip to the server and then back to the client-side to tell the user to fix their data.
However, client-side validation should not be considered an exhaustive security measure! Your apps should always perform security checks on any form-submitted data on the server-side as well as the client-side, because client-side validation is too easy to bypass, so malicious users can still easily send bad data through to your server. Read Website security for an idea of what could happen; implementing server-side validation is somewhat beyond the scope of this module, but you should bear it in mind.

What is form validation?

Go to any popular site with a registration form, and you will notice that they provide feedback when you don't enter your data in the format they are expecting. You'll get messages such as:

"This field is required" (You can't leave this field blank).
"Please enter your phone number in the format xxx-xxxx" (A specific data format is required for it to be considered valid).
"Please enter a valid email address" (the data you entered is not in the right format).
"Your password needs to be between 8 and 30 characters long and contain one uppercase letter, one symbol, and a number." (A very specific data format is required for your data).

This is called form validation. When you enter data, the browser and/or the web server will check to see that the data is in the correct format and within the constraints set by the application. Validation done in the browser is called client-side validation, while validation done on the server is called server-side validation. In this chapter we are focusing on client-side validation.

If the information is correctly formatted, the application allows the data to be submitted to the server and (usually) saved in a database; if the information isn't correctly formatted, it gives the user an error message explaining what needs to be corrected, and lets them try again.

We want to make filling out web forms as easy as possible. So why do we insist on validating our forms? There are three main reasons:

We want to get the right data, in the right format. Our applications won't work properly if our users' data is stored in the wrong format, is incorrect, or is omitted altogether.
We want to protect our users' data. Forcing our users to enter secure passwords makes it easier to protect their account information.
We want to protect ourselves. There are many ways that malicious users can misuse unprotected forms to damage the application (see Website security).

simple validation

required. Boolean. A value is required or must be check for the form to be submittable
minlength password, search, tel, text, url Minimum length (number of characters) of value
maxlength password, search, tel, text, url Maximum length (number of characters) of value
pattern (regex) password, text, tel Pattern the value must match to be valid
URL A field for entering a URL. Looks like a text input, but has validation parameters and relevant keyboard in supporting browsers and devices with dynamic keyboards.

Web Developer Bootcamp Day Three

Dom — Wed, 14 Oct 2020 09:12:25 +0000

Section 4: HTML: Next Steps & Semantics

HTML semantics cheat sheet

title

Second most important piece of content.
Shown in the browser tab & search results.
Should be unique for every page on the site.

main

Primary content of the page.

section

A group in a series of related content pieces.

article

A piece of content that’s independent.
Could be removed from this website and still make sense.

aside

Secondary content not required to understand the main content.

nav

Defines a group a navigation links.

header

When inside body it’s the website masthead.
When inside article it’s the most important information.

footer

When inside body it’s the website footer.
When inside article it’s the least important information.

figure

Embeds annotated images, illustrations, photos, code, etc.
Could be moved out of place and would still make sense.

figcaption

For adding a caption/annotation to the figure
Must be inside a figure element—cannot stand alone.

Figures & captions

Use only if there’s a caption.

time datetime="…"

Marks some text as a time or date.
datetime defines the machine readable version.

VSCode Tip: Emmet

emmet cheatsheet

Web Developer Bootcamp Day Two

Dom — Tue, 13 Oct 2020 21:45:56 +0000

Section 4: HTML: Next Steps & Semantics

(mdn)
HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications. This set is sometimes called HTML5 & friends and often shortened to just HTML5.

(mdn)
In HTML, the doctype is the required "<!DOCTYPE html>" preamble found at the top of all documents. Its sole purpose is to prevent a browser from switching into so-called “quirks mode” when rendering a document; that is, the "<!DOCTYPE html>" doctype ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications.

div is block

The HTML Content Division element div is the generic container for flow content. It has no effect on the content or layout until styled using CSS.

As a "pure" container, the div element does not inherently represent anything. Instead, it's used to group content so it can be easily styled using the class or id attributes, marking a section of a document as being written in a different language (using the lang attribute), and so on.

Span is inline

The HTML span element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. span is very much like a div element, but div is a block-level element whereas a span is an inline element.

hr tag

The HTML hr element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.

more hr tag stuff!

Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.

br tag

The HTML br element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.

HTML entities

An HTML entity is a piece of text ("string") that begins with an ampersand (&) and ends with a semicolon (;) . Entities are frequently used to display reserved characters (which would otherwise be interpreted as HTML code), and invisible characters (like non-breaking spaces). You can also use them in place of other characters that are difficult to type with a standard keyboard.

Reserved characters

Some special characters are reserved for use in HTML, meaning that your browser will parse them as HTML code. For example, if you use the less-than < sign, the browser interprets any text that follows as a tag. more on entities/Reserved characters

Semantic Markup

Semantic elements

These are some of the roughly 100 semantic elements available:

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

Section 3: HTML: The Essentials

Web Developer Bootcamp Day One

Dom — Mon, 12 Oct 2020 22:09:25 +0000

The course is 60+ hours of full stack JavaScript with a massive CRUD app to build out.

I've listed all the sections below

12/10/2020
~~Section 1:~~ Course Orientation

~~Section 2:~~ An Introduction to Web Development

Concepts:

The Internet is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together.(from MDN)

a fun article here

the web (also email, file sharing, online gaming, streaming services)

text from BBC
Many people think that the internet and the world wide web are the same thing. While they are closely linked, they are very different systems.

The internet is a huge network of computers all connected together. The world wide web (‘www’ or ‘web’ for short) is a collection of webpages found on this network of computers. Your web browser uses the internet to access the web.

So when you get home from school and ask to go on the internet, you should really say, ‘Can I look at some of the world wide web?’.

HTTP (Hypertext Transfer Protocol) Allows HTML documents to be requested and transmitted between browsers and web servers via the internet.

Request/Response Cycle
an article here
Front-End, Back-End

source, GeeksforGeeks
Difference between Frontend and Backend:

Frontend and backend development are quite different from each other, but still, they are two aspects of the same situation. The frontend is what users see and interact with and backend is how everything works.

Frontend is the part of the website users can see and interact with such as the graphical user interface (GUI) and the command line including the design, navigating menus, texts, images, videos, etc. Backend, on the contrary, is the part of the website users cannot see and interact with.

The visual aspects of the website that can be seen and experienced by users are frontend. On the other hand, everything that happens on the background can be attributed to the backend.

Languages used for front end are HTML, CSS, Javascript while those used for backend include Java, Ruby, Python, .Net .

HTML, CSS, JS

Setting Up Our Developer Environment:

Chrome, VS Code

Section 3: HTML: The Essentials
Section 4: HTML: Next Steps & Semantics
Section 5: HTML: Forms & Tables
Section 6: CSS: The Very Basics
Section 7: The World of CSS Selectors
Section 8: The CSS Box Model
Section 9: Other Assorted Useful CSS Properties
Section 10: Responsive CSS & Flexbox
Section 11: Pricing Panel Project
Section 12: CSS Frameworks: Bootstrap

Section 13: JavaScript Basics!
Section 14: JavaScript Strings and More
Section 15: JavaScript Decision Making
Section 16: JavaScript Arrays
Section 17: JavaScript Object Literals
Section 18: Repeating Stuff With Loops
Section 19: NEW: Introducing Functions
Section 20: Leveling Up Our Functions
Section 21: Callbacks & Array Methods
Section 22: Newer JavaScript Features
Section 23: Introducing The World Of The DOM
Section 24: The Missing Piece: DOM Events
Section 25: Score Keeper CodeAlong

Section 26: Async JavaScript: Oh Boy!
Section 27: AJAX and API's
Section 28: Mastering The Terminal

Section 29: Our First Brush With Node
Section 30: Exploring Modules & The NPM Universe
Section 31: Creating Servers With Express
Section 32: Creating Dynamic HTML With Templating
Section 33: Defining RESTful Routes
Section 34: Our First Database: MongoDB
Section 35: Connecting To Mongo With Mongoose
Section 36: Putting It All Together: Mongoose With
Express
Section 37: YelpCamp: Campgrounds CRUD
Section 38: Middleware: The Key To Express
Section 39: YelpCamp: Adding Basic Styles
Section 40: Handling Errors In Express Apps
Section 41: YelpCamp: Errors & Validating Data
Section 42: Data Relationships With Mongo
Section 43: Mongo Relationships With Express
Section 44: YelpCamp: Adding The Reviews Model
Section 45: Express Router & Cookies
Section 46: Express Session & Flash

Section 47: YelpCamp: Restructuring & Flash
Section 48: Authentication From "Scratch"
Section 49: YelpCamp: Adding In Authentication
Section 50: YelpCamp: Basic Authorization
Section 51: YelpCamp: Controllers & Star Ratings
Section 52: YelpCamp: Image Upload
Section 53: YelpCamp: Adding Maps
Section 54: YelpCamp: Fancy Cluster Map
Section 55: YelpCamp: Styles Clean Up
Section 56: YelpCamp: Common Security Issues
Section 57: YelpCamp: Deploying