Tony Chan

Web Servers

When a client goes to a webpage, index.html is the page the server will send back to show the client. The index.html file is the name of the resource on the server. As a convention, most web servers are configured so that the request for / is mapped to the file at the path /index.html. This file is called the designated homepage on the web server. In almost all real-world web applications, the file index.html in the root directory is called the home page of the web application, and the web application is configured to return this file whenever a GET request receives the URL. Index.html is the default name for a home page of a website hosted on an Apache web server.

The web server version takes more than twice the amount of time to access than the local computer version. The web server version uses the same index.html as the local computer, but the web server version runs a JavaScript called executor.js and uses favicon.ico for making a custom browser tab icon. The browser tab and contents for both web server and local computer shows my name, Tony Chan, and same contents. The HTTP request lines for the two versions are similar, except for the URL paths. Both have the GET request method and the same successful request response of 200. The web server version has an IP address for finding the target web server, but the local computer version does not. The request header for the web server version shows the client can handle text/html, English and encoding types. The local computer request header references Chrome, which can do the same things. The request method is GET, which means the request header body will be empty. No document is being requested. The HTTP response are different for the two versions. In this example, no separate server is invoked. The request is just for a static index.html file, which is sent back to the client. The local computer version has minimal response header content. The web server version has more response header content and the content type is specified as test/html. The web server version has to access a server far away and more information is needed. A TCP/IP connection needs to be opened to the web server. The response header has connection set to keep alive and uses an Apache server program. The response header body is the index.html file at the web server address, which is sent back to the client.

The response status for favicon.ico is 200, which means the HTTP request was successfully processed by the server. The files main.css and main.js do not have a response status code and are showing errors. The browser inspection tool indicates the main.css and main.js files do not exist and are generating an error for each. The line of code with command link is looking for these two files. After I create these two files in the same directory as index.html, the errors are eliminated and the response status code is 200 for each file.

The URL to my web file is a unique identifier. The scheme in my web file is HTTPS. A URL starts with a scheme which identifies the protocol the web client must use to request the resource. A subdomain is a subsection of that domain/server. Its name is appended to the front of the domain name. In my web file, the subdomains are “web” and “engr.” The domain name is mapped to the IP address for that server machine. In my web file, the domain name is oregonstate.edu. The resource in my web file URL is index.html and the resource path is ~chanto/a1-chanto/.

Frontend Design

Frontend design is about creating an interface that is both aesthetically pleasing and functional. This means considering the user's experience and the purpose of the web page. One important consideration is adapting the viewing environment to different formats, from mobile phones to large screen displays, to ensure that the web page is accessible and usable on any device. The graphical user interface (GUI) is a key component of frontend design. It should be simple to use and intuitive, with clear navigation and prominent calls to action. The organization of the web page should be logical and easy to follow, with the most significant information positioned prominently to catch the user's attention. While the top right corner is often a good position for key information, this can vary depending on the purpose and content of the web page. Color can be used to evoke emotions and create contrast, while typography and fonts can convey hierarchy and readability. Media such as images and videos can also enhance the user experience, but should be used sparingly to avoid overwhelming the user. Usability is a critical component of frontend design. It's about making it easy for users to accomplish specific tasks, such as making a purchase or searching for a topic of interest. This means designing with the user in mind and considering factors such as load times, clear messaging, and accessibility for users with disabilities. Overall, frontend design is a complex and multifaceted discipline that requires careful consideration of a wide range of factors. By focusing on user experience, GUI design, organization, and usability, designers can create effective and engaging frontend designs.

The Five "E"s of Usability

Effective

It is easy for users to meet their goal(s). The main messages are clear.

Efficient

The user can get through the website with the fewest clicks as possible.

Easy to navigate

For first time users, the website should be intuitive to get around. The main topics should be main headers.

Error-free

The website needs to be tested for all the possible results that a customer will want to achieve.

Enjoyable to use, or engaging

The overall experience needs to be hassle-free and give what the customer wants.

Page layout tags are block-level elements such as paragraph, headers, lists, navigation, tables and many more. There are two categories called block level elements or inline level elements that contribute to the flow control in HTML. A Block-level element occupies the entire horizontal space, and vertical space equal to the height of its contents, thereby creating a “block”. On the other hand, inline elements can start anywhere in a line. Browsers typically display the block-level element with a newline both before and after the element. A block-level element always starts on a new line and takes up the full width available. Block-level elements may appear only within a body element.

