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

Развиваем дерево категорий jstree, реализуем перемещение на клиенте и сервере

июнь 12 , 2016

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

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

Строим дерево категорий на javascript, php и mysql

май 28 , 2016

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

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

Пишем встраиваемый виджет на нативном javascript и php

май 21 , 2016

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

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

Зачем нужны unit-тесты на фронте. Изучаем jasmine.js вместе

апрель 17 , 2016

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

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

Корзина для интернет-магазина на фронте или Пишем модульный javascript

сентябрь 6 , 2015

Корзина для интернет-магазина на фронтеОднажды пришла мне в голову безумная идея написать серию постов про различные подходы к организации javascript-кода. Такая мысль образовалась, когда по рабочей надобности изучал React.js и возрадовался от некоторых идей, заложенных его авторами. Захотелось потрогать его побольше, а потому как писать хеллоуворды из документации скучно, нужна была какая-то идея. Раз уж я начал вести блог на тему веб-разработки, то почему бы не создать простое, но более-менее внятное приложение с применением различных библиотек и фреймворков? И не только реакта, а любых других, до которых доберется дурной и воспаленный ум. В качестве подопытного приложения я возьму простенький интернет-магазин с каталогом и корзиной. Фишка будет в том, что код и каталога, и корзины будет написан на javascript. Корзина на фронте - не самое удачное решение для реальных проектов, но для небольших сайтов и в качестве изучения подойдет неплохо. Для изучения React понадобится сколько-то времени, поэтому для начала развлеку вас статьей, где опишу процесс создания нашего приложения без использования библиотек и фреймворков, но с использованием яваскрипт-модулей. Главная моя цель - это показать различные подходы к созданию приложений на javascript. С версткой заморачиваться сильно не буду, сверстаю на bootstrap, основной упор сделаю на javascript-код. Манипулировать DOM будем всем знакомым добрым jquery. Также подключим underscore для работы с данными и html-шаблонами. Данные для каталога загрузим из внешнего json-файла, а корзину будем хранить в localStorage. Итак, начнем...

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

Коды кнопок на javascript

май 12 , 2015

Как часто мы лезем в поисковик, чтобы вспомнить код кнопки для события keyup/keydown? Лучше воспользуемся написанным каким-то хорошим человеком сервисом, скажем ему спасибо и добавим страничку в закладки

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

Возможности console

май 8 , 2015

Все мы используем для отладки javascript-кода команду console.log(). Но объект console имеет еще кучу методов, которые могут оказаться очень полезными. Я даже не подозревал о стольких возможностях объекта console, пока не наткнулся на статью на хабре. Подробнее в статье

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

reset.css

апрель 6 , 2015

Привожу один из вариантов файла reset.css для сброса дефолтных стилей браузера

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