FireSass: отладка Sass прямов в браузере

Опубликовано TermiT марта 25, 2010 в Web 2.0 |

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

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

Источник

Далее

Самоходный танк AT-AT из StarWars на чистом CSS

Опубликовано TermiT Фев 5, 2010 в How To, Web 2.0 |

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. }

Далее

JavaScript использующий ресурсы GPU

Опубликовано TermiT Янв 28, 2010 в JavaScript, Web 2.0 |

Я уважаю таких программистов как Алексей Митцев (Россия, Москва). Он победил на контесте 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. });

Далее

3D банка Колы на чистом CSS

Опубликовано TermiT Янв 27, 2010 в Web 2.0 |

Роман Кортез продемонстрировал интересный CSS трюк, он сделал на чистом CSS 3D банку колы используя background-attachment, background-position и еще несколько параметров чтобы добиться такого эффекта, при этом он не использовал хитрых возможностей CSS 3.

Далее

ChromeOS — веб-ос 2010? Нет, Win 3.11! :)

Опубликовано TermiT Янв 25, 2010 в Trash, Web 2.0 |

Это пятничный пост, но так получилось запостить его в понедельник :)

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

Источник

Далее

YouTube и Vimeo переходят на HTML5 тэг «video»

Опубликовано TermiT Янв 23, 2010 в Web 2.0 |

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

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

Далее