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

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. Тут было немного сложностей, но в принципе все преодолимо и не так страшно.

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

Поделиться:

Давайте наймем дизайнера интерфесов (UX/UI)

Я уже писал о том, что не получится делать качественный продукт без дизайна. Ну вот никак. Все потому что вашей разработкой никто же пользоваться не захочет. Мы же мечтаем о том, чтобы наши клиенты были довольны и платили бы и дальше за услуги, которые мы так хотим им оказать, верно?

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

ux-designer

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

Для начала опишем инструментарий, который понадобится для работы. На данный момент я вижу 2 абсолютно необходимые программы, которые нужно обязательно использовать, это: Photoshop и Sketch. Да, да это значит что дизайнеру нужно будет купить еще и “яблочный компьютер”, ребята это нормально, не пугайтесь. Эта машина будет служить верой и правдой и максимум, если не сработаетесь, то перейдет к другому дизайнеру, волноваться не нужно.

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

Например, есть облачные сервисы для того, чтобы делиться дизайном Zeplin и Avocode. Зеплин дольше на рынке и многие крупные компании им уже вовсю пользуются (например, HH.ru и zelando), авокоде помоложе, но предоставляет интересный функционал и вполне имеет смысл посмотреть в сторону обоих.

В чем же из преимущество по сравнению с “файликами”? Интерактивность – загрузил файл и разработчик сам может посмотреть размеры, цвета и шрифты. Ссылку на загруженный файл можно передать кому угодно в компании и они смогут просмотреть ее в браузере, без дополнительного программного обеспечения. Ну и конечно комментарии – прямо на дизайне, можно везти диалог. Сплошные преимущества.

Коммуникации – это тоже процессы и, имеет смысл на собеседовании уточнить владеет ли ими кандидат. Если нужно будет всех всему учить, просто потому что вы нанимаете первого дизайнера, то хотелось бы, чтобы у него уже был опыт работы с граблями, на которые всем все равно придется наступать.

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

Поделиться:

Как поправить изменения в файлах в последнем коммите

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

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

keep-calm-and-git-rebase

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

В открывшимся списке выбираем коммит, который хотим изменить и меняем его на edit. Ребейз на нем остановится и вернет управление в наши руки. Теперь нужно вынуть файлы:

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

И все, дерево коммитов будет переделано.

Поделиться: