Веб-компоненты — это новая эра веб-разработки и почувствовать ее мощь можно уже сегодня при помощи Polymer от Google. Вы можете создавать свои собственные «элементы» (тэги), содержащие шаблон и инкапсулированные стили и логику (js), а так же воспользоваться богатой коллекцией уже готовых элементов.
Читать полностью »
Рубрика «web-разработка» - 31
Веб-компоненты в реализации Polymer от Google
2014-09-19 в 11:32, admin, рубрики: html, html5, javascript, web-разработка, Веб-разработкаМега-Учебник Flask, Часть 15: Ajax
2014-09-16 в 22:03, admin, рубрики: ajax, flask, jquery, python, web-разработка, Веб-разработкаЭто пятнадцатая статья в серии, где я описываю свой опыт написания веб-приложения на Python с использованием микрофреймворка Flask.
Цель данного руководства — разработать довольно функциональное приложение-микроблог, которое я за полным отсутствием оригинальности решил назвать microblog.
Часть 2: Шаблоны
Часть 3: Формы
Часть 4: База данных
Часть 5: Вход пользователей
Часть 6: Страница профиля и аватары
Часть 7: Unit-тестирование
Часть 8: Подписчики, контакты и друзья
Часть 9: Пагинация
Часть 10: Полнотекстовый поиск
Часть 11: Поддержка e-mail
Часть 12: Реконструкция
Часть 13: Дата и время
Часть 14: I18n and L10n
Часть 15: Ajax(данная статья)
Часть 16: Отладка, тестирование и профилирование
Часть 17: Развертывание на Linux (даже на Raspberry Pi!)
Часть 18: Развертывание на Heroku Cloud
Мега-Учебник Flask, Часть 13: Дата и время
2014-09-14 в 15:09, admin, рубрики: flask, python, web-разработка, Веб-разработкаЭто тринадцатая статья в серии, где я описываю свой опыт написания веб-приложения на Python с использованием микрофреймворка Flask.
Цель данного руководства — разработать довольно функциональное приложение-микроблог, которое я за полным отсутствием оригинальности решил назвать microblog.
Часть 2: Шаблоны
Часть 3: Формы
Часть 4: База данных
Часть 5: Вход пользователей
Часть 6: Страница профиля и аватары
Часть 7: Unit-тестирование
Часть 8: Подписчики, контакты и друзья
Часть 9: Пагинация
Часть 10: Полнотекстовый поиск
Часть 11: Поддержка e-mail
Часть 12: Реконструкция
Часть 13: Дата и время(данная статья)
Часть 14: I18n and L10n
Часть 15: Ajax
Часть 16: Отладка, тестирование и профилирование
Часть 17: Развертывание на Linux (даже на Raspberry Pi!)
Часть 18: Развертывание на Heroku Cloud
Подборка занимательных CSS рецептов «Голые пятницы #2»
2014-09-12 в 7:34, admin, рубрики: css, html, web-разработка, Блог компании Wargaming.netПривет! В этот раз мы поговорим о стилизации инпутов без картинок и JS, особенностях вертикальных отступов, CSS счетчиках, необъятных возможностях в именовании классов, а также расскажем, как улучшить анимацию на слабых устройствах.
Проблемы поиска утечки памяти в веб-приложении с помощью Chrome DevTools
2014-09-11 в 7:43, admin, рубрики: chrome devtools, javascript, web-разработка, Веб-разработка, отладка, метки: Chrome DevTools, javascript, web-разработкаБраузер Google Chrome поставляется с превосходными инструментами для разработчика, они же есть в Яндекс.Браузере, новой Опере, и в других браузерах, основанных на базе Chromium.
Среди них есть потрясающие инструменты для работы с памятью, ознакомиться с которыми можно в статье пользователя Panya — «Как находить и устранять утечки памяти на примере Яндекс.Почты».
Javascript хранит объект в памяти до тех пор, пока на него есть хоть одна ссылка. Как только вы удаляете все ссылки на объект, он уничтожается сборщиком мусора.
Таким образом, чтобы удалить объект, нужно удалить все ссылки на него.
Это кажется очень простым, но есть несколько достаточно неожиданных «мест» где могут храниться ссылки на объекты, тем самым задерживая их удаление, и создавая утечку памяти.Читать полностью »
JavaScript метод insertAdjacentHTML и beforeend
2014-09-06 в 11:29, admin, рубрики: ajax, dom, html, javascript, web-разработка, Веб-разработкаПеревод статьи «JavaScript insertAdjacentHTML and beforeend», David Walsh.
Если вы не знали: чертов DOM очень медленный. А по мере того, как наши сайты становятся все более динамичными и AJAX-использующими, нам становиться все важнее управлять DOM древом с наименьшим ущербом в производительности. Недавно я написал статью о DocumentFragment'ах. Это разумный подход к объединению списка дочерних элементов под неким «псевдо-элементом», для дальнейшего помещения в реальный DOM элемент. Еще один замечательный метод для работы с элементами insertAdjacentHTML
: это способ добавлять элементы в родительский элемент не задевая других его потомков.
Читать полностью »
Масштабирование наоборот: БЭМ-методология Яндекса на небольших проектах
2014-09-03 в 10:04, admin, рубрики: bem, css, frontend-разработка, html, javascript, web-разработка, Блог компании Яндекс, стартапВ разработке интерфейсов отдельные фреймворки уже не так важны: когда инструменты доступны, наша задача сводится к выбору нужных. Чтобы сделать правильный выбор, нужно начать с общего подхода, с методологии. Большинство методологий, однако, разработаны крупными компаниями. Применимы ли они в маленьких проектах или их нужно «переизобретать» заново для успешного использования?
Скорее всего, вы уже знаете об одной из таких методологий, разработанной Яндексом — БЭМ. БЭМ утверждает, что трёх сущностей (блоков, элементов и модификаторов) достаточно для написания HTML и CSS, задания структуры кода и компонентной структуры с последуюшим масштабированием проекта до самого высокого уровня.
Я проработал в Яндексе достаточно долго и видел, как эта методология работает на больших проектах. В Яндексе БЭМ используют для разработки CSS- и JavaScript-компонент, с помощью этой методологии также пишут шаблоны и задают зависимости между компонентами. Есть БЭМ-инструменты, поощряются различные эксперименты с кодом, исследования. В масштабах большой компании эти трудозатраты окупаются и дают Яндексу возможность разрабатывать сотни сервисов одновременно — быстро и качественно.
Могут ли маленькие команды получить от БЭМ то же самое? В этом я совершенно не был уверен. Всё же БЭМ — абстракция, которая поставляется вместе с инструментами и технологиями. Для маленькой компании польза от переключения на «полный стек» этих технологий — сомнительна, многие из инструментов изначально приспособлены под крупные и сложные задачи. Быть может тогда сама идея, сама методология окажется полезной?
Изначально эта моя статья была опубликована в известном многим журнале Smashing Magazine. Но я решил, что и на Хабре она может быть интересна, ведь многие здесь занимаются собственными небольшими проектами.
Кейс Crocs: оптимизация продаж на сто миллионов. Часть 1
2014-08-22 в 12:12, admin, рубрики: e-commerce, web-разработка, Блог компании AstoundCommerce, Веб-разработка, Разработка под e-commerceБренд Crocs — один из самых известных производителей обуви в мире, “кроксы” носят во всех уголках планеты. В 2011 году наша команда начала работу над проектом, связанным с разработкой, запуском и оптимизацией процесса продаж для Crocs. А уже в 2012 году Crocs приняли решение о значительном расширении e-commerce-направления, которое включало в себя доработку и запуск новых онлайн-магазинов в новых географических локациях.
Большинство из уже существующих ресурсов Crocs были разработаны на e-commerce-платформе Demandware, поэтому было принято решение продолжать работу и развивать e-commerce-направление именно на этой платформе. В наши задачи входил запуск новых сайтов на Demandware для Бразилии и Японии, и отдельного ресурса CrocsAroundTheWorld, посвящённого десятилетию компании, редизайн, доработка и оптимизация отдельных элементов существующих ресурсов, а также оптимизация чекаута для повышения конверсии на сайтах Crocs, о котором и пойдет речь в статье.
Читать полностью »
Ресурсы в архиве или как уменьшить количество подгружаемых файлов
2014-08-10 в 10:30, admin, рубрики: html, javascript, php, web-разработка, Веб-разработкаРанним жарким утром спросонья пришла в голову идея. Подозреваю, что у этой идеи есть минусы либо ее уже реализовали куда более годным способом — но, авось да пригодится кому-нибудь.
Очень часто веб-разработчики сталкиваются с проблемой большого количества мелких файлов. Картинки, скрипты, css — неудобно, все дела. Нужно как-то бороться с этим. import, спрайты, блаблабла — это хорошо, но можно попробовать и иначе. Мой вариант — упаковка всех необходимых ресурсов в архив на стороне сервера(реализация — на php), получение данных на клиенте, установка ресурсов в нужных местах.
Проблемы на данный момент: не придумал толком, как кешировать полученный архив, таким способом не стоит паковать динамический контент или большие файлы.
Для распаковки архива на клиенте использована библиотека JSZip, для удобства — jQuery.
HTML-импорт — include для веба: часть 2
2014-08-10 в 9:36, admin, рубрики: html, html5, import, w3c, web-разработка, Веб-разработкаПеревод статьи «HTML Imports #include for the web», Eric Bidelman.
Ссылка на первую часть перевода.
Предоставление веб-компонентов
HTML-импорт упрощает загрузку и повторное использование кода. В частности, это хороший способ распространения веб-компонентов. Это касается как простых HTML <template>
, так и полноценных кастомных элементов с теневым DOM [1, 2, 3]. Когда эти технологии работают вместе, импорт становится инструментом для подключения веб-компонентов.
Читать полностью »