Webdevkin. Статьи по теме "Фронтенд"

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

январь 26 , 2017

Промисы, обещания, ад из колбэков, объект Deferred, then-ы, when-ы и резолвы...
Эти слова доносятся из каждого телеграфного столба. Есть ощущение, что я последний оболтус на этой планете, который не пользуется промисами. Погрустив на сей счет, я затеял разобраться с этой темой. Но как и в случае с git rebase выяснилось, что в интернетах много информации о промисах, но мало где есть объяснение на пальцах. А раз в интернетах чего-то нет, надо создать это самому.

Меня мало интересует общая теория и тонкости этой замечательной штуки. Любую незнакомую вещь я воспринимаю с точки зрения возможной пользы от нее. Поэтому подробные объяснения механизма работы промисов лучше поискать в других блогах. Мы же с вами рассмотрим пример практической работы с jquery promise. И в итоге выясним, стоит ли разбираться с этим подробнее или же можно дальше законно писать тонны кода в $.ajax.success.

Метки:
Читать дальше

Сравнение товаров в интернет-магазине или webdevkin-shop возвращается

декабрь 19 , 2016

Да! После трехмесячного перерыва на страницы Webdevkin-а возвращаются интернет-магазины!

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

Кроме того, реализуем еще пару плюшек: позволим фильтровать по совпадающим или различающимся свойствам и сохранять в url набор сравниваемых товаров. Удивительно, но многие магазины этого не предлагают, хотя реализовывается достаточно просто и приносит дополнительный позитив.

Итак, понеслась.

Читать дальше

Кросс-доменные ajax-запросы и причем здесь php

декабрь 2 , 2016

Однажды я писал статью как создавать встраиваемые виджеты на нативном javascript и php. И все бы хорошо, но в ней не затронул один момент. Такие виджеты использовать на собственном сайте можно, но интереснее создавать их для сторонних ресурсов. Но в таком случае нужные данные браузер должен подгружать с другого домена - это и есть кросс-доменные ajax-запросы.

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

Читать дальше

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

ноябрь 16 , 2016

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

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

Если говорить в общем, то вся оптимизация фронтенда сводится к двум типам задач. Первая - это ускорение передачи данных по сети. Состоит из двух подпунктов: уменьшение количества запросов к серверу и уменьшение объема передаваемых данных. И второе - ускорение работы приложения в браузере. А теперь подробнее.

Читать дальше

Основы безопасности: XSS-атаки и экранирование строк на javascript

ноябрь 13 , 2016

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

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

Читать дальше

Как и зачем использовать throttle и debounce из underscore или lodash

октябрь 14 , 2016

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

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

Метки:
Читать дальше

Сборка фронтенда - часть 3. Сборка gulp

сентябрь 30 , 2016

В предыдущих частях статьи про сборку фронтенда мы поговорили про основы сборки и написали простое тестовое приложение на backbone + require.js.

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

Внимание, это не статья по основам основ gulp! Предполагаю, что Вы знаете, что такое nodejs и npm. Если не знаете, то лучше предварительно погуглите, что это такое и как это все поставить. Установка nodejs, npm и gulp займет у Вас 5-10 минут. А теперь к самой статье.

Метки:
Читать дальше

Сборка фронтенда - часть 2. Тестовое приложение Backbone + Require.js

сентябрь 27 , 2016

В предыдущей статье мы договорились разобраться, как собирать фронтенд с помощью gulp. Но предварительно нужно сделать тестовое приложение для того, чтобы было что собирать. В качестве примера сделаем простенькую страничку на Backbone. Управлять модулями будем с помощью require.js. Работать с dom поможет добрая jQuery, а с данными - lodash. Подгружать html-шаблоны мы сможем с помощью requirejs-text.

Так как приложение тестовое, я не буду уделять внимание функциональности - все предельно просто. Обычная страничка с парой текстов и картинкой. Мы создадим одну модель, представление view к ней, загрузим html-шаблон и отрендерим все это добро. Предполагаю, что Вы уже знакомы с Backbone и Require.js, поэтому подробно каждую строчку расписывать не буду. Код очень простой, но все-таки без знания основ этих библиотек не все будет очевидно.

Если Вы не знакомы с Backbone, но интересуетесь созданием Single Page Application в целом и этой замечательной библиотекой в частности, оставляйте комментарии в статье, что-нибудь придумаем :-)

А теперь к делу.

Метки:
Читать дальше

Сборка фронтенда - часть 1. Основы сборки и организация проекта

сентябрь 24 , 2016

Уже давно инструменты сборки фронтенда перешли из разряда экзотики в необходимую часть работы над проектом. Я хочу поделиться некоторыми наработками по части организации проекта, его структуры, рассказать, какие задачи я решаю с помощью сборки и какими инструментами. Мы напишем небольшое тестовое приложение в связке Backbone + Require.js. Настроим окружение для работы над проектом в режиме "девелопмента" и "продакшена", посмотрим на их отличия. И в конце напишем задачи для сборки проекта с помощью инструмента сборки gulp и его плагинов.

Будут рассмотрены такие вопросы: работа со стилями sass с использованием sourcemaps, склеивание и сжатие js-файлов, сборка requirejs с помощью rjs, препроцессинг html, очистка и копирование файлов, оптимизация изображений, поднятие локального веб-сервера и режим наблюдения - watch-таски.

Добро пожаловать в статью, будет много интересного!
P.S. Материала много, поэтому статья будет разбита на 3 части: основы сборки и организация проекта, написание тестового приложения на Backbone + Require.js и собственно сборка с помощью gulp.

Метки:
Читать дальше

Фильтры в интернет-магазине. Урок 6 и заключительный. Завершаем отделку

сентябрь 13 , 2016

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

Читать дальше