• 3D-трансформации средствами CSS


    Увидев на просторах сети пару впечатляющих примеров 3D-трансформаций средствами CSS — заинтересовался, решил разобраться в теме, прочитал несколько статей, вроде бы что-то понял. Но, как известно, теория без практики – как зомби — мертва, хоть и может съесть мозг.

    Для усвоения материала необходимо самому сделать что-нибудь любопытное с использованием прочитанного. Какой трехмерный объект сделать легче всего? Пожалуй, кубик. А чтобы результат получился интереснее и красивее, пусть это будет игральный кубик с точками на гранях. Поехали.

    Для нетерпеливых и тех, кто смотрит Хабр ради забавных картинок – конечный результат. Работает в Chrome, последних версиях Firefox, Safari. Opera 12.01 — пока никак, ну а про IE вы и сами все знаете.
    Читать дальше →
  • Подборка занимательных CSS рецептов «Голые пятницы #2»

    • Tutorial
    Привет, Хабр! В этот раз мы поговорим о стилизации инпутов без картинок и JS, особенностях вертикальных отступов, CSS счетчиках, необъятных возможностях в именовании классов, а также расскажем, как улучшить анимацию на слабых устройствах.

    голые пятницы
    Поехали!
  • Шпаргалка для сравнения классов Twitter Bootstrap и Zurb Foundation

    • Перевод


    Zurb Foundation — это крутой фронтэнд-фреймворк, являющийся достойной альтернативой бутстрапу, и стоит как минимум взглянуть на возможности Foundation, прежде чем отвергать его. Foundation имеет некоторые фичи, которых нет в Bootstrap.

    Эта короткая статья является по сути шпаргалкой, призванной помочь разработчикам начать работать с Foundation после работы с Bootstrap. Мы сравним основные классы для обоих фреймворков. По большей части, оба фреймворка имеют набор основных компонентов (сетка, кнопки, формы, таблицы), под катом представлена таблица сравнения классов для этих компонентов.
    Читать дальше →
  • Кастомизация input type=”file” с помощью CSS

      Есть несколько способов кастомизации (изменения внешнего вида) инпутов такого типа. Все они обладают своими плюсами и минусами, но, на мой взгляд, предложенный мною вариант, выигрывает даже со своими минусами, коих всего один.
      Читать дальше →
    • Новое в CSS3: многоколоночность, flexbox, сеточная разметка

      • Tutorial
      Веб развивается, появляются все новые возможности разметки страниц для верстальщиков, в том числе в этом помогают новые свойства в CSS. В этой статье я описал некоторые из них: многоколоночность, flexbox и сеточная разметка.

      Поддержку новых функций браузерами можно проверить на сайте caniuse.com:



      Читать дальше →
    • Абсолютное горизонтальное и вертикальное центрирование

      • Перевод
      • Tutorial
      Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (Stephen Shaw) для Smashing Magazine — Absolute Horizontal And Vertical Centering In CSS.

      Все мы знали о margin: 0 auto; для горизонтального центрирования, но margin: auto; не работало для вертикального. Это можно легко исправить, просто задав высоту и применив следующие стили:

      .Absolute-Center {
        margin: auto;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
      }
      

      Я не первый, кто предложил это решение, однако такой подход редко применяется при вертикальном выравнивании. В комментариях к статье How to Center Anything With CSS Simon ссылается на пример jsFiddle, где приводится отличное решение для вертикального центрирования. Вот еще несколько источников на эту тему.

      Рассмотрим способ поближе.
      Читать дальше →
    • Приводим в порядок css-код. Опыт Яндекса

        Всем привет!

        Я работаю над фронтендом огромного проекта — поисковой выдачи Яндекса. И у нас, как и у любого другого большого веб-проекта, есть огромное количество css-кода и немаленькая команда, которая с ним взаимодействует.

        Когда много людей, используя разные инструменты, пишут и редактируют css, со временем этот css может получиться очень запутанным, неконсистентым и в целом начинает выглядеть плохо. Например, кому-то удобнее писать вендорные префиксы в одном порядке, кому-то — в другом, кто-то ставит кавычки вокруг url, кто-то — нет, а кто-нибудь фикся срочную багу к релизу мог бы, к примеру, написать position: relative в начале блока свойств, незаметив что где-нибудь внизу между color и box-shadow, уже есть position: absolute, и долго гадать, почему у него ничего не работает.



        Но несмотря на то, что все пишут код по-разному, у нас в репозитории идеальный порядок: css-код полностью консистентен, и прекрасно выглядит. Весь.

        Как мы этого добились, можно прочитать под катом.
        Читать дальше →
      • Мы потеряли тот Веб

        • Перевод
        Кратко: после браузерных войн организация W3C и группы разработчиков, такие как Web Standards Project, долго и упорно работали, чтобы восстановить единый нефрагментированный Веб. Но в последние несколько лет мы, разработчики, взяли, и заново всё зафрагментировали… Наверное, нам надо понять, что мы теряем, прежде чем потеряем этот Веб навсегда.

        Ровно год назад патриарх веб-индустрии Anil Dash написал: "Мы потеряли Веб", скорбя по ранней, «досоциальной» блогосфере, до всех этих наших постингов фото, видео и мыслей, находящих последний приют в катакомбах Фейсбука, Твиттера, Инстаграма и Ютуба. Это вызвало отклик у многих, кто застал те дни; многих, кто по иронии судьбы затем ушёл работать в эти катакомбы.
        Читать дальше →
      • Подборка полезного для Twitter Bootstrap 3

          Прошло уже много времени с момента релиза Bootstrap 3, большинство инструментов, сервисов и других полезностей для известного CSS-фреймворка обновились, кроме того, появилось много новых интересных штук для Twitter Bootstrap. Предлагаю вашему вниманию подборку на эту тему.

          Bootstrap 3 PSD — Отличный UI-кит элементов фреймворка, сделано очень качественно.

          image
          Читать дальше →
        • DivShot — онлайн-сервис прототипирования Bootstrap

            DivShot — отличный новый инструмент для работы с Twitter Bootstrap. С помощью него создавать прототипы интерфейсов с использованием популярного CSS-фреймворка стало до безобразия просто.

            Читать дальше →
            • +135
            • 73,1k
            • 21
          • Применение замыканий в PHP

              Введение в PHP 5.3 замыканий — одно из главных его новшеств и хотя после релиза прошло уже несколько лет, до сих пор не сложилось стандартной практики использования этой возможности языка. В этой статье я попробовал собрать все наиболее интересные возможности по применению замыканий в PHP.
              Читать дальше →
            • Hetzner может неожиданно отключить ваш сервер

                Мы — небольшая группа разработчиков web, пишем сайты на заказ, хостим или у себя или у разных провайдеров по миру. У нас небольшой отдел тех. поддержки, стараемся в меру своих сил реагировать вовремя на возникающие проблемы. Статья написана тем, у кого есть свои сервера на Hetzner, чтобы были готовы к определённым особенностям поддержки.
                Читать дальше →
              • Начала отладки и профилирования веб-приложений

                Вступление


                Много существует статей на Хабре, описывающих интересные и сложные аспекты веб-разработки, но много существует читателей, которые, находясь в начале своей карьеры веб-разработчика, хотели бы видеть материал, который позволил бы сделать первый шаг от «PHP за 24 часа» до разработки на серьезном уровне, и я хотел бы поделиться своим опытом в этом деле.

                Особенности веб-приложения делают его разделенным на две части: клиентскую и серверную. На стороне клиента работает код на JavaScript (может быть, где-то можно найти и VBScript, но мы, пожалуй, не будем рассматривать этот случай), на серверной же — много что, в принципе, но мы рассмотрим PHP, наиболее популярный язык для серверной части веб-приложений. Так же интересно было бы поговорить об отладке и профилировании Flash-приложений на клиентской стороне, но затронутая тема и так обширна, так что пока оставим это.

                Так же можно отнести к задачам отладки клиентского кода анализ и валидацию HTML кода. Это, вроде бы, задача не совсем из области программирования, но также немаловажная.

                Некоторые части рассмотренных задач уже рассматривались в других статьях, и я предоставил на них ссылки.
                Читать дальше →
              • Интерфейс Firefox 29+ и его кастомизация

                  Как известно, 29-я версия браузера Firefox получила новый интерфейс под названием Australis для своей оболочки (табы, строка поиска, кнопки навигации и закладок; устранение Addon Bar и замена его на попап под кнопкой «инструментов» (три горизонтальные чёрточки, общепринятый знак для многих веб-интерфейсов)). Рассмотрим, что мы потеряли на сегодня из рычагов управления интерфейсом, которые до сих пор существовали в виде нескольких расширений браузера.

                  Конечно, для разработчиков расширений интерфейсов это не было неожиданным — за две версии нововведения объявляются и появляются в альфа-версиях, затем отрабатываются в бета-. Это — приерно 3 месяца на возможность подготовиться заранее (но большинство расширений поддерживают энтузиасты, которые не всегда могут выделить на это свободное время). Предусмотрена возможность частичного отката интерфейса к прежним версиям с помощью установки официального расширения Classic Theme Restorer.

                  Если посмотреть, на что больше всего жалуются пользователи новой версии:
                  1.'Это странная традиция: всё время менять интерфейс'
                • SimpleModal — простые модальные окна

                    Обзор плагина SimpleModal, его глюков, избавление от глючности, позиционирование по центру экрана и прочие удобства. Вообще я публиковал статью в своем блоге:«SimpleModal — простые модальные окна», но подумал что и хабраюзерам может быть интересно про это узнать. А так же советую взглянуть на более новую статью «Модальные окна на jQuery blockUI». Не все же с лайтбоксами играться.
                    Читать дальше →
                  • Ценообразование услуг по ведению контекстной рекламы


                    Предисловие


                    В повседневной жизни мы не придаём значимости вещам и услугам, которые делают другие люди, некоторые из них, на наш взгляд, являются элементарными: что там сложного в копировании ключа от домофона? Взял аналогичный ключ, поднес к аппарату он автоматически скопировал – вуаля! Что там сложного борщ сварить? Купил все продукты в овощном ларьке, закинул в кипящую воду – вуаля, суп готов!
                    Давайте разберёмся поподробнее о совершенно “элементарных вещах” с точки зрения организации бизнес-процесса.
                    Читать дальше →
                  • Обзор и классификация CMS по категориям (2013)

                      Недавний поиск списка CMS, на примере которых можно было бы объяснить студентам архитектуру и структуру сложного web-сайта, привел меня к любопытной статье с классификацией CMS, которая, однако, на текущий момент немного устарела, да и написана несколько сумбурно. Это подвигло меня составить новый обзор, собрав больше решений и дополнив их по возможности ссылками на официальные сайты, страницы закачки и демо-панели.

                      Я рассматривала CMS на php, в основном бесплатные, за некоторым исключением. В результате на текущий момент получился такой набор:

                      CMS общего назначения: Alto CMS, Cogear, Contao, Cotonti, DataLifeEngine, Drupal, ImageCMSCorporate, Joomla, Host CMS, MaxSiteCMS, MODX, MosquitoBloodyMary, ReloadCMS, Wordpress
                      Галереи: Coppermine, Gallery (Gallery2, обновленная до версии 3), Koken, MG2 = MiniGal 2, Pikateka, SimpleViewer, Zenphoto
                      Социальные сети: Elgg, Explay CMS, InstantCMS, LiveStreet, BigStreet
                      Форумы: IPB (Invision Power Board), Phorum, phpBB, phpBBex, PunBB, Simple Machines Forum, Vanilla, vBulletin
                      Интернет-магазины: ECShop, Magento, OpenCart, Семейство osCommerce, Prestashop
                      Сайты-визитки без SQL-базы: GetSimple, Monstra, Nanote, Stacey, CMS Чайник
                      Читать дальше →
                    • Настройка и оптимизация MySQL сервера

                        В этой статье будут описаны различные настройки MySQL, преимущественно те, которые влияют на производительность. Для удобства все переменные разделены по разделам (базовые настройки, ограничения, настройки потоки, кэширование запросов, тайминги, буферы, InnoDB). Сначала уточним имена некоторых переменных, которые изменились в версии 4 MySQL, а в сети продолжают встречаться и старые и новые варианты имен, что вызывает вопросы.
                        Читать дальше →
                      • MySQL Query Cache

                          В MySQL есть очень полезная функциональность — кеш запросов. Кеш запросов доступен в MySQL начиная с версии 4.0.
                          Многие СУБД имеют подобную функциональность, но в отличие от MySQL они кешируют планы выполнения запросов, тогда как MySQL кеширует результаты запросов.
                          Дальше о том, как работает кеш запросов, как его настраивать и оптимально использовать.
                          Читать дальше →
                        • Автоматическая оптимизация настроек MySQL, PostgreSQL

                            Оптимизация настроек всегда дело тонкое и выставить именно те параметры, которые дадут максимальную производительность, зачастую можно только уже в процессе работы приложения, когда уже есть статистика нагрузки и видны узкие места.
                            Но очень полезно сделать и первичную оптимизацию при запуске СУБД. В этом посте рассмотрены пути автоматической оптимизации MySQL и PostgreSQL утилитами mysqltuner и pgtune.

                            Читать дальше →