Обновить
256K+

JavaScript *

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

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

Hyperlapse: сервис для обзора Google Street View

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


По своей сути это time-lapse, с использованием в качестве изображения Google Street View.

Ребята из Tehan+Lax Labs реализовали Hyperlapse.js на основе Google Street View. Так же сделана демка, с использованием собственно Hyperlapse.js, Three.js (r57), модифицированная версия GSVPano.js, и Google Maps API v3.

Исходники доступны на github.

Можете посмотреть сразу работу этой штуки, в Киеве, например.
Читать дальше →

Хипстерский Bootstrap. Вспомни миллениум!

Время на прочтение1 мин
Охват и читатели46K
Сейчас стало модным трендом использовать twitter bootstrap и всевозможные форки с различными темами. Есть даже уже биржи с готовыми шаблонами для сайтов на основе бустрапа. Хипсторы вовсю купаются в тренде закосов под старину. Так вот специально для хипстеров предлагается олдскульная типографика со всеми вытекающими. Вам надоел вебдваноль? Тогда этот форк

divshot.github.io/geo-bootstrap
(ссылка на гитхаб github.com/divshot/geo-bootstrap)

для вас! Превосходная типографика, куча анимации! Долой статичный вэб!

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

Организация хостинга зашифрованного видеоконтента с помощью HTML5

Время на прочтение5 мин
Охват и читатели15K
Не так давно на хабре обсуждалась новая инициатива от W3С — Encrypted Media Extensions или просто EME. Попробуем же разобраться на практике, что нового и интересного нам предлагают.
Читать дальше →

Асинхронные шаблоны в Knockout.JS

Время на прочтение2 мин
Охват и читатели11K
Knockout.JS — хорошая библиотека для создания сложных веб-приложений. Долгое время мне в ней не хватало асинхронного механизма шаблонов. Реализовать его не получалось, пока я не узнал что window.setTimeout вызывает свой callback не раньше окончания работы текущего контекста. Т.е. в коде
setTimeout("console.log(window.Value)",0),(function (){while (Math.random() < 0.9999999);window.Value = 1;})()
вывод на консоль произойдет только после завершения долгой функции случайного поиска числа очень близкого к единице.
Статья для разбирающихся в механизме биндинга knockout.js и умеющих писать customBindings.
Реализация

Асинхронные API и объект Deferred в деталях

Время на прочтение11 мин
Охват и читатели23K
Большинство современных языков программирования позволяют использовать асинхронно выполняемые блоки кода. Вместе с гибкостью, получаемой при использовании асинхронного подхода, рискнувший его применить также получает более сложный для понимания и поддержки код. Однако, любое усложнение, с которым сталкиваются программисты, как правило, находит практическое решение в виде нового подхода или повышения уровня абстракции. В случае асинхронного программирования таким средством служит объект типа отложенный результат или deferred (англ. deferred — отложенный, отсроченный).

В статье будет рассказано о базовых подходах к возврату асинхронных результатов, функциях обратного вызова, объектах deferred и их возможностях. Будут приведены примеры на языке JavaScript, а также произведён разбор типового объекта deferred. Статья будет полезна программистам, начинающим постигать асинхронное программирование, а также знакомым с ним, но не владеющим объектом deferred.
Окунуться в мир асинхронного программирования

Firefox: размер файла по ссылке, или через тернии к форку

Время на прочтение9 мин
Охват и читатели11K
Скриншот расширения Link Properties Plus
Вашему вниманию представляется небольшая история появления расширения Link Properties Plus и описание того, как работает его основная часть.
Расширение позволяет узнать размер, дату последнего изменения и некоторые другие свойства файла по ссылке (в том числе прямую ссылку после всех перенаправлений) без скачивания всего файла целиком. Если, конечно, все это сообщает сервер.
Читать дальше →

Счётчик индивидуального отсчёта времени на чистом JavaScript

Время на прочтение3 мин
Охват и читатели13K
Иногда нужно реализовать отсчет времени для каждого посетителя в отдельности, на одностраничниках либо сайтах — без установки плагинов и подключения библиотек (например, jQuery). Для решения этой задачи я разработал счётчик на чистом JavaScript.
Данный счетчик работает следующим образом:
  1. Активируется при загрузке страницы.
  2. Проверяет наличие записи окончания отсчета в Cookie браузера посетителя.
  3. Если запись есть — то считывает её. Если записи нету — то берёт время указанное в настройках скрипта, и делает запись в Cookie браузера посетителя.
  4. Производятся преобразования времени в формат для более гибкой настройки оформления счетчика.
  5. Выводится счетчик либо надпись о завершении отсчета (если время закончилось) в место вызова скрипта.
Читать дальше →

Связные списки в функциональном стиле

Время на прочтение2 мин
Охват и читатели20K
Рассмотрим вариант реализации связных списков через замыкания.

Для обозначения списков будем использовать нотацию, похожую на Haskell: x:xs, где x — начало списка (head), xs — продолжение (tail).



В качестве языка реализации я выбрал JavaScript.

Конструируем список

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

Tree View с «CRUD операциями», «drag and drop (DnD)» и «отложенной загрузкой» с использованием Dojo Tree, Entity Framework, SQL Server и ASP.NET MVC

Время на прочтение11 мин
Охват и читатели13K
image

Введение

Dojo Toolkit это модульная JavaScript библиотека с открытым исходным кодом, предназначенная для облегчения быстрой разработки кросс-платформенных JavaScript/Ajax-ориентированных приложений и веб-сайтов, которая предоставляет некоторые действительно мощные возможности для пользовательского интерфейса. Компонент Dojo Tree обеспечивает полное, привычное, интуитивно понятное, развертываемое представление иерархических данных. Этот компонент поддерживает отложенную загрузку веток, что делает его хорошо масштабируемым для больших объемов данных. Dojo Tree отличный виджет для представления данных с отношениями «предок-потомок».

Эта статья показывает процесс создания дерева, поддерживающего «CRUD операции», «drag and drop (DnD)» и «отложенную загрузку». Чтобы создать такое дерево мы будем использовать Dojo Tree, Entity Framework, SQL Server и Asp .Net MVC.
Читать дальше →

Обзор ECMAScript 6, следующей версии JavaScript

Время на прочтение6 мин
Охват и читатели100K
Для начала, ликбез и несколько фактов:
  • ECMAScript — это официальный стандарт языка JavaScript (Слово JavaScript не могло быть использовано, потому что слово Java являлось торговой маркой компании Sun) Т.е. JavaScript — это имплементация стандарта ECMAScript.
  • TC39 — комитет, развивающий стандарт ECMAScript и принимающий решения по включению фич в него.
  • ECMAScript стандартов много. Самый популярный из них — ECMA-262.
  • ECMAScript 5 — последняя редакция стандарта ECMA-262 (утвержден в 2009 году).
  • Предыдущие версии стандарта ECMA-262 были (совсем старые не упоминаю):
    • ECMAScript 3 — поддерживается большинством браузеров (утвержден в 1999 году).
    • ECMAScript 4 — не принят в виду слишком радикальных изменений в стандарте. Позднее в июле 2008 году в урезанном варианте (но все же намного богаче, чем ECMAScript 3) вылился в новый проект ECMAScript Harmony.

  • ECMAScript 6 (кодовое имя ECMAScript.next) должен утвердиться до конца 2013 года.


Итак, что же нас ждет в новой версии JavaScript?

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

Firefox: приватные вкладки, разные API и расширения, не требующие перезапуска

Время на прочтение12 мин
Охват и читатели20K
Расширение Private Tab
Речь пойдет о моем расширении Private Tab для Firefox и SeaMonkey: некоторые подробности реализации – и конкретно этого, и расширений, не требующих перезапуска (aka restartless), вообще.

Расширение добавляет приватные вкладки, для которых не будет сохраняться история и будет использоваться отдельный набор cookies.

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

Использование паттернов проектирования в javaScript: Порождающие паттерны

Время на прочтение5 мин
Охват и читатели77K
Привет, хабр!
С удивлением обнаружил отсутствие на хабре развернутой статьи о сабже, что немедленно сподвигло меня исправить эту вопиющую несправедливость.

В условиях когда клиентская часть веб-приложений становится все более толстой, бизнес-логика неумолимо переползает на клиент, а на суверенитет серверных технологий все более смело посягает node.js нельзя не задуматься о приемах проектирования архитектуры на javaScript. И в этом деле нам несомненно должны помочь паттерны проектирования — шаблонные приемы решения часто встречающихся задач. Паттерны помогают построить архитектуру, которая потребует от вас наименьших усилий при необходимости внести изменения. Но не стоит воспринимать их как панацею, т.е., грубо говоря, если качество кода «не фонтан», он кишит хардкодом и жесткой связью между логически независимыми модулями, то никакие паттерны его не спасут. Но если стоит задача спроектировать масштабируемую архитектуру, то паттерны могут стать хорошим подспорьем.
Но впрочем эта статья не о паттернах проектирования как таковых, а о их применении в javaScript. В первой части этой статьи я напишу о применении порождающих паттернах.
Читать дальше →

24 совета javascript-разработчику

Время на прочтение9 мин
Охват и читатели86K
От переводчика: Не смотря на то что оригинал данной статьи датирован январем 2009 года, она не потеряла актуальности и теперь. Я надеюсь что даже те, кто используют JavaScript не первый год, почерпнут для себя что-то полезное.

1. Используйте === вместо ==


В JavaScript существует два разных типа операций сравния: === / !== и == / !=. Считается хорошим тоном всегда использовать первую пару для сравнения.
“Если два операнда одного типа и значения, то === вернет true, а !== false”
JavaScript: The Good Parts
Читать дальше →

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

Nodecopter — управление квадрокоптерами на Javascript

Время на прочтение2 мин
Охват и читатели19K
Уже давно существует целое сообщество любителей-разработчиков, которые занимаются программированием летающих роботов. Они устраивают периодические конференции и сходки. Но в чем же особенность данного сообщества, спросите Вы? дело в том, что программирование квадрокоптеров осуществляется на Javascript на платформе NodeJS. Среди разработчиков большой популярностью пользуется всем уже известный ArDrone Parrot, который уже не раз освещался на страницах Хабра.



Подробности под катом.
Читать дальше →

4-числовая система нумерации версий с датой и минорами

Время на прочтение8 мин
Охват и читатели9.8K
В расширениях Хрома принято указывать версию скрипта в виде не более чем 4 чисел, разделённых точками, и величиной не более 32767 каждое и не начинающихся с цифры 0. Этого более чем достаточно, если в номер версии включены обычные данные: версия, подверсия, сборка. Если в версию хотим поместить дату в виде 3 чисел, то в наиболее удобной для чтения записи (версия.год.месяц.день) числа года, месяца и дня занимают 3 места из 4. На версию остаётся первое число (как более приоритетное перед датой), а на подверсию и минор ничего не остаётся. Задача: как расположить минорную версию, чтобы уложиться в формат, чтобы дата была читаемой, а версия с минором при сравнении 2 строк занимала правильное место в ряду версий? Кроме того, нужна процедура выделения даты и версии с минором из общей строки.
как это сделать с регекспами и скриптами

Пишем сложное приложение на knockout.js — 2

Время на прочтение12 мин
Охват и читатели17K
Я тут пишу одну эпическую мегахрень, которую хочу пропиарить на хабре. Эта штука типа распределенной социальной сети. Там есть ядра с api, которые общаются по некоторому стандарту и фронтенд. Особенностью сети является то, фронтенд живет «отдельно» от ядра, то есть сеть не имеет своего домена — берем html, ставим ссылку на любое ядро и получаем сеть, которая живет поверх сайта. Внешне это похоже на социальные плагины фейсбука — комментарии и лайки оттуда можно поставить на любую свою страницу — только вместо тегов fb-like используются мощные биндинги knockout.js + пользователь не ограничивается огрызками из комментариев и лайков — на сайт можно импортировать практически любой блок из сети и сделать почти любое действие. Фронтенд написан на тех же технологиях, которые юзер может использовать и дописывать на своей странице.

