Как стать автором
Обновить
20
0
Йосиф Крошный @jojo97

Программист

Отправить сообщение

JavaScript метод insertAdjacentHTML и beforeend

Время на прочтение 1 мин
Количество просмотров 22K
Перевод статьи «JavaScript insertAdjacentHTML and beforeend», David Walsh.

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

HTML-импорт — include для веба: часть 2

Время на прочтение 9 мин
Количество просмотров 27K
Перевод статьи «HTML Imports #include for the web», Eric Bidelman.

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

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


HTML-импорт упрощает загрузку и повторное использование кода. В частности, это хороший способ распространения веб-компонентов. Это касается как простых HTML , так и полноценных кастомных элементов с теневым DOM [1, 2, 3]. Когда эти технологии работают вместе, импорт становится инструментом для подключения веб-компонентов.
Читать дальше →
Всего голосов 29: ↑25 и ↓4 +21
Комментарии 9

3 новых JavaScript API, которые вам стоит узнать

Время на прочтение 4 мин
Количество просмотров 28K
Перевод статьи «3 New JavaScript APIs You May Want to Follow», Aurelio De Rosa из портала SitePoint.

Если вы постоянный читатель SitePoint, и возможно, читаете мои заметки, то вы знаете, что я написал множество статей о новых HTML5 и JavaScript API. До сих пор я писал заметки об API, которые вы можете использовать прямо сейчас, в том числе с использованием полифилов.

Сегодня я решил нарушить это правило и описать вам несколько API на ранней стадии разработки. Эти технологии настолько свежи, что 2 из 3 были представлены всего несколько дней назад. Поэтому они пока не могут быть использованы. Однако, если вам интересно, что они позволят сделать, вы можете почитать спецификации и написать, что бы вы хотели в них улучшить.

Давайте же, без лишних церемоний, начнем!
Читать дальше →
Всего голосов 41: ↑31 и ↓10 +21
Комментарии 14

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №118 (28 июля — 3 августа 2014)

Время на прочтение 5 мин
Количество просмотров 35K
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости


Читать дальше →
Всего голосов 41: ↑40 и ↓1 +39
Комментарии 1

HTML-импорт — include для веба: часть 1

Время на прочтение 6 мин
Количество просмотров 93K
Перевод статьи «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, они помогут нам справиться с этой и другими проблемами.
Читать дальше →
Всего голосов 38: ↑28 и ↓10 +18
Комментарии 26

Что такое HTML импорт и как это работает?

Время на прочтение 4 мин
Количество просмотров 168K
Перевод статьи «What are HTML Imports and How Do They Work?», Paula Borowska.

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

Введение в HTML импорт


HTML импорт, это простая для понимания вещь; это способ вставки на страницу других HTML страниц. Вы можете сказать, что в этом нет ничего особенного, так вот есть; раньше вы не могли это так просто сделать.

Интересно то, что HTML это самые простые файлы, но иногда с ними труднее всего работать. Даже PHP файлы имеют возможность включения, почему же HTML этого не может? Благодаря веб-компонентам, мы, теперь, можем включать одни HTML документы в другие. Также, при помощи этого же тега, мы можем подключать CSS и JavaScript. (Жить стало намного лучше.)
Читать дальше →
Всего голосов 69: ↑54 и ↓15 +39
Комментарии 73

18 неожиданностей при чтении исходного кода jQuery

Время на прочтение 4 мин
Количество просмотров 56K
Перевод статьи «18 Surprises From Reading jQuery's Source Code», David Aragon.

Я люблю jQuery, и хотя я считаю себя продвинутым JavaScript разработчиком, я никогда, до сих пор, не читал исходники jQuery с начала и до конца. Вот несколько вещей, которые я при этом узнал:
Читать дальше →
Всего голосов 113: ↑101 и ↓12 +89
Комментарии 37

Построение надежных веб-приложений на React: Часть 4, серверная генерация

Время на прочтение 6 мин
Количество просмотров 27K
Перевод статьи «Building robust web apps with React: Part 4, server-side rendering», Matt Hinchliffe

От переводчика: это перевод четвертой части цикла статей «Building robust web apps with React»
Переводы:

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

В предыдущей части этой серии я блуждал в поисках стратегии тестирования, и эта часть не сильно отличается. И хотя здесь есть примеры и базовые демо изоморфного JavaScript, здесь не так много опенсорс реализаций для изучения. В сторону детали реализации, для меня, самое большое отличие, от написания клиентского JavaScript, это то, что у меня изначально есть данные.
Читать дальше →
Всего голосов 19: ↑15 и ↓4 +11
Комментарии 4

