HTML

Table of Contents

1. Interesting Elements
2. Typography
3. Favicon
4. Dark Mode
5. Pug HTML Preprocessor
6. Accessibility

• cheatsheets
• cheatsheets

doctype

The HTML5 Doctype is declared at the very beginning of an HTML document to inform the web browser about the version of HTML in which the document is written. It is essential for ensuring that the browser renders the page correctly, following the standards set by HTML5. The declaration is made using the following syntax:

Links

HTML first JS Framework

Interesting Elements

https://hoversignal.com/

head

viewport (responsive meta tag)

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

The HTML <meta> tag you provided is used to define the viewport settings for a web page. It is not specific to React or PWAs (Progressive Web Apps), but rather a general HTML tag used for responsive web design.

Let's break down the <meta> tag you provided:

• name="viewport": This attribute specifies that the <meta> tag is defining viewport settings for the web page.

• content="width=device-width, initial-scale=1.0": This attribute specifies the actual viewport settings.

  • width=device-width instructs the browser to set the width of the viewport to the width of the device. This means that the web page will adjust its layout to fit the screen width of the user's device.

  • initial-scale=1.0 sets the initial zoom level to 1.0, which ensures that the web page is initially displayed at its intended size without any zooming or scaling.

Overall, the <meta> tag you provided is commonly used in responsive web design to ensure that the web page is displayed correctly and adapts to different devices and screen sizes. It allows for a better user experience by optimizing the content layout and scaling on various devices.

<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

the inclusion of minimum-scale and user-scalable provide more control over how the user can scale or zoom the web page. In the first tag, the user's scaling behavior is specified provides more flexibility by allowing the user to zoom in or out of the web page and specifies a minimum scale limit.

compatibility mode

The <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> meta tag is used to provide instructions to the browser regarding the compatibility mode to be used when rendering the webpage.

The http-equiv attribute specifies that the meta tag is used to define an HTTP header value. In this case, the value is "X-UA-Compatible," which is a non-standard header used by Internet Explorer (IE) to control its rendering behavior.

The content attribute specifies the value of the HTTP header. In the example you provided, the content value is "IE=edge, chrome=1". Let's break it down:

• "IE=edge" indicates that the webpage should be rendered using the latest version of Internet Explorer available in the user's system. This directive ensures that the page is not rendered in compatibility mode, which could cause layout and functionality issues.
• "chrome=1" is a parameter specific to Internet Explorer that triggers Chrome Frame if it is installed in the user's system. Chrome Frame is a plugin that enables Internet Explorer to use the rendering engine of Google Chrome for improved performance and compatibility.

In summary, the <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> meta tag is typically used in webpages to ensure that Internet Explorer renders the page using the latest rendering mode and provides compatibility options such as Chrome Frame if available. However, it's worth noting that with the decline in usage of older versions of Internet Explorer, this meta tag may be less relevant for modern web development.

<meta>

The <meta> tag is used in HTML to provide metadata about a web page. It's important to note that the functionality and support for specific meta tags can vary across different platforms, browsers, and versions. Therefore, it's recommended to refer to the documentation and guidelines provided by the target platform or browser to ensure proper usage and compatibility.

<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">

HTML <map> Tag

An image-map, with clickable areas: W3 Schools - HTML <map> tag

Typography

Custom Fonts

@import

4. Heading and Paragraph Tags

In email the use of <h1> to <h6> and <p> tags leads to missing margins. This is why we use <td> or <div> to style the text.

<td class="text" style="color:#43756e; font-family: 'Oswald', Arial, sans-serif; font-size:13px; line-height:20px; text-align:left">Top Notch Code</td>

Favicon

• Use a favicon and touch icons for branding:

  <link rel="icon" href="favicon.ico">
  <link rel="apple-touch-icon" href="apple-touch-icon.png">

• Include a manifest file for Progressive Web App (PWA) support:

  <link rel="manifest" href="manifest.json">

• Add a service worker for offline support and caching.

By following these best practices, your Angular 19 app will provide a modern, graceful user experience with enhanced performance, accessibility, and adaptability.

https://favicon.io/

<!DOCTYPE html>
<html>
<head>
  <title>My Page Title</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Dark Mode

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

.dark-mode {
    prefers-color-theme: dark
}

Color Scheme

<head><meta name="color-scheme" content="light dark"></head>

<picture>
  <source srcset="dark-mode.png" media="(prefers-color-scheme: dark)" />
  <img src="light-image.png" />
</picture>

Accessibility

As an agile web developer, here are some steps you can take to ensure that features are compliant with ADA guidelines:

