Обновить
256K+

JavaScript *

Прототипно-ориентированный язык программирования

236,94
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Сжатие данных при передаче от браузера к серверу

Время на прочтение6 мин
Охват и читатели42K
Обрабатываете много данных в браузере?
Хотите отправлять их обратно на сервер?
Да так, чтобы отправлялось побыстрее и помещалось в один http запрос?

В статье я покажу как мы решили эту задачу в новом проекте, используя сжатие и современные возможности javascript.

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

Поиск похожих проектов на GitHub

Время на прочтение3 мин
Охват и читатели19K
Привет, Друзья!

Гитхаб — прекрасный сайт. Но представьте, что вы нашли проект А, и хотите узнать какие еще существуют похожие проекты. Как быть?

Именно с таким вдохновением уселся я разбирать API GitHub'a. Спустя пару недель свободного времени вот что получилось:



Для большинства проектов находится пара действительно интересных предложений. Вот несколько примеров: angular.js, front end bookmarks, three.js

Основная идея для построения рекомендаций — «Разработчики которые поставили звездочку этому проекту, также поставили звездочку...». А детали идеи, ее недостатки и ссылка на код — ниже.

читайте под катом

Организуем выделение текста в textarea

Время на прочтение4 мин
Охват и читатели26K
Добрый день.

В разработке интерфейсов иногда можно встретиться с задачей выделения вводимого пользователем текста в зависимости от определенных условий. (Например, была реализована серверная проверка грамматики, либо необходимо выделять определенным цветом те или иные слова\участки и т.д.)
Однако, элемент textarea не поддерживает html\bb теги. Как один из способов решения — использование contenteditable в элементах div.
В данной небольшой статье я предлагаю более-менее подробно рассмотреть способ выделения текста, используя textarea.
Читать дальше →

Как делать презентацию с помощью веб-технологий?

Время на прочтение8 мин
Охват и читатели90K
Все знают офисных монстров PowerPoint и Keynote, но почему-то мало кто с радостью в них работает. И действительно, что делать, если ты совсем не бухгалтер, а разработчик или просто гик и гораздо комфортнее чувствуешь себя в коде, чем в офисных пакетах? У меня для тебя хорошие новости: презентации уже очень давно можно делать прямо в браузере, а писать с помощью таких простых и знакомых вещей, как HTML, CSS или даже Маркдаун.

К каждому из нас приходит момент, когда нужно донести свои мысли до других. Не просто рассказать анекдотец коллеге, не пробубнить стишок про бурю-мглою, а сообщить что-то принципиально важное, объяснить сложную идею, поделиться опытом. И если самым талантливым из нас достаточно выйти на сцену и просто быть собой, как это делают участники TED, то большинству понадобится опереться на слайды. Свой первый раз у доски с маркерами я забыл напрочь, помню только, что переврал тогда ключевую идею доклада про блочную модель CSS.




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

Мобильное приложение HTML5: ошибка или успех. Попытка №0

Время на прочтение9 мин
Охват и читатели26K
За несколько лет, читая новости и события в мире Web разработки, у меня нарисовалась розовая мечта: написал один раз — работает везде и всегда. При этом очень часто встречаю негативные отзывы о разработке мобильных приложений на HTML5 ( тут и комментарии на статьи 1 и 2 ). Основные доводы бастующих: несоответствие родному интерфейсу, глючность и тормознутость, проблемы с хранением данных и тд и тп. Ни в коем случае не хочу запустить очередные холи вары на эту тему. Но мечта живет и ее можно подтвердить или отвергнуть только после собственного наступления на грабли.
Итак, цель – написать на HTML5 мобильное приложения для сбора заказов торговым агентом в торговых точках. Я сталкивался с данными решениями разных компаний, поэтому знаком с предметной областью, и эта тема идеально подходит для мечты.
Читать дальше →

Флажок «Включить JavaScript» убрали из настроек Firefox 23

Время на прочтение2 мин
Охват и читатели122K


Разработчики Firefox решили убрать из настроек браузера возможность отключения JavaScript. Соответствующее изменение внесено в Firefox 23.

Разумеется, значение параметра "javascript.enabled" можно изменить через настройки about:config. Кроме того, есть расширения к браузеру, которые могут вернуть этот флажок на заметное место. Речь идёт об изменении настроек для «массового пользователя». Логику такого решения объясняет один из дизайнеров Алекс Лими в статье под названием «Флажки, которые убивают ваш продукт» (“Checkboxes that kill your product”).
Читать дальше →

Построение масштабируемых приложений на TypeScript. Часть 2 — События или зачем стоит изобретать собственный велосипед

Время на прочтение8 мин
Охват и читатели15K
В первой части статьи я рассказывал об асинхронной загрузке модулей при помощи Require.js и стандартных языковых средств TypeScript. Неосторожно я раньше времени задел тему организации работы с абстрактными событиями о чем мне очень быстро напомнили в комментариях. В частности, был задан вопрос, зачем придумывать собственный велосипед, если давно существуют проверенный и отлично работающий Backbone.Events и прочие аналоги.

Если вас интересует ответ на этот вопрос, альтернативная реализация на TypeScript и не пугает чтение кода, то прошу под кат.
Читать дальше →

Как использовать Fullscreen API

Время на прочтение3 мин
Охват и читатели97K

В комплекте с HTML5 появилось большое количество нового API. Одним из них является Fullscreen API, которое предоставляет нативный способ для браузера, позволяющий отобразить веб-страницу в полноэкранном режиме для пользователя.
А еще хорошо то, что Fullscreen API является очень простым в использовании.
Читать дальше →

O Backbone.js очень просто и кратко для любителей MVC-фреймворков

Время на прочтение5 мин
Охват и читатели38K
Об использовании JavaScript-фреймворка Backbone.js написано много, но просто и кратко — мало. Я постараюсь исправить этот недостаток и рассказать разработчикам web-приложений максимально просто, доступно и кратко о том, зачем им может пригодится этот фреймворк и как, в общих чертах, он работает. Профессионалы и специалисты по Backbone.js: можете не тратить время, этот рассказ для новичков. Если быть честным, то для чтения этой заметки не обязательно быть Rails-developer'ом, надеюсь, статья пригодится всем, кто работает с любым из МVC-фреймворком.

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

Эволюция гоночных автомобилей на JavaScript

Время на прочтение2 мин
Охват и читатели51K
Возможно, вам доводилось видеть игру Box Car 2D — автогонки машинок, сгенерированных с помощью генетического алгоритма. Игра работает на платформе Flash и использует физический движок box2d. За тем, как из бесформенных уродцев через несколько десятков поколений развиваются вполне приличные гоночные автомобили, можно наблюдать часами. Игра существует уже несколько лет, а её фанаты соревнуются в выведении новых «пород» машинок на разных типах трасс. Недавно в сети появился клон этой игры под названием Genetic Cars, написанный на HTML5 и JavaScript. Хотя в нем ещё многого не хватает (например, редактора машинок), некоторые вещи сделаны гораздо лучше, чем в оригинале. Например, есть возможность наблюдать заезд всех машинок одновременно. И самое главное — можно ковыряться в исходниках!


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

Создаём игру, используя canvas и спрайты

Время на прочтение15 мин
Охват и читатели170K
Веб сейчас везде, и предлагает очень мощную среду для создания и распространения приложений. Вместо цикла: написание кода → компиляция → запуск, просто обновите приложение или даже напиши код «на живую» в браузере. Кроме того, это относительно безболезненно позволяет распространять своё приложение на огромном количестве платформ. Интересно, что в последние несколько лет, разработка игр, используя HTML5, стала реальностью.
Элемент canvas был введен вместе с HTML5 и предоставляет API для работы с ним. API — прост, но если Вы никогда не работали с графикой, Вам потребуется время чтобы привыкнуть. Canvas поддерживается большим количество браузеров, что делает веб — хорошей площадкой для создания игр.
Читать дальше →

Yaxy — proxy-сервер для веб-разработчика

Время на прочтение4 мин
Охват и читатели36K
Yaxy — proxy-сервер, подменяющий различные части HTTP-запросов и ответов на указанные в config-файле значения. Я не буду здесь описывать, как поставить, настроить и запустить сервер, это всё описано в readme репозитория. Здесь я опишу различные случаи, в которых Yaxy очень помогает, а то и вовсе незаменим.

Под катом 9 примеров использования Yaxy

HTML5 круговая панорама на three.js

Время на прочтение4 мин
Охват и читатели44K
    В последнее время все чаще можно наткнуться на круговую панораму в интернете. Взять к примеру тот же сырный домик. Это эффектная штучка возможно вскоре станет обыкновенным делом для сайтов ресторанов, гостиниц, отелей и т. п. Однако, что делать, если существуют проблемы с flash на компьютере? Это реальная ситуация, которая возникла у меня на работе, по причине жесткой политики безопасности IT-отдела.
    В этой небольшой статье я расскажу вам о трудностях, которые встретил на пути создания интерактивной панорамы на WebGL + THREE.js.
Читать дальше →

Ближайшие события

Решаем квартирный вопрос при помощи API Яндекс.Карт

Время на прочтение7 мин
Охват и читатели52K
В жизни даже самого «махрового» IT-шника порой наступает момент, когда нужно не только вылезти из своей берлоги на улицу, но целиком перенести себя на новое место жительства. Обычный человек в таких случаях вооружается Интернетом и прочёсывает сайты недвижимости в поисках подходящих вариантов, которые отмечаются на карте, выписываются или распечатываются, а затем планомерно прозваниваются. Если наступает конец цикла, а задача ещё не выполнена — goto line 1… А на каком-то этапе человеку это надоедает и он идёт в агенство.

Вот и в моей жизни пришло время для переезда, но проведя несколько дней за такой рутинной деятельностью я вспомнил, что незря ношу бороду есть такой чудесный сервис, как Яндекс.Карты, и у них есть не менее чудесное API. Посидев одно утро и скомбинировав всё с простейшим граббером на PHP и XPath я получил такую вот красочную карту, где разными маркерами можно отмечать объекты (квартиры) по любому из критериев, или просто одним взглядом оценить, какие из них ближе к желаемому месту дислокации (в моём случае это было метро):

Снимок экрана

Под катом - PHP, JS, немного HTML и кое-какие полезные ссылки

Что было бы, если бы Хемингуэй писал на JavaScript

Время на прочтение6 мин
Охват и читатели12K
Перевод статьи If Hemingway wrote JavaScript.

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

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

Так что же такого в JavaScript, что так привлекает многих поклонников литературы? У меня есть несколько дурацких теорий, связанных с выразительным потенциалом ограниченного синтаксиса, но об этом как-нибудь в другой раз. Давайте взглянем на великих писателей: что если бы они писали на JavaScript? Как фанат Хемингуэя со стажем, я бы сказал, что он скорее всего возненавидел бы программирование (и программистов). Но я готов поспорить, что среди всеобщего презрения нашлось бы маленькое теплое местечко для JavaScript, потому что это был бы своего рода его язык. Свободный и обманчиво простой на поверхности, которая скрывает сущность и драму под собой.

Родоначальник всех код ревью



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

HTML 5 Notifications API

Время на прочтение3 мин
Охват и читатели120K

Привет, Хабр. В этой статье я расскажу о HTML Notification API.

Какие возможности предоставляет Notification API


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

Поддержка в браузерах


  • Safari 6
  • Chrome 27
  • Firefox 22

Opera 15 beta не работает с Notifications API, несмотря на наличие конструктора Notification.
На мобильных платформах технология не работает.
В движке webkit есть старая нотация в виде webkitNotifications.

Как это работает


Цикл работы следующий:
  1. Получить разрешение на отправку;
  2. Правило фиксируется для сайта;
  3. Отправить уведомление.

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

Исследуем JavaScript Generators

Время на прочтение9 мин
Охват и читатели43K


Когда я начинал писать на node.js, я ненавидел две вещи: все популярные шаблонизаторы и огромное количество callbacks. Я добровольно использовал callbacks, потому что понимал всю силу событийно-ориентированных серверов, но с тех пор в JavaScript появились генераторы, и я с нетерпением жду день, когда они будут имплементированы.

И вот этот день наступает. На сегодня генераторы доступны в V8 и SpiderMonkey, имплементация следует за обновлениями спецификации — это заря новой эры!
Читать дальше →

Node.js vs Java + Rhino + Jetty + FreeMarker

Время на прочтение5 мин
Охват и читатели19K

Хоть Node.js и обзавелся с момента своего появления множеством модулей, он все еще существенно уступает по возможностям мощному набору библиотек Java. Так отчего бы не воспользоваться потенциалом Java для разработки web-приложений на JavaScript? Давайте посмотрим, как можно построить удобный JavaScript MVC framework на Java.

Mozilla Rhino


Прежде всего, начнем с носорогов. Для компиляции/интерпретации JavaScript будем использовать движок Mozilla Rhino, обеспечивающий отличную интеграцию кода ECMAScript в Java-приложения. Начиная с J2SE 6 Rhino включается в JRE в составе Java Scripting API, однако версия в JRE значительно устаревшая и, кроме того, с некоторыми неприятными особенностями реализации от Sun, поэтому лучше воспользоваться свежим build-ом.

Прежде всего, helloworld.js:
print('Hey you!');

Предполагая, что библиотеки Rhino распакованы в ./lib, запускаем пример следующим образом:
java -Djava.ext.dirs=./lib org.mozilla.javascript.tools.shell.Main helloworld.js

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

Photoshop color picker на jQuery

Время на прочтение1 мин
Охват и читатели13K
Недавно мне понадобилось в своём проекте реализовать выбор цвета, встал выбор использовать уже готовое решение или писать самому. Быстрый гуглопоиск не дал ни одной подходящей реализации. Было принято решение написать свой.


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