Pull to refresh
47
0
Владислав Шкодин @smashercosmo

User

Send message

JPG, прозрачность, Canvas, анимация

Reading time8 min
Views33K
Здравствуйте, друзья!

Предлагаю вам небольшой урок на тему анимации спрайтов с альфаканалом на канве HTML5.

Преамбула.


Для начала нарисуем нечто
image

Почему круглое и желтое? Потому что у Дугласа Адамса в «Автостопом по галактике» есть такой Слартибартфаст — очень трогательный дядя, имеет приз за береговые линии при строительстве Земли. Поэтому на всякий случай будем анимировать желтую звезду.

Далее анимируем звезду
Total votes 58: ↑52 and ↓6+46
Comments41

Через тернии к Haskell. 1/2

Reading time25 min
Views224K


Первая часть короткого и жесткого введения в Haskell. Вторую часть можно найти здесь

tl;dr: Очень краткое и сжатое введение в Haskell.


UPD. Если туториал вам понравился, черкните пару строк автору оригинальной статьи. Человеку будет приятно ;)
Классные картинки, много текста и вынос мозга
Total votes 137: ↑133 and ↓4+129
Comments52

Node.js + Chromium = AppJS: один из перспективных вариантов второго шага эволюции веборазработчика

Reading time4 min
Views35K
Сейчас мы с вами немного поговорим о том, как недавнее появление нового инструмента и связанных с ним возможностей открывает перед современными веборазработчиками возможность достаточно быстро эволюционировать, переходить на новые уровни, обретать новые профессиональные навыки, осваивать новые области созидательного труда. Таким инструментом является Node.js и растущая вокруг него инфраструктура.

Первый шаг эволюции веборазработчика совершается тогда, когда разработчик знакомится с Node.js и тотчас же постигает, что ему теперь достаточно воспользоваться знанием джаваскрипта и изучить довольно простой API Node, чтобы немедленно получить возможность сочинять не одни только скрипты для сайтов, но также и консольные приложения, и даже серверные (в частности, вебсерверные).

Исторически это не первый из таких инструментов.
Каждый из нас может вспомнить, что были и до появления Node.js попытки создать движок для удобного программирования на джаваскрипте (Windows Script Host, Rhino, JSDB, и так далее).

Однако только у Node мы видим и достаточно быстрый движок (V8), и кросс-платформенность, и простой API, и превеликое множество дополнительных модулей. Сочетание этих достоинств делает Node удачным и удобным.

Второй шаг эволюции веборазработчика совершается тогда, когда знание языка JavaScript (а также других веботехнологий — прежде всего CSS и HTML или XML) становится можно применять для разработки ещё и приложений с графическим интерфейсом пользователя — то есть с GUI.

Многие производители создавали средства вебоподобной разработки GUI-приложений.
Здесь можно припомнить с десяток более или менее успешных попыток достигнуть желаемого.

Фонд Мозиллы придумал сперва XUL и XULRunner, а затем и целую операционную систему — Firefox OS.

«Хьюлетт-Паккард» выпустил webOS (с недавних пор — Open webOS).

Google придумал Google Chrome OS.

Ещё можно вспомнить, что у Qt есть основанный на JavaScript язык разметки GUI — QML называется.

Развиваются PhoneGap, Appcelerator Titanium, Adobe AIR и другие средства вебоподобного программирования кросс-платформенных приложений.

Часть вышеперечисленных решений родилась на свет увесистою (например, когда для запуска вебоподобного приложения требуется крупная виртуальная машина или даже новая операционная система). Большинство из них также потребует от программиста выучить некоторый API, иногда довольно корявый и страшный (например, XPCOM для XULRunner), но даже когда такой API достаточно изящен, то всё же изучение его требует усилий. Чем больше он умеет, тем более обширным окажется API.

Между тем, если на первом шаге своей эволюции веборазработчик успел выучить API от Node.js — нет ли возможности опереться на это знание и не учить в дальнейшем ничего лишнего?

Второй шаг эволюции веборазработчика становится естественным продолжением первого, если разметка и оформление вебоподобного приложения задаются при помощи HTML и CSS, а поведение — при помощи JavaScript, причём «под капотом» работает ужé известный разработчику движок Node.js.

В частности, если воспользоваться AppJS, то тогда объектная модель (DOM) демонстрируемой «страницы» содержит под именем window.node глобальный объект Node.js, и мы можем без труда прочесть в window.node.process.versions.node версию Node, в window.node.process.arch архитектуру процессора, в window.node.process.platform платформу, и вывести какое-нибудь такое сообщение в окне нашего графического приложения:

[скриншот]

(Понятно, что аналогичным образом можно употреблять и другие возможности Node.js — сетевые, файловые и так далее.)

Что же такое AppJS?

Читать дальше →
Total votes 67: ↑54 and ↓13+41
Comments58

Почему иногда надо бить себя по рукам?

Reading time8 min
Views28K
Доброго дня. Меня зовут Илья и я — перфекционист.

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

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

Месяц назад наша команда, состоящая из полутора дизайнеров и полутора кодеров взяла первое место на региональном чемпионате по скоростной разработке игр. На разработку давалось всего 48 часов. Двое суток, целиком состоящих из кофе и нервов дали итогом самый завершённый из проектов конкурса. Я расскажу вам, что мне пришлось сделать с собой и своим желанием написать идеальный код, который не страшно будет показать людям.
Читать дальше →
Total votes 50: ↑41 and ↓9+32
Comments18

Введение в веб-компоненты. Часть 1

Reading time11 min
Views36K
От переводчика: Представляю вашему вниманию перевод многообещающего стандарта Веб-компонентов от Google, который может стать трендом в ближайшие несколько лет. В данный момент, знание этого стандарта не несёт практического применения, поэтому, если вы не фанат всего нового и интересного, вам возможно будет скучно читать данный перевод.
Перевод выложен на github, поэтому, если вы хотите помочь с переводом или исправить ошибку сделайте pull request, ну или пишите в личку.

Статус: Эксперементальный драфт

Авторы:


Введение



Компонентная модель для Web'а (или Web Components) состоит из четырёх модулей, которые, будучи использованными вместе, позволят разработчикам web-приложений создавать виджеты с богатыми визуальными возможностями, легкие в разработке и повторном использовании, что в данный момент невозможно с использованием только CSS и JS-библиотек.
Читать дальше →
Total votes 25: ↑24 and ↓1+23
Comments33

Проигрывание торрентов в вашем браузере с Magic Player

Reading time3 min
Views113K
Torrent Stream Magic Player — совершенно новое дополнение, которое позволяет пользователям проигрывать потоки видео и музыки, через торренты, непосредственно в их браузере. Magic Player работает с Chrome, Firefox, Opera и поддерживает множество популярных сайтов, включая The Pirate Bay, isoHunt, BTjunkie и EZTV ( rutracker и т.п. ). Это одно из первых решений для создания истинного видео по запросу непосредственно в браузере, при использовании протокола BitTorrent.
Читать дальше →
Total votes 67: ↑57 and ↓10+47
Comments81

Завершён перевод книги «Pro Git»

Reading time1 min
Views195K
Что может быть лучшим подарком на день знаний для программиста? Конечно, полезная книга ;) Поэтому команда переводчиков «Pro Git» поднапряглась и доделала перевод книги на русский язык.

«Pro Git» — это довольно обширная обучающая книга о Git от Скотта Шакона — активного участника разработки проектов Git и GitHub. Автор рассматривает в тексте всевозможные аспекты работы с Git'ом, начиная с установки программы и базовых принципов работы децентрализованных систем контроля версий, и заканчивая рассмотрением внутреннего устройства Git'а и созданием валидных объектов в базе Git'а собственными руками. Несмотря на довольно обширный материал и затрагивание довольно специфических тем, книга написана довольно простым языком, содержит массу примеров и иллюстраций, и поэтому должна быть понятна и новичкам, только начинающим знакомиться с системами контроля версий.

Последняя версия перевода книги доступна в форматах pdf, epub, mobi.
Также доступна онлайн-версия перевода, но она, к сожалению, не обновлялась с мая.
Читать дальше →
Total votes 141: ↑135 and ↓6+129
Comments55

JsRender: Новое поколение jQuery Templates

Reading time3 min
Views37K
Буквально пару месяцев назад, мы начали переписывать весьма крупный сайт, с момента прошлого крупного релиза прошёл не один год, конечно, сайт дорабатывался, правились баги и в итоге в настоящее время создаётся новая версия. В ней будет активно использоваться AJAX, поэтому весьма остро стоял вопрос с генерацией контента на клиенте, полученного в формате JSON. Прошлые шаблоны были собственной разработки, так как на то время вариантов было не так много, которые по разным причинам не подходили, базировались наши шаблоны на jquery, с помощью атрибутов происходило заполнение.

