Задача. Дан массив 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

Наш "ночной" чат по Javascripty: https://t.me/joinchat/a8aDKNJCcWExMmEy

Анимированная 3D карточка, выполненная с помощью CSS и библиотеки Three.js

#css

Друзья, наши знакомые тестировщики открыли новый канал с вакансиями: https://t.me/qajoboffer. Если кто-то задумывался над стартом в IT в QA - вам туда.

Hopdot Loader - прелоадер в виде перекатывающихся точек. Анимация реализована с помощью GSAP.

#css #js