Обновить
256K+

JavaScript *

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

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

Универсальный код C# под .NET и JavaScript

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

Введение


Приветствую вас, хабравчане. В данном топике я хотел бы осветить подробности разработки на C# под разнородные целевые платформы, в первую очередь такие как .NET и браузер (JavaScript). В качестве примера желающие могут изучить веб-сервис по обработке фотографий gfranq.com, в котором реализована клиентская и серверная обработка фотографий с помощью фильтров, а также функциональность коллажей на основе материала, описанного в данной статье.

Так как я не умею подбирать картинки для привлечения внимания, то она будет по теме:


Технические подробности под катом

AngularJS для привыкших к jQuery

Время на прочтение4 мин
Охват и читатели165K
AngularJS — прекрасный фреймворк для построения веб-приложений. У него замечательная документация, снабженная примерами. В обучающих «пробных» приложениях (вроде TodoMVC Project) он очень достойно показывает себя среди остальных прочих фреймворков. По нему есть отличные презентации и скринкасты.

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

Редактор цветовых схем для SublimeText 2

Время на прочтение1 мин
Охват и читатели18K
В середине октября 2012 года Allen Bargi (aziz) обратил своё внимание на Angular.js и работу новых HTML5 API-интерфейсов для работы с файлами в Chrome. Эксперимент затянулся и разросся в замечательный проект — TMTheme Editor. Являясь on-line приложением, редактор TMTheme позволяет создавать и редактировать визуальные темы для популярного нынче SublimeText, так же поддерживается совместимый по темам Textmate и другие редакторы.

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

Динамический шаблон Wordpress

Время на прочтение5 мин
Охват и читатели15K
При разработке одного из проектов столкнулся с необходимостью настроить вывод постов в двух вариантах:
  • Расширенный — Название, крупное изображение, анонс, некоторые ссылки
  • Компактный — Название, маленькое изображение



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

Общий алгоритм следующий:
  1. При загрузке страницы проверяется состояние параметра style в базе
  2. В зависимости от параметра посты выводятся в том или ином формате
  3. При нажатии на флажок переключения вида запускается функция getPage
  4. Функция getPage принимает значение переключателя и отправляет данные на обработку и ОЖИДАЕТ ЗАВЕРШЕНИЯ ОБРАБОТКИ
  5. Файл style_updater.php принимает данные и обновляет Базу данных.
  6. После этого функция getPage перезагрузит страницу


Подробности

Простой упаковщик CommonJS модулей для использования в браузере — clinch

Время на прочтение2 мин
Охват и читатели4.4K
Если вы пользуетесь stitch и вам его маловато, а browserify показался сложноват по настройкам — попробуйте clinch.

Что в коробке:
  • простой API
  • поддержка .js, .json, .coffee, .eco, .jade
  • develop-mode ready — легко встроить в express, умный кеш с инвалидацией
  • малый overhead на bundle ~ 40 SLOC
  • простой механизм подмены модулей и имитации глобальных объектов

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

Online-трансляция HTML5 Camp — 15 марта с 10:00

Время на прочтение1 мин
Охват и читатели7.9K
Друзья, рады напомнить (а кому-то сообщить), что завтра с 10:00 (мск) вас будет ждать online-трансляция третьего HTML5 Camp.



В рамках конференции у нас будет три трека:
  • Бизнес-дискуссии + технологические сессии
  • Технологические сессии по веб-разработке
  • Технологические сессии по разработке для Windows 8 на HTML/JS.

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

Вертикальная черта, затем ноль

Время на прочтение3 мин
Охват и читатели41K
Заголовок, выраженный словами, понадобился только для поисковой находимости. Но речь пойдёт о роли символьной конструкции «|0» в JavaScript.

Впервые на неё я обратил внимание, когда переводил FAQ про asm.js и читал спецификации этого подмножества языка JavaScript. Там «|0» служит, например, для указания типа значения, возвращаемого из функции: увидели «|0» после значения — значит, перед нами знаковое целое.

Вдругорядь я заметил конструкцию «|0» в примере кода на Гитхабе, где происходило преобразование к целому числу результата деления на 1024².

