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

Полный гайд по UI-китам: как их создавать и подключать #почитать

Разбираем всё с самого начала: от «зачем это вообще нужно» до «как использовать на реальном проекте». А в самом конце найдете репозиторий с фрагментами кода, которые можно использовать в своей работе. Статья для начинающих и не только начинающих.

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

👨‍💼 Project-менеджмент | IT — один из немногих каналов по управлению проектами в IT в телеграм. Для всех проджект-менеджеров и тех, кто хочет ими стать. Почему проджект-менеджмент — классный старт в айти: — хорошо подходит гуманитариям (если вы думали, что в IT работают только технари — вы ошибались) — куча сфер применения — спрос на PM-ов в России и в мире не упадет в ближайшие десятилетия Почему надо подписаться на канал по проджект-менеджменту? — свежие полезные статьи и видео по теме — еженедельная подборка последних новостей, видео и обучающих материалов — обзоры рынка зарплат и вакансий — регулярные тематические обсуждения Подписаться на @projectmanager_it

Отблеск, перспектива и поворот - CSS 3D эффекты для изображений #почитать

CSS, используя определенные приемы, позволяет превращать изображения в аккуратные интерактивные элементы. Эта статья представляет собой сборник необычных 3D-эффектов для изображений, демонстрирующих эти возможности CSS. Мы расскажем о том, как добавить изображениям перспективу, глубину, поворот и даже гладкий блеск при помощи CSS. И все это вы сможете использовать в своем следующем проекте. Все мы согласны с тем, что 3D-эффекты - это круто. Особенно когда они сочетаются с изящной анимацией. В этой статье мы рассмотрим несколько приемов CSS для создания потрясающих 3D-эффектов! "Зачем нам нужна еще одна статья о CSS 3D-эффектах... разве их уже написано не миллионы?" Да, но эта статья немного отличается, потому что мы будем работать с минимальным количеством HTML-кода. Фактически, единственная разметка, которую мы будем использовать для создания некоторых довольно удивительных CSS-эффектов, будет такой: <img src="" alt=""> И все! Нам нужен только HTML тег <img>. Остальное будет делать CSS.

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

details — раскрывающийся список #почитать В современном веб-дизайне ключевую роль играет не только визуальная привлекательность, но и удобство использования. Одним из инструментов, значительно улучшающих пользовательский опыт на веб-страницах, являются теги <details> и <summary>. Эти элементы HTML позволяют создавать раскрывающиеся списки, что делает контент более структурированным и удобным для восприятия. ⏱Читать статью

Депутат Госдумы о блокировке Android и iOS: «Перспектива как бы очевидная» Он также подчеркнул, что вопрос выживания российских систем и суверенитета — это «вопрос существования», и призвал не «цепляться к Ютубу, а думать наперед. Никакой трагедии не случилось, когда россияне лишились доступа к Нетфликсу». ⏱Развитие ситуации с блокировкой сервисов

Кратко про основные техники кеширования в браузере #почитать

Процесс сохранения копий файлов в локальном хранилище браузера, чтобы в последующем загружать их оттуда, а не с сервера. Так можно избежать лишних задержек и снизить нагрузку на сервер, т.к большинство ресурсов, таких как CSS-файлы, скрипты и медиаконтент, не нуждаются в повторной загрузке при каждом новом посещении страницы. В статье рассмотрим несколько основных методов кеширования, таких как использование HTTP заголовков Cache-Control, ETag, и If-Modified-Since, а такжеLocalStorage.

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

Стилизация текстовых полей формы #почитать ▪️Нормализация стилей ▪️Базовый вариант оформления input ▪️input с иконкой ▪️input с активной svg-иконкой ▪️input с кнопкой ▪️input с плавающим label ▪️input со счётчиком символов ▪️Стили для отображения состояния валидации input ▪️Пример валидации формы с помощью JavaScript ⏱Читать статью

