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

Админка магазина на vue.js. Урок 6. Vue-cli и vue-компоненты

февраль 26 , 2019

До этого урока мы писали код просто и сурово. Здоровенный index.html, внешние библиотеки с CDN-a, javascript-код в одном файле. Для учебного проекта сгодится, но мы же хотим быть серьезными ребятами.

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

Я выбираю второй вариант. Грамотные люди уже написали все сборщики и подготовили основу проектов vue, на которой мы и будем развивать наше приложение.

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

Админка магазина на vue.js. Урок 5. Разбиваем приложение на компоненты

февраль 14 , 2019

Приложение vue строится на компонентах. Сейчас у нас только один компонент ProductItem, а вся логика содержится в корневом экземпляре vue. Это нехорошо, нам уже сейчас непросто в нем ориентироваться, а при наращивании функционала будет еще сложнее.

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

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

Админка магазина на vue.js. Урок 4. Правим код под новое REST API и расследуем багу

февраль 7 , 2019

Продолжаем работать над админкой vue. Перед тем, как разбивать наше приложение на компоненты, решил написать один промежуточный урок. В нем мы сделаем две вещи.

Во-первых, перейдем на новое серверное rest api, которое мы реализовали в третьем уроке.

Во-вторых, разберем багу, которая закралась в наш код. Бага интересна тем, что ее не заметили ни я, ни читатели. Нашел случайно, когда работал над третьим уроком с новым rest api.

Но обо всем по порядку.

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

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

декабрь 25 , 2018

В своих постах я часто упоминаю javascript-шаблонизацию. Underscore и lodash-шаблоны, может, видели. И недавно понял свою ошибку. Я пишу про шаблоны так, как будто прям каждый обязан знать, что это такое. А если не знает, то легко загуглит. А давайте-ка вместе и погуглим. Чуть не первая статья, с хабра, цитирую
— Лучшим выбором оказываются шаблоны, потому что это приводит к более чистому базовому коду и лучшему процессу работы с ними.

Хм, ну окееей. Погуглим еще. Сайт developer.mozilla.org, серьезные ребята, почитаем.
— Шаблонными литералами называются строковые литералы, допускающие использование выражений внутри. С ними вы можете использовать многострочные литералы и строковую интерполяцию.

Че-то это вообще не то. Это что-то из es6. Ну и третья попытка:
— Неплохо бы использовать механизм шаблонизации на стороне клиента, чтобы отделить поведение приложения от его внешнего вида

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

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

Админка магазина на vue.js. Урок 2. Фильтры и сортировки

декабрь 20 , 2018

В первом уроке админки на vue мы вывели на страницу товары и реализовали поиск. Сегодня прикрутим к списку товаров несколько фильтров и сортировок. Это будут фильтры по категориям, брендам, ценам и сортировки по рейтингу и ценам. Главная цель статьи - показать, что на vue делать такие вещи быстро и удобно.

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

Админка магазина на vue.js. Урок 1. Список товаров

декабрь 16 , 2018

С админкой на файлах мы закончили, пора переходить к вещам посерьезнее. На очереди админка для интернет-магазина, уже на базах данных, все как положено. За магазином далеко ходить не нужно, возьмем наш shop.webdevkin.ru. Будет здорово, если Вы с ним уже знакомы. Если нет, то посмотрите статью Структура базы данных в интернет-магазине, для админки этого хватит. К тому же по ходу уроков я буду стараться пояснять неочевидные моменты и давать ссылки на нужные места магазина. Постараемся не заблудиться :-)

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

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

Админка на файлах. Урок 4 и заключительный. Фронтенд

декабрь 9 , 2018

В трех предыдущих уроках админки мы подготовили верстку и серверную часть. Осталось вдохнуть жизнь в статичную страничку яваскриптом. Или выдохнуть, кому как нравится. Давайте подумаем, что хотим сделать.

  • Во-первых, само сохранение и отправка данных на сервер.
  • Во-вторых, сохранение данных на сервере. Урок фронтендский, на десяток строк на php мы все же напишем.
  • В-третьих, алерты. Мне нравится, когда система говорит, что какие-то данные изменились и нужно не забыть нажать кнопку Сохранить. Поэтому реализуем и это тоже.
  • В-четвертых, все. Раздувать функционал не будем. И так получится неплохая вещь, которую можно использовать в своих проектах.

С постановкой задачи разобрались, давайте приступим.

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

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

ноябрь 14 , 2018

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

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

AMP версия сайта. Основы

август 27 , 2017

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

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

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

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

Каталог в интернет-магазине, переключаем внешний вид товаров одной кнопкой

июнь 13 , 2017

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

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

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

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