14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#инструмент дня
Всё ещё испытываете проблемы с ветками в Git?
Not anymore!
Только сейчас открывая ссылку https://learngitbranching.js.org/ на вашем компьютере, вы получаете уникальную возможность научиться ветвлениям и слияниям в любимой системе контроля кода.
Или вы любите Mercurial? 🤔
#git #education #бородач
#интерактив дня
А поделитесь своими самыми странными, стрёмными или вообще — просто запомнившимися собеседованиями.
Моё, конечно же, собеседование в компанию, где я сейчас работаю. Несколько лет назад я не знал, что в Финляндии июль — мертвый месяц и все в отпусках. Отправил тестовое и ждал.
На тот момент компания была маленькой и процессы были медленные. Кончилось тем, что меня пригласила на собеседование в Хельсинки другая компания, и нынешней я написал: «Так может уже познакомимся уже?». Отсылку поймут не все.
Ну и вместо трех этапов получился один, не считая скрининг. Правда, собеседовали 8 человек разом, включая CEO.
Ну и по ходу пьесы я просил перевод пары терминов у русскоязычных собеседующих…
А в ту компанию, которая, собственно, пригласила я не попал. Недостаточно senior оказался.
Давайте свои прохладные былины.
#фишка дня
Одна из знаменитых проблем Safari на iOS — это утечка скролла. Условно говоря, показали вы модалку, скроллите её — а фон тоже скроллится. В Safari 16, впрочем, проблема была решена.
Тем не менее, модалками и overflow: hidden поведением проблемы со скроллом в разных браузерах не ограничиваются.
Например, скролл в любом плавающем или просто переполненном элементе очень даже протекает наружу, в итоге скроллите вы колесом (или пальцем) textarea, доходите до конца — и начинает прокручиваться остальной документ.
Я устал придумывать синонимы слову скроллить.
Так вот, уже достаточно давно существует свойство overscroll-behavior. Оно позволяет не только запретить цепочку событий прокрутки, но и отменить пограничные эффекты!
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
Демо: https://mdn.github.io/css-examples/overscroll-behavior/
Наиболее популярный и, для кого-то, раздражающий эффект окончания прокрутки — это пружинка. Именно поэтому я записываю демо из Safari, чтобы сразу стало понятно, о чём речь.
Ах да, Safari... как обычно, поддержка только-только появилась, с 16 версии. До того приходилось мучаться.
В любом случае, свойство очень удобное, пользуемся.
#css #scroll #overscroll #бородач
#статья дня
Плохо ли патчить глобальные методы? Казалось, что ещё со времён PrototypeJS и MooTools было понятно, что да.
Из-за них у нас String.prototype.includes() вместо String.prototype.contains().
Но так вышло, что аж три крупных проекта решили, что им-то всё можно :) И это React.js, Next.js и Bun.
Next.js и React.js оба патчили fetch. Причём, React по факту сделал это ради поддержки React Server Components, которые — сюрприз — на момент внедрения тоже были только в Next.
А Bun всё в тот же несчастный fetch добавил конфиг proxy.
Не будем углубляться в бизнес-решения, стоящие за этим, но React в итоге отказался от патчинга и ни в один релиз это так и не дошло.
Итак, статья по теме: https://kettanaito.com/blog/why-patching-globals-is-harmful
Выдержки:
1. Страдает поддержка
2. Теряется предсказуемость работы (особенно с тем, как это пытались сделать в React)
3. Предложенные API — они про решение бизнес-задач здесь и сейчас, но никак не про будущие процессы и обучение разработчиков.
4. Подобные решения — это лок на поставщика. Используете proxy в Bun — на ноду не слезете.
5. Если подобное внезапно наберёт популярность — как в случае с Prototype.js и MooTools, то уже спеку придётся подгонять под вендора.
В статье, естественно, даются примеры, как подобного избежать и немного больше исторического контекста.
#js #patch #fetch #react
27 июня Яндекс проведет Young Con — фестиваль для студентов и молодых специалистов, вдохновленный технологиями будущего
Young Con — это 6000 участников, 10+ часов нетворкинга и приключений, а также множество карьерных и развлекательных активностей: экспресс-собеседования, знакомство с технологиями компании, выступления хедлайнеров, конкурс косплея и многое другое. Основной темой ивента станет «Вселенная Яндекса». Она будет состоять из 9 тематических «миров» — интерактивных стендов, где гости смогут общаться с разработчиками и руководителями сервисов, перенимать их практический опыт и узнавать о карьерных возможностях, которые доступны стажерам компании.
На фестивале также пройдет финал турнира по спортивному программированию среди студентов «Баттл вузов. Кубок Y&&Y», где участники команды-победителя станут обладателями 1 млн рублей. А в завершение дня выступят группы The Hatters и Хлеб.
Мероприятие пройдет 27 июня на Live Arena. Принять участие в нем можно очно или онлайн — для этого необходимо заполнить форму на сайте. Начинающим айтишникам, которые хотят попасть на экспресс-собеседование, помимо заявки нужно также прикрепить резюме.
Регистрация уже открыта.
Как IT-специалисту прокачать словарный запас и вывести английский на более продвинутый уровень?
Записаться в Speaking club for IT-specialists к Марине, где участники обсуждают актуальные темы, ломают языковой барьер и общаются со своими коллегами на английском.
👩💻Марина работает со специалистами таких компаний, как Wargaming, ВТБ, Helix, МТС.
🗓14 мая стартует новая группа:
Темы этого месяца:
📌AI Search vs Googling
📌Soft Skills for IT-specialists
📌Doomsday
До конца мая действует старая цена на клуб - 3000 рублей (3 встречи).
Подписывайтесь на канал и сразу же забирайте список полезных фраз для собеседования на английском в подарок за подписку.
#инструмент дня
Товарищ прислал невероятное признание: он перешёл с комбинации ESLint и Prettier на... Biome!
Вот на этот вот: https://biomejs.dev/
Для тех кто не в курсе, Biome это реинкарнация самого амбициозного в истории тулчейнов проекта, Rome.js, целью которого было всё и сразу.
Затея Rome увенчалась своеобразным успехом: ребята собрали инвестиций и... всё. Почитайте, там очень интересно.
Так вот, давайте перейдём к Biome. Сразу слово моему товарищу, вы его уже знаете по проекту extended-fetch. Мои комментарии, как всегда, курсивом.
«Преимущества Biome:
- нет таких серьезных ломающих изменений как в ESLint (например сейчас, чтобы перейти на 9-ю версию с 8-й нужно проверить работу всех используемых плагинов и перенести вручную конфигурацию на новый формат)
Я не согласен, что это преимущество. Невозможно развивать ESLint без того, чтобы не разбить пару яиц. Никто не заставляет лезть сразу на 9.
- существенно выше производительность
Предстоит узнать, какой ценой.
- форматирование и проверка кода в одном инструменте (выигрыш как в производительности, так и в поддержке одного инструмента вместо двух)
- нет необходимости использовать другой инструмент для проверки только измененных файлов, Biome сам умеет определять с флагом
- Лучшая поддержка сообщества
Как у Rome? :)
- JSON схема для описания конфигурации (не нужно лезть в документацию и изучать доступные параметры или их измененное именование)
Меня пока устраивает скорость, единый тулинг, простая миграция с еслинта и преттира, жисон схема для конфига».
Ваши мысли, котаны?
P. S. сегодня мы попали в список, вручную отобранный Виталием Зюзиным по критерию авторской подачи: /channel/addlist/Z6Efi4jXwe9lODcy
Всем новоприбывшим привет, располагайтесь поудобнее.
Я знаю кучу IT-управленцев, которые хотят внедрить Data Warehouse, но
❌ Не хватает экспертизы по инструментам и архитектуре DWH
❌ Не проработаны требования бизнес-подразделений по витринам для BI
❌ Сложно объяснить пользу DWH бизнесу, для которого это «очередной IT-проект»
Что делать?
8 мая эксперт KT.Тeam (ТОП 30 агентств России в Highload-разработке по версии RUWARD 2021) проведёт бесплатный вебинар
На нём вы получите:
💻 Пошаговый план проектирования Data Warehouse
💻 Разбор 3-х уровней архитектуры хранилища
💻 Решение для бизнеса: как тестировать гипотезы быстрее и точнее
🎁 Бонус: таблица сравнения популярных OpenSource инструментов для DWH
ЗАРЕГИСТРИРОВАТЬСЯ БЕСПЛАТНО
#шпаргалка дня
Уникальное предложение!
Берёте короче эту пирамиду код-ревью и ваши пулл-реквесты станут не только вкусными, но и полезными: https://www.morling.dev/images/code_review_pyramid.svg
Такая себе пирамида Маслоу, но для обсуждения качества кода. От базовых вещей (но не опускаясь до того, что можно сделать автоматически) до того, что сделает ваш код действительно красивым.
#pr #process #work #бородач
#статья дня
Моя любимая дизайн-система и набор компонентов React Aria получила очередное обновление!
1. Наконец-то появились подменю (submenu)! И как раз мы недавно рассматривали статью о том, как добиться стабильного открытия меню по ховеру, что движения мыши будут напоминать треугольник, вот всё учтено: https://react-spectrum.adobe.com/blog/creating-a-pointer-friendly-submenu-experience.html
2. 7 (семь!) разных виджетов для выбора цвета
3. Виджет для построения дерева (поддиректорий, например)
4. DropZone для перетаскивания файлов
5. Улучшенный тришейкинг — размер бандла сильно снизится.
В общем, крутейший выпуск. Ребятам из React Aria респект, работаем дальше :)
#react #ui #kit #aria
#фишка дня
А приходилось ли вам, котаны, плавно менять текст?
Тогда вы не могли не заметить раздражающее мерцание, особенно заметное на одинаковых частях текста.
Причина, по которой это происходит, не уложится в один пост: это много-много математики цвета и режимов смешивания. Для такого у меня подготовлена вам целая статья: https://jakearchibald.com/2021/dom-cross-fade/
А фишкой же дня будет простое решение проблемы:
mix-blend-mode: plus-lighter;
#codepen дня
Маскинг зашёл слишком далеко! Вы только посмотрите, что можно сделать при помощи небольшого количества геометрии и градиентов!
И всё это на единственном теге img, без обёрток! Сразу будет сказано: в Safari пока сам цветной кружочек не работает, даже в Technology Preview :( но это не значит, что нам нечего почерпнуть! Исправлено!
Ссылка: https://codepen.io/alinaki/pen/xxeoXjN (это форк пена от t_afif, но с более универсальным сдвигом аутлайна)
Небольшой разбор:
1. clip-path требуется только для ограничения области ховера, можно и без него
2. чтобы чётко расположить кружочек на окружности, требуется немного геометрии с извлечением квадратного корня из радиуса.
3. Оказывается, аутлайн можно двигать. К сожалению, в Safari пока не прокатило. Суть перемещения outline — как раз в том, чтобы разместить квадратик, обозначающий статус пользователя, на окружности.
Буду пробовать починить это дело в Safari, посмотрим, что к чему :)
Upd. я нашёл способ починить в Safari, сейчас подбираю значения. Потому основная ссылка сломана, смотрите оригинальную :)
Upd. 2 Я починил в Safari! Осталось понять аналитическое решение :)
#css #hack #mask
👨💻Программистам всех уровней посвящается:
— Вносить правки в ваш код сложно и проще переписать всё с нуля?
— Пишете тесты, а баги всё не заканчиваются?
— Скорость работы вашего приложения заставляет желать лучшего?
— Вы много раз слышали про паттерны, слои приложения, ответственности объектов, но не понимаете, что от вас хотели?
🔥Тогда вы по адресу!
На моём канале я пишу статьи, отталкиваясь от своего многолетнего опыта коммерческой разработки.
🧠На канале вы узнаете:
— Что такое архитектура ПО и для чего она нужна
— Использование и польза паттернов проектирования на примерах
— Какие механизмы работают быстрее, но когда стОит отдать предпочтение иному подходу
— Как писать тесты правильно
— 🎁И многое другое...
🏆Переходи на канал, поднимай свой уровень,
💵а за ним и востребованность на рынке специалистов!
#codepen дня
Если doomscrolling — то только такой!
https://codepen.io/cobra_winfrey/pen/oNOMRav
Работает только в браузерах, поддерживающих Scroll Timeline API. Это пока только Chrome, Canary и за флагом. Ну и полифиллы.
#css #scroll #animation
#новость дня
Я не то чтобы люблю постить новость о выходе очередной версии какого-нибудь там React, но тут столько сразу всего, что давайте попробуем.
Итак, какой-то никакой-то React 19 Beta!
Вокруг этого релиза было слишком много разговоров. И причина проста: React Compiler.
TL;DR: React Compiler это особый инструмент сборки кода на React, автоматически мемоизирующий нужные данные в нужный момент. Никаких больше раздражающих useCallback, useMemo и memo не требовалось бы.
Собственно, блог разработчиков: https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024
И нет, этого в релизе React 19 не будет. Почему-то все кругом решили наоборот.
А что будет? Да много всего: https://react.dev/blog/2024/04/25/react-19
Наборы хуков и API для Suspense это нечто потрясающее. Я крайне рекомендую посмотреть хотя бы на use и useOptimistic. С такими нововведениями, можно даже думать об отказе от React Query.
И давайте пройдёмся по руководству к обновлению:
0. react-test-renderer объявлен устаревшим! Теперь официально: используйте React Testing Library.
1. ref как проперти. Дождались!
2. Возможность обрабатывать ошибки разных категорий: пойманные ErrorBoundary и пропущенные им же.
3. Наконец-то удалены propTypes и defaultProps. Висели с 2017 года как Deprecated.
4. Удалён ReactDOM.render. Вот тут мне стало больно, но я выживу: я абьюзил эту штуку чтобы рендерить реакт-виджеты в легаси-части кода.
5. Удалён ReactDOM.findDOMNode (кому-то тоже будет больно, да)
6. Сборок UMD больше нет. Если вам очень нужно работать без сборки прямо в браузере — используйте сервисы вроде esm.sh. На канале был пост об этом сервисе.
В общем, изменений достаточно. Но сначала надо обновиться до 18.3.0 хотя бы 🙂
#react #javascript
💡 Готовишься к собеседованиям?
Здесь собраны актуальные вопросы к собеседованиям на позицию Frontend Разработчика. В каждом посте:
✔ Короткий и полный ответы
✔ Ссылки на ресурсы для изучения темы
✔ Уровень сложности вопроса
Канал ведут опытные Frontend Разработчики, которые будут еженедельно проводить публичные собеседования среди подписчиков.
Подпишись на Frontend | Собеседования
#фишка дня
Валидация форм в HTML, мягко говоря, раздражает. Я даже не буду начинать о том, что все встроенные способы валидации или выглядят уродливо, или имеют странную логику.
Тем не менее, браузеры пытаются и много лет назад у нас появились селекторы :invalid и :valid.
Как несложно догадаться, они целятся в поле ввода, не соответствующее критериям и соответствующее критериям соответственно. Например, required.
Я сел на книгу с каламбурами, простите.
Казалось бы, вот оно, счастье! Пишем что-то такое:
input:invalid ~ .invalid-message {
display: block;
}:invalid в том, что пустое, не тронутое пользователем поле, изначально не удовлетворяет заданным условиям! И сообщение будет висеть сразу, раздражая всех.
Верстаешь?
Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:
1. Ты сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке своего проекта;
6. Добавишь в портфолио 1 качественный проект;
7. Получишь в подарок чек-лист «45 мест для поиска работы».
А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова.
👉 Проскочить на интенсив бесплатно
Начинаем 14 мая.
Реклама. ИП Чернова О. А., ИНН:771399721044
#баг дня
Кастомные скроллбары — штука прекрасная, хоть за 20 лет так и не нашедшая свой путь в стандарты. До сих пор полноценная стилизация возможна только в Blink aka Chromium и WebKit aka Safari.
В Firefox как не работало, так и не работает.
К слову, хорошая статья Ахмада Шадида на тему: https://ishadeed.com/article/custom-scrollbars-css/
Короче, суть бага: если вы решились таки стилизовать скроллбар, то не рассчитывайте, что Safari правильно применит стили по наведению мыши :)
Я, правда, не знаю, кому может прийти в голову менять стили скроллбара по hover.
Раз сработает, два сработает, а на третий — всё, нет. Смотрим видео, собственно.
Решение от Брамуса Ван-Дамма довольно забавное: нужно стриггерить инвалидацию стилей, для чего можно рандомной CSS-переменной присвоить неопределённое значение. Вот так:
.section:hover {
--force-rerender: ;
}
#инструмент дня
Важной частью процесса разработки является сканирование уязвимостей в коде и зависимостях. А ещё более важной — слежение за ними.
И этот процесс было бы неплохо автоматизировать.
Да, в какой-то мере справляется dependabot, но не во всех компаний используется GitHub и хотелось бы получать сводки в любой момент. Ну а npm audit такая себе игрушка.
И тут у нас имеются прекрасные инструменты. Для начала, конечно же, база уязвимостей для Open Source библиотек: https://ossindex.sonatype.org/
Обратите внимание, речь не только про JS aka npm, в каталоге присутствуют практически все мыслимые среды и пакетные менеджеры.
Второй момент это тулинг. И тут от тех же Sonatype имеется пакет AuditJS: https://github.com/sonatype-nexus-community/auditjs
И расширение для VS Code: https://marketplace.visualstudio.com/items?itemName=SonatypeCommunity.vscode-iq-plugin
Всем безопасной разработки, котаны!
#security #vulnerability #scan #audit #бородач
#фишка дня
Лет так 15-20 назад, когда Интернет ещё был про документы и будущее веб-приложений только начинало формироваться, все кругом были озабочены темой типографики. Если ты не использовал один из множества инструментов-типографов — ты и не верстальщиком был вовсе.
Не то, чтобы сейчас на неё как-то совсем забили, но ажиотаж уже не тот. Выровняли вертикальный ритм, заменили кавычки с тире и поехали.
И одной из модных тем, над которыми любили заморачиваться, была висячая пунктуация (вики и ководство). Она придавала, да и придаёт, текстам некий шарм.
И уровень детализации может быть разный, от кавычек до точек и запятых. Кавычки, впрочем, очень сильно заметны. История висячей пунктуации, кстати, своими корнями идёт глубже, чем даже первая печатная книга, но мы пока углубляться в это не будем.
А вот куда будем — так это в способы реализации.
Первый и очевидный, которым пользовались много лет назад и по сей день — это реализация на JavaScript: https://codepen.io/alinaki/pen/BaeBOBr
Рассчитываем положение строк, смотрим, нужно ли подвесить ту же кавычку и подвешиваем.
Второй способ — для выделения цитат или набоков-стайл прямой речи — это text-indent, идеально подходит, просто свешиваем первую строку на ширину символа: https://codepen.io/alinaki/pen/vYwBzBm
И самый современный вариант — это использование CSS-правила hanging-punctuation. Которое, к сожалению, поддерживается пока только в Safari (смотрим предыдущий пример, секцию supports).
Правда, Safari не будь Safari если бы не накосячили в текстовых полях, поэтому, если применяете правило глобально — отключайте его на формах.
Ну и, конечно, не стоит забывать о том, что висячая пунктуация на самом деле не очень прижилась в советской и пост-советской типографской среде, и сместилась в сторону оптического выравнивания. В таком случае, text-indent или JS-решение вполне себе ваш выбор.
#css #typography
#видео дня
Вдогонку к посту про алгоритмы работы движка Flex-раскладки, позволю себе обнаглеть и приложить ещё и это видео: https://www.youtube.com/watch?v=RVnARGhhs9w
Называется буквально "How to render in WebKit".
Да, ему 10 лет, но 10 лет назад Flex уже был сформирован и даже прошли споры по первой версии Grid. Там определённо есть что почерпнуть.
На правах закладки, ага :)
#render #webkit
#статья дня
Из разряда прекрасного!
Чтобы понять как работает движок Flex в браузере можно попробовать его... написать :)
Не, кроме шуток. Я не знаю, как проходит сейчас обучение в школах, но у нас был Turbo Pascal и многим так и осталось более понятным рисование на холсте, нежели вёрстка.
Такие люди называются бакендеры.
Потому, давайте взглянем на пример реализации: https://tchayen.com/how-to-write-a-flexbox-layout-engine
Кстати, я объяснял своей жене недавно принципы работы Flexbox как раз практически картинкой с иллюстрации :)
Как бусы нанизать на нитку.
#flex
Устроиться фронтендером в Яндекс за выходные
18–19 мая устраиваем Weekend Offer Frontend. До 15 мая решите одну задачу в Контесте, 18-го пройдите два собеседования, а 19 мая познакомьтесь с командами и получите офер.
В мероприятии участвуют 13 команд: Поиск, E-com Поиска, Реклама, Бизнес, Cloud, 360, Игры, Умный дом, Путешествия, Аренда, Недвижимость, Авто.ру и Авто.ру Бизнес. Вы сможете пообщаться с менеджерами и выбрать проект, который покажется самым интересным.
Нанимаем в офисы по всей России, помогаем релоцироваться внутри страны.
Узнать подробности и зарегистрироваться можно здесь.
Реклама. ООО "Яндекс". ИНН 7736207543
#фишка дня
Итак, встала задача расширить элемент при наведении. Да ещё с каким-нибудь пружинящим дефектом эффектом. Что делать?
На самом деле, элемент мы физически не расширяем. Такова задача.
Один из первых вариантов, помимо манипуляции непосредственно размерами (что довольно тяжело при отрисовке) — это box-shadow. Но вот градиенты таким способом не нарисовать...
Потому у нас есть два варианта! Первый, от Adam Argyle (осторожно, видео из его твиттера и содержит крики на его же детей 😃) и от Temani Afif.
Итак, первый способ: использовать border-image и анимировать свойство border-image-outset.
Пример: https://codepen.io/argyleink/pen/abxgPKE?editors=1100
Второй, более очевидный, на самом деле — анимация clip-path, а точнее параметров функции inset.
Пример: https://codepen.io/t_afif/pen/BaEgEGa?editors=1100
Разница, кстати, имеется. В первом случае градиент нарисован border-image и прыгает вместе с ним, а во втором — буквально, обрезается.
Так что выбирайте тот, что вам по душе :)
#css #border #clip #animation
🧠 Улучши ИИ на хакатоне X5 Tech AI Hack! У тебя будет 10 дней, чтобы избавить нейросеть от галлюцинаций или научить ее работать с конфиденциальными данными. Призовой фонд от X5 Tech – 2 000 000 рублей.
Старт ML-соревнования – 17 мая. Не жди дедлайна, регистрируйся прямо сейчас: https://cnrlink.com/x5techaihackdev
Приглашаем на хакатон экспертов по Data Science, ML-специалистов, разработчиков на Python и всех остальных, кто хочет прокачать свои знания о создании ИИ. На выбор – один из двух треков:
🥷 Трек 1. Маскирование. При использовании сторонней языковой модели нельзя передавать ей чувствительные данные организации – имена клиентов, доменные адреса и прочие. Поэтому участникам необходимо подготовить алгоритм, который заменит эти сведения в тексте без потери смысла.
🔎 Трек 2. Детекция галлюцинаций. Никто не любит, когда ИИ-ассистент в ответ на вопрос дает неправильную информацию. Задача конкурсантов – разработать систему, которая сможет эффективно выявлять аномалии в текстах, сгенерированных нейросетью.
Хакатон продлится 10 дней. У тебя будет шанс получить консультацию от крутых ML-экспертов и специалистов по Data Science, обсудить решения с единомышленниками, узнать больше о проектах X5 Tech.
28-29 мая по результатам тестирования моделей участников 5 лучших команд в каждом треке получат приглашение на финал в Москве. Церемония награждения пройдет на мероприятии X5 Future Night.
Участвуй в X5 Tech AI Hack и внеси свой вклад в развитие ML-технологий: https://cnrlink.com/x5techaihackdev
Реклама. ООО «ИТ ИКС 5 Технологии». ИНН 1615014289. erid: LjN8KbCRy
#инструмент дня
Вы, конечно, все в курсе, что порядок подключения ресурсов сильно влияет на скорость отображения страницы, на TTI — время от начала загрузки до возможности работы со страницей. Но как конкретно? Как точно выяснить, в каком порядке и что загружать?
И вот тут нам поможет сниппет для DevTools под названием Capo.js: https://github.com/rviscomi/capo.js
Порядок применения:
1. Берёте capo.js, значит
2. Солите его блять Загружаете как сниппет в девтулзы: https://developer.chrome.com/docs/devtools/javascript/snippets/
4. ...
5. Наблюдаете диаграмму в консоли! Она отобразит текущее и желаемое положение вещей.
А кому охота подробностей, тому вот сюда, на эту презентацию Виталия Фридмана: https://youtu.be/uqLl-Yew2o8
#css #js #performance #бородач
#инструмент дня
Ладно, мы все можем согласиться, что у TypeScript замечательный офсайт, прекрасная документация и удобная песочница, но в мире есть сотни тысяч JS-библиотек и десятки тысяч из них либо написаны на TS, либо имеют выделенные типы.
А единой документации по этим типам нет!
Точнее, не было, но теперь вышел https://tsdocs.dev/
Это система поиска по существующим пакетам с типами. Она установит нужный пакет, распарсит типы и JSDoc и отобразит в удобном формате.
К слову, котаны, что вы предпочитаете по cmd- (ctrl)-click в редакторе? Прыгать к имплементации, или к типам?
Я вот — к имплементации, прыгать к типам меня раздражает.
#typescript #dts #types #doc #бородач
Привет! Меня зовут Александр Шлейко, и вы видите, как я с хинкальным котом (который помогает мне вести занятия) и с кошкой Шираз (которая мешает мне вести занятия) готовлю очередной урок для учеников.
Я преподаю фронтенд, и готов провести вас с нуля до первого предложения о работе. Буквально через месяц начинается новый поток моей школы, и за 70 т.р. вы можете присоединиться.
Почему я лучше условного Brainboxа?
🤗 Домашняя атмосфера и постоянный менторинг
👩🎓 Высокий уровень выпускников и реальные трудоустройства
А ещё примеры моих занятий можно посмотреть в открытом доступе, например, в Youtube.
Фронтенд хорош тем, что там поменьше математики и перекладывания чиселок, и побольше творчества, так что он отлично подходит таким гуманитариям, как я :)
Прямо сейчас можно
Посмотреть программу курса
Написать мне в личку @dustyo_o и позадавать вопросы о курсе
⭐ Первым 10 написавшим сделаю скидку ;)
#такое дня
Есть тут те, кто настолько погружён в интернациональные проекты, что приходится работать с вертикальным написанием?
Чтож, с Safari версии 17.4 вертикальным может быть не только текст (writing-mode), но и элементы управления!
Я понимаю, что абсолютному большинству это и в жизни не пригодится, но какая красота!
Статья от разработчиков WebKit: https://webkit.org/blog/15190/implementing-vertical-form-controls/
Кстати, так-то поддержка набирает обороты. В WebKit просто решили добить все элементы разом: https://caniuse.com/mdn-css_properties_writing-mode_vertical_oriented_form_controls
#css #cjk