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

🔥 Девушка без навыков разработки запустила AI-бота и вышла на первые продажи за месяц Аня из комьюнити @its_capitan заметила: люди учат английский годами, но говорить не могут. И тогда она сделала Telegram-бота, который общается с тобой голосовыми на английском и исправляет ошибки как живой собеседник. Что в итоге: — ~700 пользователей за первый месяц — первые 16 оплат — первая выручка: ~$200 — подписка: $8/мес — сделано на n8n + OpenAI без разработчиков Не было ни команды, ни инвестиций, ни кода. Главное — не технология. Главное — простая понятная ценность. Таких запусков в канале уже десятки. Показываем честно: цифры, провалы, рост и продвижение. Без теорий. Только реальные метрики и запуск в реальном времени. 👉 @its_capitan Подписывайтесь, если интересно, как делать маленькие IT-проекты с доходом и без иллюзий. Реклама: ИП Зуев Игорь Владимирович, ИНН: 360408359441, Erid: 2Vtzqx4pHSC

#видео дня Когда я стал работать в нормальной компании, а не в веб-студии, я внезапно узнал, что оценка задачи происходит в баллах. «Стори поинтах», story points. И стори поинты это не часы. Это некая условная оценка сложности. И выражается, как правило, в числах Фибоначчи: 1, 2, 3, 5, 8… Близко к экспоненциальной зависимости. Если кому интересно, статей на эту тему много. Но дальше происходит самое интересное. Оценка сложности не нужна :) Не в том смысле, что все задачи одинаковы, нет. А в том смысле, что не имеет особого смысла их делить. Очень часто возникает ситуация, в которой все задачи на спринт оцениваются в 3. Или даже, что чаще, в 5. Ну просто потому что. Потому что так команде удобнее. И вот, например, доклад именно на тему оценки сложности: https://m.youtube.com/watch?v=QVBlnCTu9Ms Стоит посмотреть. Много здравых мыслей. Как минимум, вы решите для себя: более усердно относиться к оценке или же просто ограничить число задач на спринт. Не болейте. #agile #teamlead #scrum #бородач

#фишка дня Если ты увлёкся добавлением pointer-events: none к элементам: может чтобы люди не копировали, а может, чтобы UX был получше, — есть вероятность, что дебаг в девтулзах превратится в мучение. Вот как выделить объект, который не слушается мыши? Все очень просто, зажми Shift и выделяй. Работает в Chrome, Edge и Firefox. #devtools #tips #chrome #firefox

☁️ ITENTIS CLOUD: топ-технологии без переплаты за логотип ITENTIS CLOUD — это тот же класс технологий, что у крупных облаков: VPC, Kubernetes, S3, снимки, автомасштабирование, Tier III дата-центры. Без переплаты за логотип. 📣 Самое главное — вы как разработчик, администратор или сотрудник компании можете зарабатывать сами! Подключаете своего клиента или компанию, в которой работаете, — и с каждой его оплаты регулярно получаете свой процент. 🔥 Никаких странных наценок, скрытых опций и сюрпризов в конце месяца. 📞 Ещё один стальной аргумент — поддержка. Не бот и не первая линия, которая ничего не решает, а живой инженер 24/7. Нужно настроить Kubernetes, собрать нетиповую схему? Доведем до результата🦾 💥 Перенесите проекты в ITENTIS CLOUD и убедитесь в стабильности работы в течение бесплатного 14-дневного периода. sales@itentis.ru Бот — @itentis_bot

#ссылка дня Apple славится не только тем, что достаточно медленно развивает Safari в угоду (?) производительности на ватт и безопасности, но и тем, что добавляет в движок очень много фишек, делающих интеграцию WebView в приложения на macOS и iOS проще. Часть, казалось бы, нативных Apple Music, Apple Maps и так далее — это WebView, а вы и не догадывались. И вот одной из таких фишек стало добавление атрибута switch к обычным чекбоксам. Очевидно, превращающим галочки в переключатели. Да, семантика выходит иная. Поспольку остальные браузеры не спешат это добавлять (как раз по причине того, что это, ну, разные же элементы, атрибут выглядит странно), Томас Стайнер реализовал полифилл: https://blog.tomayac.com/2026/01/12/a-polyfill-for-the-html-switch-element/ Демонстрацию можно посмотреть там же. Ссылка на репо: https://github.com/whatwg/html/pull/9546 Как считаете, пора делать переключатели базовыми инструментами форм, или нет? #css #switch #safari

