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

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

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

Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: /channel/htmlshit/2516

Пришло время узнать, какие же еще атрибуты стоит использовать и зачем.

А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/

Например, вы знали, что есть атрибут для автоматической вставки одноразового кода, присылаемого по SMS?

Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.

Естественно, присутствуют ссылки на документацию, рассмотрены разные комбинации атрибутов. Особенно порадовал полный список автодополнения. Оно, конечно, редко когда правильно работает (зависит от усилий разработчиков), но уж если работает — то это приятно.

#input #attribute #mobile #tool #бородач

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

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

#фишка дня

О проблеме вертикального центрирования контента в CSS можно слагать легенды, писать статьи, делать целые сайты...

Даже грустно, что всё это подходит к концу. Ведь теперь у нас есть не только флекс и грид, но и такое простое и понятное align-content.

Да, это свойство с давних пор является базой во flex- и grid-моделях, но начиная с Chrome 123, Firefox 125 и Safari 17.4 поддерживается и в — 🎉 — блочной модели!


.container {
align-content: center;
}


Демо: https://codepen.io/alinaki/pen/ExBzeLW

Но всё же советую пройти по ссылкам в начале поста и посмотреть разные варианты. Ну, вдруг у вас браузеры постарше 🙈

#css #align

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

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

Как искусственный интеллект меняет правила игры в бизнесе?

Приглашаем тебя на митап по Data Science от экспертов Газпромбанк.Тех, где ты узнаешь:

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

В конце тебя ждет нетворкинг с участниками и спикерами митапа.

Регистрируйся и приходи 19 сентября к нам в гости: Москва, ул. Коровий Вал д.5, БЦ «Оазис» — https://vk.cc/cAHhly

Реклама, Банк ГПБ (АО), ИНН: 7744001497, erid: 2VtzquvrLaT

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

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

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

Надоело каждый раз выходить из уютной консоли и открывать caniuse.com, чтобы посмотреть, с каких браузеров поддерживаются сабгриды?

Ой, только не говорите, что я один тут верстаю вслепую.

Вашему вниманию Bramus Van Damme и его caniuse-cli: bramus/caniuse-cli" rel="nofollow">https://www.npmjs.com/package/@bramus/caniuse-cli

$ caniuse viewport-units
$ caniuse "viewport units"
$ caniuse @property


Имеется автокомплит для zsh.

Ну, консольные маньяки, перепись!

#cli #caniuse

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

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

#спасение дня

Итак, поскольку компания Пежо решила уменьшить количество прекрасного в этом мире и превратила свои страницы 404 из нечто прекрасного в нечто стандартное, мы решили восстановить статус-кво.

Вот как выглядела их страница 404 до недавнего времени: https://web.archive.org/web/20240723141538/https://www.peugeot.fr/pourquoi

Я больше не хочу терять это впечатление, потому решили хотя бы сохранить скриншот.

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

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

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

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

Я не говорю сейчас о рипах с сайтов конкурентов. У меня была ситуация – надо было собрать списки магазинов небольшой сети, которые просто валялись по разным региональным шаблонным ресурсам.

Тогда я воспользовался https://github.com/cheeriojs/cheerio, написав простой скрипт на node.js. Это похоже на реализацию селекторов в jQuery, но для Node.js. Разобрал данные и сохранил в JSON.

Оказывается, есть и более кондовые утилиты.

Например, https://github.com/mgdm/htmlq и https://stedolan.github.io/jq

Первый, как нетрудно догадаться, может обработать HTML, а второй — JSON. И всё из командной строки :)

Например, найти все ссылки на странице:

curl --silent https://www.rust-lang.org/ | htmlq --attribute href a


Можно и просто целые куски HTML выдирать, и селекторы использовать. А дальше — все возможности командной строки и скриптов для обработки.

Ну а jq может стать частью вашей CI/CD системы, разгребсти ответы от API GitHub, например, и выдать их в читаемом виде.

#tools #html #json #cli #бородач

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

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

#видео дня

Юлия Миоцен (сходу напоминание, что у нас всё ещё есть рубрика #автор дня) вернулась с планируемой серией видео по 3D-преобразованиям в CSS.

Вот: https://www.youtube.com/watch?v=dgEHpkm0xTI
И незамедлительно последовало видео с практикой: https://www.youtube.com/watch?v=E4Ns_ZuP6Qo

По-моему, абсолютно прекрасный материал, который не стоит воспринимать как руководство по воксель-арту :) Представленные примеры отлично развивают пространственное мышление.

Накатываем туда анимаций по скроллу и вообще будет хорошо.

#css #3d

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

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

#баг дня

Одна из моих любимых фишек инструментов разработчика Google Chrome (aka девтулзов) — это возможность сделать скриншот ноды.

Нужен длинный скриншот страницы? Бахаешь на body или html и сидишь довольный.

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

Но не обошлось без проблем. Ну честное слово, вот же вся страница, на экране. Бери да превращай в картинку. Нет...

Если в вашей ноде есть картинки, добавленные через тег img с атрибутом decoding="async" — они потеряются :(

Вот так вот неожиданно. Видимо кто-то где-то промис не разресолвил :)

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

Но неприятный осадок всё-таки остался.

Сейчас ищу формальное описание бага в багтрекере. Если не найду — придётся заводить.

Демо: https://10web.io/blog/how-to-create-a-blog-on-wordpress/

Просто попробуйте сделать скриншот body, не скролля заранее.

Проверено на Chrome 128.0.6613.120.

В итоге, часть картинок может появиться, а часть — нет.

Вообще, я откровенно не люблю ленивую загрузку картинок и контента. Да, помогает на медленном интернете, но абсолютно мерзко и неудобно на нестабильном соединении. Например, в поезде.

#chrome #bug #async

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

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

#фишка дня

Элемент fieldset — штука со сложной судьбой. Вас никогда не удивляло, что тег, предназначенный, казалось бы, для группировки элементов — никогда для этого не используется? Почему?

Ну вот, например, Bootstrap 5: https://getbootstrap.com/docs/5.3/forms/input-group/

Там div, не fieldset.

Всё потому, что до недавнего времени комбинация fieldset+legend отрисовывалась виджетами ОС. Как, например, те же select и button. И даже flex-модель в них не работала правильно:

Баг Chrome (исправлено в 86)
Баг Firefox (исправлено в 46)

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

Тем более, что никто не отменял его одной очень интересной фишки: атрибут disabled будет отнаследован всеми вложенными элементами!

Вот так: https://codepen.io/alinaki/pen/NWLOPqy

Где это может пригодиться?

Очевидно, если есть группа кнопок для отправки формы, а обычно это submit+reset, но может быть и несколько submit-ов на разные адреса, можно не отключать их по одной, а просто положить в fieldset и отключить разом.

Ну или всю форму, при желании.

P. S. disabled дело не ограничивается, invalid тоже работает, введите что-нибудь в текстовое поле: https://codepen.io/alinaki/pen/VwGELwr

#fieldset #disabled #бородач

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

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

#игра дня

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

Особенно в свете последних событий на работе, когда команды объединили и поделили.

Итак, тренажёр менеджера проектов!

http://thatpmgame.com/

Визуально — диаграмма Ганта. Раунды короткие, несколько минут. Цель — уложиться в сроки и бюджет, располагая целым спектром сотрудников.

От ленивых до очень ленивых.

Назначаешь людей на задачи, кто-то подороже, кто-то — побыстрее. И поехали. В любой момент игру можно поставить на паузу и перетасовать людей и задачи.

Забавно, что персы там могут выгорать, если им не хватает работы. Скучают!

Да, во многих конторах прожект-менеджер — это, скорее, переходящий титул, нежели выделенная профессия, поэтому в роли может оказаться кто угодно.

Ну, кто закончит в зелёной зоне? :)

#pm #project #planning

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

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

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