Тогда глаза мои открылись, и я увидел прекрасные возможности:

( 3|0 ) === 3;       // целые числа не изменяет
( 3.3|0 ) === 3;     // у дробных чисел отбрасывает дробную часть
( 3.8|0 ) === 3;     // не округляет, а именно отбрасывает дробную часть
( -3.3|0 ) === -3;   // в том числе и у отрицательных дробных чисел
( -3.8|0 ) === -3;   // у которых Math.floor(-3.3) == Math.floor(-3.8) == -4
( "3"|0 ) === 3;     // строки с числами преобразуются к целым числам
( "3.8"|0 ) === 3;   // при этом опять же отбрасывается дробная часть
( "-3.8"|0 ) === -3; // в том числе и у отрицательных дробных чисел
( NaN|0 ) === 0;     // NaN приводится к нулю
( Infinity|0 ) === 0;     // приведение к нулю происходит и с бесконечностью,
( -Infinity|0 ) === 0;    // и с минус бесконечностью,
( null|0 ) === 0;         // и с null,
( (void 0)|0 ) === 0;     // и с undefined,
( []|0 ) === 0;           // и с пустым массивом,
( [3]|0 ) === 3;          // но массив с одним числом приводится к числу,
( [-3.8]|0 ) === -3;      // в том числе с отбрасыванием дробной части,
( [" -3.8 "]|0 ) === -3;  // и в том числе с извлечением чисел из строк,
( [-3.8, 22]|0 ) === 0    // но массив с несколькими числами вновь зануляется
( {}|0 ) === 0;                // к нулю также приводится пустой объект
( {'2':'3'}|0 ) === 0;         // или не пустой
( (function(){})|0 ) === 0;    // к нулю также приводится пустая функция
( (function(){ return 3;})|0 ) === 0;    // или не пустая

Итак, во-первых, перед нами удобное средство отбрасывания дробной части.

  • По отношению к отрицательным числам оно полезно тем, что дробное число превращается не в ближайшее меньшее целое число (возрастая по модулю), как это случилось бы после «Math.floor()», а в ближайшее меньшее по модулю целое число (возрастая по значению). Нередко именно это и требуется.
     
  • По отношению к положительным числам оно полезно уж тем одним, что конструкция «|0» более чем на порядок короче по сравнению с «Math.floor()». Поэтому она может и должна вызывать у разработчиков привыкание не меньшее, чем та принятая в jQuery запись «$()», о которой я говорил четыре дня назад, что с неё никто добровольно не перейдёт обратно на «document.getElementsByClassName()», например.

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

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

Использование Loader в QML

Время на прочтение6 мин
Охват и читатели41K
Добрый день! В этой статье я расскажу про такой компонент из QML как Loader.

Он позволяет создать контейнер, в который затем можно вложить необходимый qml-элемент, использовать разные элементы в зависимости от состояния программы, а также сделать редко используемые части загружаемыми по требованию и сэкономить ресурсы. Loader является контейнером для QML-компонента и сам по себе не отображается.

Я рассматриваю компонент из QtQuick 2.0 которая входит в Qt пятой версии. В более ранней версии этот компонент также есть, но функционал немного меньше.

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

Pilot: многофункциональный JavaScript роутер

Время на прочтение9 мин
Охват и читатели37K
С каждым днем сайты становятся все сложнее и динамичнее. Уже недостаточно просто «оживить» интерфейс — все чаще требуется создать полноценное одностраничное приложение. Ярким примером такого приложения является любая web-почта (например, Mail.Ru), где переходы по ссылкам приводят не к перезагрузке страницы, а только к смене представления. А это значит, что задача получения данных и их отображения в зависимости от маршрута, которая всегда была прерогативой сервера, ложится на клиент. Обычно эту проблему решают с помощью простенького роутера, на основе регулярных выражений, и дальше не развивают, в то время как на back-end этой теме уделяют гораздо больше внимания. В этой статье я постараюсь восполнить этот пробел.

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

Запись и модификация звука в браузере

