Рубрика «web-разработка» - 30

Перевод статьи «JavaScript insertAdjacentHTML and beforeend», David Walsh.

Если вы не знали: чертов DOM очень медленный. А по мере того, как наши сайты становятся все более динамичными и AJAX-использующими, нам становиться все важнее управлять DOM древом с наименьшим ущербом в производительности. Недавно я написал статью о DocumentFragment'ах. Это разумный подход к объединению списка дочерних элементов под неким «псевдо-элементом», для дальнейшего помещения в реальный DOM элемент. Еще один замечательный метод для работы с элементами insertAdjacentHTML: это способ добавлять элементы в родительский элемент не задевая других его потомков.
Читать полностью »

В разработке интерфейсов отдельные фреймворки уже не так важны: когда инструменты доступны, наша задача сводится к выбору нужных. Чтобы сделать правильный выбор, нужно начать с общего подхода, с методологии. Большинство методологий, однако, разработаны крупными компаниями. Применимы ли они в маленьких проектах или их нужно «переизобретать» заново для успешного использования?

Скорее всего, вы уже знаете об одной из таких методологий, разработанной ЯндексомБЭМ. БЭМ утверждает, что трёх сущностей (блоков, элементов и модификаторов) достаточно для написания HTML и CSS, задания структуры кода и компонентной структуры с последуюшим масштабированием проекта до самого высокого уровня.

Масштабирование наоборот: БЭМ методология Яндекса на небольших проектах


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

Могут ли маленькие команды получить от БЭМ то же самое? В этом я совершенно не был уверен. Всё же БЭМ — абстракция, которая поставляется вместе с инструментами и технологиями. Для маленькой компании польза от переключения на «полный стек» этих технологий — сомнительна, многие из инструментов изначально приспособлены под крупные и сложные задачи. Быть может тогда сама идея, сама методология окажется полезной?

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

Читать полностью »

Бренд Crocs — один из самых известных производителей обуви в мире, “кроксы” носят во всех уголках планеты. В 2011 году наша команда начала работу над проектом, связанным с разработкой, запуском и оптимизацией процесса продаж для Crocs. А уже в 2012 году Crocs приняли решение о значительном расширении e-commerce-направления, которое включало в себя доработку и запуск новых онлайн-магазинов в новых географических локациях.

Большинство из уже существующих ресурсов Crocs были разработаны на e-commerce-платформе Demandware, поэтому было принято решение продолжать работу и развивать e-commerce-направление именно на этой платформе. В наши задачи входил запуск новых сайтов на Demandware для Бразилии и Японии, и отдельного ресурса CrocsAroundTheWorld, посвящённого десятилетию компании, редизайн, доработка и оптимизация отдельных элементов существующих ресурсов, а также оптимизация чекаута для повышения конверсии на сайтах Crocs, о котором и пойдет речь в статье.
Кейс Crocs: оптимизация продаж на сто миллионов. Часть 1Читать полностью »

Ранним жарким утром спросонья пришла в голову идея. Подозреваю, что у этой идеи есть минусы либо ее уже реализовали куда более годным способом — но, авось да пригодится кому-нибудь.

Очень часто веб-разработчики сталкиваются с проблемой большого количества мелких файлов. Картинки, скрипты, css — неудобно, все дела. Нужно как-то бороться с этим. import, спрайты, блаблабла — это хорошо, но можно попробовать и иначе. Мой вариант — упаковка всех необходимых ресурсов в архив на стороне сервера(реализация — на php), получение данных на клиенте, установка ресурсов в нужных местах.

Проблемы на данный момент: не придумал толком, как кешировать полученный архив, таким способом не стоит паковать динамический контент или большие файлы.
Для распаковки архива на клиенте использована библиотека JSZip, для удобства — jQuery.

Читать полностью »

Перевод статьи «HTML Imports #include for the web», Eric Bidelman.

Ссылка на первую часть перевода.

Предоставление веб-компонентов

HTML-импорт упрощает загрузку и повторное использование кода. В частности, это хороший способ распространения веб-компонентов. Это касается как простых HTML <template>, так и полноценных кастомных элементов с теневым DOM [1, 2, 3]. Когда эти технологии работают вместе, импорт становится инструментом для подключения веб-компонентов.
Читать полностью »

image

Доброго времени суток, уважаемые читатели!

Возникла передо мной сегодня задача генерации GET-параметров и всего URL в целом, на стороне клиента, прям вот щас, без возможности «поговорить» с сервером. Сразу оговорюсь, про этот пост я узнал вот прям перед написанием данной статьи ибо сначала закончил писать, а потом уже прибег к поиску, да и пост тот — не со всем про то же самое, что у меня.

Итак, к делу.

Задача и проблемы

Проблемы — те же что и в посте, который я привел выше:

  • Невозможность использовать window.location для «приготовления» URL;
  • Нельзя работать сразу с несколькими window.location в силу политики безопасности браузеров;
  • Отсутствие известных готовых решений ( да и сейчас, уже апосля, я не нашел подобного кода )

Задачи которые я поставил перед собой:

  • Удобный синтаксис
  • Возможность как читать части URL так и изменять их
  • Работа с GET-параметрами
  • Кроссбраузерность и универсальность

Писал я на чистейшем JavaScript, причем без использования prototype.__defineGetter__ или prototype.__defineSetter__ в угоду кроссбраузерности ибо IE < 9 такого не умеет. Более подробно про getters/setters написано в этом посте.

Для тех кому интересно — сядем разберем, а кому надо готовое решение — милости прошу в конец поста, ссылки на скачивание — там.

Приступим! Раньше сядем — раньше выйдем.
Читать полностью »

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

Перевод статьи «HTML Imports #include for the web», Eric Bidelman.

От переводчика

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

Для чего нужен HTML-импорт?

Давайте поговорим о том, как мы загружаем различные ресурсы. JavaScript мы загружаем при помощи <script src>. Для CSS у нас есть <link rel="stylesheet">. Для изображений <img>. Для видео есть <video>. Для аудио — <audio>… Давайте ближе к сути! Для большинства видов контента есть простые способы его подгрузки. Но не для HTML. Для HTML у нас есть следующие варианты:

  1. <iframe> — испробованный и рабочий, но тяжеловесный способ. Контент iframe'а живет в отдельном от главной страницы контексте. Хоть это и хорошая особенность, она также создает дополнительные трудности: подгонка размера айфрейма к его содержимому, работа с внутренними скриптами и стилями.
  2. AJAX — мне нравится xhr.responseType="document", но загрузка HTML при помощи JS не кажется хорошей идеей.
  3. КривыеКостылиTM — html код в виде JS строк или комментариев, например <script type="text/html">.

HTML код, это самый простой тип контента, но в этом плане, он требует наибольших усилий. Хорошо, что у нас есть Web Components, они помогут нам справиться с этой и другими проблемами.
Читать полностью »

Первый взгляд на Avocode

Доброго времени суток!

Так уж завелось, что подавляющее большинство веб-дизайнеров создают макеты сайтов в Adobe Photoshop. И каждый раз, мы, бедные верстальщики, испытываем на себе все минусы и проблемы PS. И нам всегда приходилось с ними мириться, либо использовать всяческие плагины костыли, и сторонние приложения костыли. Даже новомодный и перспективный Sketch создан, в первую очередь, для создания макетов, а не для извлечения информации для верстки.

Но темные времена прошли, и тучи начинают рассеиваться над миром фронтенд-разработчиков. Итак, встречайте: Avocode!Читать полностью »

Изображения в верстке. Хватит это терпеть

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


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js