console.trace();

Выводит трассировку стека в консоль.

function foo() {
function bar() {
console.trace();
}
bar();
}
foo();

В консоли отобразится следующая трассировка:

bar
foo
<anonymous>

#console #js

Лучшие практики Angular — знаете ли вы их?

5 советов для Angular разработчиков, чтобы писать код оптимально и красиво.

Читать статью

JavaScript Algorithms

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

#JavaScript #english

Сокращаем CSS-свойство background

background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: left top;

можно сократить до одного объявления:

background: #000 url(images/bg.gif) no-repeat left top;

Сокращенная форма фактически эквивалентна приведенным выше полным свойствам плюс background-attachment: scroll.

#css

Функции transform в CSS

Небольшая подборка transform свойств в css для тех кто подзабыл, ну или не знал.

rotate(<угол>) — поворачивает элемент на заданный угол

scale(sx, sy) — изменяет масштаб элемента по горизонтали sx и вертикали sy

translate(tx, ty) — Сдвигает элемент на заданное значение по горизонтали tx и вертикали ty

skewX(<угол>) и skewY(<угол>) — Наклоняют элемент на заданный угол по вертикали и горизонтали соответственно

#css

О дивный новый Реакт 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