Author: Андрей

17
Янв
2020

Почему HSL цвета CSS лучше!

От автора: одним из наиболее фундаментальных понятий в CSS являются цвета HSL. Это базовая концепция, но в этой статье мы сосредоточимся на ее представлении при указании браузерам. В Интернете каждый цвет представляет собой комбинацию из 3 цветов: красный, зеленый и синий. Как каждый пиксель на экране состоит из трех лампочек: зеленой, синей и красной. Наиболее […]

16
Янв
2020

Цитирование в HTML

От автора: слишком часто можно увидеть неправильный HTML-код, используемый для цитат в разметке. В этой статье давайте разберемся со всем этим, рассмотрим различные ситуации и разные HTML-теги для этих ситуаций. В цитатах используются три основных элемента HTML: <blockquote>, <q>, <cite>. Давайте рассмотрим их по порядку. blockquote Теги blockquote используются для того, чтобы цитируемый текст отличался […]

15
Янв
2020

Как включить React в тему WordPress

От автора: начиная с WordPress 5.0, React (или его абстракция) теперь поставляется с WordPress. WordPress берет все библиотеки React и ReactDOM и экспортирует их в объект глобального окна с именем wp.element. Это немного отличается от того, как работает большинство приложений React. В обычном приложении React мы импортируем React, в WordPress — нет. Обычно с приложением […]

09
Янв
2020

Тонкое искусство прогностической предварительной выборки

От автора: когда вы заказываете гамбургер с картофелем фри в любом ресторане в Америке, официант часто подносит бутылку кетчупа к столу еще до того, как гамбургер будет готов. Хотя вы, возможно, и не просили явно кетчуп, официант предполагает, что вы попросите об этом, так как большинство американцев едят гамбургеры с кетчупом. Но что, если оптимизация […]

27
Дек
2019

Продвинутая фильтрация в фреймворке Laravel

От автора: фильтрация элементов повсеместно используется в веб-приложениях, потому как она значительно упрощает процесс поиска необходимой информации. К примеру, в интернет-магазинах на страницах вывода списка товаров, как правило, в правом или левом сайдбаре отображается группа фильтров, которые используются посетителями для фильтрации выбранной из базы данных информации по определенным параметрам. В уроке будет рассмотрен один из […]

26
Дек
2019

Учимся создавать макет Masonry-галереи, используя чистый CSS

От автора: сегодня я собираюсь показать вам, как вы можете построить сложную Masonry-сетку, используя CSS Grid. CSS Grid изменил способ разработки наших макетов, и мы собираемся создать интересный проект, используя его возможности. Вот как будет выглядеть наш макет в конце статьи: Выглядит интересно? Если это так, продолжайте. Именно здесь CSS Grid действительно проявляет свою силу, […]

26
Дек
2019

Прекрасный опыт прокрутки — без библиотек

От автора: одной из областей, где Интернет традиционно отстает от нативных платформ, является воспринимаемая «привлекательность» приложения. Частично это восприятие происходит от того, как пользовательский интерфейс реагирует на взаимодействие с пользователем, включая прокрутку содержимого. Столкнувшись с ограничениями веб-платформы, разработчики часто обращаются к библиотекам и фреймворкам JavaScript, чтобы изменить процесс прокрутки веб-страницы — иногда называемый “scroll-jacking” — […]

25
Дек
2019

Соображения в основе макета Flexbox

От автора: мне просто нужно разместить два блока рядом, и я слышу, что flexbox хорош в таких вещах.   Просто добавление display: flex; к родительскому элементу укладывает его потомком в ряд Ну, это круто. Полагаю, я мог использовать float, но это проще. Они, вероятно, должны занять все доступное пространство. Могу ли я просто растянуть родителя […]

25
Дек
2019

Как реализовать перекрытие изображений в CSS

От автора: очень популярная в веб-дизайне в настоящее время вещь — это перекрывающиеся изображения. Когда вам, как разработчику, передается проект, есть несколько способов реализовать это — как и почти всегда в CSS. Один из способов, который вы могли бы использовать — это абсолютно позиционировать один элемент с более низким z-индексом, чтобы другое изображение располагалось сверху, […]

24
Дек
2019

Описательные имена классов CSS

От автора: иногда я сталкиваюсь с ситуациями, когда мне нужны дополнительные имена классов CSS для манипулирования стилями. Когда это происходит, я делю эти ситуации на стандартные типы и присваиваю каждому типу префикс имени класса, который представляет этот тип. Классы состояний Любой компонент может иногда нуждаться в состоянии — определенном условии, в котором к нему применяется […]

