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

Архитектура CSS: SMACSS, БЭМ, Atomic #посмотреть OOCSS, SMACSS, БЭМ, Atomic (functional) CSS и CSS-in-JS (JSS). ⏱Смотреть на YouTube ⏱1 час

▫️ Обтекаем элементы #посмотреть Свойство float, для чего мы его применяем, как скомпоновать по своему элементы на странице. Свойство float позволяет нарушать естественный порядок блоков, ввиду чего и является одним из самых мощных инструментов. ⏱Смотреть на YouTube ⏱20 минут

Нужно обсудить CSS 5 #почитать Что будет после CSS3? Известно, что CSS4 так и не появился. Группа W3C CSS-Next ищет методы описания CSS и определения наборов функций, как это было с CSS3 в 2009 году. ⏱Читать (en)

✅ Коды ответов HTTP ❌ Ever wondered what those three-digit numbers mean when you browse the web? Let's break it down! HTTP Status Codes are like messages from the website to your browser, telling you how the request went. 1. 1xx - Informational: Preliminary status codes indicating the server has received the request and is continuing the process. 2. 2xx - Success: These codes mean the request was successful, showing various outcomes like: - 200 OK: Everything went smoothly, and the server processed the request successfully. - 201 Created: A new resource has been successfully created. 3. 3xx - Redirection: Signifying that more action is needed to complete the request, like: - 301 Moved Permanently : The requested resource has been permanently moved elsewhere. 4. 4xx - Client Error: These codes represent errors caused by the client's request, including: - 400 Bad Request : The server can't understand the request due to a client error. - 404 Not Found : The requested resource doesn't exist on the server. 5. 5xx - Server Error: Indicating issues on the server side, such as: - 500 Internal Server Error : Something unexpected happened on the server, causing an error.

Станьте разработчиком нейро-сотрудников на Python и зарабатывайте от 150.000р в месяц 🔥🔥🔥 Мы научим вас создавать топовых нейро-сотрудников на базе GPT-4 Omni, и вы сможете: 1️⃣ Устроиться разработчиком в крупную компанию и зарабатывать от 150 тысяч ₽ в месяц 2️⃣ Разрабатывать такие проекты на заказ и зарабатывать от 500 тысяч ₽ за проект 3️⃣ Создать нейро-сотрудника в вашей компании и вырасти на +30-100% в зарплате Что будет на интенсиве? 🧬 Теория: как создаются нейро-сотрудники с GPT-4o на Python 🧬 Практика: мы создадим нейро-консультанта, нейро-HR, нейро-маркетолога и др. Ведущий интенсива - Senior AI разработчик нейросетей и основатель Университета искусственного интеллекта 🔥 Регистрируйтесь на бесплатный интенсив! Встречаемся в ближайший четверг!

▫️ Урок freeCodeCamp по CSS: анимации #посмотреть 24 CSS-проекта за 2,5 часа ⏱Смотреть на YouTube

Полезный блог про iGaming, который ведет СЕО 1win! 💙 Канал Owner 1win — про философию управления из первых уст. Простыми словами о сложном iGaming. Тут ты найдешь: ⚡️ Гемблинг-инсайды ⚡️ Бизнес-советы ⚡️ Экспертные комментарии овнера ⚡️ Апдейты по проектам Присоединяйся к Owner 1win и будь на волне iGaming трендов

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

Easing Functions – функции плавности CSS-анимации и переходов #почитать Мы живые люди, и привыкли к естественному, нелинейному движению. ⏱Читать статью

Промпт-инженеринг — новый хайп или перспективная профессия? Рассказываем про направление с большим потенциалом и маленькой конкуренцией на рынке на нашей бесплатной лекции. По итогам эфира вы узнаете: — Кто такой промт-инженер и чем он занимается; — Как интегрировать скиллы промт-инжинеринга в работу, если вы работаете в IT; — Кому в действительности нужны его услуги и какие результаты это даст; — Сколько платят промт-инженеру в России и мире; — Кто может стать промт-инженером и какой порог входа; Кликай на ссылку и забирай подробную информацию вместе с классными бонусами. ООО Зерокодер, ИНН 9715401631, erid: LjN8KK6YR

JavaScript. Полное руководство. Автор: Дэвид Флэнаган Год издания: 2021 #javascript #ru Скачать книгу

