Pull to refresh
210
0
Андрей «A.I.» Ситник @Iskin

Фронтенд-разработчик

Send message

Ускоряем WebGL/Three.js с помощью OffscreenCanvas и веб-воркеров

Reading time 5 min
Views 14K
Ускоряем WebGL/Three.js с помощью OffscreenCanvas и веб-воркеров

В этом руководстве я расскажу как с помощью OffscreenCanvas мне удалось вынести весь код работы с WebGL и Three.js в отдельный поток веб-воркера. Это ускорило работу сайта и на слабых устройствах исчезли фризы во время загрузки страницы.

Статья основана на личном опыте, когда я добавил вращающуюся 3D-землю на свой сайт и это забрало 5 очков производительности в Google Lighthouse — слишком много для лёгких понтов.
Читать дальше →
Total votes 29: ↑28 and ↓1 +27
Comments 11

Новый кодек AV1: ускоряем загрузку видео в браузере

Reading time 6 min
Views 91K
В этом руководстве мы научимся использовать видео в Вебе, как это принято в 2019. Chrome и Firefox начали поддерживать новый кодек AV1 — для них видео можно сделать в два раза меньше.

Отдельно поговорим, как заменить GIF на видео в AV1 и H.264 — тогда его размер упадёт в 20-40 раз.

AV1 в браузере

YouTube уже использует его в TestTube. Netflix заявил, что AV1 будет «их основным кодеком следующего поколения».

Мы в Злых Марсианах уже используем его на нашем сайте и на Ампллифере. В этой статье я поделюсь опытом внедрения AV1 и шаг-за-шагом расскажу, как вставить видео, чтобы оно работало во всех браузерах.
Читать дальше →
Total votes 49: ↑49 and ↓0 +49
Comments 85

SPB Frontend: 2 сентября будет встреча фронтенд-сообщества в Питере

Reading time 1 min
Views 1.5K
Во вторник 2 сентября в Санкт-Петербурге сообщество фронтенд-разработчиков SPB Frontend в партнерстве с Зоной действия открывают новый сезон встреч. Время: 20:00. Адрес: Лиговский пр., дом 74, коворкинг «Зона действия».

SPB Frontend

В программе будут доклады про библиотеку красивых интерфейсов Famo.us, webpack (будущее системы сборки после Grunt) и PostCSS (будущее после Sass и LESS).
Читать дальше →
Total votes 10: ↑8 and ↓2 +6
Comments 0

«Цифровой шаббат» или как месяц без компьютеров изменил меня

Reading time 11 min
Views 68K
Я разобрал всю почту и отправил последнее письмо. Написал родным, передал свои проекты друзьям. Отправив последний твит, я выключил свой ноутбук, телефон и планшет. Через 10 минут начнётся мой «цифровой шаббат», и я в течение месяца не смогу управлять ни одним цифровым устройством.
Со времён Батлерианского Джихада, когда «мыслящие машины» были стёрты с лица большей части вселенной, компьютеры внушали недоверие.
Мессия Дюны

Цифровые и доцифровые вещи
Слева мои вещи из цифровой жизни — я бережно выключил питание, собрал их вместе и положил глубоко в сумку. Для новой жизни я достал те вещи, которые на фотографии справа.
Читать дальше →
Total votes 243: ↑205 and ↓38 +167
Comments 324

Курс по Ruby on Rails от Злых марсиан

Reading time 5 min
Views 13K
Привет, меня зовут Андрей Ситник, и я — фронтенд в Злых марсианах. Хочу пригласить вас на брейнвошинг по Ruby on Rails, который пройдет 29, 30 марта и 1 апреля в Москве.

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

А в конце рассказа — пара способов получить скидку на следующий мартовский Брейнвошинг.


Равиль и Лёша объясняют практическое задание по Rack

На этом курсе мы не учим Ruby или Rails с нуля, а ориентируемся на тех, кто уже программирует на Ruby в коммерческих проектах. В ежедневной рутине часто не хватает времени, чтобы полностью и как следует разобраться с задачей, понять причину ошибки или изучить правильные методологии. Бывает, что не хватает и опытных коллег, у которых можно перенять такой опыт.

На курсе мы углубляем понимание работы Rails, делимся опытом, который мы получили в крупных проектах, даем полезную выжимку знаний и развеиваем популярные заблуждения. Иными словами, за короткий срок «прокачиваем» разработчиков на Ruby on Rails, тимлидов и технических директоров Rails проектов.
Читать дальше →
Total votes 30: ↑21 and ↓9 +12
Comments 4

Автопрефиксер — окончательное решение проблемы префиксов в CSS

Reading time 4 min
Views 56K
Автопрефиксер — утилита нового поколения для добавления префиксов к экспериментальным свойствам из CSS 3. Она берёт с Can I Use последние данные о префиксах и популярности браузеров, читает ваш файл стилей, находит свойства и значения, которым действительно нужны префиксы и добавляет их.

Вы просто пишите обычный CSS:
a {
    transition: transform 1s
}


Автопрефиксер сам заменит нужные (и только нужные) свойства и значения (обратите внимание на -webkit-transform):
a {
  -webkit-transition: -webkit-transform 1s;
  -o-transition: -o-transform 1s;
  transition: -ms-transform 1s;
  transition: transform 1s
}


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

Проблема


К сожалению текущие инструменты плохо решают задачу:
  • Писать вереницы свойств руками — очевидно плохое решение. Такой код невозможно читать, легко забыть поправить остальные свойства при редактировании.
  • В Sass и LESS вам нужно самому следить за актуальностью префиксов и копировать примеси из проекта в проект. К тому же примеси могут решить проблему только у свойств, а не у значений (например, calc()).
  • Compass или Bourbon уже лучше, там список примесей хранится централизовано и его легче держать актуальным (но практика показывает, что обычно в примеси добавляют все префиксы не следя за актуальностью). Проблема значений всё так же не решена.
  • Самая главная проблема Sass и LESS, что вам всё равно нужно постоянно думать «из CSS 3 это свойство или нет?» — и в зависимости от этого использовать примесь или нет. Эту проблему немного решил Stylus — у него синтаксис примесей не отличается от обычных свойств, так что префиксы добавляются невидимо. Впрочем, проблема актуальности и значений всё равно остались.
  • Есть ещё скрипты добавления префиксов прямо в браузере, например Prefix Free, но лучше всего обрабатывать стили на этапе разработки и выкладки, а не повторять обработку каждый раз в браузере клиентов.

Понятно, что языки препроцессоров не позволяют решить проблему полностью, нужен был фундаментально новый инструмент.
Читать дальше →
Total votes 72: ↑64 and ↓8 +56
Comments 81

Page Visibility API и Visibility.js

Reading time 7 min
Views 20K
Кот Шрёдингера

Page Visibility API — новое API в JavaScript, которое позволяет узнать, видит ли пользователь ваш сайт или же он, например, открыл другой таб.

Каким образом это API может сделать наш Веб дружелюбнее и уютнее? Ну самое очевидное:
  • Сделать сайт более дружелюбным к пользователю, «поднять юзабилити». Например, отключать слайдшоу или ставить видео на паузу, когда вы переключаетесь в другой таб (например, вы смотрите видео на YouTube и вам приходит срочное эл. письмо).
  • Не потреблять лишних ресурсов. Выключать лишнюю логику, когда она не нужна, так как пользователь не видит сайт. Например, в фоновом табе отключать сложные JS-рассчёты или реже проверять новые сообщения по AJAX.
  • Считать более точную статистику. Например, не засчитывать пользователей, которые открыли ваш сайт в новом табе и закрыли его не просматривая.
  • Поддерживать новую технологию пререндеринга из Google Chrome, когда браузеру заранее загружает и рендерит указанную страницу, чтобы открыть её мгновенно. Например, в поиске Google первый результат выдачи будет отмечен на прередеринг.
  • Сделать эмулятор кота Шрёдингера (на иллюстрации), который отобразит живого или мёртвого кота только тогда, когда пользователь откроет загруженный в фоне таб.

Чтобы сделать работу с Page Visibility API более удобной, я (во славу Злых марсиан) разработал библиотеку Visibility.js. Она позволяет забыть о вендорных префиксах и добавляет «сахара» высокоуровневых функций, чтобы писать короткий чистый код (например, Visibility.every — аналог setInterval, но работает только, если сайт в открытом табе).

