TermiT's Blog » Web 2.0 http://blog.termit.name Блог амбициозного разработчика Thu, 29 Jul 2010 19:53:57 +0000 en hourly 1 http://wordpress.org/?v=3.0 FireSass: отладка Sass прямов в браузере http://blog.termit.name/firesass-otladka-sass-pryamov-v-brauzere/ http://blog.termit.name/firesass-otladka-sass-pryamov-v-brauzere/#comments Thu, 25 Mar 2010 10:41:25 +0000 TermiT http://blog.termit.name/?p=262

Натан Вейзенбаум написал плагин FireSass для FireBug, позволяющий прямо в firefox отлаживать Sass (Sass — DSL, упрощающий написание CSS) код без непосредственной трансляции в CSS.

Этот плагин добавляет номера строк и имена файлов в стандартное окно отладки css, что значительно облегчает жизнь превеженцам HAML и Sass.

Источник

]]> http://blog.termit.name/firesass-otladka-sass-pryamov-v-brauzere/feed/ 0 Самоходный танк AT-AT из StarWars на чистом CSS http://blog.termit.name/samoxodnyj-tank-at-at-iz-starwars-na-chistom-css/ http://blog.termit.name/samoxodnyj-tank-at-at-iz-starwars-na-chistom-css/#comments Fri, 05 Feb 2010 14:22:20 +0000 TermiT http://blog.termit.name/?p=241 http://anthonycalzadilla.com/css3-ATAT/index.html

Энтони Кальсадилья показал отличный пример новых возможностей CSS. Он написал статью как анимировать AT-AT на чистом CSS. (Работает только в Safari и Google Chrome)

Вот кусок кода, реализующий анимацию головы :

CSS:
  1. @-webkit-keyframes rotate-head{
  2.   0% {-webkit-transform:rotate(0deg) translate(0px,0px);}
  3.   40% {-webkit-transform:rotate(10deg) translate(15px,5px);}
  4.   80% {-webkit-transform:rotate(-5deg) translate(8px,5px);}
  5.   100% {-webkit-transform:rotate(0deg) translate(0px,0px);}
  6. }
  7. #atat #head {
  8.   -webkit-animation-name: rotate-head;
  9.   -webkit-animation-duration: 7s;
  10.   -webkit-animation-iteration-count: infinite;
  11.   -webkit-transform-origin: 0 50%;
  12. }

]]> http://blog.termit.name/samoxodnyj-tank-at-at-iz-starwars-na-chistom-css/feed/ 0 JavaScript использующий ресурсы GPU http://blog.termit.name/javascript-ispolzuyushhij-resursy-gpu/ http://blog.termit.name/javascript-ispolzuyushhij-resursy-gpu/#comments Thu, 28 Jan 2010 07:00:29 +0000 TermiT http://blog.termit.name/?p=218 Я уважаю таких программистов как Алексей Митцев (Россия, Москва). Он победил на контесте Mozilla Jetpack 0.5, его проектом был прототип позволяющий JavaScript использовать ресурсы GPU.
Работа Алексея — это альфа-прототип, демонстрирующий потенциал проекта. Для работы нужна специальная сборка Firefox, потому показать работу проекта в действии тяжело. Однако, можно продемонстрировать принцип работы. Вот пример транспонирования матрицы со скоростью света:

