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

У меня давно была мысль сделать что-то вроде оглавления или содержания статьи на webdevkin-e. Многие посты объёмны и ориентироваться по ним не очень удобно. Идея была в том, чтобы в начало каждой статьи поставить из названий подразделов, клик на которые отправлял бы на соответствующее место страницы. Все это элементарно делается через якоря, атрибут id или name (устарел) тега a, но создавать врукопашную такие списки для каждой страницы было очень лениво. Поэтому я написал небольшой скрипт, если хотите - плагин или виджет, который автоматически создает оглавление для каждой статьи, прикрутил его к своему блогу и хочу поделиться реализацией с общественностью.

Недавно в одной из статей я рассмотрел интересный плагин для построения дерева категорий - jstree. В посте мельком была затронута тема перемещения категорий в дереве мышкой, методом drag-and-drop. На клиентской стороне это делается очень просто - добавлением одного поля в параметрах инициализации плагина. Но чтобы структура дерева не потерялась после обновления страницы, нужно зафиксировать эти изменения в базе данных. Для этого придется написать немного php-скриптов и составить парочку sql-запросов. Как это сделать, рассказывается в статье ниже.

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

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

Каждый раз подключая на своих сайтах готовое решение от сервисов вроде disqus или google-аналитики, я удивляюсь простоте интеграции достаточно сложного функционала. Поставил в код 3 строчки javascript-кода - и у тебя уже развернулся блок с комментариями. Еще 2 строчки - и доступна аналитика от гугла или яндекса. Конечно, никакого волшебства при этом не происходит, те самые 3 строчки кода подтягивают с удаленного сервера весь нужный код, и по сути разворачивают небольшое веб-приложение на страницах Вашего сайта. Но как это устроено внутри и как это сделать самому? Разобраться с этим было достаточно интересно, и в итоге у меня получился небольшой виджет, который работает именно по такой простой схеме встраивания и при этом еще выполняют некоторые полезные вещи. Далее подробности.

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

Вследствие большой популярности поста про корзину для интернет-магазина на javascipt и интереса публики к постройке магазинов в целом решил запилить напрашивающееся продолжение означенной статьи. Сейчас мы рассмотрим следующий этап: сбор данных о покупателе и его заказе и отправка их на сервер.
Что я подразумеваю под оформлением заказа? Как владельцу магазина мне бы хотелось предоставить на своем сайте страничку, где покупатель после накидывания товаров в корзину введет свои контактные данные, нажмет одну кнопку "Отправить заказ", и эти данные каким-то образом будут мне известны, сохранены в надежном месте, и я получу уведомление о новом заказе, дабы не пропустить это радостное событие и максимально быстро обработать этот заказ.
Чем это грозит программисту? Сперва нужно создать эту страничку, нарисовать на ней форму с нужными полями, вроде имени, телефона и адреса доставки. Затем написать немного javascript-кода, который будет, в первую очередь, собирать данные и отправлять их на сервер, а во вторую очередь, заниматься всякими прикольными штуками, например, валидацией введенных данных, обработкой ошибок от сервера, показом сообщений от этих ошибок и прочее. После этого создать в mysql несколько табличек, в которую нужно сохранить полную информацию о заказе, и написать серверный код, который и будет эту инфу обрабатывать. И последняя важная часть - это отправка писем менеджеру магазину и самому покупателю.
Все, что я перечислил, это минимальный, но вполне достаточный набор для функционирования большинства несложных интернет-магазинов.
И теперь подробнее о том, как это реализовать...

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

Давно не писал статьи про мою любимую CMS Modx Revo, а зря. Яндекс.метрика убедительно говорит, что статьи на эту тему пользуются большой популярностью у посетителей блога. Сегодня сей пробел частично исправлю и хочу поговорить вот о чем. К сожалению или к счастью, одной из главных фишек Modx является тот факт, что практически все содержимое сайта, включая, ресурсы, шаблоны, сниппеты, чанки и прочее-прочее хранится в mysql-базе. Из этого вытекают и плюсы, и минусы, но мне минусов видится больше.
Основные претензии: работа с git в Modx, настройка рабочего окружения, конфиги для боевых и тестовых серверов, деплой и встроенные редакторы кода
Итак, в этой статье я покажу, как я разбирался с этими пунктами, что удалось сделать успешно и какие моменты не получилось реализовать до конца. Добро пожаловать в статью и комменты!

Однажды пришла в голову мысль о том, что пора становиться взрослым и начать писать тесты на свой код. Времена, когда javascript использовался преимущественно для анимашек и кликов на кнопки для открытия всплывающих окон, давно прошли. Логика работы с данными понемногу перетекает на клиентскую часть приложения, которая в некоторых случаях становится сложнее серверной. В условиях быстрого разрастания js-кода становится все проблематичнее добавлять новый функционал, не боясь поломать старый. Здесь нам и приходят на помощь unit-тесты. Об этой теме написано уже множество статей, подробно разобраны возможности различных библиотек, поэтому не буду рассматривать самые основы и копировать примеры из официальной документации. В статье я хочу показать, как можно быстро создать песочницу для unit-тестов, как подготовить код к модульным тестам и написать сами тесты. Чтобы не рассматривать какие-то абстрактные варианты, мы будем разбираться и писать тесты на примере модуля корзины для интернет-магазина, который мы разрабатывали пару статей назад. В качестве подопытного кролика выбрана популярная библиотека jasmine.js. Итак, подробнее...