#фишка дня Не так давно мы на работе обсуждали, как показывать и обрезать разного рода id, файловые пути и названия файлов вообще. Ведь очень часто получается так, что значащая информация — она в самом начале и самом конце (корневой каталог и название файла), а text-overflow: ellipsis просто обрезает концовку. Так вот, эта тема на самом деле сейчас весьма в тренде. Многие сталкиваются с похожей задачей и приходят к различным решениям. Не все, правда, делятся. Вот иллюстрацию к посту я взял у пользователя X — azlandotgg. Но кодом он не поделился! Зато uixmat кодом поделился. Точнее, как, поделился... дал ссылку на чат v0 🙈 И хотя там довольно интересно посмотреть ход мыслей, давайте всё же повторим это в Codepen: https://codepen.io/alinaki/pen/azZPPad?editors=1100 Итак, суть идеи: 1. Дублируем строку в атрибуты контейнера и элемента 2. При помощи контейнерных запросов и RTL-направления текста, просто включаем псевдоэлементы с контентом из атрибутов в нужный момент 3. Ну, собственно, всё :) Другим вариантом может стать флексбокс на трёх элементах. Но мне было лениво выгребать код из видео разного рода инфлюенсеров, оставлю на потом. Не знаю, лучше ли это простого подсчёта символов, или нет, но весьма забавно. #css #truncate #middle #cq

Хотите в IT, но пугают ценники на курсы и риск не найти работу? ✋ А вы знали, что сейчас есть платформы, которые настолько уверены в своем обучении, что берут оплату только после того, как вы найдете работу? Речь про Erida — ребята готовят Системных аналитиков с полного нуля. Если вы думаете о смене профессии, но боитесь бросать всё в никуда, это ваш идеальный «безопасный вход». Коротко о главном: — Опыт в IT не требуется. Совсем. — Обучение занимает 3 месяца (интенсивно, но это вполне реально). — Гарантия трудоустройства: компания заинтересована в вашем успехе, потому что оплату вы вносите только после получения первой зарплаты. — Если первая работа «не зайдет», Erida поможет найти другой вариант. На сайте уже есть отзывы студентов, которые рискнули и не прогадали. Посмотрите сами. 👉 Сделать первый шаг в IT здесь: http://erida-it.ru

#баг дня Как вы думаете, что обозначает тип {}? Ну, буквально:

    
        
type b = {};
{}
    

Быть может, пустой объект? Да. А может, объект с любыми свойствами? Тоже да. А может, число или строка? И опять, да. А пустые? Да! А может, булево значение? Невероятно, но тоже да! А может, null или undefined ? Нет. Вот тут — нет. Песочница. Поэтому смысла в использовании типов {} или Object (второе лишь псевдоним к первому) довольно мало. Если вам нужен пустой объект — так и пишите, Record<PropertyKey, never>. Подробнее у Мэтта Покока: https://www.totaltypescript.com/the-empty-object-type-in-typescript. В чём же баг, спросите вы? А баг у нас на этот раз в реализации проверки типов в WebStorm/PhpStorm. У JetBrains, короче. Мы выводим типы из схем Zod, но для целей создания шаблона, мне потребовалось исключить некоторые свойства из проверки:

    
        
TemplateQueryDetails = Omit<
    z.infer<typeof QueryDetails>, 'metadata'
>;
{}
    

И мощно получил в лицо: тип ресолвился за 3 минуты на MacBook Pro M2, вешая интерфейс PhpStorm напрочь. Каждый раз. Решение пришло откуда не ждали:

    
        
TemplateQueryDetails = Omit<
    z.infer<typeof QueryDetails>, 'metadata'
> & {};
{}
    

Обратите внимание на пустой тип. Обнаружил я это случайно: в первом варианте я ещё и добавлял айди шаблона, но впоследствии — отказался. По всей видимости, система типов IntelliJ построена таким способом, что рассчитвывает конъюнкцию типов как новый тип и кеширует на месте. Но это лишь предположение. В VS Code, кстати, проблемы не наблюдается. После обращения в поддержку, мне было рекомендовано включить настройку Use types from server, что буквально выключает встроенные средства и использует типы от LSP. Что, собственно, мне только в плюс. А как ваши дни проходят? 🙂 #jetbrains #typescript #lsp #бородач

