В последней строке заголовка остаётся одно слово, и весь блок смотрится неаккуратно. Раньше это правили руками — неразрывные пробелы, мягкие переносы. Теперь браузер берёт работу на себя.
Оба значения — прогрессивное улучшение.
В статье — интерактивный пример: переключаете режимы и сразу видите разницу.
🎥 Читать статью
text-wrap: balance выравнивает строки заголовка по длине — для блоков до шести строк. text-wrap: pretty убирает «висячее» слово в конце параграфа и работает на тексте любой длины.Оба значения — прогрессивное улучшение.
balance поддерживается с Chrome 114, Firefox 121 и Safari 17.4; pretty появился позже — в Chrome 117 и Firefox 122. Там, где поддержки нет, текст переносится как раньше. #css #webdevВ статье — интерактивный пример: переключаете режимы и сразу видите разницу.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10❤🔥3
Присваиваете объект через
Долгое время глубокую копию собирали через
В статье — интерактивный пример: нажимаете кнопку и видите, как ведут себя
🔴 Читать статью
= — и получаете вторую ссылку на тот же объект. Меняете «копию» — меняется оригинал. spread и Object.assign() спасают только частично: копируют первый уровень, а вложенные объекты и массивы остаются общими.Долгое время глубокую копию собирали через
JSON.parse(JSON.stringify(obj)). Способ рабочий, но теряет данные: Date превращается в строку, функции и undefined исчезают, Map становится пустым объектом.structuredClone() делает полную независимую копию и корректно обрабатывает Date, Map, Set, ArrayBuffer, RegExp и другие встроенные типы. Функции и узлы DOM клонировать не получится — будет DataCloneError. Доступен во всех актуальных браузерах и в Node.js с 17-й версии.В статье — интерактивный пример: нажимаете кнопку и видите, как ведут себя
=, spread и structuredClone() на одном объекте. #js #clonePlease open Telegram to view this post
VIEW IN TELEGRAM
🔥8❤🔥5
Переключаться на браузер ради каждой проверки вёрстки, искать путь к файлу вручную, переименовывать парный тег отдельно — мелкая рутина, которая съедает время. Расширения VS Code её убирают.
Три из подборки:
📎 HTML Preview — предпросмотр разметки прямо в редакторе, без переключения на браузер.
📎 Live Server — перезагружает страницу автоматически после правок в HTML, CSS или JavaScript.
📎 CSS Peek — открывает правила CSS из файла HTML через «Перейти к определению».
Ещё семь — Prettier, Colorize, Auto Rename Tag и другие — со ссылками на установку в статье. Сохраните, чтобы настроить редактор на выходных. #tools #vscode
👉🏻 Читать статью
Три из подборки:
Ещё семь — Prettier, Colorize, Auto Rename Tag и другие — со ссылками на установку в статье. Сохраните, чтобы настроить редактор на выходных. #tools #vscode
👉🏻 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥6⚡2❤2🔥1
HTML Academy
Кекс снова на даче — он там практически весь май. Сажает редиску. Перед посадкой успел нагенерировать нейросетью пачку карточек про фронтенд и сказал, что это важно для понимания профессии. Спорить с котом, у которого лопата, мы не стали. Выглядят убедительно.…
Пока Кекс сажал редиску, нейросеть придумала объяснять CSS-селекторы через рейтузы. И знаете, заходит. Пояс — это
Чем точнее адрес, тем чище CSS. Кажется, спецификация ещё никогда не выглядела так по-домашнему.
Листайте карточки, их шесть. Пятничная рубрика нейрослопа: объясняем HTML и CSS понятно и с юмором. А какой селектор для рейтуз придумали бы вы?
.reituzy__waistband, а :not(.patched) — те рейтузы, до которых заплатка пока не добралась.Чем точнее адрес, тем чище CSS. Кажется, спецификация ещё никогда не выглядела так по-домашнему.
Листайте карточки, их шесть. Пятничная рубрика нейрослопа: объясняем HTML и CSS понятно и с юмором. А какой селектор для рейтуз придумали бы вы?
🤣7👍5❤🔥3❤2🤯2😢1
Forwarded from Как стать мидлом
Vite 8 стартует сервер разработки за секунду, показывает правки на лету и собирает продакшен до 10–30 раз быстрее прошлой версии. На скорость повлияла смена движка: esbuild для разработки и Rollup для сборки заменил Rolldown, единый сборщик на Rust поверх парсера Oxc.
Конфиг? Для типового проекта его можно не писать. У Vite разумные значения по умолчанию. Vite — фактический стандарт сборки фронтенда: на нём работают Vue, SvelteKit, Nuxt и Astro. После отказа от Create React App его рекомендует и команда React (первый в списке сборщиков).
Курс «Vite 8» это шесть разделов от нулевой конфигурации до деплоя на GitHub Pages через GitHub Actions. Внутри настройка стилей и препроцессоров, оптимизация графики, тесты в Vitest и отдельный раздел про миграцию с Gulp и Webpack. Курс по Vite полностью на русском языке с практикой и эталонными решениями. #htmlacademy #levelup
В эти выходные, 6 и 7 июня, курс «Vite 8» можно будет взять со скидкой 60% по промокодуVITE60 — только два дня и только на этот курс.
📎 Смотреть программу
Конфиг? Для типового проекта его можно не писать. У Vite разумные значения по умолчанию. Vite — фактический стандарт сборки фронтенда: на нём работают Vue, SvelteKit, Nuxt и Astro. После отказа от Create React App его рекомендует и команда React (первый в списке сборщиков).
Курс «Vite 8» это шесть разделов от нулевой конфигурации до деплоя на GitHub Pages через GitHub Actions. Внутри настройка стилей и препроцессоров, оптимизация графики, тесты в Vitest и отдельный раздел про миграцию с Gulp и Webpack. Курс по Vite полностью на русском языке с практикой и эталонными решениями. #htmlacademy #levelup
В эти выходные, 6 и 7 июня, курс «Vite 8» можно будет взять со скидкой 60% по промокоду
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥4🔥2
HTML Academy
Накануне эфира Максим из Maxis попросил нейросетку сделать iframe-приложение для Битрикс24. Она сделала — и выложила весь бэкенд в открытый интернет. Без авторизации, без проверки портала. Будущие конфиденциальные данные — по URL, заходи, забирай. Максим…
Media is too big
VIEW IN TELEGRAM
Оффер мечты или что предлагает Maxis выпускникам
Максим Самарцев, директор Maxis, рассказал, какая зарплата ждёт выпускников совместной программы обучения фронтенду. Ответ — в клипе.
Запись эфира: смотреть на YouTube | смотреть в VK
⚡ Программа обучения
Максим Самарцев, директор Maxis, рассказал, какая зарплата ждёт выпускников совместной программы обучения фронтенду. Ответ — в клипе.
Запись эфира: смотреть на YouTube | смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2🔥2❤🔥1
Forwarded from Как стать мидлом
Сегодня последний день скидки на курс «Vite 8».
На курсе соберёте проект на Vite с нуля: настройка стилей и препроцессоров, тесты в Vitest, деплой через GitHub Actions и готовый рецепт миграции с Gulp и Webpack.
Скидка 60% по промокодуVITE60 — до конца дня. С понедельника курс по обычной цене.
⚡ Смотреть программу
На курсе соберёте проект на Vite с нуля: настройка стилей и препроцессоров, тесты в Vitest, деплой через GitHub Actions и готовый рецепт миграции с Gulp и Webpack.
Скидка 60% по промокоду
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥3
Поставили инструмент глобально через
Внутри
В статье это всё на интерактивном примере: нажимаете команду и видите, что происходит.
🔄 Читать статью
npm install -g, попользовались — и забыли удалить. За пару лет таких пакетов набираются десятки, разных версий, и они начинают конфликтовать.npx запускает пакет прямо из реестра npm, ничего не устанавливая глобально. Создать проект на Vite — npx create-vite my-app. Та же история со статическим сервером (npx serve .) или прогоном Prettier по всему проекту (npx prettier --write .): запустили и работаете, в npm -g ничего не осело.Внутри
npx идёт по трём адресам: сначала node_modules/.bin в проекте, потом временный кеш, и только затем реестр. Нашёл локально или в кеше — оттуда и запустит, лишнего не качает. Версию можно зафиксировать через @, например npx prettier@2 — пригодится, когда надо воспроизвести чужую ошибку или проверить старый релиз. #npm #toolsВ статье это всё на интерактивном примере: нажимаете команду и видите, что происходит.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥5❤3
Правила в CSS можно вкладывать друг в друга — как в Sass, только без компиляции и зависимостей. Псевдоклассы, дочерние селекторы и медиазапросы лежат рядом с базовыми стилями компонента, а не разбросаны по файлу. Нативно — с 2023 года: Chrome 112+, Firefox 117+, Safari 16.5+.
Ключевой символ —
Ещё тонкость для отладки: вложенные селекторы по специфичности считаются как внутри
Зато
👾 Читать статью
Ключевой символ —
&, ссылка на родительский селектор. &:hover превращается в .btn:hover, &.is-active — в .btn.is-active, а .dark & ставит .btn внутрь .dark. Без & вложенный селектор читается как потомок через пробел.Ещё тонкость для отладки: вложенные селекторы по специфичности считаются как внутри
:is() — вес берётся от самого тяжёлого аргумента родителя. На простых стилях незаметно, на запутанных стоит помнить.Зато
@media, @layer и @container работают прямо внутри правила: брейкпоинты живут рядом с компонентом, а не в хвосте файла. В статье можно покрутить живой пример. #css #baselinePlease open Telegram to view this post
VIEW IN TELEGRAM
🔥5❤🔥4
Мы провели исследование зарплат фронтендеров. Взяли медианные офферы с рынка, перевели в мойву по текущим ценам — и получили морскую инфографику.
Листайте карточки пятничной рубрики нейрослопа. На последней — сравнение всех грейдов в одном кадре.
P.S. Кекс оценил. Сказал, что мидл — это его минимум.
Листайте карточки пятничной рубрики нейрослопа. На последней — сравнение всех грейдов в одном кадре.
P.S. Кекс оценил. Сказал, что мидл — это его минимум.
🤣17❤🔥3👍1🤯1