htmlshit | Unsorted

Telegram-канал htmlshit - Будни разработчика

14544

Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat

Subscribe to a channel

Будни разработчика

"Разработка игр — это дорого!" Но как же minecraft, among us?

Indie Spotlight 👈 чат для инди-разработчиков, в котором найдётся ответ на любой вопрос:

— Как собрать и управлять командой по разработке игр?
— Как продвинуть игру без бюджета?
— Как монетизировать проект в условиях санкций?

👆Также у проекта есть телеграм-канал, где вы сможете ознакомиться с играми других разработчиков, оценить игры других участников, а также принять участие в розыгрышах призов таких, как Playstation 5, мониторы и раздачи ключей к играм💡

Это первое подобное комьюнити в телеграм:
➡️ Вступить в чат
➡️ Перейти в канал

Читать полностью…

Будни разработчика

#статья дня

Итак. Я когда-то вам разгонял про фреймворк RICE. И нет, это не про джаббаскрипт, это про работу. Как сортировать задачи, грубо говоря. Что важно, что менее важно. А что не нужно. Вот тут: /channel/htmlshit/1249

Думаете, это просто теория? Вот и народ из Shopify тоже так думал, а в итоге стали переводить своё мобильное приложение на React Native согласно приоритетам, рассчитанным по RICE. Золушки, ага.

На самом деле все логично: бахнуть разом огромное приложение на новую технологию невозможно, но и вслепую выбирать экраны для переделки — тоже. Добавление же экранов в новой технологии не решит проблему наличия старых и их поддержки. Так что пришлось подумать.

Собственно, вот оно: https://shopify.engineering/migrating-our-largest-mobile-app-to-react-native

Получилось долго
.

#react #native #rice #бородач

Читать полностью…

Будни разработчика

#расширение дня

Ну что, мы с вами уже наворовали SVG со всего интернета, пришло время воровать кнопки!

Видимо, так подумал Анатолий Зенков, создавая своё расширение с незамысловатым названием Button Stealer.

Механизм работы похож на игры без игрового процесса: просто ходите по сайтам, а коллекция сворованных кнопок автоматически пополняется.

Покажи мне свои кнопки и я скажу, кто ты.

#chrome #button #stealer

Читать полностью…

Будни разработчика

#статья дня

Не так давно в чате канала проскочил вопрос, как правильно делать контейнеры, которые могут вылезать за визуальные границы.

Например, основной контент находится посредине и занимает в ширину 80-120 приятных для чтения глазу символов, а вот картинки хотелось бы разнести до краёв.

Техника называется full bleed. Я не знаю, как точно перевести.

Если посмотрите видео, то виден ещё один вариант использования, когда галерея выходит за пределы экрана лишь с одной стороны, но дальше тем не менее границы игнорирует.

Вот так: https://codepen.io/hexagoncircle/pen/gOWjwme

Альтернативный вариант: https://codepen.io/maartenbruggink/full/eYWjxae

Раньше такое делалось жонглированием полями, теперь же у нас есть гриды.

И у небезызвестного Джоша Комо есть статья как раз об этом: https://www.joshwcomeau.com/css/full-bleed/

Тем не менее, я рекомендую посмотреть приложенные кодпены, поскольку в них зоны грида именуются и становится понятнее, что к чему.

Всем full bleed, котаны!

#css #fullbleed #gallery #бородач

Читать полностью…

Будни разработчика

#ссылка дня

Сегодня я подобрал максимально красивый ресурс: набор демок на 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)

...и так далее. Прелестно же!

Короче, называется это всё Penrose: https://penrose.cs.cmu.edu/

Работает полностью в браузере, написано на TypeScript и открыто. Естественно есть биндинги к React.

Всем науки, котаны!

#dsl #diagram #science #бородач

Читать полностью…

Будни разработчика

#заметка дня

Недавно я читал обзор автомобиля и автор, в лучших традициях, решил запихать в статью огромную таблицу.