Прежде всего было решено провести тест, при генерации списка из 1500 элементов было получено превосходство в 20 раз, похожие результаты показывает сравнение с jQuery Template (страница с тестами).
Читать дальше →
Total votes 30: ↑27 and ↓3+24
Comments47

Профилирование JavaScript с Chrome Developer Tools

Reading time7 min
Views67K
Скорость сайта состоит из 2 частей: как быстро загружается страница и как быстро работает код в ней. Многие сервисы, такие как минификаторы или CDN, помогают ускорить загрузку, но скорость работы кода зависит только от вас.

Небольшие изменения в коде могут давать огромные изменения в производительности. Всего несколько строк могут означать разницу между быстрым сайтом и диалогом “Unresponsive Script”.
Читать дальше →
Total votes 66: ↑62 and ↓4+58
Comments5

Оптимизация длинных списков логических значений на JavaScript

Reading time5 min
Views4K
Очень часто в веб-разработке (и в программировании вообще) необходимо сохранить длинный список логических значений (yes/no, true/false, checked/unchecked и подобные) в виде строк. К примеру, вы захотите записать такие данные с помощью localStorage, в cookie, или отправить их в теле HTTP запроса. У меня возникала такая необходимость сотни раз.
Читать дальше →
Total votes 24: ↑23 and ↓1+22
Comments19

Я не знаю ООП

Reading time12 min
Views548K
Я не умею программировать на объектно-ориентированных языках. Не научился. После 5 лет промышленного программирования на Java я всё ещё не знаю, как создать хорошую систему в объектно-ориентированном стиле. Просто не понимаю.

Я пытался научиться, честно. Я изучал паттерны, читал код open source проектов, пытался строить в голове стройные концепции, но так и не понял принципы создания качественных объектно-ориентированных программ. Возможно кто-то другой их понял, но не я.

И вот несколько вещей, которые вызывают у меня непонимание.
Читать дальше →
Total votes 412: ↑309 and ↓103+206
Comments870

Введение в Javascript Source Maps

Reading time7 min
Views133K
Вы когда-нибудь думали, как было бы здорово, если бы слитый в один файл и минифицированный яваскрипт код в production-окружении можно было удобно читать и даже отлаживать без ущерба производительности? Теперь это возможно, если использовать штуку под названием source maps.

Если коротко, то это способ связать минифицированный/объединённый файл с файлами, из которых он получился. Во время сборки для боевого окружения помимо минификации и объединения файлов также генерируется файл-маппер, который содержит информацию об исходных файлах. Когда производится обращение к конкретному месту в минифицированном файле, то производится поиск в маппере, по которому вычисляется строка и символ в исходном файле. Developer Tools (WebKit nightly builds или Google Chrome Canary) умеет парсить этот файл автоматически и прозрачно подменять файлы, как будто ведётся работа с исходными файлами. На момент написания (оригинальной статьи — прим. перев.) Firefox заблокировал развитие поддержки Source Map. Подробнее — на MozillaWiki Source Map.
Читать дальше →
Total votes 35: ↑35 and ↓0+35
Comments12

Grunt, инструмент для сборки javascript проектов

Reading time4 min
Views132K
Grunt — это инструмент для сборки javascript проектов из командной строки с использованием задач. Релиз вышел совсем недавно, автор Ben «Cowboy» Alman, проект есть на github. В этой статье я рассмотрю основы Grunt, его установку и использование.
Читать дальше →
Total votes 35: ↑32 and ↓3+29
Comments15

Как сделать группу инпутов удобной

Reading time2 min
Views47K
Когда я работал над сервисом заметок jotsky.com, еще до работы в Островке, надо было сделать ввод телефонного номера из двух инпутов. Примерно такой:



Я сделал навигацию с помощью стрелочек. Сделал, чтобы по мере заполнения фокус переключался к следующем инпуту. А вот сделать правильную вставку из буфера обмена у меня никак не получалось.
Читать дальше →
Total votes 175: ↑162 and ↓13+149
Comments98

Web-разработка на node.js и express. Изучаем node.js на практике

Reading time5 min
Views120K

Предисловие



Пришла мне в голову смелая мысль, взяться за написание туториала по разработке на node.js (что-то наподобие ruby.railstutorial.org). Так как я первый раз берусь за подобный труд то для для меня очень важен любой фидбэк. Нужно это — не нужно. Что стоит убрать а на чем остановиться подробнее, в общем любая конструктивная критика. Надеюсь что дело пойдет и вам понравится, в этом случае по мере написания буду выкладывать главы на хабр.

