14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
Если вы сотрудник ИТ-компании, проходите опрос о работе в сфере ИТ по ссылке. Это займёт всего пять минут.
Всех, кто поможет ответить на вопросы исследования до 31 июля, в конце анкеты ждёт сюрприз — возможность получить наушники в подарок 😎
#codepen дня
А кому тут неожиданно уместных применений CSS 3D-преобразований?
Я, честно, не ожидал, что такой простой эффект будет настолько... эффектным. И никакого WebGL не требуется!
Вариант с видео: https://codepen.io/t_afif/full/mdzxJaa
Альтернативный вариант: https://codepen.io/gayane-gasparyan/pen/wvxewXO
Прекрасно подходят для браузерных игр и книжных магазинов (внезапно).
Маги тут?
#css #3d #transform #бородач
#тизер дня
План поста на вечер. Кто догадается, о чём он будет? :)
Upd. Раз никто не догадался, речь о Web Bluetooth API.
Как разобраться в вышмате за 1 вечер? 😨
Да никак. Но можно научиться понимать математику. И сберечь месяцы жизни, кучу нервов и сил.
В помощь вам - полезный канал о высшей математике. Его автор - выпускник СПБГУ, а ныне — преподаватель предмета.
На простом языке объясняет сложные вещи, даёт шпаргалки и проводит эфиры с решением задач 📈
Находка для всех, кому нужен вышмат по жизни. От полезных материалов и разборов до ответов на любые вопросы и живых дискуссий в комментариях.
Посмотрите сами 👉 @lav_math
#статья дня
Итак, каждый раз когда выходит новая версия 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%
Подробнее о вакансии.
#ссылка дня
Недавно в нашем чате был жаркий спор на тему доступности. Мол, нормально делай — нормально будет и вообще морочить себе голову не надо, таких людей единицы.
Оно как бы и да и нет. Например, давайте представим себе на минуту средних дизайнеров сайтов и приложений.
Чаще всего они сидят в условиях, близких к идеальным. На стуле, перед большим монитором. И рисуют, не знаю, приложение для оплаты парковки. Он или она молоды и здоровы, мышка твёрдо лежит в руке. Идиллия.
Как по их представлению человек будет пользоваться приложением? Припарковался, устроился поудобнее и оплатил?
Да хрен там плавал. На бегу к офису, с документами в свободной руке. В этот момент здоровый человек превращается в инвалида, который в кнопку-то с трудом попадает. Телефон скользит, экран бликует. Это уж точно не идеальные условия.
И так с любым проектом. Думать надо.
Собственно, вот и ссылка на сегодня: https://a11ymyths.com/ru/
Мифы о доступности на разных языках. Всем читать, котаны.
#a11y #бородач
#заметка дня
Судя по реакциям, машинки на иллюстрации к посту выше вам совсем не знакомы... Ну, давайте попробуем это исправить.
Итак, на фото — коллекционные машинки из серии Shell Motorsport.
Их можно купить на любой заправке Shell за 10 или 5 евро, в зависимости от наличия распродаж, но есть нюанс.
Нюанс заключается в том, что машинки — на радиоуправлении. А точнее, на Bluetooth-управлении. Вот только в самой машинке никакой электроники нет, есть только два моторчика и четыре провода.
А вот аккумулятор и электроника покупаются отдельно, за те же 10 или 5 евро. И расположены они в маленькой белой коробочке, на фото — перед машинками.
На ней, кстати, виден логотип Bluetooth 😛
Вот такой вот беспощадный маркетинг. Впрочем, машинки лицензированные и кто-то покупает их для коллекции, а один аккумулятор можно использовать для всех. Обеспечивает 5-10 минут игры.
Естественно, играть можно только включив пульт в проприетарном приложении от Shell.
На аккумуляторе есть два светодиода, разъём Micro USB для зарядки, четыре контакта и выключатель.
Понятное дело, что я не похвастаться вам их принёс (хотя я-то как раз умудрился попасть на распродажу и купить аккумуляторы и машинки по 5 евро), а показать, как можно работать с Bluetooth-устройствами прямо из браузера!
Да-да, получается, что за 5-10 евро можно приобрести готовый набор Bluetooth плюс аккумулятор и использовать его для чего угодно! Ведь что угодно лучше, если в нём есть Bluetooth. Потому, было бы неплохо научиться этим пользоваться. На входе радио, на выходе — четыре контакта, током на которых можно управлять.
И тут нам на помощь и придёт Web Bluetooth API. К сожалению, пока доступен он только в Chrome и я раньше вообще не понимал, зачем оно мне нужно. Не то, чтоб я теперь понимал больше, но почему бы и нет.
Ну что же, для начала было бы неплохо найти и прочитать протокол этих аккумуляторов. К счастью, эта работа уже проделана за нас: https://gist.github.com/scrool/e79d6a4cb50c26499746f4fe473b3768
Вокруг машинок образовалось целое сообщество энтузиастов! И это очень помогает. В итоге, нам стал доступен весь алгоритм работы и ключи шифрования.
Итак:
1. Организуем соединение по стандартному Bluetooth Low Energy протоколу, какое совпадение, ведь Web Bluetooth API как раз про него:var device = await navigator.bluetooth.requestDevice({
filters: [
{ namePrefix: "QCAR-" },
],
optionalServices: [
CONTROL_SERVICE_UUID,
BATTERY_SERVICE_UUID,
CONTROL_CHARACTERISTICS_UUID,
BATTERY_CHARACTERISTICS_UUID,
]
});
await connectDevice(device);
2. Обмениваемся ключами шифрования
3. Формируем командный пакет, который состоит из последовательности байт: нажатые клавиши направления, включён ли турбо-режим, включены ли лампочки.cmd[1] = 0x43;
cmd[2] = 0x54;
cmd[3] = 0x4c;
cmd[8] = 1;
cmd[9] = 0x50;
if (up) cmd[4] = 1;
if (down) cmd[5] = 1;
if (left) cmd[6] = 1;
if (right) cmd[7] = 1;
if (light) cmd[8] = 0;
if (turbo) cmd[9] = 0x64;
4. Отправляем!
Я отдаю себе отчёт в том, что не у всех может быть доступ к этим машинкам, да и не всем это может быть интересно, но мне очень нравится, что потребительская техника и embedded-разработка становятся намного ближе к веб-разработчикам, позволяя нам очень и очень многое :)
Саму страницу я выкатил на сервис Netlify Drop, мало ли у кого эти машинки имеются: https://6692b38da9380d4b1dbd0170--lucky-cat-37a5ab.netlify.app/
Доступ только с Chrome, даже в браузере Brave приходится отдельно включать нужные API.
При случае я попробую красиво её оформить, потому что дочке оказалось намного интереснее жать кнопки на ноутбуке, нежели управлять машинкой с телефона. Но пока что этого оказалось достаточно :)
И не надо мне говорить про клавиши на ноутбуке, это не мой 🙃
Ну что, котаны, все в embedded? :)
#статья дня
Вечнозелёная (суть, никогда не устареет) статья Павла Лаптева о CSS Grid: https://pavellaptev.medium.com/learning-css-grid-with-the-swiss-2bd02e913fa
Но не просто очередная уровня "две колонки, три строки", а с некоторым историческим экскурсом через газеты и журналы, приводящим в итоге к реализации пары каноничных швейцарских сеток.
А уж кто знает о типографских сетках больше швейцарцев? Да в общем-то, никто. Как и о типографике, впрочем.
Давайте-ка сюда сразу добавим статью про золотой канон в сетках (golden canon grid): https://habr.com/ru/post/479580/
#css #grid #swiss #бородач
#инструмент дня
Итак, потребовалось тебе написать статью. В статье что должно быть? Правильно, примеры. Где у нас лежат одни из лучших примеров?
Правильно, на CodePen.
Но как вставить кодпен на страницу, да ещё так, чтобы это все удобно хранить в гите и даже редактировать?
Ответ: использовать web-компонент <code-pen>!
Вот этот вот: https://darn.es/code-pen-web-component/
<script type="module" src="code-pen.js"></script>
<code-pen>
<pre>
<code><p>Hello world</p></code>
</pre>
</code-pen>
Красота.
#component #codepen
Задумываетесь сменить стек и перейти в 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 #бородач