Показываю, как встроил SVG в рабочий стек, чем он крут, какие трюки уже можно юзать. Статья для тех, кто знает HTML/CSS/JS, но с SVG ещё не на «ты». Всё просто, чётко и без магии.
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Сделан на SVG, SCSS и JS
Please open Telegram to view this post
VIEW IN TELEGRAM
Какое утверждение о поведении переменных в JavaScript корректно?
Anonymous Quiz
10%
let и var поднимаются одинаково
58%
var поднимается и инициализируется значением undefined
25%
const можно переназначить, но нельзя переопределить
7%
Объявления с let доступны до строки объявления
Разобрал реально критичные HTML и CSS-ошибки, которые встречаю у коллег. Не вкусовщина, а баги, ломающие интерфейс. Список субъективный, но аргументированный. Готов поспорить — или согласитесь?
Please open Telegram to view this post
VIEW IN TELEGRAM
❤3
Почему изменение classList у элемента может вызвать перерисовку страницы?
Anonymous Quiz
18%
classList автоматически пересоздаёт весь DOM
67%
Изменение класса может вызвать перерасчёт стилей и layout
4%
classList работает только при перерисовке вручную
10%
classList обновляется только при следующем requestAnimationFrame
This media is not supported in your browser
VIEW IN TELEGRAM
Сделано на SCSS
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6
querySelector() в JavaScript и когда его применять?Метод
querySelector() возвращает первый элемент, соответствующий указанному CSS-селектору. Это удобный способ быстро получить доступ к нужному элементу в DOM.const title = document.querySelector(".title");
title.textContent = "Hello, World!";querySelector() находит элемент с классом title и меняет его текст.querySelector() удобно использовать при работе с формами, кнопками, модальными окнами и любыми элементами интерфейса. Он поддерживает все CSS-селекторы (.class, #id, tag[attr=value]) и делает код лаконичным по сравнению с устаревшими методами вроде getElementById().
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Какую задачу решает механизм CORS (Cross-Origin Resource Sharing) в браузерах?
Anonymous Quiz
5%
Ускоряет загрузку ресурсов с других доменов
82%
Разрешает или запрещает доступ к ресурсам между разными источниками
12%
Шифрует HTTP-запросы и ответы между клиентом и сервером
1%
Обеспечивает кеширование данных на клиенте
This media is not supported in your browser
VIEW IN TELEGRAM
Сделано на SCSS и TypeScript
Please open Telegram to view this post
VIEW IN TELEGRAM
Почему подключение CSS-файлов в <head> может замедлить отрисовку страницы?
Anonymous Quiz
24%
CSS блокирует загрузку HTML-разметки
58%
CSS блокирует построение и отрисовку рендера до его загрузки и парсинга
14%
CSS компилируется синхронно на сервере
4%
CSS блокирует выполнение асинхронных скриптов
Объясняю, как инкрементальная гидратация в Angular решает парадокс SSR: страница рендерится быстро, но клики молчат. Разбираем, как оживить интерфейс без лишней задержки и сделать его реально быстрым
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
This media is not supported in your browser
VIEW IN TELEGRAM
Сделано на SVG, CSS и JavaScript
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Какой тип задач в Event Loop JavaScript имеет наивысший приоритет выполнения после текущего стека вызовов?
Anonymous Quiz
17%
setTimeout
9%
setInterval
66%
Микрозадачи (например, Promise.then)
8%
requestAnimationFrame
Пока строки в шаблоне были на английском — всё шло гладко. А потом пришёл Узбекистан. Рассказываю, как i18n и l10n становятся пожаром, если не думать о них с начала проекта
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡2
Какой хинт устанавливает раннее соединение (DNS/TCP/TLS) без запроса ресурса?
Anonymous Quiz
25%
preload
26%
prefetch
34%
preconnect
15%
dns-prefetch
This media is not supported in your browser
VIEW IN TELEGRAM
Сделана на SVG и CSS
Please open Telegram to view this post
VIEW IN TELEGRAM