We create links from one section or page to another using the anchor element. The content between the opening and closing anchor element tags should describe the link when someone clicks to navigate to it. The anchor element's HREF attribute, creates a hyperlink to web pages, files, email addresses, locations on the same page, or anything else a URL can address. Content within each anchor element should indicate the link's destination. If the HREF attribute is present, pressing the enter key while focused on the anchor element will activate it. It is possible to use the anchor element's HREF attribute to link to a specific location within a document, rather than just the top of the document. Text anchor is an attribute to elements such as TEXT, TREF, TSPAN and more. It is used to align (start-, middle- or end-alignment) a string of pre-formatted text or auto-wrapped text and is applied to each individual text chunk within a given text element. The navigation HTML element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents. Common examples of navigation sections are menus, tables of contents, and indexes. The navigation element is intended only for a major block of navigation links. A document may have several navigation elements, for example, one for site navigation and one for inside the same page navigation.

Optimizing Images

In order to improve the image usability of HTML and loading of webpage images, there are six image specifications for the web.

• Use descriptive and short file names that contain who, what, when and where. Search engines will scan file names for categorization for others looking for this topic.
• Use compression applications to reduce file sizes to as small as possible in order to reduce load times, but do not sacrifice image quality too much.
• Crop the images to the dimensions that will fit your webpage space. Frame the image on one main point, which will help the viewer know what the image is about and not get distracted by other objects. For displaying programming code, just show a small function or a section of code that is readable.
• The correct file format for pictures is JPEG. It is a good choice for lossy compression of still images and is currently the most popular. JPEG files are only used for photographic images. They compress down to small file sizes and remain rectangular. Graphics Interchange Format, GIF, and 8-bit PNG are correct file formats for logos, icons, and line art. GIF is a good choice for simple images and animations. GIF files can have 8-bit transparency and/or animation and are typically used for line-art graphics. Their edges anti-alias to one background matte color. Portable Network Graphics, PNG, is preferred over JPEG for more precise reproduction of source images, or when transparency is needed.
• Image usability will provide multiple image sizes for a range of monitor sizes is becoming a standard. Responsive images are images that work well on devices with widely differing screen sizes, resolutions, and other such features. This helps to improve performance across different devices. An improvement would be to display a cropped version of the image which displays the important details of the image when the site is viewed on a narrow screen. A second cropped image could be displayed on a medium width screen device, like a tablet. The general problem whereby you want to serve different cropped images in that way, for various layouts, is commonly known as the art direction problem. In addition, there is no need to embed such large images on the page if it is being viewed on a mobile screen. Doing so can waste bandwidth; in particular, mobile users don't want to waste bandwidth by downloading a large image intended for desktop users, when a small image would do for their device. Ideally, multiple resolutions would be made available to the user's web browser. The browser could then determine the optimal resolution to load based on the screen size of the user's device.
• Lastly, for image usability, there is a color mode for HTML with 256 predefined HTML colors such as red, blue, pink and more. Other color modes are hex (hexadecimal) codes, RGB (red, green, blue), RGBA (red, green, blue, alpha), and HSL (hue, saturation, lightness). Select which color mode by file format such as RGB for PNG, JPG, SVG, and WebP, and Indexed for GIF.

Cascading Stylesheets

Before Cascading Style Sheets, CSS, HTML had a big problem. It was, HTML was never intended to contain tags for formatting a web page. Then in some later versions of HTML, fonts and color information were added to the language. Developers had the difficulty to consistently maintaining style formatting page by page. CSS changed all that. It removed the style formatting from the HTML page. CSS is used to define styles for your web pages, including the design, layout, and variations in display for different devices and screen sizes. The style definitions are normally saved in external .css files. With an external stylesheet file, you can change the look of an entire website by changing just one file, which saves the developer from a lot of work adjusting page by page. It allows the developer to make the webpage to what he is envisioning it to be.

A main external CSS file can be linked in the global head of an index.html. Other stylesheets for specific components can be linked after the global CSS file or, imported into that global stylesheet. There are five different ways to include styles after the global stylesheet.