24
Дек
2019

Упрощенная гибкая типографика

От автора: гибкая типографика — это идея, что font-size (и, возможно, другие атрибуты шрифта, например line-height) меняются в зависимости от размера экрана (или, возможно, запросов контейнера, если они у нас были). Основная хитрость заключается в единицах на основе окна просмотра. Вы можете буквально задать шрифт в единицах на основе окна просмотра (например font-size: 4vw), но […]

20
Дек
2019

15 советов по производительности приложений React.js

От автора: создание приложений иногда может быть немного сложным, особенно когда нам нужно создать быстрое и качественное приложение. Поисковые системы могут давать бонусные SEO-баллы за большую скорость приложения, и это может помочь нам очень сильно снизить показатель отказов. В этом посте я привел несколько советов и подсказок, которые вы можете использовать, чтобы сделать ваше приложение […]

19
Дек
2019

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

От автора: привет, читатели. Сегодня я хотела бы поделиться своим последним кейсом пользовательского интерфейса для стилей состояния в компоненте карточки. Предоставление различных стилей для разных состояний, таких как наведение курсора, выделение фокусом и активное, является критически важным, поскольку оно обеспечивает видимую обратную связь с взаимодействием пользователя и улучшает общее взаимодействие на сайте. В этом примере […]

17
Дек
2019

Разница между разрешением CSS и разрешением устройства

От автора: во время работы я видел, как многие веб-разработчики изо всех сил пытались понять, как в веб-браузерах обрабатывать пиксельные единицы в мире экранов высокой плотности. В наши дни экраны высокой плотности и retina экраны есть на всех мобильных устройствах. Это в дополнение ко многим размерам экрана, с которыми мы имеем дело: мобильные телефоны, планшеты, […]

16
Дек
2019

Методы создания газетного макета с помощью CSS-сетки и границ между элементами

От автора: недавно мне пришлось создать дизайн, похожий на газету, в котором было несколько интервалов строк и столбцов с разделительными линиями между ними. Посмотрите на рисунок макета и подумайте, придется ли вам попотеть, чтобы создать подобное. Если вы похожи на меня, вы уже давно и знаете, насколько сложно это было бы с использованием старых методов […]

13
Дек
2019

Создание сложных макетов с использованием CSS Grid

От автора: это руководство предназначено для людей, которые слышали о css-grid и хотят узнать, что она может, или, возможно, не уверены, как ввести ее в свой рабочий процесс. Также статья будет вам интересна, если вы оттачиваете навыки верстки, не прибегая к фреймворкам, таким как Bootstrap. Базовые знания о css — это хорошо, но вы должны […]

10
Дек
2019

Многостолбцовый макет и column-span в Firefox 71

От автора: Firefox 71 — увлекательный релиз для тех, кто интересуется CSS Layout. Хотя я очень рада, что в Firefox стала доступна подсетка, есть еще одно свойство, за которым я следила. В Firefox 71 реализовано column-span из многостолбцовой компоновки. В этом посте я объясню, что это такое, и немного о продвижении спецификации Multiple-column Layout. Многостолбцовый […]

10
Дек
2019

Полноэкранное меню на CSS с эффектом анимации

От автора: в данном уроке вы найдете реализацию интересного варианта меню, которое изначально скрыто, а при клике по кнопке, открывающей меню, оно появляется с красивым анимационным эффектом и показывается на весь экран. Данное меню идеально подойдет …

09
Дек
2019

Используйте модули для создания модульного приложения JavaScript

От автора: одна из главных особенностей ES6 — поддержка JavaScript встроенных модулей. Модули позволяют совместно использовать код различными файлами, используя синтаксис export и import. Это значительное улучшение по сравнению с использованием тегов script и глобальных переменных для совместного использования кода. Использование тегов script было сопряжено с ошибкам, так как порядок загрузки имеет значение. Указание script […]

05
Дек
2019

Некоторые стратегии CSS Grid для создания согласованных макетов дизайна

От автора: в мире веб-разработки всегда наблюдался разрыв при переходоме от дизайна к разработке. Амбициозные дизайнеры хотят, чтобы конечный результат их усилий выглядел уникальным и красивым (и соответствовал их первоначальному видению), тогда как многие разработчики находят большую ценность в результате, который является последовательным, надежным и стабильным (и легко кодируемым). Эта динамика может привести к напряженности […]

05
Дек
2019