JavaScript:
  1. jetpack.statusBar.append({
  2. html: «Transpose!»,
  3. onReady: function(widget){
  4. $(widget).click(function(){
  5. var myStorage = jetpack.cuda-storage;
  6. var matrix = new Array();
  7. var size = 32;
  8. for(var i=0; i
  9. array[i] = i;
  10. var transposedMatrix = myStorage.transpose(size, matrix);
  11. transposedMatrix.forEach(function (v) { console.log( v ); })
  12. });
  13. });


Алексей рассказывает почему это проект важен:

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

  • стриминг цифрового видео и аудио потоков в высоком качестве.
  • распознавание речи
  • манипуляции и обработка больших изображений природы и космоса
  • локальная обработка больших массивов данных
  • анимация DOM-элементов (через DirectX или OpenGL)
  • исследование 3D-миров, таких как SecondLife или OpenSim Grid
  • редактирование видео и аудио файлов в реалтайме
  • IDE работающие прямо в браузере

Это список можно перечислять до бесконечности. Разработчики пытались преодолеть ресурсные проблемы используя такие client-server технологии как ActiveX, Netscape Plugins, Java Applets, но они не получили массового распространения. Возможно этот проект изменит данную ситуацию, но не стоит забывать о кроссбраузерности, придется проделать большую работу по стандартизации. Возможно в ближайшем будущем, все те инструменты разработчиков, которые позволяли  обеспечить приложения богатыми возможностями, такие как JavaScript, ActionScript, плагины и те что упоминались ранее перестанут страдать от нехватки процессорного времени.

Источник

]]> http://blog.termit.name/javascript-ispolzuyushhij-resursy-gpu/feed/ 0 3D банка Колы на чистом CSS http://blog.termit.name/3d-banka-koly-na-chistom-css/ http://blog.termit.name/3d-banka-koly-na-chistom-css/#comments Wed, 27 Jan 2010 13:54:46 +0000 TermiT http://blog.termit.name/?p=215 Роман Кортез продемонстрировал интересный CSS трюк, он сделал на чистом CSS 3D банку колы используя background-attachment, background-position и еще несколько параметров чтобы добиться такого эффекта, при этом он не использовал хитрых возможностей CSS 3.


Вот ключевой кусок кода:

CSS:
  1. p {
  2.         background-image: url(coke-label.jpg);
  3.         background-attachment: fixed;
  4.         background-repeat: repeat-x;
  5.         width: 1px;
  6. }
  7.  
  8. #x1 {background-position: 5px 30px;}
  9. #x2 {background-position: 0px 30px;}
  10. #x3 {background-position: -3px 30px;}
  11. #x4 {background-position: -6px 30px;}
  12. #x5 {background-position: -8px 30px;}

С помощью него отображается сама банка и «обертка» на ее поверхности.

Источник

]]> http://blog.termit.name/3d-banka-koly-na-chistom-css/feed/ 0 ChromeOS — веб-ос 2010? Нет, Win 3.11! :) http://blog.termit.name/chromeos-veb-os-2010-net-win-3-11/ http://blog.termit.name/chromeos-veb-os-2010-net-win-3-11/#comments Mon, 25 Jan 2010 14:24:21 +0000 TermiT http://blog.termit.name/?p=209 Это пятничный пост, но так получилось запостить его в понедельник :)

В 2010 нас ждем много вариаций на тему веб-ос, и самый ожидаемый продукт это ChromeOS. Хотя зачем ждать, если  можно  уже сейчас попробовать Windows 3.11: Browser Edition?

Источник

]]> http://blog.termit.name/chromeos-veb-os-2010-net-win-3-11/feed/ 0 YouTube и Vimeo переходят на HTML5 тэг «video» http://blog.termit.name/youtube-i-vimeo-perexodyat-na-html5-teg-video/ http://blog.termit.name/youtube-i-vimeo-perexodyat-na-html5-teg-video/#comments Sat, 23 Jan 2010 10:20:29 +0000 TermiT http://blog.termit.name/?p=205

На мероприятии Google I/O была продемонстрирована демо-версия
YouTube, позволяющая проигрывать видео прямо в браузере, не используя при этом Flash.

Пройдя по данной ссылке, вы можете принять участие в
бета-тестировании. Я даже не знаю с чего начать, вот две точки зрения:

Защитник открытых стандартов
Здорово, что можно наблюдать, как такой гигантский портал —
олицетворение Flash видео — использует HTML тэг video. Если хотите
побесить Адобовцев, спросите их: «а как вам эти ребята с YouTube заколачивающие миллионы пользуясь вашей работой? Конечно, у вас есть кучка денег с лицензий... хотя стойте...»

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

