14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#статья дня
Итак, каждый раз когда выходит новая версия React, просыпаются сотни пиарщиков других фреймворков, расписывая, почему же всем нужно перейти на их продукт.
Проблема тут в том, что за каждым из них стоит какой-нибудь стартап или ожидание инвестора. Да, конечно, было бы нелогично игнорировать тот факт, что за реактом вообще стоит Meta, но забывать о том, что пиар есть пиар тоже не стоит. Да и Meta накидывает нам проблем...
Ладно, пролог затянулся. Он был нужен, чтобы напомнить нам всем о таком удобном методе подачи информации как сравнение сильных сторон одного продукта со слабыми сторонами другого.
А статья дня от Тайгера Аброди — попытка объять и осмыслить весь путь реакта от внедрения хуков до его сегодняшнего состояния, т. н. concurrent React: https://tigerabrodi.blog/reacts-evolution-from-hooks-to-concurrent-react
Почему были приняты те или иные решения, в чем были их проблемы, что мы упустили из виду, что просто ушло в тень, и почему какие-то веяния просто невозможно воплотить в жизнь.
Статья довольно сложная, поскольку являет собой последовательную сборку наблюдений за несколько лет. Но труд получился всеобъемлющим.
#react #concurrent
#ссылка дня
Итак, файлы конфигурации, они же dotfiles.
.bashrc, .zshrc, .vimrc, emacs/.config/emacs, .gitignore
Понятно, почему dotfiles? У всех есть точка в начале названия самого файла или директории до него. В Unix-подобных системах такой файл будет скрыт от файлового менеджера или дефолтной команды списка файлов aka ls.
Какие-то из них отвечают за поведение эмулятора терминала. Какие-то за поведение различных классических и не очень редакторов. Какие-то содержат хитровысосанные алиасы сложных команд... Какие-то влияют на глобальное поведение локальных утилит, того же git-а.
Я когда-то давно дико упарывался по сложной конфигурации своих машин. Эффективность over 9000. Но заметил одну проблему...
На машинах коллег и удаленных серверах эффективность падала до нуля. Я просто привык к своим стандартам.
Так что закончилось это минимальным набором вроде vimrc (все равно вим никто не использует больше) и глобального gitignore.
Так вот, ссылка дня представляет собой сборную солянку различных dotfiles на GitHub. Делитесь, котаны, кто что использует: https://github.com/topics/dotfiles
Может, я что-то упускаю?
В открытом курсе AvitoTech по JavaScript вышел третий урок.
Те, кто прослушал первые два, уже могут написать простой скрипт.
А в третьем уроке всё о данных в JavaScript, их организации и обработке: объявление переменных и инициализация, стек и куча, память, проблемные числа, области видимости.
Подписывайтесь на канал, чтобы не пропустить новые выпуски.
#статья дня
Глупо считать, что сложные системы это привилегия айти, пусть даже айти зачастую пронизывает их с ног до головы. Хотя, конечно, стоит признать, что даже кажущиеся простыми системы на самом деле далеко не такие (на иллюстрации — система уведомлений в Slack).
Поэтому ровно так же глупо считать, что отладка сложных систем и разбор инцидентов должны происходить только по айтишным принципам и правилам. Например, тот же самый «подход «пяти почему?», широко разрекламированный книгой и движением «Бережливый стартап», слишком часто применяется чтобы найти виноватого, но никак не чтобы улучшить систему.
Сегодняшняя статья имеет простое и понятное название: «How Complex Systems Fail», имеется перевод на русский: «Как ломаются сложные системы». Автор — доктор Ричард Кук. В смысле медицины доктор.
В чём суть? Всё просто: опасность – неотъемлемый атрибут сложных систем. На этом можно было бы и закончить, но там ещё 17 пунктов. Кому-то они помогут расслабиться, очень надеюсь.
Забавно, что некоторые из пунктов отлично вписываются в рефакторинг. Например:
10. Все действия специалистов – авантюры
14. Изменения создают новые виды сбоев
18. Работа без сбоев требует опыта работы со сбоями
Прописные истины? Возможно. Но их стоило собрать в одном месте. И собрали — аж в 1998 году.
В общем, всем рекомендую, котаны.
#system #testing #бородач
#инструмент дня
Итак, у вас команда разработчиков. Даже самые опытные из них не то что забывают проверить банальные банальности, но ещё и проверяют PR-ы на похер.
LGTM. Этими буквами выложена дорога в девелоперский ад.
Чтобы это минимизировать, а, заодно, и снизить когнитивную нагрузку на людей, нужно подключать бездушные машины.
Не протестировал ручками? Отказ. Не написал тесты? Отказ. Не добавил номер тачки или ссылку на тред с продактом в слаке? Отказ.
И для этого подойдет вот такой GitHub action: https://github.com/marketplace/actions/pull-request-auto-reviewer
Вырос он из "общественного" проекта все того же Андрея Ситника Slow Reader.
Конечно, чекбоксы не гарантия спасения от ленивых разработчиков. Но это а) напоминание б) взятие ответственности на себя.
#github #action #workflow
В предыдущих постах мы уже поделились советами по эффективной работе с S3-хранилищем и рассказали, что влияет на производительность приложений при работе с ним.
В новой статье мы рассказали, как корректно выстроить работу с данными многопользовательского приложения. И как сделать это безопасно и без потерь производительности.
Решение кажется простым: один конечный пользователь приложения — один S3-бакет. Но если таких пользователей тысячи или сотни тысяч? В таком случае придётся хранить данные нескольких пользователей в одном бакете, который мы и назвали «коммунальным».
В карточках дали пару советов, как разграничить права доступа к такому бакету, а все способы и рекомендации вы сможете найти в новой статье по работе с S3.
#yacloud_articles
#фишка дня
Сегодня на ваших экранах новая серия сериала "Не боги горшки обжигают".
На сей раз отличился Kent C. Dodds, которого уж никак нельзя упрекнуть в незнании фронтенда 🙂
Но давайте разбираться. Что же случилось?
Если пройти по ссылке, то можно понять, что случилась типичная для интернет-каталогов ситуация: карточка товара со ссылкой куда-нибудь ещё.
И да, если раньше всем было вообще пофигу на валидацию — рендерит и ладно — то нынче в дело вступают SSR/SSG и они не позволяют гидрацию невалидного HTML 🥁
А попасть в ситуацию такую ну просто слишком легко: достаточно обозвать пару компонентов как-то иначе, чем просто a, и всё, потерялись. Нет, кнопки тоже нельзя. Нет, любой интерактивный контент нельзя.
Так что же делать-то? Псевдоэлементы к спасению!
Верстаем как обычно, вставляем просто две ссылки: одну на товар, вторую куда-нибудь ещё. И растягиваем псевдоэлемент первой на всю ширину. Как-то так: https://codepen.io/alinaki/pen/OJdJQyB
Все довольны, котята спасены!
#css #trick #card #validation #бородач
👩💻 Программирование теперь в телеграм!
Вот обширная база материалов, которая ежедневно обновляется, выбирай своё направление:
Обучение Python с нуля
Обучение JavaScript с нуля
Обучение HTML/CSS с нуля
Обучение Java с нуля
Обучение C/С++ с нуля
Обучение С# с нуля
Обучение SQL/GO/PHP с нуля
Обучение Kotlin/Swift с нуля
⛓ Архив на 1789ГБ: Курсы, книги, шпаргалки, статьи, видео ресурсы — всё собрано в одном месте: @roadmap_ready
#фишка дня
Давайте что-нибудь наболевшее.
Вот, например, если установить атрибут translate="no" на тег, содержащий название компании, то он не подвергнется автоматическому переводу (типа Google Translate): https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/translate
Удобно, если ваша компания называется "Clean Beam" или ещё какая-то подобная глупость.
И вообще, не забывайте на html ставить атрибут lang с верным кодом языка. Вы не представляете, как бесит, когда финские и шведские сайты это игнорируют, и переводчик иногда отказывается работать.
#html #attribute #translate
#статья дня
Кто из вас, котаны, использует контейнерные запросы в реальных проектах?
Лес рук...
А ведь всего несколько лет назад запрос на изменение разметки в зависимости от ширины родителя, а не окна (viewport-а), стоял очень остро. Вот мы их получили и... молчание.
Этим же вопросом не так давно задался Крис Койер, создатель CodePen: https://frontendmasters.com/blog/weve-got-container-queries-now-but-are-we-actually-using-them/
Ну и что же, ответ не заставил себя ждать!
Филип Валтон из команды Google Chrome выпустил статью на тему: https://web.dev/blog/how-to-use-container-queries-now
TL;DR
В статье описывается максимально прагматичный подход, в котором пользователи старых браузеров получат мобильную разметку, а современных — все плюшки контейнерных запросов.
Идея, кстати, не нова. Когда вышли финальные версии Flexbox и Grid-ов, многие разработчики и деврелы буквально советовали верстать мобильную разметку, а потом сверху накладывать грид. В итогу худшее, что происходило с пользователями IE 9-11 — они видели мобильную разметку. Ничего страшного же.
Ну что, пользуемся?
#css #cqw #containerqueries
Вакансия Middle/Senior Data Scientist в команде Lamoda Tech
Создаем продукты, которые делают шопинг удобным и вдохновляющим. Результат — 17 млн. довольных пользователей ежемесячно и звание крупнейшей fashion & lifestyle платформы в России по версии Data Insight.
Ищем специалистов с опытом промышленной разработки моделей.
Стек технологий: Big data (Hadoop, PySpark, Hive), Python, Catboost, Airflow, Docker, SQL, PyTorch.
Как работаем: квартальное планирование по OKR, двухнедельные спринты, регулярные проектные встречи; развитое DS-сообщество; полный жизненный цикл разработки data-driven продуктов с применением ML. В части разработки онлайн-сервисов и деплоя моделей помогает команда инженеров.
Что еще интересного: гибрид; офис в Москве и коворкинг в СПб; организуем внутренние и внешние митапы; помогаем развивать личный бренд шопинг на Lamoda со скидками до 40%
Подробнее о вакансии.
Питер стал новой IT-столицей России. На рынке труда высокий спрос даже на новичков без опыта, а средняя зарплата составляет 151 тысячу
Но главный плюс Питера для любого работника IT-компании — это ипотека со ставкой 5% вместо рыночной 19%. Эксперты канала Новостройки Питера посчитали, что с минимальным первоначальным взносом платеж за 1-комнатную в доме бизнес-класса составит всего 38 тысяч в месяц
#заметка дня
Половина мемов про работу программистом построены на том, что работа и собеседование редко бывают связаны.
Лайвкодинг, алгоритмы, большая О — это всё лишь способы напустить дыму, не правда ли? :)
И тем забавнее, когда возникает рабочая задача, которая как раз лежит себе на литкоде слово в слово.
Итак, ситуация: пользователь продукта жалуется, что данные в Excel меняют своё местоположение, когда обновляются.
Диагностика проблемы: начиная с колонки BO неверно рассчитывается её порядковый номер.
Решение же на экране, но тем забавнее, что проверяющий пулл-реквест коллега как раз на днях эту же задачу решал на Leetcode: https://leetcode.com/problems/excel-sheet-column-number/
А вот предыдущий код расчёта был достаточно плохо протестирован на граничных значениях колонок... Но много лет работало без проблем :)
Хорошее чувство, в общем.
#leetcode
#новость дня
Посмотрите на иллюстрацию. Ничего интересного не замечаете?
А здесь происходит ого-го какая драма!
Итак, чуть больше года назад я уже знакомил вас с совершенно новым браузером, который не использует ни один существующий движок. И это — браузер Ladybird.
Если коротко, есть такой чувак, Андреас Клинг. Долгое время он работал над движком WebKit в Nokia, а потом и над браузером Safari в Apple. А потому немного... в общем, оказался в центре реабилитации.
Выйдя оттуда, ему потребовалось чем-то себя занять (блин, звучит как история BMTH), потому он создал операционную систему SerenityOS. Суть её была в том, чтобы написать Unix-подобную ОС без использования сторонних библиотек. Постепенно вокруг проекта даже образовалось сравнительно большое сообщество.
И вот, разрабатывая просмотровщик HTML-документации, ребята случайно написали браузер. И так получилось, что браузер стал развиваться быстрее чем материнский проект.
И месяц назад Андреас решил, что будет заниматься только им, выпустив соответствующее уведомление.
И вот тут началось самое интересное. Все так наелись монополии Google, что новость взлетела с дикой скоростью. Казалось бы, зачем нам ещё один движок и тем более — браузер? Но запрос есть. Начиная от энтузиастов, заканчивая слабомощными машинами и телевизорами.
В общем, пару дней назад стало известно, что в некоммерческую организацию, созданную под Ladybird, инвестировали 1 миллион долларов. И не кто иной, а Крис Ванстрат.
Не знаете, кто это? А это сооснователь GitHub. И он не один такой. Shopify тоже в спонсорах.
В общем, мир наконец-то снова стал интересным. На скриншоте — браузер, собранный мной за пять минут до этого поста. Это очень легко.
И пусть он пока не умеет всего, что умеет Chrome, я верю в его светлое будущее.
#web #browser #ladybird
🔥 Программистика находка для каждого питониста
Проведём за ручку от самых простых проектов до сложных. Расскажем самые трудные концепции простым языком. Научим не боятся сложных задач и наслаждаться своей работой
👍Подписывайся и развивайся
Задумываетесь сменить стек и перейти в backend?
👉🏻 Язык Go – отличный выбор с менее перенасыщенным рынком и хорошими карьерными возможностями. Middle-специалист может получать от 250 тыс., а освоить Go можно за полгода, особенно с бэкграундом в программировании.
Изучать Golang рекомендую в онлайн-школе IT Mentor, где вы можете освоить новый для себя язык с нуля или повысить уже имеющиеся hard- и soft-скиллы.
Оплата за обучение происходит только после трудоустройства. Если не получилось найти работу или решите прекратить учиться — ничего не платите 🤝
Преимущества обучения:
1. Сопровождение опытного ментора и опыт работы на реальном проекте.
2. Актуальный стек: основы Go, Go Runtime, Конкурентность, Frameworks, Tools, Testing, Базы данных, Оркестрация, Брокеры сообщений.
3. Закрытое сообществе студентов-разработчиков и карьерная поддержка даже после окончания курса.
4. Гарантия трудоустройства и выхода на позицию Middle-Middle +.
Присоединиться к набору группы и узнать больше о программе можно по ссылке.
Удачи в обучении! 📚
Реклама. ИП Тюльников ИНН 526223159257.
#фишка дня
Многие (к сожалению, не все) кто хоть раз разрабатывал формы, сталкивались с элементом label (лейбл, ярлык, как вам угодно). И знают, что при правильном его использовании пользователю не приходится целиться мышью в галочку или радиокнопку.
Кто-то добавит при этом, что скринридеры могут ассоциировать лейбл с элементом ввода и пользователи с нарушением зрения могут легко сориентироваться в вашей форме.
Но не все знают, что лейбл можно повесить и на элемент button: https://codepen.io/alinaki/pen/XWjLedQ
Да, возможно, кнопке свой ярлык не нужен и даже MDN сообщает нам об этом, но!
Но в лейбл можно добавить дополнительную информацию, которая будет однозначно и семантично связана с кнопкой и поможет, например, скринридерам или при создании тултипа.
Лейблом можно продублировать кнопку без внесения лишней когнитивной нагрузки (но не стоит, фокус он не примет). Пожалуй, для каких-нибудь игровых интерфейсов вполне может быть приемлемо.
А вот если вы не используете кнопки и балуетесь role=“button” на div-ах (в лучшем случае) — этой возможности вы лишены в принципе.
#html #button #label #бородач
#инструмент дня
Разобраться в концепциях 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 #бородач
#урок дня
Яндекс Практикум поможет специалистам подготовиться к собеседованию на английском
Курс английского для IT-специалистов обновили. Теперь
в нем доступен модуль для подготовки к собеседованиям для работы с международными проектами. Помимо занятий с преподавателем в него включено тестовое интервью с зарубежным IT-экспертом, который даст подробный фидбэк.
Курс можно кастомизировать под твои нужды – добавляй, убирай, заменяй модули.
Во время обучения также:
• Общаешься на митапах и конференциях
• Осваиваешь профессиональную лексику
• Развиваешь софтскиллы
• Учишься работать в команде и решать конфликты
Есть бесплатный разговорный клуб и сертификат по окончании. Идеально для разработчиков, QA, DevOps, проджектов и аналитиков.
Подробнее про курс.
#статья дня
Месяц назад в Берлине прошла конференция, посвященная local-first принципам в вебе.
Если коротко, идеология local-first придерживается первоочередного хранения и обработки данных на, собственно, компьютере пользователя. Но, конечно, не ограничивается этим. Иногда этот подход ещё называют offline-first, поскольку предполагается полноценная работа с данными в отсутствие сети.
Андрей Ситник был на этой конференции и составил краткий обзор докладов. Идеально, чтобы вкатиться в тему: https://evilmartians.com/chronicles/recapping-the-first-local-first-conference-in-15-minutes
#offline #conference #localfirst
Реклама. ООО «Яндекс.Облако» ИНН 7704458262
Erid: 3apb1Qrwwr2uBg1Ek9Xvq33Vk2H55JWLSu7eyL5S1S7e4
#фишка дня
Замотался, но про вас не забыл, котаны!
Вторая, а может и первая, по популярности фигура на сайтах — это звезда. То рейтинг ей поставят, то маской наложат, то конфетти сделают...
Так вот, из поста про треугольники мы уже в курсе, что clip-path можно применять везде. И даже нужно. Так почему бы не нарисовать им звезду?
«Наверное, потому что задолбаешься точки ставить?», — скажете вы, и будете, в целом, правы. Их там вроде... 10? Десять же, да?
Нет! Оказывается, достаточно пяти!
Глядите чо: https://codepen.io/t_afif/pen/jORvmKG
1. Вариант на тригонометрических функциях:
clip-path: polygon(50% 0,
calc(50%*(1 + sin(.4turn))) calc(50%*(1 - cos(.4turn))),
calc(50%*(1 - sin(.2turn))) calc(50%*(1 - cos(.2turn))),
calc(50%*(1 + sin(.2turn))) calc(50%*(1 - cos(.2turn))),
calc(50%*(1 - sin(.4turn))) calc(50%*(1 - cos(.4turn)))
);
clip-path: polygon(50% 0,80% 100%,0 39%,100% 39%,20% 100%);
#заметка дня
В @htmlshitchat всплыл вопрос: "А как вывести на экране блокировки смартфона виджеты управления музыкой и плейлистом? След, пред и проигрывание/пауза?"
Ведь если просто запустить audio, ничего такого не получится. Да и плейлист нужен же...
Как это часто бывает, автор вопроса сам на него и ответил.
Как это редко бывает, автор вопроса приложил решение!
Итак, весь секрет в MediaSessionAPI: добавляем обработчики действий previoustrack и nexttrack и вуаля.
Даже демо есть! Это прям нечто невероятное: https://codepen.io/ArsGal/pen/bGPbKML
Не стесняйтесь спрашивать и отвечать в чате. Это помогает всем :)
#js #music #controls
⚡️ Бесплатное обучение HTML/CSS, JavaScript, Vue.js с нуля с поддержкой от наставника
На канале Интенсивный JavaScript действующий тимлид уровня мидл+ помогает изучить JS на практических задачах, которые интересно кодить
С 10 по 14 июля он проводит бесплатное обучение, где на практике поможет разобраться в HTML/CSS, JavaScript и — Vue.js
Что вы сделаете на обучении
— Сверстаете макет под присмотром тимлида
— Затем добавите JavaScript (и это не пара скриптов для модального окна)
— И перепишете проект на Vue.js
🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться джуну.
Помимо работы с кодом на обучении он расскажет, где новичку взять опыт работы, что ни в коем случае нельзя говорить на собеседовании, почему 90% новичков никогда не получат даже отклика на своё резюме
В общем — даст пошаговый подробный план «Что учить фронтенд и как найти работу джуну в 2024 году» . По этому плану его ученики устраиваются на работу
Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля
Подписывайтесь, осталось 30 мест
Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду
👉Участвовать бесплатно
Первый урок из обучения уже доступен
#ссылка дня
У канала есть небольшое, но всё же уютное сообщество — @htmlshitchat.
И сегодня один из подписчиков прислал на наш суд свой тренировочный проект: простой клон React.js
Собственно, вот он: https://github.com/MarufZak/react-simplified
Помимо непосредственно view-слоя библиотеки представлены ещё headless ui-kit и простая админская панель. То есть, проект вполне себе рабочий.
А теперь слово автору. Какова была мотивация, какими ресурсами пользовался и зачем это всё вообще?
Мотивацией стало сделать свой open-source проект. До этого я делал contributions в проекты как earthworm, reactjs-interview-questions, kamranahmedse/developer-roadmap и тд, фиксил проблемы с a11y.
Я подумал, зачем бы не сделать свою либу, долго думал и остановился на react.
Читал статьи из build-your-own-x , отличные ресурсы. Но копипастить не стал, брал только идеи.
Копался в самом коде реакта, хотя некоторые вещи даже не нашёл. А также читал статьи из канала Будни разработчика, что помогло написать headless ui kit 😉.
Это был мой side проект, но работал я над ним практически каждый день. Спустя 2 месяца я понял, что никакая магия за реактом не стоит, только умный подход к разработке без каких либо custom language syntax, отдельное спасибо разработчикам из facebook.
Если бы мог вернуться назад, то начал бы писать тесты, без них очень и очень трудно становится работать с библиотекой. Теперь я убеждён что тесты хоть и скучные, но они нужны.
Также я понял что AI справляться не может с такими проектами (да, я многое обсуждал с chatGPT, но толка было мало, возможно я делал неверные промпты).
День за днём делать повседневную или почти одинаковую работу на работе наскучило, а open source меня как будто оживил как разработчка. Всем советую!
#community #opensource
#фишка дня
Одна из знаменитых проблем Safari на iOS — это утечка скролла. Условно говоря, показали вы модалку, скроллите её — а фон тоже скроллится. В Safari 16, впрочем, проблема была решена.
Тем не менее, модалками и overflow: hidden поведением проблемы со скроллом в разных браузерах не ограничиваются.
Например, скролл в любом плавающем или просто переполненном элементе очень даже протекает наружу, в итоге скроллите вы колесом (или пальцем) textarea, доходите до конца — и начинает прокручиваться остальной документ.
Я устал придумывать синонимы слову скроллить.
Так вот, уже достаточно давно существует свойство overscroll-behavior. Оно позволяет не только запретить цепочку событий прокрутки, но и отменить пограничные эффекты!
MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
Демо: https://mdn.github.io/css-examples/overscroll-behavior/
Наиболее популярный и, для кого-то, раздражающий эффект окончания прокрутки — это пружинка. Именно поэтому я записываю демо из Safari, чтобы сразу стало понятно, о чём речь.
Ах да, Safari... как обычно, поддержка только-только появилась, с 16 версии. До того приходилось мучаться.
В любом случае, свойство очень удобное, пользуемся.
#css #scroll #overscroll #бородач
#расширение дня
В дополнение к недавнему посту про курс Брамуса Ван-Дамма посвящённого CSS-анимациям по скроллу, хотелось бы приложить его расширение для Chrome, позволяющее их отлаживать.
На иллюстрации, например, отладка всё того же проекта AirBnb: https://www.airbnb.com/release
Ссылка на расширение находится на сайте, посвящённом скролл-анимациям вообще, что само по себе максимально полезно: https://scroll-driven-animations.style/
Интересный подход, мне нравится.
#css #scroll #animation
🚀 CodeRun — Тренажёр для прокачивания навыков 🚀
Привет! Мы рады сообщить, что CodeRun, созданный разработчиками для разработчиков, выходит из беты и запускает второй сезон — захватывающее соревнование на знание технологий!
Что такое CodeRun?
CodeRun — это бесплатный онлайн-тренажер Яндекса для разработчиков, где можно не только улучшать свои навыки, но и выигрывать ценные призы! Тренажёр предлагает огромный каталог задач с адаптируемой сложностью, чтобы каждый нашел что-то по душе.
Главные фичи CodeRun:
Авторские и тематические подборки — специально разработанные задачи, чтобы вы могли тренироваться и учиться новым техникам.
Скриншотные задачи для фронтендеров — уникальный формат задач, который проверяет ваши навыки в создании интерфейсов.
Сезонные турниры с призами — участвуйте в наших турнирах и боритесь за звание лучшего разработчика.
🔥 Второй сезон уже начался! 🔥
Присоединяйтесь к соревнованию, набирайте баллы и выигрывайте призы. Победители смогут залутать:
✅ фирменный мерч,
✅ сертификаты,
✅ награждение в офисе Яндекса,
✅ возможность попасть в штат по упрощенному найму.
Не упустите шанс показать свои навыки и стать частью команды Яндекса!
📚 Хочу узнать больше! 📚
Переходите на сайт CodeRun и узнайте все подробности. Прокачивайтесь, соревнуйтесь, побеждайте!
#инструмент дня
Если вам этим утром было так же нечего делать, как и мне, вы могли поуправлять своим ноутбуком с электронной читалки!
Кроме шуток :) Оказывается, есть такой инструмент удалённого доступа: noVNC. Это реализация VNC-клиента для браузера.
И в Windows, и в MacOS и уж тем более в Linux есть средства удалённого доступа, поддерживающие этот протокол. На примере MacOS он называется Remote Management.
Ещё не так давно он не поддерживал VNC, но уже некоторое время всё отлично работает.
Правда, конфигурация его контринтуитивна. По-умолчанию запрещено вообще всё, но система просто говорит тебе, что пароль неверен.
Итак, в чём же была основная сложность?
А в том, что VNC-поток должен шифроваться. И если в обычных браузерах есть Web Crypto API, что позволяет ходить на сервер без HTTPS, то вот браузер в Kindle, пусть и был недавно прокачан (и теперь похож на настоящий), эту самую криптографию не поддерживает.
А мне почему-то очень было интересно посмотреть, как это — дополнительный E-ink экран.
Пришлось генерировать сертификат самостоятельно, на эту мысль меня навёл Роберт Андерберг, показавший саму идею в Твитере:
openssl req -x509 -nodes -newkey rsa:2048 -keyout novnc.pem -out novnc.pem -days 365
./utils/novnc_proxy --vnc localhost:5900 --ssl-only --cert novnc.pem
#codepen дня
Фокусы с типографикой в CSS весьма ограничены, но даже имея на руках лишь их — можно вытворять эффектные вещи.
Например, комбинируя грид и вертикальный режим вывода текста можно получить забавную змейку, как на демо от Adam Argyle: https://codepen.io/alinaki/pen/VwOJoXY
Я форкаю кодпены, потому что они имеют особенность пропадать.
Заодно демо являет собой хороший пример контейнерных запросов, зажимая размер шрифта в адекватных рамках:
grid
font-size: max(1rem, 15cqmin)
writing-mode: vertical-rl
line-height: 1.1cap