Здравствуйте, товарищи! Для начала, пара слов о себе. Валентин Ульянов - разраб, в IT 10+ лет. Последние годы занимался разработкой инструментов и делал редакторы документов, типа Word и Excel. Еще делаю свой open source проект. Выступаю на конференциях и веду IT-сообщество в Питере на 1000+ человек. Мечтаю стать спецом мирового класса в компьютерных науках! А дальше как раз пойдет речь о моем проекте mlut (читается как "млат") - это CSS-фреймворк для кастомных сайтов и креативов. Он помогает верстать проекты с индивидуальным и нешаблонным дизайном, где не подходят фреймворки старой школы и плохо справляются LLM. mlut похож на Tailwind, поскольку основан на подходе Atomic CSS, но по некоторым параметрам превосходит все популярные аналоги. Atomic CSS - это методология верстки, в которой мы используем маленькие атомарные классы, каждый из которых делает одно действие. Эти классы называют утилитами. Обычно они применяет одно CSS-свойство (например, цвет текста), но не обязательно одно. Выглядят они примерно так: D-ib, Bgc-blue_h. Преимущества такого подхода 1. Тратим меньше мыслетоплива: не думаем о нейминге сущностей, структуре каталогов 2. Меньше CSS на клиенте: реиспользуем одни и те же утилиты, а новые стили почти перестают добавляться 3. Быстрее пишем стили: короткие классы, нет переключения файлов 4. Можно применять на любом стеке: JS SPA, PHP, Clojure, etc Ключевые особенности mlut 1. Краткий и строгий нейминг. Сокращения основаны на популярности свойств CSS и составлены по единому алгоритму. Если вы знаете CSS, то вы почти знаете mlut 2. Богатый и нативный синтаксис. Это как Vim для CSS. Удобно создавать сложные стили с помощью мощного синтаксиса, концептуально близкого к CSS 3. Написан на Sass. Используйте всю мощь препроцессора для связи рукописного CSS и утилит Что реализовано на сегодня - генератор утилит почти любой сложности - JIT-движок, который умеет генерировать утилиты из HTML/JSX/etc - CLI с минификацией и автопрефиксером - плагины для сборщиков фронтенда: Webpack, Vite и Rollup - онлайн-песочница Также есть обширная документация. Совместно с HTML Academy готовится интерактивный мини-курс по инструменту. Первый урок уже вышел. Это open source проект - результат глубокого ресерча и 1200+ часов труда. Больше технических деталей есть в расшифровке доклада с HolyJS. Планы по развитию - добавить больше возможностей CSS для сложной верстки: множественные градиенты, псевдоселекторы с аргументами, типа :has(), etc - сделать интеграции для вайб-кодинга - сделать плагины к IDE для автокомплита и подсказок А недавно мы запустили проект на ProductRadar. Бодаемся там со стартапами за топ-3 продуктов этой недели. Будем благодарны за поддержку лайком на этой площадке и любой фидбек. Давайте покажем всем, что open source инструмент тоже может быть продуктом!

#cтатья дня Почти три года назад у меня неплохо так бомбануло на тему недоделанности фишек в современном вебе. Да, мне не очень нравятся статьи и посты на тему того, как скоро всем будет хорошо, надо лишь немножечко подождать. В итоге, нет, не немножечко. Ну, может, на срезе 20 лет... (спойлер: тоже не факт). Ладно, сегодня я конкретно хочу поговорить о состоянии scrolled и stuck для контейнеров. Очевидно, scrolled — это когда мы прокрутили в какую-то сторону, а stuck — это когда при использовании position: sticky мы можем определить, закрепился элемент, или нет. Я тут немного пропустил, но в Chrome 133 состояние stuck таки появилось:

    
        
.scroll-ancestor {
  container-type: scroll-state;
}

@container scroll-state(stuck: top) {
  .child-of-scroll-parent {
    /* Magic happens here! */
  }
}
{}
    

Да, понятие контейнер было мной упомянуто не просто так — эта красота теперь часть контейнерных запросов. И с этим меня познакомила прекрасная статья от Брехта де Рёйте: https://utilitybend.com/blog/is-it-scrolled-is-it-not-lets-find-out-with-css-container-scroll-state-queries/ Так вот, суть-то в том, что в свежем Chrome 144 появилась и поддержка состояния scrolled, да-да, с указанием направления!

    
        
/* If the last scroll was UP, show the header */
@container scroll-state(scrolled: top) {
  .main-header {
    transform: translateY(0);
  }
}
{}
    

Ну это ли не чудо? А если указать inline, можно скрыть/показать индикаторы возможности скролла вообще. Кстати, есть и статья на MDN. Да, очень грустно, что Safari и Firefox пока не шевелятся, но это в принципе можно решить полифиллами. Главное, что направление задано. Но бомбить от недоделанности новых фишек пока не перестало. #css #scroll #state