Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Новый функционал следующей версии JS – ES2018

Как вы знаете, новую версия экмаскрипта (спецификации JS) планируют выпускать каждый год, так что каждый раз будем смотреть, что новенького нам пришло. Прямо подарки от деда Мороза 🙂

  • Асинхронные итераторы
    Раньше нельзя было использовать синтаксис цикла для прохода по итератору. Все решалось в основном через Promise. Теперь можно писать код с асинхронныим циклами:

  • Свойства Rest/Spread для объектов
    Синтаксис “трех точек” уже давно вовсю используется для массивов. С того же времени все говорили о том, что хорошо бы такое же сделть и для объектов. И вот пришло время:

  • RegExp именные группы выборки
    Результат поиска регулярными выражениями всегда был массив. Теперь можно дать имена группам и использовать более очевидный синтаксис:

  • Promise.prototype.finally()
    Метод вызывается, когда Promise вернулось с любым результатом, и после того как отработали основные методы (then(), catch())

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

Ссылки по теме:

Поделиться:

Вордпресс в докере

Во-первых, почему в докере? А как же иначе создать изолированную среду разработки, которая будет максимально подходить под сервер? Разворачивать lamp на домашнем компьютере очень не хочется. Оставим даже то, что по характеристикам все равно не будет соответствовать тому что на сервере. Самая большая для меня проблема в том, что при таком подходе не понятно как мне потом на том же компе развернуть еще среду для питончика, со всеми его плагинами или для go и т.д. В общем вы меня поняли – разработка должна быть изолированной и возможность перехода между языками должна быть максимально быстрой. Поэтому докер – это наш путь.

Теперь как же его развернуть под вордпресс. Поначалу я решил взять готовый image с архитектурой lamp и в нем все запускать. Только не тут-то было. Во-первых, нет ни одной которая бы активно поддерживалась, видимо никому не надо. Во-вторых, те что пробовал как-то не очень хорошо работали. Ну и в-третьих, запускать несколько сервисов в одном докере это не совсем по феншую. База данных должна быть в отдельном контейнере, вордпресс в отдельно – взболтать но не смешивать.

james-bond-martini

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

docker-compose.yml

Это файл конфигурации, который говорит докеру какие контейнеры и с чем запустить. В моем случае их будет два: wordpress и mysql. У каждого указываем какую версию взять. Для вордпресса так же говорим какую папку заменить на локальную – “wp-content”, собственно, это единственная папка, которая имеет значение в разработке. Разумеется еще указываем пароли для базы данных, и все, больше ничего не нужно. Дальше только запускаем:

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

Теперь можно открывать http://localhost:8080 – все должно работать. После того как закончите, то убрать контейнеры можно вот этой командой:

Поделиться:

Docker для бложика

docker-love

Наконец-то перенастроил docker для бложика. Теперь все должно запускаться относительно просто и почти авто-магически. Пол дня с этим возился и ничего больше не успел. Завтра напишу подробный пост. Всем мира и 7 футов под килем.

Поделиться:

А тем временем ракеты взлетают и садятся

Есть в этом что-то просветляющее. Занимаешься своим ремеслом, ищешь баги часами в терминале, когда код исполняется в нескольких тредах. А потом смотришь в новостях, что Маск умудряется синхронно запускать и сажать ракеты.

Блин, просто хоть вставай и меняй профессию.

Поделиться:

Подкрашиваем положение всех элементов на странице

Порой нужно разобраться в том где расположен каждый из элементов. Это нужно обычно для того чтобы найти баг в css. Например, отловить как внезапно нарисовался скроллбар или почему появился лишний overflow.

Самое простое решение для этого – выделить все элементы добавив им рамку. Однако, использовать стиль border не стоит потому что поедет верстка, так как размеры всех элементов изменятся. Лучше воспользоваться стилем outline и повесить его на все:

В итоге выглядеть все будет примерно вот так:

outline-example-github

Поделиться:

Проверяем виден ли элемент – IntersectionObserver

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

intersectratio-intersection-observer

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

Применений этой технологии масса, не только для рекламщиков, которых я уже упомянул:

  • Нативная постепенная загрузка (lazy loading), например, картинок
  • Реализация бесконечной прокрутки
  • Запуск анимации
  • Отчет о просмотре объявлений
  • Вы можете отключать IntersectionObserver после того как он сработал. Картинки уже загрузились, просмотры посчитались, можно с экономить на колбеке

Ссылки по теме:

Поделиться:

Как получить ссылку на <script> элемент кода, который сейчас исполняется