Бонус от использования беты: «Видео с рекламой не поддерживаются» :)

Другой парень
Отлично, что YouTube демонстрирует поддержку HTML5, но заметьте — он
работает только в Safari/Chrome (сказать, что он работает в IE через
ChromeFrame, будет обманом) из-за того, что YouTube поддерживает H.264
и не поддерживает Ogg. Конечно, понадобится много времени, чтобы
добавить поддержку Ogg, но это поможет решить проблему.

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

Время покажет. А какой точки зрения придерживаетесь вы?

Vimeo также перешел на тэг video, тоже только с поддержкой H.264.

Источник

]]> http://blog.termit.name/youtube-i-vimeo-perexodyat-na-html5-teg-video/feed/ 0 Бывают приятные сюрпризы http://blog.termit.name/byvayut-priyatnye-syurprizy/ http://blog.termit.name/byvayut-priyatnye-syurprizy/#comments Sat, 29 Nov 2008 01:00:07 +0000 TermiT http://blog.termit.name/byvayut-priyatnye-syurprizy/ Как-то давно я писал про хороший сервис статистики посещаемости сайта, который на раз делает Google Analytics — Get Clicky. Давно хотел заплатить за ПРО версию, но лягушка меня душила :). Пол года назад Get Clicky решили сделать локализацию своего сервиса по типу Facebook, т.е. пользователям предлагалось самим локализовать сервис: выдаются строчки на английском языке и есть поля для ввода перевода на русский, также есть возможность голосовать за варианты других пользователей. Мне эта идея показалась забавной и я поигрался с этим с пол часа, позже мне надоело работать бесплатным переводчиком на коммерческом сервисе и благополучно забыл про этот «игру». Забавно, недавно получил письмо от Get Clicky со следующим содержанием:

Hi Gennady,

Thank you for helping translate Clicky into your native language, we really appreciate it.

We are rewarding the top 50 contributors with free «Pro» accounts for life, and you were one of them! Congratulations, and please enjoy :)

— The Clicky Team :)
http://getclicky.com

