• 5 действительно полезных шаблонов адаптивной разметки

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

      image

      Адаптивная разметка требует совершенно иного образа мышления при планировании структуры макета, что является одновременно и сложным и интересным. Чтобы перепрограммировать свой мозг, чтобы посмотреть на макеты по-новому, мы собираемся взглянуть на некоторые интересные шаблоны адаптивной разметки, которые были созданы талантливыми дизайнерами по всему вебу.
      Читать дальше →
      • +147
      • 95,8k
      • 38
    • Сверхплавные трансформации для jQuery

        Недавно наткнулся на jQuery Transit, плагин для плавных трансформаций и переходов. Вместо работы с таймерами, плагин использует CSS3 трансформации.

        Работает с тем же синтаксисом, что и animate, но вместо этого стоит использовать метод transition.

        С более старыми браузерами новые эффекты не работают, а стандартные CSS будут меняться, хотя и без какой-либо анимации. Для того, чтобы откатиться обратно на animate, достаточно использовать следующее:
        if (!$.support.transition)
            $.fn.transition = $.fn.animate;
        

        Всего 2КБ.
      • Unit-тестирование от начинающего начинающим

        Здравствуйте.

        На написание статьи меня сподвигнул этот пост. В нём приведено описание инструментов и некоторая теоретическая информация.

        Сам я только начинаю разбираться в unit-тестировании и тестировании вообще, поэтому решил поделиться некоторой информацией касательно этого дела. А также систематизировать свои знания и навыки. Далее постараюсь объяснить процесс тестирования по шагам простым обывательским языком, так как нигде в интернете не нашёл разжёванного описания, по шагам так сказать. Кому интересно и кто хочет попробовать всё-таки разобраться, добро пожаловать.
        Читать дальше →
      • Легкий способ начать тестировать

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

          Итак, первый совет. Забудьте всё что вы знаете о юнит-тестах. Швырните табуреткой в человека, который сказал вам, что без них не обойтись. Попробуем разобраться, в каких случаях нужно их использовать, а в каких — нецелесообразно.
          Читать дальше →
        • Улучшаем юзабилити за 5 минут

          • Перевод
          • Tutorial
          В этой блогозаписи я намерена поделиться несколькими такими советами по увеличению юзабилити сайта, каждый из которых очень лёгок в реализации. Не все они кросс-браузерны, но всё равно они «глазурь на тортике»: читатель и не заметит, что их нет.

          1. Отображайте нажатия кнопок и кнопкоподобных ссылок


          Мой излюбленный совет. Когда стиль кнопки задаётся в CSS, или когда для отображения необычной кнопки используется рисунок (либо как фон, либо как элемент <img />), то кнопка не реагирует на нажатие во всех или в некоторых браузерах (зависит от ситуации). Вот какой простой уловкою вы можете дать знать посетителю сайта, что он и впрямь нажал на нечто нажимаемое:

          .mybutton:active {
             position: relative;
             top: 1px;
             left: 1px;
          }
          

          Этим кодом кнопка смещается на 1 пиксел направо и на 1 пиксел вниз, когда её нажимают. Испробуйте: выглядит весьма убедительно.

          Есть другие, не менее быстрые варианты: придать границе свойство inset, указать свойству text-indent значение 1px, изменить направление градиентного фона (что можно сделать быстро, если для этого не придётся прибегнуть ко графическому редактору, то есть если где-то ещё на сайте используется готовый перевёрнутый градиент), или комбинация нескольких из них.

          2. Плавные переходы (CSS3 transitions)


          Читать дальше →
        • JavaScript. Оптимизация: опыт, проверенный временем

          Предисловие


          Давно хотел написать. Мысли есть, желание есть, времени нету… Но вот нашлось, так что привет, Хабра.
          Здесь я собрал все идеи, которые помогали и помогают в разработке веб-приложений. Для удобства я разбил их на группы:
          1. Память
          2. Оптимизация операций
          3. Выделение критических участков
          4. Циклы и объектные свойства
          5. Немножко о DOM
          6. DocumentFragment как промежуточный буфер
          7. О преобразованиях в объекты
          8. Разбитие кода
          9. События перетаскивания
          10. Другие советы

          Сейчас речь не пойдёт ни о каких библиотеках. Я постараюсь передать знания о механизмах самого языка, а не их реализациях в библиотеках.

          Память

          Хоть это и не должно волновать клиентского программиста, но не забываем, что память всё-таки не бесконечна и когда-нибудь может закончиться, например, когда запущено несколько массивных программ: офис, графический редактор, компиляция большой программы и др. Несмотря на то, что приведенный пример тривиален, у меня действительно такое случилось, хоть и не из-за браузера, но он тоже сыграл свою роль: 1,3 Гб оперативы (отладчик, около 30 вкладок), начались тормоза по перегрузке страниц ОП в файл подкачки.
          Чтобы уменьшить расход памяти, я предлагаю несколько способов:
          Читать дальше →
        • Паттерны ООП в метафорах

            Большинство литературы посвященной паттернам в ООП (объектно-ориентированном программировании), как правило, объясняются на примерах с самим кодом. И это правильный подход, так как паттерны ООП уже по-умолчанию предназначаются для людей, которые знают что такое программирование и суть ООП. Однако порой требуется заинтересовать этой темой людей, которые в этом совершенно ничего не понимают, например «не-программистов» или же просто начинающих «компьютерщиков». Именно с этой целью и был подготовлен данный материал, который призван объяснить человеку любого уровня знаний, что такое паттерн ООП и, возможно, привлечет в ряды программистов новых «адептов», ведь программирование это на самом деле очень интересно.
            Статья предназначена исключительно для новичков, так что «старожилы» ничего нового для себя не узнают. В основном статья описывает известные паттерны из книги «Приемы объектно-ориентированного программирования. Шаблоны проектирования.», но более популярным и простым языком.
            Читать дальше →
          • Загрузка картинок на сервер с использованием HTML5+jQuery+PHP

              Доброго времени суток!

              Наверняка многие видели в движке WP функцию переноса файлов с рабочего стола в окно браузера и их дальнейшую загрузку на сервер. Когда я увидел такое, мне стало интересно как же это организовано. Тогда я полез в дебри, чуть было не заблудился, но всё таки решение нашел. Оказывается все очень просто.

              Что нам понадобится?


              Всего лишь небольшие знания HTML5+jQuery+PHP.
              Читать дальше →
            • Codeception — тестирование по-новому

                PHP очень популярный язык программирования, но тестирование в нем, это скорее прерогатива экспертов, а не жизненная необходимость. Неужели это от того, что PHP-разработчики поголовно быдло-кодеры? Я считаю, что нет. Скорее всё от того, что системы тестирования порой излишне усложнены. А тесты, наоборот, должны были предельно просты: легко читаться, писаться, отлаживаться, и конечно же, быстро выполняться. Мое виденье того как это можно воплотить в PHP вылилось в проект под названием Codeception.

                С ним тесты для ваших веб-приложений могут выглядеть так:
                <?php
                $I = new TestGuy($scenario);
                $I->wantTo('create new blog post');
                $I->amOnPage('/blog/posts');
                $I->click('Create new post');
                $I->fillField('Title','Codeception, a new way of testing!');
                $I->fillField('Text','Codeception is new PHP full-stack testing framework.');
                $I->click('Send');
                $I->see('Congratulations, your post is successfully created!');
                


                Согласитесь, такой тест понятен без дополнительных комментариев.
                А теперь самое интересное: этот код без всяких изменений может быть выполнен как функциональный тест в фреймворках symfony, Symfony2,Zend Framework, а также в браузерном эмуляторе Goutte и даже через Selenium. Таким образом, вам предлагается единый интерфейс для написания функциональных тестов практически для любого сайта.
                Читать дальше →
              • Workreactor: фриланс против бизнеса

                  Какое-то время назад я описал для хабрасообщества идею виртуальной корпорации — новой схемы трудовых отношений в цифровую эпоху.

                  Я утверждал, что основная проблема с широким распространением удаленной работы состоит именно в неподходящей системе управления — традиционной корпоративной культуре. Но нет никаких сомнений, что будущее человечества именно в распределенных, децентрализованных, виртуальных компаниях. Очевидно, что для большинства видов работы, где рабочим местом сотрудника является компьютер, нет никакого смысла постоянно перемещать физическое тело из дома в офис и обратно, на самом деле для этого есть только две причины:
                  1. Когда рабочий процесс организован не четко, требуется постоянное и интенсивное общение между сотрудниками чтобы совместно вырабатывать пути решения возникающих вопросов и согласовывать свои действия.
                  2. Когда у сотрудников нет прямой личной заинтересованности в качественном результате своей работы, менеджерам приходится жестко контролировать их, лично наблюдая за сотрудниками.

                  Мы с коллегами в течении пяти лет на своем опыте исследовали возможность альтернативной организации трудовых отношений, более подходящей для удаленной работы в современную цифровую эпоху. И пришли к выводу, что качественный перелом в этом вопросе может произойти только при выполнении следующих двух условий:
                  Читать дальше →