Чтобы разработчикам не приходилось делать это самостоятельно, Yandex Cloud предоставляет готовые решения: Yandex Cloud Postbox — для отправки email-сообщений и Yandex Cloud Notification Service — для мобильных push-уведомлений.

В карточках рассказываем почему стоит воспользоваться готовым решением 👉

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

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

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

Вторая альтернатива (поверьте, ещё год назад их было ну очень много) — https://spaceholder.cc/

Вставляет фотографии с телескопа Хаббл!

Пробуем, ставим пальцы.

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

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

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

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

Потом всё стало немного сложнее.

Особенно непросто стало проектам с примерами. Хочешь ты показать людям какую-нибудь фишку вёрстки картинок, или просто разнообразить серые квадраты, а картинки-то брать негде. Тут на помощь пришёл сервис Unsplash Source.

Он буквально выдавал рандомные картинки по некому адресу. Иногда — тематические. Но с 2021 года сервис был заморожен для новых пользователей, а не так давно — официально закрыт.

Но что же делать, не ставить же скучные плейсхолдеры?

И тут нам поможет https://picsum.photos/

Всё очень просто: идём в их галерею картинок и берём ссылку на нужный плейсхолдер. Естественно, для честного использования.

Как-то так: https://picsum.photos/id/237/200/300

Ну или рандомную нужного размера: https://picsum.photos/seed/picsum/200/300

А ещё картинку можно на лету заблюрить! Вот так: https://picsum.photos/200/300/?blur

Или даже перевести в оттенки серого. Или в webp забрать. Есть даже API по параметрам картинок, всё для тренировки.

Удобно!

P. S. есть вероятность, что сервис заблокирован в РФ. Найду что-нибудь похожее.

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

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

Зарегистрируйтесь на открытый урок "Мониторинг распределенных систем" и получите список вопросов на собеседовании SRE-специалиста от Джуна до Сеньора!

В результате вебинара Вы узнаете: 
✔️ Зачем нужен мониторинг в распределенных системах и в каких случаях он критичен. 
✔️ Как правильно ставить задачи для мониторинга, чтобы получать полезные и точные данные.
✔️ Методы мониторинга черного и белого ящика: их принципы, применения и отличия. 

Сам курс «SRE практики и инструменты» стартует 25 сентября. По данным hh средний уровень зарплат SRE-Engineer в Москве начинается от 150 000 руб/мес. 

Регистрируйтесь и забирайте бонус в телеграм: https://clck.ru/3Ctc8G 

Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

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

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

#заметка дня

Представим, что вам нужно акцентировать внимание на элементе. Элементе формы, скажем. Например, вывести его в область зрения пользователя. Какие есть варианты?

Очевидно, focus. Ведь для этого и предназначено. Вот только focus ведёт себя непредсказуемо в разных браузерах: в Chrome и Safari элемент выводится на центр экрана, а Firefox — до минимально необходимого уровня, суть — вниз. А ещё всё это происходит резко.

Решение проблемы — передача запрета скролла в метод focus и вызов scrollIntoView вместо этого.

Таким образом можно программно доскроллить до любого элемента, не только формы. И не только в центр экрана, но и по заданному отступу.

А ещё можно передать параметр, отвечающий за вид прокрутки: behavior. Итого, behavior: smooth подвинет элемент к нам плавно. Правда, для Safari и IE придётся подключать полифилл (см. комментарий в примере).

Итого, получаем: https://codepen.io/alinaki/pen/mdPwdxy

Мой пример — дополненный оригинальный от Smashing Magazine: https://twitter.com/smashingmag/status/1299325085111783425

Ещё близкое к реальности применение — скролл по секциям: https://codepen.io/aaroniker/pen/WNNLRYb

#css #scroll #scrollintoview #js #focus #бородач

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

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

Бесплатный практический вебинар: Профессия «Frontend-разработчик».

Когда: 19 сентября в 19:00 по мск.

Погрузитесь в решение реальной задачи и напишите мини-игру, которая работает прямо в браузере.

Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular?

Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии.

