​​​Когда удаляешь 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

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

​Больше codepen-проектов вам в ленту: на этот раз делимся 3D-инсталяцией на основе HTML, CSS и ThreeJS

Конечно, сходу сложно представить, где можно использовать именно ее. Но можно почерпнуть что-то полезное из исходников: https://codepen.io/ricardoolivaalonso/pen/NWeodeN

#codepen

​Old but gold: Как повысить производительность бэкенд-приложений

Со временем бэкенд может разрастаться до гигантских масштабов. Неправильная стратегия при проектировании бэкенд-системы может сыграть с вами злую шутку и сделать систему не производительной. Как этого избежать и выжимать из бэкенда максимум, узнаете тут:

Многие вещи из статьи по-прежнему актуальны. Особенно, если знаете, как получить доступ к «ньюрелик» и «датадог»: https://nuancesprog.ru/p/16485/

#бэкенд

​​Cyber Swiss Army Knife: швейцарский нож для данных

Иногда мы делимся годными инструментами для разработчиков: по мере того, как находим их сами. Сегодня именно такой день. Оригинальное название хорошо передает предназначение инструмента — Cyber Swiss Army Knife.

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

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

Исходники доступны на гитхабе: https://gchq.github.io/CyberChef/

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