Пивной бар-хоппинг для айтишников 12 сентября в 20:00 Финтех-компания Точка приглашает в пять московских баров в День программиста! Выпьем пива, пройдём квест про технологии и обсудим холиварные темы. Пройди задания, собери пасхалки и получи подарок — пивной бокал с гравировкой. Подробнее что будет: ● Бесплатное пиво — по стакану в каждом из пяти баров. ● Квест по пяти барам — грохнем прод, поугадываем звуки ностальгии и найдём ошибки джуна с помощью УФ-фонарика. ● Холивары — обсудим наболевшее с инженерами из Точки: – Свобода выбора в технологиях: рай разработчика, ад тимлида. – Техдолг — копить или платить. – Алгоритмы и задания на собеседованиях — кринж или база. – 7 столпов ML — нужны ли они все. – Куда исчезли сисадмины. Ждём разработчиков, продактов, аналитиков и всех, кто работает в IT. Приходите сами и приводите друзей! Зарегистрироваться и узнать больше про активности.

Получение размера окна на чистом CSS #почитать Вы не поверите, но теперь в CSS можно определять свойства, выполнять математические вычисления и даже напрямую получать размер окна ⏱Читать статью

CSS-классы вредны #почитать Если вы когда-нибудь заглядывали за кулисы пользовательских веб-интерфейсов, то знаете для чего нужно свойство class. Оно ведь нужно для связи HTML с CSS, правда? Сейчас я расскажу о том, почему настало время отказаться от него. Имена классов — это архаичная система, используемая как неудачный посредник для примитивов UI; ещё хуже то, что они создают ужасные сочетания, приводящие к комбинаторному взрыву странных пограничных случаев. ⏱Читать статью

Выбор очевиден 🤌 Вот вам идея для крутого уикенда: приходите / приезжайте с друзьями и коллегами 9 ноября на EXOZ { "conf" : "frontend" } 💚 Напомним, что на этот раз вас ждут: - кофебрейки и дискуссии со спикерами - полноценный обед - скидка на проживание в отеле - геймификация, конкурсы и большой розыгрыш призов - обновленный мерч - профессиональный фотоотчёт - афтерпати в кругу единомышленников - сюрпризы от нашей команды Самое время купить билеты по классной цене, ведь осталось чуть больше двух месяцев! А если нет возможности приехать, то подключайтесь онлайн. Всех ждём 🙌 И не забудьте подписаться на нас, рассказываем много полезного по мероприятиям и не только 😉

Секреты javascript ниндзя Авторы: Джон Резиг, Беэр Бибо, Иосип Марас Год издания: 2017 #javascript #ru Скачать книгу

Мой топ CSS-in-JS решений #почитать CSS‑in‑JS — подход к стилизации, который позволяет писать стили прямо в JavaScript‑коде. Преимущества такого подхода: Изоляция стилей: компоненты получают свои собственные стили. Динамические стили: легко применять стили в зависимости от состояния компонента или пропсов. Поддержка тем: удобное управление темами и их переключение на лету. Интеграция с JavaScript. ⏱Читать статью

JavaScript. Обработка событий на примерах Автор: Янцев В. В Год издания: 2021 #javascript #ru Скачать книгу

▫️ Создание интернет-магазина на Opencart #посмотреть 18 уроков. ⏱Смотреть на YouTube

Маска изображения #почитать Часто упускаемое из виду CSS свойство mask-image может быть простым способом привнести немного индивидуальности в вашу работу над веб-дизайном. ⏱Читать статью

overflow #почитать Свойство overflow позволяет буквально определить, что делать с содержимым блочного (то есть для элемента, у которого display определяется как block, inline-block, flex или grid) элемента, если оно не влезает в размеры — отобразить или обрезать (с полосами прокрутки или без). ⏱Читать статью

Вопросы к собеседованию React (Junior level) #почитать В этой статье я подробно разберу 10 вопросов для начинающего разработчика, подготовка к ответам на эти вопросы поможет вам чуть подробнее понять основные концепции React. ⏱Читать статью

CSS3 - Создание слайдера в стиле аккордеона #почитать На этом уроке мы создадим слайдер, который будет работать наподобие аккордеона. Разработку слайдера выполним только с помощью стилей CSS 3. ⏱Читать статью

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