🔥 Бриллиантовая подборка книг по Agile, которую мы составили совместно с каналом @pm_lib — кликайте по ссылкам, забирайте себе и читайте! А еще — подписывайтесь на @pm_lib. Там регулярно выкладвают свежие книги по Project- и Product-менеджменту на русском языке! 💎 Чистый Agile. Основы гибкости (2020) — Роберт Мартин Роберт Мартин в своей книге объясняет основные принципы и практики Agile, которые помогают командам достичь гибкости и эффективности в разработке программного обеспечения. 💎 Agile-менеджмент. Лидерство и управление командами (2018) — Юрген Аппело Эта книга раскрывает принципы Agile-менеджмента, фокусируясь на лидерстве и эффективном управлении командами, чтобы повысить их продуктивность и мотивацию. 💎 Постигая Agile. Ценности, принципы, методологии (2018) — Эндрю Стеллман, Дженнифер Грин Книга охватывает ключевые аспекты Agile, включая его ценности, принципы и методологии, предлагая читателям глубокое понимание гибких подходов к управлению проектами. 💎 Agile для всех. Создание быстрой, гибкой, клиентоориентированной компании (2019) — Мэтт Лемей Мэтт Лемей делится стратегиями, как сделать компанию более гибкой и ориентированной на клиента, применяя Agile подходы во всех аспектах бизнеса. 💎 12 шагов к гибкому бизнесу (2019) — Гайдн Шонесси, Фин Голдинг Авторы предлагают пошаговое руководство по внедрению Agile в бизнес-процессы, чтобы компании могли быстрее адаптироваться к изменениям и повышать свою конкурентоспособность. 💎 Эпоха Agile. Как умные компании меняются и достигают результатов (2019) — Стивен Деннинг Стивен Деннинг исследует, как успешные компании применяют Agile принципы для достижения высоких результатов и устойчивого роста в условиях быстро меняющегося рынка.

Загрузка es-модулей в браузерные приложения #почитать

Мне тут на днях попеняли, что, мол, я не в курсе, "что из esm до сих пор нельзя собрать бандл без транспиляции". Ну что я могу сказать... я действительно не в курсе :) На мой взгляд, es-модули придумали как раз для того, чтобы загружать по мере необходимости JS-код непосредственно в браузер, и собирать модули в бандлы - это, ну... как гладить кошку против шерсти. Я понимаю, что традиции / привычки / требования бизнеса / обратная совместимость / корпоративная этика и т.п. говорят о том, что код для браузерных приложений должен поставляться в бандлах и точка! Тем не менее, в некоторых случаях (малые приложения, быстрое прототипирование, распределённая разработка) сборка бандлов является излишней и код в браузер можно и нужно загружать непосредственно в виде es-модулей.

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

🐞 Тестировщик в IT — канал, на который мы рекомендуем подписаться. Полезный образовательный контент для начинающих тестировщиков и всех, кто хочет ими стать. Почему? ◾️во-первых, авторы — работающие QA-инженеры и отбирают самые полезные и актуальные материалы. ◾️во-вторых, на канале публикуются мини-обзоры на полезные инструменты для работы ◾️в-третьих, ребята пишут свои авторские гайды по тестированию, которых нет больше нигде в сети Перейти на канал и подписаться можно по ссылке: @testirovanie_ru

CSS тени и неоморфный дизайн #почитать Как добавить различные типы теней к блочным элементам и тексту. ⏱Читать статью

Раскатили фан на полную 17 августа в Москве в музее-заповеднике «Коломенское» пройдет ИТ-пикник — фестиваль для опытных ИТ-специалистов, их близких и друзей. Будет больше 17-ти ИТ-партнеров фестиваля. В программе воркшопы, лекции от спикеров известных компаний, нетворкинг, выступления топовых музыкантов и детская зона. Придут Леонид Агутин, TRITIA, Дайте танк (!), Драгни, Найк Борзов и Нееет, ты что. А вы придете? Успейте зарегистрироваться erid:2VtzqwiSyGw Реклама. АО "ТБанк", ИНН 7710140679, лицензия ЦБ РФ № 2673

Гайд по верстке HTML странички. Объяснение принципов, а не примеров #почитать

Существует более 100 различных стандартных HTML тегов, при помощи которых можно сверстать страничку. И еще больше CSSсвойств, применяемых к этим HTML тегам. Правда в том, что на практике в основном используются всего 6 из этой сотни и может-быть 10-15 CSS свойств. В данной статье я попробую охватить сценарии использования HTML и CSS, которые закроют 80% ваших задач, а также аргументирую, почему создание страничек сайта при помощи верстки не уступает по сложности использованию конструкторов сайта (разница только в скорости).

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

