Однажды на работе коллега-бекендщик подошел с вопросом. Есть get-запрос, который отдает json с массивом данных.  Нужно по ним построить таблицу в браузере. Проект личный, таблица для внутреннего использования, красоты особой не нужно.  Главное сделать минимальными усилиями.

2014 год. Веб-разработчики осваивают Angular и Laravel, пакетные менеджеры, инструменты сборки фронта, пробуют PostgreSql и MongoDB. Я ВНЕЗАПНО понимаю, что фрилансить в Питере за 15 тысяч в месяц это не так круто, как я всем рассказываю, и начинаю искать нормальную работу. Составляю сногсшибательное резюме: html, css, js/jquery (ага, прям так), php, mysql. Коммуникабельный, ответственный, стрессоустойчивый. Рассылаю резюме и жду шквала звонков.

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

Я не буду строить теории и учить, как нужно. А просто расскажу две истории. Очень разные истории.

Весьма далек от темы видео, анимаций, 3D и прочих творческих штук, но смотреть такие вещи люблю. Поэтому когда случайно наткнулся на утилиту визуализации Gource, не утерпел и попробовал ее в действии. Для опытов взял историю git-a собственного проекта simpple.ru. Все оказалось проще, чем я думал, благо документация у утилиты хорошая, да и готовых примеров в сети долго искать не пришлось.
Ниже в статье получившееся видео и процесс его создания.

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

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

Итак, начнем!

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

Загуглив в рамблере, я с некоторой грустью выяснил следующее. Похоже, те благостные времена работы волшебных сервисов отправки смс за 3 копейки ушли и больше не вернутся. Были в свое время народные умельцы, которые отправляли халявные смски через общедоступные формочки на сайтах операторов сотовой связи, но теперь лавочку прикрыли. Чтобы отправить смс через сайт оператора, нужно проделать массу манипуляций в зависимости от паранойи оного оператора: это и в личный кабинет войти, и ввести код подтверждения при отправке смс, полученный через смс же на свой номер. Да еще и ограничения по количеству и/или промежутков времени. В общем, там лось ногу сломит. Впрочем, если у Вас другая, более радостная информация, то поделитесь в комментах, обрадуйте автора :-)

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

Технология AMP (Accelerated Mobile Pages), разработанная Google, становится все более популярной. Мгновенное открытие страниц - это то, о чем мечтают пользователи и пытаются добиться разработчики. Наращивание мощностей серверов, переход на SPA (Single Page Applications), оптимизация языков программирования и фреймворков - все эти процессы преследуют глобально одну цель - ускорение. Скорость - одна из самых важных составляющих современного интернета.

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

В этот раз тестового проекта не будет. Мы создадим AMP-версию сайта для этого же блога - webdevkin.ru. Думаю, будет много интересного. Приступим.

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

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

В качестве примера возьмем новости футбола. А брать их будем с сайта bombardir.ru, на который я иногда заглядываю. Будем вытаскивать у них главные новости и статьи из центральной колонки и отображать их на нашей демо страничке (в целом, новостные агрегаторы так и работают). Посмотрите на исходный сайт, потом что получилось у нас, и если Вам интересно, как вытащить нужный контент, читайте статью дальше.

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

Но давайте вспомним серьезные интернет-магазины. Многие из них предлагают на выбор несколько вариантов отображения товаров. Чаще всего встречается один вид с большими фото, второй кратким списком и третий - что-то среднее. Это очень удобно, так как предпочтения людей по виду каталога разные. А если такое могут сделать серьезные магазины, то чем мы хуже?

В этой статье мы создадим набор переключателей внешнего вида каталога (можно даже назвать это темами). И небольшим бонусом научимся сохранять это состояние в localStorage. Так как html-разметка товаров у нас находится в underscore-шаблонах, то задача предельно упрощается. Это будет самый короткий и простой урок по интернет-магазинам. Приступим.

В первых двух уроках про SPA мы создали одностраничный сайт и соорудили для него sitemap.xml. Пройдя по любой ссылке в сайтмапе, посетитель сайта увидит правильно отрендеренный контент, заголовок страницы и прочее. Беда в том, что этот контент не видят поисковики. Они не умеют выполнять javascript и видят только то, что отдает сервер. Поэтому все страницы сайта для них будут совершенно одинаковые, что не только полезно, а еще и очень вредно :-)

Наша задача состоит в том, чтобы научить поисковые роботы видеть то же, что и мы с вами. Другими словами, заставить сервер отрисовывать ровно ту же html-разметку, что образуется после отработки javascript-кода в браузере.

Обращаю внимание: это никоим образом не означает отход от концепции одностраничных сайтов. Для наших посетителей при навигации по сайту страницы будут грузиться как и раньше: через ajax-загрузку контента и с History API. Изменится лишь первоначальная загрузка страницы, когда мы сразу отдадим в браузер нужный контент. Как это сделать, а также про небольшие хитрости с robots.txt и страницей 404 Not Found, читайте ниже в статье.