Создание статических сайтов из Markdown без HTML (pandoc, mkdocs, hugo и jekyll) #почитать На протяжении нескольких лет практики написания скриптов на PowerShell, я веду заметки преимущественно связанные с данным языком и периодически фиксирую их в своем репозитории на GitHub (за последние несколько месяцев добавил достаточно много новых пример, в том числе шпаргалку по работе с командами Docker), чтобы всегда можно было к ним обратиться с рабочего компьютера через Интернет. Недавно задумался, почему бы не попробовать создать из файла в формате Markdown статический сайт, который можно очень просто, и главное бесплатно разместить на том же GitHub, особенно это стало актуально с тех пор, когда количество строк документа перевалило за 6 тысяч и на главной странице с описанием проекта весь объем документа уже не умещается, а используя приложение на Andrioid вовсе отображается пустая страница (хотя, достаточно разбить документ на несколько, что в будущем я и сделал для сайта). У меня нет опыта создания полноценных сайтов (за исключением конструкторов), и такой вариант я даже не рассматривал, язык описания README файлов очень даже подходит для оформления страницы, например, он также используется на Habr для написания статей, а в новом редакторе еще и в автоматизированном формате. Синтаксис написания у этого языка разметки очень простой, а по сравнению с HTML более компактный и читабельный (хотя, тут дело привычки). ⏱Читать статью

👑 Кто работает QA — тот в цирке не смеется 🤡 Наша сегодняшняя рекомендация — канал с QA юмором. Мы работаем в тестировании и уже не смеемся. Но если вас можно рассмешить — welcome в QA Юмор

Использование CSS анимации, основанной на прокрутке, для индикации прогресса прокрутки на основе секций #почитать Индикатор прогресса прокрутки — довольно простая вещь, которую можно создать с помощью анимации, основанной на прокрутке в scroll()-стиле. Но мы создадим индикаторы для каждого раздела страницы, используя view()-стиль. ⏱Читать статью

🐛QA Automation | IT — полезные материалы по автоматизированному тестированию. Гайды, авторские статьи и обучающие видео. Подписаться

Как меня чуть не уволили за выбор React #почитать Грустная история о том, как неправильный выбор библиотеки привел к большим проблемам. ⏱Читать статью

Как я написал загрузчик YouTube видео на Ktor + HTMX #почитать Инструмент, который возвращает сайтостроение назад к истокам. ⏱Читать статью

Смежный селектор + #почитать Смежный селектор в CSS, обозначаемый знаком плюс (+), позволяет выбирать элемент, который является непосредственным соседом другого элемента на одном и том же уровне иерархии DOM. Этот селектор эффективен для применения стилей к элементу, находящемуся в точном последовательном порядке после другого элемента в коде HTML. ⏱Читать статью

CSS медиа-запросы (media queries) #почитать ▪️Что такое медиа-запросы ▪️Синтаксис ▪️Типы устройств ▪️Логические операторы ▪️Медиа-характеристики ▪️Медиа-запросы в и @import ▪️Дополнения из Media Queries Level 4 ▪️Код JavaScript, учитывающий параметры устройств ⏱Читать статью

position: sticky #почитать Элемент с position: sticky «прилипает» к экрану при прокрутке, пока не встретится с границей родительского блока. ⏱Читать статью

Необычные украшения изображений - с одним элементом #почитать Как следует из названия, мы собираемся украшать изображения! На эту тему уже написано множество статей, но то, что будет рассмотрено здесь, немного отличается, потому что это скорее вызов. Вызов? Да, задача украсить изображение, используя только тег и ничего больше. Все верно. Никакой дополнительной разметки, никаких дополнительных элеменов div и никаких псевдоэлементов. Только один тег. ⏱Читать статью

Друзья, сегодня рекомендуем отличный канал с материалами по бизнес- и системному анализу! 😇 аналитик от бога — лучший канал для аналитиков от создателей сайта

systemanalysis.ru

Что отличает нас от других каналов по системному анализу: ▪️мы — создатели systemanalysis.ru и канала Тестировщик от бога — одного из самых крупных телеграм-каналов по тестированию; ▪️мы пишем свои материалы: составили дорожную карту развития бизнес- и системных аналитиков, в которой собрали все, что надо знать для успешной работы; ▪️мы не постим ленту из хабра — все материалы, которые мы пишем или отбираем, мега-полезные. Перейдите в канал и убедитесь в этом сами. ▪️и многое-многое другое Подписывайся на аналитика от бога и узнай уже наконец разницу между product roadmap-ом и спецификацией требований 😇