Время на прочтение6 мин
Охват и читатели24K
Недавно решил for fun сделать сайт, на котором будет происходить запись и модификация звука. А ещё хотелось какой-нибудь соответствующей анимации. Как работать со звуком на С++ или C# я знаю, опыт есть, однако ни разу не делал этого в браузере.
Немного погуглив, выяснилось что не так уж и много возможностей записать звук. Самая широко распространенная — использование Flash. У меня нет опыта во Flash, к тому же весь UI и функционал я хотел сделать на JavaScript + HTML, поэтому нужно было как-то обойтись без Flash или с минимальным его участием. В итоге, я нашел jQuery плагин jRecorder для записи звука, который внутри себя в итоге использует Flash, а точнее ActionScript код. Но так как работа со звуком была обёрнута в JavaScript, то такой вариант мне подошел.

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

Карты в браузере без сети: open source наносит ответный удар

Время на прочтение14 мин
Охват и читатели43K
Как-то давно я писал о том как можно в вебе использовать карты без сети и пытался сделать это с помощью гугло карт. К сожалению условия использования запрещали модифицировать ресурсы, а написанный мною код работал только с localStorage, поэтому я решил перейти на светлую сторону силы, где код открыт, прост и понятен.
Читать дальше →

Отладка Node.js в Visual Studio

Время на прочтение4 мин
Охват и читатели25K
Мне нравится Node.js, но совсем недавно я начал использовать её на серьёзных проектах. При этом я продолжил пользоваться моей любимой средой разработки*. И если для простых скриптов достаточно просто редактора, то для серьёзной разработки нужны серьёзные инструменты, в частности, дебаггер. Ничего готового для студии найти не удалось, поэтому я взял и за пару выходных сделал его сам:
image
Читать дальше →

Samsung SmartTV AppsFramework глас народа

Время на прочтение1 мин
Охват и читатели6.4K
Всем привет. Я являюсь инженером Samsung и одним из разработчиков фреймворка для приложений Samsung SmartTV. Сейчас в команде идет активное обсуждение новых функций и доработок очередной версии. На данный момент есть возможность повлиять на ход разработки Т.к. фреймворк продукт для программистов, то я бы хотел услышать ваши предложения и замечания. Заранее спасибо.

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

Tern — умное редактирование JavaScript с выводом типов

Время на прочтение1 мин
Охват и читатели8K
Разработчик замечательного in-browser-редактора CodeMirror Marijn Haverbeke написал движок вывода типов Tern для JavaScript, предназначенный для интеграции с редакторами кода. Tern производит анализ исходных текстов на лету по мере их изменения, используя для этого алгоритм (pdf), применяемый в движке Mozilla SpiderMonkey.

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

Вышел WebStorm 6 с поддержкой новейших технологий веб-разработки

Время на прочтение3 мин
Охват и читатели25K
Команда разработчиков WebStorm постаралась в очередном выпуске IDE собрать самые востребованные возможности для самых свежих технологий. Что появилось нового?

Поддержка TypeScript, CoffeeScript, Dart, LESS и Sass


В новой версии Webstorm появилась базовая поддержка TypeScript: подсветка кода, проверка соответствия типов, навигация по коду, обнаружение ошибок по ходу редактирования и автодополнение. Поддержка TypeScript, CoffeeScript и Dart включает компиляцию в Javascript на всех платформах, поддерживаемых в WebStorm. Аналогично поддерживаются LESS и Sass.

В основном релизе IDE теперь есть полноценная отладка CoffeeScript, TypeScript и Dart с использованием source maps. Нам особенно приятно порадовать коллегу pietrovich, который поднимал этот вопрос в ветке обсуждения в одном из прошлых постов.
А что еще?

Очень маленький фреймверк или как написать собственный Angularjs в 200 строк

Время на прочтение5 мин
Охват и читатели7.7K
Не так давно в одном из уже практически написаных проектов возникла необходимость в использовании подобия вэб-компонентов. Хочу расказать что у нас получилось, постараюсь кратко:

Цель:

Начать использовать компонентный подход в HTML верстке(новую семантику), а именно вэбкомпоненты.

Под компонентом я подразумеваю — “независимый модуль программного кода, предназначенный для повторного использования и развертывания”. К примеру в другом проекте.