В результате образовалась техника, которая может быть интересна фронтендщику. Эту технику хочу разобрать в этой статье.

Расскажу про систему, которая встраивается на html-страницу через биндинги нокаута. Код живет в подключаемых виджетах, которые состоят из html-шаблонов с knockout-обвязкой. Виджеты могут быть вложены друг в друга. Все это использует require.js и живет в amd форме. Зависимости от внешней страницы сведены к минимуму, все библиотеки (jquery, knockout и плагины) используются только свои в локальном пространстве с namespace-ами. Для сборки кода используется r.js. Еще как крутые перцы напишем на базе бутстраповского диалога полноценный оконный менеджер — с нокаутом это как два пальца об асфальт…
Читать дальше →

50 потрясающих плагинов jQuery

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

Кто-то вчера шутил, а кто-то занимался реально полезными вещами. Как например болгарский разработчик Мартин Ангелов, опубликовавший впечатляющий обзор JS библиотек:
http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/
Настоятельно рекомендуется к обозрению.
PS Куда-то пропал тип топика «Ссылка» :(

Первоапрельские CSS-сниппеты

Время на прочтение3 мин
Охват и читатели26K
Предлагается вот такой вот комплект CSS снипетов, которыми можно раскарсить первое апреля.

/*
  Turn every website upside down
*/
body {
  /*-webkit-transform: rotate(180deg);
  transform: rotate(180deg);*/
}

/*
  blur every website for a split second every 30 seconds
*/
body {
  /*-webkit-animation: blur 30s infinite;*/
}

/*
  Spin every Website
*/ 
body {
  /*-webkit-animation: spin 5s linear infinite;
    animation: spin 5s linear infinite;*/
}

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

Нельзя просто так взять и обратиться к фоновой странице

Время на прочтение9 мин
Охват и читатели46K
Всё дело — в политике безопасности, аналогичной кроссдоменной. Обращение к страницам других табов или к фоновой странице расширения сознательно ограничено, потому что они считаются страницами других доменов, имеют запреты на прямой доступ к скриптовому окружению, аналогично чужим окнам и фреймам. Механизм сообщений «спасает» как при кроссдоменном доступе между фреймами, как и в доступе к страницам расширений (фоновая, настройки, попап, ...).

В расширении браузера Google Chrome (и Chromium) наиболее важна по функциям — фоновая страница. Она имеет специальный URL вида chrome-extension://ciegcibjokpkcklhgbpnmnikpkmkhbjk/, где длинное имя домена — случайное имя, создаваемое в недрах браузера, которым именуется также каталог расширения где-то в служебной папке ОС. Из контентного скрипта (аналогичного юзерскриптам, исполняемым на странице браузера) можно получить доступ к файлам и картинкам расширения. Но нельзя выполнить много функций, путь к которым лежит через фоновую страницу: устроить хранилище, относящееся к группе реальных доменных имён; хранить настройки расширения, общие для всего расширения. Нужно лишь добраться в Мордор к фоновой странице. Однако, нельзя просто так, по URL, это сделать.
Как же добраться к фоновой странице?

Игры с физикой благодаря HTML5 и JS. Программист симулирует движение ткани

Время на прочтение1 мин
Охват и читатели75K
Программист, именующий себя Stuffit, опубликовал исходный код на портале Codepen. Код симулирует физику ткани. Использует HTML5, Canvas, CSS и JavaScript, приблизительно 300 строчек кода. Ткань без текстуры, простая сетка, но демонстрационным целям служит отлично.



Есть возможность испытать код прямо на Codepen
Если потянуть мышкой очень сильно, полотно может и порваться. Впечатляет простота кода, которому для работы нужен только браузер. Дает представление о том, в каком направлении будут развиваться веб-игры. Staffit уже создал несколько подобных игрушек.

Перевод с чешского источника