🎁 Всем, кто зарегистрировался - Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику -  Карта компетенций начинающего Frontend-разработчика.

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

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

#фишка дня

Пишешь чат или выводишь данные лога в консоль и хочешь чтобы каждое новое сообщение снизу было видимым?

Ни слова больше! Спека has us covered: https://drafts.csswg.org/css-scroll-snap/#example-d0a2d86f

Удивительное дело, конечно, видеть примеры прямо в черновике спецификации :)

Вот, кстати, пример от Брамуса Ван Дамма (опять и снова, да): https://codepen.io/bramus/pen/PorRORd

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

Работает везде, но иногда проявляется баг с пружинящим скроллом — Chrome теряет событие и "снапит" нас назад. Впрочем, не всегда.

Ну если вы за старое доброе решение на JavaScript, вот, держите хук от Vercel.

#scroll #snap #css

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

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

#статья дня

Ну что, давайте хором назовём самый больной элемент из всего набора стандартных HTML-виджетов.

Конечно же это select.

Если вы назвали не select, уж будьте добры, напишите в комментариях, почему вы так думаете.

Тем временем, пропозал кастомного select дошёл до Stage 2 в WHATWG, а это значит, пришло время расчехлять хотелки. Иначе останемся с чем-то очередным поломанным и недоделанным.

Естественно, инициатива здесь исходит от команды Chrome, вот свежий RFC: https://developer.chrome.com/blog/rfc-customizable-select

Кто не знает, что такое RFC — это, буквально, Request For Comments, запрос комментариев. Ваших, конечно, чьих же ещё.

Надо заметить, что раньше переиспользование select не предполагалось. Рассчитывали создать новый компонент — selectmenu, переименованный потом в selectlist. Но от идеи в итоге отказались.

Чтобы попробовать новый select нужен Chrome Canary 130 с включённым флагом #experimental-web-platform-features.

На Linux это, впрочем, Chromium Dev. Canary для нас не нашлось.

Ну, какие будут впечатления?

P. S. Есть форма в Google Forms для отправки этих самых впечатлений команде.

#css #select #custom

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

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

Углубите знания в веб-разработке, получите практичные инсайты и создавайте новые крутые проекты.


Регистрируйтесь на бесплатный мини-курс: https://epic.st/Yl2qH?erid=2VtzqxkvU3X

Вы научитесь:
— Создавать веб-страницы, используя язык разметки HTML и технологию CSS
— Реализовывать серверную часть (backend) веб-приложений на языке PHP
— Работать с базой данных MySQL при помощи языка запросов SQL
— Создавать приложения на языке программирования JavaScript
— Размещать сайты в интернете

📌Спикер — Даниил Пилипенко, основатель и директор центра подбора IT-специалистов SymbioWay. 19 лет работает в сфере Java- и веб-разработки, руководит командами разработки в разных проектах.

🎁Подарки:
— Сертификат на скидку 10 000 рублей на любой курс
— Доступ к изучению английского языка на год
— 5 полезных подборок материала
— Персональная карьерная консультация


Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880

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

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

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

Из-за моей профдеформации — работа над расширением для Google Sheets — мне очень нравятся различные виджеты таблиц.

От экселеподобных до обычных таблиц aka гридов с фильтрами и сортировкой.

И естественно, моё внимание не мог не привлечь проект с говорящим названием fast-grid: https://github.com/gabrielpetersson/fast-grid

Автор заявляет, что на рынке лучше вариантов нет, что оно может переваривать миллионы строк с максимально быстрым скроллингом и всё это плавно и красиво. Для отрисовки используется мультипоточный веб-воркер.

Ну и, в общем-то, это правда :) Даже на тринадцатилетнем ноутбуке (с 4 ядрами и 16 гигами оперативы, впрочем) мне удалось загрузить 2 миллиона строк и радоваться жизни (Chrome, Linux).

5 миллионов, впрочем, не получилось ни на нём, ни на MacBook Pro M2 с 24 гигами. На первом вкладка съела 7 гигабайт и рухнула, на втором — съела 4 и ничего не произошло. Вообще.

