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

Округление в CSS с функцией round() #почитать Функция round() появилась в CSS как часть стандарта Values and Units Level 4. Она предназначена для округления числовых значений до нужной кратности. Это полезный инструмент, который позволяет контролировать размеры и позиции без лишних ухищрений с calc() или JavaScript. ⏱Читать статью

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

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

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

CSS font-palette: управление цветами шрифтов #почитать Свойство font-palette позволяет выбрать одну из цветовых палитр, встроенных в цветной шрифт, или создать свою. При использовании — оно задаёт преобладающую окраску глифов, и свойство color уже не влияет. В свою очередь, цветной шрифт — это шрифт, в котором глифы содержат встроенную информацию о цвете. В отличие от обычных векторных шрифтов (TrueType, OpenType), где цвет задаётся снаружи с помощью CSS-свойства color, в цветном шрифте сами глифы уже закодированы с цветными деталями — например, несколько заливок, градиенты, обводки, изображения. ⏱Читать статью

🪐 Новые вакансии фронтендеров 🚀 Lead Frontend Developer (с функциями системного аналитика) в Senior Soft, до 290 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/lead-frontend-developer-s-funkciyami-sistemnogo-analitika-senior-soft-3dc5daf0 🚀 Frontend-разработчик в Human Help, до 80 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/frontend-razrabotchik-human-help-b324db4a 🚀 React Frontend Developer в Ziphy, до 390 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/react-frontend-developer-ziphy-6e7ee0e9 🚀 Angular-разработчик в ИП, 285 000 - 335 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/angular-razrabotchik-nda-cc42d977 🚀 HTML-верстальщик в NDA (веб), 50 000 - 60 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/html-verstalshik-nda-veb-228edc88 🚀 Fullstack-разработчик в DataNest, 200 000 - 280 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/fullstack-razrabotchik-datanest-7c4cf183 🚀 Разработчик (PHP/Symfony/Angular/Node.js) в Core12, 150 000 - 250 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/razrabotchik-phpsymfonyangularnodejs-core12-e074ee3d 🚀 Дизайнер интерфейсов в Vondo, до 120 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/dizajner-interfejsov-vondo-04cca7d0 🚀 Fullstack PHP JS в IT-компания (Сколково), 250 000 - 300 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/fullstack-php-js-it-kompaniya-7830d561 🚀 Frontend Developer в Infomediji, 380 000 - 570 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/frontend-developer-infomediji-9d262255 🚀 UI Lead Designer в NDA (продуктовый стартап на Кипре), oт 380 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/ui-lead-designer-nda-produktovyj-startap-na-kipre-79327b83 🚀 Frontend-разработчик в HR-tech проект, 300 000 - 400 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/frontend-razrabotchik-hr-tech-proekt-867f27bb 🚀 React-разработчик (контракт), oт 80 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/react-razrabotchik-proekt-0b417d4e 🚀 AI-Native Fullstack Developer (React Native) в Unimatch Lab, oт 300 000 ₽ Подробнее ➡️ https://jobrocket.ru/job/ai-native-fullstack-developer-react-native-unimatch-lab-faa3acf2 Больше вакансий frontend здесь ⤵️ https://jobrocket.ru/?categories=frontend

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

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

Эти CSS-техники устарели #почитать

Общаясь с коллегами, я заметил, что они незнакомы с последними возможностями CSS. Как обычно, у всех свои причины. У кого-то много повседневной рутины. Кому-то в принципе неинтересно, что нового происходит в CSS. А кто-то по привычке использует подходы десятилетней давности и ему норм. Как фанату CSS, мне грустно. Сколько же прикольных вещей проходит мимо них. Да и их код может быть меньше, надёжнее и проще для понимания. В общем, я собрал несколько фрагментов кода, которые были популярны давным-давно, и переписал их с помощью новых возможностей CSS.

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

Полное руководство по типу Number и объекту Math #почитать Числа — это основа многих программ, будь то расчёты в играх, обработка данных в формах или генерация случайных событий. В JavaScript числа представлены типом Number, который охватывает как целые, так и дробные значения. А для сложных математических операций есть встроенный объект Math, который предоставляет множество полезных методов. Если вы новичок в веб-разработке, понимание чисел и их возможностей в JavaScript — это ключ к созданию динамичных и функциональных приложений. В этой статье мы подробно разберём тип Number, объект Math, специальные значения вроде Infinity и NaN, а также покажем, как использовать их в реальных проектах. ⏱Читать статью

Новый способ стилизации отступов в CSS #почитать Стилизация отступов в таких компонентах пользовательского интерфейса, как календари, карточки или сетки данных, может значительно улучшить читаемость и придать общий эстетический вид. Однако достижение этого эффекта в макетах с grid и flexbox традиционно требует неудобных обходных путей с использованием бордеров, псевдоэлементов или фоновых трюков. Такие обходные пути могут быть проблематичными по ряду причин. ⏱Читать статью

