Во время зомби-апокалипсиса в живых останутся только плохие разработчики

​10 ошибок в CSS

Следуйте 10 практическим рекомендациям опытного разработчика, чтобы улучшить читаемость, поддержку и совместимость вашего CSS-кода с различными браузерами.

Из этой статьи вы узнаете, как использовать сокращённые записи свойств, создавать адаптивный дизайн, избегать повторения кода и сложных селекторов.

#css #html #вёрстка

Если хотите быть в тренде и получать лучшее из мира IT, у Tproger есть 4 канала, которые вам в этом помогут:

— всё о нейросетях и ИИ: @neurochannel

— полезные сохранёнки на все случаи жизни: @prog_stuff

— нужные инструменты для ваших проектов: @prog_tools

— новости из мира технологий: @your_tech

Кстати, там сейчас ещё и розыгрыш подписок Telegram Premium проходит, так что заходите, смотрите условия и подписывайтесь.

​​​Когда удаляешь 1000+ строчек своего кода, потому что нашёл фреймворк, которые делает всё то же самое, но лучше:

Новая единица измерения области просмотра

Мобильные браузеры имеют разные пользовательские интерфейсы для верхней и нижней панелей и меняют высоту области просмотра при прокрутке, что приводит к проблемам со свойством height: 100vh на телефонах.

Но теперь у нас есть модуль dvh, динамически адаптирующийся к текущей высоте окна просмотра.

#css #height #адаптив

​Parallax с помощью CSS

Техника параллакс-скроллинга создаёт эффект трёхмерности, что придаёт веб-странице большую глубину. Однако здесь есть свои нюансы, о которых мы и поговорим.

Из этой статьи вы узнаете, в каких ситуациях оправдано использование параллакс-скроллинга, разберётесь, как реализовать его с помощью CSS, и почему для этого стоит использовать именно CSS, а не JavaScript.

#css #html #вёрстка

Подборка актуальных вакансий

— Senior BackEnd Java Developer
Где: удалённо
Опыт: от 5 лет

— Разработчик Elixir
Где: удалённо
Опыт: от 3 лет

— Senior/Middle FrontEnd (React) Developer
Где: удалённо
Опыт: от 3 лет

— Backend разработчик NodeJS
Где: удалённо
Опыт: от 2 лет

— Senior/Lead Product Design / Продуктовый Дизайнер
Где: удалённо
Опыт: от 5 лет

— Automation QA Engineer Java
Где: удалённо
Опыт: от 3 лет

— QA Automation Engineer (JS, Cypress)
Где: удалённо
Опыт: не указан

— QA Engineer Manual
Где: удалённо
Опыт: не указан

— BackEnd разработчик NodeJS
Где: удалённо
Опыт: от 3 лет

— ИТ-архитектор
Где: удалённо
Опыт: от 3 лет

#вакансии #работа

ПО как колбаса — лучше не знать, что внутри

​Переменные CSS

Эта статья расскажет вам все, что нужно знать о переменных CSS: от базовых понятий до продвинутых приёмов.

Вы узнаете, как создавать, именовать и ограничивать область их видимости. Освоите техники управления цветами, размерами, анимациями и динамическими сетками.

#css #variables #вёрстка

Дальше вся информация будет только в книжках и документации

​Как прервать «ленивую загрузку»

На многих сайтах есть проблема: ключевые изображения на странице подгружаются по принципу «ленивой загрузки». Это отрицательно сказывается на пользовательском опыте, основных веб-метриках и, как следствие, на поисковой оптимизации.

Лучше отказаться от ленивой загрузки, чем реализовать её некорректно. Как правильно организовать этот процесс, вы узнаете из этой статьи: https://cloudfour.com/thinks/stop-lazy-loading-product-and-hero-images/

#css #оптимизаци #html

Срочно удалить пет-проекты, срочно удалить пет-проекты, срочно удалить пет-проекты...

Библиотека Javascript анимации

Theatre.js — это профессиональный набор инструментов для моушн-дизайна. Он поможет вам создать любую анимацию: от кинематографических сцен до восхитительных взаимодействий с пользовательским интерфейсом.

#инструменты #js #css

Какой синтаксис, такой и учебник

​15 трендов CSS в 2023 году

Из этой статьи вы узнаете о таких возможностях, как CSS Grid, контейнерные запросы, прокрутка и переменные. Освоите новые цветовые палитры, каскадные слои и свойство content visibility для оптимизации скорости загрузки.

#css #html

Прослезился

​Сокровища HTML: 7 тегов, которые упростят вам жизнь

В статье рассказали про 7 HTML-тегов: <sub>, <kbd>, <samp>, <bdo>, <abbr>, optgroup>, <datalist>. Возможно, вы еще не открыли их для себя, а зря! В статье разбирают, чем они полезны, как работают и насколько поддерживаются современными браузерами:

https://habr.com/ru/articles/774112/

#html

​Реально ли создать 3D-шутер на React + Three.js?

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

Автор серии статей делает шутер и рассказывает о процессе в формате пошагового гайда. Код проекта и ссылки на статьи на английском: https://github.com/JI0PATA/fps-game

Перевод одной из частей на русском: https://habr.com/ru/articles/774090/

#threejs #react #gamedev

​​​«Мы сможем победить <div>, только если будем работать сообща»

​Как сделать сайт в стиле терминала за считанные минуты

Забавный, настраиваемый и простой в использовании шаблон в стиле терминала, созданный на базе Next.js.
Для изменения контента сайта нужно работать только с одним файлом config.json. А ещё LiveTerm также можно использовать с Docker.

Сохраните, чтобы не потерять: https://github.com/Cveinnt/LiveTerm

#nextjs

​Атомарный веб-дизайн: принципы работы и разница с UI-китом

Атомарный дизайн (Atomic Design) — новый подход к дизайну интерфейсов, который позволяет дизайнерам и разработчикам структурировать и организовывать элементы дизайна на базовом уровне. Он помогает создавать гибкие, масштабируемые интерфейсы, доступные для всех пользователей независимо от их устройств или предпочтений.

У атомарного дизайна 4 основы:
— Фокус на задачах. Важно определить, какие задачи стоят перед продуктом и как он будет использоваться.
— Простота и ясность. Каждый элемент дизайна должен быть понятным, легко заменяемым и функциональным.
— Гибкость и адаптивность. Продукт может адаптироваться к различным условиям использования и потребностям пользователей.
— Эффективность и производительность. Продукт работает быстро и эффективно, используя минимальное количество ресурсов.

Подробнее в статье: https://tproger.ru/articles/atomarnyj-veb-dizajn-principy-raboty-i-raznica-s-ui-kitom

#дизайн #вёрстка