Верстальщик от бога

Подборка из 5 классных книг для обучения soft-skills и управлению проектами: ▫️Искусство Agile-разработки ▫️Scrum. Революционный метод управления проектами ▫️Agile-трансформация. Готовый план перехода к гибкой бизнес-модели организации ▫️Эпоха Agile. Как умные компании меняются и достигают результатов ▫️Agile для всех. Создание быстрой, гибкой, клиентоориентированной компании Эти (и многие другие книги по soft-skills и управлению проектами) вы можете найти на канале Библиотека PM. Там регулярно публикуются свежие книги на русском языке. Все книги публикуются для ознакомления. ➡️ Подписаться на Библиотеку PM

Анимация по любой траектории с offset-path #почитать У вас же было такое, что ждёте курьера или доставку, а их всё нет и нет? Заходите сайт, обновляете статус, а там «В пути» и больше никакой информации. У нас вот было много раз. В хороших случаях курьера рисуют прямо на карте, и показывают, где он едет, где проехал, и прямо анимацией можно всё рассмотреть. ⏱Читать статью

20 приемов TypeScript, которые должен знать каждый разработчик #почитать Многие разработчики знают основы TypeScript, но знание некоторых приемов может сделать ваш код более эффективным, чистым и поддерживаемым. ⏱Читать статью

Создать App одним промтом #почитать Мы все уже слышали про сотни промтов, которые могут создать полноценный App, и что скоро разработчики будут не нужны. Но давайте попробуем сделать не то чтобы App, а просто интерактивную страничку. Предположим, что я не умею кодить и даже не знаю html. Мы засечём время и посчитаем количество запросов, которые у меня уйдут на получение рабочей интерактивной html-странички. Затем попробуем извлечь из нейросети тот самый заветный один промт, который сможет воссоздать такую же страничку с нуля. Будем делать страничку, отображающую Leadership Development Framework от Гарварда. Это что-то вроде пирамиды Маслоу, только про развитие лидера. Я выбрал её, потому что сейчас как раз занимаюсь этим вопросом. ⏱Читать статью

Друзья! Сегодня мы рекомендуем супер-полезные каналы с еженедельными дайджестами полезных материалов по тестированию и проджект-менеджменту Подпишитесь и будьте в курсе последних новостей и видео в индустрии. Всего 1-2 поста в неделю и у вас есть все, что вышло за неделю. 🟡QA Live 🚩 тестирование ПО 🟡PM Live 🚩 проджект и продакт менеджмент

Вы не знаете CSS. Мои вопросы о CSS с ответами, ч.2 #почитать Есть ли разница в работе псевдо-классов :focus-within и :has(:focus-visible)? ⏱Читать статью

PM Юмор Проджект-менеджеры не ставят дедлайны — они искусно создают атмосферу легкой паники и срочности. «Спринт-планирование»? Что это? Если команда в Zoom, никто не молчит и все делают вид, что понимают — значит, всё идёт по плану! Подписывайтесь на PM Юмор — где шутки появляются быстрее, чем таски в бэклоге! PM Юмор

Адаптивная flex-сетка на CSS: разбираем реализацию на атомы #почитать Наверное, каждый, кто сталкивался с frontend`ом, хотя бы раз использовал адаптивную flex-сетку на N-ном количестве колонок. В данной статье мы не станем рассматривать область применения такого подхода, его плюсы и минусы, а разберем теорию и напишем собственное решение, с брейкпоинтами и настраиваемым спейсингом! Данная статья, в первую очередь, будет полезна новичкам, однако надеюсь, что и опытные хабровчане найдут в ней что-то интересное. Для упрощения жизни, будем использовать SCSS, продублировав CSS «под спойлер». ⏱Читать статью

Getting Creative With HTML Dialog #почитать Любите вы их или не любите, но независимо от того, показываете ли вы оповещение, сообщение или подписываетесь на рассылку, диалоговые окна привлекают внимание к определенному фрагменту контента, не отправляя человека на другую страницу. В прошлом диалоговые окна использовали сочетание разделения, ARIA и JavaScript. Но элемент HTML dialog сделал их более доступными и стилизуемыми бесчисленными способами. Как же вы можете вывести дизайн диалоговых окон за рамки шаблонов и фреймворков? Как придать им стиль, чтобы они отражали визуальную индивидуальность бренда и помогали рассказывать его истории? Вот как я делаю это в CSS, используя ::backdrop, backdrop-filter и анимацию. ⏱Читать статью

Пиши на JavaScript правильно: лучшие практики разработки в 2025 году #почитать JavaScript постоянно развивается: с каждым годом в нем появляются новые возможности, а устаревшие подходы уступают место более эффективным решениям. В этой статье мы рассмотрим ключевые современные практики, которые помогут вам писать чистый, надежный и производительный JavaScript-код. ⏱Читать статью

Все говорят, что работы в айти стало меньше... На самом деле, работы полно. Мы подготовили 7 правильных каналов с вакансиями для тестировщиков, аналитиков, проджект-менеджеров и программистов. В чем фишка этих каналов? — зарплатная вилка🍴во всех вакансиях — еженедельные подборки стажировок для начинающих — как здесь (для QA), здесь (для PM) и здесь (для BA&SA) — быстрый телеграм/email контакт для прямой связи с рекрутером — удобная навигация по уровням/условиям работы/направлениям тестирования ▪️QA Jobs — работа для тестировщика ▪️PM Jobs — работа для Project и Product менеджера ▪️BA & SA Jobs — работа для бизнес- и системых аналитиков ▪️C# & .NET Jobs — работа для C# инженеров ▪️DS&ML Jobs — работа для DS инженеров ▪️PHP Jobs — работа для PHP разработчиков ▪️JAVA Jobs — работа для Java разработчиков ▪️Python Jobs — работа для Python разработчиков Подписаться на все каналы сразу

Скрываем без JavaScript элементы, требующие JavaScript #почитать Я всё тщательно проверил и убедился, что мой сайт отлично (или хотя бы вполне неплохо) работает даже без JavaScript. Но, когда JavaScript недоступен, иногда бывает немного тяжеловато скрывать вещи, скрывать которые необходимо. Всего 7 строк кода (или даже однострочника, для самых душных) достаточно, чтобы скрывать на странице элементы, требующие JavaScript. Поэтому вам не придётся краснеть перед пользователи, которые без JavaScript заметили бы, как хромает функциональность вашего сайта. ⏱Читать статью

Создание вращающейся ручки на основе Input Range #почитать

Когда-то давно, будучи ещё совсем зелёным и несмышлёным кодером, мне взбрело в голову сделать своё приложение. Моих знаний хватало на какой‑нибудь «Hello, World!», но кое‑что выдать я мог. И на тот момент мне позарез нужно было реализовать кноб — тот самый круглый регулятор, который можно крутить и он будет менять значения. И как любой уважающий себя программист, я сразу же полез гуглить стековерфлоу и прочее непотребство, дабы найти тот самый рецепт хлеба сладкого ответ на вопрос, который так долго меня волновал. Однако перешерстив весь интернет, ничего путёвого я не нашёл. Расстроившись, я забил на эту идею. Но какие‑то угольки веры в то, что у меня получится это сделать, тлели в моей охолодевшей к этому миру душонке. И вот на днях, когда я начал работать над своим проектом (небольшая программка, если она найдёт отклик в народных массах, то и по ней напишу парочку руководств, но пока что спустимся на землю), мне опять ударила моча в голову с этими кнобами. Тем более, что все предпосылки ведут именно к этому. Они нужны в интерфейсе. Забравшись в православный яндекс и одновременно в бездуховный гугл, я опять наткнулся на мель отсутствия нужной мне информации. Были только решения с какими‑то библиотеками и интересными историями на jQuery. Плюнув на всё и засучив рукава, я вдруг осознал, что этот мир нуждается в моём компетентном и всем так очень нужном мнении (спойлер: нет). Тогда я принялся за gehirnsturm и молниеносно придумал пару решений. Первое заключалось в SVG на основе path, но оно показалось мне чересчур геморройным. Там много JS надо написать, но не надо никаких стилей зато. И вот второе решение отчасти продолжает идею первого, но с некоторыми отличиями: оно немножко проще в том плане, что начальное, конечное и текущее значение, а также шаг уже вмонтированы в него, что существенно сокращало труды мои праведные. Но, как гласит закон сохранения энергии, энергия не приходит и не уходит, она лишь изменяется. Поправьте, если не так. А это значит, что если где‑то стало проще, то где‑то стало сложнее.