Милый пример видео-проигрывателя, который останавливает видео, когда страница становится невидимой (открывать в Google Chrome 13).
Читать дальше →
Total votes 97: ↑95 and ↓2 +93
Comments 49

WebM: Google открыл видео-кодек VP8

Reading time 1 min
Views 5.4K


Кажется войне Theora против H.264 пришёл конец. В битве между свободным и лучшим победило свободное и лучшее.

Как мы помним, Google недавно купила компанию On2. Это компания известна не только тем, что открыла VP3, который лёг к основу свободного кодека Theora, но и тем, что создала отличный видео-кодек VP8 который вполне может потягаться с текущим лидером H.264. Компании Google (как и многим другим) очень не выгодна война кодеков вокруг тега <video> в HTML5. Поэтому как только On2 была куплена сразу начали говорить, что VP8 скоро откроют, что и произошло недавно (лицензия BSD).

Однако VP8 — это только видео-код. Чтобы смотреть фильм, нужно ещё кодировать звук и собрать все потоки данных в один файл. Поэтому был предложен набор WebM: Vorbis в качестве аудио-кодека (известен некоторым под неправильным названием Ogg) и Matroska в качестве контейнера (известен из раздач торрентов, обладает кучей функций и основан на бинарном XML).

Конечно же новый стандарт не захватит мир сразу — он ещё в статусе dev preview, надо добавить поддержку в браузеры, на сайты и в чипы мобильных устройств. Поддержка уже есть в ночных сборках Firefox, Chromium, Opera и ffmpeg. А YouTube уже отдаёт видео в WebM (нужно включить HTML5 и добавить &webm=1 в URL) и наверняка на него перейдёт Википедия, потому что он свободный. Процесс пошёл и победа WebM — лишь вопрос времени.

Адрес проекта: webmproject.org.
Total votes 199: ↑188 and ↓11 +177
Comments 220

HTML 5 в Internet Explorer

Reading time 3 min
Views 57K
image

Вкратце: как заставить новые теги из HTML 5 работать в Internet Explorer.

Любой веб-разработчик смотря на HTML 5 плачет от счастья, которое наконец-то пришло в наш дом. Для большинства функций (такие как WebGL, многопоточность и веб-сокеты) придётся ждать поддержки от браузеров (а в самых правильных эти возможности уже есть), но новые удобные теги мы можем использовать уже сейчас.

Однако Internet Explorer (даже последней, 8-ой версии) и тут сумел споткнуться — новые теги вне HTML 4 он просто не замечает — на них нельзя повесить стили.

В IE проблем даже две — отдельно нужно включать поддержку HTML 5 тегов в обычном документе, и отдельно в содержимом, которое добавляется динамически (например, через AJAX).
Читать дальше →
Total votes 107: ↑88 and ↓19 +69
Comments 66

twitter2vk — из Твиттера во В Контакте

Reading time 3 min
Views 3.8K


twitter2vk — скрипт для автоматической перепубликации статусов из Твиттера во В Контакте. Например, если у вас остались старые друзья, которые никак не хотят уходить из В Контакте.

Преимущества


  • Не хранит паролей, так что потеря файла настроек не будет столь страшна. В настройках хранятся только ID сессии В Контакте и данные для OAuth-входа в Твиттер. Особенно актуально для тех, кто использует один пароль для нескольких сервисов.
  • Поддерживает ретвиты — публикует во В Контакте статусы других пользователей, которые вы отретвитили.
  • Настройка формата статусов и ретвитов во В Контакте. Можно, например, заменять пользователей на ссылки на них или обрезать текст оставляя ссылку после него в полном виде: «Длинный текс… http//twitter.com/my/status/31337».
  • Правила исключения статусов. Можно указывать, какие статусы не будут перепубликоваться во В Контакте (например, ответы другим пользователям Твиттера).

Читать дальше →
Total votes 33: ↑20 and ↓13 +7
Comments 25

12.02 — Ruby-встреча в Петербуре — хостинг

Reading time 1 min
Views 800
image

Когда: 18:30, пятница, 12 февраля 2010.
Где: м. Политехническая, учебный центр Авалон (ФПО СПбГПУ, ул. Обручевых, д. 1), аудитория 107.

Тема встречи — настройка сервера для приложений на Rails/Ruby. Прямо на встрече мы настроим VDS*, для последующего размещения сайта сообщества (который разумеется будет написан на Ruby).

Я уверен многим разработчикам приходится (и это полезно) иногда надевать шляпу системного администратора чтобы поднять сервер для своего проекта. Вероятно многие имеют представление о том, как это сделать, но есть какие-то белые пятна, желание лучше разобраться или узнать про альтернативные способы. Поэтому мы хотим собраться и попробовать настроить реальный production сервер. Максим Филатов будет рулить процессом и покажет один из способов настройки.

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

* — любезно предоставленный locum.ru.
Total votes 34: ↑30 and ↓4 +26
Comments 8

Coffeescript — Javascript в силе Ruby

Reading time 2 min
Views 22K
CoffeeScript — язык, чтобы писать на JavaScript с более удобным синтаксисом.

Краткий пример на CoffeeScript (с jQuery):
jQuery($ =>
 notified: false
 $('a').click( =>
  if notified
   true
  else
   $('.alert').show()
   false..
 ).
)

Этот код будет транслирован в:
jQuery(function($) {
  var notified = false;
  $('a').click(function() {
    if (notified) {
      return true;
    } else {
      $('.alert').show()
      return false;
    }
  })
})

Но обо всём по порядку
Total votes 54: ↑30 and ↓24 +6
Comments 120

Автозавершение для Rake

Reading time 1 min
Views 1.6K


Автозавершение в bash’е по Tab’у — это невероятно удобная вещь. И оно точно нужно для rake, которым каждый программист на Ruby пользуется часто.

Особо ленивые программисты уже давно прописали самодельные скрипты в своих .bashrc. Но настоящий дзен-программист не должен любить велосипеды и чтит репозитории и пакеты. Поэтому я собрал скрипт в пакет и выложил в Ubuntu on Rails PPA.

Установка


Ubuntu
  1. Добавляем Ubuntu on Rails PPA:
    $ sudo add-apt-repository ppa:ubuntu-on-rails/ppa
  2. Устанавливаем пакет rake-completion:
    $ sudo apt-get install rake-completion
Другие UNIX
  1. Клонируем репозиторий:
    $ git clone git://github.com/ai/rake-completion.git
  2. Копируем скрипт в системную папку:
    $ sudo cp rake-completion/rake /etc/bash_completion.d/.
Читать дальше →
Total votes 33: ↑28 and ↓5 +23
Comments 24

GMate — набор полезных расширений для gedit

Reading time 2 min
Views 8.7K
image

Редактором по умолчанию в GNOME и, следовательно, Ubuntu является gedit. И в отличии от Блокнота в Windows он полезен :), однако выглядит он всё таки очень простым, даже после установки пакета gedit-plugins. Но на самом деле это довольно милый и хорошо расширяемый редактор, нужно просто добавить воды расширений.

GMate смотрит в сторону прекрасного TextMate из Mac OS X и содержит в себе подборку самых вкусных расширений, сниппетов, тем. Изначально, GMate создавался именно для Ruby-разработчиков, но пригодиться и для других разработчиков.

Если Вы любите GNOME и Ruby, то просто обязаны его поставить :).
Читать дальше →
Total votes 55: ↑47 and ↓8 +39
Comments 55

Свободный выбор предметов

Reading time 2 min
Views 15K
Сейчас российское высшее образование начало заимствовать некоторые вещи из западного. Многие заимствования весьма спорны, но есть в западных университетах очень полезная идея — свободный выбор предметов.

У специальности есть набор базовых предметов (физика, математика), которые должны сдать все (чтобы хоть как-то понимать современные знания или хоты бы смеяться над xkcd). Остальные предметы вы выбираете сами.

У каждого предмета есть набор кредитов (например, на IT-направлении история получит меньше кредитов, а ИИ или функциональное программирование больше). Студенты для получения специальности должны сдать все обязательные базовые предметы и набрать определённую сумму кредитов.

