Webdevkin - справочник веб-разработчика.

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

май 21 , 2017

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

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

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

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

Simpple - простые решения для Вашего сайта. Проект запущен!

март 29 , 2017

Последние 3 месяца все было очень странно. Я запустил блог. В новом году появилось всего 2 толковых статьи. Материал для новых постов есть, но просто не доходят руки. Затеял переезд сайта на https, но что-то пошло не так и яндекс опустил меня в выдаче ниже плинтуса. А еще в Питере до сих пор не началась весна.

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

Вы уже могли видеть такие опросы на страницах моего блога, а может, и оставляли свои голоса в них. Теперь каждый может бесплатно, быстро и в неограниченных количествах создавать такие же опросы и встраивать их на свои сайты. Заходите на лэндинг, а скорее даже, readme - simpple.ru, читайте краткое описание проекта и переходите в панель управления. Или же сразу по прямой ссылке cp.simpple.ru

Если же Вам интересно узнать немного больше о сервисе, как он создавался, что он умеет и что я буду делать с ним дальше, то дальше в статье немного больше подробностей.

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

Простой RESTful-сервис на нативном PHP

февраль 5 , 2017

Я не знаю ни одного php-фреймворка. Это печально и стыдно, но законом пока не запрещено. А при этом поиграться с REST API хочется. Проблема в том, что php по умолчанию поддерживает только $_GET и $_POST. А для RESTful-сервиса надобно уметь работать еще и с PUT, DELETE и PATCH. И не очень очевидно, как культурно обработать множество запросов вида GET http://site.ru/users, DELETE http://site.ru/goods/5 и прочего непотребства. Как завернуть все подобные запросы в единую точку, универсально разобрать их на части и запустить нужный код для обработки данных?

Почти любой php-фреймворк умеет делать это из коробки. Например, Laravel, где роутинг реализован понятно и просто. Но что если нам не нужно прямо сейчас заниматься изучением новой большой темы, а хочется просто быстро завести проект с поддержкой REST API? Об этом и пойдет речь в статье.

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

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

январь 26 , 2017

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

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

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

Отдельный поддомен для демо интернет-магазина - shop.webdevkin.ru

январь 8 , 2017

Первый пост в новом году будет невероятно информативным! Я таки выделил отдельный поддомен, на котором будет крутиться наш демонстрационный интернет-магазин.

shop.webdevkin.ru - теперь все движения по магазину будут отображаться здесь. Больше не будет такого, чтобы отдельные части можно посмотреть, только развернув исходники. Это значит, что самое интересное в магазине - фильтры с сортировками и сравнение товаров - можно посмотреть сразу.

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

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

Планы на 2017 год. Новый проект simpple.ru

декабрь 27 , 2016

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

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

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

Webdevkin отчитывается. Итоги 2016 года

декабрь 25 , 2016

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

Под Новый Год, хочешь этого или нет, но подводишь для себя итоги и делаешь выводы. Размышляешь о формате блога, подсчитываешь показатели посещаемости и вспоминаешь самые интересные активности читателей. Сегодня 25 декабря и самое время поделиться итогами 2016 года с заинтересованными. Приступим.

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

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

декабрь 19 , 2016

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

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

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

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

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

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

декабрь 2 , 2016

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

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

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

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

ноябрь 16 , 2016

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

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

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

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