• The first method, an externally linked CSS file. For this webpage, the global stylesheet example is <link rel="stylesheet” type="text/css” media="screen” href="main.css”> or use import, @import “component1.css”;
• The second method is embed or internal style within a <style></style> tag. An internal CSS is used to define a style for a single HTML page. An example is <style> h1 {color: blue;} p {color: red;} </style>
• The third way is inline, which uses the style attribute of an HTML element. The element's attribute and value are used. An inline CSS is used to apply a unique style to a single HTML element. An example is <h1 style="color:blue;”>A Blue Heading </h1>
• A fourth method is in JavaScript template literals within a JavaScript function.
• Lastly, In regular JavaScript, by manipulating the Document Object Model (DOM).

Forms

The six main goals of accessible forms are

• Provide clear instructions above the form and in the labels. Placeholder values are only helpful for users with vision.
• Let users know why you're gathering the data and which fields are required.
• Set the first field to autofocus, so users can start typing without using the keyboard.
• Ensure each form control can be filled in using the keyboard, for those that cannot or don't use a mouse or trackpad.
• Add tab indexing to complex forms, so it is clear in which order the fields should be filled.
• Ensure validation messages are screen readable. The built-in HTML browser message is not screen-readable.

We will be using these basic form elements throughout the remainder of the course: form, fieldset, legend, label, input, select, option, and textarea.

• The form HTML element represents a document section containing interactive controls for submitting information and has two very important attributes. The first is action, which specifies where the request from the form should be sent. The second essential attribute is method, which specifies the HTTP method to be used in the HTTP request sent when the form is submitted.
• The label HTML element represents a caption for an item in a user interface. Associating a label with a form control, such as input or textarea 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.
• The fieldset HTML element is used to group several controls as well as labels within a web form. The fieldset element provides a grouping for a part of an HTML form, with a nested legend element providing a caption for the fieldset.
• The legend HTML element represents a caption for the content of its parent fieldset.
• The input HTML 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. How an input works varies considerably depending on the value of its type attribute. The input element is so powerful because of its attributes. Some attributes are checkbox, radio, email, button, image, submit and more. If this attribute is not specified, the default type adopted is text. Another important input element attribute is the name. It is a string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted. The name attribute creates a unique behavior for radio buttons. Consider the name a required attribute, even though it is not required.
• The select HTML element represents a control that provides a menu of options. The select element has some unique attributes you can use to control it, such as multiple to specify whether multiple options can be selected, and size to specify how many options should be shown at once. It also accepts most of the general form input attributes such as required, disabled, autofocus, etc.
• The option HTML element is used to define an item contained in a select, an optgroup, or a datalist element. As such, option can represent menu items in popups and other lists of items in an HTML document. Each menu option is defined by an option element nested inside the select element. 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.
• The textarea HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
• The button HTML element is an interactive element activated by a user with a mouse, keyboard, finger, voice command, or other assistive technology. Once activated, it then performs an action, such as submitting a form or opening a dialog.

The major form style recommendations to improve usability include making inputs, selects, and buttons about the size of the tip of a finger, visually separating groups of labels and inputs, and spacing out the forms for better readability. It's also important to use clear and descriptive language in form labels and instructions, avoiding jargon or technical language that may be unfamiliar to users. Inline validation, which provides immediate feedback to users when they enter information that is incorrect or incomplete, can also help improve usability by reducing frustration and errors. To group controls, developers can use the fieldset element, and the legend element can provide a caption for the content. Using the label element with the block attribute can improve readability, and attributes such as autofocus and required can help guide users through the form. Additionally, increasing font size and adding padding can accommodate users with larger fingers or arthritis. Finally, using consistent design patterns and layout across forms can help users feel more comfortable and confident in completing them. By implementing these form style recommendations, developers can improve the usability and accessibility of their forms, making them easier and more efficient for users to complete.

Express

Node.js

NPM

Express

JavaScript

The main data types of javaScript are:

• JavaScript has no explicit integer type. All numbers are double-precision, which means don't worry about the difference between, say, 1 and 1.0. As with floating-point numbers in any programming language, you cannot avoid round off errors with fractional values. This is inevitable since decimal numbers such as 0.1, 0.2, and 0.3 do not have exact binary representations.
• The Boolean type has two values, false and true. In a condition, values of any type will be converted to a Boolean value. The values 0, NaN, null, undefined, and the empty string are each converted to false, all others to true.
• String literals are enclosed in single or double quotes: 'Hello' or “Hello”. If you use a quote inside a string that is delimited by the same quote type, escape it with a backslash.
• JavaScript's symbols are a special data type introduced in modern JavaScript that can be used as object keys instead of just strings. The main advantage of symbols is their uniqueness. Every symbol created using the Symbol() function is completely unique and cannot be replicated. They are useful for defining properties with well-known symbols to customize the behavior of certain API methods, which allows you to create objects with non-standard behavior and write code that works with generic objects. Symbols can also be used as keys in object literals and destructuring assignments. Additionally, symbols have two built-in properties, Symbol.iterator and Symbol.toPrimitive, which can be used to customize the behavior of an object when it is iterated over or coerced to a primitive value. Since symbols are not strings, you cannot use the dot notation for symbol keys, and instead must use the bracket operator. It's important to save the symbol in a variable or object, so that it is available when you need it. Overall, symbols provide a powerful and flexible way to work with objects in JavaScript. JavaScript has two ways to indicate the absence of a value. When a variable is declared but not initialized, its value is undefined. This commonly happens with functions. When you call a function and fail to provide a parameter, the parameter variable has the value undefined. The null value is intended to denote the intentional absence of a value. Unlike null, undefined is not a reserved word. It is a variable in the global scope.
• JavaScript's objects are very different from those in class-based languages such as Java and C++. A JavaScript object is simply a set of name/value pairs or “properties.” Such an object has only public data and neither encapsulation nor behavior. The object is not an instance of any particular class. In other words, it is nothing like an object in traditional object-oriented programming. Of course, you can store an object in a variable. Once you have such a variable, you can access the object properties with the usual dot notation. The non-object types are collectively called primitive types.

Change the DOM using JavaScript and Express

Developers update the DOM of a page by using the DOM API through JavaScript and Express for several reasons:

• Dynamic Content: JavaScript enables developers to create dynamic and interactive web pages. By manipulating the DOM, they can add, remove, or modify elements and properties based on user actions, server responses, or other events. This enhances the user experience by providing a more engaging and responsive interface.
• Asynchronous Updates: JavaScript, in combination with AJAX, allows developers to make asynchronous requests to the server without reloading the entire page. This means they can fetch data from the server in the background and dynamically update specific parts of the DOM, without interrupting the user's interaction with the page.
• Client-Server Communication: JavaScript can send HTTP requests to the server using AJAX or the fetch API. Developers can send data to the server, retrieve server-generated content, or perform server-side operations asynchronously. By updating the DOM based on the server's response, they can reflect changes in the UI without requiring a full page reload.
• Real-time Updates: In applications that require real-time updates, such as chat applications or collaborative editing tools, JavaScript and frameworks like Socket.IO are used to establish a persistent connection with the server. This allows the server to push updates to the client in real-time, and JavaScript can update the DOM accordingly to reflect those updates instantly.

Testing the DOM (Document Object Model) using random data has both pros and cons, similar to testing other types of application code.

Pros:

• Identification of Edge Cases: Random data testing helps identify edge cases that might not be caught by other testing methods. It exercises the DOM in ways that would be difficult or impractical with manually-created data.
• Performance Improvement: Random data can be used to stress test the DOM, revealing performance bottlenecks that may go unnoticed in controlled scenarios. This aids in optimizing the DOM for real-world applications.
• Bug Discovery: Random data testing can uncover bugs in the DOM that might not be detected through other testing approaches. It assists in enhancing the overall quality and reliability of the DOM.

• Time-Consuming: Generating and testing random data can be time-consuming, particularly when dealing with large documents. The process may require significant computational resources and impact testing efficiency.
• Bug Reproduction Challenges: Random data's unpredictable nature makes it difficult to reproduce bugs encountered during testing. Reproducing and debugging these issues can be challenging, hindering the timely resolution of identified problems.
• Result Interpretation Difficulty: Interpreting the results of random data testing can be challenging due to the unpredictable nature of the data. Determining the root causes of issues can be complex, making it harder to pinpoint and address the underlying problems.

In conclusion, while testing the DOM with random data can offer benefits such as identifying edge cases, improving performance, and discovering bugs, it also entails challenges related to time consumption, bug reproduction, and result interpretation. A balanced testing strategy that combines random data testing with other structured approaches can help mitigate these drawbacks and yield more comprehensive results.