Тут хочу сделать небольшое отступление и внести ясность – речь пойдет о компонентах, а не о виджетах(функционально обособленных единицах приложения, объединяющих в себе представление, логику и/или данные, конкретного приложения — javascript+html+css).
Разница, по моему мнению, состоит в том что компонент не подвязывается к конкретной модели данных или логике конкретного приложения – и вы можете его без труда перенести в другое приложение. А виджет – это единица конкретного приложения тесно связанная логикой или данными, и перенести его куда либо без внутреннего изменения самого виджета у вас не получится.
В качестве примеров компонента могу привести селект, аккордеон или табки, а виджетов – панель состояния или окно отображения сообщений в чате.

Зачем:

Реюзабельный код и удобство верстки с помощью возможности расширения HTML синтаксиса.

Как сказано в доке к одному известному фреймверку:
“Directives is a unique and powerful feature available only in Angular. Directives let you invent new HTML syntax, specific to your application.”
— я хочу показать, что это возможно и без angularjs.
И потому, что я хочу использовать компонентный подход(аналог angularjs директив) с виджет-ориентированной архитектурой или с теми шаблонизаторами к которыми мне удобно работать.
Вобщем использовать ту архитектуру приложения или фреймверк которые мне удобны в конкретном случае.

И описанное далее это ни в коем случае не MV* фреймверк, и никогда не задумывался как онный.
Подробности

Произвольный вид поля file в html-форме, одинаковый во всех браузерах

Время на прочтение2 мин
Охват и читатели79K
Не смотря на развитие, внедрение новых стандартов и плюшек в браузерах, у нет единых стандартов, как отображать элемент /> по умолчанию. Более того, у этого элемента нет атрибутов, позволяющих его в какой-то мере стилизовать.
Из-за необходимости привести это поле формы к единому виду во всех браузерах и «вписать» в разработанный дизайн, после поисков и анализа материалов в интернете был разработан метод замены вида поля формы на html+css, и js для расширения функциональности.

Как по умолчанию выглядит это поле?

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

Прототипы JavaScript — программистам на C/C++/C#/Java

Время на прочтение10 мин
Охват и читатели31K
JavaScript отличается от многих других «объектно-ориентированных» языков программирования тем, что в нём объекты есть, а классов — нет. Вместо классов в JavaScript есть прототипные цепочки и некоторые другие хитрости, которые требуют времени на осмысление. Перед профессиональными программистами в других языках при переходе на JavaScript встаёт проблема быстрого вхождения в его объектную модель.

Этот текст написан для того, чтобы дать начинающему или эпизодическому разработчику на JavaScript представление о способах создания объектов в JavaScript, от простого «структурного», как в языке C, к более «объектно-ориентированному», как в C++/C#/Java.

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

Вышел CoffeeScript 1.6.1 с поддержкой Source Maps

Время на прочтение1 мин
Охват и читатели11K
Случилось то, чего мы ждали уже давно. Благодаря усилиям Jason Walton теперь CoffeeScript поддерживает Source Maps, и мы можем отлаживать код на CoffeeScript прямо в браузере (Chrome, Firefox Nightly, Webkit Nightly). Теперь практически не осталось причин не использовать этот великолепный язык в своих веб-проектах.

Отладка с данным нововведением выглядит вот так (поддерживаются breakpoints, можно смотреть переменные, стек и т.п.):

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

Webrtc, Peer Connection — создание полноценного видео чата в браузере

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

Введение


Webrtc на хабре уже неоднократно упоминался, хотелось бы рассказать немного про техническую часть реализации и осветить создание небольшого видео чата. Хочу сразу оговорится, что реализация webrtc постоянно меняется, в том числе названия функций api, их параметры.
Всем, кому просто хотелось бы посмотреть сразу как это все работает, сюда: apprtc.appspot.com демка от гугла все что нужно — это перейти по ссылке и послать её еще кому-нибудь уже с номером комнаты. В конце нужно поменять цифры если окажется что комната переполнена. Кому интересно как это все работает добро пожаловать под кат
Читать дальше →