Фронтенд

В этом разделе статьи на разные темы: клиентская оптимизация, кроссдоменные запросы и промисы. Встраиваемые виджеты, throttle/debounce и javascript-шаблонизация



javascript-шаблонизация для начинающих на примере lodash template

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


Клиентская оптимизация: 10+ способов ускорить фронтенд

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


Как организовать кросс-доменные ajax-запросы

Рассматриваю тему не только со стороны клиента, но и на бекенде (совсем чуть-чуть). В этом уроке вы узнаете, как с помощью ajax получить данные с другого домена


jQuery Promise. Как заставить промисы работать на себя

О промисах много написано, но я потратил кучу времени, чтобы в этом разобраться. По итогу свел все мысли в кучу и написал код для примера, как это все работает. Если хотите разобраться, заходите в статью


Сборка фронтенда

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


Что такое AMP и зачем это нужно

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


Валидация и отправка файлов на сервер с помощью ajax

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


Простой скрипт для создания оглавления на сайте

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


Дерево категорий с помощью jstree

Когда-нибудь нам всем приходится заниматься деревьями. Но речь не про бинарные деревья и алгоритмы поиска, ну их нафиг. Речь в статьях пойдет о представлении данных на клиенте в виде дерева. Можно сделать и руками, а можно использовать удобную библиотечку jstree. В статье я рассказываю об опыте работы с ней, как обычно с примерами, демо и исходниками кода
Статьи не чисто фронтовые. Мы живем в реальном мире и данные для приложения берем не из готового json-a, а тянем с сервера. А храним эти данные в базе, в нашем примере в mysql. Вот и рассмотрим всю цепочку от структуры таблицы для древовидных данных до отображения их на клиенте


Пишем встраиваемый виджет на нативном javascript и php

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


Юнит-тесты на клиенте. Изучаем jasmine.js на примерах

Я вообще не специалист по тестам и пишу их, стыдно сказать, очень редко. Хотя чего я обманываю? Не стыдно. Но разобраться с темой было интересно, а jasmine - подоходящий и несложный инструмент.
P.S. Не делайте как я - пишите тесты! Я плохой и делаю неправильно!


throttle и debounce

Две полезные функции, который должен знать каждый фронтендщик. Если не знаете, три раза фу, быстрее читать. Потом еще спасибо скажете


Tabulator.js - простой способ построить интерактивную таблицу за 10 минут

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