Как сделать таймер на CSS #почитать Давайте рассмотрим использование CSS в качестве альтернативы JavaScript для создания простых таймеров. Используем современные свойства CSS, такие, как @property, @keyframes, и псевдоэлементы со значениями counter(). ⏱Читать статью

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

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

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

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

и

. Эти элементы 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 Реклама. АО "ТБанк", ИНН NaN, лицензия ЦБ РФ № 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 #почитать В представленных здесь функциях есть гораздо больше синтаксиса, подробностей и нюансов, я просто хотел показать вам возможности, продемонстрировать базовый синтаксис и примеры использования. ⏱Читать статью

Фронтендеры, го бустить скиллы в CodeRun: будем решать скриншотные задачки и выигрывать призы в турнирах CodeRun — бесплатный онлайн-тренажер Яндекса с огромным каталогом задач от разработчиков Яндекса и внешних экспертов. Здесь можно учиться, готовиться к техническим собесам и получать призы за победу в сезонных турнирах: мерч, сертификаты и даже возможность попасть в Яндекс по упрощенному формату найма. Одна из топовых фич — наличие скриншотных задач для фронтенд-направления. В подборке заданий от руководителя проектов Контеста Никиты Дубко можно пройти путь от рисования простых примитивов до полноценных CSS-иллюстраций. Залетай в CodeRun, проходи подборки от экспертов, отслеживай прогресс и лутай призы в турнирах: 2 сезон сейчас в самом разгаре!

Подробное руководство по началу карьеры фронтендера #почитать Комментарий: Главное не тешьте себя надеждами, что это всё история на пару месяцев, а после 100кк/наносек, сейчас рынку больше нужны специалисты миддл+ уровня, потому что джунов стоит целая очередь, а ещё нейронки пишут легкий код всё лучше и лучше, поэтому будет куда правильнее если потратите на обучение хотя бы год, но даже потратив год не думайте, что залетите на работу за месяц, слышал данные, что сейчас в РФ среднее время поиска работы у джуна это полгода, поэтому учитесь и не отчаивайтесь ⏱Читать статью

Новые функции CSS mod, round. Анимированные Sprite Sheet без JS #почитать Sprite Sheet — это техника в веб-разработке, позволяющая использовать множество различных кадров анимации, хранящихся в одном изображении. Это эффективный способ уменьшить количество HTTP-запросов к серверу и ускорить загрузку веб-страницы, так как все кадры анимации загружаются одновременно. ⏱Читать статью

37 Советов от Senior Frontend Разработчика. Для начинающих #почитать Решил поделиться своими советами после более чем 5-летнего опыта работы фронтендером. ⏱Читать статью

Летающий Санта и танцующие снегири: опыт реализации и оптимизации CSS-анимации #почитать Большое количество графики и анимаций потребляет достаточно много ресурсов. Однако благодаря оптимизации можно сделать так, чтобы всё работало без глюков и тормозов. ⏱Читать статью

🟡В России готовятся к блокировке YouTube в сентябре В России планируют окончательно заблокировать YouTube в сентябре, сообщил «Газете.Ru» источник, близкий к администрации президента. Эту информацию подтвердил источник в компании, занимающейся сбором информации для силовых структур. «На протяжении июля‑августа будет некая деградация, то есть в отдельных регионах будут ухудшаться условия работы YouTube. В каких‑то будет замедляться, в каких‑то — подлагивать сайт, где‑то приложение будет отваливаться. А в сентябре начнётся блокировка», — рассказал источник, близкий к АП. Второй источник «Газеты.Ru» заявил, что также получил информацию об отключении сервиса осенью. ⏱Подробно

Законы UX-дизайна: что делает пользователей счастливее, а продукт лучше #почитать Расскажу о законах человеческой психологии и восприятии, помня о которых можно создать нормальный UX‑дизайн. ⏱Читать статью

▫️ Wasm и прочее #посмотреть Wasm, поиск по странице, Safari, Scroll-Driven Animations, фигуры, серверные компоненты и CSS. Стрим Сообщества "Вебстандарты". ⏱Смотреть на YouTube ⏱2 часа

Друзья, сегодня рекомендуем отличный канал с материалами по тестированию! 🐞Тестировщик от бога — официальный канал сайта