И тут, конечно, встаёт вопрос целесообразности всех оптимизаций. Иметь по 5-10 миллионов строк в таблице это практически норма для Google Sheets (да, если навесить туда фильтры — всё станет очень плохо, но работает же). Заявленная плавная и бесконечно умная виртуализация это хорошо, но грамотная подгрузка частями и виртуализация всё же выглядят более разумным решением.

Но если вам нужно переварить до миллиона строк — по-моему, вариант отличный.

#javascript #grid #sheets

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

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

Let’s Go now!

Tech-команда Купера (ex СберМаркет) запустила внешнюю программу для backend-разработчиков от уровня Middle+ по переходу на Golang 🤷‍♂️

Для участия нужен большой опыт коммерческой разработки на Python/Java/Kotlin/PHP/C++/С# и минимальное знакомство с Go, например, через изучение курсов или написание простых скриптов.

Как это будет:
🟠Ты получишь оффер в команду Купер.тех без понижения грейда.
🟠Будешь обучаться через практику на реальных продакшн-задачах Купера.
🟠Сможешь перенять опыт наставника внутри команды, который поддержит тебя в период обучения.

⚡️Осваивай Go с первого дня работы на задачах в Купер.тех — узнай больше о программе и подай заявку по ссылке.

💬 Купер.тех

Реклама. ООО «ИНСТАМАРТ СЕРВИС», ИНН: 9705118142. Ерид: LjN8KD9f4

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

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

#день дня

С Днём программиста, дамы и господа!

Уж так принято называть 256-й день в году. Жаль, не выходной 💻

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

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

Ровно пять лет назад я сел на поезд Аллегро и приехал из Санкт-Петербурга в Хельсинки на два собеседования подряд, на одном из которых я настоял.

Потому что "а чо они".

И сейчас в компании, на собеседовании в которую настоял, я и работаю.

Услышать историю моего трудоустройства в финскую компанию можно будет на стриме 19 сентября в 20:00 по мск.

Это будет четверг, если что.

Я расскажу о том, как прошли мои зарубежные собеседования. В этом мне помогут девчонки из @acceleracio, которые поделятся секретами того, как заполучить работу за границей.

Что будем обсуждать?


Подготовку к поиску работы за рубежом:


🔹 как готовился и проходил собеседование я,
🔹 текущее состояние рынка и тренды,
🔹 примеры стратегий поиска, которые работают и не работают,
🔹 инструменты для эффективного поиска работы,
🔹 и ответим на ваши вопросы — конечно, с огромным удовольствием!

Кто будет со мной в компании?
Анна Решетова — интервью-коуч и преподавательница английского для айти-специалистов.
Любовь Татарова — фронтенд-разработчица с большим опытом прохождения интервью в зарубежных компаниях.

Задание со звездочкой перед вебинаром — подготовиться и прочитать посты:
👉 Про нетворкинг,
👉 Об откликах и том, как их оставлять еще эффективнее,
👉 Про то, как надо верить в себя и никогда не опускать руки,
👉 Ну и, конечно же, приготовить свои вопросы!

Записаться можно через бота:
@acceleracio_bot⚡️

Добавляйте в календари и приходите: это отличная возможность распланировать осенний сезон найма!

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

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

ОБУЧИМ ПРОГРАММИРОВАНИЮ И ГАРАНТИРУЕМ, ЧТО ТРУДОУСТРОИМ ПОСЛЕ УЧЕБЫ

Zerocoder. Мы обучили программированию более 8 000 человек и сделали наше IT-образование еще более надежным —  теперь мы поможем найти тебе высокооплачиваемую работу мечты и гарантируем будущее трудоустройство.

Курс рассчитан на новичков, поэтому даже если ты никогда не программировал и не работал в IT, у тебя получится освоить перспективную профессию, работать в престижных IT-компаниях, купить квартиру по льготной ипотеке под 6% и получить отсрочку от армии.

