Удаляем 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

JavaScript: тип пользовательского устройства

Читать

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

#frontend #js

SVG favicon

Читать

В настоящее время просто необходимо использовать svg для favicon. Этот формат поддерживается всеми современными браузерами.

#frontend #html

PHP: извлекаем данные из PDF

Читать

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

#backend #php

Тренды веб-дизайна

Читать

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

#dev #design #frontend

CSS: как красиво выделить текст

Читать

Различные сайты используют различные инструменты для того, чтобы сделать акцент на определенном тексте. Таким образом, можно обратить внимание пользователя на различные предупреждения или важную информацию (например, в случае, когда нужно указать на скидку, акцию или выгодную цену в интернет-магазине). Вы будете удивлены, узнав, как просто это сделать.

#frontend #css

CSS: отключаем возможность выбрать текст

Читать

По-умолчанию, любой пользователь, просматривающий страницы различных сайтов, может выбрать текст с помощью клавиатуры или мыши.
Сегодня мы попробуем отключить эту возможность. Таким образом, веб-страница станет менее похожей на документ и приобретет особенности приложения.
Все, что нам потребуется - CSS-свойство user-select: none.

#frontend #css

Label в роли плейсхолдера и автозаполнение

Читать

Многим веб-разработчикам известен CSS-прием, при котором для выбранного поля ввода происходит смещение плейсхолдера.

#frontend #css

Лживый оператор ===

Читать

Это забавно и, возможно, удивительно, но существует ряд случаев, в которых оператор идентичности === возвращает совсем не то значение, которое все ожидают.

#frontend #js

Что делать с ошибкой "is not a function"

Читать

Многие разработчики не используют точку с запятой при написании кода, видимо, потому, что так удобно. Возможно, такой код легче читается. С другой стороны, не меньшее количество программистов придерживается синтаксиса с замыкающей точкой с запятой. Такая позиция тоже понятна и имеет право на существование.
В конце концов, каждый веб-разработчик выбирает свой уникальный путь.
Тем не менее, синтаксис без точек с запятой требует от программиста дополнительного внимания, особенно в Node,js, где функция require() применяется для подключения внешних модулей и файлов.
В некоторых случаях можно столкнуться с такой ошибкой require(...) is not a function

#frontend #js

CSS: 5 полезных свойств

Читать

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

#frontend #css

Как добавить контент

Читать

В этой небольшой статье мы поговорим о очень полезном JavaScript-методе, который можно применить к любому элементу для того, чтобы добавить новый HTML-контент. Это insertAdjacentHTML - стандартный метод интерфейса Element, который анализирует HTML-документ и вставляет полученные узлы в нужную позицию.

#frontend #js

Плавающий label

Читать

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

#frontend #css #html