CSS Refresher

Это большая коллекция практических советов и заметок по вёрстке. Своеобразная памятка для тех, кто каждодневно использует CSS. Освещаются самые разные темы, от деталей поведения плавающих элементов до использования SVG и спрайтов. Проект постоянно обновляется, активное сообщество github также принимает в нем участие, там добавляются интересные замечания, о которых, возможно, вы и не слышали.

От переводчика

Приветствую всех, меня зовут Максим Иванов, и сегодня я подготовил для вас перевод заметок разработчика из Сан-Франциско Васанта Кришнамурти (Vasanth Krishnamoorthy) «CSS Refresher». Web-программирование одна из самых быстро развивающихся отраслей в наше время. Казалось бы, возьми какой-нибудь видеокурс на tuts+ и освой html-верстку, однако, как говорил разработчик Opera Software Вадим Макеев, выступая на конференции CodeFest, они все равно это делают плохо. Но давайте посмотрим, может мы итак все это знаем.

Содержание

1. Позиционирование (position)
2. Отображение элемента в документе (display)
3. Плавающие элементы (float)
4. CSS селекторы
5. Эффективные селекторы
6. Переотрисовка и перерасчет
7. CSS3 свойства
8. CSS3 медиа-запросы
9. Адаптивный web-дизайн
10. CSS3 переходы
11. CSS3 анимации
12. Масштабируемая векторная графика (SVG)
13. CSS спрайты
14. Вертикальное выравнивание
15. Известные проблемы

Приходилось ли вам разбираться в запутанном коде без внятной документации? Например, что происходит при создании страницы в какой-нибудь CMS, или почему и откуда именно чужой код посылает email, или делает что-то еще?

Есть множество приемов для погружения в чужой код. Можно использовать var_dump(), для чего вам придется запускать один и тот же сценарий множество раз. Можно настроить отладчик, но тогда вам придется заходить (Step Into) во множество функций которые не относятся к тому что вы ищете, а если вы пропустите (Step Over) какой-то важный вызов, вам придется начинать все сначала. Современные IDE предоставляют хорошие средства статического анализа кода, но и с их поддержкой бывает сложно понять, что происходит во время выполнения.

Долгое время меня привлекали возможности трассировки xdebug, но вручную отследить что-либо в многомегабайтном логе совершенно не реально, а какого-нибудь внятного GUI для *.xt файлов я так и не нашел. Поэтому решил написать свой визуализатор, о котором и хочу рассказать.

Вчера мне пришло уведомление о том, что открыто beta-тестирование профайлера от SensioLabs - blackfire.io

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

Поделюсь теми, на которые подписан я:

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

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

— Нам очень понравилось ваше портфолио. Не могли бы вы сделать наш сайт в стиле вот этой вашей работы для Мистера Икс?
Забавно, что вы этого хотите, потому как мы-то как раз стараемся сделать наоборот. Мы считаем, что задачи каждого клиента нужно рассматривать индивидуально и разрабатывать для него то решение, которое подходит именно ему. Забавно, что вы упомянули Мистера Икс, потому что он тоже не был уверен в предложенном нами подходе, но именно этот подход очень хорошо ему подошел. Давайте не будем беспокоиться о том, что делают другие. Подумайте о проекте как о костюме, который вы просто не собирались примерять. Мы достаточно объективны, и это поможет нам найти то, что будет полностью соответствовать вашим требованиям. Через какое-то время вы обнаружите, что предлагаемое решение — это то, что вам больше всего подходит.

— У сотрудника нашей бухгалтерии есть прекрасная идея на этот счет

Есть три вопроса, ответ на которые надо знать, когда нанимаешь на работу программиста:
      1) Он умный?
      2) Способен ли он выполнять работу?
      3) Смогу ли я с ним работать?

Кто-то умный но не способный выполнять работу может быть хорошим другом, но не сотрудником. Можно обсудить с ним какие-то проблемы, пока он прохлаждается на своей собственной работе.

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

С тем, с кем я не смогу работать – я не смогу работать.

Под катом продолжение статьи Аарона Шварца. Я бы предпочёл чтобы меня собеседовали таким образом, чем быть изучаемым девочкой-сотрудницей ОК, которая не отличает http от mp3.

Давно хотел написать общую статью, содержащую в себе самые основы Image Recognition, некий гайд по базовым методам, рассказывающий, когда их применять, какие задачи они решают, что возможно сделать вечером на коленке, а о чём лучше и не думать, не имея команды человек в 20.

