14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
Погрузитесь в мир ☕️ Java и станьте Java-разработчиком за 4 месяца с курсом от Merion Academy!
Все, кому интересно, получат 🚀 3 бесплатных урока, 📍 Мы расскажем про то, что из себя представляет язык Java и его базовый синтаксис.
📍 Установите Java и среду разработки где будете писать код.
📍 Напишете свою первую консольную программу, а после нее и REST API приложение.
📍 А в конце закрепите полученные знания.
🎁 Бонус – интенсив по развитию карьеры, где HR-эксперты расскажут как создавать сильные резюме и проходить собеседования.
📜 Плюс гайд по базовому синтакису языка.
🕺У ребят одна из самых доступных цен, которая в разы ниже, чем в других онлайн-школах, а еще есть рассрочка для тех, кто хочет учиться сейчас и платить по чуть-чуть ежемесячно.
👉 Регистрируйтесь по ссылке чтобы забрать бесплатные уроки, интенсив по карьере и гайд.
Merion Academy – это экосистема доступного образования, которая включает в себя:
📍IT-базу знаний с полезными статьями.
📍merionacademy">Youtube-канал ,где простыми словами говорят о сложных вещах.
📍IT-академию, где обучат востребованным направлениям по самым доступным ценам.
#автор дня
Олды помнят, что я пытался ввести эту рубрику, но как-то подзабил.
И это при том, что инфлюенсеров в мире фронтенда (ну так уж повелось, что канал больше об этом) не так уж и много на самом деле. Впрочем, потому и упоминаются достаточно часто.
Тем не менее, некоторые из них достойны отдельного поста. И сегодня — Ана Тюдор (Ana Tudor).
Она, кстати, не Анна, она — Анастасия, если уж полное имя рассматривать.
Чем известна? О, ну тут вопрос, с чего бы начать. По-моему, самой популярной её работой является коллекция "ползунков" — виджетов для ввода диапазонов, CodePen. Все на базе нативных полей, с минимумом JS. Бери и пользуйся.
Так же раньше она очень много писала для ресурса CSS Tricks, но сейчас больше фокусируется на демо для YouTube-канала.
Кстати, о демо. Опять же, на CodePen представлено невероятное количество её работ, сгруппированное по категориям, от абстрактных геометрических экспериментов до весьма практичной инфографики.
А уровень её использования CSS-переменных вообще где-то за гранью.
Ну и конечно недавняя простая, но эффектная демка с анимированным градиентным текстом — тоже её.
В общем, Ана не то чтобы нуждалась в моей рекомендации, но если вы о ней не знали до этого момента, надеюсь, этот пост был полезен :)
#css #art #author
#инструмент дня
С места в карьер: утилита qnm предназначена для поиска установленных пакетов в node_modules. Зачем?
Ну, как минимум, это офигенно быстрый способ просмотреть версии всех установленных лично и не очень лично модулей: https://github.com/ranyitz/qnm
Почему ремарка про "не очень лично"? Потому что какой-либо пакет может запросто тянуть за собой более старую или более новую версию некой утилиты, на которую вы так сильно опирались.
Почему-то меня в этом отношении очень раздражает emotion. Его тащат просто куда ни попадя, а у людей потом на CSS-in-JS аллергия...
Так или иначе, посмотреть, почему тот или иной модуль был установлен — это очень полезно.
Моя рекомендация!
#npm #node #package #бородач
Никакие платные курсы больше не нужны — по этим 4 каналам можно освоить Frontend-разработку с нуля 👇
📌Senior Frontend — JS, HTML и CSS
📌Frontend Interview — как проходить собеседования
📌Web Craft — только Web-разработка
📌Frontender Libs — библиотеки для фронтендеров
#такое дня
Очень интересно наблюдать за тем, как люди переоткрывают для себя старые Web API. Только с другой стороны.
Ну я в том смысле, что на нас с вами сплошь и рядом несётся поток нововведений и он настолько шумит, что складывается впечатление, будто раньше вообще не было фана.
Был. Но, скажем так, интрузивный 🙂 Сейчас поясню.
Вот пронеслась ураганом демка, на которой 3D-сцена делится на два окна и эти окна взаимодействуют между собой: https://twitter.com/_nonfigurativ_/status/1727657155409363120
Автор пока не дал исходников самой модельки, только демо попроще: https://bgstaal.github.io/multipleWindow3dScene/
Но работает это взаимодействие на API из начала нулевых: window.screenX и, соответственно, screenY (и их алиасы screenLeft и screenTop; потому что IE).
Ну, то есть, буквально доступно в любом браузере вообще. И давно.
Так что давайте повторим! Не без помощи мэтра Wes Bos, конечно. Он не дал ссылку на демо, потому пришлось немного постараться уже мне и собрать пример: https://htmlshit.github.io/webcam/dist/
Открывайте, разрешайте доступ к камере и увидите примерно ту же картину, что и на моём видео к посту.
Применить это, конечно, тупо некуда. Но как пример взаимодействия разных окон через localStorage — очень даже заходит :)
Так во, почему интрузивно: потому что раньше можно было двигать открытое окно. То есть, представьте себе, вы хотите окно закрыть, мышкой двигаете — а оно уползает. Сейчас такого, конечно, сделать нельзя.
P. S. Перезалил видео. Я не ожидал, что телега оригинал зальёт.
#webcam #localstorage #fun
#фишка дня
Как сделать описания проектов на GitHub более явными и привлечь внимание читателя там, где это необходимо?
Использовать кастомные цитаты!
Пример: https://github.com/HTMLShit/htmlshit.github.io/blob/master/demo.md
Доступные типы: NOTE, TIP, IMPORTANT, WARNING, CAUTION.
Очевидно, это доступно и в управлении проектами на гитхабе. Для небольших задач — очень хорошо, не нужно переходить в Trello.
Пример синтаксиса:
> [!NOTE]
> Заметка о выпуске
Что отличает промышленный проект от обычного? Может быть огромная кодовая база из миллиона строк? Или существование на протяжении десятилетий? 🤔
На самом деле мы упустили важный нюанс, а как все это великолепие тестируется и собирается.
Ребята из крупнейшей IT компании страны на основе собственного опыта создали курс по продвинутому использованию Webpack для сборки Frontend приложений промышленного уровня.
За 3 месяца на курсе ты научишься:
▪️настраивать сборку под любые самые нестандартные задачи,
▪️писать сложные плагины и лоадеры;
▪️узнаешь про микрофронтенды и сборку WASM;
▪️а также как настроить все это, чтобы оно работало быстро даже на сверх огромных проектах.
Это не просто «еще один обзорный тур по Webpack, а очень глубокий и проработанный материал, выходящий далеко за пределы обычной сборки 👍🏼
Чтобы познакомиться с ребятами и получить бесплатные материалы на тему сборки, переходи в бот - /channel/Kobezzzainfo_bot
Рекламодатель: ИП Кобец Д.Д., ИНН 032620506600
ERID 2VtzqucZqms
#заметка дня
Развитие индустрии нейросетей в последние дни напоминает сериал про эпоху дворцовых переворотов, поэтому пришло время посмотреть что-то более близкое к нам.
Технологические компании активно внедряют нейросети в свои сервисы и продукты, только его еще и обучать надо, а за этим стоят огромные расходы и дополнительный персонал. Такова цена пальмы первенства в этой сфере.
В сериале Яндекса YaC 2023 рассказали, о создании профессии AI-тренера и взяли в штат уже 300 сотрудников с междисциплинарными скиллами в разных областях для обучения своей YandexGPT.
Сейчас модель может тезисно представить информацию из видеоролика, пересказать статью и дать общую оценку по товару или услуге на Маркете через анализ отзывов.
Звучит неплохо, настрой прямо-таки боевой, вероятно, в будущем увидим YandexGPT и в других сервисах.
С 23 по 28 ноября пройдёт леденящий душу марафон о самом устрашающем языке программирования — JavaScript. Марафон отлично подойдёт для всех, кто давно хотел научиться новому, но боялся начать.
На 6 дней вы получите бесплатный доступ к тренажерам и полезным материалам HTML Academy.
Выполняйте задания, знакомьтесь с JavaScript и побеждайте все страшные баги на своём пути. Ну или просто знакомьтесь с JavaScript, так тоже можно. На каждом этапе помощь наставника, а в конце марафона разбор всех вопросов и сложностей в прямом эфире.
Среди участников мы проведем розыгрыш крутых подарков и предоставим скидки на наши лучшие продукты.
Узнать подробнее.
Реклама. ООО "ИНТЕРАКТИВНЫЕ ОБУЧАЮЩИЕ ТЕХНОЛОГИИ". ИНН 7807382880. erid: LjN8K8kre
#баг дня
В чат поступил вопрос: «Как проиграть звук в браузере на iOS?»
И я помню, что там не самое всё тривиальное, но в итоге сводилось к (нынче) стандартному для всех браузеров требованию: «Человек должен провзаимодействовать со страницей». После чего можно запускать звук.
Причём, раньше-то «взаимодействия» было достаточно среагировать событие mousemove и вызвать метод play на audio-элементе, такой себе autoplay для бедных. Но теперь — обязательно нужен click.
Но с iOS и Safari вообще всё же всё не было так просто. Там приходилось для начала прогреть контекст звука — AudioContext.
Ну как господа аудиофилы провода из вешалок прогревают перед запуском любимой пластинки.
Выглядит это счастье как-то так: https://codepen.io/alinaki/pen/vYbREJZ?editors=0010
Здесь пример чуть усложнён, поскольку требуется разблокировать контекст и оставить его свободным, чтобы в любой момент подменить звук на нужный.
Для этого в момент клика на странице стартует пустой mp3-файл (обратите внимание на его размер), а потом просто через таймаут src звукового объекта подменяется на нужный (как в попапах; если кто не в курсе, могу рассказать).
Я честно довольно долго пытался понять, что же не так и почему на моём телефоне пример не работает...
Upd. Как минимум на моем телефоне все работает! iOS 17.0.3 Напишите в комментариях, у кого как, пожалуйста. Точно знаю, что на 17.0 не пашет.
А свелось всё к тому, что в iOS 17 всё сломано. Вот issue на тему: https://bugs.webkit.org/show_bug.cgi?id=261414
Помечено как исправленное, но ещё не доехало до всех устройств.
Теперь о том, как всё же заставить это работать: надо запросить разрешение на использование микрофона, тогда и звуковой контекст разблокируется. Но я ещё не попробовал это сделать.
В общем, Apple как обычно, да. Грустно.
P. S. Нет, примеры Howler.js тоже не работают в данный момент.
P. P. S. Блин, стоило написать пост и всё заработало. Чатом клянусь, вчера не работало!
#ios #sound #safari
#codepen дня
Давно собирался написать игру по Гарри Поттеру, но не знал, как?
Не расстраивайся, я принёс решение! Steve Gardner и его прекрасное создание Spell Caster!
Вот: https://codepen.io/ste-vg/pen/zYerxoR
Я обожаю подобные примеры. Игра буквально укладывается в несколько экранов кода, но красива до безобразия.
Из технологий — Three.js и стейт-машина Stately, позволяющая описывать состояния приложения через удобные диаграммы.
Много комментариев по коду, интересная реализация распознавания жестов. Хоть сейчас бери и в магазин выкладывай :)
Я залип, в общем, как в игре, так и в её исходниках.
#webgl #threejs #game
Новый бесплатный Fullstack-интенсив от METHED «Сервис бронирования мест на StandUp»
Овладей навыками fullstack-разработки с 21 по 25 ноября!
Что будет на интенсиве:
- Напишем fullstack-приложение по выбору мест на мероприятии;
- Поработаем на фронтенде HTML, CSS, JS;
- Для бэка воспользуемся Node.js.
Уроки, прямый трансляции, общий чат и кайфовая атмосфера. Присоединяйся к нашей команде!
Переходи по ссылке, чтобы зарегистрироваться - https://tglink.io/283786ee287b
Количество мест ограничено!
Реклама. ИП Кислов Сергей Михайлович. ИНН 272198970024.
#заметка дня
В чат прилетел вопрос: "Как добавить иконку в поле ввода так, чтобы она была видна только когда виден плейсхолдер и исчезла при вводе текста?"
Отвечаем: конечно же добавить её в контейнер label, а потом использовать псевдо-класс :placeholder-shown на поле ввода!
Он очень давно и хорошо поддерживается, так что почему бы и нет.
Оставим за пределами этого обсуждения тот факт, что плейсхолдеры не должны заменять реальные метки. Это всё равно уже стало де-факто стандартом индустрии... но постарайтесь так не делать.
И, конечно, пример:
https://codepen.io/alinaki/pen/xxMpgLK?editors=1100
Там заодно используются SVG-спрайты, потому что мне лениво подключать профессиональный аккаунт на кодпене и грузить туда картинки. Так что заодно можно посмотреть, как работать со спрайтами. Пригодится!
Всем бу, котаны!
#css #placeholder #svg #sprite
#такое дня
Можно я немного побуду душным?
Этот мем всплывает разве что не ежегодно в твиттере и программерских пабликах и каналах.
Это, конечно, не уровень Max Howell, создателя Homebrew (самого популярного менеджера пакетов на macOS, используемого всеми разработчиками), но всё же. Напомню, он был отвергнут Гуглом за незнание структур данных.
В случае с Дэном многие пишут, что он «создатель реакта» и строят на этом панчи. Ну нет же, котаны.
Он один из разработчиков, а по большей части — лицо проекта, евангелист.
Ден Наше всё Абрамов. Кроме шуток, вы наверняка такое видели.
Что он создал — так это всем известный Redux, будучи соавтором. Потому давайте не будем распространять ерунду дальше.
Ну и понятное дело, что его не приняли в VK тогда, когда он не был ни тем, ни другим.
Что, впрочем, даёт на самом деле надежду гораздо больше, чем повод посмеяться. Если вас не приняли куда-то, подумайте, а так ли плохо это вообще.
#meme #debunk
Хотели бы попробовать свои силы в финтехе и узнать, что там и как? Такая возможность появилась благодаря симулятору от агентства Ар и Росбанка. В нем вы можете познакомиться с продуктовыми задачами Росбанка в роли product-менеджера или backend-разработчика. Пообщаться с коллегами, узнать больше о корпоративной культуре.
Чтобы начать, переходите в бота, выбираете направление, выполняете задачи, изучаете материалы и знакомитесь с командой. В конце вас ждет список актуальных вакансий, если так понравится, что захотите продолжить свой путь!
Симулятор продакта и бэкенда доступен только до 18 ноября, так что поторопитесь! Ссылка на бота тут.
Реклама. Рекламодатель
#баг дня
Сегодня Google опрокинул миллионы пользователей расширений Google Sheets.
Для многих станет сюрпризом, но этот рынок огромен: аналитика, SEO, рассылки, бюджет, ведение рекламных кампаний, анализ опросов из Google Forms... всё там.
Только у нашего расширения — под миллион установок, например.
Так вот, когда-то давно в Chrome 83 появилась очередная директива Content-Security Policy (CSP): Trusted Types.
MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/trusted-types
Web.Dev: https://web.dev/articles/trusted-types
Когда она включена, любую загрузку скриптов надо предварительно одобрить. Любое изменение innerHTML и документа вообще — тоже.
Звучит разумно? Давайте дальше.
Практически любой скрипт на свете использует innerHTML, но это полбеды. Если директива неправильно описана, загрузка и исполнение скриптов внутри iframe тоже становится невозможной.
И сегодня в Google Sheets появился заголовок, включающий директиву, а код настройки — нет.
Масштабы ошибки оказались сокрушительными. Полегли все расширения Google Sheets, просто потому что каждое из них использовало какой-нибудь скрипт, загружающийся извне. Повторю, миллионы пользователей потеряли возможность нормально работать.
Ах да, директива учитывается только в Chrome 🤡
Баг-трекер: https://issuetracker.google.com/issues/313466551
Мы достаточно быстро нашли решение и указали на него в трекере, но далеко не все разработчики отреагировали так же быстро, потому ситуация остаётся плачевной.
А решение, собственно, заключается в минимальной настройке директивы.
Это то, что должны были сделать разработчики Google Sheets:
<script>
if (window.trustedTypes && window.trustedTypes.createPolicy) {
window.trustedTypes.createPolicy('default', {
createHTML: string => string,
createScriptURL: string => string,
createScript: string => string,
});
}
</script>
7 дней бесплатного обучения вёрстке сайтов!
Организовали для тебя бесплатный онлайн-интенсив по frontend-разработке с практикой, обратной связью, куратором, где ты:
- Добавишь в портфолио 1 сайт;
- Сверстаешь веб-сайт на HTML + CSS;
- Реализуешь функционал на JavaScript;
- Используешь фронтенд-фреймворк Angular;
- Подключишь Backend и загрузишь сайт на хостинг.
Забрать бесплатно 7 дней обучения Frontend-разработке
Бонусом мы вышлем тебе в подарок чек-лист чек-лист: «45 мест для поиска работы», где собраны все ресурсы, на которых разработчики находят работу в престижных IT-компаниях.
Стартуем 6 декабря.
#фишка дня
Сейчас в CSS присутствует 54 разных единицы измерения (units).
Пятьдесят четыре!
А ты до сих пор используешь одни только пиксели aka px.
Так вот, используя единицу измерения lh — line-height — и свойство background-clip можно, например, красиво подсветить нужное число строк в любом тексте.
Прям как тут: https://codepen.io/alinaki/pen/xxMJXaV
Поиграйтесь с настройками и шириной блока, получается очень интересно. Автор красоты — Jhey.
А чтобы не запутаться — есть прекрасный ресурс https://whatunit.com/
На нём имеется диаграмма принятия решений, когда какую единицу брать. Если всё ещё непонятно, посмотрите видео от Kevin Powell: https://www.youtube.com/watch?v=Utc_uhvTluk
Он, кстати, автор диаграммы.
В общем, просыпаемся, котаны. Будущее здесь.
#css #rem #lh #vh #measure
#ссылка дня
«Что происходит когда ты набираешь google.com в адресной строке браузера и жмёшь ввод?»
Да, котаны, вы угадали: это довольно популярный вопрос на собеседованиях.
Если у тебя его не спрашивали, значит, предполагается, что ты знаешь ответ.
И да, ответ очень многослойный и зависит не только от позиции, на которую собеседуешься, но и вообще от уровня задротства. Твоего и интервьювера.
Как же хорошо, что у нас уже есть максимально полное описание происходящего в одном репозитории.
Максимально полный без открытия книги по архитектуре ПК, я имею в виду.
Вот: https://github.com/alex/what-happens-when
Официального перевода на русский нет, но есть PR: https://github.com/alex/what-happens-when/pull/1462/files
Как вы думаете, котаны, имеет ли смысл в 2023 году вообще такое спрашивать? Должен ли условный фронт это понимать?
#web #interview
#шок дня
Мы уже видели предложение работы в консоли браузера. Баннеры вида
<script>
alert("We're hiring");
</script>
#codepen дня
Какой самый приятный момент ведения канала по веб-разработке? inb4 Когда заказывают рекламу
Конечно же когда кто-то из подписчиков присылает свои измышления и эксперименты! Как будто у нас тут с вами настоящее сообщество!
Итак, сегодня — очередная вариация на тему из игры World of Goo. Жидкие перекаты 🙂
Предыдущий пост был вот: /channel/htmlshit/1867
Основан эффект на размытии и последующем повышении контраста до уровней, когда края снова становятся чёткими.
Итак, встречайте: https://codepen.io/mdss/pen/qBLZeya?editors=1100
Автор честно признаётся, что анимация украдена с https://maps.mel.fm/ Вот только у них там SVG. Пример с SVG можете увидеть по ссылке на чат или на сайте.
В общем, вдохновлять людей — приятно. Рекомендую!
P. S. Кто на айфоне починит?
#css #goo #filter #svg #бородач
#статья дня
CSS Grid... с чего бы начать. Наверное с того, что это безумно просто и безумно сложно одновременно.
Кто-то пришёл в вёрстку когда гриды уже вовсю были в ходу, для кого-то гриды до сих пор означают flex-колонки из Bootstrap aka grid system и ничего другого знать не хочет. Или не может.
Я уже молчу о том, сколько изменений стандарта они пережили...
Потому я постоянно слежу за новыми обучающими инструментами и статьями и приношу их вам. И сегодня — очередной бриллиант от Джоша Камю.
Встречайте интерактивное руководство по CSS Grid: https://www.joshwcomeau.com/css/interactive-guide-to-grid/
И когда я говорю интерактивное в контексте — это буквально означает что вам не просто примеры кода дадут, а кучу ползунков, чекбоксов и живой вёрстки.
С красивыми иллюстрациями, конечно же.
В общем, бросайте все дела и бегом читать. Нашему чату нужен новый властелин гридов. Старый теперь по скриншотам гадает...
#css #grid #tool
#codepen дня
Итак, вашему вниманию самый популярный в октябре кодпен небезызвестной Аны Тюдор.
Переливающийся всеми цветами радуги светящийся текст!
Вот: https://codepen.io/thebabydino/pen/rNPOpJK
Реализовано на SVG-фильтре gaussian blur: фон обрезается по контенту текста через -webkit-background-clip: text и размывается.
Жаль, я не знал об этой технике когда много лет назад делал сайт школе стриптиза. Там было много эффектов а-ля неоновое свечение. Фоток не будет.
#css #svg #filter
#фишка дня
Да-да, на дворе 2023 год и JavaScript в браузерах включён по-умолчанию.
Вот только байки про параноиков в вязаных и не очень свитерах — вовсе и не байки. Зайдите на LOR.
Потому нормальной для многих практикой было и остаётся добавление класса no-js на body и его удаление во время исполнения скриптов.
Тем более странно, что указаный на картинке медиазапрос @media (scripting: enabled) появился только сейчас.
Поддерживается в Chrome 120+, Firefox 117+ и Safari 17+.
Маловато, конечно, но пусть будет.
#css #js #media #paranoid
Erid:2Vtzqv45E96
Это Маша Палагина и Стас Буткеев — ведущие самого трушного* подкаста о тестировании и качестве «QAk-QAk — и в продакшен».
В этом выпуске они обсуждали, что такое доступность (accessibility), как ее тестировать и какие функции должны быть в удобном и инклюзивном приложении.
И это только один выпуск из трех сезонов. Ребята записали целую аудиобиблиотеку для QA-инженеров, с помощью которой можно прокачать хард-скиллы.
Подкаст есть на всех стриминговых платформах.
P. S. А еще у QA-команды Тинькофф есть телеграм-канал с кейсами, задачи и инструментами — подписывайтесь, чтобы не пропустить новые посты.
* по версии ведущих Маши Палагиной и Стаса Буткеева
#шок дня
TL;DR: Идем на https://makereal.tldraw.com/, вставляем ключ GPT4, рисуем интерфейс с описанием и нажимаем кнопку Make Real.
Я не то чтобы старательно, но избегал темы ИИ в контексте кодогенерации. Хотя, естественно, использовал и использую для генерации конфигов, тестов, типов. Пару раз пробовал для создания и обработки структур данных.
Просто как-то скучно всё выглядело.
Но тут уже два дня интернет разрывает от работы Стива Руиза, автора офигенной совместной рисовалки диаграмм tldraw: https://tldraw.com/
И называется она Make Real: https://tldraw.substack.com/p/make-real-the-story-so-far?r=1vezzj
Если у вас есть ключ OpenAI GPT4 — вот ссылка на демо: https://makereal.tldraw.com/
Рисуем интерфейс и, например, схему состояний конечного автомата (state machine, проще говоря, схему состояний приложения и его реакцию на внешние действия). Дополняем описанием, группируем и нажимаем кнопку Make Real.
И у вас есть готовое приложение. Не нравится? Выделили результат, описали снова и снова нажали. И так пока не получится.
Это выглядит как волшебство. Работает на GPT-4V aka Vision Model. Особый кайф придает стиль взаимодействия с нейросетью — через холст. В три миллиона раз более наглядно, чем чат или любой конструктор. Повторю: результат работы возвращается на холст в виде рабочего приложения и превращается в часть диаграммы. Это пушка.
Если ключа нет — очень рекомендую хотя бы прочитать статью выше и посмотреть примеры.
Лень и это? Ну хотя бы на твиттер тогда зайдите: https://twitter.com/tldraw, примеров уже десятки!
Это потрясающее путешествие. Прототипы выйдут на новый уровень. Ждём подобное в Figma? :)
#ai #tldraw #future #prototype
#ссылка дня
Не так давно я обновил логотип канала, до того момента это был символ пустого фрагмента, </>, выражаясь языком React.js, на фоне логотипов кучи Веб-технологий, с которыми я работал.
Нарисовал его бывший коллега, а потом я много раз пытался обновить и освежить. Но терялась душа 🙂 Так что обновлённую версию вы могли встретить разве что в рекламе канала, многие по ней же подписались.
Так вот, я это к чему. Когда это всё происходило, не было ресурса https://icones.js.org/
По его названию можно было бы подумать, что там одни только иконки. Но нет!
Там не только собраны иконки под открытыми или свободными лицензиями, но и изображения флагов, эмодзи и логотипов различных технологий, ресурсов, программ и компаний!
А я потратил тогда кучу времени на поиск логотипов и приведение их в приличный вид... Аж обидно.
Но вот вам, котаны, берите и пользуйтесь 🙂
#icons #logos #emoji #flags #бородач
Хотите офер мечты от международной компании?
Возьмите английский для IT-специалистов в Skyeng: в честь Чёрной пятницы скидки до 50%, а платёж за курс можно разделить на четыре части с Яндекс Сплитом. Кстати, ещё среди участников разыграют макбуки и айфоны. Подробнее на сайте.
Реклама. ООО «Яндекс Пэй»,
ИНН 7703466743,
Erid LjN8JzwE3
#фишка дня
Одна из знаменитых проблем 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
#статья дня
Не так давно я писал о том, что мне пришлось написать плагин для ESLint, потому что а) среда, в которой я работаю — упоротая, б) инструменты — упоротые, в) люди тоже себя могут иногда вести... упорото.
Вот тут: /channel/htmlshit/1638
Мой плагин был очень простой: запрет констант уровня модуля. Ну вот так вот :( Они при сборке терялись, потому что иди нахер, вот почему.
Так, к статье дня. Анастасия Щедрина о том, как работает ESLint и о том, как написать свой плагин для линтинга React-приложения: https://habr.com/ru/companies/domclick/articles/743384/
Да, я в посте тоже писал про AST и инструменты, позволяющее это самое абстрактное синтаксическое дерево построить, но в статье тут всё гораздо подробнее. Меня редко хватает на целую статью, так что читайте что у других есть, котаны :) Ведь вышло неплохо и подробно.
#eslint #react #ast #бородач