14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#баг дня
Одна из моих любимых фишек инструментов разработчика Google Chrome (aka девтулзов) — это возможность сделать скриншот ноды.
Нужен длинный скриншот страницы? Бахаешь на body или html и сидишь довольный.
Нужен лишь кусочек? Не вопрос, выдели нужную ноду мышкой и скриншоть себе на здоровье.
Но не обошлось без проблем. Ну честное слово, вот же вся страница, на экране. Бери да превращай в картинку. Нет...
Если в вашей ноде есть картинки, добавленные через тег img с атрибутом decoding="async" — они потеряются :(
Вот так вот неожиданно. Видимо кто-то где-то промис не разресолвил :)
Решается проблема удалением атрибута, прямо в девтулзах, и повторным скриншотом. Иногда достаточно и просто убедиться, что все картинки загружены — я пока паттерна не понял.
Но неприятный осадок всё-таки остался.
Сейчас ищу формальное описание бага в багтрекере. Если не найду — придётся заводить.
Демо: https://10web.io/blog/how-to-create-a-blog-on-wordpress/
Просто попробуйте сделать скриншот body, не скролля заранее.
Проверено на Chrome 128.0.6613.120.
В итоге, часть картинок может появиться, а часть — нет.
Вообще, я откровенно не люблю ленивую загрузку картинок и контента. Да, помогает на медленном интернете, но абсолютно мерзко и неудобно на нестабильном соединении. Например, в поезде.
#chrome #bug #async
#фишка дня
Элемент fieldset — штука со сложной судьбой. Вас никогда не удивляло, что тег, предназначенный, казалось бы, для группировки элементов — никогда для этого не используется? Почему?
Ну вот, например, Bootstrap 5: https://getbootstrap.com/docs/5.3/forms/input-group/
Там div, не fieldset.
Всё потому, что до недавнего времени комбинация fieldset+legend отрисовывалась виджетами ОС. Как, например, те же select и button. И даже flex-модель в них не работала правильно:
Баг Chrome (исправлено в 86)
Баг Firefox (исправлено в 46)
К счастью, это изменилось и использовать fieldset можно ровно так же как и другие элементы.
Тем более, что никто не отменял его одной очень интересной фишки: атрибут disabled будет отнаследован всеми вложенными элементами!
Вот так: https://codepen.io/alinaki/pen/NWLOPqy
Где это может пригодиться?
Очевидно, если есть группа кнопок для отправки формы, а обычно это submit+reset, но может быть и несколько submit-ов на разные адреса, можно не отключать их по одной, а просто положить в fieldset и отключить разом.
Ну или всю форму, при желании.
P. S. disabled дело не ограничивается, invalid тоже работает, введите что-нибудь в текстовое поле: https://codepen.io/alinaki/pen/VwGELwr
#fieldset #disabled #бородач
#игра дня
Я нечасто делюсь играми, в которых не предполагается написать код или стили, но эта — довольна забавная.
Особенно в свете последних событий на работе, когда команды объединили и поделили.
Итак, тренажёр менеджера проектов!
http://thatpmgame.com/
Визуально — диаграмма Ганта. Раунды короткие, несколько минут. Цель — уложиться в сроки и бюджет, располагая целым спектром сотрудников.
От ленивых до очень ленивых.
Назначаешь людей на задачи, кто-то подороже, кто-то — побыстрее. И поехали. В любой момент игру можно поставить на паузу и перетасовать людей и задачи.
Забавно, что персы там могут выгорать, если им не хватает работы. Скучают!
Да, во многих конторах прожект-менеджер — это, скорее, переходящий титул, нежели выделенная профессия, поэтому в роли может оказаться кто угодно.
Ну, кто закончит в зелёной зоне? :)
#pm #project #planning
При создании продукта разработчикам часто приходится выполнять непрофильные задачи. К примеру, разрабатывать и настраивать сервисы для нотификаций: уведомления об изменении статуса заказа, о входе в аккаунт и многое другое.
Чтобы разработчикам не приходилось делать это самостоятельно, Yandex Cloud предоставляет готовые решения: Yandex Cloud Postbox — для отправки email-сообщений и Yandex Cloud Notification Service — для мобильных push-уведомлений.
В карточках рассказываем почему стоит воспользоваться готовым решением 👉
#инструмент дня
Вторая альтернатива (поверьте, ещё год назад их было ну очень много) — https://spaceholder.cc/
Вставляет фотографии с телескопа Хаббл!
Пробуем, ставим пальцы.
#инструмент дня
Когда-то очень давно, когда интернет был меньше, можно было взять любую картинку и вставить её адрес в свой проект.
Потом всё стало немного сложнее.
Особенно непросто стало проектам с примерами. Хочешь ты показать людям какую-нибудь фишку вёрстки картинок, или просто разнообразить серые квадраты, а картинки-то брать негде. Тут на помощь пришёл сервис Unsplash Source.
Он буквально выдавал рандомные картинки по некому адресу. Иногда — тематические. Но с 2021 года сервис был заморожен для новых пользователей, а не так давно — официально закрыт.
Но что же делать, не ставить же скучные плейсхолдеры?
И тут нам поможет https://picsum.photos/
Всё очень просто: идём в их галерею картинок и берём ссылку на нужный плейсхолдер. Естественно, для честного использования.
Как-то так: https://picsum.photos/id/237/200/300
Ну или рандомную нужного размера: https://picsum.photos/seed/picsum/200/300
А ещё картинку можно на лету заблюрить! Вот так: https://picsum.photos/200/300/?blur
Или даже перевести в оттенки серого. Или в webp забрать. Есть даже API по параметрам картинок, всё для тренировки.
Удобно!
P. S. есть вероятность, что сервис заблокирован в РФ. Найду что-нибудь похожее.
Зарегистрируйтесь на открытый урок "Мониторинг распределенных систем" и получите список вопросов на собеседовании SRE-специалиста от Джуна до Сеньора!
В результате вебинара Вы узнаете:
✔️ Зачем нужен мониторинг в распределенных системах и в каких случаях он критичен.
✔️ Как правильно ставить задачи для мониторинга, чтобы получать полезные и точные данные.
✔️ Методы мониторинга черного и белого ящика: их принципы, применения и отличия.
Сам курс «SRE практики и инструменты» стартует 25 сентября. По данным hh средний уровень зарплат SRE-Engineer в Москве начинается от 150 000 руб/мес.
Регистрируйтесь и забирайте бонус в телеграм: https://clck.ru/3Ctc8G
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.
#заметка дня
Представим, что вам нужно акцентировать внимание на элементе. Элементе формы, скажем. Например, вывести его в область зрения пользователя. Какие есть варианты?
Очевидно, focus. Ведь для этого и предназначено. Вот только focus ведёт себя непредсказуемо в разных браузерах: в Chrome и Safari элемент выводится на центр экрана, а Firefox — до минимально необходимого уровня, суть — вниз. А ещё всё это происходит резко.
Решение проблемы — передача запрета скролла в метод focus и вызов scrollIntoView вместо этого.
Таким образом можно программно доскроллить до любого элемента, не только формы. И не только в центр экрана, но и по заданному отступу.
А ещё можно передать параметр, отвечающий за вид прокрутки: behavior. Итого, behavior: smooth подвинет элемент к нам плавно. Правда, для Safari и IE придётся подключать полифилл (см. комментарий в примере).
Итого, получаем: https://codepen.io/alinaki/pen/mdPwdxy
Мой пример — дополненный оригинальный от Smashing Magazine: https://twitter.com/smashingmag/status/1299325085111783425
Ещё близкое к реальности применение — скролл по секциям: https://codepen.io/aaroniker/pen/WNNLRYb
#css #scroll #scrollintoview #js #focus #бородач
#крик дня
Семантическое версионирование? А нахуя?
Видимо, так подумали авторы популярного GitHub-экшена upload-artifact, предназначенного чтобы результат какого-либо необходимого для деплоя процесса выгрузить дальше.
Что они сделали?
Я максимально пытаюсь не материться, но пару недель назад они предупредили в ишью на гитхабе, что перестанут выгружать скрытые файлы (с точкой в начале имени).
Вот: https://github.com/actions/upload-artifact/issues/602
Что это значит? Так-то намерения хорошие: не позволить выгрузить .env и условные .config.json, содержащие секреты. Чтобы эти самые секреты никуда не утекли.
Вот только ребята забыли, что благими намерениями выложена дорога в ад! И, я надеюсь, они там будут гореть.
Это изменение предназначалось для версии 4, но они с какого-то перепугу решили выполнить его в 3 версии.
НА-ХЕ-РА?! Кому от этого хорошо? Зачем?
Если люди выгружают секреты куда-то случайно — не беда, перезагрузят!
Абсолютно нормально иметь sample-файлы .env.sample, .config.sample и так далее. Что мы и делали, обогащая эти файлы секретами.
Вот что ненормально — так это навязывать свою точку зрения пост-фактум. Ещё и в стабильной версии.
Просто уроды, слов нет. Certified scumbag engineering.
#github #подстава
#ссылка дня
Мы тут немного повеселились с XSS в разных продуктах и сайтах, результаты удивили. Распространяться я не буду, неприлично, но парочкой полезных ссылок поделюсь.
1. Расширение для Chrome, позволяющее быстро выбрать и вставить XSS-строку в нужное вам текстовое поле: https://chrome.google.com/webstore/detail/bug-magnet/efhedldbjahpgjcneebmbolkalbhckfi?hl=en
2. Постоянно обновляемый репозиторий на ту же тему: https://github.com/minimaxir/big-list-of-naughty-strings
Впрочем, там не только XSS. Помните, например, в чатах люди свои ники пишут с “грязью”? Красиво поломать интерфейс — это туда. Вставить эмодзи, смайлы, управляющие символы.
Ломайте свои интерфейсы сами и избегайте XSS, котаны.
#xss #naughty #injection #бородач
#статья дня
Я, пару лет назад, чтобы облегчить себе разработку расширения для Google Sheets, написал тоже расширение, но уже для браузера.
Что оно делало?
- слушало лог сети, как список событий
- вычленяло нужные события вызовов функций Google AppsScript
- десериализовало ответ
- выводило на экран, с разными фильтрами (с тех пор я ненавижу MUI)
И так прекрасно работало пару лет, а потом появился треклятый Manifest v3 и у меня не было времени перевести на него своё расширение... чуток всё заглохло.
Но зато на работе награду получил
Ладно, давайте к делу.
Итак, статья дня от Злых Марсиан: как конвертировать расширение для Chrome в расширение для Safari.
Оказывается, есть там пара подводных камней. Самое раздражающее — нужен чёртов XCode :)
Ну и своевременное появление этой статьи — оно мне как некий толчок к восстановлению моего решения.
#chrome #safari #extension
🖥Для многих ИТ-компаний, которые занимаются разработкой софта, одним из важнейших элементов является лицензирование ПО. Оно выполняет не только функцию защиты от пиратства, но и является хорошим средством заработка. Гибкое лицензирование помогает продавать ПО эффективно и соответствовать меняющимся требованиям рынка.
🐪20 сентября в Москве и 4 октября в Санкт-Петербурге состоится конференция Guardant Day – мероприятие для обмена практическим опытом по вопросам обеспечения технической защиты, выбора бизнес-модели лицензирования и определения стратегии развития продукта.
Что мы подготовили для участников:
🔘Круглый стол, посвященный мерам государственной поддержки вендоров ПО.
🔘Кейсы по работе с системой защиты и лицензирования от разработчиков ПО: практические рекомендации.
🔘 Экспертные доклады о технологиях, инструментах и продуктах.
🔘Презентация новой версии Guardant SLK 4.0 и планы по развитию.
🔘Сессия для ИТ/ИБ-маркетологов с экспертными докладами и обменом опытом.
🔘Технические стенды с возможностью увидеть продукты в действии.
В этом году мероприятие пройдет:
🌆20 сентября в Москве. Регистрация тут
🌉4 октября в Санкт-Петербурге. Регистрация тут
В обоих городах начало деловой части в 14:00.
Участие в мероприятии бесплатное по предварительной регистрации.
Подробнее о мероприятии в ТГ-канале Guardant TechClub
#codepen дня
А давайте, вдогонку к предыдущей новости о появлении popover, взглянем на такой вот шикарный эффект удаления диалога 🙂
Гори всё синим пламенем! Эх, жаль в своё время на проекте, где это было уместно, я не шибко много знал о шейдерах.
Не то, что я сейчас о них что-то знаю, но хотя бы и поддержки сильно больше.
Ах да, ссылка: https://codepen.io/ksenia-k/full/yLQLyZa
Там, кстати, и описание процесса приложено. Где-то на канале я выкладывал WebGL-демки, с красивым похожим шейдером огня, можно попробовать применить 🙂
Спасибо Ксении Кондрашёвой.
#webgl #shader #бородач
#фишка дня
Автор твита с картинкой выше буквально написал: «It's official. I don't understand URL.canParse 🫠»
Ну, давайте разбираться, что же тут не так. Или всё так?
И надо ли это вообще понимать?
Для начала, подумаем, зачем нам может понадобиться URL.canParse. А нужно это для случаев, когда отбросить токенизацию aka URL.parse и выполнение запроса дешевле и быстрее, чем упасть в ошибку или городить try-catch. Например, в работе с микросервисами, с БД.
Если внимательно оценить все случаи и глянуть на документацию, наблюдаются два паттерна:
1. Если есть порт, протокол не нужен
2. IP-адресам всегда нужен протокол
Ну, собственно, это и есть ответ на вопрос, как же работает canParse и особо больше понимать там нечего.
Другое дело, что URL.parse и URL.canParse в принципе как-то странно реализованы... Попробуйте в консоли сделать URL.parse("google.com:80").
Так что история ещё не закончена. Понять canParse — можно. А стоит ли применять — вопрос.
#url #parse #static #javascript
#игра дня
Глядите чо я откопал. По-моему, мы уже рассматривали все CSS-игры и игроподобные занятия, но этот ресурс больше похож на продвинутый #опрос.
Итак, встречайте: Guess CSS!
https://www.guess-css.app/
Возможно, это максимально быстрый способ прокачать своё понимание стилей, их композиции и каскада.
Делитесь результатами, котаны!
#css #game #quiz #бородач
Ровно пять лет назад я сел на поезд Аллегро и приехал из Санкт-Петербурга в Хельсинки на два собеседования подряд, на одном из которых я настоял.
Потому что "а чо они".
И сейчас в компании, на собеседовании в которую настоял, я и работаю.
Услышать историю моего трудоустройства в финскую компанию можно будет на стриме 19 сентября в 20:00 по мск.
Это будет четверг, если что.
Я расскажу о том, как прошли мои зарубежные собеседования. В этом мне помогут девчонки из @acceleracio, которые поделятся секретами того, как заполучить работу за границей.
Что будем обсуждать?
Подготовку к поиску работы за рубежом:
🔹 как готовился и проходил собеседование я,
🔹 текущее состояние рынка и тренды,
🔹 примеры стратегий поиска, которые работают и не работают,
🔹 инструменты для эффективного поиска работы,
🔹 и ответим на ваши вопросы — конечно, с огромным удовольствием!
Кто будет со мной в компании?
✅ Анна Решетова — интервью-коуч и преподавательница английского для айти-специалистов.
✅ Любовь Татарова — фронтенд-разработчица с большим опытом прохождения интервью в зарубежных компаниях.
Задание со звездочкой перед вебинаром — подготовиться и прочитать посты:
👉 Про нетворкинг,
👉 Об откликах и том, как их оставлять еще эффективнее,
👉 Про то, как надо верить в себя и никогда не опускать руки,
👉 Ну и, конечно же, приготовить свои вопросы!
Записаться можно через бота: @acceleracio_bot⚡️
Добавляйте в календари и приходите: это отличная возможность распланировать осенний сезон найма!
ОБУЧИМ ПРОГРАММИРОВАНИЮ И ГАРАНТИРУЕМ, ЧТО ТРУДОУСТРОИМ ПОСЛЕ УЧЕБЫ
Zerocoder. Мы обучили программированию более 8 000 человек и сделали наше IT-образование еще более надежным — теперь мы поможем найти тебе высокооплачиваемую работу мечты и гарантируем будущее трудоустройство.
Курс рассчитан на новичков, поэтому даже если ты никогда не программировал и не работал в IT, у тебя получится освоить перспективную профессию, работать в престижных IT-компаниях, купить квартиру по льготной ипотеке под 6% и получить отсрочку от армии.
Во время прохождения курса ты освоишь самый популярный язык программирования Python и основные фреймворки, сделаешь 18 PET-проектов, создашь портфолио и резюме, получишь свою первую работу.
Кликай на ссылку и узнавай подробности, заявки принимаются только до конца этой недели.
#статья дня
Один мой товарищ любил прыгать с вышки использует светлую тему в редакторе.
Да вообще, если подумать, много кто на работе в IDE работает со светлой темой. Я вот её использую только когда нужен повышенный контраст: на ярком солнечном свете.
Но темные темы системы в целом вообще стали модными лишь несколько лет назад, сначала на телефонах, потом и сайтах и десктопах. Мне откровенно не нравится.
Некоторые владельцы маков с чёлкой перешли на темные темы лишь бы скрыть чёлку 🤡
Так к чему это я. Действительно ли темные темы так хороши или так плохи для глаз? Что за ними стоит и почему черный цвет в них не используется? Отвечает вот эта статья: https://habr.com/ru/company/timeweb/blog/675526/
Со ссылками, с литературой, с примерами. Сплошное удовольствие читать.
#dark #theme #бородач
#инструмент дня
Ну и третья альтернатива — https://fakeimg.pl/
Этот сервис уже ставит не фотографии, но классические плейсхолдеры заданного размера. При желании — с вашим текстом. Замена покинувшим нас placehold.it и PlaceIMG.
Пробуем, отмечаемся.
#инструмент дня
Итак, первая альтернатива Lorem Picsum — Placedog: https://placedog.net/
Умеет все то же самое, только посвящен собакам. Ставьте реакции 👍, если у вас работает.
#статья дня
А знаете ли вы, котаны, что такое безопасный треугольник печали? Aka safe triangle.
Этим термином обозначается виртуальная область в меню, внутри которой можно безопасно водить курсором мыши без риска затронуть элементы ниже или выше. Смотрим на иллюстрации.
Да-да, в вашей Windows или MacOS такое тоже есть. Проверьте сами.
Собственно, почему я о нём заговорил? А тут вышла новая статья Ахмада Шадида и посвящена она такой важной вещи как "область взаимодействия".
Например, всем понятно, что на мобильных устройствах кнопки должны быть чуть побольше, потому что мы в них тыкаем пальцем. Но в то же время многие люди на десктопе заставляют нас тыкать курсором в чекбокс размером 12х12 пикселей, хотя рядом есть большой лейбл.
В общем, с чего всё началось, зачем это нужно и как сделать сайты удобными — в первой интерактивной статье Шадида: https://ishadeed.com/article/target-size
Огромное количество примеров, просто новый уровень для автора. Моё увожение.
#css #ui #ux #safe #target #бородач
#инструмент дня
Кажется, мы стали забывать, что нейронки и машинное обучение — они не только про ChatGPT и генерацию фотографий вашей соседки.
Одной из самых популярных задач по работе с изображениями было и остаётся удаление фона с картинок. Вокруг этого развелось какое-то невероятное число сервисов.
И все хотят денег.
Но мы же с вами понимаем, что даже достаточно сложную нейронку можно запустить прямо в браузере, правда? Мощностей вашего компьютера в совокупности с возможностями WebGPU более чем хватит, чтобы работать с моделями разной направленности.
Итак, вашему вниманию — Transformers.js, как средство работы с моделями, и одно из самых наглядных его применений — удаление фона с фото прямо в вашем браузере: https://github.com/huggingface/transformers.js-examples/pull/4/files
Демо: https://huggingface.co/spaces/webml-community/remove-background-webgpu
Бесплатно, без SMS.
Конечно, Transformers.js могут и не такое, была бы натренированная модель: анализ эмоциональной окраски текста, распознавание речи, получение выжимки из текста... Впрочем, ребята и их предоставляют, в огромном количестве.
Огонь? Огонь! 🔥
#js #ml
‼️Notion уходит из России и отключает российские аккаунты
9 сентября компания заблокирует учетные записи россиян, и времени осталось совсем немного, чтобы сохранить свои данные. Все накопленные данные надежнее всего перенести в российский сервис, который хранит все на отечественных серверах.
Один из примеров — платформа для управления знаниями и совместной работы TEAMLY. Не только помогут с миграцией с Notion, но и подробно расскажут, какие фичи и возможности есть на платформе:
— Генерация идей и бизнес-цели в интеллект-картах;
— Ведение планов в диаграмме Ганта;
— Декомпозиция задач в умных таблицах;
— Управление спринтами в канбан-досках;
— Отслеживание дедлайнов в календаре;
— Сбор и анализ обратной связи пользователей
Узнать больше
#til дня
Вам когда-нибудь было мучительно стыдно за то, что чего-то не знаете?
Мне — нет. Но вот сейчас почти да.
Вы знали, что вот уже djn больше года как nth-child в CSS стал нормальным?
Что я имею в виду: у тебя раньше был выбор, nth-child для индексации узлов aka тегов любого вида или nth-of-type для индексации конкретного типа узла (div, p, section).
Выходит какой-то бред, как мне посчитать второй элемент с классом .star?
И вот чего я не знал, это что nth-child может принимать селектор в виде аргумента of!:nth-child(2 of .star) {
background: red;
}
Ведь счастье так возможно. Стефан Юдис мне это показал.
Вот, Baseline 2023: https://caniuse.com/css-nth-child-of
И демо: https://codepen.io/alinaki/pen/LYKXWYo
Я, короче, очень доволен.
#css #nth #фишка
Онлайн-интенсив от НИУ ВШЭ: начните свой путь в веб-разработку
Изучить фронтенд с нуля, научиться верстке и работе с современными инструментами и создать свой первый мини-проект для портфолио — все это можно сделать на бесплатном онлайн-интенсиве «Frontend с нуля: первый шаг в веб-разработку» от Центра непрерывного образования факультета компьютерных наук НИУ ВШЭ.
Интенсив подойдет:
➖➖➖➖➖➖
▫️Начинающим во фронтенд-разработке: изучите основы фронтенда и сделаете первые шаги в новой области
▫️Тем, кто хочет работать в IT: погрузитесь в направление и поймете, подходит ли вам фронтенд-разработка
▫️Тем, кто рассматривает возможность дальнейшего обучения: углубитесь в изучение веб-технологий и сделаете первый проект для портфолио
Программа:
➖➖➖➖
▫️Буткемп: лекция о том, как устроен фронтенд, его технологиях и инструментах, а также воркшопы по верстке и React
▫️Практика: задания с автоматической проверкой на Stepik для закрепления навыков
▫️Мини-проект для портфолио: создание своего первого сайта в рамках интенсива
Спикер: Андрей Сухов, Frontend-разработчик Evocargo и эксперт Центра непрерывного образования ФКН
Онлайн-интенсив пройдет с 9 по 13 сентября. Участие бесплатное для всех желающих, нужно только зарегистрироваться.
Реклама: Федеральное государственное автономное образовательное учреждение высшего образования «Национальный исследовательский университет «Высшая школа экономики».
Erid: 2SDnjepHSTC
Чтобы попасть в Meta нужно пройти сложное собеседование и уметь писать высокопроизводительный код.
Высокопроизводительные решения би лайк:
#инструмент дня
Любишь GUI? Ошибка! Не любишь консоль? Фатальная ошибка!
Короче, я знаю, конечно, людей, которые чуть что — сразу в man лезут, инструкции, но их реально не так много.
Большинство повторяет заученные когда-то команды и сочетания
sudo rm -rf /*, например
Так вот, вне зависимости от того, долбишься ты в гуй или нет, знать команды консоли всё равно надо, потому что рано или поздно понадобится. А чтобы понимать состав команд и не копировать бездумно из руководств, есть прекрасный инструмент: https://explainshell.com/
И нет, ChatGPT очень часто генерирует какую-то херню. Уж лучше man тогда научиться понимать 🙂
#console #shell #bash #бородач
Стать сотрудником Яндекса быстрее и проще, чем кажется. Участвуйте в днях быстрого найма: решите тестовое, пройдите несколько секций собеседования и получите офер за несколько дней.
Ближайшие Fast Track мероприятия:
• 7-8 сентября — для аналитиков со знанием SQL и Python, офер за 2 дня в команды Маркета, Еды и Лавки.
#инструмент дня
Сегодня на повестке дня очередная дикая вкуснятина по SVG!
SSSVG: https://www.fffuel.co/sssvg/
Да, руководств по созданию и работе с SVG было много, но настолько подробного я ещё не приносил.
Что такое viewBox, как работает clipPath, на что влияют группы aka g, что такое use и symbol, как использовать маску и так далее и так далее — есть всё.
Каждый пример интерактивен, легко ориентироваться.
Вообще рекомендую обратить внимание на весь проект fffuel.co, ребята пилят невероятное количество гайдов и утилит для работы с цветом, SVG, мозаиками и генеративным шумом. Некоторые вещи на стыке разработки и искусства, буквально.
#svg #tool #interactive
Этот навык – чит-код для разработчика
Работодатели тратят миллионы из-за лишних 10 секунд, которые грузился интернет-магазин или банк. Поэтому главный навык IT-специалиста в 2024 году – уметь создавать системы, которые обрабатывают огромные потоки данных без задержек и сбоев.
Если вы хотите стать востребованным разработчиком, вам нужно знать Redis.
Эта система позволяет гарантировать великолепный опыт юзеров от использования ключевых фич вашего проекта.
Специально для этого ребята из FAANG School подготовили онлайн эфир, где расскажут, как создавать высоконагруженное приложение с Redis.
Вы узнаете:
– что такое кэш и когда его использовать
– как избежать ошибок многопоточности в Redis
– как использовать Redis в высоконагруженных проектах. Реальные примеры кода
– о концепции NoSQL и горизонтальном масштабировании
– как корректно работать с данными в Redis
– как использовать Redis в качестве основной БД
Переходите, чтобы после эфира реализовать несколько фич с Redis и увеличить шанс получить оффер.