14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#ссылка дня
Сложно давать ссылки на что-то поддерживаемое какой-нибудь компанией и не быть обвиненным в рекламе.
Но, если честно, есть несколько компаний, которых я готов упоминать всегда даже бесплатно. Ну просто потому что они отвечают моим каким-то внутренним критериям качества и репутации.
Но ладно, хватит вводных. Вот откуда вы, господа и дамы, берёте тестовые задания чтобы потренироваться?
Самые прожженные, я точно знаю, натурально ходят по собеседованиям раз-два в квартал и берут оттуда. А что если у меня нет столько смелости и наглости?
На помощь приходят подборки тестовых! Вот, например, от Хекслета: https://github.com/Hexlet/ru-test-assignments
Собрано очень много заданий от различных компаний, группировки по технологиям нет, что минус, но сгруппированы по компаниям, что дает возможность оценить стек.
Полезная штука, котаны. И не только для начинающих!
#work #assignment #list
#инструмент дня
Ох что я вам нашёл! Просто пушка.
Как вам отладка на мобильных устройствах? Ну только честно. По-моему — мучение.
Да, можно подключить телефон кабелем к телефону и пользоваться консолью настольного браузера. Можно купить доступ к Browserstack или аналогам и разруливать косяки на десятках устройств. Ах да, можно ещё воспользоваться эмулятором!
Но почему бы просто не воспользоваться девтулзами? Ну потому что в мобильных браузерах их нет.
Зато есть Eruda! Встраиваемая консоль для мобильных браузеров: https://github.com/liriliri/eruda
Демо: https://eruda.liriliri.io/
В принципе, выглядит как сильно упрощённая копия хромовых вебтулзов и вполне себе может помочь в отладке, особенно учитывая количество всяческих официальных и не очень плагинов от визуализации касаний до пиксель-пёрфект подложки.
В общем, забавная вещь! В какой-то момент может и выручить.
#js #devtools #mobile
#автор дня
Ввожу новую рубрику! Ибо крутых авторов фронтенд-арта стоит отмечать отдельно. Мы уже обсуждали с вами создателей комиксов на чистых HTML/CSS и создателей CSS-арта вообще. Так же можно вспомнить Юрия Артюха и его великолепные WebGL-стримы.
Герой сегодняшнего поста — Julia Miocene.
Я, честно, не знаю как правильно транслитерировать фамилию (?), так что просто Юля.
Итак, Юля делает прекрасные сюжетные анимации на чистом HTML/CSS а ещё она автор проектов https://keyframes.dev/ и https://www.pickles.rocks/
На каждую анимацию имеется видео с созданием и, собственно, кодпен. Вот, например, Зайцы с иллюстрации: https://codepen.io/miocene/pen/aPwrpw
Проработка деталей зашкаливает!
Канал Юли на YouTube: julia_miocene/featured" rel="nofollow">https://www.youtube.com/@julia_miocene/featured
А ещё есть совсем свежий стрим с Вадимом Макеевым, где процесс очень подробно объяснён: https://www.youtube.com/watch?v=ZhWdhMpJ8bs
Шикарное, короче :)
P. S. Юля Миоцен. Мне подсказали :)
#css #art
#ссылка дня
Немного неожиданного контента хотите?
Не так давно открылся сайт DOTOWN с семью сотнями иконок в стиле 8-битных игр от дизайн-студии под руководством экс-дизайнера Nintendo:
https://dotown.maeda-design-room.net
Все изображения можно использовать бесплатно без ссылок, в том числе и в коммерческих проектах! Есть ряд ограничений.
Так что если вам за каким-то интересом понадобились восьмибитные иконки… ну может пет-проект у вас, вы знаете, куда идти.
Да, на японском. Но кого это вообще останавливало?
#icons #8bit #бородач
#статья дня
Надо было эту статью на фишки раздербанить, ну да ладно. Итак, задача: сделать сетку, элементы которой должны иметь четкое и, возможно, изменяемое соотношение сторон.
Передавать соотношение сторон можно через классы, конечно, но мы в 2023 году, так что будем использовать CSS-переменные (`--ratio: 4/3`). Дальше имеются два варианта:
1. Задать соотношение сторон всей строке через, удивительное рядом, складывание дробей: 4/3 + 2/3 = 6/3. Сразу можно понять, что минусов у решения достаточно.
2. flex-grow. Легко и просто.
Подробнее о решениях и ходе мысли в статье:
https://9elements.com/blog/building-a-combined-css-aspect-ratio-grid/
Флексы рулят, котаны :)
#css #grid #flex
Самые частые ментальные проблемы, с которыми сталкиваются разработчики:
● Выгорание
● Тревога
● Апатия и потеря смысла
● Проблемы в социализации и личной жизни
При этом не больше 8% обращаются за помощью, остальные игнорируют, обесценивают или высмеивают свои проблемы.
Мы в сервисе психотерапии PSY помогаем разработчикам справляться с профессиональной деформацией и решать ментальные проблемы, а не бегать от них.
Решиться бывает непросто, поэтому мы начинаем с бесплатной консультации с одним из наших специалистов, на которой вы сможете понять, нужна ли вам помощь и подходят ли наши специалисты.
Записаться на бесплатную консультацию можно прямо сейчас через бота: @galina_psybot
#реклама
#статья дня
Что произойдёт, если посетитель вашего сайта или веб-приложения отключит куки?
Давайте перефразирую: обернули ли вы в try-catch все ваши вызовы localStorage, sessionStorage, IndexedDB? Нет? А почему?
Почему я до сих пор в тестовых вижу сырые вызовы localStorage? Опустим тот факт, что многие там ещё и токены хранят…
Так вот: если пользователь отключит куки, он получит такое веселье, как на скриншоте выше. И пустой экран заодно. Оно вам надо? Обработайте ошибку и предупредите нормально.
Ошибаются все, даже MDN. Вот собственно обзорная статья об этом: https://blog.tomayac.com/2022/08/30/things-not-available-when-someone-blocks-all-cookies/
Я тоже огрёб как-то раз, забыв обернуть localStorage в try-catch и выкатив код на продакшен. Оказалось, среди клиентов много параноиков.
Ну что делать.
#cookie #localStorage #бородач
#инструмент дня
Каждый разработчик за свою жизнь должен сделать следующее: написать музыкальный плеер, тетрис, игру Жизнь. Если ты веб-разработчик, то ещё свою CMS, PHP-фреймворк, стейт-менеджер и... и уведомления.
Если тебе 14 лет, то ещё и криптобиржу.
Короче, уведомления вообще штука раздражающая. Всегда чего-то не хватает в существующих решениях. Но в любом случае, сегодня вашему вниманию React Hot Toast: https://react-hot-toast.com/
Отличаются маленьким весом, возможностью отмены скрытия пока наведена мышь, поддержкой промисов и JSX-содержимого, стилизуются, прости господи, через Tailwind. Не думал, что внесу это в плюсы, но после UI-китов на Emotion это уже очень хорошо.
Ещё бы туда диалоги добавить, было бы уапще.
Всем тостов, котаны! За мой счет :)
#react #toast
#инструмент дня
Разобраться в концепциях 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 #бородач
#статья дня
Работа с экранными единицами это моя любимая тема. Когда-то я подписчиков в канал набирал из CSS-чатов тупо кидая им этот пост: /channel/htmlshit/65 — и потом этот, с решением поновее: /channel/htmlshit/1233
Почему он был так популярен? Просто потому что 100vh на мобилах работали как не пойми что, из-за динамических тулбаров.
Ну и, конечно, моя любимая формула перевода из пикселей в rem и vh/vw: /channel/htmlshit/1182
Вот только с той поры прошло много времени и успели появиться ещё более относительные единицы, рассчитывающиеся Не от всего экрана, например, а как раз с учетом скроллбара, верхнего и нижних тулбаров.
У меня не доходили руки описать их или даже попробовать, поскольку тогда поддержка была не очень. Но сейчас самое время! Ахмад Шадид как раз подготовил свою статью: https://ishadeed.com/article/new-viewport-units/
Люблю статьи Шадида за художественное оформление. Круче, наверное, только у Камю.
В общем, svh, lvh, dvh — вам туда :)
#css #viewport
[Успех в геймдеве — ошибка выжившего?💀]
Почему у одних получается делать крутые игры, которые приносят деньги и славу, а у других — нет? Как перестать делать посредственные игры и начать делать хиты?
Успех в геймдеве — не ошибка выжившего, а цель, которую мы преследуем. Мы стремимся создавать игры для игроков, в которые будет интересно играть.
Многие бросают на полпути, но мы настойчивы и готовы дойти до конца.
⚡️Приглашаем на трехдневную онлайн геймдев конференцию, где ты узнаешь, как начать делать хорошие игры. Мы развеем все твои сомнения и докажем, что геймдев — это далеко не ошибка выжившего!
На конференции ты получишь кучу практических рекомендаций и поймешь, как создавать игры, которые получат миллионы скачиваний.
Регистрируйся тут прямо сейчас, чтобы ничего не пропустить. Программа конференции по ссылке.
Звучит как офигенная возможность вкатиться в геймдев. Так что погнали!
#видео дня
Что приходит в голову при упоминании сложных анимаций?
Ну, Lottie, очевидно. Кто-то что-то нарисовал в After Effects Bodymovin, потом это экспортировали в специально сформированный JSON и, собственно, плеером-плагином запустили в огромном количестве сред, от веба до мобил и десктопов. Да, ваши любимые стикеры и реакции в Telegram тоже Lottie.
Есть ли альтернативы? Конечно! Например, активно набирает обороты Rive. Это векторный редактор, заточенный специально под анимации.
Формат гораздо легче, чем у Lottie, а список поддерживаемых платформ (рантаймов) даже больше. Да, на стороне Lottie сообщество After Effects, но и это решаемо экспортом. Имеется и сайт сообщества со свободно скачиваемыми анимациями.
Ладно, к чему это я. Вот видеоурок по интеграции Rive-анимации в React-приложение: https://youtu.be/5hvhOb9zLeg
Анимация простая, но попробуйте скачать что-нибудь с сайта сообщества и попробовать сами :)
Удачи в анимировании, котаны!
#rive #инструмент #tool #lottie #animation #бородач
Аккуратность в мелочах, удобство и уникальная операционная система. Это всё об АТОМ — первом российском электромобиле, который появится в продаже в 2025 году. Подписывайтесь на @atom_auto, чтобы узнать, как он создаётся.
#реклама
#фишка дня
Многие (к сожалению, не все) кто хоть раз разрабатывал формы, сталкивались с элементом label (лейбл, ярлык, как вам угодно). И знают, что при правильном его использовании пользователю не приходится целиться мышью в галочку или радиокнопку.
Кто-то добавит при этом, что скринридеры могут ассоциировать лейбл с элементом ввода и пользователи с нарушением зрения могут легко сориентироваться в вашей форме.
Но не все знают, что лейбл можно повесить и на элемент button: https://codepen.io/alinaki/pen/XWjLedQ
Да, возможно, кнопке свой ярлык не нужен и даже MDN сообщает нам об этом, но!
Но в лейбл можно добавить дополнительную информацию, которая будет однозначно и семантично связана с кнопкой и поможет, например, скринридерам или при создании тултипа.
Лейблом можно продублировать кнопку без внесения лишней когнитивной нагрузки (но не стоит, фокус он не примет). Пожалуй, для каких-нибудь игровых интерфейсов вполне может быть приемлемо.
А вот если вы не используете кнопки и балуетесь role=“button” на div-ах (в лучшем случае) — этой возможности вы лишены в принципе.
#html #button #label #бородач
#инструмент дня
С места в карьер: утилита qnm предназначена для поиска установленных пакетов в node_modules. Зачем?
Ну, как минимум, это офигенно быстрый способ просмотреть версии всех установленных лично и не очень лично модулей: https://github.com/ranyitz/qnm
Почему ремарка про "не очень лично"? Потому что какой-либо пакет может запросто тянуть за собой более старую или более новую версию некой утилиты, на которую вы так сильно опирались.
Почему-то меня в этом отношении очень раздражает emotion. Его тащат просто куда ни попадя, а у людей потом на CSS-in-JS аллергия...
Так или иначе, посмотреть, почему тот или иной модуль был установлен — это очень полезно.
Моя рекомендация!
#npm #node #package
#инструмент дня
А есть ли среди моих подписчиков школьники и студенты/аспиранты? Потому что то, что я нашёл, очень может пригодиться при подготовке различного рода рефератов, презентаций и научных работ.
И это — кто бы мог подумать, моя любимая тема — снова DSL для представления диаграмм! Но на сей раз, всяческого рода научных, от простых блок-схем до описания векторных полей и молекул!
Ну вот буквально, молекула на иллюстрации описывается простыми конструкциями вроде:
SingleBond(N2, C4)
SingleBond(C4, C5)
DoubleBond(C5, C6)
Закрути свою карьеру веб-разработчика с нами! 🚀
Онлайн-школа METHED проводит бесплатный интенсив по frontend-разработке с 18 по 21 июля!
✔️Мы вместе с тобой напишем сайт для заказа коктейлей, и эта работа будет украшать твоё портфолио! Дизайн-макет создан опытным дизайнером, чтобы твой сайт выглядел уникально и привлекательно!
✔️Получишь массу удивительных фишек и техник из мира фронтенд-разработки, чтобы реализовывать свои проекты ещё интереснее!
✔️На прямых эфирах ты получишь обратную связь от автора интенсива Максима Лескина, который всегда готов помочь и поделиться своим опытом.
✔️Мы будем использовать HTML, CSS и JavaScript, чтобы наши сайты были современными и функциональными.
И самое важное – интенсив абсолютно бесплатный! Не упусти свой шанс изменить свою жизнь!
Спеши записаться, ведь места ограничены! Стань частью нашей онлайн-школы уже сейчас!
Регистрируйся 👉 https://in.methed.ru/md/87516269a9d14553c467aea355eaedab?utm_source=telegram&utm_medium=july_freshy_bar&utm_campaign=htmlshit
#статья дня
С чего начать построение своего веб-секвенсора?
Конечно же с изучения Web Audio и Web Midi API!
Статья Мэдса Стоуманна рассказывает не только о том, как сверстать свою MIDI-клавиатуру и потыкать в неё мышкой, чтобы послушать звуки, но и как подключить настоящую MIDI-клавиатуру и даже подсветить аккорды: https://blog.logrocket.com/exploring-web-audio-api-web-midi-api/
Ну и, конечно, сразу демо: https://codepen.io/stoumann/pen/ZEjjyEp
Есть у кого MIDI-синтезатор, кстати? Делитесь результатом!
#web #audio #grid #music
Пишете код? А бесплатный помощник не нужен?
Речь не о студенте-матфака, а о нейросети TinyCodeImprover. Она нехило ускоряет кодинг.
С этим справляется и GPT-4, но… в него надо каждый раз загружать код. А TinyCodeImprover один раз подгружает файлы проекта и работает с ними сколько угодно.
Автор проекта, LOVESYUK, схитрил и заставил нейросеть писать код для самой же себя по ТЗ — и это сработало. Потом CodeImprover делала ревью на свой код — и даже нашла ошибку.
Подписывайтесь на @lovesyuk, чтобы узнать о свежих проектах, сильно упрощающих работу IT-спецов
#реклама
#инструмент дня
Что делать, если API не готов, моки писать лень, а приложение разрабатывать надо?
Ну или, например, портфолио отсутствует, а хочется сделать условную книгу контактов или приложение для знакомств? Откуда данные-то брать? Забивать lorem ipsum тоже неохота...
На помощь придёт генератор случайных юзеров!
https://randomuser.me/
Ну и естественно, есть и полноценный генератор случайных данных, в котором всё, что вам нужно сделать — это описать их схему и пару правил генерации: https://randomapi.com/
Так ваше приложение из портфолио будет выглядеть максимально реально. Да и в продакшене не придётся ждать кого-либо ещё.
#api #random #бородач
#видео дня
Давно стоило и пересмотреть это видео, и выкатить в канал.
Многим из вас знакома концепция DRY: Don't Repeat Yourself. Вот только многие доводят её до абсурда, плодя абстракцию за абстракцией и пытаясь объять необъятное (сам таким был).
Но есть и другой подход, буквально — WET.
Write Everything Twice.
Да-да, пиши-повторяй. Стоит ли тратить время на объединение разных сущностей до того, как это вообще понадобится, или лучше потратить его на закрытие бизнес-потребности?
И вот об этом доклад Дэна наше всё Абрамова на конференции Deconstruct'2019.
Есть транскрипт, кстати: https://www.deconstructconf.com/2019/dan-abramov-the-wet-codebase
В общем, думайте, так ли вам нужны максимально универсальные компоненты и логика. Может, стоит сначала реализовать задачу, избежав дырявых абстракций?
#video #conference #dry #wet #бородач
Хотите создавать высоконагруженные сервисы в сферах онлайн-ритейла, доставки, финтеха, интернета вещей? Тогда вам нужно изучать язык программирования Golang на курсе Яндекс Практикума «Профессия Go-разработчик».
В профессии две программы: обучение до уровня Junior+ и обучения до уровня middle. Обратите внимание, эти курсы подходят только тем, у кого есть опыт разработки, нужно будет пройти входной тест и узнать свой уровень.
Как вы будете учиться
• Сразу писать боевой сервис.
Вы будете писать один большой проект на протяжении всего курса, постоянно пополняя, усложняя и модифицируя кодовую базу. Кроме того, в уроках будет много практических заданий, которые вы сможете выполнять в любимой среде разработки.
• Общаться с менторами — senior Go-разработчиками.
У вас будет ментор — действующий senior Go-разработчик, который будет помогать находить ответы на вопросы, проверять ваш код, проводить вебинары для разбора задач.
• Готовить выпускной проект.
После прохождения основной программы у вас будет время написать выпускной проект для вашего портфолио. Вы сможете объединиться в команды или работать самостоятельно, реализовать свою идею или взять за основу один из предложенных вариантов.
Начать учиться
#такое дня
Без комментариев.
P. S. Ладно, ладно. Накинулись. Это все по историческим причинам так сложилось и вообще deprecated: https://developer.mozilla.org/en-US/docs/Web/API/Document/all
Как фронтендеру расти дальше?
Для роста нужен опыт с проектами посложнее, но бывает, что таких проектов на текущей работе нет и не предвидится. Можно залететь в оперсорс, но я не знаю о крупных проектах, куда можно легко залететь и получить поддержку наставника.
Как вариант, пройти обучение с акцентом на практику, которое было создано руками тимлидов с опытом работы в Яндексе, Вконтакте, TON и Frogly.
Здесь вы будете постепенно добавлять в проект самые актуальные технологии и разбираться в том, как они работают.
За 5 месяцев обучения вы научитесь:
- находить и лечить сложные ошибки производительности
- готовить Service Worker и PWA, чтобы сайт работал в офлайне
- делать сайт доступным для людей с ограниченными способностями
- DevOps штукам для фронтендера
- создавать серверную часть веб-приложения самостоятельно с нуля
Приходите прокачивать скиллы
А по промокоду HTMLSHIT22 для вас скидка 7% на ближайший поток.
#ссылка дня
Воскресных котов вам в ленту! Но просто котов вы можете найти где угодно, тут же — HTTP-коты: https://http.cat/
Знать коды протокола HTTP должен каждый веб-разработчик, чтобы не попадать в глупые ситуации и правильно пользоваться API. А раз их можно выучить, глядя на котов, почему бы и нет.
#http #handbook #бородач
#фишка дня
Среди наименее используемых (в 2023 году) правил CSS имеется такое: background-attachment: fixed;
Что оно делает? Ну, собственно, закрепляет фон на экране так, чтобы он не двигался со скроллом. Году так в 2004-2006 было модно, во всяких браузерных играх 🫠
Давайте реабилитируем его.
Бывший деврел Google Jhey предлагает следующее: а что если следить за курсором мыши и передавать координаты в фон?
И таки да:.card {
background:radial-gradient(circle at var(--x) var(--y), ...);
background-attachment:fixed;
}
Передаём --x и --y как координаты курсора и получаем прожектор!
Немного магии блендинга и красота: https://codepen.io/jh3y/pen/RwqZNKa
Время переосмыслять, котаны!
#css #js #var #spotlight
#такое дня
Оказывается, сегодня пятница! И раз я уже выложил рекламу про российский электромобиль, будем закапываться глубже 🫠
Вот вам объяснение z-index за 11 секунд 😬
#статья дня
Smashing Magazine — один из старейших онлайн-журналов по веб-разработке. Статьи там как правило подбираются весьма подробные и полные, объясняющие все аспекты даже, казалось бы, простых эффектов.
Сегодня в наш канал залетает как раз такая статья: 3D-эффекты для картинок. Блеск, параллакс и поворот.
Весьма впечатляющий разбор, включающий в себя даже немного геометрических расчётов, чтоб вы понимали, откуда ноги растут.
Сразу ссылки на кодпены с примерами, чтоб далеко не ходить:
1. https://codepen.io/t_afif/pen/VwEJqKV
2. https://codepen.io/t_afif/pen/qBJyXNy
3. https://codepen.io/t_afif/pen/yLRRBKj
Ну и, конечно, сама статья: https://www.smashingmagazine.com/2023/07/shines-perspective-rotations-css-3d-effects-images/
Будет полезно не только лишь всем.
#css #3d #image
Прекрати мечтать и стань мидлом за 50 дней
Опытные Frontend-разработчики создали несколько бесплатных каналов, в которых регулярно выходят топовые посты для начинающих.
Полезная вËрстка — канал с готовыми решениями повседневных задач: слайдеры, анимация, навигация и т.д.
JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку.
JavaScript тесты — канал с тестами и задачами, который прокачает твои навыки во Frontend-разработке.
CSS доширак — готовые анимации, hover-эффекты и прелоадеры, которые можно вставить в свой проект и настроить пока заваривается Доширак.
Развивайся с нами, ведь так проще!
#видео дня
Вы спорили об этом всю свою карьеру. Делали предположения, правильные и не очень. А потом появились is, has, контейнерные запросы, слои... И всё заново.
О чём это я? Конечно же о производительности селекторов CSS!
Насколько быстр начальный рендер? Насколько замедляется перерисовка экрана при использовании новомодных фишек CSS? На все эти вопросы ответить можно только... только читая исходники браузерных движков. Вам не лень? Мне — точно.
А вот Патрику Броссе вот было не лень. И на недавно прошедшем CSS DAY он выступил с докладом, который так и называется: Style Recalculation Secrets They Don’t Want You To Know
Собственно, ссылочка: https://www.youtube.com/watch?v=WRiOWJZoKlw
А для самых внимательных — в имени ссылка на слайды.
Вышло офигенски залипательно, рекомендую всем.
#css #performance