⏱Читать статью

Все единицы измерения в CSS от лучших к худшим #почитать CSS использует разные единицы измерения для задания размеров, отступов, шрифтов и других свойств. Разделяют абсолютные и относительные единицы. Понимание различий между ними — фундаментальная основа адаптивной, масштабируемой и удобной в поддержке вёрстки. ⏱Читать статью

Как сделать галерею-карусель со слайдером на OwlCarousel2 и FancyBox #почитать Галерея-карусель со слайдером — это удобный способ показать изображения на сайте с возможностью листания и полноэкранного просмотра. В этом руководстве мы создадим такой компонент с помощью библиотек OwlCarousel2 и FancyBox. Вы сможете: Листать изображения влево и вправо Выделять центральное изображение По клику открывать картинку в модальном окне с возможностью пролистывания Все будет работать без сборщиков, на обычном HTML + CSS + JS. Используем две библиотеки: OwlCarousel2 — мощная карусель, которая умеет всё, что нужно; Fancybox — лёгкий лайтбокс, который открывает изображения в модальном окне с затемнением фона и анимацией ⏱Читать статью

Прожариваем React #почитать Я пишу на React с 2018 года, делаю это, на мой взгляд, более-менее сносно. Мне нравится тезис о том, что профессионализм заключается не только в умении использоваться достоинства инструмента, но и в умении чётко видеть его недостатки. Поэтому возникла идея сделать что-то типа прожарки React, указав на лично меня раздражающие моменты. С какими-то я смирился, с какими-то нет, что-то научился обходить. Если вас бесит в React что-то, что я не упомянул, не стесняйтесь писать в комментариях, было бы очень интересно сравнить мои ощущения с вашими. И важное: несмотря на указанные ниже проблемы, я до сих пор считаю React прекрасным и удобным инструментом для создания фронтенда, в частности SPA.Громких слов типа «ReactJS не пригоден для разработки» тут не будет - пригоден, да ещё как! Но... и на Солнце бывают пятна. ⏱Читать статью

Обработка SVG данных через Clipboard API #почитать Функция находится в статусе ограниченной доступности в Baseline. Объекты ClipboardItem позволяют писать и читать данные в буфер обмена в различных форматах, в том числе и SVG (image/svg+xml). Это удобно, если нужно скопировать или вставить графику в веб-приложения, сохраняя векторное качество изображения. ⏱Читать статью

Creating an Auto-Closing Notification With an HTML Popover #почитать Атрибут HTML popover превращает элементы в элементы верхнего уровня, которые можно открывать и закрывать с помощью кнопки или JavaScript. Большинство всплывающих элементов могут быть закрывающимися, когда пользователь щелкает или нажимает на кнопку за пределами всплывающего окна. В настоящее время в HTML popover нет встроенной функции автозакрытия, но ее легко добавить. Автозакрывающиеся всплывающие окна полезны для таких пользовательских интерфейсов, как баннерные уведомления - например, пуши-оповещения о новых сообщениях в телефонах. ⏱Читать статью

Август без феста — лето на ветер. В музее-заповеднике «Коломенское» пройдет ИТ-пикник для опытных специалистов. В программе: — Лекции топов индустрии. Обсудим разные темы: от R&D и аналитики до продуктового менеджмента и научпопа. — Интерактивы, квесты, мастер-классы, робототехника и VR, карьерная и ИТ‑лаборатории. — Общение, знакомства и выступления известных артистов. Захватите друзей, семью и коллег — развлечения найдутся для каждого. Подробности и билеты — на сайте ИТ-пикника