testengineer.ru

. Что отличает нас от кучи других каналов по тестированию: — мы — один из самых крупных каналов по тестированию в телеграм существующий с 2019 года; — мы пишем свои материалы: составили дорожную карту тестировщика, в которой собрали все, что надо знать для успешной работы; — подготовили 🔥 большой учебник по тестированию, где собрали огромное количество материалов для обучения; — мы проводим регулярные холиварные обсуждения — вот, например, подписчики рассказывают, как искали первую работу и какой была их первая зп; — мы не постим ленту из хабра — все материалы, которые мы пишем или отбираем, мега-полезные. Перейдите в канал и убедитесь в этом сами. — и многое-многое другое Подписывайся на тестировщика от бога и узнай уже наконец разницу между тест-планом и баг-репортом 😇

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: «Как скрыть элемент доступно?» #почитать Вопросы по вёрстке из собеседований на должность фронтендера. ⏱Читать статью

▫️ Полный гайд по CSS Flexbox с примерами из практики #почитать В интернете уже довольно много гайдов по Flexbox в CSS. Но чаще всего это шпаргалки, которые не сильно помогают разобраться как на самом деле все работает. Я постараюсь раскрыть тему на реальных примерах. А в конце статьи поделюсь лайфхаками, которыми сам постоянно пользуюсь в работе. ⏱Читать статью или ⏱Посмотреть на Тубе

🐛 SQL для тестировщика — канал для развития одного из обязательных навыков QA-инженера. Публикуем обучающие видео и много-много задач и тестов для тренировки. Чем мы отличаемся от остальных: — грамотные редактора (работающие разработчики и QA, создатели канала Тестировщик от бога и портала testengineer.ru); — качественное оформление; — уникальные материалы (некоторые материалы мы пишем и переводим сами); Подписывайтесь на наш канал по SQL.

Бесконечная прокрутка логотипов на чистом HTML и CSS #почитать Помните HTML-элемент marquee? Он устарел, поэтому вряд ли стоит его использовать, когда понадобится что-то вроде горизонтальной автопрокрутки. Вот тут-то и приходит на помощь CSS, потому что в нём есть все необходимые инструменты для реализации этой функции. ⏱Читать статью

Якорные ссылки и как их сделать потрясающими #почитать Якорные ссылки — простой способ создать навигацию по странице. Например, в оглавлении можно использовать якорные ссылки для перехода к различным разделам страницы. ⏱Читать статью

Нейминг HTML-тегов #почитать Речь пойдет именно о тегах с кастомными именами, не о веб-компонентах. ⏱Читать статью

Как я делал шрифтовые иконки. Совмещаем желание UX-дизайнеров и возможности фронтендеров #почитать Скажу сразу, что иконочные шрифты не всегда являются наиболее эффективным и надёжным вариантом, но они по-прежнему относительно просты и легки в реализации. ⏱Читать статью

🔤🔤🌌🔤🔤🔤🔤🔤 — канал с PM юмором ➡️ Подписаться

Заблуждения о Специфичности CSS #почитать ▪️Специфичность — это десятичная оценка ▪️Использование атрибута style добавляет Специфичности ▪️Использование !important добавляет Специфичности ⏱Читать статью

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

Каким было ваше первое место работы? Присоединяйтесь к обсуждению в комментариях #discussion

Эффект размытия вместо тени на CSS #почитать С тенями в CSS все довольно просто: объявляете свойство box-shadow, задаете смещения тени, определяете размытие и задаете цвет. Это отличный способ придать глубину тому, что в остальном было бы плоским дизайном! Черпая вдохновение в тенях, автор статьи Яир Эвен Ор (Yair Even Or) создает нечто подобное, только с эффектом размытия вместо тени. В этой статье вы получите пошаговое объяснение того, как это делается с помощью комбинации масок, градиентов и старого доброго свойства backdrop-filter. ⏱Читать статью