Плюсы:
  • Если студент уже решил, чем будет заниматься в будущем, то он может изучить нужные именно ему предметы.
  • Когда студент сам выбрает предмет, то его мотивация будет выше. «Неизбежность порождает сопротивление, выбор порождает ответственность».
  • Получение двойки не равносильно отчислению — можно сдать предмет просто в следующем году. Так что преподавателям не надо тянуть студентов на тройку по непрофильным предметам (типа психологии на IT-направлении).
  • По количеству выбравших курс у университета будет обратная связь по востребованности темы и способностям лектора.
  • Студент сразу учится сам выбирать, а не плыть по течению.

Читать дальше →
Total votes 78: ↑68 and ↓10 +58
Comments 179

28 октября: Ubuntu Install Party в Санкт-Петербурге

Reading time 1 min
Views 914
Когда: 28 октября 18:00.
Где: м. Василеостровская, В.О., 10-я линия д. 33/35, АНО «Феникс» (белая дверь напротив входа, звонок справа).

В рамках линуксовки пройдёт праздник в честь выхода Ubuntu 9.10. Расскажем о Ubuntu, поможем поставить, ответим на вопросы. Подробнее.

По возможности записывайтесь на странице Вики. Можете взять паспорт, чтобы показать охране на входе или просто скажите «я на линуксовку».
Total votes 39: ↑31 and ↓8 +23
Comments 5

Руби-встреча в Петербург: noSQL

Reading time 1 min
Views 906
Когда: 15 октября (четверг) 2009 в 18:30.
Где: Учебный центр «Авалон».

Тема этой встречи — noSQL, не реляционные базы данных. Будет два доклада:
Алексей Газиев за еду расскажет про MongoDB.
Роман Снитко — про TokyoCabinet.

Очевидно что выступления займут меньше времени, чем в прошлый раз, поэтому есть предложение собраться после них где-нибудь поблизости от Авалона и просто пообщаться.

Также мы можем выделить немного времени для различного рода
объявлений. Например, если в Питере есть работодатели, которые ищут
Ruby-программистов, то мы с удовольствием предоставим им время
рассказать о своих вакансиях. Либо если есть какие-то проекты, которым
нужна помощь. Просто предупредите заранее и приходите на встречу.
Total votes 22: ↑17 and ↓5 +12
Comments 7

Ubuntu будет запускать приложения под Android

Reading time 1 min
Views 6.5K
Сейчас в Барселоне идёт активное обсуждение будущего выпуска Ubuntu 9.10 Karmic Koala. И было анонсировано, что Ubuntu будет запускать приложения под Android.

Для запуска будет использоваться Android Execution Environment, который будет не просто эмулятором-телефона (как в SDK), а запускать каждое приложение в своём отдельном chroot-окружении. Основные трудности связаны с тем, что в Android нет X, потому нужно написать транслятор вызовов (или просто сделать обёртку над java-функциями). Ubuntu будет так же поддерживать установку приложений в android-формате APK.

Как мы уже знаем, Android во всю портируют под нетбуки, чтобы их можно было бы делать на ARM-процессорах (что существенно увеличивает время автономной работы), так что в Android Market скоро будут не только специфичные для телефона приложения. Ubuntu тоже стремиться на этот рынок (тоже поддерживая ARM) и поддержка android-приложения будет очень на руку.
Читать дальше →
Total votes 46: ↑43 and ↓3 +40
Comments 32

Обучение программирования на Ruby/Python

Reading time 4 min
Views 37K
BASIC и Pascal давно стали стандартом при начальном обучении программиста. Для многих это первый язык со школы или первого курса университета. Однако за десяток лет ситуация практически не изменилась. Действительно ли Basic и Pascal подходят для обучения сейчас? Неужели за десяток лет не появилось ничего лучше?

Подумайте, есль ли причины использовать BASIC и Pascal кроме исторических?

В школе давно понятно — лучше давать не программирование, а основы использования компьютера. Максимум — Logo в среде типа KTurtle.

Но для первых курсов института и усиленного изучения школьников я считаю, лучше использовать Ruby и Python.

Конечно я не настаиваю учить только на Ruby. Но, например, базис дать на Ruby, а более сложное на Java/C# или С (включая управление памятью) — более правильно скажется на становлении программиста.

Далее аргументы.
Читать дальше →
Total votes 66: ↑50 and ↓16 +34
Comments 256
1

Information

Rating
5,063-rd
Location
Barcelona, Barcelona, Испания
Date of birth
Registered
Activity