Во время прохождения курса ты освоишь самый популярный язык программирования Python и основные фреймворки, сделаешь 18 PET-проектов, создашь портфолио и резюме, получишь свою первую работу.

Кликай на ссылку и узнавай подробности, заявки принимаются только до конца этой недели.

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

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

#статья дня

Один мой товарищ любил прыгать с вышки использует светлую тему в редакторе.

Да вообще, если подумать, много кто на работе в IDE работает со светлой темой. Я вот её использую только когда нужен повышенный контраст: на ярком солнечном свете.

Но темные темы системы в целом вообще стали модными лишь несколько лет назад, сначала на телефонах, потом и сайтах и десктопах. Мне откровенно не нравится.

Некоторые владельцы маков с чёлкой перешли на темные темы лишь бы скрыть чёлку 🤡

Так к чему это я. Действительно ли темные темы так хороши или так плохи для глаз? Что за ними стоит и почему черный цвет в них не используется? Отвечает вот эта статья: https://habr.com/ru/company/timeweb/blog/675526/

Со ссылками, с литературой, с примерами. Сплошное удовольствие читать.

#dark #theme #бородач

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

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

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

Ну и третья альтернатива — https://fakeimg.pl/

Этот сервис уже ставит не фотографии, но классические плейсхолдеры заданного размера. При желании — с вашим текстом. Замена покинувшим нас placehold.it и PlaceIMG.

Пробуем, отмечаемся.

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

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

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

Итак, первая альтернатива Lorem Picsum — Placedog: https://placedog.net/

Умеет все то же самое, только посвящен собакам. Ставьте реакции 👍, если у вас работает.

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

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

#статья дня

А знаете ли вы, котаны, что такое безопасный треугольник печали? Aka safe triangle.

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

Да-да, в вашей Windows или MacOS такое тоже есть. Проверьте сами.

Собственно, почему я о нём заговорил? А тут вышла новая статья Ахмада Шадида и посвящена она такой важной вещи как "область взаимодействия".

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

В общем, с чего всё началось, зачем это нужно и как сделать сайты удобными — в первой интерактивной статье Шадида: https://ishadeed.com/article/target-size

Огромное количество примеров, просто новый уровень для автора. Моё увожение.

#css #ui #ux #safe #target #бородач

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

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

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

Кажется, мы стали забывать, что нейронки и машинное обучение — они не только про ChatGPT и генерацию фотографий вашей соседки.

Одной из самых популярных задач по работе с изображениями было и остаётся удаление фона с картинок. Вокруг этого развелось какое-то невероятное число сервисов.

И все хотят денег.

Но мы же с вами понимаем, что даже достаточно сложную нейронку можно запустить прямо в браузере, правда? Мощностей вашего компьютера в совокупности с возможностями WebGPU более чем хватит, чтобы работать с моделями разной направленности.

Итак, вашему вниманию — Transformers.js, как средство работы с моделями, и одно из самых наглядных его применений — удаление фона с фото прямо в вашем браузере: https://github.com/huggingface/transformers.js-examples/pull/4/files

Демо: https://huggingface.co/spaces/webml-community/remove-background-webgpu

Бесплатно, без SMS.

Конечно, Transformers.js могут и не такое, была бы натренированная модель: анализ эмоциональной окраски текста, распознавание речи, получение выжимки из текста... Впрочем, ребята и их предоставляют, в огромном количестве.

Огонь? Огонь! 🔥

#js #ml

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

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

‼️Notion уходит из России и отключает российские аккаунты 

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

Один из примеров — платформа для управления знаниями и совместной работы TEAMLY. Не только помогут с миграцией с Notion, но и подробно расскажут, какие фичи и возможности есть на платформе:

— Генерация идей и бизнес-цели в интеллект-картах; 
— Ведение планов в диаграмме Ганта; 
— Декомпозиция задач в умных таблицах;   
— Управление спринтами в канбан-досках;   
— Отслеживание дедлайнов в календаре; 
— Сбор и анализ обратной связи пользователей

Узнать больше

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