14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#ссылка дня
Сегодня я подобрал максимально красивый ресурс: набор демок на WebGL: https://ykob.github.io/sketch-threejs/
Эффекты глитча, игры с частицами, огонь, солнце, вода! Огонь, кстати, выглядит пугающе натурально.
Все примеры с исходными кодами, есть и весьма практичные, вроде галереи.
#js #webgl #бородач
На сайте рекомендуют только Chrome, но на самом деле такое-же расширение есть и для Firefox
https://addons.mozilla.org/en-US/firefox/addon/svg-gobbler/
erid: LjN8JuPVM
Появился канал, в котором можно с нуля научиться фронтенду
Frontend.school() — это место, где простым языком объясняются сложные вещи из мира фронтенд-разработки. Если вы давно хотели начать, но боялись, то с этим каналом у вас точно всё получится!
А ещё сейчас там проходит розыгрыш полезного гаджета для каждого айтишника. Скорее заходите и подписывайтесь, чтобы успеть.
Фронтендерами становятся тут: @frontend_school
Прошло почти два года. И вы не представляете, на theguardian.com даже после редизайна и перехода на гибридный режим сайта (классический рендеринг плюс SSR), у них всё тот же фронтендер-веган!
Ну или новый. Неважно. Их сейчас много развелось.
<label id="veggie-burger"
aria-label="Toggle main menu" for=
"top-nav-input-checkbox" data-link-name=
"nav3 : veggie-burger : show" tabindex="0" role=
"button" data-testid="
" class=
"dcr-w5ozf4"><span class="dcr-1nvgr5i">Show
More</span></label>
Бесплатный практический вебинар: Профессия «Frontend-разработчик».
⏰ Когда: 25 июля в 19:00 по мск.
Погрузитесь в решение реальной задачи и напишите мини-игру, которая работает прямо в браузере.
Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular?
Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии.
🎁 Всем, кто зарегистрировался - Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику - Карта компетенций начинающего Frontend-разработчика.
#инструмент дня
А есть ли среди моих подписчиков школьники и студенты/аспиранты? Потому что то, что я нашёл, очень может пригодиться при подготовке различного рода рефератов, презентаций и научных работ.
И это — кто бы мог подумать, моя любимая тема — снова DSL для представления диаграмм! Но на сей раз, всяческого рода научных, от простых блок-схем до описания векторных полей и молекул!
Ну вот буквально, молекула на иллюстрации описывается простыми конструкциями вроде:
SingleBond(N2, C4)
SingleBond(C4, C5)
DoubleBond(C5, C6)
#заметка дня
Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.
Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать Shift чтобы скроллить горизонтально… Какая прелесть.
И вот тут ты понимаешь, с какими неожиданными проблемами могут столкнуться люди, ограниченные в движениях. А я всего лишь пил чай!
Решение же на самом деле до безумия простое: tabindex=“0” на контейнер и дело в шляпе. Это позволит пользователю установить фокус на желаемый блок и скроллить стрелками.
По пути, раз уж пошло дело, стоит установить стили фокуса и атрибуты role и aria-labelledby для соответствия Web Content Accessibility Guidelines.
Документ здоровый, но для практического применения нужны лишь несколько пунктов: «2.1.1 Keyboard», «4.1.2 Name, Role, Value», «1.4.10 Reflow», «2.4.7 Focus Visible».
Названия разделов говорят сами за себя: установите возможность клавиатурного фокуса, не забыв дать визуальную подсказку, и предотвратите скролл всей страницы целиком.
В общем, не ленитесь. Дайте людям возможность прочитать статью так, как удобно им. Особенно когда это ничего вам не стоит 😉
Ну и повторю решение: https://codepen.io/alinaki/pen/xxgpmeZ
#css #table #keyboard #focus #a11y #бородач
Авито запускает менторскую программу, доступную для каждого, кто стремится к развитию и росту 🚀
Наставники из компании прошли тот же путь, что и вы. Они знают, как это — искать работу, стремиться к повышению, создавать крутые продукты и справляться с вызовами. И готовы делиться своими знаниями и опытом!
🔍С чем поможет ментор:
• разобраться в новых технологиях и смежных областях
• подготовиться к сложному собеседованию
• прокачать хард-скиллы
Найти ментора из Авито можно на Getmentor и Solvery.
Есть разные форматы работы: платные встречи или сессии за взнос на благотворительность 💚
#разгрузка дня
Ну хэ-тэ-эм-эл же? У кого как?
Успей ухватить 7 дней бесплатного обучения фронтенд-разработке!
Скоро Роман Чернов, веб-разработчик с 10-летним стажем, проведёт онлайн-интенсив с практикой и обратной связью.
На эти 7 дней план такой:
- Сверстаешь веб-сайт на HTML + CSS;
- Реализуешь функционал на JavaScript;
- Используешь фронтенд-фреймворк Angular;
- Подключишь Backend и загрузишь сайт на хостинг;
- Получишь советы по доработке своего проекта.
В итоге ты разработаешь качественный сайт, который не стыдно добавить в портфолио или продать, освоишь азы работы с фреймворком Angular и получишь море бесценного опыта в вёрстке сайтов.
👉 Забрать бесплатно 7 дней обучения frontend-разработке
А тем, кто ещё только думает переходить в IT, дадим пошаговый план как стать успешным frontend-разработчиком с нуля.
О, в комментариях подкинули. Странно, что я сам не догадался поискать подобное.
Читать полностью…
Если вы сотрудник ИТ-компании, проходите опрос о работе в сфере ИТ по ссылке. Это займёт всего пять минут.
Всех, кто поможет ответить на вопросы исследования до 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
#книга дня
На сцене снова (раз, два) Александр Беспоясов. На сей раз с книгой «Refactor like a superhero».
Выложена на Гитхабе, на двух языках: русском и английском. Выбирайте любой, засылайте PR-ы на исправления и дополнения.
Читаем, не стесняемся!
#book #refactor #бородач
#инструмент дня
Как потырить понравившуюся SVG с сайта в учебных, конечно же, целях?
Поставить себе SVG Gobbler!
https://www.svggobbler.com/
Скачать, оптимизировать, посмотреть код — без лишних действий.
#svg #extension #бородач
никто:
theguardian.com: я веган
...
Вот кого-то распирало, вы поглядите.
#заметка дня
Часто приходится делать таблицы в GitHub Markdown? Тогда лови это знание, пригодится.
Списки и контейнеры не могут и не должны отображаться внутри таблиц, набранных "палочками" (||). Палочки — только для текстового контента, для данных. Точка.
Нужен табличный, кхрм, макет (ну список изменений там запихать) – используй HTML таблицы.
Но есть нюанс.
Чтобы правильно использовать Markdown внутри HTML-таблиц, нужно этот самый контент с двух сторон обложить переводами строки, вот так:<td>_markdown_ **тут**</td>
...и будет норм.
#markdown #бородач
#фишка дня
Как анимировать элемент по клику на чистом CSS?
Ведь псевдокласс :active даётся ровно в тот момент, когда ты нажимаешь кнопку мыши и тут же пропадает, как кнопка была отжата.
Например, как сделать эффект «копирования» текста, как на видео? Совсем неохота навешивать что-то ещё на onmousedown и onmouseup...
Ответ на самом деле не столь очевиден, как может показаться. И имя ему :not(:active).
Схема работы проста. Навесили конечное состояние перехода на неактивное состояние, а на активное — установили начальное.
Выглядит в итоге как-то так:
https://codepen.io/alinaki/pen/wvEdaWG
И никакого жонглирования классами не надо.
#css #active #click #animation #бородач
В последние дни на VC огромное количество статей про нейросети. Контент разного качества, иногда устаешь от бесконечных «Почему Chat GPT изменит мир в ближайшие 2 года».
Тем интереснее увидеть статьи, где есть настоящая фактура того, как делаются проекты с генеративным AI, компьютерным зрением и LLM.
Недавно на канале студии разработки Unistory вышла подборка их статей за три месяца — крутой материал про автоматическую транскрибацию для индусов. Нет, не индусский код, а ДЛЯ индусов.
Если коротко, автор канала Саша Аксёнов выкладывает здесь инфу про свои проекты, децентрализованный AI и разработку на западный рынок. Время от времени публикует вакансии. Не стесняйтесь подписываться — мемы иногда тоже бывают.
#инструмент дня
Понадобилось мне дать отделу маркетинга возможность удобно просмотреть и проанализировать некоторые внутренние JSON-файлы, используемые для доставки контента. Естественно, захотелось как-то облегчить всем жизнь и постараться доступно показать содержимое жисона. Простого форматтера было явно недостаточно.
Оказалось, изобретать ничего не нужно — уже есть https://jsonhero.io/
Сгруппирует по категориям, покажет связанное, отобразит картинку.
Удобно.
#json #viewer #бородач
#баг дня
От подписчика в @htmlshitchat:
В мобильном сафари есть бага с залупленными видео: при проигрывании видео нажимаешь кнопку выбора вкладок, ждешь время для окончания одного цикла проигрывания, возвращаешься на табу и видео заморожено на 0 кадре. Хотят статус у него paused = false.
Проще всего проверять на коротких видео: https://codepen.io/mdss/pen/OJeVbRP
Репродюс: открываешь ссылку, ждешь начала видео. Жмешь кнопку выбора вкладки, ждешь 6 секунд, возвращаешься
Я для себя выявил два способа лечения, одно с подпиской на timeupdate (что дорогое решение), а второе это на подписку фокуса окна. Только нюанс в том, что надо не просто заново тригернуть метод play, а еще перед ним pause.
От автора канала:
На iPhone 14 Pro и iOS 17.5.1 трюк с вкладками к багу не приводит. А вот переключение между приложениями и такое же ожидание полного цикла видео — да.
Делитесь вашими результатами. А мы пока попробуем найти ишью в багтрекере.
#инструмент дня
Тут недавно в комментариях проскочил вопрос, чем так удобна командная оболочка zsh (Z shell) и набор расширений к ней Oh My Zsh. Чем оно лучше bash и вообще — ну зачем?
Ну короткий ответ — Tab умнее :)
Длинный — плагинами! Я не буду распыляться сейчас вообще, просто покажу один из свежих: автодополнение по npm-скриптам! Поддерживаются npm, yarn и pnpm.
Видео говорит само за себя, но что конкретно мне нравится — отображается не только команда, но и сам скрипт!
https://github.com/grigorii-zander/zsh-npm-scripts-autocomplete
Я сам только начинаю путь в zsh, но дефолтные настройки того же Oh My Zsh очень удобные.
#zsh #plugin #tool #linux #macos #wsl #бородач
#ссылка дня
Кто-то: Идеальной страницы 404 не существует...
Пежо: подержи мой бокал вина!
https://www.peugeot.fr/pourquoi
Я даже картинку прикладывать не буду, чтобы не сбить настрой :)
#ссылка дня
Недавно в нашем чате был жаркий спор на тему доступности. Мол, нормально делай — нормально будет и вообще морочить себе голову не надо, таких людей единицы.
Оно как бы и да и нет. Например, давайте представим себе на минуту средних дизайнеров сайтов и приложений.
Чаще всего они сидят в условиях, близких к идеальным. На стуле, перед большим монитором. И рисуют, не знаю, приложение для оплаты парковки. Он или она молоды и здоровы, мышка твёрдо лежит в руке. Идиллия.
Как по их представлению человек будет пользоваться приложением? Припарковался, устроился поудобнее и оплатил?
Да хрен там плавал. На бегу к офису, с документами в свободной руке. В этот момент здоровый человек превращается в инвалида, который в кнопку-то с трудом попадает. Телефон скользит, экран бликует. Это уж точно не идеальные условия.
И так с любым проектом. Думать надо.
Собственно, вот и ссылка на сегодня: 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