DEV Community: Bernard Faria

My new personal site

Bernard Faria — Thu, 15 Apr 2021 11:36:14 +0000

Hi guys!
I updated my website! Comment there if you liked it! = D
Doubts, criticisms and / or suggestions are welcome!

https://www.bernardfaria.com.br/

Do you know the scroll-snap-type CSS property ??

Bernard Faria — Mon, 22 Mar 2021 13:37:53 +0000

The CSS scroll-snap-type property allows you to lock the viewport on certain elements or locations after the user has finished scrolling. I venture to say that this will be the future (or already is the present) of the slides.

For example: A user browsing a photo gallery probably doesn't want to scroll halfway through an image - they probably prefer the image to "snap" to the right position while scrolling.

I will leave a Codepen Link for better viewing.

References:

CSS-TRICKS
Mozilla
Caniuse

The CSS: is () pseudo-class

Bernard Faria — Mon, 22 Mar 2021 00:45:14 +0000

The CSS: is () pseudo-class function takes a list of selectors as its argument and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact way.

Don't do this

.content h1 {
  color: red;
}
.content h2 {
  color: red;
}
.content h3 {
  color: red;
}

header p:hover,
main p:hover,
footer p:hover {
  color: blue;
  cursor: pointer;
}

Do this

.content :is(h1, h2, h3) {
  color: red;
}

:is(header, main, footer) p:hover {
  color: blue;
  cursor: pointer;
}

How to Use Variable Fonts on the Web

Bernard Faria — Fri, 11 Sep 2020 14:18:36 +0000

Variable fonts were developed as the joint effort of the four biggest tech companies involved in type design—Apple, Google, Microsoft, and Adobe. As the name suggests, variable fonts allow designers to derive an unlimited number of font variants from the same font file. This way it becomes possible to adjust the typeface to different devices, viewports, orientations, and other design constraints.

Why Use Variable Fonts?

Variable fonts significantly reduce the limitations of current font formats. Today’s web fonts are inflexible and don’t scale very well; they only provide us with some fixed styles with names like “Light”, “Bold”, or “Extra Bold”. There are even typefaces that only have one weight or slant variant. With a variable approach however, we have access to an infinite flexibility of weight, slant, x-height, slabs, rounding, and other typographical attributes.

Variable fonts use a single font file that the browser only has to load once. Upon being loaded it can serve all the variants from just that one binary.

So, here is a brief comparison:

Roboto: twelve font files, twelve variants.
Variable fonts: one font file, unlimited variants.

As you can already imagine, our typographical options grow incredibly with this newer approach. From practical options, through subtle, all the way to the more.. experimental!

Setting Font Variations With CSS

To define font variations, we can use the font-variation-settings CSS property introduced with the CSS Font Module Level 4. This is a low-level property that allows us to control the output by specifying a value for each axis.

Example: Decovar

Decovar is one of the most versatile examples that currently exists. You can find it on Axis Praxis, on GitHub, and it also has a demo page on TypeNetwork’s website. Decovar contains one registered (weight) and fourteen custom axes, and also has seventeen named instances.

In the CSS we have to define all the fifteen axes (inline, sheared, rounded slab, stripes, worm terminal, inline skeleton, open inline terminal, inline terminal, worm, weight, flared, rounded, worm skeleton, slab, bifurcated).

div {
    font-family: Decovar;
    color: white;
    background-color: rgb(0, 162, 215);
    font-size: 157.12px;
    text-align: left;
    padding-top: 20px;
    font-variation-settings: 'INLN' 285.094, 'TSHR' 346.594, 
        'TRSB' 786.377, 'SSTR' 84.268, 'TWRM' 200, 'SINL' 84.268, 
        'TOIL' 0, 'TINL' 91.983, 'WORM' 0, 'wght' 400, 'TFLR' 0, 
        'TRND' 0, 'SWRM' 0, 'TSLB' 277.155, 'TBIF' 0;
}

Note: we have to specify a value for all the axes in the font-variation-settings property—even those we don’t want to use.

We can use any value (even float numbers) for the axes between the min and max values.

In case of Decovar, we can use 0 as value for the axes we are not interested in; these will be rendered with the default value. This isn’t always the case though, as it depends on the ranges the font uses for the different axes. Decovar is easy, as it uses a 0-1000 range for all axes, and 0 is the default value for all.

What is semantic HTML5?

Bernard Faria — Tue, 04 Aug 2020 19:34:25 +0000