Какие-то статьи по Optical Recognition я пишу давненько, так что пару раз в месяц мне пишут различные люди с вопросами по этой тематике. Иногда создаётся ощущение, что живёшь с ними в разных мирах. С одной стороны понимаешь, что человек скорее всего профессионал в смежной теме, но в методах оптического распознавания знает очень мало. И самое обидное, что он пытается применить метод из близрасположенной области знаний, который логичен, но в Image Recognition полностью не работает, но не понимает этого и сильно обижается, если ему начать рассказывать что-нибудь с самых основ. А учитывая, что рассказывать с основ — много времени, которого часто нет, становится всё ещё печальнее.

Все мы знаем про то, что IT специалистов не хватает и что за ними ведется хантинг и внедряются разнообразные стратегии удержания и мотивации удержанных сотрудников.

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

Почему это может работать и как можно использовать эти методы в своей компании под катом.

Довольно длительное время я читаю Хабр и постоянно вижу статьи про юзабилити Фейсбука, написанные в негативном ключе, как с позиции его пользователей, так и с точки зрения людей, имеющих прямое отношение к IT-сообществу.

Огромная и очень богатая компания, собравшая под своим крылом множество профессионалов, лучших спецов по юзабилити. Компания, занимающаяся сбором статистик, собирающая фокус-группы, проводящая маркетинговые исследования. Всякий раз возникает один и тот же наболевший вопрос: где результат, который устроит пользователя? Сейчас Фейсбук — воплощенный в реальность бардак.

Первый раз я пытался стать его пользователем году так в 2009, когда он вдруг стал «модным» и многие мои друзья перебрались туда из ВК. Но многие там не прижились. Меня, например, пугало абсолютно все: от сине-сиреневого цвета шапки до непонимания того, что произойдет при нажатии вон-на-ту-кнопку. В течение следующих нескольких лет мы молча наблюдали за усложнением интерфейса, когда весь мир стремился к простоте.

Но моя статья не о том. Я хочу представить вашему вниманию свой труд, на который меня изначально натолкнул пользователь Klimentij, написавший статью «Юзабилити Facebook». Долгое время хотел им заняться и вот, наконец, появилось свободное время.

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

Зачем это надо? Я хочу показать свой Фейсбук с простым и понятным интерфейсом, который будет дружелюбным по отношению к пользователю, повысить юзабилити и сделать его более трендовым. Хочу заметить, что это лишь мое видение проблемы, многие элементы могут нуждаться в переосмыслении, так что не судите строго.

Весь УИ представлен на английском. Во-первых, ближе к оригиналу; во-вторых, в текущей версии его русификация некорректна.

Вроде простой вопрос, даже не понятно что на него ответить, правда?
Мы все знаем как создать переменную, как получить значение переменной, как взять ссылку на переменную в конце концов.
Но как они работают изнутри?
Что происходит в интерпретаторе, когда вы изменяете значение переменной? Или когда удаляете ее?
Как реализованы типы переменных?

В этой статье я постараюсь раскрыть именно эти темы.

Abstract

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

В прошлой статье я рассказывал о переменных, теперь пойдет речь о массивах.

Что такое массивы на уровне PHP?

На уровне PHP, массив — это упорядоченный список скрещенный с мэпом. Грубо говоря, PHP смешивает эти два понятия, в итоге получается, с одной стороны, очень гибкая структура данных, с другой стороны, возможно, не самая оптимальная, точнее, как выразился Anthony Ferrara:

PHP arrays are a great one-size-fits-all data structure. But like all one-size-fits-all <anything>, jack-of-all-trades usually means master of none.

Ссылка на письмо

(на картине изображен HashTable с Bucket-ами, В. Васнецов)

Наверняка вы слышали о сервисах Amazon EC2, Rackspace и им подобным. Может быть даже пользовались. Лично мне бывает нужен иногда личный VPN-сервер. Для этих целей я уже давно держал микро-инстанс на Амазоне, предоставляемый им в течении первого года бесплатно. Плюс использовал для архивов Amazon Glacier, который с его ценой «1 цент за гигабайт в месяц» можно считать тоже почти бесплатным. Но вот год закончился и за EC2 стало нужно платить. Архивы мои тоже разрослись прилично и затраты на Glacier аналогично перестали радовать.

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

Я сильно ошибался. Ниже будет рассказано как на базе DigitalOcean сделать себе VPN-сервер в пару десятков раз дешевле такого же на Амазоне и сервис хранения архивов, в бесконечность раз дешевле Glacier.

Так сложилось, что в данный момент мой рабочий ноутбук оснащен лишь 2GB оперативной памяти. В связи с этим возникла необходимость оптимизации браузера, т.к. при большом количестве открытых вкладок памяти становится недостаточно и используется swap-раздел, что ведет к тормозам.

В работе мне помогает музыка, обычно это открытый таб с плейлистом Youtube. Так вот этот таб в просессе работы съедает до 500MB (!) и даже больше (Google Chrome).

Такое положение дел вынудило написать bash-скрипт, который на входе получает ID плейлиста, на выходе – mp3 файлы, которые можно слушать в любимом плеере, например, в MOC:

Предлагаем вашему вниманию очередную подборку с ссылками на новости и материалы.

Приятного чтения!

Давно хотел написать на эту тему. Первым толчком послужила статья Miško Hevery "Static Methods are Death to Testability". Я написал ответную статью, но так и не опубликовал ее. А вот недавно увидел нечто, что можно назвать «Классо-Ориентированное Программирование». Это освежило мой интерес к теме и вот результат.

«Классо-Ориентированое Программирование» — это когда используются классы, состоящие только из статических методов и свойств, а экземпляр класса никогда не создается. В этой статье я буду говорить о том, что:

• это не дает никаких преимуществ по сравнению с процедурным программированием
• не стоит отказываться от объектов
• наличие статических членов класса != смерть тестам

Хотя эта статья про PHP, концепции применимы и к другим языкам.

В данной статье я постараюсь познакомить вас с замечательными утилитами Vagrant и Chef на примере автоматического конфигурирования development environment для PHP разработчика (на самом деле, PHP здесь только как пример, все нижеописанное может быть использовано для любого стека технологий).

Что будем делать?

Будем настраивать виртуальную машину (ВМ) с Ubuntu 12.04 для работы над проектом на PHP, а именно:

• Apache
• MySql
• PHP 5.4
• xDebug
• Memcached
• Composer
• Настроим сразу Virtual Host на определенную папку, доступную как с виртуальной машины, так и с реальной. Всё это параметризируем для удобства создания и использования.
• и другое..

Довольно занудное занятие, особенно если заниматься этим с некоторой периодичностью, поэтому мы заставим компьютер делать это самостоятельно.

Как это может помочь вам?

• Вы не хотите «засорять» свою систему множеством утилит, программ
• Вы хотите тестировать свой код в приближенных к production условиях
• Вы хотите тестировать свой код на разных версиях той или иной платформы (помните, как Travis тестирует билды в различных конфигурациях, например Symfony на разных версиях PHP)
• Вы не хотите больше помогать новому человеку на проекте (верстальщик, программист) устанавливать всё с нуля
• Вы хотите, чтобы у каждого человека в команде была идентичная среда для работы над проектом

Всё это — реальность. Вопрос только «как?».

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

Проверьте свой проект: вы летите или думаете, что летите?

Ниже вопросы, которые стоит задавать себе на старте проекта и время от времени на его протяжении.

Контрольные вопросы на старте проекта:

1. Что конкретно нужно сделать на текущем этапе? В целом? Есть ли чётко определённые цели каждого этапа? Как вы определите, что цели достигнуты? Соответствует ли текущий статус заявленным планам и целям или их необходимо корректировать?
2. Реалистичны ли эти цели?
3. Что случится, если цели не будут достигнуты в срок? Каков план действий?
4. Насколько этот проект значим? Например, зависит ли от него место вашей компании на рынке?
5. Какую выгоду вам, обществу и инвесторам принесёт проект?
6. Достаточно ли хорошо спланирован проект? Все ли в вашей команде понимают пункты плана одинаково?
7. Нужны ли внешние эксперты, например, юристы?
8. Есть ли у команды опыт работы вместе? Кто будет координировать команду? Важно ли для проекта работать именно вместе — или возможен труд одиночек? Отвечает ли каждый член команды за работу всех остальных?
9. Можно ли сократить размер команды? Если нет, то почему? Если да, то почему это не сделано?
10. Как вы будете компенсировать форс-мажоры с персоналом, например, что случится, если ваш ведущий разработчик сломает руку?

Вот уже полтора года я использую Symfony 2 для разработки web-приложений. За это время я трижды начинал новый проект, еще в трех проектах работал с унаследованным кодом, а также провел ревью около 15 тестовых заданий на знание фреймворка.

Наверное, было бы здорово иметь возможность вернуться на полтора года назад и дать себе несколько советов перед стартом своего первого проекта. Увы, это невозможно. Но может быть, мои советы могут пригодятся другим начинающим разработчикам на Symfony?

Данный пост является переводом не статьи, как принято, а доклада+презентации, поэтому текст поста достаточно вольный.

Думаю, всем хорошо известно и очевидно, что PHP — один из самых популярных языков программирования, на котором написано множество веб-проектов, начиная с персональных homepage-страниц и заканчивая мастодонтами типа Facebook, Vimeo, WordPress и даже YouPorn.

PHP появился в 1995 году, при этом полноценная поддержка ООП была реализована только в PHP5, который вышел в 2005 году. За это время было написано большое количество кода, как хорошего, так и плохого, а точнее сказать сильно устаревшего и тяжело сопровождаемого.

Многие проекты, как и экосистема PHP в целом, к настоящему моменту стали представлять подобие оживленного городского квартала.