Коля Шабалин и великий аттрактор кода
Відкрити в Telegram
Некий Коля Шабалин рассказывать про фронтенд, работу, образование, обучение и всякое хобби Чат для общения: https://t.me/+W80kxMBPKvAwNzBi
Показати більше253
Підписники
Немає даних24 години
Немає даних7 днів
Немає даних30 днів
Триває завантаження даних...
Схожі канали
Хмара тегів
Немає даних
Виникли проблеми? Будь ласка, оновіть сторінку або зверніться до нашого support-менеджера.
Вхідні та вихідні згадування
---
---
---
---
---
---
Залучення підписників
жовтень '24
жовтень '24
+1
в 0 каналах
вересень '24
+257
в 0 каналах
| Дата | Залучення підписників | Згадування | Канали | |
| 03 жовтня | 0 | |||
| 02 жовтня | +1 | |||
| 01 жовтня | 0 |
Дописи каналу
Мы становимся свидетелями странного и прекрасного момента в истории CSS.
Уже точно решено, что будут ломать линии в гридах, чтобы иметь возможность построить masonry-раскладку, но пока не решили как именно это делать. Есть несколько вариантов:
- Грид-интегрированный вариант, который предполагает добавление новых значений для свойств
grid-template-columns и grid-template-rows:
display: grid;
grid-template-columns: 1fr 2fr 3fr;
grid-template-rows: masonry;display и свойств masonry-tracks и masonry-direction, которые практически повторяют
grid-template-*:
display: masonry;
masonry-tracks: 1fr 2fr 3fr;
masonry-direction: column;| 2 | Браузерные новости
Вы не ждали, а они всё равно вышли. Все браузеры решили вдруг обновиться, а я решил вам рассказать про новиночки.
Safari 18.0
- Контроль отвлечения внимания. Теперь, с помощью браузера, можно выбрать любой элемент, например модальное окно или всплывающее окно про куки, и скрыть его. Есть функциональная возможность убрать скрытые элемент нажав "Показать скрытые элементы".
- Если на странице есть "заметный", видимо занимающий большую площадь, видеоэлемент, то его можно увеличить заполнив всё окно. Если переключить вкладку или видео другим окном, то видео перейдёт в режиме "картинка в картинке". Это всё работает в нативном теге <video>. Apple поощряет использование семантических тегов.
- Появилась возможность отлаживать сайты в веб-инспекторе вашего айфона. Условно вы подключаете телефон к ноутбуку. Отладка происходит на ноутбуке с инспектором, но отлаживаете вы сайта на телефоне. Всё это происходит через Safari.
- Добавили ещё больше возможностей веб-приложениям в macOS Sequoia:
- открытие ссылок непосредственно в веб-приложениях, без открытия в дефолтном Сафари;
- веб-расширения теперь будут работать в веб-приложениях. Всё что установлено в Safari, будет работать в веб-приложениях, например adblock
- Добавили API View Transitions
- Добавили выражения контейнера от стилей @container style(--background: black);
- currentcolor заработал в относительных цветах section { background: oklch(from currentcolor calc(L * 4) C H); }
- Акцентный цвета теперь могут быть прозрачными .form-control { accent-color: rgba(0,0,0,0.6); }
- Анимация отображения: @starting-style вместе с transition-behavior и display: none
- content-visibility для ускорения отрисовки страницы. Если элемент скрыт, то он не будет отрисован, пока не станет видимым.
Часть фишек пока что заработает только в Apple-устройствах, например предложение по написанию текста: <textarea writingsuggestions="true"> или свитчер <input type=checkbox switch>
Остальное можно почитать и посмотреть в статье: https://webkit.org/blog/15865/webkit-features-in-safari-18-0/
Chrome 129
- добавили CSS interpolate-size и функция calc-size(). Свойство CSS interpolate-size позволяет странице использовать анимацию и переходы между ключевыми словами CSS для определения размера, такими как auto, min-content и fit-content, в тех случаях, когда эти ключевые слова могут быть анимированы.
- Переименовали inset-area в positioned-area.
- Обновили работу backdrop-filter. Демо
- Теперь WebGPU поддерживает HDR
И многое другое https://developer.chrome.com/release-notes/129
Firefox 130
- Атрибут name элемента <details> теперь позволяет группировать элементы <details>, причем одновременно может быть открыт только один элемент внутри группы.
- В dir и lang глобальных атрибутах теперь улучшено наследование
- Свойство CSS hyphens теперь правильно поддерживается для чешского и словацкого языков.
И много другое https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/130 | 176 |
| 3 |  ECMAScript stage 2.7
На мой взгляд, в ECMAScript самый эффективный и наглядный процесс стандартизации среди всех браузерных технологий, особенно по сравнению с HTML и CSS.
Каждое новое предложение проходит этапы от 0 до 4:
Stage 0 (Strawman) — Идея находится на обсуждении, без чётких деталей.
Stage 1 (Proposal) — Формальное предложение с общей концепцией.
Stage 2 (Draft) — Конкретная спецификация и черновая реализация.
Stage 3 (Candidate) — Почти готово, тестируется для включения в стандарт.
Stage 4 (Finished) — Окончательное принятие, включено в стандарт.
При продвижении на новый этап крупные предложения часто сталкиваются с понижением с третьего на второй. Третий этап требует написания огромного количества тестов, и пока они не будут созданы, нет уверенности в работоспособности функции. Разработчики браузеров даже не начинают имплементацию функций без тестов.
TC39 решила, что этот этап слишком объёмный, и ввела стадию stage 2.7. Эта стадия указывает на то, что предложение практически завершено и проходит валидацию. Все ключевые элементы (синтаксис, API, семантика) описаны, и больше не вносятся изменения без обратной связи от тестирования или практического использования. На этом этапе разрабатываются тесты для проверки совместимости и корректности.
Число 2.7 выбрано специально для обозначения того, что функции не хватает тестов, но она почти готова к третьему этапу.
Статья: https://thenewstack.io/inside-ecmascript-javascript-standard-gets-an-extra-stage/
PS: stage 2.7 был добавлен в феврале 2023 года, а я только узнал =) | 274 |
| 4 |  PowerToys 0.84.0
Обновился мой любимый PowerToys. В нём появилась новая утилита "Workspaces"(рабочее место), которая позволяет одним щелчком мыши запускать набор приложений, например:
- можно запустить программы для работы: редактор кода, графический редактор, браузер
- набор для отладки: открыть firefox, chrome
- можно запустить терминал, а в нём уже запустить vs code с путём к проекту и с заданными параметрами, например чистый vs code, или нужный профиль
Программы можно запускать с параметрами, например с отключенными сертификатами или вообще какими угодно флагами. Программы можно запустить с нужными размерами, а также в нужном месте, например слева или сверху
Самое удобное это то, что для каждого набора программ можно создать ярлык на рабочем столе. | 247 |
| 5 | Центрируй по вертикали без гридового или флексового контекста
Мало ли вы пропустили: align-content: center теперь работает без флексов и гридов
<div style="align-content: center; height: 100px;">
<code>align-content</code> просто работает!
</div>
Плюсы:
- работает без дополнительных обёрток(html-тегов)
- не нужно указывать флексы или гриды, если вам просто нужно центрировать элемент по вертикали.
Статья: https://build-your-own.org/blog/20240813_css_vertical_center/
PS: не забывайте проверять браузерную совместимость перед использованием | 322 |
| 6 |  В хроме добавили обработчик действий skipad (skip - пропустить, ad - реклама), который можно использовать для отображения кнопки «Пропустить рекламу» в окне "картинка-в-картинке", а разработчик в этот момент может отследить нажатие на эту кнопку.
Пример: https://googlechrome.github.io/samples/picture-in-picture/skip-ad.html
Хром: https://chromestatus.com/feature/4749278882824192
Обсуждение: https://github.com/WICG/mediasession/pull/203 | 301 |
| 7 |  Пришли очень важные новости
Разработчики браузеров срочно увеличивают размер опции в селекте.
Начиная с 129 хрома элемент <option> в раскрывающемся списке <select> будет иметь минимальные размеры 24x24, чтобы удовлетворять требования WCAG 2.5.8.
Хром: https://chromestatus.com/feature/5152633181700096
Обсуждение: https://github.com/openui/open-ui/issues/1026 | 291 |
| 8 | Короткой строкой: что производительнее флексы или гриды?
Ответ: успокойтесь уже и используйте, что хотите =)
Но посмотреть на результаты рендеринга, где проверяют расчёт ширины и отступов, можно в статье https://benfrain.com/is-css-grid-really-slower-than-flexbox/
Среднее время рендеринга(меньше лучше)
Флексы хром: 54.84
Гриды хром: 52.75
Флексы сафари: 14.6
Гриды сафари: 18.25 | 337 |
| 9 |  Commitlint
Я продолжаю исследовать инструменты.
Commitlint — это инструмент, который проверяет сообщения коммитов в Git на соответствие определенным правилам.
Например, можно написать правило, чтобы заголовок коммита отвечал на вопрос "Что делает?".
У меня в команде принято писать в начале коммита номер задачи, для этого тоже можно написать правило.
Если сообщение коммита не удовлетворяет правилу, то коммит не создаётся, а в терминале происходит подсказка, что поправить, как в любых других линтерах.
Это позволяет не держать в голове все возможные правила ведения проекта, а переложить это на инструменты, которые всегда подскажут как поправить commit message.
Также удобно для тех, кто только пришёл в команду и привыкает к нюансам работы конкретно в этой новой команде. | 303 |
| 10 |  lint-staged
Инструмент, позволяющий запускать линтеры только для файлов, которые попадут в коммит.
Полезность инструмента
В крупных проектах запуск одного линтера на сотни файлов затягивается на десятки секунд. Ситуация усугубляется, когда количество линтеров увеличивается. Стайллинт проверяет сотни CSS-файлов проекта, eslint проверяет сотни js-файлов, а мы в это время гадаем, будут ли ошибки или подсветка редактора кода была достаточной.
lint-staged позволяет запускать линтеры только для тех файлов, которые попадут в коммит, а по сути, нам нужно именно это. Проверять уже проверенные файлы нет смысла, ведь они не были изменены, а значит, ошибок там уже нет, так как они уже были исправлены.
В конфигурационный файл .lintstagedrc.json можно добавить запись в простом виде:
{
"*.js": "eslint --fix"
}
Но работа для проекта остаётся непростой. Когда теперь будет коммит файлов (git commit), произойдёт следующее:
- Из всех файлов, которые попадут в коммит, отфильтруются все .js-файлы.
- Из-за указанного флага --fix произойдёт исправление для правил, которые можно автоисправить.
- Исправленные .js-файлы заново попадут в коммит.
Если во время работы eslint, даже с --fix, всё равно будут ошибки, то коммит не будет создан, а eslint как и всегда выведет ошибки в терминал.
npm-пакет: https://github.com/lint-staged/lint-staged
PS: lint-staged не отменяет полной проверки кода всех файлов. Её всё-таки нужно делать, но точно не во время активной разработки фичи. | 250 |
| 11 |  Привет. Давно не виделись =)
Ко мне в команду ищем джуна фронтендера: React + TS + SCSS.
Требования
- Опыт работы с React.js от 1 лет (обязательно)
- Опыт работы с TypeScript от 1 лет (обязательно)
- Опыт работы c любым из популярных state manager: MobX (используется на проекте), Redux, и тд от 1 лет
- Знания в области кроссбраузерной и адаптивной верстки с использованием HTML5/CSS3
- Владение нативным JavaScript (ES5/ES6/ES7)
- Опыт использования пакетных менеджеров (NPM, Yarn).
- Опыт работы с git. Стандартный набор команд. Ничего сверхъестественного.
- Опыт командной разработки и умение разбираться в уже реализованном коде;
Будет плюсом:
- Опыт работы с CSS-препроцессором LESS/ SASS/ SCSS.
- Опыт работы с любой из систем сборки (Webpack, Gulp, Grunt, Browserify) будет плюсом.
- Опыт написания unit-тестов или e2e-тестов (Jest, etc).
- Понимание концепций ООП, методологий разработки, шаблонов проектирования;
Что делать:
Разработка web-приложения для возможности отрисовки диаграмм, моделирующих бизнес-логику обработки данных, в соответствии с бизнес- и системными требованиями. Участие в подготовке методики тестирования разработанного функционала.
Контроль качества кода, исправление дефектов. Проведение ревью и рефакторинга кода. Оптимизация производительности функционала, анализ ошибок и сбоев.
Формат работы: Очный / смешанный / удаленный
По всем вопросам пишите: https://t.me/kinzazdev | 348 |
| 12 |  Очерёдность выполнения
Недавно составил очередность выполнения кода. Это сейчас обычные задачи про "асинхронность" выполнения кода на собеседованиях.
В целом, можно в закладку кинуть и вспомнить перед собеседованием
1. Сначала выполняется весь синхронный код:
- Весь код, который находится вне асинхронных конструкций (например, setTimeout, Promise, async/await), выполняется сразу же в порядке написания.
2. Выполнение микротасков:
- После выполнения всего синхронного кода, JavaScript движок выполняет микротаски (microtasks). К микротаскам относятся:
- Колбэки, добавленные в .then и .catch блоках промисов.
- Колбэки, добавленные с помощью метода queueMicrotask.
- Во время выполнения микротасков могут быть добавлены новые макротаски или микротаски. Они будут обработаны в следующих итерациях.
3. Выполнение макротасков:
- После выполнения всех микротасков, движок переходит к выполнению макротасков (macrotasks). К макротаскам относятся:
- Колбэки, переданные в setTimeout и setInterval.
- Колбэки событий DOM.
- Во время выполнения макротасок могут быть добавлены новые микротаски или макротаски. Микротаски будут обработаны в конце текущей макротаски.
4. Повторение цикла:
- После выполнения макротаски, движок снова возвращается к выполнению микротасков, если они появились в процессе выполнения макротасков.
console.log("Start"); // 1
setTimeout(() => {
console.log("Timeout 1"); // 4
Promise.resolve().then(() => {
console.log("Promise inside Timeout 1"); // 5 Микротаски будут обработаны в конце текущей макротаски.
});
}, 0);
Promise.resolve().then(() => {
console.log("Promise 1"); // 3 микротаски идут быстрее макротасок
setTimeout(() => {
console.log("Timeout inside Promise 1"); // 6
}, 0);
});
console.log("End"); // 2 потому что синхронная задача
Приходите в комментарии если есть что добавить | 498 |
| 13 |  Новые стейджи
Делегаты Ecma TC39 находятся на этой неделе в Финляндии на 102-й встрече, которая проходит в течение трёх дней и организуется Mozilla и Университетом Аалто. Комитет работает на основе консенсуса и имеет право вносить изменения в спецификацию, если сочтет это необходимым. Сегодня несколько предложений получили консенсус для перехода на следующий этап.
Коротко:
- "Ленивая инициализация модулей" переходит на stage 2.7
- Error.isError() переходит на stage 2
- RegExp Escaping переходит в stage 2.7
- Promise.try переходит на stage 3
Ещё много вкусного в статье: https://socket.dev/blog/tc39-advances-key-proposals | 381 |
| 14 |  <permission>
Пока мы все наслаждаемся тем, что не нужно изучать новые HTML-теги, Google начинает экспериментировать над новым тегом <permission>. Тег уже доступен в 126 версии Chrome за флагом.
Если коротко: Новый HTML-тег <permission> предназначен для запроса разрешений на использование функций, таких как доступ к камере или микрофону. Этот тег позволяет избежать проблем с "спамом разрешений", это ситуация, когда сайты постоянно запрашивают разрешения на доступ к различным функциям устройства.
Тег также поддерживает атрибуты для настройки запросов, такие как type и type-ext, например:
<permission type="camera">
<permission type="camera" type-ext="precise:true"> <!-- для разрешения геолокации -->
В type можно передавать несколько значений
<permission type="camera microphone">
Демо: https://permission.site/pepc
Стилизация элемента <permission> на данный момент сильно ограничена, но возможно будет расширена после окончания эксперимента.
<permission> работает вместе с API Permissions. Можно прослушать несколько событий:
- onpromptdismiss: пользователь отклонил запрос на разрешение
- onpromptaction: запрос разрешения был разрешен пользователем
- onvalidationstatuschange: элемент переходит из состояния "валидный" в состояние "невалидный"
На данный момент <permission> является одиночным тегом. Также я не увидел, что можно изменять текст "кнопки", видимо для снижения манипуляций над пользователем. | 374 |
| 15 |  Коллекция проектов для самостоятельной тренировки JS начального уровня.
Есть проект. Есть его реализация. Осталось повторить ручками или написать самостоятельно с нуля. Можно закрепить замыкание, буквально в первом проекте, каррирование и многое другое
https://www.jisan.io/dom-projects/#projects | 407 |
| 16 | Уже практически закончился Я 💛 Фронтенд 2024
https://www.youtube.com/watch?v=xKhuDlMySsE
но вы пересмотрите позже =) | 375 |
| 17 |  gap
Часто ведь возникает вопрос «В каких случаях мне переписывать margin на gap» 🤔 У меня уже сложилось мнение, которое я ещё уточняю, но всегда не хватает примеров.
Ахмад Шадид постарался и показал кучу примеров - https://ishadeed.com/article/the-gap/
Статья на английском, но знаний английского не нужно, так как есть примеры кода и небольшие интерактивные демонстрации. Статья хоть и длинная, но хватит 5 минут, чтобы её посмотреть | 429 |
| 18 |  Альтернативное описание на максималках
Четыре года назад я на работе обсуждал, что альтернативное описания контентным изображениям никто не пишет. Все понимают, что надо, но всем лень. Тогда пришли к мнению, что надо донести простую мысль. Если лень, то хотя бы оставь alt правильно пустым — alt="". Это уже победа.
3.5 года назад я обсуждал, что если уж контентным изображениям никто альтернативное описание не пишет, то про описание для декоративных изображений можно забыть, хотя такая возможность есть:
.element {
content: url("images/background.jpg") / "альтернативное описание";
}
в content можно добавить /, после него написать описать изображение текстом. Такое описание попадает в дерево доступности.
Но это вообще не рабочий вариант, так как описание находится в стилях. Абсолютно никто не будет после изменения изображения, да и во время создания, менять текст описания, а это значит, что этот текст будет только сбивать столку.
Буквально сегодня, в Chrome 126 версии, должно произойти, то что сможет нам все помочь. Лень никуда не уйдёт, но будут способы делать нормальное описание.
И так: в спецификации CSS Generated Content Module Level 3 для content появились новые возможности, а именно использование функции attr() для альтернативного описания.
Исправим изначальный пример
.element {
content: url("images/background.jpg") / attr(data-alt);
}
добавим в разметку атрибут
<div class="element" data-alt="Альтернативное описание"></div>
Кажется, что ничего не поменялось, текст "Альтернативное описание" всё также попадает в дерево доступности, а мы всего лишь перенесли описания из стилей в разметку. В этом заключается мощь. У нас появляются новые возможности управлять контентом. Теперь у нашего бэкендера появляется возможность взять нейросеточку, которая делает описания изображению, а результат работы нейросетки вставлять в разметку в data-alt="", ну либо сделать это руками.
В общем, как вы поняли, то появляются новые возможности, которыми мы конечно же не будем пользоваться, но как приятно, что эти новые возможности постоянно появляются. | 341 |
| 19 | Линтер для HTML
Напомню, что я делаю линтер для HTML на основе linthtml.
С последнего моего отчёта было многое, что сделано нового:
- Поправил правило htmlacademy/attr-req-value, которое требует заполнение атрибутов, например value="chto-nibud"
У правила появилось исключение для первого <option> в <select>
- input-req-label теперь исключает проверку <input type="submit">
- tag-req-attr появилась новая настройка ignore, которая спасает от ситуаций вроде <input type="submit" name="submit">
- Новое правило htmlacademy/req-stylesheet-link, которое проверяет наличие <link rel="stylesheet"> внутри тега head.
- Правило htmlacademy/req-mailto требует mailto: для ссылок с email в теле тега
- htmlacademy/no-blocking-script теперь игнорирует <script> с type="module" в <head>, так как подобные скрипты неблокирующие
- У <source> внутри <picture> требуем атрибуты размеров width и height если <source> внутри <picture>
- Добавил правило tag-forbid-attr, запрещающее использование указанных атрибутов в указанном теге.
- Правило req-tags-presence требует наличия указанных тегов на странице.
- Правило req-preload-font требует значения preload для шрифта.
- Правило req-webp-in-picture требует webp в <picture>.
- Правило no-class-in-container проверяет атрибут class для дочерних элементов внутри указанного контейнера.
Работа идёт и если у вас идеи для правил, то приходите в гости https://github.com/htmlacademy/linthtml-rules-htmlacademy
На данный момент уже стало ясно, что из-за того, что linthtml не развивается, а его API не обширно, то уже хочется какой-то другой инструмент. Поживём - увидим. | 440 |
| 20 |  Не минифицируйте CSS (мнение автора статьи)
78 kB сырого CSS превращаются в 65kB. Так ли вам важны эти 13kB?
Компрессия. Без gzip или Brotli уже вообще не должно быть сайтов:
- 78kB сжимается до 11kB
- 65 kB сжимается до 10kB
Так ли вам важен этот 1kB?
Протокол.
HTTP/2 мультиплексирование позволяет серверу использовать одно соединение для параллельной передачи нескольких запросов и ответов.
Если сжатый CSS-файл без минификации составляет всего 10 кБ, а затем разбивается на более мелкие фрагменты, скажем, по 2 кБ, то минификация становится как бы не проблемой
Статья: https://blog.sentry.io/why-dont-we-talk-about-minifying-css/
Моё мнение: занимайтесь оптимизацией сайта комплексно. Немножко CSS минифицировал, потом JS, потом HTML. Вот и картиночки оптимизировались. И хоба! 1mB сайта превратился в 100kB. Пользователь счастлив. Вы счастливы. Все счастливы. | 374 |