If you know a little bit of HTML, you'll know that HTML tags are (mostly) used to format the content - these tags tell the browser how to display the content on the page. They do not give an indication of the type of content they contain or what role the content plays on the page.

Semantic HTML5 addresses this shortcoming by defining specific tags to clearly indicate what role the content these tags play. This explicit information helps robots / crawlers like Google to better understand which content is important, which is a subsidiary, which is navigation and so on.

For blind or visually impaired users who rely on screen readers to verbally describe what is on a page, proper use of HTML5 semantic elements will allow screen readers to communicate their content more accurately, making the visual audible. It is essential to adopt this latest version of HTML so that you can make your content accessible to all possible site visitors.

Example of non-semantic tags:

<div> <span>

Example of semantic tags:

<header> <footer> <nav> <article> <main> <section>

Bootstrap 5 is here! But what has changed?

Bernard Faria — Fri, 17 Jul 2020 13:14:29 +0000

jQuery was removed
Switch to Vanilla JavaScript
Drop Internet Explorer 10 and 11 support
Improved grid system
Improved documentation
Improved modularity
Improved forms
New responsive font
New utilities & helpers
Easier customization & theming
Lighter package
New API available

One of the frustrating experiences of being a developer is reinventing the base HTML, CSS, and JavaScript for each project. While some prefer to write their own code, it still makes sense to just use an existing framework like Bootstrap.

With all the new updates coming in Bootstrap 5, it’s safe to say that the Bootstrap team is making huge steps to make the framework lightweight, simple, useful and faster for the developer’s benefit.

If you use Bootstrap in your projects, then you will probably love Startup app – Bootstrap Builder. It is a great development tool with lots of ready-made designed and coded templates and themes for faster deployment of your projects.

Access: Bootstrap 5

Do you know how to do automatic numbering with a CSS counter?

Bernard Faria — Thu, 16 Jul 2020 14:08:51 +0000

As you may already know, when we add lists with the <ol> element, the list is automatically numbered. Using CSS Counter, we can number any element. So, let's see how this is done.

The CSS counter consists of two main properties: counter-reset andcounter-increment. The counter-reset is used to reset the count, while the counter-increment - together with the pseudo-element - is used to add the numbers.

body {
  counter-reset: number;
}

h1:before {
  counter-increment: number;
  content: "counter(number) ";
}

In addition, you can also change the type of the number specified in the content property. For example Roman numbers.

h2:before {
  counter-increment: first;
  content: counter(number, upper-roman) ". ";
}

This property can only be useful for a specific type of website and you are unlikely to use it every day.

Do you know the BEM Methodology in CSS?

Bernard Faria — Thu, 16 Jul 2020 14:03:05 +0000

BEM stands for Block Element Modifier, which consists of a class naming pattern for HTML markup elements based on the element's structural function rather than its presentation function.

The BEM methodology prioritizes the adoption of 'classes' instead of IDs, as they are reusable. This methodology is used following techniques that facilitate the construction of the code, improving development and agility, reducing maintenance time and helping to preserve the code.

Block

Block is a logically independent component that encapsulates implementation styles, behavior or technologies. The fact that the blocks are independent allows us to easily reuse them.

Element

The element is a part of a block that cannot be used outside of it (for example, items within the menu block).

Modifier

The modifier is a BEM entity that defines the state, appearance and behavior of blocks or elements - identical blocks can look different because of a modifier. The use of this entity is optional.

.main-block {padding: 15px; }
.main-block__article {max-width: 600px; }
.main-block__article--gray-background {background: gray; }

You know position sticky?

Bernard Faria — Thu, 16 Jul 2020 13:57:22 +0000

position: sticky is a hybrid of position: relative and position: fixed. The element is treated as a relative position until it crosses a specified limit, when it is treated as a fixed position.

That is, if you want to make, for example, a header that is floating when you start scrolling, just use:

header {
  position: sticky;
  top: 0
}

See the example

Calc() function on CSS

Bernard Faria — Thu, 16 Jul 2020 13:52:28 +0000

The calc () function takes a simple expression as a parameter and the result of this expression is usually used as a value for height and width.

The operators used are:

Addition: width: calc (100% + 80px);
Subtraction: height: calc (100% - 1rem);
Multiplication: height: calc (50% * 3);
Division: width: calc (100% / 6);

Observations

Division by 0 (zero) results in an error generated by the HTML parser.
The + and - operators must be surrounded by white space.
The * and / operators do not require white space, but adding it for consistency is allowed and recommended.
It is allowed to nest calc () functions, in which case the internal ones are treated as simple parentheses.