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

Проверяем виден ли элемент – 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. Ребейз на нем остановится и вернет управление в наши руки. Теперь нужно вынуть файлы:

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

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

Поделиться:

Возможно ли, чтобы a ==1 && a== 2 && a==3 вернули true?

Из прекрасного и удивительного мира JS. Возможно ли чтобы a == 1 && a == 2 && a == 3 ?

Ответ: Да, чувак, возможно!

Can (a ==1 && a== 2 && a==3) ever evaluate to true?

Поделиться:

Вопросы, которые я бы задал на собеседовании

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

frontend-interview-questions

JS

  • Опишите следующую конструкцию и когда бы вы ее использовали: (() => {})()

IIFE – это очень распространенный паттерн в JS. Тут же имеет смысл задать несколько вопросов про скоуп – что это такое и какое имеет отношение к использованию этой структуры.

  • Когда будет усполнена переданная функция: setTimeout(() => {})

Смотрим насколько человек разбирается в том как работает движок js. Тут же имеет смысл поговорить о том как исполняется язык в одном треде и как решается асинхронность.

  • Напишите функцию, которая бы выдавала вот такой результат: add(3)(4); // 7

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

  • Вопрос со звездочкой, в продолжение предыдущего. А что если мы не знаем сколько может быть передано чисел. То есть в предыдущем примере два числа: 3 и 4, а если их может быть неограниченное количество add(3)(4)(10); // 17 или add(3)(4)(1)(1)(1)(2); // 12

Не обязательный вопрос, но если кандидат знает, то сильный плюс ему 🙂

  • У вас некий компонент с заранее неизвестным количеством кнопок и их количество может всегда измениться. Как вы будете обрабатывать события клика по ним?

Вопрос на понимание того как распространяются события в DOM’е.

  • Какой будет результат вот этого кода:

Имеет смысл пройтись с кандидатом по каждой строчек, чтобы он описал что будет происходить и почему.

CSS

  • Как расопложить элемент по центру вертикально?

Святой грааль стилей 🙂

  • Что вы можете рассказать о скорости css селекторов. Какой способ будет быстрее всего работать в браузере.

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

Ну и поскольку пишу я сейчас на реакте, то и вопросы про сам фреймфорк обязательно будут. Хотя, только в том случае, если программист использовал его. Если он писал на других фреймворках, то конечно мучать его реактом нет смысла. В сутках всего 24 часа, все познать не получается.

React

  • Какие библиотеки вы использовали вместе с реактом

Вопрос на обсуждение стека. Что кандидат уже пробовал. Что выбрал для запросов к серверу, что для хранения данных, Flux или Redux

  • Почему имеет смысл выбрать Redux. В чем его преимущество, либо недостатки

Вопрос на понимания имутабильности. Стоит затронуть тему PureComponents, что это и зачем, а также как Redux облегчит работу с ними.

  • Объясните необходимость атрибута key.

Насколько кандидат понимает работу реакта. Как реакт определят рендерить ли компонент заново или нет.

Поделиться:

Скриншоты кода

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

carboon-beautiful-images-of-your-source-code

https://carbon.now.sh/
https://github.com/dawnlabs/carbon

Поделиться: