JavaScript *

Лень – двигатель прогресса. Люди постоянно создают вещи, призванные облегчить их нелегкую долю. Именно лень позволила тряпке и швабре превратиться в моющий робот-пылесос. Похожие процессы происходят и в сфере компьютерных технологий. Вместо того, чтобы довольствоваться программированием в машинных кодах, общаясь с процессором через интерфейс перфокарт, люди стали придумывать всякие клавиатуры, мышки и мониторы, а так же языки программирования. Последние становились все более и более высокоуровневыми. В результате имеем то, что иммем — далеко неполный список ЯП. Насладившись всем великолепием этого многообразия, программисты внезапно стали осознавать, что теперь им лень учить все эти языки, и они стали мечтать о единообразии на всех платформах. Так родилась JAVA. Те, кому было лень ее учить, продолжали мечтать и писать на JavaScript. Их мечты были услышаны, и с другой стороны появился node.js. А что же теперь делать нам? — подумали PHP программисты, завистливо поглядывая на чужое счастье. Засучив рукава, они принялись напряженно работать, так появился проект php.js

Привет хабравчане!
Увидев мой проект в блоге компании Zfort Group (тут) я решил поделится с вами обзором про проект и его реализацией.

Идея: быстро создать базовый шаблон для дополнений хрома, включая конфиг в manifest.json.
Extensionizr.com построен как веб-приложение, и на выходе генерирует zip архив.
Всё происходит на стороне клиента с помощью Javascript, включая архивацию.

Веб-сервисы постепенно начинают использовать новый сервис Dropbox Chooser, упрощающий интеграцию с Dropbox, и дополняющий уже существующий Dropbox API. В рамках нового сервиса разработчикам предлагается небольшой JavaScript-компонент, который можно встраивать в приложения, и который автоматически публикует или прикрепляет документы.

Добрый день! Я продолжу писать статьи о том, что пришлось писать на Backbone.js в ходе работе и с чем вы можете столкнуться. Сегодня речь пойдет про асинхронную загрузку данных, а точнее данных, которые часто нам нужны на сайте.

     Вдохновившись вот этой статьёй о Socket-соединениях в Веб-приложениях, решил сделать более-менее универсальный модуль с удобным интерфейсом, реализующий эту технологию.
     В этой статье под словом «сокет» имеется ввиду програмный интерфейс, который обеспечивает обмен данными между серверным и клиентским скриптами, с возможностью клиентского постоянно «слушать порт». Другими словами, как только что-то произошло на сервере, он может тут же сообщить об этом клиенту, и наоборот. Конечно же, в javascript нет возможности «слушать порты» и создавать полноценные сокеты, но зато у нас есть спички, изолента и пластилин, из которых можно смастерить какое-то подобие.
     Сначала я опишу примерный принцип действия этой системы, а затем, по традиции, приведу код примитивного чата построенного на её основе, с, конечно же, ссылкой. Хотелось бы увидеть своими глазами хабраэффект в действии. Ещё в конце будет ссылка на репозиторий с исходниками.

Добрый день! Недавно писал пагинацию для Backbone.js, вот хотел бы поделиться с Вами, может кому-то пригодится.

В этом году на конференции Full Frontal, оффлайн-приложения были популярной темой. Пол Кинлан сделал отличный доклад «Строим веб-приложения будущего. Завтра, сегодня и вчера» (вот его слайды), в котором он сравнивал ощущения пользователей от работы с 50 популярными мобильными приложениями для iOS и Android с ощущениями от веб-сайтов и приложений.

Стоит ли говорить, что нативные приложения зарекомендовали себя с гораздо лучшей стороны, когда соединение с интернетом было недоступно. Оффлайн-режим — очень важная вещь, и стоит думать о нем с самого начала работы над приложением, а не рассчитывать добавить его потом, когда будет время. Работая над сайтом Rareloop, мы с первого дня помнили об оффлайн-режиме. Мобильные клиенты FormAgent тоже были изначально спроектированы для работы в оффлайне, чтобы пользователь мог продолжать работу в отсутствие интернета и прозрачно синхронизироваться, когда связь появляется. В этой статье я описываю принципы и практики, которые, на мой взгляд, очень помогают разрабатывать такие приложения.

Обратите внимание! Я не рассматриваю вопросы кэширования ресурсов приложения — вы можете использовать App Cache или гибридное решение (вроде PhoneGap), это не принципиально [От переводчика: на Хабре есть подробная статья про особенности работы с Application Cache API]. Это руководство посвящено скорее тому, как спроектировать архитектуру веб-приложения для работы в оффлайн-режиме, а не тому, какие механизмы использовать для его реализации.

Джастин Уиндл, программист и дизайнер из Google Creative Lab, опубликовал на Codepen.io интересное демо, показывающее примеры использования тригонометрических функций для задания динамики анимации (easing), которая выглядит естественно и правдоподобно. Демо написано с использованием легковесного анимационного фреймворка Sketch.js, написанного Уиндлом.

На сайте Джастина Уиндла можно найти ещё несколько интересных и полезных примеров креативной визуализации, например анимированное меню на CSS3 Makisu, демонстрацию работы его библиотеки Coffee Physics и многое другое.

Как часто говорят: «Лень — двигатель прогресса». Вот так однажды, мне стало лень читать все комментарии к статьям, скроллить десятки, а порой и сотни комментариев. Я решил как-то упростить этот процесс — создал userscript (вот тут неплохая статья, которая помогла понять как делать этот самый скрипт), который отфильтрует комментарии по рейтингу.

Здравствуйте. Получил такое задание, в принципе все ясно из названия темы.
О том как я этого достиг, шаг за шагом, будет следующий пост.
Если что не так — критика приветствуется, это было так сказать исследовательское задание, и перед началом работы над ним у меня не было понятия о данном инструменте, зачем он и так д…
В процессе исследования многие вопросы прояснились.

При разработке сайта была поставлена не совсем стандартная задача — копировать по клику на текстовое поле его содержимое. Поиск подсказал что кроссбраузерно и с наименьшими потерями времени копирование в буфер обмена при помощи javascript возможен с применением плагинов jQuery использующих flash. Может это и не самое правильное решение, но остановились на нем. Я хочу рассказать об опыте использования плагина zClip, его настройке, попавшимися и решенными проблемами.

О этом плагине уже была статья на Хабре — Копируем в буфер обмена в FireFox 3.5 и IE8, но она местами устарела. Опытные разработчики не найдут здесь чего-то нового и очень уж интересного, остальных прошу под кат.

Прошло уже почти два месяца как Yandex порадовал некоторых пользователей новым продуктом — Yandex Браузером. Несмотря на невероятную динамику развития продуктов в этой области (Chrome и Firefox), Яндексу удалось привнести в свой браузер ряд новых идей.

Из всех особенностей этого браузера больше всего меня зацепило их дизайнерское решение относительно изображений сайтов в «быстрых закладках» (Speed dial). Люди любят глазами и поэтому приятно видеть у себя в новом табе не пустую белую страницу, а красочные картинки. Беда только в том, что лично я, чаще всего, смотрю на подпись под этой картинкой или же на favicon, так как по скриншоту сайта бывает очень сложно его узнать. Эту проблему дизайнеры яндекса, на мой взгляд, решили очень элегантно. В данном посте мы посмотрим, как реализовать эту идею на клиентской стороне.

Здравствуйте, уважаемые Хаброюзеры! В своём дебютном посте, я хотел бы рассказать о такой замечательной и интересной штуке, как HTML5 Canvas, а точнее о функциях контекста, которые по моему мнению, освещены меньше всего — transform и rotate.
Когда я начинал свои эксперименты и копания в области новомодного канваса, в рунете была всего одна статья внятно объясняющая, как нужно вертеть рисунки на холсте. Более-менее понять смысл загадочного Java Script'a я смог только «полопатив» исходники Tululoo HTML5 Game Maker.

На сайте tympanus.net представлен новый экспериментальный jQuery плагин для создания галереи, который можно использовать для решения разных задач, например, простой показ изображении, сгруппированных определенным образом или отображение целых альбомов пользователей с фотографиями без перезагрузки страницы. Разумеется, галерея адаптивная, что позволяет удобно использовать ее как на компьютерах с большим экраном так и на мобильных устройствах.

В один прекрасный момент передо мной встала задача создать API для работы с файлами на клиенте и их загрузки на сервер.

Я работаю в Почте Mail.Ru, и моей прямой обязанностью является работа с JavaScript во всех его проявлениях. Прикрепление файлов к письму — одна из основных функций любой почты. Мы тут не исключение: у нас уже был Flash-загрузчик, который вполне исправно работал и долгое время нас устраивал. Однако у него был ряд недостатков. Вся верстка, графика, бизнес-логика, и даже локализация были зашиты в нем, в результате чего решение было громоздким, а внести правки мог только Flash-разработчик. В какой-то момент мы поняли, что нам необходим новый механизм. О том, как его создать, пойдет речь в этой статье.

Мне очень нравится JavaScript и я считаю его мощным и удобным. Но для большинства начинающих JS-программистов, много проблем создаёт недопонимание аспектов языка. Часто конструкции языка ведут себя «нелогично». В данной статье я хочу привести примеры «граблей», на которые я наступил; объяснить поведение языка и дать пару советов.

SteelToe — небольшой javascript сниппет, призванный решить проблему доступа к неопределенным свойствам объекта. Это особенно важно при обращении ко вложенным свойствам. В нем также реализована возможность автовивификации, что порядком упрощает создание нужных свойств. В общем — довольно полезный сахар в OOP.

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

Примечательно, что данную библиотеку разрабатывают авторы того самого стандарта, который и описывает особенности SIP протокола при работе поверх WebSocket. Помимо этого разработчики указывают следующие достоинства:

• легковесна, ~140КB
• простой и мощный API
• совместима с популярными SIP серверами
• аудио-видео вызовы; мгновенные сообщения
• статус пользователей (эта функция уникальна, пока отсутствует в других библиотеках)

От себя к преимуществам добавлю: компетентность и отзывчивость авторов, багрепорты закрывают очень быстро.

Под катом длинное подробное видео с пошаговой инструкцией в первой половине для тех кто захочет попробовать самостоятельно, и демонстрацией работы во второй половине (c 3:10). Кстати, в свежих версиях Chrome, WebRTC — протокол для обмена аудио-видео данными, доступен и включен по умолчанию.

 

Добрый день, любители ездить на чужих велосипедах, у которых нет сиденья, педали надо крутить руками, а тормоза появятся через пару релизов.

Задача:
Создать расширение для браузера Chrome, которое сможет в любой из открытых табов внедрить необходимый контент и небольшой управляющий модуль для него, и если этот контент внедрен в несколько разных табов, то управляющие модули должны иметь возможность между собой общаться.

Доступные инструменты:
Content Scripts, Background Pages, Message Passing

Алгоритм решения:
Создать общий управляющий модуль который будет создавать модули потомки и управлять ими, наладить с каждым из них механизм обратной связи.