Самоходный танк 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. }

Далее

Как смотреть Hulu.com и слушать Pandora Radio, Last.fm из России

Опубликовано TermiT мая 17, 2009 в How To |

Если вы не знаете о чем идет речь посетите следующие страницы:

Проблема использования данных сервисов заключается в том, что они не предоставляют контент для русских пользователей (либо требует за это плату). Сервисы очень качественные и терять к ним доступ не очень хочется, но и платить деньги за доступ к ним пока я не готов. Поэтому будем искать как получить к ним доступ без вложений денежных средств.  Вариантов на самом деле я нашел не много это либо использовать прокси либо vpn сервисы. Бесплатные прокси можно сразу отсечь, так как речь идет о потоковом видео/аудио, а для этого нужна хорошая пропуская способность что редкость для бесплатных прокси. (Кстати, пока эксперементировал с бесплатными проксями нашел удобные утилиты для работы с прокси листами). Остался второй вариант: сервисов которые предоставляют услуги USA VPN достаточно много, но большая часть из них платные, либо бесплатные, но с ужастным каналом.

В итоге я нашел утилиту HotSpot Shield, которая проста в установки и предоставляет USA VPN c хорошем каналом (600-800 кб/c, чего для hulu вполне достаточно), единственный минус это банер, который появляется на каждой странице при использовании HotSpot Shield, но если у вас установлена банерорезка, то вы его и не заметите.

Установка:

  1. Качаем прогу отсюда.
  2. Распаковываем архив и запускаем установку.
  3. После запуска программы зайдите на internet.yandex.ru и убедитесь, что ваш IP определяется как США
  4. Можно заходить на hulu.com или другие сервисы.

Альтернативный способ без баннеров для Pandora.com:
http://youngerson.livejournal.com/114870.html

Далее

Регулярные выражения? AIR вам в помощь!

Опубликовано TermiT Апр 12, 2008 в How To, Web 2.0 |

Если у вас не такой модный текстовый редактор как у меня (gvim) и вам нужно что-то вроде деббагера регулярных выражений или вы еще не уверенно себя чувствуете при работе с ними, то вам поможет RegExr приложение написанное на Adobe Flex и доступное в двух вариантах: онлайн и air-дистрибутив. Вещь я вам скажу просто суперская, рассмотрим ее поподронее:

screenshot-regexr2.png

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

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

Далее

Я проверяю свои сайты на корректность отображения в 32 браузерах. А ты?

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

Каждый «нормальный» веб-разработчик проверяет свои работы на корректность отображения в различных браузерах, ну покрайней мере трех (Opera, Firefox, Internet Explorer), но не стоит забывать про то, что у каждого из браузеров огромное количество версий отображающая страницы иначе и это не говоря уже о различие в отображении на разных платформах. Так как же быть?

Если вы задайтесь этим вопросом, то вам прямая дорога на BrowserShots. BrowserShots делает скриншоты вашего сайта в разных браузерах. Это бесплатный open-source сервис, созданный Johann C. Rocholl. Когда вы отправляете адрес свого сайта, он добавляется в очередь. Несколько различных компьютеров откроют ваш сайт в своих браузерах. Затем они сделают скриншоты и загрузят их на центральный сервер. Можно указать какие имеено браузеры вас интересуют (всего их 32, на Linux: BonEcho 2.0, Dillo 0.8, Epiphany 2.14, Epiphany 2.20, Firefox 1.5, Firefox 2.0, Firefox 3.0, Flock 1.0, Galeon 2.0, GranParadiso 3.0, Iceape 1.1, Iceweasel 2.0, Kazehakase 0.5, Konqueror 3.5, Minefield 3.0, Navigator 9.0, Opera 9.25, Opera 9.50, SeaMonkey 2.0; на Windows: Firefox 1.5, Firefox 2.0, Firefox 3.0, MSIE 5.0, MSIE 5.5, MSIE 6.0, MSIE 7.0, Safari 3.0, на Mac OS: Firefox 2.0, Safari 1.3, Safari 2.0, на BSD: Opera 9.25) а также указать дополнительные опции: разрешение, версию JavaScript, влючен ли Flash и Java.

Благодаря этому сервису я узнал, что не один из MSIE правильно не показывает левую колонку моего блога, а также в FF 1.5 под Windows почему то не отображает блок «Обо мне». Смотрите сами.

Также весело смотрятся попытки браузеров отрендерить всем известные тесты на совместимость стандартам Acid2 и Acid3. Пока лидирует Opera, а в спину ей дышит Firefox 3.0

Далее

Просмотр исходного текста в Firefox

Опубликовано TermiT Ноя 29, 2007 в How To |

Вас раздражает, когда в Firefox'e после нажатия на «Ctrl+U» (Меню -> Вид ->Показать исходный код) открывается новое окно? Тогда я ваш спаситель :) Просто перенесите на панель браузера следующий линк:

Переключиться на исходный код

И при нажатии на него исходный код будет отображаться в том же табе, что и страница. Нажав снова вы вернётесь к исходной страницы.

Вот такой маленький трикс :)

Далее