Когда разрабатываешь библиотеки, которые должны использоваться на других сайтах, то порой нужно получить ссылку на <script> элемент. Для чего это нужно? Простой пример можно наблюдать в моем предыдущем посте. Там я привел пример кода, который вывел через JSfiddle. Так вот для этого мне было достаточно скопировать и вставить короткий скрипт:

И вот где я его вставил, там и будет отображаться их интерфейс. Для того чтобы это было выполнимо js скрипт сервиса должен знать где расположен тег и в том месте встраивать свою магию. Как же это решается, если у самого тега ничего кроме адреса и атрибута асинхронности ничего нет?

Есть несколько способов, самый простой воспользоваться методом document.currentScript.

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

Ссылки по теме:

Поделиться:

Колбэк по изменению размера элемента на странице – ResizeObserver

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

Плюс новые размеры элементов можно было получить только используя “дорогой” методы вроде getBoundingClientRect(), который вызывает перерисовку всего окна. Теперь же, после изменения размеров, можно сразу получить все данные без перерисовки.

Пример:

(точно работает в 64 хроме, больше нигде не тестировал)

Поделиться:

Новые приключения в адаптивном дизайне

Доклад Виталия Фридмана (Vitaly Friedman) о том как сделать веб лучше и быстрее для всех. Виталий копает в браузерных технология так глубоко, что скоро найдет нефть. В этом и вся прелесть его докладов. Рекомендую всегда. Я перечислю основные моменты видео, самая презентация целиком находится ниже.

Сжимаем изображения

  • Помимо gzip существует еще как минимум 2 технологии компресси, которые можно уже сейчас использовать: zopfli, brotli. Они могут быть медленнее на высоких уровнях компрессии, поэтому имеет смысл заранее подготовить статичные файлы.
  • Фотографию объекта с тенью можно разделить на две: jpg для самого объекта, png для тени. После этого скомбинировать их в svg, для того чтобы png использовать как маску.
  • Изображение со сниженным контрастом будет лучше сжиматься. Потом в браузере можно поднять контраст через фильтры css. Проблема при таком подходе в том, что если пользователь решит сохранить картинку, то его будет ждать сюрприз.
  • Если сохранить картинку с максимальным сжатием (и минимальным качеством), а потом показывать ее в браузере в половину размера, то большинство пользователей не заметит разницы. Разница же в размерах будет ощутима.
  • Размывая части изображения мы помогаем компрессионному механизму. Поэтому имеет смысл “заблюрить” фон на фотографии, если он не представляет ценности.
  • Можно использовать альтернативные библиотеки сжатия для jpg, например, Guetzli от гугла

Адаптивные элементы

Если привязать размеры элемента к размеру шрифта, а мы можем это сделать при помощи единиц “rem”, то тогда можно использовать интересную формулу постепенного роста, либо сжатия компонента: font-size: calc(16px + (24-16)*(100vw-400px)/(800-400));.

Загразка шрифтов

Шрифт подгружается и отображается браузером одним из двух подходов:

  • FOIT (Flash of Invisible Text) – контент не будет отображаться пока шрифты не загрузились
  • FOIT (Flash of Unstailed Text) – показывать контент используя шрифты по-умолчанию, потом переключиться на те, что загрузились

Если используется FOIT, то в некоторых браузерах есть таймаут (3 сек.), после чего, если веб-фонт не загрузился, то включится шрифт по-умолчанию. Так ведут себя Хром и Файерфокс. А вот Сафари с другой стороны будет ждать пока не загрузится и может вообще не показать контент.

Можно отслеживать загрузку шрифтов и влиять на их отображение:

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

В видео Виталий рассказывает еще о многом, рекомендую к просмотру:

New Adventures in Responsive Web Design – Vitaly Friedman – btconfMUC2018 from beyond tellerrand on Vimeo.

Поделиться:

Перешел на https

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

http-to-https

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

На удивление все прошло достаточно просто. По ходу все этого процесса я немного изменил структуру самого сайта и теперь главная страница это корневой домен artemdemo.me а не artemdemo.me/blog. Переадресацию я настроил, так что ни пользователь ни гугл не должны получить повода для жалобы.

Теперь пришло время прикручивать SSL. Самый короткий способ, который я нашел, описан вот тут: How To Secure Apache with Let’s Encrypt on Ubuntu 16.04. Все сводится к тому, что используются сертификаты от Let’s Encrypt. Тут было немного сложностей, но в принципе все преодолимо и не так страшно.

И вуаля, все начало работать. Сайт лежал всего пару часов вчера вечером, пока я все обновлял.

Поделиться: