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

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-шаблонах, то задача предельно упрощается. Это будет самый короткий и простой урок по интернет-магазинам. Приступим.

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

Постраничная навигация по товарам в интернет-магазине

июнь 10 , 2017

Когда в интернет-магазине набирается хотя бы 3 десятка товаров, встает вопрос: как удобнее выводить списки товаров посетителям? Пока преобладают 2 способа: постраничное разбиение и динамическая подгрузка по мере прокрутки страницы. Впрочем, реализация обоих вариантов ничем особенно не отличается, кроме небольших изменений в javascript-коде.

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

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

Одностраничный сайт. Создаем сайтмап своими руками

июнь 2 , 2017

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

Казалось бы, что его создавать? Создали sitemap.xml и скопипастили туда содержимое чужого сайтмапа, заменив пути на свои. Но это не наш метод, мы же программисты, нам неинтересно врукопашную набивать содержимое файла. Все должно строиться и обновляться самостоятельно.

Другой вариант. Почему бы не воспользоваться готовыми решениями, особенно если мы делаем одностраничник на базе какой-то CMS? Да, но тогда как мы узнаем, как самим создать xml-файл, да еще и разными способами? Как создать общие конфиги для клиента и сервера, а под маской xml-файла выполнять php-код? Как вычитать даты на php и что такое sitemap changefreq?

Если Вас заинтересовали вышеозначенные темы, то читайте статью дальше. Будет много интересного, а может, даже и полезного :-)

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

Создаем одностраничный сайт SPA. Разбираемся с History API

май 21 , 2017

Одностраничные сайты или Single Page Applications (SPA) - это круто. Главный их профит в том, что SPA быстрее и отзывчивее на действия пользователей. Достигается это за счет переноса логики работы на клиентскую сторону и активного взаимодействия с сервером посредством ajax.

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

Зачем это надо и как это сделать, приложив немного усилий? Об этом ниже. Поехали.

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