Центрируем элемент с Flexbox

Читать

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

#frontend #css #flexbox

CSS :empty

Читать

Довольно часто возникает ситуация, когда для блока, содержащего дочерние элементы или текст, нужно определить одни стили, а в случае их отсутствия - другие. Сделать это довольно легко, если знать о существовании псевдокласса :empty.

#frontend #css

Клонируем папку

Читать

Иногда в найденном на github репозитарии нам нужна только одна папка. Как получить ее содержимое, не копируя весь проект? К счастью в git есть команда sparse-checkout. А теперь посмотрим, как это работает, на примере приведенном ниже.

#dev #git

Управление отладкой в браузере

Читать

Без лишних слов, всего одна строка кода в консоли отладки браузера:

setTimeout(() => { debugger; }, 3000);

Несколько лет назад Lucas придумал этот трюк и применил его для работы с одним из своих проектов. Теперь это рутинный прием, значительно облегчающий процесс тестирования и отладки верстки в браузере.

#dev #frontend #debug

Bootstrap: отступы

Читать

Следует знать, что для управления свойствами margin и padding различных элементов Bootstrap 4 имеет встроенные классы.

#bootstrap #css #html

JavaScript: переназначение для удаления элементов массива

Читать

Мы можем удалить все элементы и получить пустой массив следующим образом: items = [];

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

#frontend #js

JavaScript: группируем массив объектов

Читать

В этой небольшой статье мы разберем, как создать собственную функцию группировки объектов в массиве по одному свойству.

#frontend #js

Иконки для React

Читать

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

#frontend #js #react

JavaScript: trim()

Читать

Как удалить пробелы в начала или в конце строки? Для JavaScript такой проблемы не существует - все очень просто: чтобы избавиться от пробельных символов в начале строки есть функция trimStart(), в конце строки - trimEnd(), а для удаления пробелов как в начале, так и в конце строки - trim().

#frontend #js

JavaScript: как получить из boolean строку

Читать

Сегодня мы, используя различные подходы, напишем функцию booleanToString, которая будет иметь на входе единственный аргумент - булево значение b и возвращать строку: "true", если входящий аргумент - истина (true) или "false", если входящий аргумент - ложь (false).

#frontend #js

Повышаем производительность PHP: 4 приема

Читать

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

#backend #php

HTML: зачеркивание

Читать

CSS великолепно подходит для управления дизайном элементов сайта, но, к сожалению, непригоден для того, чтобы передавать их смысловое значение. К счастью, для этой цели есть другой инструмент - HTML-теги. Когда Вы зачеркиваете какой-то контент, нужно понимать причину - для чего Вы это делаете. Зачеркнутый текст приобретает семантическое значение, благодаря тегам <del> и <s>.

#frontend #html

Удаляем CSS

Читать

Иногда нужно посмотреть, как выглядит страница без каких-либо стилей.
Всем известен способ решения такой проблемы. Нужно открыть DevTools, перейти в панель Source и удалить содержимое CSS-файлов. В результате веб-страница изменится, потому что подключенные стили для ее локальной копии больше не существуют.
Однако, некоторые разработчики до сих пор используют тег style и определенное количество CSS-свойств все-таки будет влиять на внешний вид HTML-документа.

#frontend #css #js

JavaScript: ключевые и зарезервированные слова

Читать

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

#frontend #js

Гамбургер-меню

Читать

Сегодня мы создадим анимированную иконку для гамбургер-меню на чистом CSS и JavaScript без использования сторонних шаблонов и библиотек.

#frontend #css #js

PHP: водяные знаки

Читать

Каждый фотограф, как начинающий, так и опытный профессионал, хочет защитить результаты своей работы. Водяные знаки созданы именно для решения такой проблемы. В PHP есть возможность добавлять водяные знаки на изображения. Благодаря библиотеке GD, можно использовать True Type шрифт для нанесения текста поверх изображения.

#backend #php

Параллакс на чистом CSS

Читать

Для того, чтобы получить различные визуальные эффекты, вместо объемных JavaScript-библиотек во многих случаях без каких-либо проблем можно использовать CSS. Отличной иллюстрацией такого утверждения является реализация parallax-эффекта при прокручивании страницы на чистом CSS.

#frontend #css

CSS: dark mode

Читать

В настоящее время многие приложения имеют dark mode. Наверняка, у Вашего консольного приложения, IDE, браузера уже есть темная тема. Чем хуже созданный Вами веб-сайт? Тем-более, сайт можно переключить в соответствующий режим при включенной темной теме браузера. И сделать это гораздо проще, чем Вы думаете.

#frontend #css

Профилактика угроз в .htaccess

Читать

Корректные настройки файла .htaccess позволяют значительно снизить вероятность взлома Вашего веб-сервиса недоброжелателями.

#dev #apache #php

Замедляем цикл

Читать

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

#frontend #js

Адаптивное видео с youtube

Читать

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

#frontend #css