Метка «javascript» - 99

Обработка изображений / Пиксельные искажения с билинейной фильтрацией в HTML5 canvas
В данном посте я хочу описать простую методику пиксельного искажения изображения на «чистом» javascript в 2D-Canvas без использования специальных библиотек и шейдеров, путём прямого доступа к пикселям изображения. Надеюсь, это будет интересно и полезно как для общего развития, так и для решения каких-то задач.

Canvas и пиксели

Я не буду описывать полностью объект Canvas, для этого есть документация. Остановимся на том, что нам нужно. Во-первых, это получение 2D-контекста:

var context = canvas.getContext('2d'); 

Этот контекст умеет многое делать сЧитать полностью »

JavaScript / Динамический перевод страницы на другой язык
Привет.
Сегодня я расскажу о своих достижениях в области моментального изменения страницы — динамической смене языка. Эта штука понадобилась мне совершенно недавно, а так как сторонним реализациям я не доверяю (даже как-то и не нашёл их), то пришлось написать свою. За время её использования (где-то около полугода) я исправил все самые заметные баги (но это не означает, что их там больше не осталось :) ), и теперь представляю рабочую версию.
Кто-то скажет, что осуществлять перевод на клиенте нецелесообразно, но у меня получилось как раз такая ситуация, что по-другому никак нельзя: для серверного перевода приходитсяЧитать полностью »

Game Development / «HTML5 — будущее игровой индустрии». Интервью с создателями фрейморка Construct
Том Галлен и Эшли Галлен — братья, основатели компании Scirra и создатели фреймворка Construct, с помощью которого создать игру может любой желающий, даже без знания программирования. Construct Classic распространяется бесплатно с открытыми исходниками и предназначен для создания DirectX-игр (есть SDK и поддержкой плагинов на C++). На его основе сделан условно-бесплатный Construct 2 для HTML5-игр, где в качестве движка используется Box2D. Описание см. в статье «Разработка 2D игр под Windows и HTML5 без программирования».
Основатели компании Scirra заметили интерес аудитории Хабра к своей разработке и с готовностью ответили на вопросы читателей. Оригинал интервью наЧитать полностью »

Веб-разработка / Тетрис на JavaScript с исходным кодом, который можно твитнуть

Любопытный пример минимализма продемонстрировал пользователь GitHub c ником Aemkei.
На скриншоте — известная игра Тетрис, справа — её исходный код. В игре нельзя вращать фигуры, нет подсчета очков — зато она может похвастаться размером JS-кода: менее 140 байт.
Поиграть можно здесь.Github автора c его комментариями.UPD: Судя по всему, автор — Мартин Клеппе — занят любимым делом: у него также есть реализации игры «Жизнь» на JavaScript (140 байт) и на Ruby (140 символов).

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

При разработке одного сервиса я столкнулся с необходимостью дать возможность пользователям сообщать об ошибках. Проблема заключалась в том, чтобы пользователь мог сделать скриншот без использования стороннего софта или сервиса.
Сначала эта задача показалась мне невыполнимой, но я нашел html2canvas.
Скачать, посмотреть примеры и почитать подробнее можно тут. Вкратце: эта штука умеет создавать скриншот страницы в элементе canvas, а оформлена в виде jquery плагина.
К примеру вешаем на что-нибудь клик:
$(document).ready(function() {
$('#megaButton').live('click',function(){
//собственно включение самого html2canvas
$('body').html2canvas();
Читать полностью »

Visual Studio / [Из песочницы] Javascript Parser Extension для VisualStudio
Эта статья будет полезна разработчикам, которые используют Visual Studio для работы с JavaScript. Для ознакомления предлагается плагин для Visual Studio — Javascript Parser Extension. Поддерживаются версии VS2008, 2010, 2011. Проект с открытым исходным кодом, хостится на Google Code, также опубликован в Visual Studio Gallery.
Данный плагин призван помочь в работе с большими запутанными участками JavaScript кода, которые часто «достаются в наследство» и навигация по которым довольно утомительна. Также плагин удобен для использования и с новым кодом, в процессе разработки, если объём файла получается значительным.
Основная функциональность состоит в построении дерева функций иЧитать полностью »

Одна из моих любимых тем в программировании – эволюционные вычисления и генетические алгоритмы в частности. Пару лет назад я поднимал эту (в целом уже заезженную) тему на Хабре, но сейчас глядя на то видео немного стыдно – слишком уж туманно и сумбурно было объяснение.
Сегодня я постараюсь объяснить генетические алгоритмы проще и нагляднее, а заодно рассказать вкратце о прототипе очень простого JavaScript-фреймворка для распределенных генетических вычислений degas.js. В двух словах – degas.js запускает генетический алгоритм в виде «треда» в браузере клиента используя web workers и обменивается информацией о полученных в ходеЧитать полностью »

Комитет ECMA сейчас работает над разработкой следующей версии JavaScript, известной под кодовым названием Harmony. Он должен быть закончен к концу следующего года и станет самым большим обновлением за всю историю языка. Разработчики Chrome и V8 решили уже сейчас реализовать некоторые будущие функции JavaScript в браузере Chrome (версия для разработчиков).
Чтобы активировать новые функции, нужно в последнем релизе с dev-канала набрать chrome://flags и включить флаг Experimental JavaScript features.
Лексическая область видимости. Теперь let — это новый var. Стандартные декларации var дополнены let и const. Обе являются правильными способами присвоения объектам значений, приЧитать полностью »

Недавно мне пришлось разбираться с защитой от ботов, используемой на нескольких довольно популярных ресурсах.
На первый взгляд защита показалась обычной установкой куки через javascript, справиться с которой — дело 15-ти минут. В самом деле, после небольшого исследования стало понятно где что делается и какие параметры куда передаются, остается только переписать небольшую функцию с javascript на php и дело в шляпе.
Но все оказалось не так просто. И хотя в итоге защита была сломана, на это потребовалось далеко не 15 минут, и сам принцип защиты оказался для меня новым и довольно интересным.
Итак, обо всем по порядку.
Читать полностью »


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