• Привлекательные экспериментальные плагины на JavaScript

    • Translation

    Вступление


    Я безумно люблю различные эксперименты на JS. Они словно позволяют заглянуть нам в будущее, и посмотреть, каким захватывающим и футуристичным оно будет. Когда вы будете просматривать приведенную подборку, вы наверняка вспомните про еще недавнего короля — Adobe Flash, а затем осознаете, насколько быстро CSS и JavaScript лишили его трона. Современные браузеры позволяют нам использовать множество различных эффектов и анимаций без сильных тормозов. Однако слово «экспериментальный» подразумевает ряд ограничений, как например некорректное отображение в некоторых браузерах (IE), кроме того, подобные плагины будут, скорее, отличным концептуальным дополнением для персональных страниц, а не для использования в больших проектах.

    Meny


    image

    Meny — трехмерное меню, которое помимо своей визуальной притягательности еще и экономит место на экране. При наведении (или свайпе на тачскрине, что важно), меню «выезжает» с отличным эффектом.
    Читать дальше →
    • +116
    • 48.4k
    • 35
  • Вышла версия 1.0.0 кросс-браузерного фреймворка для создания расширений Kango


      Спустя полтора года разработки вышел финальный релиз фреймворка Kango.
      С помощью Kango можно создавать расширения сразу под 5 браузеров (Chrome, Firefox, Opera, Safari, Internet Explorer) используя общий JavaScript код.
      Читать дальше →
    • Фронт-энд Островка изнутри

        Привет, меня зовут Игорь (iamo0), я старший фронт-энд разработчик в Островке. Я занимаюсь нашим основным продуктом: сайтом Ostrovok.ru. С помощью нашего сайта ежедневно бронируют отели тысячи человек, поэтому для нас очень важно, чтобы качество нашего продукта было на высоте. А для этого нужно не отвлекаться на разного рода мелочи и уметь эффективно решать поставленные задачи.

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

        Не претендую на то, что мой рассказ сорвет покровы или станет настоящим откровением. Хочу поделиться с вами опытом работы с большими приложениями, накопленным разработчиками Островка.
        Читать дальше →
      • Что под капотом у vk.com

          Данный пост — небольшой отчет о процессе реверсивного проектирования и анализа работы самой популярной соц. сети в СНГ — vk.com. В основном анализ проводился со стороны безопасности (хотя сама соц. сеть весьма привлекательна как high-load проект, безусловно). Для себя вынес некоторые интересные решения и просто получил удовольствие. Пост получился, возможно, немного сумбурный, так углублялся просто в интересные мне моменты.

          Содержание


          Обзор

          Архитектура

          • php 5.2/5.3
          • Периоды нагрузки (отключения автоподгрузки ленты)
          • Врапперы в сообщениях
          • Разный код для мобильной и полной версий

          Security

          • Фичи
            • Авторизация
            • Anti-CSRF токены
            • Запрет iframe
            • Отключенный POST на контент-серверах
          • Фиче-баги
            • Узнать возраст через поиск
          • Баги
            • XSS
            • Загрузка документов без имени
            • Подгрузка по ajax фото из закрытых альбомов (?)
            • Не везде anti csrf

          Разное

          Читать дальше →
        • Архитектура таймеров в node.js

            Я бы хотел рассказать о таком замечательном и повсеместно используемом в node.js инструменте, как таймеры, и об их использовании в функциях setTimeout, setInterval и в модуле net. В node.js за таймеры отвечает модуль ядра timers.js. setTimeout — всего лишь доступная глобально функция из этого модуля.
            Читать дальше →
            • +28
            • 18.4k
            • 3
          • Сравнение адаптивных CSS фреймфорков: Bootstrap, Foundation и Skeleton



              Недавно Brian Haveri в блоге vermilion.com сделал отличное наглядное сравнение популярных CSS-фреймворков (статья), которые можно использовать для разработки адаптивных сайтов.

              За последний год мне удалось поработать со всеми этими фреймворками: Bootstrap, Foundation и Skeleton, и могу сказать, что в свое время такая табличка сохранила бы кучу времени. Поэтому я перевел ее на русский язык, добавив немного своих комментариев. Надеюсь будет полезно хабровчанам.
              Читать дальше →
            • Подборка инструментов для эффективной frontend разработки

                В эту прекрасную пятницу осмелюсь предложить хабрасообществую небольшую подборку приложений, предназначенных для увеличения продуктивности во время работы с фронтэндом. Если ваш любимый апп здесь не представлен — добро пожаловать в комментарии!

                Form Builder

                image

                Этот прекрасный генератор форм поможет вам в создании красивейших CSS логин-боксов и прочих input вещей, при минимальных временных затратах. Помимо форм на сайте этого проекта можно создавать и другие не менее красивые CSS элементы, в том числе кнопки и ленты.
                еще 24 ссылки
                • +190
                • 99.2k
                • 46
              • Новшества node-webkit версии 0.3.0

                  Zhao Cheng вчера объявил о выходе новой версии движка node-webkit созданного в недрах Intel Open Source Technology Center мощного сочетания WebKit и Node.js, позволяющего создавать кросс-платформенные графические приложения на языках HTML, CSS и JavaScript.

                  Новая версия будет иметь номер 0.3.0 и выглядеть вот как:

                  [скриншот]

                  (На скриншоте изображена демка от AppJS, которую я портировал на движок node-webkit. Запущена она в Windows XP.)

                  Как видно, новая версия node-webkit теперь куда более походит на Google Chrome по оформлению окна.

                  И вот список других новшеств этой версии:

                  Читать дальше →
                • Красивые чекбоксы и радиокнопки на CSS3 без JavaScript

                  • Tutorial
                  Благодаря псевдоклассу :checked, появившемуся в CSS3, можно стилизовать формы с чекбоксами и радиокнопками как угодно. В этом топике рассмотрен один очень простой способ, причем без использования JavaScript.



                  Демонстрация Скачать исходники
                  Читать дальше →
                • Система online документации для JavaScript — ADWiki



                    Ссылочки


                    Что ADWiki умеет:
                    • Парсить файлы Вашего проекта описанные на jsdoc
                    • Поднимать сайт с чистеньким дизайном на bootstrap
                    • Организовывать на сайте небольшой блог, где Вы сможете дополнять документацию статьями о проекте


                    Читать дальше →
                    • +31
                    • 10.5k
                    • 8
                  • Транзакции в MongoDB

                    • Tutorial
                    image MongoDB — замечательная база данных, которая становится все популярнее в последнее время. Все больше людей с SQL опытом начинают её использовать, и один и первых вопросов, который у них возникает: MongoDB transactions?.

                    Если поверить ответам со stackoverflow, то все плохо.

                    MongoDB doesn't support complex multi-document transactions. If that is something you absolutely need it probably isn't a great fit for you.
                    If transactions are required, perhaps NoSQL is not for you. Time to go back to ACID relational databases.
                    MongoDB does a lot of things well, but transactions is not one of those things.
                    Но мы не поверим и реализуем транзакции (ACID*) основанные на MVCC. Ниже будет рассказ о том, как эти транзакции работают, а тем, кому не терпится посмотреть код — добро пожаловать на GitHub (осторожно, java).

                    Пост не о MongoDB, а о том, как использовать compare-and-set для создания транзакций, а durability обеспчивается ровно в той степени, в которой её обеспечивает хранилище.
                    Читать дальше →
                  • CSS3 поддержка в браузерах

                    • Translation
                    imageХотя CSS3 ещё не является стандартом W3C, последние версии браузеров имеют его частичную поддержку. Можно встретить примеры реализующие те или иные свойства CSS3. Но вместе с восторгом многих не покидает также чувство опасения. Связано это в первую очередь с тем, что нет чёткого понимания в поведении браузера при обработке этих свойств. Под катом собрана таблица в которой сравниваются поддерживаемые CSS3 свойства во всех основных браузерах. Кроме этого указывается версия браузера и префикс для кодирования. Шпаргалка в форме изображения, поэтому её удобно скачать к себе на компьютер или мобильное устройство для дальнейшего использования.

                    Показать таблицу
                  • Пишем редактор карт изображений (html image map) на javascript / html5 / inline SVG

                    • Tutorial
                    Карты изображений применяются в том случае, когда требуется создать ссылку формы, отличной от прямоугольной. Например, для презентационных сайтов, отображения планов/схем и т.п.

                    Раньше создавать такие карты было удобно в Adobe ImageReady, но начиная с версии CS3 эта программа больше не поставляется с Фотошопом. На сегодняшний день подобный функционал есть в Adobe Fireworks, но устанавливать эту программу только из-за редактора карт (для работы мне нужен только Фотошоп) — не очень хорошая идея. Существуют и онлайн-редакторы, которые написаны, в основном, с использованием canvas. В них отсутствует возможность редактировать созданные области на карте. Если ошиблись — придется все переделывать. Да и создавать эти области не слишком удобно. Еще одно неудобство заключается в том, что картинку приходится загружать на сервер. В общем, надо писать что-то свое.

                    Итак, задача:
                    — написать на javascript редактор, который позволит создавать карты изображений — загружаем картинку, рисуем области, получаем html-код. Если ошиблись — должна быть возможность отредактировать карту. Редактор должен работать в оффлайн-режиме. Обеспечить поддержку только современных браузеров, в том числе Internet Explorer 9.

                    Summer html image map creator
                    Читать дальше →
                    • +48
                    • 41.3k
                    • 8
                  • Тюнинг nginx

                      Статья написана по материалам моего доклада на CodeCamp 2009.

                      Для многих из нас настает тот долгожданный день, когда аудитория сайта начинает стремительно расти. Каждое утро мы, затая дыхание, смотрим на графики google analitycs и расплываемся в улыбке, когда взят рубеж в очередную тысячу посетителей в день. Как правило, рост посещаемости не совпадает с ростом технической базы и сайт начинает тормозить. Тут в игру вступает сисадмин...

                      У любого проекта всегда есть что оптимизировать: можно почитать советы по оптимизации на webo.in, установить eaccelerator, memcache, проиндексировать поисковые поля в базе данных. Я предполагаю, что все это уже проделано, а сайт по прежнему тормозит.

                      Пришло время оптимизировать nginx...

                      Читать дальше →
                    • Node.js + Chromium = node-webkit: ещё более перспективный вариант второго шага эволюции веборазработчика

                      • Translation
                      Предисловие от переводчика.  В постскриптуме к моей вчерашней блогозаписи я указал, что AppJS — это не единственное такое средство, которое позволяет создавать приложения с GUI (графическим интерфейсом пользователя) при помощи вебоподобных методов разработки на языках HTML, CSS и JavaScript с использованием движка Node.js. Естественной иллюстрацией к этому постскриптуму является нижеследующий перевод гитхабовской страницы проекта node-webkit. И сразу скажу: я предвижу заранее, что непредвзятый взгляд ваш сочтёт node-webkit ещё более удобным и развитым средством, чем AppJS.



                      Введение


                      node-webkit — среда для запуска приложений, основанная на Chromium и Node.js. При помощи node-webkit можно создавать традиционные графические приложения посредством HTML и JavaScript. Также node-webkit позволяет вызывать модули Node.js прямо из DOM и тем обеспечивает новый способ создания таких приложений и употребления веботехнологий в них.

                      node-webkit создан и разрабатывается в Интеловском Центре технологий с открытым исходным кодом (Intel Open Source Technology Center).

                      Введение в node-webkit (слайды).

                      Достоинства


                      • Приложения создаются при помощи современных HTML5, CSS3, JS и WebGL.
                         
                      • Полная поддержка API Node.js и созданных другими разработчиками модулей.
                         
                      • Вызов API Node.js без потерь в производительности.
                         
                      • Лёгкость упаковки и распространения приложений.

                      Читать дальше →
                    • JavaScript — полезные материалы

                        Хочу поделиться набором ссылок на нексолько полезных, интересных и, возможно, не самых известных материалов по JavaScript. Из них вы узнаете немного больше об истории появления языка, о его настоящем, тонкостях реализации в различных браузерах, и о будущем развития стандарта ECMAScript. О различных способах наследования в том числе об эмуляции «классического» ООП, множественном наследовании и миксинах. О функциональном стиле программирования в JavaScript: чистые функции, map, reduce, частичное применение и композиции функций. И, наконец, что если бы Хемингуэй писал на JavaScript?
                        Читать дальше →
                        • +123
                        • 77.8k
                        • 29
                      • Прибитый к низу футер своими руками

                        • Tutorial
                        Все, кто привык к полноценно оформленным страницам сайтов, предпочитает вид «прибитого» (прилипающего, sticky) к низу футера страницы. Но есть в интернете две беды: нерастущие вниз поля ввода и неприбитые (к низу окна) футеры. Например, когда открываем короткие по высоте страницы типа habrahabr.ru/settings/social — сразу бросается в глаза, что информация, призванная быть в нижней части окна просмотра, прилипает к содержанию и находится где-то посередине, а то и в верхней части окна, когда внизу — пусто.

                        Так, вместо того, чтобы .
                        Данное пособие для начинающих верстальщиков покажет, как за 45 минут сделать «прибитый» футер, исправив недоработки даже такого уважаемого издания, как Хабр, потягаться с ним в качестве исполнения своего перспективного проекта.
                        как сделать, чтобы трава была зелёная, а футеры - прибитыми
                      • Потоковая загрузка и обработка видео посредством node.js + php и ffmpeg — часть первая

                        Работаю в аутсорсинговой компании и как-то встала задача загрузки видео с возможностью последующей обработки для внутренних нужд приложения: ресайз до нужного размера, конвертирование к нужному формату, вытягивание аудио-дорожек (если таковые присутствуют), раскадровка видео. В конце результаты нужно сохранить в облачном хранилище для последующего использования в онлайн-редакторе. Требования: масштабируемость, неограниченый размер видео, скорость, кроссбраузерность, наглядность.

                        Поскольку тема очень обширная, разделю ее на разделы:

                        1. Общие проблемы, нюансы, с которыми пришлось столкнуться
                        2. Загрузка видео (на этой теме, пожалуй, не буду останавливаться, поскольку она уже поднималась в этом и этом посте.
                        3. Обработка видео.
                        4. Сохранение в облачном хранилище.

                        Читать дальше →
                      • Sublime Text 2

                          Пару месяцев назад я случайно наткнулся на массу положительных отзывов о текстовом редакторе Sublime Text 2. Попробовав его в деле, я не разочаровался. Теперь это мой основной рабочий инструмент.

                          Sublime Text 2 — это платный текстовый редактор, написанный на C++, который:

                          • Работает в Linux, OS X и Windows
                          • Обладает приличной скоростью работы
                          • Приятным интерфейсом (включая всевозможные анимации)
                          • Гибко настраиваем (правда, не в GUI, а в json-конфигах)
                          • Имеет множество плагинов, число которых растёт как на дрожжах
                          • Поддерживает VIM-режим
                          • Использует fuzzy-поиск
                          Читать дальше →