Использование элементов, в качестве фоновых изображений при помощи -moz-element

Время на прочтение 2 мин
Количество просмотров 9.5K
Перевод статьи «Use Elements as Background Images with -moz-element», David Walsh

Все мы знаем, что все браузерные вендоры по своему определяют многие CSS и JavaScript фичи, и я благодарен им за это. Mozilla и WebKit предлагают свои интересные проприетарные свойства, и хотя, как мы знаем, утверждение стандартов происходит годами, намного дольше чем стоило бы, мы все должны быть за это благодарны. Есть одно интересное CSS свойство о котором вы наверняка еще не слышали — -moz-element, это реализованное Mozill'ой CSS свойство, которое позволяет разработчикам использовать HTML элементы в качестве фонов для других элементов!

Смотреть демо
Читать дальше →
Всего голосов 24: ↑19 и ↓5 +14
Комментарии 15

Построение надежных веб-приложений на React: Часть 3, тестирование с Jasmine

Время на прочтение 8 мин
Количество просмотров 15K
Перевод статьи «Building robust web apps with React: Part 3, testing with Jasmine», Matt Hinchliffe

От переводчика: это перевод третьей части цикла статей «Building robust web apps with React»
Переводы:


Во второй части я покрыл процесс оптимизации моего браузерного приложения Tube Tracker, но каждое вносимое мной изменение до сих пор требует обновление браузера, чтобы проверить, что все работает. Приложение всерьез требует набора тестов, чтобы ускорить процесс разработки и избежать регрессии кода. Как оказалось, это проще сказать, чем сделать, когда начинаешь работать с новой технологией, как React.
Читать дальше →
Всего голосов 7: ↑5 и ↓2 +3
Комментарии 2

Построение надежных веб-приложений на React: Часть 2, оптимизация с Browserify

Время на прочтение 4 мин
Количество просмотров 14K
Перевод статьи «Building robust web apps with React: Part 2, optimising with Browserify», Matt Hinchliffe

От переводчика: это перевод второй части цикла статей «Building robust web apps with React».
Переводы:


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

Код, который в начальном демо был представлен на выполнение браузеру, не проходит ни один базовый тест производительности; скрипты должны быть прекомпилированы, объединены и минифицированы перед отправкой на продакшн.
Читать дальше →
Всего голосов 12: ↑9 и ↓3 +6
Комментарии 1

Построение надежных веб-приложений на React: Часть 1, браузерные прототипы

Время на прочтение 8 мин
Количество просмотров 43K
Перевод статьи «Building robust web apps with React: Part 1, in-browser prototypes», Matt Hinchliffe

От переводчика: это первая статья из цикла «Building robust web apps with React».
Переводы:


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

image
404PageFound содержит до сих пор работающие сайты, созданные еще в 1993 году.
Читать дальше →
Всего голосов 30: ↑28 и ↓2 +26
Комментарии 8

5 практических примеров для изучения фреймворка React

Время на прочтение 10 мин
Количество просмотров 252K
Перевод статьи «5 Practical Examples For Learning The React Framework», Martin Angelov

Вы вероятно слышали о популярном JavaScript фреймворке от Facebook – React. Он используется на многих популярных веб-сайтах, в том числе в Facebook и Instagram. В этой статье вы увидите 5 практических примеров, построенных при помощи React, которые помогут вам начать работать с этим фреймворком.
Читать дальше →
Всего голосов 20: ↑14 и ↓6 +8
Комментарии 46

Pub/Sub JavaScript объект

Время на прочтение 2 мин
Количество просмотров 18K
Перевод статьи «Pub/Sub JavaScript Object», David Walsh

Есть три техники написания AJAX веб-сайтов: делегация событий, управление историей и коммуникация pub/sub на уровне приложения. Я использую все три техники и я хотел бы поделиться с вами самой простой из них: крошечным pub/sub модулем, который я использую на своем веб-сайте.

Если вы не знаете, что такое pub/sub, то суть в том, что вы публикуете в некую тему(topic), и кто угодно может на нее подписываться. Это похоже на то, как работает радио: радиостанция вещает (публикует) и каждый может слушать (подписываться). Это превосходный подход для модульных веб-приложений; это способ глобальной коммуникации без привязки к какому-то конкретному объекту.
Читать дальше →
Всего голосов 21: ↑8 и ↓13 -5
Комментарии 4

JavaScript модули

Время на прочтение 4 мин
Количество просмотров 18K
Перевод статьи «JavaScript Modules» с сайта jsmodules.io.

В новой версии JavaScript появится модульная система, главным образом вдохновленная идеей модулей Node.js.
В этой статье я расскажу, как это будет работать.

Создание модуля


В качестве упражнения, мы построим простой asap модуль, который позволит назначать выполнение действий «как только так сразу» асинхронным образом. В Node.js, вы можете сделать это при помощи process.nextTick, есть и разные подходы, которые работают во многих браузерах. Мы создадим модуль, который будет работать в любом окружении.1
Читать дальше →
Всего голосов 46: ↑41 и ↓5 +36
Комментарии 10

Декларативная привязка данных в WinJS

Время на прочтение 12 мин
Количество просмотров 1.9K
Перевод статьи «Metro: Declarative Data Binding», Stephen Walther

Целью этой статьи является описание того, как декларативная привязка данных работает в библиотеке WinJS. В частности, вы научитесь использовать атрибуты data-win-bind и data-win-bindsource. Также вы научитесь использованию вычисляемых свойств и конвертеров для автоматического форматирования значения свойств при привязке данных.

Пользуясь привязкой данных в WinJS, вы можете использовать шаблон Model-View-ViewModel (MVVM), при построении приложений в стиле Metro на языке JavaScript. Используя шаблон MVVM вы защищаете свой код от обращения в хаос. Шаблон MVVM предоставляет вам стандартный способ организации JavaScript кода, что делает ваше приложение более легко-поддерживаемым.
Читать дальше →
Всего голосов 2: ↑2 и ↓0 +2
Комментарии 1

Кастомные события JavaScript

Время на прочтение 2 мин
Количество просмотров 67K
Перевод статьи «JavaScript CustomEvent», David Walsh

С самого появления JavaScript, события были шлюзом ко взаимодействию пользователя в браузере. События сообщают нам не только о том, что происходит взаимодействие, но также вид взаимодействия, задействованные элементы и предоставляют методы для работы с событием. Создание и инициирование(triggering) кастомных событий всегда являлось более сложной задачей. С использованием JavaScript CustomEvent API, эта сложность может быть устранена. CustomEvent API позволяет разработчикам не только создавать кастомные события, но также инициировать их на элементах DOM, передавая данные по цепочке. Самое главное, что API максимально прост!
Читать дальше →
Всего голосов 37: ↑30 и ↓7 +23
Комментарии 17

Deb.js: самый крохотный отладчик в мире

Время на прочтение 6 мин
Количество просмотров 17K
Перевод статьи «Deb.js: the Tiniest Debugger in the World», Krasimir Tsonev

Мы, как разработчики, пишем код. Но мы не просто пишем код, мы также проверяем, работает ли написанный нами код. Мы тратим много времени и усилий, чтобы удостовериться, что наши программы делают то что долны делать. процесс отладки зачастую бывает болезненным. Особенно, если мы не используем подходящие инструменты. Чтобы справиться с данной проблемой, сегодняшняя заметка представляет Deb.js, маленькую JavaScript библиотеку, которая помогает при отладке в браузере.
Читать дальше →
Всего голосов 62: ↑53 и ↓9 +44
Комментарии 16

30 полезных сервисов для веб-разработчика

Время на прочтение 2 мин
Количество просмотров 163K
Решил собрать сервисы, которые могут быть полезны веб-разработчикам и дизайнерам. Буду рад, если кто-то найдет для себя полезный сервис. Осторожно, под катом куча картинок!
Читать дальше →
Всего голосов 180: ↑156 и ↓24 +132
Комментарии 48

В чем разница между factory и provider в AngularJS (на пальцах)

Время на прочтение 2 мин
Количество просмотров 53K
Как-то давно переводил статью «Понимание типов сервисов в AngularJS (constant, value, factory, service, provider)». На практике, конечно, не всё пригождается, поэтому в рамках понижения порога вхождения в Ангуляр, объясню проще.
Читать дальше →
Всего голосов 45: ↑36 и ↓9 +27
Комментарии 9
1

Информация

В рейтинге
Не участвует
Откуда
Киев, Киевская обл., Украина
Дата рождения
Зарегистрирован
Активность