11622
Авторский блог Senior JavaScript-разработчика из Хельсинки По рекламе: https://t.me/it_adv https://telega.in/channels/htmlshit/card?r=GLOiHluU Чат канала: https://t.me/htmlshitchat Автор: @bekharsky
🚀 Dockhost - современный хостинг для разработчиков приложений, ботов, mini apps и баз данных!
Мы переосмыслили подход к хостингу и создали облачную PaaS платформу на основе Docker-контейнеров, которая упрощает запуск и масштабирование приложений. Отлично подходит для разработчиков, владельцев пет проектов, фрилансеров, которые хотят быстро и просто запустить свой продукт, не задумываясь о настройке инфраструктуры.
На платформе удобный интерфейс для управления контейнерами, широкий набор метрик потребления ресурсов, высокий уровень безопасности и оплата по факту потребления, без фиксированных тарифов.
👨💻Бонусом - собственная консольная утилита Cli.
Помимо запуска готового образа Docker-контейнера из любого реестра, вы можете легко подключить к своему проекту в Dockhost любой репозиторий Git (GitHub, GitLub, и другие) с вашим кодом и настроить авто-деплой через Push (Push-to-Deploy).
👉 Перейти в Dockhost
Темой моих бакалаврской и магистерской работ было распознавание и рекомендация музыки, поэтому мне было особенно интересно заценить доклад Саввы Степурина, старшего рексис-разработчика в Яндекс Музыке.
Рексис это RecSys, Recommendation System.
Тема прям моё всё — как рекомендовать незнакомый контент. Все крупные рексисы с этим сталкиваются, и Савва на пальцах объяснил, как можно перейти от обычных фильтров к моделям отбора кандидатов и ранжирования.
В конце — приятный бонус: универсальные советы по улучшению рексисов. Например, оказалось, что для пользователей серендипность (случайное событие) — важная штука, так что незнакомый контент точно стоит давать с повышенным весом.
Вот еще несколько докладов, которые точно стоит глянуть:
⚙️ Как обучить LLM работать с кодом. Руководитель ML-лаборатории в Yandex Platform Engineering поделился интересными деталями, почему команда решила предсказывать стейтменты и как это прокачало онлайн-метрики.
⚙️ Виртуальный рассказчик в Яндекс Книгах. Нейросеть для синтеза аудиокниг. Интересно узнать, как внедряли длинный контекст в low-resource real-time модель, и каким боком там оказались диффузионные модели.
И это еще не все — были доклады про бенчмаркинг, синтетические данные, оптимизацию RAG-систем, VLM. Обязательно к просмотру!
#заметка дня
Вчера в комментариях к посту возник логичный вопрос: "Почему фишкой дня назначена буквально строка из документации?"
Спрашивали — отвечаем.
Формат Telegram плохо подходит для лонгридов. Иногда это даже немного удручает: переходов по ссылкам на, на мой взгляд, интересные примеры весьма немного.
Некоторые люди даже отписываются, если видят, что пост в телеге — лишь тизер.
Ну, шутка ли, у поста с каким-нибудь #codepen дня может набраться 3-4 тысячи просмотров за всё время, а переходов по ссылке — ну сотня. Если повезёт. Впрочем, эта ситуация касается не только Telegram и не только меня, тут удивления нет.
Наибольшее число переходов набирают красивые картинки градиентов. А вы говорите, документация...
Теперь к фишкам дня. Мне бы хотелось сказать что-то пафосное вроде: «Мусор одного человека — сокровище другого», — вот только короткие сниппеты кода совсем не мусор. И я за много лет опыта повидал их достаточное количество.
И иногда сидишь и думаешь: «Так, наверное, все уже это знают».
Нет, не все.
И да, вы не поверите, но абсолютно все фишки вытекают из документаций и спецификаций различного рода. И авторы, более упорные, чем я, часто весь контент строят на вытаскивании определений из спецификаций и закидывания багов в браузеры, если что-то работает не так.
Основная фишка фишек — быть bite sized. На один укус. Чтобы никуда не ходить.
Но обратная связь — очень необходима. Реакции ли, комментарии ли — не стесняйтесь.
Раскачаем этот чат, котаны 🙂
Онлайн-программа магистратуры «Веб-разработчик» от НИТУ МИСИС и Яндекс Практикума – уникальная возможность за два года стать уверенным мидл разработчиком и получить диплом магистра государственного образца.
Преимущества программы:
✔️ освоите HTML, CSS, JavaScript, Django, основы дизайна и управления командой
✔️ изучите все этапы разработки продукта: от верстки дизайн-макета до настройки серверной части
✔️ сможете совмещать учебу с работой: все занятия проходят онлайн
✔️ сможете пользоваться инфраструктурой вуза, оформить документы, как студент очной формы обучения
Если вы уже студент магистратуры, но хотите учиться онлайн со всеми преимуществами очного образования – приходите к нам. Заполните небольшую форму и получите бесплатный гайд по переводу в онлайн-магистратуру.
Остались вопросы по поступлению? Ждем вас в Телеграм-канале "Онлайн-обучение | МИСИС".
Много интересного о программе можно найти на сайте партнера Яндекс Практикума.
#фишка дня
Итак, встала задача расширить элемент при наведении. Да ещё с каким-нибудь пружинящим дефектом эффектом. Что делать?
На самом деле, элемент мы физически не расширяем. Такова задача.
Один из первых вариантов, помимо манипуляции непосредственно размерами (что довольно тяжело при отрисовке) — это 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 #бородач
#видео дня
Это очень хорошо. Кто узнал себя? 🙋♂️
🔥 Weekend Offer Backend в Яндекс 26–27 октября
Устройтесь backend-разработчиком в Яндекс онлайн за одни выходные.
↔️ К участию приглашаем разработчиков на C++, Python, Go, Java или Kotlin, с опытом коммерческой разработки от трёх лет, которые готовы работать в офисном или гибридном режиме на территории России или Республики Беларусь.
🛐План простой: зарегистрируйтесь и до 23 октября решите пару задачек в Контесте, 26 октября пройдите два технических собеседования, а 27 октября получите офер.
🔛В Weekend Offer Backend участвуют разные сервисы: Финтех, HR-Tech, Образование, МВА, Биллинг, Геосервисы, Реклама, Поисковые сценарии. Чтобы заранее подумать, с кем вам хочется пообщаться 17 октября мы проведем онлайн-встречу в зуме, где команды расскажут о себе и задачах.
🆖 Узнать подробности и принять участие можно здесь.
#codepen дня
Ну что, кажется, настало то время, когда для стилизации радиокнопок и чекбоксов не нужно больше изгаляться с input:checked+i. Это освобождает мозг и руки для более приятных вещей.
Итак, смотрим на пример от Джона Кантнера: https://codepen.io/alinaki/pen/ExMXbqz
1. Для начала, обнуляем все браузерные стили и предположения браузера об внешнем виде радиокнопок вообще через appearance: none.
2. Я вам этого не говорил, но, технически, уже давно можно на поля ввода накладывать псевдоэлементы. Но не на select. Я всё хочу написать большой пост про реализацию select, пока вот так.
Благодаря этой возможности, собственно, можно стилизовать чекбокс как душе угодно: ::before, ::after, :checked::before, :checked::after... В целом, лично я бы обошёлся радиальным градиентом и одним псевдоэлементом.
3. Освободившиеся ресурсы мозга и тот факт, что теперь все элементы красиво вложены в label (как минимум, не нужны for и id), можно отправить на реализацию разных эффектов.
Например, проверить, есть ли лейбл с выделенным чекбоксом и подвинуть к нему рамку:
label:nth-of-type(2):has(input[type="radio"]:checked) ~ .selection {
transform: translateY(100%);
}
#видео дня
Итак, системы сборки проектов. Бандлеры, по простому. Старые и современные. От Webpack до OXC.
Зачем были нужны и как появились. Как развивались и при чём тут Rust. Почему oxc быстрее swc в пять раз, но это не всегда имеет значение.
На всё это отвечает Девон Говетт, создатель Parcel.js и разработчик проектов React Aria и React Spectrum в Adobe: https://www.youtube.com/watch?v=JUS6EPMbk0U&feature=youtu.be
Очень погружающая лекция, затрагивающая даже архитектуру проектов, чтобы было что сравнивать.
Если вы, котаны, запутались в JS-тулинге — вот самое оно.
#js #bundler #swc #webpack
Пост часа через четыре. Всё, не могу говорить, пока! 😘
Читать полностью…
#инструмент дня
Так вышло, что в своей карьере я умудрился поработать в компании, которая хотела сделать стримы на веб-сайте своей основной фишкой. С тех пор HLS, RTP и nginx-rtmp-plugin были моими друзьями.
Но возможности по микшированию видео, звука и изображений прямо на веб-странице тогда были весьма ограничены или просто сложны. Работали через OBS, хотя даже он был в весьма зачаточном состоянии.
Но сегодня я наткнулся на нечто прекрасное: https://compositor.live/
Это набор React-компонентов и медиасервер, который позволяет стримить видео и микшировать несколько потоков, управляя ими как обычными компонентами и элементами страницы!
Можно построить нечто аналогичное Google Meet за считанные дни.
Вырезать зелёный экран, добавить текст, поменять видео местами, наложить блупер — всё на месте. Напоминает react-three-fiber по своей сути.
#react #video #mixer #media #stream
#инструмент дня
Не так давно команда разработчиков React выкатила статью с таким очевидным названием You Might Not Need an Effect. Я её обозревал тут: /channel/htmlshit/2548
Если кто не читал, очень рекомендую или её или хотя бы мой обзор.
Так вот, в ESLint присутствует правило, которое буквально повторяет статью: no-direct-set-state-in-use-effect.
Как можно догадаться, правило это явно запрещает прямой вызов setState в useEffect. Ну просто потому что в большинстве случаев это оверинжиниринг.
Как всегда, присутствуют примеры кода, которые пройдут и не пройдут условия. Может, кому-то так будет понятнее, нежели читать всю статью целиком :)
А, ну из самых популярных косяков, это использовать React/TanStack Query, получить данные, повесить на эти данные эффект и вызвать setData 🫠
Не надо так, в общем.
#react #useeffect #eslint
Привет! Если ты амбициозный frontend developer, который неравнодушен к анимациям и эстетическому дизайну, умеешь в React — эта вакансия для тебя!
Нам нужен специалист, который будет работать над интересными креативными проектами, расти и развиваться, помогать всей команде добиваться новых выдающихся результатов! Присылай резюме и примеры работ (желательно сайты с анимациями) на почту hr@chipsa.ru или в телегу @chipsahr и получи возможность попасть к нам в команду!
В каком диапазон по з/п ищем: 100-150К.
Полный текст вакансии тут: http://chipsa.ru/career/frontend
#заметка дня
Не так давно я коротко обозревал браузер Ladybird, написанный с нуля и представляющий собой интересный феномен one-man band.
На самом деле, новых браузеров больше одного. Но не сильно :)
Например, Flow, разработчики которого случайно сделали браузер, пока делали демо-приложения под умные телевизоры. Просто в какой-то момент им потребовался быстрый и простой парсер SVG. Кстати, доступны публичные сборки, но только для Raspberry Pi. Разработчики пишут коммерческий продукт и пытаются избежать лишних сравнений.
Так вот, есть ещё один. Servo. Если у вас сейчас на подкорке памяти что-то зашевелилось, вы правы: судьба Servo плотно связана с браузером Firefox.
Много лет назад казалось, что весь Firefox перепишут на тогда только зарождавшийся язык Rust, который компания Mozilla и создала. Именно такие вайбы исходили от их тогдашнего CEO — Брэндана Айка. Да-да, создателя JavaScript. Но речь не о нём.
В итоге, что же произошло? Ведь Firefox так и не переписан на Rust целиком. Проект провален?
Вовсе нет!
Хотя кажется, что Mozilla отказалась от Servo, продолжив с Gecko, это не совсем так. Полная замена никогда не была целью.
Создать браузер, полностью совместимый со всеми стандартами и особенностями веб-сайтов (прошлого, настоящего и будущего), почти невозможно. Google не начинала Chrome с нуля, а фактически сделала форк открытой части Safari — WebKit. А тот в свою очередь — форк движка KHTML.
Microsoft потратила более миллиарда долларов на создание Edge и допиливание Internet Explorer, но в итоге сдалась и использует движок Blink, из Chrome.
По факту сейчас существует только три крупных независимых движка: Webkit (Apple), Blink (Google) и Gecko (Mozilla). Запустить новый проект с нуля — слишком дорого для некоммерческой организации, такой как Mozilla.
Servo стал полигоном для тестирования языка программирования Rust. Когда проект начинался, Rust был молод, и разработка Servo помогла проверить его возможности.
В итоге Rust стал важной частью экосистемы Mozilla и активно используется в её кодовой базе. Он помог упростить и обезопасить важные части Gecko, сделав их доступнее для сторонних разработчиков.
Тут стоит напомнить, что история Firefox своими корнями уходит в Netscape, а это уже что-то из середины девяностых.
Так что же конкретно в Firefox из Servo?
Движок CSS — Stylo, поддержка протокола HTTP/3 тоже стала возможной лишь с интеграцией сетевого слоя Neqo (название созвучно с Necko, а Necko — это Network Gecko).
А теперь то, ради чего писалась эта длинная заметка. Сам Servo никуда не делся и также развивается как самостоятельный проект! Вот, репозиторий более чем живой: https://github.com/servo/servo
Как и сайт: https://servo.org/
Более того, он прекрасно собирается прямо из транка репозитория! На иллюстрации к посту — браузер, собранный на моей машине. Собрался вообще без каких-либо проблем.
Работает, правда, довольно медленно в смысле отрисовки: пока что никакого GPU-ускорения нет, но это не в приоритете проекта. Ladybird в этом отношении позволяет себе сильно больше вольностей. Да и поддержка JavaScript в зачаточном состоянии.
Но приятно видеть, что Servo никуда не делся и когда-нибудь мы получим совершенно новый продукт.
#browser #history
#codepen дня
Как сделать элементы интерфейса... зернистыми? Напоминающими шершавую структуру, например, пластика? Или плёнки...
Для достижения эффекта можно воспользоваться SVG-фильтром! Например, от Аны Тюдор: https://codepen.io/thebabydino/pen/MWBNrZq
К сожалению, на Safari съехали буквы, но сути дела не меняет :)
#svg #grainy
#заметка дня
Итак, есть у жизни в Финляндии один нюанс.
Фильмы не дублируются, а идут в оригинале. Японский ли он, французский ли, немецкий, американский — звук в оригинале, и два набора субтитров, шведские и финские.
Дублируются же только мультики и фильмы, рассчитанные на аудиторию до 12 лет. И дублируются безальтернативно, субтитры не прилагаются.
И вот ты захотел посмотреть в кино «Дикого робота», но не знаешь финского.
Да-да, после пяти лет проживания я всё ещё не готов.
Что же делать?
Готовить своё веб-приложение для просмотра и синхронизации субтитров, конечно же!
На иллюстрациях — скриншоты процесса создания и результат :)
Неплохо для сорока минут общения с ChatGPT, не правда ли? :)
Репозиторий: https://github.com/bekharsky/subtitles
Демо: https://bekharsky.github.io/subtitles
Естественно, в ходе эксплуатации выяснились некоторые проблемы, и начать, как минимум, надо с более простой синхронизации и тёмной темы.
Но начало положено! Потрясающее ощущение, когда от идеи до рабочего прототипа проходит полчаса.
#ai #subtitles #life #app
#баг дня
Наслаждаетесь экраном MacBook Pro или радуетесь новому wide gamut дисплею от, например, Dell?
Не спешите радоваться, Chome и тут нас подставил!
Обратите внимание на иллюстрацию. На ней — не продублированный текст, а просто пропущенный через SVG-фильтр, который фильтрует цвета и сдвигает контент через матрицу преобразований: https://codepen.io/thebabydino/pen/RwmPZVR
Автор этой прелести — Ана Тюдор (ну кто же ещё, больше таких крутых специалистов по фильтрам просто нет).
Так вот, есть маленькая проблема. На дисплеях с широким покрытием цветового поля Chrome находит зелёный цвет в красном и голубом. Где-то просчитались :) Из-за чего в фильтрах появляются серые полосы.
На Firefox и Safari таких проблем нет.
Чтобы проверить свой дисплей, можно пройти сюда: https://www.wide-gamut.com/test
Чтобы проверить баг, сюда: https://codepen.io/thebabydino/pen/vYqMvzv (должно быть только три чёрные полосы, без серых).
И вот сегодня утром Ана отправила баг в Chromium: https://issues.chromium.org/u/1/issues/373410239?pli=1
Если у вас оно повторяется, напишите, пожалуйста, подробности о своей платформе на трекере 🥺
Новые возможности хардвари — это, конечно, хорошо. Но лучше бы без багов, да.
#color #bug
#фишка дня от Кори Хауса
Если для получения значения useState по-умолчанию требуется вызвать функцию, то стоит просто дать ссылку на неё, без вызова.
Почему нельзя просто вызвать? Очевидно, потому что функция будет исполняться на каждый ререндер, что не совсем то, что нам нужно.
Да, естественно, это есть в документации: https://react.dev/reference/react/useState#avoiding-recreating-the-initial-state
Вот только стоит запомнить, что в режиме разработчика, aka StrictMode, инициализаторы будут вызваны дважды, потому что функция-инициализатор должна быть чистой (возвращать одно и то же значение для идентичных аргументов). И React таким способом хочет нас предостеречь.
#react #useState
#такое дня
Ну что же, я так долго на одном месте в жизни не работал!
Пять лет в Supermetrics. От сеньора через тимлида, в техлиды.
В компании забавные традиции в честь достижения пятилетия: кастомный мерч — black hoodie — и участие в Black Hoodie Club, когда все пенсионеры компании собираются вместе и обсуждают, как мы дошли до жизни такой.
Конечно, я благодарен Supermetrics. Всё, что у меня есть в эмиграции, есть благодаря им :)
Приходил я в компанию на 50 человек, а теперь — 350.
Только малость поднадоело работать в одном направлении, что немного сбивает привкус празднования, но это преодолимо.
#anniversary #superversary
#статья дня
Полку шикарных визуализаторов прибыло!
Итак, помните мои мучения с игрой по кривым Безье? Или обучающий инструмент по SVG?
Так вот, теперь есть просто шикарное интерактивное руководство от Richard Ekwonye (я даже пытаться это транслитерировать не буду)! Вы только посмотрите, какава красата: https://blog.richardekwonye.com/bezier-curves
Каждый элемент на странице интерактивен, за точки можно подёргать, на элементы можно понажимать. Потрясающий уровень проработки, объяснены и основные принципы, и применение их в SVG.
В общем, если не почитать — то хоть зайдите подёргать за рычажки 🙂
#bezier #svg #бородач
#статья дня
Я давно такого удовольствия не получал. Технических знаний много не требуется, но при этом погружение в кишки браузеров и формат GIF с головой.
Это я об этом: https://www.biphelps.com/blog/The-Fastest-GIF-Does-Not-Exist
Правда, буду честен, я читал в переводе на хабре: https://habr.com/ru/post/676480/
Потому что циановый фон блога, где размещён оригинал, это какой-то ад… но сути дела не меняет.
Итак, в чём же история? История в том, что все браузеры и все программы просмотра GIF на свете совершенно неверно обрабатывают задержку между кадрами. Да так, что даже лишают нас многих возможностей формата.
Точнее, на всё есть свои причины. Исторические в основном. Chrome кивает на Firefox, тот на IE, тот на Netscape… беда.
И всё это снабжено, собственно, примерами кода. Прям как в двигателе покопался.
#gif #img #web #бородач
#такое дня
Пока вы тут спали, там произошло прекрасное.
3 октября Королевство Великобритания передало часть своих территорий в Индийском Океане (British Indian Ocean Territory) Маврикию.
Почему нам так важно?
Потому что домен io относился, внезапно, к British Indian Ocean Territory!
Да-да, все эти прекрасные домены github.io, itch.io, google.io и так далее — они не про Input/Output :)
И раз исчезает определение территории, то исчезнет и код территории (код страны в стандарте ISO, IO).
Исчезнет бюрократический код территории — исчезнет основание держать его в IANA (The Internet Assigned Numbers Authority, организация, отвечающая за домены верхнего уровня).
А это значит, прекратится регистрация новых доменов, а существующие нужно будет разделегировать.
Событие не настолько редкое, как может показаться. Всё дело в том, что как только появилась сама идея верхних доменов, распался СССР, и основание для зоны su было передано России. Ну и заодно создали ещё 15 других.
Тут авторы статьи, на которую я ссылаюсь, нагнали жути и бреда, но оставим это на их совести.
Что нам надо знать дальше, что распалась Югославия, что не так давно Черногория объявила независимость от Сербии, и так далее и тому подобное. И каждой же стране хочется иметь свой домен верхнего уровня.
У Черногории, кстати, тоже шикарный домен же: me :)
Пока не очень понятно, порешают ли деньги, которые вертятся вокруг зоны io, но наблюдать за процессом будет интересно.
Хотя, думаю, естественно порешают :)
#history #io #domains
Для разработчиков смена обстановки — это прям суперважно. Кодинг и бесконечные баг-репорты частенько превращаются в рутину. Здесь на помощь приходят коворкинги, и классно, если помимо комфортных мест и быстрого интернета, там еще есть возможность и отдохнуть. Например, недавно закрылось рабочее пространство Яндекса на крыше музея "Гараж". На 4 недели коворкинг как раз стал той локацией, где каждый желающий мог немного перезагрузиться.
Во-первых, здесь можно было не только работать, но и посещать интересные ивенты на темы искусства и технологий. Весь сентябрь здесь проходили кинопоказы, паблик-токи и диджей-сеты. А еще состоялся специальный вечер для разработчиков, где сотрудники компании шутили про работу и жизнь. Во-вторых, все желающие могли познакомиться с вайбом компании, где можно отдыхать на крышах и играть с коллегами в настолки.
Яндекс уже не в первый раз открывает подобные пространства: первый коворкинг работал зимой в горах Сочи. Поэтому ждем, что они придумают в будущем.
#заметка дня
В Твиттере набирает обороты термин anti-under-engineering.
Ну то есть вы понял, да? Понятие оver-engineering известно давно и всем: как сделать простые вещи максимально и не к месту сложно.
Но anti-under-engineering он немного о другом. Он о том, как не сделать слишком просто. Как не подложить себе свинью в будущем, дорабатывая систему до постоянно меняющихся бизнес-требований. Как обезопасить себя от глупых и недальновидных решений. Как не писать части систем дважды.
Вот вы знали, например, что Codepen.io целиком был построен вокруг и хранил все свои данные, включая файлы, в PostgreSQL базе данных? А ведь могли бы с самого начала попытаться сделать потрясающе сложную систему хранения стилей, скриптов, картинок... и никогда ее не закончить.
Одной из техник в этом понятии является отказ от булевых флагов в пользу временных меток, timestamp.
Например:
❌ emailVerified
✅ emailVerifiedAt
❌ isDeleted
✅ deletedAt
То есть ты вместо логического true или false записываешь или null или timestamp. Дату и время, если коротко.
И действительно, сразу больше информации без потери сути. Техника эта хорошо описана в гайдах по языку ReasonML и называется Boolean blindness: https://github.com/leostera/reason-design-patterns/blob/master/patterns/boolean-blindness.md
Там очень много подобного, даже если сам язык и не используете.
Примером такой техники в верстке я могу назвать префиксы CSS-классов, если вы, конечно, все ещё их используете. Ну и неймспейсы вообще.
Какие будут ваши примеры? :)
#видео дня
Где-то с 2012 года я работал на диджитал-агентства. Если кто не в курсе, диджитал агентства — они про рекламу в интернете. Про сайты, лендинги, рекламные кампании — вот это вот всё.
Если ты работаешь верстальщиком, начинающим или уже продвинутым, то, чаще всего, работа на подобные агенства, по подряду или напрямую, это твой единственный шанс проявить себя и сделать что-то действительно интересное.
Да-да Awwwards — они тоже про это самое и из того же и выросли.
Так вот, на вопросы:
— как при знакомстве с макетом оценить его реализацию;
— какие могут возникнуть сложности, кроме письма от Муфалды Хмелкирк, и как с ними справиться;
— как эффективно строить общение между дизайнерами и разработчиками.
Отвечает доклад моего товарища Романа Баранова «Дизайн глазами креативного разработчика».
Ссылка на посмотреть:
https://www.youtube.com/watch?v=j5YWb8SPR94
Делитесь своим опытом вёрстки чего-то необычного.
#video #design #markup
🙂 Как эффективно и безболезненно внедрить DevSecOps?
Positive Technologies выпустили в помощь общедоступную методологию внедрения практик безопасной разработки — AppSec Table Top.
📖 Внутри — набор принципов и подходов, которые помогут выстроить AppSec-процессы с учетом интересов бизнеса, требований регуляторов и потребностей команд.
В методологии учтена передовая экспертиза Positive Technologies в области application security, а также лучшие российские практики и зарубежные наработки.
Скачивайте гайдлайн на сайте, а дальше... вы будете знать, что делать.
#фишка дня от Гарри Робертса aka csswizardry.com
Когда-то очень давно поднялся вопрос красивого обтекания картинок. И появилась такая вещь: shape-outside.
Естественно, IE эту штуку не поддерживал вообще никогда, да и в целом современное направление фронтенда больше идёт в сторону приложений и блочной структуры, нежели документов с иллюстрациями.
Тем не менее, иногда надо. И поэтому, спешу напомнить: shape-outside нынче очень хорошо поддерживается и если вам нужно оформлять тексты, книги и статьи — самое время!
Если коротко, shape-outside позволяет описать контуры объекта, чтобы текст обтекал его именно по этим контурам. Более того, браузерам не нужен контур, они могут определить его самостоятельно по прозрачным областям PNG!
Вот только в Firefox требуется насильный репейнт... будем думать, как победить. А Safari чуть иначе определяет форму по альфа-каналу, нежели Chrome.
Upd. Важное дополнение! Чтобы правило shape-outside работало адекватно, не прячьте изображения в блоки; Firefox сходит с ума.
Ну и кодпен, конечно же: https://codepen.io/alinaki/pen/WNLVGae
Важный момент, это правило shape-margin, без него текст начинает прилипать к объекту.
Ну а статья, откуда взята фишка, вот: https://csswizardry.com/2023/07/the-http1liness-of-http2/
Весьма интересный обзор проблем протокола HTTP/2, если что.
#css #shape #img #бородач
#фишка дня
А вы знали, что background вполне можно наследовать через значение inherit?
А ведь это позволяет с лёгкостью имитировать эффект подсветки Ambilight!
Демо: https://codepen.io/alinaki/pen/PoMZNBp
А если есть необходимость сделать то же самое, но на img, можно воспользоваться SVG-фильтром от Аны Тюдор: https://codepen.io/thebabydino/pen/OJYwgpe
У неё, как всегда, с усложнением — зернистостью. Но это настраивается.
#svg #blur #ambilight
Frontend теперь в телеграм!
Собрали крупные русскоязычные каналы, где вы найдете всю информацию о последних трендах и лучших практиках:
Логово Верстальщика — научит верстать продающие сайты.
Node.JS — поможет узнать все тонкости и секреты JavaScript и его фреймворков.
Frontender's notes — советы и полезные приемы для каждого разработчика.
#ссылка дня
Олды тут?
Когда я начал официальную рабочую карьеру как верстальщик, в 2006 году, не было в интернете ресурса круче по CSS чем http://cssplay.co.uk/
И что-то мне подсказывает, что и нет.
Автору уже тогда было под 60, сейчас 75, но он фигачил и фигачит потрясающе сложные и при этом простые для понимания примеры вёрстки.
В 2009 году, например, в моде были выпадающие мега-меню, у него десятки их примеров. Естественно, без хаков для IE6 тогда не обходилось вообще ничего. Before, after? Забудьте. Flex? Забудьте. Float во все поля.
Коллекция меню поражает воображение. И до сих пор обновляется!
Раскладки на любой вкус и браузер. Всё категоризировано. Тоже обновляется!
Ну и он один из первопроходцев игр на CSS: https://cssplay.co.uk/menu/cssplay-connect-four-game.html
Да, без JavaScript, вся логика — HTML, CSS и ваши клики мышкой или ввод с клавиатуры. Расскажите мне теперь, что вёрстка — не программирование, вперёд.
В общем, без тени сомнения, Стюарт когда-то буквально стартанул мою карьеру и поддерживает веру в выбранное направление.
Не старейте, котаны.
#бородач