Узнайте, как сделать ваш сайт быстрее и безопаснее, на бесплатном курсе Base cloudfort Вас ждут 8 уроков с теорией и практикой, где опытные эксперты поделятся своими кейсами и реальными примерами. Обучение будет проходить в формате видеолекций и общения с преподавателями в чате, так что у вас всегда будет поддержка и ответы на вопросы. Что вы изучите: — Ускорение сайтов и защиту от DDoS-атак. — Основы CDN и методы балансировки нагрузки. — Принципы работы с медиахранилищем и адаптацией медиаконтента. — Как запустить онлайн-трансляцию без лишних затрат. Участники также получат бесплатный доступ к новому продукту cloudfort для защиты и ускорения сайтов. Сервис позволяет создавать S3-хранилища, ускорять веб-ресурсы и включать защиту от кибератак. Регистрируйтесь на курс по ссылке. Реклама ПАО «ВымпелКом», beeline.ru erid: LjN8K9NV5

Анимация элемента dialog - практикум #почитать Казалось бы, можно просто установить в CSS transition от 0 к 1 для opacity элемента dialog, но это не работает. Необходимо изучить @starting-style, а также ключевые слова overlay и allow-discrete. ⏱Читать статью

Непроизвольная тирания пользовательских интерфейсов #почитать Посыл этой статьи заключается в том, что одержимость лёгкими, «интуитивными» и, возможно, даже эффективными пользовательскими интерфейсами формирует слой мягкой тирании. Такой слой я бы создал, будучи диктатором, стремящимся усладить общественность в подготовке к лишению её свобод в будущем. Я бы так сильно привязал людей к нелепым ограничениям при использовании разных вещей, что подобное издевательство стало бы нормой. ⏱Читать статью

🎁 Готовый сайт Аспро со скидкой 30% До 7 июля Аспро дарит скидку 30% на топовые интернет-магазины. При заказе в комплекте с 1С-Битрикс максимальная выгода — 34 900 ₽. Вводите промокод в форме на лендинге или корзине, чтобы получить скидку и запустить современный сайт: VERSTKA30 Реклама: ООО "Аспро", erid 2Vtzqw75VXu

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

Как определить текущее местоположение пользователя на сайте #почитать Впервые за весь свой опыт работы frontend разработчиком я столкнулся с задачей определения города (решение применимо не только для города, но и страны, улицы и т.д.) текущего пользователя и, порыскав в интернете, находил лишь кусочки того, что мне нужно, поэтому, чтобы сэкономить время тех, кто столкнулся с похожей задачей решил опубликовать данную статью. Прежде чем писать код, хотелось бы отметить, что моё решение не претендует на "чистое" и единственно-верное, поэтому если есть более гармоничное и красивое решение - используйте его (буду только рад если поделитесь им). Если кому интересно, задача была реализована на Options API, фреймворка Vue, но сам код написан на чистом JS. Это может быть полезно и тем, кто пишет на React и т.д. ⏱Читать статью

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

Айтрекинг и юзабилити интерфейсов веб-сайтов #почитать Айтрекинг — это технология, позволяющая измерить и проанализировать, куда и как долго смотрит пользователь. В основе айтрекинга лежит использование специализированного оборудования и программного обеспечения для отслеживания движений глаз пользователя. ⏱Читать статью

Анимации CSS, основанные на времени #почитать Использование времени для анимации очень часто встречается в шейдерных программах и различных других местах. CSS не может запустить таймер, как это делает JavaScript, но сегодня можно определить пользовательскую переменную с помощью CSS Houdini API для отслеживания времени в миллисекундах. ⏱Читать статью

В поисках площадок для практики в программировании? Вот список вебсайтов, которые помогут вам улучшить свои навыки, подготовиться к техническим собеседованиям и стать еще лучше! ▫️LeetCode LeetCode предлагает широкий спектр задач по программированию, охватывающих такие области, как алгоритмы, базы данных и другие. Отличный ресурс для подготовки к техническим собеседованиям благодаря разнообразным задачам. ▫️HackerRank На HackerRank вы найдете разнообразные задачи по программированию, созданные сообществом. Платформа позволяет сравнивать свои решения с решениями других пользователей, что помогает учиться на примерах. ▫️Codewars Codewars идеально подходит для начинающих программистов. Платформа предлагает небольшие задачи, которые помогают постепенно развивать навыки программирования. ▫️TopCoder Один из старейших сообществ по конкурентному программированию. TopCoder регулярно проводит конкурсы по разработке программного обеспечения и дизайну, что делает его отличной платформой для тех, кто хочет соревноваться и улучшать свои навыки. ▫️Codecademy Codecademy предлагает интерактивные курсы и упражнения по программированию для начинающих и программистов среднего уровня. Платформа помогает изучать новые языки и технологии с нуля.

