У вас включен AdBlock или иной блокировщик рекламы.

Пожалуйста, отключите его, доход от рекламы помогает развитию сайта и появлению новых статей.

Спасибо за понимание.

В другой раз
DevGang блог о програмировании
Авторизоваться

IF ELSE в Django шаблонах

Скрытие элементов в вебе 

Благодаря нашей работе веб-разработчиков нам нужно скрывать элементы по многим причинам. Например, кнопка, которая должна быть видна в мобильном окне просмотра и скрыта в окне просмотра в декстопе. Или элемент навигации, который скрыт на мобильном устройстве и отображается в десктопе. При скрытии элемента существует три разных состояния:

Введение в HTML элемент dialog

Диалоги часто используются в веб-приложениях. Они используются для отображения подтверждающих сообщений, оповещений и других вещей, которые подходят для всплывающих окон.

Ленивая загрузка изображений

Ленивая загрузка изображений - это практика, которая популярна в течение десятилетия, и на то есть веская причина: изображения, как правило, загружаются чаще всего на всей веб-странице, а избегание выгрузки изображений, которые никогда не были видны, экономит трафик пользователя. Есть плагины для отложенной загрузки изображений в каждой среде JavaScript, или вы можете использовать Intersection Observer API , но это стало настолько распространенной практикой, что, вероятно, должен быть браузерный API, чтобы приспособиться к нему... и Chrome реализует именно это. Давайте посмотрим, как будет работать нативный API для отложенной загрузки!

CSS: выделение контента в блоке по одному клику

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

Используете меню-гамбургер? Попробуйте ссылки-сосиски!

При разработке навигации по средним и большим размерам в мобильном Интернете в течение некоторого времени по умолчанию использовались меню гамбургер. Это не обязательно плохо, но для некоторых вариантов использования существует более простая альтернатива.

Работа с Intl

Интернационализация – это та вещь, о которой мы постоянно слышим в разговорах разработчиков, но очень редко встречаем ее реальное, практическое применение, и это та самая вещь которая получает хороший пинок с выходом нового ECMAScript Internationalization API. В настоящее время все это поддерживается Chrome 24, Chrome для Android, Firefox 29, IE 11 и Opera 15, правда, к сожалению, поддержки от Safari нет. В итоге, мы получаем новое пространство имен Intl с предоставлением широкого выбора функциональных возможностей для включения интернационализации в наши числа, даты и сортировки. Стоит разобраться в основных чертах Intl и стать на путь, где всегда есть поддержка от миллионов людей из множества других стран.

Создание сетки с помощью CSS Grid 

В недавнем проекте я наткнулся на изящный способ создания макета сетки, используя CSS Grid и немного javascript. Сначала я думал об использовании чего-то вроде Masonry.js или Isotope, но это было немного излишне. Что хорошего в этом подходе, он очень гибкий и не опирается ни на какие фреймворки! Я постараюсь сделать этот пост коротким и приятным, чтобы вы могли сами приступить к работе и насладиться этим трюком.

CSS Grid против Flexbox

Не так давно макет для всех HTML-страниц создавался с помощью таблиц, float элементов и других CSS-свойств, которые плохо подходили для стилизации сложных веб-страниц.

Затем появился flexbox - режим макета, который был специально разработан для создания надежных адаптивных страниц. Flexbox облегчает правильное выравнивание элементов и их содержимого, и в настоящее время является предпочтительной системой CSS для большинства веб-разработчиков.

Адаптивные изображения для Retina дисплеев на HTML5

Так как рост популярности Retina и других дисплеев высокой четкости возрастает, веб-разработчикам сейчас как никогда важно использовать изображения высокой четкости. Для достижения этого существуют разные способы, некоторые из которых я описал в статье. Мы рассмотрим следующие способы:

Присоеденяйся в тусовку

Поделитесь своим опытом, расскажите о новом инструменте, библиотеке или фреймворке. Для этого не обязательно становится постоянным автором.

Попробовать