Как переносить «висячие» слова на следующую строку с помощью JavaScript #почитать В типографике существует понятие “висячих слов” — это короткие слова (предлоги, союзы, местоимения), которые остаются в конце строки при переносе текста. Такие переносы нарушают удобочитаемость и эстетику текста. В русской типографике принято избегать переносов после коротких слов длиной 1-2 символа. ⏱Читать статью

Меню для отзывчивого интерфейса без скриптов #почитать Простое и понятное меню навигации — важнейшая часть удобного интерфейса. Отзывчивость меню тоже критична, ведь сейчас более половины всего интернет-трафика приходится на мобильные устройства. В подходе mobile-first разработка начинается с самого маленького экрана — мобильного, и по мере увеличения ширины добавляются новые стили и элементы. В итоге страница автоматически подстраивается под размер окна браузера. Хотя адаптивное меню — ключевой элемент хорошего UX, для его реализации не обязательно использовать JavaScript. В этом руководстве мы покажем, как сделать отзывчивое mobile-first меню только с помощью HTML и CSS. ⏱Читать статью

Форматирование текста в JavaScript: методы bold(), italics() и другие #почитать

Исторический контекст: откуда взялись эти методы? Методы вроде bold() и italics() появились в JavaScript на заре веба, в середине 90-х, когда браузеры вроде Netscape Navigator доминировали в интернете. Тогда веб был больше про документы, чем про интерактивные приложения. Эти методы были частью раннего API строк в JavaScript, чтобы разработчики могли быстро форматировать текст для отображения в HTML-документах. Например, bold() оборачивает строку в тег <b>, а italics() — в <i>. Это было удобно для простых задач, когда CSS ещё не стал стандартом стилизации, а HTML использовался для оформления текста. Однако с развитием веба и приходом CSS такие методы начали терять популярность. Почему? Потому что CSS позволяет гибко управлять стилями, а методы вроде bold() привязаны к конкретным HTML-тегам, что делает их менее универсальными. Тем не менее, они всё ещё поддерживаются в современных браузерах и могут быть полезны для новичков или в специфических сценариях.

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

Три подхода к селектору & (амперсанд) в CSS #почитать & — мощное дополнение к CSS, позволяющее создавать селекторы без повторений и способствующее улучшению организованности и понимания кода. ⏱Читать статью

Что если использовать контейнерные единицы измерения для... всего? #почитать Как-то подумалось, а что, если использовать контейнерные единицы измерения для каждого элемента в дизайне? Наверное, тогда, всё будет хорошо масштабироваться. Контейнерные единицы измерения, если вы о них не слышали, это такие же единицы измерения (вроде, px или rem, но более тесно связанные с единицами измерения области просмотра, например, vw или vi), размер которых зависит от контейнера, в котором они находятся. Оказалось, сюрприз-сюрприз, все не так просто. Есть множество вещей, с которыми контейнерные запросы работают плохо, или для которых они просто не подходят. В качестве эксперимента мы взяли довольно простой макет из сетки с карточками разного размера. Не считайте этот демонстрационный пример хорошим, это просто то, что первым пришло в голову. ⏱Читать статью

Библиотеки JavaScript для всплывающих окон: обзор лучших решений #почитать Всплывающие окна (popups, модальные окна) — важный инструмент в веб-разработке. Они помогают отображать уведомления, формы, изображения и другие элементы без перезагрузки страницы. JavaScript-библиотеки делают этот процесс удобным и гибким. Давайте рассмотрим популярные решения и их особенности. ⏱Читать статью

так и есть

ZX Spectrum вам о чём-нибудь говорит? Кажется, кто понял и первое название, и отсылку к мему, тому точно зайдёт новый проект от команды AvitoTech! В честь наступающего Дня разработчика ребята собрали истории о первых гаджетах и начале пути в IT своих сотрудников. Получился ну очень залипательный лонгрид с теми самыми играми, приставками, компьютерами и телефонами из нашего детства. Кстати, поздравить коллег и поделиться своей историей и фото со своим первым гаджетом можно в канале AvitoTech под последним постом! Соберем большой поздравительный тред вместе!

10 свойств в CSS о которых вы, вероятно, не знали #почитать Если вы только начинаете разбираться в CSS, скорее всего, вам кажется, что мир стилей ограничивается свойствами вроде <font-size>. Но CSS — это не просто про то, чтобы задать цвет кнопке и отступ между блоками. За простыми примерами скрывается целый мир возможностей, о которых многие не догадываются. В этой статье рассказываем о десяти свойствах, которые встречаются редко, но способны заметно упростить вам жизнь или добавить в проект изюминку. ⏱Читать статью