Неизвестно полезный CSS. Часть 3 #почитать Я продолжаю рассказывать про неизвестные широкому кругу разработчиков CSS-фишки. Я отбираю их так, чтобы они были полезны в разного рода проектах. Неважно, верстаете ли вы сайт для малого бизнеса или создаёте супермодное React-приложение. Они поддерживаются большинством браузеров. Отдельно отмечу, что я не считаю IE11 современным браузером. По этой причине я не учитывал его. Сегодня мы рассмотрим: - возможность задать несколько фонов с помощью свойства background; - свойство display, которое позволяет сделать так, что свойства элемента будут влиять через потомка; - как заставить псевдо-элемент nth-child выбрать элементы без привязки к позиции; - где будет находиться элемент с position: absolute, если для него заданы свойства grid-column и grid-row. ⏱Читать статью

▫️ Бесплатный марафон по верстке сайта html/css/js для новичков #посмотреть Верстка сайта для всех, кто делает свои начальные шаги в верстке сайтов. В видео я подробно объясняю каждый этап разработки. ⏱Смотреть на YouTube ⏱2 часа 15 минут

Тенденции адаптивного и инклюзивного дизайна #почитать Здесь могло бы быть долгое вступление про то, как современные веб‑приложения прошли путь от простых макетов, ограниченных технологиями своего времени, до способных подстраиваться даже не под ограничения технологий, а под ограничения самих пользователей. Но сейчас важно совсем другое. Как ни крути, все пользователи разные, и иногда ограничения касаются их физических возможностей. Этими вопросами занимается адаптивный дизайн и, в частности, инклюзивный. ⏱Читать статью

Стилизация участков текста с помощью CSS Custom Highlight API #почитать В этой статье я расскажу, как с помощью CSS Custom Highlight API можно стилизовать выделенные диапазоны текста, а также разберу теорию на практическом примере. ⏱Читать статью

▫️ Google I/O и Config, Translation API, Figma, Invokers, бета React 19 #посмотреть Также длинные альты, атрибуты и свойства. ⏱Смотреть на YouTube ⏱1 час 30 минут

Как мы создавали дизайн-систему #почитать Спойлер – в результате разработка фич стала быстрее в 2 раза, сборка дизайн-макетов ускорилась в 3-4 раза, а UI приложения удалось избавить от хаоса из рандомных шрифтов и иконок и унифицировать. ⏱Читать статью

Когда во всех вакансиях просят минимум 10-15 лет опыта и возраст до 25-30 лет)))

Создали сайт, чтобы вам не пришлось 😊 Представляем готовую инновационную платформу для запуска сайта — Аспро: Приорити 2.0. На ней пользователи могут показать экспертность, собирать заявки и получать оплату. Только для подписчиков канала «Верстальщик от Бога» дарим скидку 20% по промокоду: VERSTKA20. Реклама. ООО "Аспро", ИНН 7453223946, erid: LjN8KKRBR

10 непопуляризованных UI-элементов, улучшающих взаимодействие #почитать 1. Микроинтеракции для Форм Обратной Связи 2. Персонализированные Тултипы 3. Индикаторы Прогресса для Длинных Форм 4. Гибкие Фильтры Контента 5. Ленивая Загрузка с Анимацией 6. Плавающие Кнопки Действия (Floating Action Buttons) 7. Кастомные Скроллбары 8. Интерактивные Иллюстрации 9. Свайп-карусели в Веб-Дизайне 10. Коллапсируемые Секции Контента (Accordion) ⏱Читать статью

Пятница. Аргументы против самозакрывающихся тегов в HTML #почитать Хотя мы, как индустрия, в целом отказались от большинства требований XHTML, это оформление самозакрывающегося тега, похоже, сохранилось, несмотря на то, что является пережитком спецификации, которая была отменена более 10 лет назад. Некоторые даже включают пробел до /, который был добавлен для совместимости с движком браузера еще в прошлом тысячелетии. ⏱Читать статью

«Всё — прямоугольник». Блочная модель #почитать Каждый элемент на веб-странице — это прямоугольник, к которому во время отрисовки браузеры применяют CSS-свойства. Чтобы конечные размеры элементов не были для вас сюрпризом и вы точно понимали, из чего они складываются, нужно разобраться с одной из основных концепций вёрстки — блочной моделью. ⏱Читать статью