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

Зачем нужны 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 для сброса дефолтных стилей браузера

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

Полезные ресурсы для фронтенд-разработчиков

март 30 , 2015

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

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