Мелочь, а приятно. Ну и конечно это случай изменил мои взгляды на «помощь коммерческим сервисам» :)

]]> http://blog.termit.name/byvayut-priyatnye-syurprizy/feed/ 0 ХабраШвабр http://blog.termit.name/xabrashvabr/ http://blog.termit.name/xabrashvabr/#comments Thu, 10 Jul 2008 21:41:55 +0000 TermiT http://blog.termit.name/xabrashvabr/ Появилась недавно задача сляпать сайтик с функционалом как у habrhabr, то есть с кармой, друзьями, рейтингами, коллективными блогами, блэкджеком и шлюхами. Можно конечно и самому написать подобный движок, но не очень хотелось изобретать велосипед — я решил посмотреть готовые решения. Вот, что я нашел:

  • Explay — по функционалу есть все, что надо, ставится легко, но такой стиль кода мне не по душе:
    • PHP:
    1. include $_SERVER['DOCUMENT_ROOT'].'/'.«modules/articles/module.php»;</ul>
    2. if (isset($_GET['cat'])) $cat = addslashes($_GET['cat']);
    3. if (isset($_GET['id'])) $id = intval ($_GET['id']);
    4.  
    5. $order = «art_id»;
    6.  
    7. if (isset($_GET['id']) || isset($_GET['url'])) {
    8. $option = «art_id = '$id'»;
    9. if (!isset($_GET['id']) &amp;&amp; preg_match(«#^[a-z0-9_-]+$#», $_GET['url'])) {
    10. $url = htmlspecialchars ($_GET['url']);
    11. $option = «art_url_name = '$url'»;
    12. }
    •  BigStreet — код хороший, но проект к сожалению развивается слабо, к тому же отсутствует модуль коллективных блогов
    • ШвабраШвабр, если первые два варианта были cms собственнописные, то швабр — это проект со статьями и скринкастами обучающими как из CMS Drupal сделать аналог HabraHabr. И тут я должен снять шляпу перед разработчиками Drupal'а, конечно до то того как я добрался до Швабра, я использовал drupal, но только после того как я ознакомился с материалами этого сайта (автору спасибо!), я понял насколько drupal гибок и красив!

    Итак вердикт: однозначно я буду основоваться на материалах сайта ШвабрШвабр

    ]]> http://blog.termit.name/xabrashvabr/feed/ 8 Гиковский способ постинга в twitter http://blog.termit.name/gikovskij-sposob-postinga-v-twitter/ http://blog.termit.name/gikovskij-sposob-postinga-v-twitter/#comments Wed, 16 Apr 2008 13:29:10 +0000 TermiT http://blog.termit.name/gikovskij-sposob-postinga-v-twitter/ Можно конечно юзать всякие twhirl или постить через jabber, но это как-то не по нашему :)
    Итак постим через консоль используя Twitter API.

    Вариант номер один (curl):

    curl -u yourusername:yourpassword -d status="Bash! Bitches!" http://twitter.com/statuses/update.xml

    Соответственно можно довить в .bashrc следующий alias:

    alias twit='curl -u yourusername:yourpassword -d status="$1" http://twitter.com/statuses/update.xml'

    Вариант номер два (wget):

    wget -O — --user=USER --password=PASSWORD --post-data='status="Bash! Bitches!"' http://twitter.com/statuses/update.xml

    И alias:

    alias twit='-O — --user=USER --password=PASSWORD --post-data=\'status="$1"\' http://twitter.com/statuses/update.xml'

    Постинг через vim: качаем этот архивчик и закидываем его содержимое в папку для плагинов. Дальше прописываем в конфиг (.vimrc) настройки и мапинги:

    let g:twitterusername='username'
    let g:twitterpassword='password'

    map <unique> <eader>tw <Esc>:execute 'TwitterStatusUpdate ' . inputdialog ('Enter a Twitter status message:')<cr>

    Еще есть несколько вариантов для emacs'a (twitter.el, twit.el)

    Не забываем, что за мной можно следить здесь.

    ]]>     http://blog.termit.name/gikovskij-sposob-postinga-v-twitter/feed/ 0     Регулярные выражения? AIR вам в помощь! http://blog.termit.name/regulyarnye-vyrazheniya-air-vam-v-pomoshh/ http://blog.termit.name/regulyarnye-vyrazheniya-air-vam-v-pomoshh/#comments Sat, 12 Apr 2008 20:50:14 +0000 TermiT http://blog.termit.name/regulyarnye-vyrazheniya-air-vam-v-pomoshh/ Если у вас не такой модный текстовый редактор как у меня (gvim) и вам нужно что-то вроде деббагера регулярных выражений или вы еще не уверенно себя чувствуете при работе с ними, то вам поможет RegExr приложение написанное на Adobe Flex и доступное в двух вариантах: онлайн и air-дистрибутив. Вещь я вам скажу просто суперская, рассмотрим ее поподронее:

    screenshot-regexr2.png

    1. Судя мы вводим само выражение и при  наведении на каждый метасимвол или конструкцию появляется окошко с подсказкой — удобно
    2. Сдесь текст, на котором тестируется регулярка, синим цветом выделяются совпадения
    3. Тут выставляются флаги
    4. Это что-то вроде браузера по конструкциям, метасимволам и группам
    5. Здесь высвечиваются коротенькие подсказк, если вы забыли как что-то работает :)
    6. Тут небольшой итог: паттерн, флаги, и количество найденных групп
    7. Переключатель между поиском и заменой

    Советую, особенно новичкам...

    ]]>     http://blog.termit.name/regulyarnye-vyrazheniya-air-vam-v-pomoshh/feed/ 2