DEV Community: Jhosep

Semantic HTML

Jhosep — Mon, 04 Sep 2023 03:49:59 +0000

Semantic HTML is a coding practice that involves using HTML elements not just for their presentational qualities but for their underlying meaning and purpose. Leveraging semantic HTML can greatly benefit your website's accessibility, search engine optimization (SEO), and overall structure. Here's why it's important and how to use it effectively :

1- Accessibility : Semantic HTML improves accessibility by providing meaningful structure and context to web content. Screen readers and assistive technologies rely on these semantic elements to understand and navigate web pages effectively.

2- SEO (Search Engine Optimization) : Search engines like Google and Bing use semantic HTML to better understand the content and structure of your web page. Using semantic elements can positively impact your site's search engine ranking.

3- Key Semantic Elements :

: Represents the introductory content or a set of navigational links at the top of a web page.
: Defines a section with navigation links, typically for site menus.
: Represents the main content of the document. Use it once per page.
: Defines a thematic grouping of content within a document.
: Represents a self-contained composition in a document, such as a blog post, news article, or forum post.
: Contains content that is tangentially related to the content around it, like sidebars or advertisements.
: Represents the footer of a section or the whole page, often containing copyright information, contact details, etc.

4- Heading Elements : Use "

" for the main heading of your page. Subsequent headings should follow a logical hierarchy, such as "

", "

", etc., to represent sub-sections.
Avoid skipping heading levels, as this can confuse both users and search engines.

5- Semantic Inline Elements : Elements like "" (emphasis) and "" (strong importance) should be used for their semantic meaning rather than purely for styling. Screen readers interpret these elements accordingly.

6- ARIA Roles : Use ARIA (Accessible Rich Internet Applications) roles to enhance the semantics of non-semantic elements like "

" and "" when building complex web applications.

7- Validation : Always validate your HTML code using a tool like the W3C Markup Validation Service to ensure your markup adheres to HTML standards.

8- Stay Updated : Stay informed about evolving HTML standards and best practices to ensure your code remains semantic and accessible.

<! - Semantic Inline Elements -->
<p>Use <em>emphasis</em> when needed, and <strong>
strong importance‹/strong> when necessary.‹/p>
<! -- ARIA Roles
<div role="button" tabindex="'0"'›Click me</div>

Semantic HTML not only makes your web content more accessible and SEO-friendly but also contributes to better code maintainability and readability. By using these elements thoughtfully, you're not only improving the user experience but also future-proofing your web projects.

Const Assertion

Jhosep — Thu, 24 Aug 2023 05:49:58 +0000

Strive to use const assertion (as const):

type is narrowed
object gets readonly properties
array becomes readonly tuple

let's see an example:

// ❌ Avoid declaring constants without const assertion
const BASE_LOCATION = { x: 50, y: 130 }; // Type { x: number; y: number; }
BASE_LOCATION.x = 10;
const BASE_LOCATION = [50, 130]; // Type number[]
BASE_LOCATION.push(10);

// ✅ Use const assertion
const BASE_LOCATION = { x: 50, y: 130 } as const; // Type '{ readonly x: 50; readonly y: 130; }'
const BASE_LOCATION = [50, 130] as const; // Type 'readonly [10, 20]'

CSS Specificity

Jhosep — Fri, 18 Aug 2023 01:11:34 +0000

In CSS, the level of importance of styles applied to an element is governed by specificity. it determines which CSS rule set takes precedence when multiple rules are applied to the same element.

Here are some examples where it applies:

Inline Styles: These have the highest specificity and therefore have the highest priority. They are applied directly to an element within its style attribute.

ID Selectors: These have a higher specificity than class and element selectors. But if using an ID to style multiple elements, it's important to remember that it's good practice to keep unique IDs throughout the page.

Selectors class: They are less specific than IDs but more specific than element selectors. You can apply the same class to multiple elements and apply similar styles to all of them.

Element Selectors: They are the least specific. These affect all elements of the same type (eg all paragraphs, all headings (p, h1), etc.) and can easily be affected by more specific rules.

When multiple styles are applied to the same element and there are conflicts, the rule with the highest specificity will prevail. If two or more rules have the same specificity, the last rule found in the code will be applied.

It is important to understand these hierarchies of specificity so that you can control and predict how styles will be applied on your web page.

Veamos codigo

<style>
#id-selector {
  color: blue;
}
.selector-class {
  color: green;
}
</style>

<div id="id-selector" class="selector-class">This div has an ID and a class
</div>

What color do you think is painted in the div? Well, blue since the id-selector has greater specificity.

If an inline style was put in the code, it would take that value that we put in it and ignore the others.

Show detail data of a table with ngFor in Angular

Jhosep — Sat, 25 Feb 2023 06:12:46 +0000

The ngFor core directive allows us to create lists and data display tables in our HTML templates. It also has its own "let" with which we can pass information to show the detail of a table.

In the following example we have this array:

In a table we will show the general part of the array and then we will pass the "info" as a parameter using ngFor so that it is displayed in a second table.

We show the general data in the table, and clicking on the name will show the detail in another table.

Now we use the variable that contains the table detail with another ngFor on the table that we want to display.

Thanks for reading, you share if it served you 😉