Рассказ о процессе преобразования SVG-контура в векторный рисунок верёвки.

Весьма познавательным здесь является подход к решению задачи.

https://habr.com/ru/company/nmg/blog/719822/ | Демо

12 важнейших сайтов для освоения CSS в 2023 году

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

https://habr.com/ru/company/ruvds/blog/719892/

CSS | Практика #14
#css_practice_medium | Объяснение

Интересная статья о том, как сайты определяют ботов

Стоит обратить внимание на то, как автор работает с AST (деревом), разбирает операторы, узлы и т. д. Почему это важно? Всегда нужно понимать, как работает ваш профессиональный инструмент под капотом.

https://habr.com/ru/post/720588/

Исчерпывающие руководство по логическим операторам в JavaScript

За чтением подобного материала, как правило, отправляют на MDN. Но статья примечательна тем, что отлично иллюстрирует основные понятия логики в контексте JS:

- Конъюнкция;
- Дизъюнкция;
- Импликация и т. д.

Минус: статья на английском.

https://www.freecodecamp.org/news/a-definitive-guide-to-conditional-logic-in-javascript-23fa234d2ca3/

JavaScript | Практика #149
#js_practice_hard | Объяснение

JavaScript | Практика #150
#js_practice_medium | Объяснение

Тригонометрические функции в CSS

В CSS можно писать математические выражения. В основе лежит функция calc() для выполнения вычислений, но, скорее всего, вы также слышали о min(), max() и clamp().

К этим функциям в Chrome 111 присоединяются тригонометрические функции sin(), cos(), tan(), asin(), acos(), atan() и atan2(). Эти функции определены в модуле CSS Values and Units Level 4 и доступны во всех браузерах.

https://web.dev/css-trig-functions/

JavaScript | Практика #151
#js_practice_medium | Объяснение

View Transitions API

Относительно новое АПИ для создания плавных переходов, позволяя DOM изменяться без дублирования состояний. Уже доступно в Chrome 111.

Те, кто реализовывал в SPA анимированную смену маршрута сразу оценят эту фичу. Надо полагать, что с помощью View Transitions мы можем рассчитывать на максимальную производительность анимации в веб-приложении.

Смотреть демо (нужен Chrome 111+).

https://developer.chrome.com/docs/web-platform/view-transitions/

JavaScript | Практика #152
#js_practice_medium | Объяснение

TypeScript. Сужение типов

При разработке на TypeScript часто приходится использовать различные проверки и утверждения, чтобы явно указать, какой тип мы хотим использовать. В статье исчерпывающе описываются способы сужения типов:

- Защитник типа typeof;
- Проверка на истинность (truthiness narrowing);
- Проверка на равенство (equality narrowing);
- Сужение типов с помощью оператора in;
- Сужение типов с помощью оператора instanceof;
- Присвоения (assignments);
- Анализ потока управления;
- Использование предикатов типа (type predicates);
- Исключающие объединения (discriminated unions);
- Исчерпывающие проверки (exhaustiveness checking).

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

JavaScript | Практика #153
#js_practice_medium | Объяснение