14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#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
Прокачай свои скилы с Алексеем Рыбаком! 🚀
Надоели скучные задачи по программированию? 💻
Время перейти на новый уровень!
🎖Приглашаем бекендеров и инженеров инфраструктуры на уникальный трехмесячный курс по системному дизайну и архитектуре высоконагруженных систем от Алексея Рыбака, главы разработки Bumble/Badoo с 20-летним опытом в highload проектировании.
В чем ценность этого курса?
✅ Огненная практика с первых дней обучения на реальных кейсах и собственной инфраструктуре
✅ Погружение «под капот» хайлоад систем, изучение паттернов и приемов масштабирования
✅ Топовые фишки и знания по архитектуре проектов и системному дизайну больших проектов (1-100M DAU)
✅ Живые сессии, брейнштормы, проектирование “у доски”
На выходе у вас появится опыт:
✅ Проектирования сложных систем
✅ Нагрузочного тестирования своей инфраструктуры (выжмете 100К запросов)
✅ Планирования ресурсов для проектов с большим количеством пользователей
✅ Масштабирования IT-проектов
✅ Практический опыт работы с кластерами Redis, CockroachDB и шардированными PostgreSQL/MySQL
✅ И многое другое!
➡️ Регистрируйся и погружайся в нескучный хайлоад
Реклама ИП Рыбак А. А. ИНН 771407709607
#инструмент дня
К посту про вырезание углов из элементов, забыл напомнить, что у автора имеется целый ресурс с различными фигурами, эксплуатирующими CSS mask.
Вот, например, плавный полукруглый "кусь", подобный тому, что описан в статье: https://css-shape.com/inner-curve/
При этом, кстати, вырезание круга с "острыми краями" происходит сильно, сильно проще: https://css-shape.com/circle-cut/
Крутейший инструмент.
#css #mask
#такое дня
Я не плачу, это дождь.
И ref в пропсах.
Запись в блоге разработчиков React: https://react.dev/blog/2024/04/25/react-19#ref-as-a-prop
Кодмод, пока нет официального: https://codemod.com/registry/react-19-remove-forward-ref
Яндекс продолжает «делиться» культурой и вайбом компании, запуская нестандартные ивенты для специалистов.
Недавно прошел «Код-пленэр» — ивент на природе, где разработчики общались, слушали лекции про творчество в IT и «рисовали» кодом цифровой лес.
Это далеко не первое мероприятие, помогающее разработчикам перезагрузиться и сменить привычную обстановку. До этого компания уже провела IT-стендап, «код-хоппинг» и открыла зимний коворкинг в горах Сочи и на крыше музея современного искусства.
В общем, в будущем ждем новых пространств, где можно вдохновиться и понетворкать.
#codepen дня
К посту про interpolate-size: allow-keywords и о том, что теперь можно анимировать высоту, отлично подойдёт сегодняшний кодпен от Адама Аргайла.
Демо: https://codepen.io/argyleink/pen/BaXyJRL
Этот же кодпен является прекрасной иллюстрацией, что ничего не случится, если анимации не будет (а не будет её в Safari и Firefox).
Кстати, там же можно увидеть применение селектора :user-valid, а именно, концепции грязных полей: чтобы показать поле пароля в первый раз, надо сойти с поля ввода имени, blur; но после этого поле считается грязным и ввод пароля появляется моментально.
Грязное — потому что пользователь потрогал. И наверняка, немытыми руками.
Ну чо вы начинаете, это известный концепт почти во всех библиотеках работы с формами. Вот в React Hook Form, например.
Если кто-то не понял, что происходит в кодпене, есть поддерживающая статья: https://nerdy.dev/interpolate-size
#css #animate #height
#фишка дня
А заодно поддерживающая #статья.
Итак, анимация height до auto-значений!
Я не могу написать «я джва года ждал», потому что лично я ждал больше 12 лет!
Да, у нас была анимация min-height (максимально мерзко выглядящая). Да, год назад нам дали анимацию гридов, что скрашивало существование, но заставляло добавлять лишние обёртки.
И вот оно, свершилось! В Google Chrome 129 появилось свойство interpolate-size: allow-keywords, дающее возможность, полностью сохраняя обратную совместимость, включать интерполяцию контентозависимых свойств узлов до auto!
В них входят: width, height, min-content, max-content, fit-content и так далее.
Да, в остальных браузерах речи о поддержке пока не идёт, но это не та вещь, за которую стоит воевать. Ну не будет анимации и не будет, не страшно.
Кодпен с иллюстрации к посту: https://codepen.io/alinaki/pen/abezWpO
Только посмотрите, как просто:
:root {
interpolate-size: allow-keywords;
}
p {
transition: 1s;
overflow: hidden;
}
p:not(:hover) {
height: 5lh;
}
lh aka line-height. Ну просто красота.
#статья дня
Строго говоря, мало кому интересно читать о том, как некий разработчик в очередной раз переписал свой блог на очередной набор современных и даже, возможно, крутых технологий.
Вот только этот некто сегодня — Джош Комо, а это значит, его блог полон интерактивных примеров по вёрстке и фронтенду вообще, различных сниппетов кода, забавных анимаций и даже realtime пасхалок, для которых нужно некое хранилище данных.
Да и вообще, интересно последить за ходом мысли при выборе технологий, поэтому, вот: https://www.joshwcomeau.com/blog/how-i-built-my-blog-v2/
Из забавного, исходный код блога недоступен на гитхабе, но Джош намеренно оставил сорсмапы, поэтому можно прямо там посмотреть как сделан тот или иной компонент. Довольно интересное решение, поскольку непосредственно исходный код содержит в себе черновики, а публиковать их Джош не хочет.
Очень крутая работа, на самом деле.
#react #next #blog
Для разработчиков смена обстановки — это прям суперважно. Кодинг и бесконечные баг-репорты частенько превращаются в рутину. Здесь на помощь приходят коворкинги, и классно, если помимо комфортных мест и быстрого интернета, там еще есть возможность и отдохнуть. Например, недавно закрылось рабочее пространство Яндекса на крыше музея "Гараж". На 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 и ваши клики мышкой или ввод с клавиатуры. Расскажите мне теперь, что вёрстка — не программирование, вперёд.
В общем, без тени сомнения, Стюарт когда-то буквально стартанул мою карьеру и поддерживает веру в выбранное направление.
Не старейте, котаны.
#бородач
#ссылка дня
Немного неожиданного контента. Скорее, для личного пользования, но вдруг кому зайдёт.
Мне сегодня понадобилось имитировать звук... помпы на заправке. На детской площадке была игрушечная заправочная станция для беговелов. Дочке было надо.
И тут я вспомнил, что не кто иные как BBC выложили на днях свою библиотеку звуков в свободный доступ: https://sound-effects.bbcrewind.co.uk/search?cat=Machines
Какое-то невероятное количество просто.
Если вам вдруг нужно озвучить презентацию, открытый проект или игру — милое дело. Отлично заходит на дейли, кстати.
Но для коммерческого использования придётся договариваться.
Я честно не знаю, зачем и в какой ещё момент это может понадобиться лично мне — но звук падающей в слот монетки поставлю на оценку задач на backlog refinement :)
#sound #content
Интернет вещей, блокчейн, цифровые двойники и экосистемы — если это для тебя не просто слова, то не упусти свой шанс стать частью команды столицы! До 20 октября подавай заявку на оплачиваемую стажировку в Правительстве Москвы.
Ты учишься на последнем курсе или недавно стал выпускником? Хочешь работать над масштабными цифровыми проектами? Тогда эта программа точно для тебя, ведь за полгода ты сможешь:
✔️принять участие развитии столичных цифровых проектов: mos.ru, Цифровой двойник города, ЕМИАС, МЭШ и многие другие
✔️освоить ключевые навыки для эффективного управления проектами, тестирования, бизнес- и дата-аналитики, разработки, UX/UI-дизайна, технической поддержки или информационной безопасности
✔️выбрать удобный формат работы, совмещать стажировку с учебой и получать конкурентную зарплату
✔️показать свой потенциал и получить приглашение на постоянную работу в Департамент информационных технологий Москвы
ИТ-стажировка в Правительстве Москвы — это обучение самым востребованным навыкам, шесть месяцев работы в амбициозной команде и реальный шанс дать мощный старт своей ИТ-карьере!
Присоединяйся к команде лучших!
Реклама. МГУУ им Ю.М. Лужкова ИНН:7729026306
#фишка дня
Вот как вы чаще всего распространяете свои компоненты для всякого рода тулбаров? Наверняка, группы кнопок или, например, кнопка и текстовое поле будут в своём контейнере.
Вставляете этот контейнер в какой-нибудь флекс или грид и получаете... херню получаете, потому что содержимое вашего контейнера подчиняться внешнему флексу или гриду и не собирается.
Но есть решение! Правило display: contents буквально развернёт контейнер и предоставит внешнему потоку полный контроль над компонентами внутри. Это реально самая мозговзрывающая вещь на сегодня.
Демо: https://codepen.io/alinaki/pen/abeOjKw
Статья на тему от Ахмада Шадида: https://ishadeed.com/article/display-contents/
Пугаться данных на caniuse.com не надо: смотрите сноску о доступности.
Не рекомендую разворачивать таким способом значащие элементы вроде кнопок, таблиц, заголовков. А вот дивы — милое дело.
Да, ваш любимый TailwindCSS тоже в курсе: https://tailwindcss.com/docs/display#contents
Спасибо Весу Босу за напоминание об этом.
#css #display #contents
#статья дня
На картинке — не вырезка из учебника геометрии за 8 класс, а иллюстрация к описанию методики расчёта вырезания углов из ваших дивов и прочих секшенов.
И взято оно из очередной статьи Темани Афифа, посвящённой созданию различных фигур. У нас уже были звёзды, сердца, ленточки, треугольники.
И теперь пришёл черёд углов: https://verpex.com/blog/website-tips/how-to-create-shapes-with-inner-curves-using-css-mask
И реализовано всё на CSS Mask: https://developer.mozilla.org/en-US/docs/Web/CSS/mask
Описываете маску, накладываете на фигуру — красота.
.shape {
--r: 25px; /* the radius */
--s: 40px; /* the size of the cut */
--_m:/calc(2*var(--r)) calc(2*var(--r))
radial-gradient(#000 70%,#0000 72%) no-repeat;
mask:
right calc(var(--s) + var(--r)) top 0 var(--_m),
right calc(var(--s) + var(--r)) var(--_m),
radial-gradient(var(--s) at 100% 0,#0000 99%,#000 101%)
calc(-1*var(--r)) var(--r) no-repeat,
conic-gradient(at calc(100% - var(--s) - 2*var(--r)) calc(var(--s) + 2*var(--r)), #0000 25%,#000 0);
}
#рекомендация дня
Не так часто, как хотелось бы, приношу вам что то действительное годное от моих знакомых, но тут могу порекомендовать.
Есть ребята из компании 53xapps, занимаются созданием сайтов и автоматизацией бизнеса. Ну и вот они решили запилить свой собственный курс по Frontend разработке.
Конкретно: введение в алгоритмы, HTML/CSS, JavaScript и Vue.js.
Разработка курса заняла около полугода. Большое количество видео и практики.
Подход к обучению немного отличается от других курсов: сперва несколько уроков вас учат понимать алгоритмы и рисовать блок-схемы. После этого обучение становится более осмысленным.
Курс довольно плотный, тестовые студенты проходили его по 15-20 часов в неделю 4 месяца, но сейчас есть возможность проходить курс в спокойном собственном темпе. Все для вас 🙂
Освоите JavaScript, HTML/CSS, Vue.js. Познакомитесь с несколькими популярными библиотеками. Для старта во фронте вполне достаточно.
Есть несколько бесплатных уроков, можно попробовать и пощупать.
Итак, цена. 5000 рублей. А подписчикам канала промокод HTMLSHIT даст 1000 рублей скидки.
Программа курса и бесплатные уроки доступны по ссылке.
#frontend #HTML #CSS #JavaScript
Хочешь щёлкать задачи по фронтенду как орешки?
Канал Frontend tests & tasks научит!
Это не очередной канал с задачами. Здесь придется думать.
Убедись сам 👉 @Frontend_tasks
🚀 ИТМО назвал компании, которые активно развивают Open Source в России
Участники оценивались по количеству опенсорс-проектов в сфере ML/Data, их популярности, качеству репозиториев и активности контрибьюторов.
Лидером рейтинга с лучшими результатами стал Яндекс. Среди наиболее популярных решений:
CatBoost — библиотека для градиентного бустинга на деревьях решений, используемая для ускорения работы алгоритмов.
YTsaurus — мощная платформа для хранения и обработки больших данных, востребованная в различных отраслях.
YDB — отказоустойчивая распределённая SQL база данных, обеспечивающая высокую доступность и масштабируемость.
Также в топ вошли Сбер и Т-Банк, а в академической среде ИТМО, ВШЭ, МФТИ и Сколтех.
Подробности исследования на Хабре.