1. Understand the ADA guidelines: Familiarize yourself with the Web Content Accessibility Guidelines (WCAG) 2.1, which provide the standards for web accessibility. Understand the guidelines and how they apply to different types of disabilities.

2. Involve Accessibility experts: Engage with accessibility experts in the early stages of development to ensure that accessibility considerations are built into the design process. Accessibility experts can review wireframes, designs, and prototypes to identify accessibility issues.

3. Conduct accessibility testing: Accessibility testing should be done throughout the development process to detect and address accessibility issues early. You can use automated accessibility testing tools like AXE or WAVE. Additionally, it is essential to conduct manual testing with assistive technologies like screen readers to ensure that your application is accessible to users with disabilities.

4. Implement accessibility features: Implement accessibility features such as alternative text for images, proper use of headings, and proper labeling of form elements. Use ARIA (Accessible Rich Internet Applications) attributes where necessary to make sure that the application is navigable using assistive technologies.

5. Document accessibility considerations: Document all accessibility considerations and decisions made during the development process. This documentation can be used for future reference and to demonstrate compliance with ADA guidelines.

6. Involve users with disabilities: Involve users with disabilities in the testing process to get feedback on the accessibility of your application. Their feedback can help you identify any issues that you may have missed during development.

7. Regularly review and update: Regularly review and update your application to make sure that it remains compliant with ADA guidelines, especially when new features are added or changes are made to the application.

A11y

https://www.a11yproject.com/checklist/ https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role

title: ARIA Accessibility
url: ARIA_HTML5.pdf

ARIA States

• aria-busy
• aria-disabled
• aria-grabbed
• aria-hidden
• aria-invalid

ARIA Properties

aria-flowto

Clickable Area Size

Role

HTML 5	ARIA Role
<header>	role="banner"
<nav>	role="navigation"
<main>	role="main"
<footer>	role="contentinfo"
<aside>	role="complementary"
<section>	role="region" *
<article>	role="article" *
none	role="search"
<form>	role="form"

SEO

Ping Attribute send a short POST to a url when a user clicks on the hyperlink

Pug

formerly known as Jade

• loops
• mixins

attribute vs property Attributes are created to store custom data directly inside HTML tags for easy access from CSS and JavaScript

Emmet

emmet

emmet

emmet

UI/UX

Text Size / Zoom Content can be resized to 400% without loss of content or functionality, and without requiring two-dimensional scrolling except for parts of the content where fixed spatial layout is necessary to use or meaning.

• text increase up to 200%
• use relative units rem or em

Input Forms

Form Date inputs input type=month and input type=week

Keyboard Navigation

enter 13 space 32 backspace 8 escape 27

Attributes

best practices is to programmatically change class assignments instead of chaining inline styles

\$("selector").attr("name", "value");

\$("selector").prop("name", "value");

\$("selector").removeAttr("name");

\$("selector").removeProp("prop");

\$("selector").attr("name", function(attr) {...} );

\$("selector[attr]";
\$("selector[attr='value']");
\$("selector[attr\$'value']");

• begins with

• $("selector[attr*'value']");

• ends with

var pageHeader = document.getElementById('page-header');

By Tag Name document.getElementsByTagName

By Class Name document.getElementsByClassName

CSS Selectors var pageHeader = document.querySelector('#header');

var buttons = document.querySelectorAll(.btn);

DOM Manipulation We manipulate the DOM API to manipulate the DOM structure by changing specific elements or nodes in the object. The changes are reflected on the browser screen.

• take elements and make an object out of them to modify them

createTextNode edit text content of new DOM element

Selecting DOM Elements

• getElementsByTagName
• getElementById
• Element.querySelector
• Element.querySelectorAll

const lead = document.getElementById('lead');  // ⚠️ no #
const firstRedItem = document.querySelector('.red');
const greenListItems = document.querySelectorAll('li.green');

Removing

\$("selector").remove();

• Use detach if performing long running operation such as adding thousands of rows to a grid, use chaining or a function

\$("selector").detach();

\$("selector").empty();

Removing Elements without jQuery:

var elem = document.querySelector(".someClass"); //select the element
elem.remove() //remove the element

DOM Selection API - cross language? HTML - JavaScript, browser API

getElementsByClassName

querySelector

querySelectorAll

The querySelector and querySelectorAll methods replicate jQuery’s $ dollar sign selection

// jQuery
const fooDivs = \$('.foo div');

// native
const fooDivs = document.querySelectorAll('.foo div');

Table of Contents ⬆️

• Live Chat