14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
Яндекс запустил рекламную кампанию «Пробовать — создавать», в которой показали, как создаются ключевые технологии компании: от Поиска, возможностей Умного дома до маршрутизации и прогноза пеплопада.
И всё это — с горой пасхалок к IT: я нашел отсылки к VIM, культовому шутеру DOOM и халату Цукерберга из фильма “Социальная сеть”. Остальные спойлерить не буду: некоторые лучше увидеть самим.
Если ты работаешь в IT, то скорее всего тебе знакомо:
📌Постоянная усталость, даже после выходных.
📌Просыпаешься ночью и больше не можешь заснуть.
📌Ощущение, что ты недостаточно хорош, даже если проект выстрелил.
📌Чувство тревоги из-за бесконечных дедлайнов, она сменяется апатией, мотивация падает.
Все это не «норма». Это выгорание, стресс и тревога, которые можно и нужно решить.
Екатерина Мельникова — профессиональный психолог, который помогает найти баланс между работой, личной жизнью и спокойствием.
На ее канале практические советы и пошаговые техники для улучшения сна и восстановления.
Ты уже успешно настраиваешь систему, сделай то же самое со своим внутренним кодом. Прокачай свою психологическую устойчивость и войди в 2025 году с энергией, ясной головой и уверенностью в себе.
👉 Подписывайся: @lovepsylife . Это может быть самым продуктивным шагом для вашего развития.
#фишка дня
Как заполнить фон целым количеством, например, кружочков или цветков?
Ну, вдруг, вы работаете в Маримекко
Очень просто! Используем background-repeat: space.
Работает аналогично флексовому space-between
И пример от Аны Тюдор: https://codepen.io/thebabydino/pen/RwXvryZ
#css #background #fill #бородач
#фишка дня
Новое — это хорошо забытое старое.
Многие любят это повторять, но не всегда — демонстрировать. И уж тем более — на ярких примерах.
Вот как вы сейчас делаете скруглённые углы на элементах?
Наверное, просто прописываете border-radius и всё, да? Даже не задумываясь, что годах так в 2006-2012 это правило не то чтобы не работало кроссбраузерно, а его и не было вообще.
Как же делали углы? А очень просто, CSS-спрайтом. Нарезали картинку скруглённого прямоугольника на 4-9 частей в зависимости от задачи и распихивали в нужные места. Пруф: https://bavotasan.com/2009/simple-rounded-corners-with-a-css-sprite/
При всей своей... забавности, метод позволял не обходиться простым радиусом. Он давал возможность делать и скошенные углы, и внутренние радиусы, и перфорацию, и градиентные границы... В общем, надо ли говорить, что до конца идея не умерла?
И я сейчас даже не про вёрстку писем
Правда, сейчас всё чаще для этой цели используются SVG- и контурные маски вообще.
Ладно, к чему это я такое большое введение выдал?
Тут по соцсетям в очередной раз прокатилась ода скруглённым углам на технике Apple. Как они все сочетаются и так далее. И что у них даже название своё есть: squircle.
Гусары, молчать
Вот, мы обсуждали тут: /channel/htmlshit/1258
И да, простое скругление на фоне сглаженного смотрится... грубовато.
Итак, вашему вниманию столь хорошо забытое старое: плагин сглаженных углов для Tailwind!
Вот: https://github.com/gtokman/corner-smoothing
Если зайти в код плагина, который на самом деле ни что иное, как просто описание CSS-класса, а значит, может быть использован кем угодно, мы найдём там тот самый спрайт, маску, если угодно, на SVG: https://github.com/gtokman/corner-smoothing/blob/main/masks/squircle.svg
Как-то так:
.continuous-corners {
mask-border: url("./mask@1x.svg") 49% fill / 75px;
}
#инструмент дня
AI-парсинг (скрейпинг, скраппинг) сайтов набирает обороты, но классические утилиты никто не отменял.
И среди таких утилит очень выделяется pipet: https://github.com/bjesus/pipet
Создаем pipet-файл:curl https://news.ycombinator.com/
.title .titleline
span > a
.sitebit a
Ну и запускаем:
pipet hackernews.pipet
Красота? Не то слово. Более того, утилита умеет рендерить сразу в шаблоны, напоминающие Mustache: <ul>
{{range $index, $item := index (index . 0) 0}}
<li>{{index $item 0}} ({{index $item 1}})</li>
{{end}}
</ul>
Ясное дело, никто не отменяет и ИИ прикрутить, если так надо :) Ну а вообще, поддерживаются пайпы, потому результат любой строки конфигурации можно пропустить через что угодно вообще. Да и запуск возможен не только curl-ом, но и Playwright.
В общем, я впечатлен. Надо брать.
#go #parser #scraping
#заметка дня
Автор прекрасной борды tldraw.com выложил вопрос-демонстрацию: «Как же отличить мышь от тачпада?» Ведь они, по мнению браузера, вроде как одно устройство ввода.
И на видео чётко видно, что на тачпаде скроллить во всех направлениях получается точнее, сильно точнее, чем мышью.
И ответ-то на самом деле кроется в вопросе: тачпад действительно отдаёт браузеру гораздо меньшее значение дельты (разницу в скролле между двумя опросами состояния), чем мышь.
И ему вроде даже дали ответ на StackOverflow: https://stackoverflow.com/questions/10744645/detect-touchpad-vs-mouse-in-javascript
Приложу сюда кратчайший сниппет:
var isTrackpad = false;
if (e.wheelDeltaY) {
if (e.wheelDeltaY === (e.deltaY * -3)) {
isTrackpad = true;
}
}
else if (e.deltaMode === 0) {
isTrackpad = true;
}
console.log(isTrackpad ? "Trackpad detected" : "Mousewheel detected");
}
document.addEventListener("mousewheel", detectTrackPad, false);
document.addEventListener("DOMMouseScroll", detectTrackPad, false);
Живете в Европе, а работаете на компанию из России удалённо? Тогда вам уже знакомы две самые частые проблемы при выводе денежных выплат:
1️⃣Как заключить контракт с заказчиком без упоминания РФ? За привязку к России в Европе сегодня не похвалят.
2️⃣Как правильно платить налоги, в России или в стране проживания? Можно потерять значительные суммы, если отсутствует соглашение о двойном налогообложении.
Для всего этого есть одно удобное решение — сервис Stape. Оформляем контракт с юрлицом из США — никаких опасных связей с РФ в официальных документах.
А также Stape помогает быстро, а главное — легально переводить деньги, отправленные из стран со сложностями с классическими банковскими переводами, на свой счёт в банке или криптокошелёк. Вы сможете:
📍свободно распоряжаться заработанными средствами,
📍выгодно платить налоги,
📍закрывать операции официальными документами.
📍Все функции сервиса доступны онлайн.
Переходите в Телеграм-канал сервиса, чтобы узнать больше о Stape — максимум пользы для тех, кто работает с зарубежными заказчиками.
#инструмент дня
Типичная айтишная история: кто-то на митинге шарит сверхширокий экран. Или вроде бы шарит окно, но забывается и растягивает его до невообразимого размера.
А коллеги с ноутбуками и телефонами страдают! Всё мелко, картинка сыпется.
Конечно, можно шарить с ноутбука, но я могу понять неудобство.
Есть сумасшедшие, кто с десктопа вообще сидит!
Поэтому, предлагаю решение! Виртуальный монитор, буквально.
Для macOS, например, это будет DeskPad: https://github.com/Stengo/DeskPad
Как работает? Создаёт окошко, которое будет работать как виртуальный монитор заранее заданного разрешения. Туда просто перетаскивается нужное приложение и шарится.
Для других ОС наверняка есть аналогичные решения. Если кто-то знает — накидайте в комментариях, я попозже и сам принесу.
Пошарил — и никаких проблем, работай как работается. И коллегам приятно.
#macos #display #remote
Ваша карьера в Frontend-разработке начинается в Авито 😎
Приходите на оплачиваемую стажировку в Авито. Здесь вы будете работать с продуктами, которыми пользуются миллионы.
Профессионально развиваться и расти вам помогут:
• наставник — научит, как найти лучшее решение, и поможет разобраться в инструментах и технологиях
• комьюнити стажёров — поделятся опытом и поддержат
• доступ к базам знаний, библиотекам и корпоративным курсам — даст возможность нарастить экспертизу.
Стажировка открыта в пяти направлениях, вы можете выбрать два — основное и запасное. Если попасть на первое не удастся, сможете пройти отбор на второе при наличии мест.
Условия:
• длительность программы — 6 месяцев
• работа от 25 часов в неделю, после завершения стажировки — возможность остаться в компании на полную занятость
• зарплата и корпоративный ноутбук
• можно работать из офиса, удалённо или в гибридном формате.
Более 80% стажёров продолжают карьеру в Авито. Присоединяйтесь к команде и растите вместе с нами! Регистрация открыта до 5 февраля.
Программист - самая востребованная профессия в 2025!
Тогда почему ты опять не получил оффер?
Пока ты боишься говорить о деньгах и мямлишь про свой опыт, кто-то другой занял твое место. Чтобы HR выстраивались в очередь, приходи на лекцию от команды FAANG School.
Отдаем бесплатно то, что продают за бешенные деньги на карьерных консультациях.
- увидишь, как HR собеседует программиста в прямом эфире
- поймешь, как отвечать на неудобные вопросы про зарплату
- разберешь частые ошибки начинающих на собесах
- научишься представлять предыдущий опыт
- узнаешь, как говорить о своих сильных сторонах без пафоса
- поймешь, что нужно спросить у HR, чтобы понять уровень компании
Заберешь пошаговый план прохождения всех этапов интервью, с которым у тебя больше не будет отказов.
Приходи на эфир, чтобы выделяться среди конкурентов и самому выбирать офферы.
#красивое дня
Угадайте, что красиво летит по небу и укладывается в 249 символов?
Правильно, SpaceX Starship!
Не, ну правда:
vec2 p=(FC.xy-r*.5)/r.y*mat2(8,-6,6,8),v;for(float i,f=3.+snoise2D(p+vec2(t*7.,0));i++<50.;o+=(cos(sin(i)*vec4(1,2,3,1))+1.)*exp(sin(i*i+t))/length(max(v,vec2(v.x*f*.02,v.y))))v=p+cos(i*i+(t+p.x*.1)*.03+i*vec2(11,9))*5.;o=tanh(pow(o/1e2,vec4(1.5)));
Фронтенд с юмором — это "Frontline" 💻😂
Ты кодишь, но не забываешь смеяться? Тогда заходи к нам, тимлид фронтенда рассказывает про все что связано с web-разработкой и не забывает запостить смешных мемасов.
На Frontline соединяются профессионализм и веселье в мире веб-разработки.
Здесь ты найдешь:
👨💻 Гайды и советы по HTML, CSS, JavaScript и популярным фреймворкам.
😂 Мемы и шутки про будни разработчика — потому что смех это тоже часть работы!
🔥 Новости и тренды в веб-разработке — чтобы быть на шаг впереди.
💬 Обсуждения и обмен опытом с коллегами по цеху.
🎉 Вдохновение и мотивация — ведь кодить можно с улыбкой (даже на javascript)
🔗 Присоединяйся и и будь в курсе фронтенд-новинок, не забывая про отличное настроение 🚀
#реальноклассныйканал
#штука дня
Я тут случайно купил... робота :)
Зашел с ребенком в комиссионный магазин (мы тут их называем кирпушниками) в поисках интересных компакт-дисков и запчастей к конструктору дочки, а вышел с роботом. За десятку евро.
Называется Edison.
Естественно, это достаточно простой робот для обучения в школах. На борту датчики света, звука, столкновения, пара колес, детектор линии. Музыку может играть, простым синтезатором мелодий. Присутствует ИК-приёмопередатчик, можно телевизор включать, или управлять роботом с пульта от того же телевизора.
Программируется или в Scratch-подобной среде программирования, или на Python.
Протестировали демки обхода препятствий, дочь в восторге. В её три года она, конечно же, пока не может понять, как его программировать. Но много ли надо, чтобы впечатлить? :)
Заодно, совместим с Лего! Можно построить башенный кран... А самые крутые применения начинаются с объединения двух и более роботов.
В общем, норм улов, я считаю. Для ознакомления просто идеально.
Учим использовать ChatGPT и Giga во Frontend-разработке.
Даём рабочие способы получать клиентов на разработку даже без опыта.
Помогаем пройти практику, на которой ты пройдёшь все этапы разработки с нуля до готового сайта на хостинге.
Помогаем перейти на фриланс в течение пары месяцев с доходом от 1000$/мес.
👉 Приходи на бесплатное обучение и зови с собой друзей
🔥 С 2019 стабильно помогаем с обучением, практикой и зарабатывать на фрилансе.
Когда в последний раз вы трогали свои сиксели?
Ладно, кроме шуток. Оказывается, в консоли можно смотреть картинки! И в высоком качестве. И давно.
Узнал случайно, когда смотрел видео про DEC Alpha. Там описали странный формат — SIXEL.
📌 Что это такое?
Этот формат придумали в 1983 году для DEC-принтеров и терминалов вроде VT240. Он позволяет кодировать растровые изображения в текстовом виде с помощью специальных escape-последовательностей.
Последовательности состоят из колонок по 6 пикселей, отсюда и название — six pixels.
Тогда это было нужно, чтобы выводить графику без сложных GUI. А теперь SIXEL неожиданно полезен в терминалах, где можно без сторонних приложений просматривать картинки прямо в консоли!
🖼 Как смотреть картинки в терминале?
👉 Самый простой способ — lsix, это ls, но для миниатюр:
brew install lsix # macOS
sudo apt install lsix # Debian/Ubuntu Linux
А дальше просто запускаем:lsix
и терминал покажет миниатюры всех картинок в папке. Работает в iTerm2, XTerm и других терминалах с поддержкой SIXEL.
🔄 Конвертация изображений
Для работы с этим форматом есть libsixel, который позволяет преобразовывать обычные изображения:brew install libsixel
img2sixel myimage.png
А если у вас установлен ImageMagick, можно делать так:convert myimage.png sixel:- #
Конвертирует и сразу выводит в терминал.
Если уже есть картинка в формате sixel, можно вывести её простым cat.
❓ Поддержка в эмуляторах терминала
Есть список совместимых на сайте:
🔗 https://www.arewesixelyet.com/
Сразу скажу, что стандартный терминал в macOS — не умеет.
Очевидно, формат прекрасно подходит для разгого рода диаграмм и дашбордов.
В общем, когда думаешь, что знаешь всё о графике, а потом узнаёшь, что кроме пикселей и вокселей есть ещё и сиксели! 😄
#console #images
#инструмент дня
Не так давно мы с вами использовали 3D-преобразования в CSS для эффектного выбора персонажа: /channel/htmlshit/2969
Тогда получилось неожиданно хорошо. Но пришло время для настоящих 3D-моделей!
Сходу демо: https://codepen.io/RAFA3L/pen/raBJjgO
Тут используется веб-компонент <model-viewer>: https://modelviewer.dev/
Атрибуты компонента схожи с тегом video, а JS API максимально простой, да и чаще всего нужна работа с «орбитальной» камерой, как в кодпене выше.
Есть поддержка VR и XR, но я, если честно, от этого совсем далёк :) Поддерживается смена текстур, освещения и теней, установка сцены.
Норм? По-моему, норм :)
#3d #component #webgl
Хотите узнать, как QA-инженеры влияют на успех ИТ-продуктов?
Слушайте подкаст «QAk-QAk — и в продакшен»: эксперты из Т-Банка и других компаний обсуждают проблемы и делятся опытом, как обеспечивать крутое качество продуктов и строить карьеру в QA.
Если вы разработчик — подкаст будет полезен с точки зрения опыта взаимодействия с инженерами по качеству в разных компаниях.
Включайте новые выпуски где удобно
#такое дня
Как выбесить коллег одной строкой?
А сейчас я покажу вам...
Автор
Интегрируете CRM, создаете магазины на CMS?
Пользуйтесь готовыми интеграциями с CRM и CMS-системами для своих клиентов и получайте 20% с оплат за доступ к DashaMail.
Dashamail — российский email-сервис с простым интерфейсом, готовыми шаблонами и ИИ для генерации текстов и картинок. И, что важно вам, широкими возможностями автоматизации.
Что вы получите, кроме лояльности?
20% от всех оплат сервиса клиентами еще два года — даже когда завершили проект и получили оплату.
20% — много это или мало? При оплате одним клиентом годового тарифа с базой в 30 000 подписчиков (~89 000 р.), вы получаете ~20 000 руб. — и так в течение двух лет.
Регистрируйтесь в DashaMail и зарабатывайте с реферальной программой
#инструмент дня
Что-то я насмотрелся на мучения семьи и коллег в отношении составления резюме, и решил поискать, а нет ли готовых бесплатных решений?
Кроме экспорта из линкедина, конечно.
Кругом какие-то скрытые подписки, ограниченные платные скачивания, дурацкие шаблоны...
С одной стороны, можно и Google Docs обойтись. С другой, процесс оттачивания резюме в процессе поиска работы может, мягко говоря, раздражать. HR'ы нынче капризные, хотят опыт и баззворды только под нужную вакансию, а больше ничего не хотят.
И такой инструмент нашёлся! Reactive Resume: https://github.com/AmruthPillai/Reactive-Resume
Открытый проект на React и Nest.js на бакенде. Можно запустить локально, можно захостить. А можно воспользоваться и сайтом: https://rxresu.me/
Сайт работает на донатах, потому, возможно, запустить локально будет более разумным решением.
В общем, счастье соискателя — вот оно, рядом. Да и к контрибушенам проект открыт :)
#nestjs #react #resume
Важно дополнить, что не стоит использовать contents на интерактивных элементах: кнопки и пр. Т.к. их банально не будет видно, в фокус не поймаешь, табом не поймаешь, ридеры тоже, скорее всего, не прочитают.
Также не стоит вешать на элемент с таким свойством что-то, что определяет его позицию для каких-либо действий (например, Intersection Observer) - тоже не сработает
#фишка дня
Вот как вы чаще всего распространяете свои компоненты для всякого рода тулбаров? Наверняка, группы кнопок или, например, кнопка и текстовое поле будут в своём контейнере.
Вставляете этот контейнер в какой-нибудь флекс или грид и получаете... херню получаете, потому что содержимое вашего контейнера подчиняться внешнему флексу или гриду и не собирается.
Но есть решение! Правило display: contents буквально развернёт контейнер и предоставит внешнему потоку полный контроль над компонентами внутри. Это реально самая мозговзрывающая вещь на сегодня.
Демо: https://codepen.io/alinaki/pen/abeOjKw
Статья на тему от Ахмада Шадида: https://ishadeed.com/article/display-contents/
Пугаться данных на caniuse.com не надо: смотрите сноску о доступности.
Не рекомендую разворачивать таким способом значащие элементы вроде кнопок, таблиц, заголовков. А вот дивы — милое дело.
Да, ваш любимый TailwindCSS тоже в курсе: https://tailwindcss.com/docs/display#contents
Спасибо Весу Босу за напоминание об этом.
#css #display #contents #бородач
#инструмент дня
Не понимаешь гриды? Не проблема!
Ведь есть конструкторы. Например, https://cssgridgenerator.io/
Задал начальные условия, поперетаскивал мышкой блоки — и готово! Забирай CSS.
А для любителей Tailwind — присутствует аналогичный проект https://www.tailwindgen.com/, он просто распихает нужные классы по блокам. Ноль забот.
Кстати, о Tailwind. На днях вышла его четвёртая версия. Ещё меньше конфигурации (ну, буквально не нужна для старта), новые утилиты для работы с transform, поддержка контейнерных запросов и интеграция с Vite.
#css #grid #tailwind
#расширение дня
Что-то, как вы видите, тяжело мне январь даётся. Но не сдаёмся!
Писать e2e-тесты — важная часть разработки. Но иногда кажется, что бакенд специально делает все, чтобы их невозможно было подготовить:
😡 спека меняется на лету
🤬 методы недописаны
👿 половина API не работает или вообще отсутствует.
В итоге время тратится не на разработку, а на попытки договориться с сервером.
Чтобы не зависеть от нестабильного бекенда и вообще спокойно продолжать разработку, можно использовать такие инструменты, как Requestly.
Это расширение для браузера, которое позволяет подменять запросы и ответы, редактировать заголовки или даже подгружать локальные данные вместо серверных.
Например, можно настроить подмену API-ответов на заранее подготовленные JSON’ы. Это помогает проверить логику приложения и писать тесты, даже если реальный сервер недоступен или работает нестабильно.
Обратите внимание, что расширение работает на подмене ответа уже после выполнения запроса, поэтому во вкладке Network структура останется неизменной.
Инструмент полезен не только для тестирования, но и в повседневной разработке — особенно когда работаешь с командой, где бакенд часто не успевает за фронтом.
А какие у вас способы справляться с подобными проблемами?
#api #extention #chrome
#инструмент дня
Вы знаете мою любовь к странным браузерам. Мы с вами запускали и Midori, чтобы отлаживать баги Safari/WebKit в Linux и Windows, и Ladybird, и Servo.
И если последние два сравнительно современные проекты, которые заодно ещё и получают мощное финансирование со стороны разных организаций, хотелось бы напомнить, что есть ещё смелые люди.
Например — браузер Dillo, которому недавно исполнилось 25 лет. Наверное, за 25 лет его научили всем трюкам?
Ну, вообще, нет. Да и цели такой не стояло. Пишется он по большей части для развлечения и некого... гуманитарного аспекта. Чтобы люди со слабыми машинами и соединением могли ту же википедию почитать. Ну или в виртуалке запустить документацию, в условиях ограниченных ресурсов.
Тем не менее, в честь 25 летия автор выпустил обновление — Dillo 3.2, в котором браузер научили поддержке webp, SVG, MathML, зуму через Ctrl+. И даже CSS-единицам вроде ch, rem, vw, vh, vmin, vmax.
С одной стороны, конечно, возникает логичный вопрос: «Кому это нужно-то вообще?», с другой — какое-то сообщество вокруг браузера сфомировано, люди пробуют свои силы в чём-то новом. Патч в Chrome вряд ли просто так зашлёшь, а в Dillo или Ladybird — почему бы и нет. Отличный дипломный проект, в том числе.
Ваши мнения, котаны?
#browser #engine #dillo
#инструмент дня
Кому адекватной современной виртуализации списков?
Как-то так повелось, что задача отрисовки десятков, и даже сотен тысяч строк или ячеек на экране решается... волнами. Появляется решение, принимается всеми, а потом — буквально забрасывается. И вот мы годами ждём обновления того же react-window просто чтобы получить возможность рендерить строки разной высоты из коробки. А react-window сам по себе был и является рекомендованной заменой react-virtualized.
В других фреймворках и ванильных средах ситуация ещё веселее.
При этом разработчики, например, мобильных приложений на тех же Flutter и SwiftUI в принципе лишены этой проблемы, просто потому что им надо заботиться о рендере элементов самостоятельно, заранее объявляя, что тут должен быть скролл. Насильная виртуализация, так сказать.
Если вы были застигнуты врасплох моими утверждениями и не понимаете вообще, о чём я, то вкратце поясню: чтобы дать возможность человеку поскроллить тысячи и сотни тысяч объектов на экране, совсем не обязательно отрисовывать их все разом. Можно отрисовать штук 10-20 строк, заполнив экран, и просто переиспользовать эти элементы раз за разом. Виртуальные списки, буквально.
Итак, для чего я всё это пишу? А вот: вашему вниманию предъявляется универсальная библиотека виртуализации списков virtua.
GitHub: https://github.com/inokawa/virtua
Умеет в динамические высоты строк из коробки! Умеет в бесконечный скролл. Умеет занимать всю высоту окна. Умеет в RSC.
Ну и не ограничивается одним только React: Vue, Solid и Svelte тоже поддерживаются.
Отличное современное решение.
#scroll #virtual
#заметка дня
Electron.js, Tauri, ProtonShell, да сотни их. Всё это — средства разработки desktop-приложений на JavaScript/TypeScript и иже с ними. Где-то справедливо, где-то — не очень — критикуемы. Какие-то из них используют биндинги к нативным виджетам системы, какие-то — к Wx, Qt или GTK.
А что если я вам скажу, что есть среда, в которой JavaScript приложения — новая норма?
И это, внезапно, GNOME. Тот самый, что по дефолту в Ubuntu, Fedora, openSUSE Linux.
Изначально, движок JavaScript в GNOME — GJS — задумывался для расширений GNOME Shell, собственно, среды рабочего стола. Основан он на SpiderMonkey, движке из Firefox.
Путь GJS как движка для разработки приложений, а не только расширений, был достаточно тернист, но в итоге мы получили мощное средство разработки UI, вытесняющее даже изначально придуманный для этого язык Vala.
Естественно, интерфейс рисуется не веб-технологиями. Присутстсвуют биндинги к GTK и, естественно, libadwaita.
Последнее это не просто библиотека, содержащая дефолтную тему GTK для GNOME, но целая определяющая поведение виджетов среда. Что-то, что делает гном — гномом, пусть многим это и не всегда нравится.
И вот одним из последних приобретений списка дефолтных приложений GNOME стал аудиоплеер Decibels: https://gitlab.gnome.org/GNOME/decibels
Если вам хочется вообще выйти за рамки веба, оторваться от React и попробовать свои силы в чём-то максимально близком к нативной разработке, при этом, без изучения нового языка, то разработка приложений для GNOME вполне может стать началом чего-то интересного.
Вот, например, шаблон: https://gitlab.gnome.org/World/javascript/gnome-typescript-template
А тут есть история разработчика, который портировал приложение Диктофон: https://blogs.gnome.org/christopherdavis/2022/08/25/trying-typescript-for-gnome-apps/
Иногда бывает полезно выскочить из привычной среды. Пробуем, котаны?
#gtk #linux #gnome
#инструмент дня
Устал подбирать фавиконку для проекта? Постоянно забываешь, что нужно прописать миллион строк под каждое устройство?
Say no more! Просто используй эмодзи!
Вашему вниманию, проект emojico: https://github.com/threepointone/emojico
Запускаем npx emojico 🚀 --out ./icons и на выходе получаем все нужные размеры под все возможные устройства.
Вот так вот легко и просто. Ну это при условии, конечно, что вас не раздражают эмодзи :)
А всем остальным могу напомнить, что так-то обязательно иметь только favicon.ico, который на самом деле может быть замаскированным PNG. Не всем сайтам нужна поддержка PWA и красивые закладки.
Но вдруг.
P. S. Ну или использовать сервисы вроде https://favicomatic.com/, с любой картинкой.
#favicon #emoji
#такое дня
На правах субботнего бреда, не более того.
Помните, когда только начали появляться первые принципы адаптивного дизайна, ходил популярный мем про адаптивную змею?
Нет? Ну вот, напомню: https://www.reddit.com/r/ProgrammerHumor/comments/vqb2l2/responsive_snake/
Дизайнеру Анатолию Зенкову этого показалось мало! И... вашему вниманию — адаптивный доллар!
Вот: https://anatolyzenkov.com/resizabill
Максимально ненужно, но в этом же и суть! Да и, на самом деле, это отличный пример для многих разработчиков и дизайнеров, которые плохо понимают, что и как вообще можно адаптировать.
#adaptive #design
