14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#такое дня
Я пропустил, что каналу исполнилось 5 лет! 30 мая 2018 года я поменял кое-что в жизни: /channel/htmlshit/2
Интересно, куда делось сообщение номер 1... Ну не суть.
Изначально я просто цитировал своих заказчиков из мира российского диджитала и пытался шутить (ну хорошо же получалось).
А потом канал стал способом перестать проводить столько времени в чатах по CSS, объясняя всем и каждому, как вертикально центрировать дивы :)
Спасибо, что вы со мной, котаны и котанессы!
Всем чмаффки.
#фишка дня
Эмулируем различные особенности зрения легко и просто!
Если залезть в Chrome DevTools, нажать на меню "три точки", выбрать Rendering и найти раздел Emulate vision deficiencies, можно легко понять, как видят ваш сайт, например, люди с искажённым цветовосприятием. Дальтоники.
Список эмулируемых особенностей:
1. Нечёткое зрение (тут и близорукость, и дальнозоркость подойдёт)
2. Протанопия (нет красного)
3. Дейтеранопия (нет зелёного)
4. Тританопия (нет синего)
5. Ахроматопсия (нет цвета)
Начиная с Chrome 112 есть возможность имитировать пониженную контрастность (для имитации катаракты, например): https://developer.chrome.com/blog/new-in-devtools-112/#reduced-contrast
#a11y #chrome #devtools #бородач
#такое дня
В TypeScript де-факто "сломано" использование конструктора Boolean() в методе filter.
Поглядите на иллюстрацию, не кажется ли вам, что выведенный тип filtered ну не должен быть таким? Фильтр через конструктор Boolean() является достаточно популярным способом очистки массивов от falsy-значений (null и undefined туда же, очевидно).
Какие есть решения? Ну, в issue на GitHub их много, те же тайпгарды например: https://github.com/microsoft/TypeScript/issues/16655
Ну и есть весьма популярное решение — ts-reset: https://github.com/total-typescript/ts-reset
Автор патчит тип метода filter чтобы вывести верный тип массива.
Я, честно, не знаю, стоит ли фильтр по Boolean() того, но почему бы и нет.
#typescript #boolean #tool
🔥 Главная в России конференция про Kubernetes®
22 июня 2023 года состоится Kuber Conf — конференция для всех, кто работает с Kubernetes®. Вас ждёт 9 докладов, 12 спикеров, 180 минут техноконтента:
➡️ технические доклады, продуктовые обзоры, лучшие практики от разработчиков и экспертов по контейнерным технологиям;
➡️ создание сервисов и решение бизнес-задач с помощью Kubernetes в финтехе, e-commerce, HoReCa и не только;
➡️ неформальное общение с профессиональным сообществом, встреча старых друзей и новые знакомства.
Регистрируйтесь по ссылке, чтобы получить доступ к онлайн-трансляции Kuber Conf’23!
#инструмент дня
Итак, где-то с полгода назад я писал о правиле text-wrap: balance и инструментах, которыми такое поведение можно настроить. Что же это такое?
Думаю, лучше, чем на видеоиллюстрации, объяснить будет сложно. Просто... приятнее читать.
Так вот, почему вспомнил? Ну, для начала, свойство приземлилось в Chrome 114, о чём блог разработчиков Хрома не преминул упомянуть: https://developer.chrome.com/blog/css-text-wrap-balance/
Но упомянули-то аж в апреле, а пост-то почему щас только?
Так это, вышла версия 1.0 библиотеки React Wrap Balancer!
Ну и ожидаемо, теперь если браузер поддерживает нативную балансировку текста, библиотека её и использует (при паре условий, конечно, но всё же).
Всем баланс, котаны!
#css #balance #react #typography
#codepen дня
Как понять режимы смешивания (блендинга, mix-blend-mode) в CSS?
Можно, конечно, обмазаться математикой и сидеть дёргать ручки в DevTools, а можно открыть сегодняшний кодпен: https://codepen.io/jh3y/pen/OJXrVME
Для лучшего понимания происходящего слои можно вращать. Выбирайте разные режимы наложения, меняйте фоны — лучше не найти.
Если кому интересно, что это за интерфейс управления такой — это dat.GUI: https://github.com/dataarts/dat.gui
Описываете конфигурацию и переменные, которыми желаете управлять, загружаете их в dat — и получаете возможность менять их на лету. Очень популярная штука в разных демках, особенно в WebGL.
#mix #blend #css #бородач
Научитесь эффективно взаимодействовать с другими командами при разработке новых фич и создавать реально качественный technical design proposal на курсе System Design.
За 4 недели вы поймёте как собирать требования, оценивать нагрузку, выбирать подходящие СУБД, масштабировать системы и повышать их надёжность и отзывчивость, а также выделять и последовательно проектировать подсистемы для хранения данных, поиска и аналитики как своими силами, так и с помощью готовых продуктов.
Вы научитесь дизайнить сервис такси, приложение для знакомств и разные другие виды высоконагруженных систем, а также познакомитесь с типичной структурой дизайн-собеседований в Big Tech — всё под руководством Валерия Бабушкина, Vice President, Data Science в Blockchainꓸcom.
Присоединяйтесь!
#реклама
#такое дня
Меня одного задолбали недоделанные технологии?
Ну в самом деле, что толку, что web-платформа развивается семимильными шагами, если каждый шаг — в клоунских ботинках?
Щас поясню. Примеры будут очень простые, про скроллинг. Но показательные. Дальше предложите сами.
1. position: sticky
Мы его ждали много лет. С таблицами правило стало работать только после того, как в Chrome полностью движок таблиц переписали. А теперь... а теперь ещё несколько лет будем ждать, чтобы получить возможности навесить нужные стили на «прилипший» элемент. Слухи о псевдоклассе :sticked так и остались слухами.
Что мы делаем? Конечно же считаем скролл ручками!
2. element.scrollIntoView
Шикарная вещь! Просто гениальная по своей сути. Что может быть приятнее, чем просто указать, как именно нужно автоматически доскроллить до элемента и где остановиться. Вот только...
Вот только где offset, я спрашиваю? Почему нет такой простой вещи?
Но ведь есть scroll-margin-top, скажете вы...
Ага, вроде и есть. Но у меня нифига не вышло. А что если мне нужен разный в зависимости от ситуации? А если динамический? Что если у меня на одном варианте AB-теста есть sticky-заголовки, а в другом — нет?
Что мы делаем? А опять ручками:
const line = document.querySelector(`[data-id=${id}]`);
if (line) {
const p = line.getBoundingClientRect();
window.scrollTo(p.left, p.top + window.scrollY - 40);
}
Раздражает. Зачем таким вообще заниматься?
Ну выход на самом деле только один — участвовать в обсуждениях. Или заткнуться.
#css #whining #бородач
#инструмент дня
Понадобилось мне дать отделу маркетинга возможность удобно просмотреть и проанализировать некоторые внутренние JSON-файлы, используемые для доставки контента. Естественно, захотелось как-то облегчить всем жизнь и постараться доступно показать содержимое жисона. Простого форматтера было явно недостаточно.
Оказалось, изобретать ничего не нужно — уже есть https://jsonhero.io/
Сгруппирует по категориям, покажет связанное, отобразит картинку.
Удобно.
#json #viewer #бородач
#заметка дня
Очень много сказано на тему того, что использовать тип React.FC для функциональных компонентов React довольно неудобно, глупо и вообще странно: передача children была обязательной, нельзя было вернуть string, number, undefined (что поддерживается JSX так-то).
Самое странное, что он по-умолчанию был в create-react-app и вводил в ступор огромное количество разработчиков вне зависимости от их опыта: https://github.com/facebook/create-react-app/pull/8177
Начиная с TS 5.1 и React 18.1 использование React.FC безопасно и прозрачно, но рекомендованным способом пока, конечно, остаётся прямая типизация пропсов, смотрим PR выше.
В общем, don't overengineer it, котаны.
#react #fc #ts
#ссылка дня
Да-да, я знаю, знаю, что любить иконочные шрифты нынче не в моде, а в моде дико заморачиваться с SVG, символами...
Но вот типографика же не стоит на месте. Вариативные шрифты — уже реальность. Было бы глупо не применить их для иконок.
И таки да, встречайте, Material Symbols: https://material.io/blog/introducing-symbols
Вариативный иконочный шрифт от Google. Естественно, он есть на Google Fonts: https://fonts.google.com/icons
Естественно, вы можете скачать SVG и PNG.
Ну и куда же без плагина для Figma: https://www.figma.com/community/plugin/1088610476491668236/Material-Symbols, позволяющего настроить и экспортировать иконки как душе угодно.
Меня, правда, забавляет целый ползунок на fill, если вы понимаете, о чём я. Вообще, с ползунками на Google Fonts всё очень плохо... но речь не о них.
К слову, nice touch: там присутствуют специальные символы для iOS, они вариативности не подвластны. Забавный жест.
#fonts #icons #google #material #бородач
#codepen дня
А давайте, вдогонку к предыдущей новости о появлении popover, взглянем на такой вот шикарный эффект удаления диалога 🙂
Гори всё синим пламенем! Эх, жаль в своё время на проекте, где это было уместно, я не шибко много знал о шейдерах.
Не то, что я сейчас о них что-то знаю, но хотя бы и поддержки сильно больше.
Ах да, ссылка: https://codepen.io/ksenia-k/full/yLQLyZa
Там, кстати, и описание процесса приложено. Где-то на канале я выкладывал WebGL-демки, с красивым похожим шейдером огня, можно попробовать применить 🙂
Спасибо Ксении Кондрашёвой.
#webgl #shader
#совет дня
Буду краток.
Когда верстаете проект, расставляйте aria-label на интерактивных элементах сразу.
Хрен с ней, с доступностью. Просто потом не будете сидеть как я и заполнять action name для системы трекинга на каждый чих 😭
#бородач
#статья дня
Одно из самых интересных чтений на свете — это как принимались те или иные решения в уже готовом продукте.
Понятное дело, что новые проекты, т. н. greenfield, писать легко. Перед тобой чистый лист, гуляй не хочу, экспериментируй. Но потом...
Потом у твоего проекта появляются пользователи. И ладно если твои пользователи это просто посетители, а если твой проект — фреймворк или библиотека, а пользователи — разработчики, которые уже использовали твоё детище в своих продуктах?
Как убедить тех, кого убедить сложно, что были приняты поспешные решения, даже если они казались удобными? Как убедить людей в том, что им необходимо переписать свои продукты с учётом новых реалий?
И вот поэтому статьи вроде "Breaking React Query's API on purpose" — это настоящая золотая жила. Кто бы мог подумать, что такие простые вещи как события onSuccess и onError на самом деле могут приводить к проблемам и их придётся объявлять устаревшими?
Рекомендую не только пользователям React Query, если что.
#react #query #js
Верстаешь?
С 13 по 19 июня проводим бесплатный онлайн-интенсив по Frontend-разработке, где будем учить, как разрабатывать сайты и веб-приложения.
По словам прошлых участников тебя ждёт:
- «Очень долго искала толковый курс по веб-разработке, чтобы всё понятно и по полочкам!».
- «Это всего лишь бесплатный интенсив, а наш куратор нам усиленно помогала и проверяла домашки».
- «🔥за 7 дней поработали и с HTML, CSS, Angular, Git и не только».
- «На интенсиве наконец-то нашёл ответы и попробовал на практике зачем нужен Фреймворк и как с ним работать».
- «Понял, как работать с GitHub и выложил впервые свой проект на сервер и смог поделиться ссылкой на него, это очень круто!».
- «В айтилогии вы имеете невероятную возможность погрузиться в профессию фронтенд-разработчика без воды».
В общем, ты сверстаешь качественный сайт, который не стыдно добавить в портфолио, освоишь азы работы с фреймворком Angular и получишь море бесценного опыта в вёрстке сайтов.
👉 Участвуй бесплатно
#красивое дня
Если вам скажут, что разработка сайтов это не искусство — покажите этому... человеу вот такое: https://codesandbox.io/s/enter-portals-9m4tpc
Я уже минут двадцать просто залипаю.
А секрет-то "просто" в блендинге сцен... Даже документация есть: https://github.com/pmndrs/drei#meshportalmaterial
Вообще, обратите внимание на упомянутую библиотеку drei: это набор полезностей под react-three-fiber на которых можно собирать прекрасное.
#webgl
Чем платформа SberUnity полезна для стартапов
SberUnity — это единое онлайн-пространство, объединяющее стартапы, инвесторов и корпорации. Если вы фаундер, то сможете привлечь инвестиции, найти новых клиентов, а также запустить пилотный проект корпорацией.
Какие полезные опции есть на платформе?
— Напрямую откликайтесь на запросы от крупнейших российских и зарубежных компаний, а также предлагайте свои пилоты.
— Добавьте свой стартап в раздел «Импортозамещение», чтобы вас быстрее нашли корпорации, нуждающиеся в вашем решении.
— Размещайте информацию о собираемом или планируемом раунде. Она будет доступна 600+ инвесторам.
— Станьте частью стартап-сообщества: вам станут доступны встречи с экспертами рынка, питч-сессии, командные кемп-выезды и многое другое.
Регистрируйтесь на платформе.
Для стартапов функционал полностью бесплатный.
#реклама
#баг дня
Ух, как я люблю такие баги!
Какие — такие?
А такие, которые произошли из-за фич, создававшихся для чего-то хорошего, а теперь используемых чтобы за вами, вот да, тобой конкретно, шпионить!
Итак, встречайте: в Chromium-based браузерах неверно реализован document.fonts.check().
Этот метод предназначался для проверки доступности загружаемых шрифтов, чтобы можно было не опасаясь подменить ими встроенные.
Но Chrome и иже с ними проверяют этим методом наличие локальных шрифтов. То бишь, установленных у пользователя: https://bugs.chromium.org/p/chromium/issues/detail?id=1416842
Почему это плохо?
Да потому что этот метод активно используется для фингерпринтинга (снятия отпечатков) браузеров и, соответственно, пользователя!
Да, эта дыра лишь одна из многих, позволяющих снять уникальный хэш системы, но одной меньше — уже хорошо, согласитесь.
#chrome #bug
#фишка дня
Показать цвет белее белого? Легко!
На самом деле не белее, а ярче, но кого это волнует? Ну ладно, многих...
Так вот. Многим, если не всем, знаком волшебный термин HDR: High Dynamic Range (здесь ссылка на технологию для видео). В последние годы ей прожужжали уши, наверное, всем.
Суть её в том, что можно увеличивать яркость отдельных участков без увеличения яркости всего изображения. Но для этого, конечно, ваш дисплей должен поддерживать такую возможность.
Так вот, ближе к делу. Если правильно сформировать HDR-видео, например, QR-кода, то оно будет показано ярче остального экрана! Например, глядите сюда (точно — обладатели айфонов и недревних макбуков): https://notes.dt.in.th/HDRQRCode
Выкрутите яркость экрана пониже и увидите, как левый код ярче правого! Белее белого, буквально.
Вполне можно применять в билетных сервисах...
Ну и чуток технических подробностей и ещё одно демо: https://github.com/dtinth/superwhite
Такое вот милое прогрессивное улучшение (если, конечно, найти способ генерировать HDR-видео ffmpeg-ом)...
#hdr #video #ios #macos
Окунитесь в увлекательный мир веб-разработки с нашим бесплатным интенсивом «Дикая вёрстка»! Всего за 2 дня превратите ваши идеи в реальный сайт, получив уникальный опыт и навыки в области HTML-верстки.
Мы предоставим все необходимые инструменты: от подробных пошаговых инструкций до практических упражнений на тренажёрах для закрепления полученных знаний.
И в качестве приятного бонуса, после окончания интенсива вы получите тест для профориентации и полезные обучающие материалы.
Не упустите этот уникальный шанс – присоединяйтесь.
#инструмент дня
Разобраться в концепциях Git просто не только лишь всем. Кто-то схватывает на лету, кто-то продирается сквозь ветки и листья документации. Кто-то забивает на всё, использует UI любимой IDE и ничего сложнее git pull origin master не разруливает.
Но насколько проще было бы, если появился бы симулятор происходящего под капотом. И ведь такой есть!
И называется он git-sim, вот так вот буквально.
Нужно разрулить конфликтный cherry-pick? Слить несколько веток вместе? Посмотреть последствия reset, stash, rebase? Да запросто! Просто вместо git команда пишете git-sim команда и наслаждаетесь.
Ах да, ссылки на примеры от авторов (много видео и иллюстраций): https://initialcommit.com/tools/git-sim
И на GitHub проекта: https://github.com/initialcommit-com/git-sim
Очень уютная штука. Надо бы процесс релиза в нашей команде в нём визуализировать к грядущей презентации.
#git #sim #tool #бородач
#заметка дня
В чате вчера разразилась целая баталия по поводу того, можно ли вкладывать в кнопки aka button что-то помимо простой разметки для текста с иконкой.
Понятное дело, что история стара как мир: есть карточка товара, охота в неё упихнуть вагон и маленькую тележку информации и контента, попутно снабдив интерактивом и чтобы обязательно клик на любом месте карточки вёл на страницу товара или сразу в корзину запихивал. Ведь как его, это, кастомер энгейджмент! Или нет... я короче не умею в термины.
Так вот, семантически вкладывать div в a в 2023 году весьма верно. А вот вкладывать div в button — уже нет 🙂 Потому что button принимает только фразовый контент, коим div не является. Ссылки даны на кодпен, копируйте оттуда в валидатор и смотрите сами.
Да, можно спорить о нужности валидации, но зачем? Ведь существует достаточно элегантное решение проблемы, которое заодно уберет лишнюю вложенность и повысит доступность.
И решение это — растянуть псевдоэлемент, принадлежащий ссылке или кнопке, на весь контейнер: https://codepen.io/IhorPower/pen/YzRqzyL (пример от подписчика).
Чуть позже разберем бенефиты такого решения, а пока доброе утро, котаны :)
#css #trick #a11y
Считаешь, что бесплатные интенсивы и марафоны - не то, где можно получить ценные знания? Тогда брось себе вызов и попробуй пройти наш летний интенсив по JavaScript полностью.
Если хочешь в нашу крутую команду, то твой 1 шаг - регистрация по ссылке. Стань тем, кто уже зарабатывает применяя полученные знания на практике!
Регистрация тут: https://in.methed.ru/md/5a0419304b7b05f98714dc2899c0814d
#фишка дня
...для маководов.
Не знаю, насколько может быть полезно, но оказывается, у macOS есть встроенный разделительный элемент для дока. Добавить его очень просто, пишете в терминале:
defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="spacer-tile";}'; killall Dock
defaults write com.apple.dock persistent-apps -array-add '{"tile-type"="small-spacer-tile";}'; killall Dock
Если ты такой умный, то почему такой бедный?
Ты уже пробовал торговать на бирже самостоятельно и потерял часть или даже весь свой депозит. Теперь фондовый рынок кажется разводом и напрасным сливом денег.
Но почему тогда так много людей радуются даже кризисам на рынке и умудряются торговать в плюс?
Евгений Тарасов уже более 9 лет успешно торгует и живет на доход от трейдинга.
Хочешь так же ?
Начни с изучения гайда от Евгения и получи пошаговый план выхода на 5-10% к депозиту
#реклама
ЧЕ, АЙТИШНИК, ДА? КРАСАВЧИК!
Сделали для вас самую полезную подборку каналов по программированию. В ней собраны официальные русскоязычные каналы самых популярных языков. Там только топовая информация, которая потом появляется на платных курсах. Надо подписаться: @it
#реклама
#статья дня
В Chrome 114, вышедший вот буквально пару недель назад, приземлился крайне любопытный атрибут: popover. Что это такое? Давайте посмотрим.
Добавленный элементу атрибут popover превратит его в неблокирующий (об этом ниже) диалог, удобный для меню, выбора вариантов, уведомлений, или отображения вспомогательных элементов формы. Собственно, сразу пример кода: <button popovertarget="pop">Click me</button>получаем из коробки:
<div id="pop" popover>
<p>Pew-pew!<p>
</div>
Что мы
- Никакого теребоньканья скриптов
- Никаких игр в z-index: 10000: всплывашке будет выдан свой слой
- Клик вне элемента скроет его (нативный onClickOutside)
- Захват фокуса и esc для закрытия
В отличие от dialog, как я уже сказал выше, всплывашка не блокирует взаимодействие со страницей и дополнительного контроля со стороны JS API не предоставляет. Dialog сильно старее и довольно спорен в целом.
В общем, читаем блог разработчиков Chrome:
https://developer.chrome.com/en/blog/introducing-popover-api/
#css #html #popover
⚡️ CockroachDB vs YDB vs YugabyteDB
Нашли ультимативный гайд по базам данных на английском языке.
В статье 🇬🇧
• исследование БД на основе популярного бенчмарк-теста YCSB;
• «сравнение яблок и апельсинов» или небольшая ретроспектива в историю исследований баз данных SQL;
• проверка производительности БД на разных сценариях.
Есть ли одна лучшая СУБД SQL, узнайте по ссылке 😉
#инструмент дня
Про caniuse.com говорить никому уже не приходится, это база, которая должна появляться как только ты набрал "c" в адресной строке.
Но иногда кому-то из нас приходится верстать... письма. И вот тут начинается веселье.
Да, огромное число людей пользуется веб-почтой, но не менее большое — использует различные клиенты, от мобильных до корпоративных. Да и веб-почта зачастую урезает возможности в вёрстке.
Для таких случаев придуман https://www.caniemail.com/
Всё то же самое, что Can I Use", но про почту.
Больше никаких "а может?.." Определяете целевую аудиторию — и поехали верстать.
#email #css #html #feature #бородач
#новость дня
Давайте я быренько, чтобы никого не задерживать: нативный CSS-нестинг вчера приземлился в Firefox Nightly!
Пруф: https://bugzilla.mozilla.org/show_bug.cgi?id=1835066
Codepen для проверки вашего любимого браузера: https://codepen.io/bramus/full/oNdrypM
Caniuse: https://caniuse.com/?search=css%20nesting
Ну и PostCSS-плагин, который я совсем скоро подключу и избавлюсь от ненавистного мне Dart Sass: https://github.com/postcss/postcss-nested
Остаёмся на связи, котаны!
#css #nesting