Рубрика «javascript» - 495

Как я Quake в браузере делал
2 месяца назад я выложил на GitHub первую бета-сборку WebQuake — порта первого Quake, работающего в браузере через WebGL.

В этом посте я бы хотел вам рассказать о подробностях разработки и реализации движка: как сделана графика, как работает звук, и так далее.Читать полностью »

Доброго времени суток.

Сегодня я хочу поделиться опытом написания своего контекстного меню с помощью всеми нами любимой библиотеки jQuery.

Итак, немного предыстории

Что подтолкнуло меня к тому, что я заинтересовался вопросом написания своего контекстного меню и решил написать эту статью? А то, что я являюсь большим фанатом продуктов Google и мне всегда очень нравился подход этой компании к интерфейсам пользователя.

Ежедневно пользуясь его продуктами, такими как Google Drive, меня всегда поражало, до чего же удобно выполнять различные операции с помощью знакомого с детства контекстного меню, просто кликая на объекте правой кнопкой мыши и выбирая необходимое действие. Этот факт и заставил меня заинтересоваться, а насколько сложно самостоятельно реализовать вызов своего контекстного меню в браузере, по клику на любой объект, а так же запретить вызов стандартного меню браузера?

Я решил попробовать и вот что у меня получилось.

Читать полностью »

(Дата публикации оригинала — 12.04.2013)
Выбор JavaScript MVC фреймворка — тяжёлая работа. Нужно учесть много факторов, и число вариантов выбора может быть огромно. Достаточно взглянуть на проект ToDoMVC (о нем по-русски).

Я использовал 4 фреймворка: Angular, Backbone, CanJS и Ember. Поэтому решил сделать сравнение, чтобы помочь вам решить, какой из них использовать. Я выделю несколько факторов, которые вы можете использовать при выборе. Каждый фактор будет иметь оценку от 1 до 5 (больше — лучше). Я старался быть беспристрастным, но, конечно, оценки основаны на личном опыте.

Сравнение Angular, Backbone, CanJS и Ember
Читать полностью »

Собственно, сам сниппет

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

На эту тему был нагуглен один изящный механизм, использующий одну известную особенность многих языков программирования. Если установить несуществующую дату для какого-либо месяца (например 31 апреля), то в результате нашем объекте будет сохранено соответствующее число следующего месяца (в данном случае — 1 мая).

Таким образом, для того, чтобы получить количество дней в указанном месяце, необходимо отнять результат вышеописанной операции из числа 32. То есть, если задать в качестве даты 32 апреля, в результате мы получим 2 мая. Проверим: 32-2=30 — такое количество дней будет в апреле.

	var days_in_april = 32 - new Date(2013, 3, 32).getDate();

Читать полностью »

Доброго времени суток!

Хочу поделиться своей наработкой для перевода страниц сайта с помощью простейшего jQuery плагина и такой приятной новой плюшки html5, как data-* атрибуты.

Итак цель: возможность легко и быстро обеспечить поддержку нескольких языков для разрабатываемого веб приложения.

Теперь немного кода. Предположим у нас имеется вот такая вот нехитрая html разметка:

<h1 data-translate-key="HEADING-ONE">Heading 1</h1>
        
<p data-translate-key="SOME-TEXT">Some text in tag P</p>
        
<p data-translate-key="ANOTHER-TEXT">another text</p>

Читать полностью »

Вот два изображенья — вот и вот: *

[два изображенья]

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

Здесь уместно припомнить, что веборазработчики постепенно выучились употреблять градиенты в качестве фоновых рисунков: для этой цели им верно служит свойство «background: linear-gradient();», описываемое в стандарте «CSS Image Values and Replaced Content Module Level 3». И если сейчас перейти к стандарту по гиперссылке, то станет видно, что он достиг уж статуса «Candidate Recommendation», и что датируется он семнадцатым апреля 2012 года. В честь первой годовщины этого дня позвольте поговорить о том, что градиентная отрисовка текста всё ещё распространена в Сети куда менее, чем градиентная отрисовка фона.

Почему это так? Да потому, что единственным широко известным средством для градиентной раскраски текста служит нам нестандартный CSS-код «-webkit-background-clip: text», который обрезает любой фон (в том числе градиентный) по границе текста — и который употребляется обыкновенно в сочетании с CSS-кодом «-webkit-text-fill-color: transparent», обеспечивающим прозрачность букв самогó текста, так что фон через него проглядывает. Этот код работает с весны 2008 года, но, к сожалению, только во браузерах на основе WebKit, число которых хотя и возросло недавно (благодаря Опере, отступившейся от собственного движка), но ими одними плоды мирового браузеростроения не исчерпываются. Ни в Firefox, ни в Internet Explorer этот код не заработает.

Можно ли преодолеть этот тупик и достичь кросс-платформенности текста, отрисовываемого цветовым градиентом? Да, это возможно; но для этого придётся вместо CSS прибегнуть ко джаваскрипту.

Читать полностью »

в 0:42, , рубрики: javascript, блоки, метки: ,

Привет, читатель!

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

Суть мысли, или даже вопроса — почему никто (встречавшийся мне) не использует блоки кода в своих JavaScript приложениях?
Читать полностью »

Обновление информации в фоне Revisited, или long polling для ретрограда

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

Disclaimer: Да не введет вас в заблуждение наличие термина «long polling» в заголовке. Это всего лишь присказка, а сказ о другом. Читать полностью »

Bootstrap wysiwyg: крошечный текстовый редактор

Текстовый редактор bootstrap-wysiwyg — это всего 1.5 Кб в минифицированном и сжатом виде и чуть больше 6 Кб исходного кода, базовые функции редактирования на основе execCommand, drag-and-drop для вставки изображений, поддержка стандартных горячих клавиш и ничего лишнего. Редактор работает в современных браузерах (Chrome 26, Firefox 19, Safari 6) и на мобильных платформах (IOS 6 iPad/iPhone, Android 4.1.1 Chrome). Зависимости — jQuery, jQuery HotKeys и Bootstrap.
Читать полностью »

Берем под контроль криптографию в облачном хранилище MEGAПосле запуска в какой-то мере скандального сервиса MEGA разговоры о его защищенности немного побурлили и затихли. На сегодняшний день сервис живет своей жизнью и его никто даже не поломал. Из всех разговоров почему-то был упущен термин «User Controlled Encryption» (UCE, или Контролируемая пользователем криптография), которой кичится MEGA. Под словом «упущен» я подразумеваю тот факт, что мы не рассмотрели все возможности, которые дает нам криптографический движок, выполняющийся в JavaScript на стороне клиента.

Конечно, сам сервис MEGA под этим подразумевает всего лишь то, что ключи шифрования не хранятся на сервере, а вся их криптография выполняется в контексте браузера. При этом после запуска сервиса было много разговоров о том, что в нем используются нестойкие криптографические алгоритмы и что вообще все плохо и мы все умрем, а наши файлы прочитает ФСБ. Это подтолкнуло меня на мысль расширить понятие «UCE» и действительно взять криптографию под свой контроль, а именно — заменить или дополнить некоторые механизмы обеспечения безопасности сервиса.

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


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js