Family Frontend Meetup #2

Jan 8, 2024

13 minutes

Contents

1. What's in store for EcmaScript 2023?
2. How has Chrome changed?
3. The origin of the idea of additional optimization of our Picture component
4. Should I use Leaflet instead of Yandex maps?
5. Useful tricks and small notes that you might not know about

What's in store for EcmaScript 2023?

Immutable array methods

• toReversed, toSorted, toSpliced are analogues of the methods of the same name, except for immutability.

• with is an analogue of the expression array[0] = value without changing the original array.

Reverse Array Search

• findLast, findLastIndex – again analogues of existing methods, but the search starts from the end of the array.

Hashbang Grammar #!

A syntax that is part of many programming languages is now available in JS. A shebang comment behaves exactly like a one-line // comment. Instead, it starts with #! and is only valid at the very beginning of the script or module.
The shebang comment specifies the path to the JavaScript interpreter whose script you want to execute. In all other cases, use // (or a multiline comment).

Example:


#!/usr/bin/env node
your code...

Symbols as WeakMap keys

This innovation extends WeakMap by allowing the use of unique Symbols as keys.

How has Chrome changed?

Animating Discrete Properties

The transition-behavior CSS property specifies whether transitions will be fired for animations whose behavior is discrete.
The transition-behavior value can be included as part of a shortened transition declaration:


transition: all 0.35s allow-discrete;

What is discrete animation? This animation moves from one key frame to the next without any intermediate values.

Let's give an example.

You can animate the display property like this:


.button {
	display: block;
	opacity: 1;
	transition: all 0.5 allow-discrete;
}

Now, when you switch CSS properties, the element will smoothly disappear:


display: none;
opacity: 0;

Without using allow-discrete, the element would disappear instantly by setting the display property to none.

Allow-discrete can also be used for @keyframes animations


.card {
animation: spin-and-delete 1s ease-in forwards;
}
@keyframes spin-and-delete {
0% {
transform: rotateY(0);
filter: hue-rotate(0);
}
80% {
transform: rotateY(360deg);
filter: hue-rotate(180deg);
opacity: 1;
}
100% {
opacity: 0;
display: none;
}
}

Media expression prefers-reduced-transparency.

Opaque interfaces can cause headaches or be a problem for a variety of visual impairments. This is why many operating systems and applications have settings that reduce or remove the transparency of the user interface.

With this new media query in the browser, CSS adapts the experience for users who want to reduce transparency:


.card {
  	background: hsl(none none 100% / 20%);

     @media (prefers-reduced-transparency: reduce) {
    	background: hsl(none none 0% / 80%);
     }
}

This expression has two meanings:

no-preference
Indicates that the user has not specified any preferences on the device. The value of this keyword evaluates to false in Boolean context.

reduce
Indicates that the user has enabled a setting on their device to minimize the number of transparent or translucent layer effects.

Media expression update.

The update media query makes it possible to adapt the user interface to the device's refresh rate. The function reports the values fast, slow or none, which relate to the capabilities of the various devices.

E-readers and devices such as low-power payment systems may have low refresh rates. Knowing that your device does not support animations or frequent updates can help you save battery power or avoid erroneous updates.

Moreover, there are scenarios such as printed paper or e-ink displays that do not support animation and have a single render pass. Such output cannot be updated at all and is called none.

Display memory consumption when holding the cursor on a tab.

Just a useful browser update. Now you don't have to open the developer console to view this metric.

The origin of the idea of additional optimization of our Picture component

The technology used for optimization is currently experimental and available only in browsers: Chrome, Opera and Edge. It is not supported in Safari and Firefox.

You can check compatibility here.

The idea is to serve the user an image with a quality that matches the quality of his connection.

Let's look at an example.

A man is traveling on a train. Between cities the signal is weak, if there is any at all. The connection is very slow and is barely able to load the text format of the site. In this case, there is no hope that the images will be displayed. It would seem that it’s no big deal, you can do without pictures. What if the user opens an online store or some kind of marketplace? He wants to find a specific product, for example, a new dress for his mother. Can this be done without a visual component? The answer is obvious.

