Responsive House

При изменении положения слайдера изменяются значения дата-атрибутов, которые влияют на отображаемый контент.

#responsive

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