Таблица находилась в выделенном контейнере и приводила к появлению горизонтального скролла в нём. Мне пришлось тянуться к мыши, зажимать 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-разработчиком с нуля.

Читать полностью…

Будни разработчика

О, в комментариях подкинули. Странно, что я сам не догадался поискать подобное.

Читать полностью…

Будни разработчика

#инструмент дня

Предположим, тебе заказали разработку Flutter или React Native приложения. Да даже Cordova или Ionic. Предположим, ты даже справился. Настало время собирать под iOS. И тут облом. Нужна macOS.

Можно купить старый мак, можно завести виртуальную машину, обмазавшись ютубом и tonymacx86.

А можно воспользоваться Docker и вот этим прекрасным репозиторием: https://github.com/sickcodes/Docker-OSX

Куча рецептов прямо в Read.me, куча полезных скриптов. В общем, надо брать и пробовать.

Отпишитесь потом о результатах, ок?) Тоже при случае попробую. Прост мак-то есть)

#docker #macos #бородач

Читать полностью…

Будни разработчика

Многие мечтают стать тимлидом, но только некоторые знают, что для этого мало уметь писать код и разбираться в архитектуре.

Сильный тимлид умеет управлять проектами любых масштабов, оценивать их стоимость и отслеживать финансовую эффективность, и что немаловажно – управлять командой.

Все эти знания можно получить на совместной магистерской программе ИТМО и компании «Самолет» – «Руководитель IT-разработки».
Помимо лекций и практик вас ждут:
– Учебные и бизнес-проекты от от Big Tech компаний
– Хакатоны каждый семестр
– Индивидуальные карьерные консультации с экспертами.

На программе можно обучаться бесплатно – 10 мест оплачивает компания «Самолет», так и на коммерческой основе. Лучшие студенты будут получать дополнительную стипендию «Самолет».

Переходите на сайт, чтобы получить программу обучения и подать документы.

Реклама. Университет ИТМО ИНН:7813045547

Читать полностью…

Будни разработчика

#такое дня

Если вы не знали или не понимали, что такое "секрет Полишинеля", я вам сейчас всё объясню.

Тут выяснилось, что в браузерах на основе движка Blink (Chrome, Brave, Edge, Яндекс.Браузер сами проверите) есть специальное скрытое расширение, которое предоставляет сайтам Google данные о нагрузке на компьютер по каждой вкладке отдельно.

То есть, если Google определяет, что звонок в Meet слишком нагружает систему, он может что-то с этим сделать, ухудшить качество видео или, наоборот, улучшить, если есть запас.

Казалось бы, ну и что такого? А то, что конкурентам подобное недоступно. Тот же Zoom потребует дополнительных телодвижений.

ID расширения: nkeimhogjdpnpccoofpliimaahmaaome
Название: hangout_services.

Предоставляемые дополнением данные отображаются в сервисе meet.google.com в панели "Troubleshooting".

Ну что, это уже недобросовестная конкуренция, или так и надо? :)

#google #chrome

Читать полностью…

Будни разработчика

AvitoTech выпустили бесплатный видеокурс по JavaScript, и четвёртый эпизод уже доступен к просмотру.

В новом выпуске вы узнаете про устройство и размер памяти программы, стек и кучу, Oddball и иммутабельные примитивы. Это поможет создавать эффективные программы, которые оптимально используют память.

Не забудьте подписаться на канал, чтобы не пропустить следующие выпуски.

Читать полностью…

Будни разработчика

#книга дня

На сцене снова (раз, два) Александр Беспоясов. На сей раз с книгой «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 #бородач

Читать полностью…

Будни разработчика

https://www.404s.design/

Читать полностью…

Будни разработчика

#ссылка дня

Кто-то: Идеальной страницы 404 не существует...

Пежо: подержи мой бокал вина!

https://www.peugeot.fr/pourquoi

Я даже картинку прикладывать не буду, чтобы не сбить настрой :)

Читать полностью…
Subscribe to a channel