CSS фигуры: 15+ примеров #почитать В этой статье приведены примеры того, как можно при помощи CSS сделать различные геометрические фигуры: треугольники, параллелограммы, ромбы, "диалоговые пузыри" и многое другое. ⏱Читать статью

Магия CSS на практике: советы по вёрстке от гика #почитать Сегодня я расскажу: как избавиться от соседнего родственного комбинатора + при реализации нестандартных чекбоксов и радиокнопок; про свойство inset, сокращающее код на целых три строки; мой сниппет для расширения интерактивной области у кнопок и ссылок; стиль написания медиа-запросов, позволяющий сократить количество правил; альтернативный способ центрирования элемента без свойства transform. ⏱Читать статью

Как создать макет Masonry с помощью HTML и CSS #почитать Компоновка Masonry (каменной кладки) — конструкция на основе сетки, в котором минимизированы вертикальные зазоры между элементами. ⏱Читать статью

📚 Друзья, для тех, кто хочет ознакомиться с большим количеством книг по тестированию, есть отличный телеграм-канал — Библиотека QA Совместно с Библиотекой QA мы подготовили бриллиантовую 💎 подборку книг для обучения тестированию. Все эти книги можно бесплатно скачать у ребят на канале: 💎 "Тестирование программного обеспечения. Основы" Захаров В.В. Обзор базовых понятий и методик тестирования программного обеспечения, подходящий для студентов и начинающих специалистов в области ИТ. 💎 "Эффективное тестирование" на русском Maurício Aniche Практическое пособие по улучшению процессов тестирования с использованием различных техник, включая тестирование на основе данных и автоматизацию. 💎 "Тестирование DOT COM" Роман Савин Практическое руководство по тестированию веб-приложений, в котором автор делится своим опытом и методами выявления и устранения багов. 💎 «Тестирование программного обеспечения. Базовый курс» Святослав Куликов Введение в основы тестирования программного обеспечения, охватывающее ключевые концепции, методы и инструменты для начинающих тестировщиков. 💎 «Как тестируют в Google» Джефф Каролло, Джеймс Уиттакер, Джейсон Арбон Описание уникальных подходов и практик тестирования, применяемых в Google, с акцентом на автоматизацию, масштабируемость и инновации. 💎 "Сам себе тестировщик. Пошаговое руководство по тестированию ПО" Чхави Радж Досадж Пошаговое руководство, предназначенное для тех, кто хочет начать карьеру в тестировании программного обеспечения, с множеством примеров и практических советов. 🐞 Подписывайтесь на Библиотеку QA

Factor and Block CSS — методология CSS #почитать

Сегодня я расскажу о новой методологии для CSS, которая поможет вам сэкономить время на чтение и редактирование CSS-файлов. Методологию я придумал сам, FBCSS (Factor and Block CSS) - методология, представляющая собой разделение css-свойств по факторам (каким-то отличительным признакам) и блокам (кускам кода). Методология разрабатывалась для улучшения читабельности CSS кода. Думаю, ни для кого не секрет, что в CSS-файлах число строк может пробивать отметку в 1000. Представьте, что вам на работе доверили работать с этим CSS-файлом, вы заходите в файл и видите "месево" из символов... Жутко работать с таким, правда ? Некоторые могут сказать, что не всегда все так плохо и не всегда CSS-файл - "каша" символов. И они будут правы, не всегда, но даже если какая-то минимальная стилистика в написании кода и соблюдается, то поиск нужных элементов или ни как не отсортированные свойства могут затруднить работу.

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

Адаптив без боли: как сделать резиновую вёрстку с заботой обо всех разрешениях #почитать

Все верстальщики рано или поздно сталкивались с болью, которая заключается в адаптиве сайта под различные устройства. Существуют разные технологии, упрощающие подгонку размеров под определённые устройства, например, clamp(). Эта функция удобна, так как позволяет минимизировать использование брейкпоинтов, но у неё есть свои недостатки.

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

Что нужно знать о современном CSS #почитать

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

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