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

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

      SPB Frontend

      В программе будут доклады про библиотеку красивых интерфейсов Famo.us, webpack (будущее системы сборки после Grunt) и PostCSS (будущее после Sass и LESS).
      Читать дальше →
    • «Цифровой шаббат» или как месяц без компьютеров изменил меня

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

        Цифровые и доцифровые вещи
        Слева мои вещи из цифровой жизни — я бережно выключил питание, собрал их вместе и положил глубоко в сумку. Для новой жизни я достал те вещи, которые на фотографии справа.
        Читать дальше →
      • Курс по Ruby on Rails от Злых марсиан

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

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

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


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

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

          На курсе мы углубляем понимание работы Rails, делимся опытом, который мы получили в крупных проектах, даем полезную выжимку знаний и развеиваем популярные заблуждения. Иными словами, за короткий срок «прокачиваем» разработчиков на Ruby on Rails, тимлидов и технических директоров Rails проектов.
          Читать дальше →
          • +12
          • 11,1k
          • 4
        • Автопрефиксер — окончательное решение проблемы префиксов в CSS

            Автопрефиксер — утилита нового поколения для добавления префиксов к экспериментальным свойствам из 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, но лучше всего обрабатывать стили на этапе разработки и выкладки, а не повторять обработку каждый раз в браузере клиентов.

            Понятно, что языки препроцессоров не позволяют решить проблему полностью, нужен был фундаментально новый инструмент.
            Читать дальше →
          • Page Visibility API и Visibility.js

              Кот Шрёдингера

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

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

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

              Милый пример видео-проигрывателя, который останавливает видео, когда страница становится невидимой (открывать в Google Chrome 13).
              Читать дальше →
            • WebM: Google открыл видео-кодек VP8



                Кажется войне 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.
              • HTML 5 в Internet Explorer

                  image

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

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

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

                  В IE проблем даже две — отдельно нужно включать поддержку HTML 5 тегов в обычном документе, и отдельно в содержимом, которое добавляется динамически (например, через AJAX).
                  Читать дальше →
                • 12.02 — Ruby-встреча в Петербуре — хостинг

                    image

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

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

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

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

                    * — любезно предоставленный locum.ru.
                  • Coffeescript — Javascript в силе Ruby

                      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;
                          }
                        })
                      })

                      Но обо всём по порядку
                    • Автозавершение для Rake



                        Автозавершение в 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/.
                        Читать дальше →