О дивный новый Реакт 18! Что нас ждет?

Смотреть видос

Error Page

Здесь автор использует canvas и particlesJS для создания анимированных эффектов на странице.

Всплывающие подсказки в CSS

В HTML уже есть глобальный атрибут title, который добавляет всплывающую подсказку. Однако её вид завист от операционной системы и не может быть изменён. Это заставляет искать способы сделать свою всплывающую подсказку, которая была бы оформлена желаемым образом.

Сделать такую подсказку очень просто, даже без использования JavaScript. Самым простым решением будет прописать текст подсказки в data-атрибуте HTML-кода, например, data-tooltip="…". Теперь можно использовать CSS для отображения текста подсказки в функции attr()

Пример кода

.tooltip::after {
content: attr(data-tooltip);
/* styles... */
}

#css

Задача. Дан массив arr из N целых чисел, где значение arr[i] - находится в диапазоне [1, N].

Необходимо найти все целые числа в диапазоне [1, N], которые не входят в исходный массив.

Входные данные: N == arr.length, 1 <= N <= 10^5.

Вывод: список пропущенных элементов

Ответ

JavaScript Algorithms

Автор: Oleksii Trekhleb and Sophia Shoemaker
Год издания: 2019

#js #english

CSS Математика - это новый подход в адаптивной верстке?

На ютубе вышел клевый видос на тему математических функций CSS. Автор видео рассказывает о таких функциях как: calc, min, max, clamp и показывает как их применить на практике.

Смотреть...

Анимированные иконки, выполненные на чистом CSS без использования JavaScript.

#css #frontend

Дебаггинг легаси-кода

Метод String.replaceAll (ES12 / ES2021)

String.prototype.replaceAll() заменяет все вхождения строки другим строковым значением.

В настоящее время в JavaScript у строк есть метод replace(). Если входной шаблон для замены является строкой, метод replace() заменяет только первое вхождение. Поэтому в коде второе вхождение «Back» не заменяется.

Мы можем сделать полную замену, только если предоставим шаблон для замены в виде регулярного выражения.

Было:
const str = "Backbencher sits at the Back";
const newStr = str.replace(/Back/g, "Front");
console.log(newStr); // "Frontbencher sits at the Front"

String.prototype.replaceAll() пытается произвести замену всех вхождений, даже если входной шаблон является строкой.

Стало:
const str = "Backbencher sits at the Back";
const newStr = str.replaceAll("Back", "Front");
console.log(newStr); // "Frontbencher sits at the Front"

#js

Ребята, вступайте в наш чат по JS. Там будет много интересных дискуссий.

Ссылка: https://t.me/joinchat/a8aDKNJCcWExMmEy

Направление текста в CSS

Благодаря свойству writing-mode в CSS есть возможность менять направление написания текста. Это свойство является универсальным и позволяет одновременно задавать значения свойств direction и block-progression.

Свойство writing-mode можно применить ко всем элементам, кроме групп строк таблицы, групп колонок таблицы, строк таблицы, колонок таблицы и контейнеров ruby base, ruby annotation.

Синтаксис

writing-mode: horizontal-tb|vertical-rl|vertical-lr;

#css

Погода

Все анимации созданы c использованием библиотеки TweenMax. Логика переключения погоды реализована в JS.

#js #frontend

Map в JavaScript

Map — это тип коллекции, элементы которого имеют свой ключ. Она немного схожа с Object, однако в качестве ключа можно принять любой тип данных

Методы и свойства:
new Map() – создаёт коллекцию.
map.set(key, value) – записывает по ключу key значение value.
map.get(key) – возвращает значение по ключу или undefined, если ключ key отсутствует.
map.has(key) – возвращает true, если ключ key присутствует в коллекции, иначе false.
map.delete(key) – удаляет элемент по ключу key.
map.clear() – очищает коллекцию от всех элементов.
map.size – возвращает текущее количество элементов.

Отличия от обычного объекта Object:
- Что угодно может быть ключом, в том числе и объекты.
- Есть дополнительные методы, свойство size.

Пример использования:
let map = new Map();
map.set("1", "str1");
map.set(1, "num1");
alert(map.get(1)); // "num1"

#js

Переписываем Tailwind компоненты на ванильном CSS

Мало кто любит, когда их любимые CSS-фреймворки называют бесполезным мусором. Но статьи про то, как переписать компоненты этих фреймворков на чистом CSS, похоже, любят многие. В этой статье мы перепишем компоненты Tailwind.

Читать далее

#css #en

Лучшие стратегии разработки фронтенда в 2022 году

Разбираем, как должна быть устроена современная разработка фронтенда. Речь пойдёт о множестве свежих идей, о которых вы, вероятнее всего, пока не слышали.

#frontend

Читать далее: https://habr.com/ru/company/ruvds/blog/582474/

CSS Border Animation

Светящиеся границы создаются при помощи псевдоэлементов, которые анимируются при помощи CSS.

#css #frontend

Друзья, у нас есть канал по поиску работы для FrontEnd специалистов.

Подключайтесь - https://t.me/rabotafrontend