Свойство clip-path и интересный эффект для сайта

От автора: в предлагаемом уроке будет показан интересный эффект, который может подойти для шапки сайта или какой-то из его секций. Суть эффекта заключается в размещении нескольких изображений в секции и показе только части каждого из изображений. Другая часть при этом скрывается при помощи свойства clip-path. При наведении мыши на часть изображения – будет показана полная […]

03
Дек
2019

Как TypeScript помогает вам стать лучшим разработчиком JavaScript

От автора: что общего у Airbnb, Google, Lyft и Asana? Все они перенесли несколько кодовых баз в TypeScript. Наши люди любят самосовершенствование, будь то здоровое питание, физические упражнения или крепкий сон. То же самое относится и к нашей карьере. Если кто-то делится советами о том, как стать лучшим программистом, вы будете слушать внимательно. Цель этой […]

29
Ноя
2019

Что такое super() в JavaScript?

От автора: что происходит, когда вы видите некоторый JavaScript, который вызывает super()? В дочернем классе вы используете super() для вызова конструктора его родителя и super.&ltmethodName> для доступа к методам его родителя. Эта статья предполагает хотя бы небольшое знакомство с понятиями конструкторов и дочерних и родительских классов. Super не уникален для Javascript — многие языки программирования, […]

28
Ноя
2019

Готовящиеся к выпуску новые функции JavaScript

От автора: после релиза ECMAScript2015 (также называемого ES6) JavaScript изменился и улучшился. Это отличная новость для всех разработчиков JavaScript. Кроме того, новая версия ECMAScript выпускается каждый год. Скорее всего, вы не заметили, какие функции были добавлены в последнюю версию ECMAScript, выпущенную в июне 2019 года. Я кратко расскажу вам о новых функциях, добавленных в последней […]

28
Ноя
2019

Необычные случаи использования псевдо-элементов

От автора: псевдо-элементы используются уже в течение длительного времени. Тем не менее, есть некоторые случаи использования, которые, как мне кажется, не полностью известны разработчикам. Я написал эту статью, чтобы пролить свет на них, и чтобы их можно было использовать больше. Эффект «наведение родитель-потомок» Поскольку псевдо-элемент принадлежит своему родительскому элементу, для этого есть несколько необычных вариантов […]

28
Ноя
2019

Ссылки в PHP

От автора: в этом уроке будет рассмотрен такой вопрос, как ссылки в PHP. Данная тема вызывает определенные трудности у начинающих изучать PHP. Однако, на самом деле ничего сложного здесь нет. Просто думайте о ссылках в PHP, как о ярлыках на программу в Windows. По сути ссылка – это указатель на область в памяти, в которой […]

27
Ноя
2019

Медиа-запросы CSS — это не только max-width

От автора: недавно мы запустили новый веб-сайт нашей компании Mabiloft, с полностью переработанным чистым макетом и множеством новых великолепных иллюстраций и анимации. В то время как наш дизайнер проделал потрясающую работу, придумав и нарисовав сайт, сложной задачей для нас, разработчиков, было сделать так, чтобы макет оставался чистым и функциональным для каждого устройства, от большого 2К-экрана, […]

26
Ноя
2019

8 CSS-фильтров изображений с примерами кода

От автора: используя изображения, мы можем создать атмосферу, вызвать счастье, улыбку, грусть или любую другую эмоцию. С помощью изображений мы можем многое показать, а также многое рассказать; именно поэтому изображения так широко используются на сайтах и в приложениях. Дизайнеры заботятся о том, как пользователи будут воспринимать сайт и какие эмоции он будет вызывать. Графические дизайнеры […]

25
Ноя
2019

Библиотека PHP для генерации капчи

От автора: в наше время повсеместного спама достаточно важной задачей для любого сайта является защита форм от автоматического заполнения, т.е. защита от спама. Для этих целей придумано множество вариантов капчи, но классическим вариантом, по-прежнему, остается вариант со строкой на картинке, которую необходимо разобрать и ввести в проверочное поле формы. В этом уроке будет показана работа […]

22
Ноя
2019

Аутентификация полного стека: файлы cookie и локальное хранилище

От автора: когда вы авторизуетесь в приложении, вы ожидаете, что в следующий раз, когда вы откроете новую вкладку или окно в браузере, вы все равно останетесь авторизованным. Это означает, что в некотором роде или форме, клиент (браузер) должен поддерживать ссылку на вас, чтобы вы оставались авторизованным. Где я могу сохранить в клиенте состояние? Работа с […]