Вступление



Приветствую, перед вами небольшой учебник по практической разработке на node.js, с использованием фреймворка express. Я с большим энтузиазмом отношусь к node и сопутствующим технологиям. Node.js в первую очередь привлекает свежестью в подходах к разработке, смелостью и драйвом.

О том, что такое node.js вы можете прочитать на http://nodejs.org/, если коротко — то это серверная платформа, для выполнения javascript. Так же мы будем использовать express, web-фреймворк построеный на концепции middleware (о том, что это такое, поговорим поподробнее чуть позже)

В процессе изучения мы познакомимся с различными аспектами web-разработки, такими как использование системы контроля версий, автоматическое тестирование и так далее. В результате по ходу изучения мы разработаем вполне рабочее web-приложение (простенький аналог твиттера)

Хочется отметить, что очень большое влияние на меня оказал railstutorial, это лучшее пособие по web-разработке, которое я встречал, и мне очень хотелось бы создать нечто подобное для node.js.
Читать дальше →
Total votes 74: ↑63 and ↓11+52
Comments64

Конвертация PNG24/32 в PNG8 с сохранением прозрачности

Reading time1 min
Views14K


Открылся веб-сервис TinyPNG, на котором можно быстро конвертировать полноцветные PNG24 в индексные PNG8 с сохранением альфа-прозрачности. Сайт работает на известных open source утилитах, так что квантование палитры можно сделать и без него, но здесь это просто удобнее.
Читать дальше →
Total votes 76: ↑70 and ↓6+64
Comments50

Хабравстреча в Питере!

Reading time1 min
Views697
Господа!

Предлагаю на выходных встретиться всем желающим где-нибудь в центре и посидеть в каком-нибудь кафе/баре/пабе. Так как в воскресенье состоится финал ЧЕ по футболу, что не позволит многим прийти на встречу, то единственный вариант — суббота.

Просьба в комментариях обсудить удобное для нас всех время (по дефолту 18.00), предложить место встречи, а также отметиться всем, кто планирует пойти.

Читать дальше →
Total votes 29: ↑22 and ↓7+15
Comments66

Электронные учебные курсы? Никогда не слышал… Форма и функционал

Reading time6 min
Views22K
Электронная форма обучения становится всё более популярной и зрелой. Google объединил свои образовательные программы на одном сайте, всё чётче проявляются качественные российские (Lektorium.tv, TeachVideo, UniverTV) и американские разработчики\агрегаторы учебного контента (Udacity, Coursera, Codecademy), всё больше ВУЗов (MITx, MIT OCW, см. Coursera) представляют бесплатный доступ к своим материалам, да и наше государство старается не отставать — Министерство Образования и Науки в 2011-ом году провело конкурсов по разработке образовательных ресурсов (правда для школ и профессионального образования) на сумму более полутора миллиардов рублей. Сумма ориентировочная по данным c сайта государственных закупок.

В этой публикации я хочу описать известные мне формы учебных ресурсов и описать их функционал с точки зрения разработчика.
Форма и функционал электронных учебных курсов
Total votes 10: ↑8 and ↓2+6
Comments15

CoffeeScript: Классы

Reading time16 min
Views21K
CoffeeScript: Classes

В ECMAScript пока отсутствует понятие «класс», в классическом понимании этого термина, однако, в CoffeeScript такое понятие есть, поэтому сегодня мы рассмотрим этот вопрос очень подробно.


Содержание:

1. Основные понятия
2. Члены класса
   2.1. Метод constructor
   2.2. Открытые члены класса
   2.3. Закрытые члены класса
   2.4. Защищенные члены класса
   2.5. Статические члены класса
   2.6. Оператор => (fat arrow)
3. Наследование
4. Дополнительная литература

Читать дальше →
Total votes 44: ↑40 and ↓4+36
Comments15

Основы реляционной алгебры

Reading time6 min
Views313K
Реляционная алгебра базируется на теории множеств и является основой логики работы баз данных.
Когда я только изучал устройство баз данных и SQL, предварительное ознакомление с реляционной алгеброй очень помогло дальнейшим знаниям правильно уложиться в голове, и я постараюсь что бы эта статья произвела подобный эффект.

Так что если вы собираетесь начать свое обучение в этой области или вам просто стало интересно, прошу под кат.

Читать дальше →
Total votes 78: ↑71 and ↓7+64
Comments42

Information

Rating
Does not participate
Registered
Activity