ES2019 (ES10) новые функции

Читать

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

#frontend #js

Слушайте свои страницы

Читать

Замечательная идея Тома Хикса (Tom Hicks) объединяет MutationObserver, который предоставляет возможность получать информацию об изменениях элементов (например, при изменении атрибутов элементов, их текста или дочерних блоков), и Web Audio API для создания звуков.

#frontend #js

JavaScript: объединяем массивы

Читать

Итак, у нас есть два массива. Как их объединить с помощью JavaScript.

#frontend #js

PHP: деструктор

Читать

PHP использует концепцию методов конструкторов и деструкторов, свойственную другим объектно-ориентированным языкам, например, С++. Так, при создании объекта вызывается конструктор __construct(), а при удалении объекта из памяти вызывается деструктор __destruct(). Понимание этих процессов позволяет создавать более гибкий API. Но сегодня мы поговорим о том, когда именно в PHP происходит вызов метода __destruct().

#backend #php

Прыгающие ссылки

Читать

Итак, проблема - на html-странице еcть ссылка на якорь, подобная этой: <a href="#header-3">Перейти</a>, при нажатии на которую происходит переход к такому блоку <h3 id="header-3">Заголовок</h3>. На первый взгляд, все работает превосходно, но не в случае, когда к шапке сайта применили CSS-свойство position: fixed; - header просто не позволит увидеть блок, к которому Вы перешли.

#frontend #css

JavaScript: console, варианты использования

Читать

Объект console нужен для доступа к средствам отладки браузера. Методы этого объекта позволяют выводить строки, массивы, объекты, существенно облегчая процесс отладки кода. В свою очередь console является частью глобального объекта Window и поддерживается Объектной Моделью Браузера (Browser Object Model, BOM). Методы объекта console работают как на стороне фронтенда, так и на стороне бекенда.

#frontend #js

Как display: none для изображений влияет на скорость загрузки страницы

Читать

Мы постоянно пытаемся улучшить процесс вывода изображений при загрузке страниц сайта. Для фронтенд-разработчиков это цель, миссия и, даже, часть культуры.
Работая с ресурсами наших клиентов мы стали замечать, что время загрузки изображений в три раза превысило средние значения, определяемые для сходных сайтов. Анализ кода показал, что большое количество изображений скрывалось с помощью медиа-запросов и CSS-свойства display: none.

#frontend #css

Двойное отрицание

Читать

Булевы значения (boolean) названы в честь английского математика и логика Джорджа Буля (George Boole) и принимают только два значения: истина (true) или ложь (false). Обычно, такие данные применяются в математической логике.
В программирование булевы значения нужны для определения условий управляющих структур, например: операторов выбора (if) или цикла (while).
Для того, чтобы принудительно преобразовать значение любого типа в булево (true или false) в JavaScript существует встроенная функция Boolean().

#frontend #js

CSS для динамических классов

Читать

Итак, у нас есть класс .form-123, в котором цифровая составляющая изменяется при загрузке или обновлении страницы. Можно ли установить единые CSS-свойства (например, margin или background-color) для классов такого типа.
И сразу спойлер: да, это возможно, и для такой магии есть целых 3 способа.

#frontend #css

Как создать шаблон?

Читать

Имея в своем арсенале такие инструменты, как шаблонные литералы (template literals) для JavaScript и синтаксический сахар (например, JSX), я, конечно, привык упаковывать фрагменты HTML-кода в переменные и использовать их в проекте по своему усмотрению.

#backend #php

Копируем текст в буфер обмена

Читать

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

#frontend #js

Hello world на чистом CSS

Читать

Это звучит странно и непрактично, но, возможно, когда-нибудь на собеседовании Вас озадачат вопросом, привычным для любителей JavaScript и других языков программирования: можно ли написать фразу "Hello, World!" на чистом CSS?

#frontend #js

Выскальзывающий footer

Читать

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

#frontend #css

Как узнать длину объекта

Читать

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

#frontend #js

Исчезающая линия

Читать

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

#frontend #css

Управление версиями npm

Читать

Семантическое управление версиями - очень важная тема, которую должен отлично понимать каждый разработчик, независимо от того, чем он занимается: Node, React или Angular. Кроме того, понимание порядка версионирования npm-пакетов, является частым предметом обсуждения при проведении собеседований.

#dev #npm

Управляем активностью кнопки на чистом CSS

Читать

В этой небольшой статье мы рассмотрим, как заблокировать кнопку отправки данных формы только в том случае, когда не заполнено одно поле ввода. Тем не менее, этот прием будет работать и для нескольких полей ввода, но при этом нужно соблюдать одно важное условие - все поля ввода должны быть прямыми потомками элемента <form>. Использование различных блоков оберток для полей ввода приведете к неизбежному краху.

#frontend #css

Осторожно. CSS grid

Читать

Найти веб-ресурс, причиной медлительности которого является CSS достаточно непросто. Тем не менее, это возможно. Данный пример касается использования вложенных элементов CSS grid.
Оказывается, количество вложенных блоков, для которых применяется сочетание CSS-свойств display: grid и height: 100%, экспоненциально влияет на время загрузки сайта.

#frontend #css

Нелогичный JavaScript

Читать

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

#frontend #js

Увеличиваем время выполнения скрипта

Читать

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

#backend #php

Обновляем и удаляем свойство объекта

Читать

В этом маленьком обзоре мы разберем, как изменить значение свойства объекта и как корректно удалить свойство объекта в JavaScript.

#frontend #js