The navigator.connection.effectiveType property will help in determining the Internet speed of the user device. What to do with this information? We'll tell you in our new article!

Should I use Leaflet instead of Yandex maps?

One of our front end devs, having worked closely with different maps, came to the conclusion that Yandex.maps is not needed to implement simple tasks.

“

In practice, I did not have to solve problems related to such things as routing, traffic jams, search, etc.

Basically it was:

Add a marker to the map
Build a cluster
Open a popup by clicking on the marker

and other tasks for which Leaflet’s capabilities are quite sufficient.

Leaflet (react-leaflet):

Pros:

— The documentation is simpler and clearer compared to Yandex.maps

— The basic capabilities of Leaflet are sufficient to implement the above tasks. React-Leaflet can easily integrate with a large number of available Leaflet plugins, allowing you to add advanced features such as marker clustering, animations, geospatial operations, etc.
Can be easily customized.

— Can be easily customized.

For example, it is very easy to integrate various third-party map tiles (OpenStreetMap or Mapbox). This gives more flexibility in choosing the appearance of the card. However, some of them may be paid (I use OpenStreetMap).

— More options for customizing markers and popups, including using custom HTML elements. It's easier to implement a popup with which the user could interact.

— There are no restrictions on use. We have more and more projects focused on the European market, in which we cannot use Yandex.maps.

— In general, Leaflet are free maps. But to implement more complex tasks, you need to connect additional plugins. Depending on the chosen provider, certain functions may be paid for. For example, to implement geocoding and reverse geocoding, you can use Google Maps (there are limits on the number of free requests), or you can use OpenStreetMap (free to use, but there is a limit on the number of requests for a certain period of time)

— You can hide the «Leaflet | © OpenStreetMap contributors» logo or add your own prefix before the attribution if necessary.

Cons:

— There is no SSR support, so the DOM operations that Leaflet relies on to render the map are not available. Therefore, to work with Leaflet components, additional manipulations are required, namely, the use of dynamic import with next/dynamic

Yandex.maps (react-yandex-maps):

Pros:

— SSR support, unlike react-leaflet

— More features compared to react-leaflet (building routes, traffic jams, search, etc.) (*Limited by limits on the number of free requests)

— Provides more accurate and detailed maps of Russia and the CIS countries than is available in most standard map tiles in Leaflet.

Cons:

— react-yandex-maps - no longer supported for political reasons.

— Less customization options compared to Leaflet. For example, adding a popup with which the user could interact is easier in Leaflet than in Yandex.maps.

— Yandex.Maps offers both free and paid features, and their use is subject to certain limits. (*It is mandatory to obtain an API key, even if you do not use paid card functions)

The choice between react-Leaflet and react-yandex-maps depends on the specific requirements of the project. If you need a high degree of customization, international support and integration with third-party services, then you should look towards React-Leaflet.

On the other hand, react-yandex-maps is suitable for projects focused on Russia and the CIS, especially when the implementation of complex functions such as building routes, searching on a map, etc. is required.

Finally, let’s take a look at the download statistics for react-yandex-maps and react-leaflet and see that it is the second library that is currently more popular.

Useful tricks and small notes that you might not know about

The location of the first letter in several lines:


&::first-letter {
      Initial-letter: 2;
}

Global function in JS for deep copying of objects:


structuredClone()

Why install lodash when you can use the built-in method?

Determining the indentation of the first line in a text block (Paragraph indent):


text-indent: 20px;

Possibility to get the active element on the page:


document.activeElement

Transforming SCSS variables into JS variables using :export

SCSS variable:


$white: #fff;

Transformation:


:export {
 white: $white;
}

We import the file into our module:


import variables from 'your-path/variables.module.scss';

We use the created variable:


 <div className={styles.arrow}>
     <DownArrow stroke={variables.white} />
 </div>

Place the lines of text and the direction of the blocks vertically writing-mode: vertical-lr;

Tags:

JavaScript