Здравствуйте, дорогие читатели! Я продолжаю цикл статей о том, как мы разрабатывали нетипичный, крупный проект с использованием Yii2 framework и AngularJS.

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

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

Самое интересное под катом.

CSS Protips

Это современные решения типичных проблем, коллекция советов, которая поможет вам улучшить ваши профессиональные навыки CSS.

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

Приветствую, для вас подготовлен еще один перевод заметок на тему CSS. Мэтт Смит, разработчик из Портленда, поделился CSS-советами и выложил их на GitHub. Мне особенно понравилась его подборка, она структурирована, не особо громоздкая в плане скучных больших текстов и описаний, и в целом будет понятна даже новичку. Я буду рад, если в комментариях мы с вами обсудим каждый пункт и в итоге дадим некоторые заключения. Итак, приступим.

Cодержание

1. Используем псевдо-класс :not для задания рамки навигации
2. Добавляем межстрочный интервал элементу body
3. Центрируем по вертикали все что угодно
4. Правильно разделяем запятыми элементы списков
5. Отрицательный порядковый номер в nth-child
6. Используем SVG-логотипы
7. Аксиоматический CSS
8. Максимальная высота у CSS-слайдера
9. Наследуем box-sizing
10. Одинаковая ширина ячейки таблицы
11. Динамические внешние отступы при помощи flexbox
12. Используем селектор атрибутов пустых ссылок
13. Стили по умолчанию для обычных ссылок

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

Слышали ли вы про PHP-функции realpath_cache_get() и realpath_cache_size()? А может быть про параметры realpath_cache_size и realpath_cache_ttl в php.ini?

Кэш realpath — довольно важный механизм PHP, который нужно иметь в виду. Особенно, когда приходится работать с символическими ссылками, например, при деплое проекта. Настройка кэширования realpath может значительно влиять на быстродействие сервера и нагрузку на дисковую подсистемы сервера. Этот параметр был введен в версии 5.1, когда начали появляться первые PHP-фреймворки.

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

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. Известные проблемы

Эта статья родилась из личного опыта. Я искал самые эффективные способы монетизации сайта (ныне уже проданного на Telderi) и в какой-то момент понял, что тема очень обширная и требует подробного исследования. А его результаты могут быть интересны не мне одному.

Рассматриваются способы, наиболее актуальные для России и СНГ и не требующие участия разработчиков или требующие в минимальной степени.

Статья ввиду большого объема писалась не один месяц, поэтому не серчайте сильно, если где-то встретите неточности (в расценках, форматах). Просто напишите об этом в комментариях.

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

Мы не подвергаем сомнению важность дизайна и юзабилити, при этом убеждать посетителей посадочных страниц продолжают слова. Без сильного копирайтинга любой визуал пойдет «псу под хвост», будь там хоть Артемий Лебедев.

В этой статье вы узнаете что писать в заголовке, форме заявки и кнопке call-to-action. Просто, четко и убедительно. Плюс показываем хакерскую технику как сделать конверсионные элементы максимально эффективными.

Привет, Хабр!

В одном своём проекте на Yii2 мне захотелось совместить Adjacency List и Nested Sets. Причём так, чтобы в случае отключения поведения Nested Sets, функционал оставался полностью работоспособен. Затем я понял, что Nested Sets мне не нужен, т. к. в базе всё равно приходилось хранить полный путь, поэтому на замену я решил применить Materialized Path. Имеющийся на GitHub Behavior (matperez/yii2-materialized-path) был недостаточно функционален, поэтому пришлось написать свой, а так как я недавно уже писал свои поведения для Adjacency List и Nested Intervals, я решил, почему бы не сделать набор таких поведений с единым API, и возможностью произвольно подключать их к модели одновременно, используя преимущество каждого.

Предлагаю читателям «Хабрахабра» перевод статьи «12 Little-Known CSS Facts (The Sequel)». Она совсем недавно была упомянута в дайджесте интересных материалов из мира веб-разработки и IT.

Update: немного «шлифанул» перевод напильником. Выражаю благодарность всем неравнодушным читателям.
Внимание! Под катом почти 1.5 Мб картинок и много интересных ссылок.

Итак, начнём-с…

1. В свойстве border-radius можно использовать slash-синтаксис.

Об этом уже писалось 4 года назад, но многие новички и даже некоторые опытные разработчики не знают о существовании этой «фишки».

Верите или нет, но следующий код валиден:

.box {
  border-radius: 35px 25px 30px 20px / 35px 25px 15px 30px;
}

Дело было вечером, делать было нечего... © С. В. Михалков
Навеяно публикацией «Как я bind`ом вирусы искал…», а конкретно этой веткой комментариев. Надеюсь, не поздно размещаю.

Сидел я и думал, телевизор Samsung, WinPhone, (а впоследствии может кофеварка и пылесос) показывают суперназойливую рекламу, надо с этим чтото делать, и раз в WinPhone и телевизор(кофеварку, пылесос) плагина AdBlock нету, то он должен быть там где ходит их трафик, на роутере.

Всем привет. В данной заметке я опишу один из простейших вариантов, как можно по-быстрому поднять под виртуальной машиной полноценное рабочее окружение, готовое к работе и дальнейшему расширению.
Во главе угла стоят «Vagrant» (для управления виртуализацией) и «Scotchbox» (бокс для Vagrant — образ с ubuntu и предустановленным ПО, подготовленный ребятами из scotch.io).

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

Автор оригинальной статьи Ali Mese добавил ещё 100 новых бесплатных сервисов. Все 400 потрясающих сервисов доступны здесь. И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.

A. Бесплатные Веб-Сайты + Логотипы + Хостинг + Выставление Счета

• HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
• Bootswatch: Бесплатные темы для Bootstrap.
• Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
• Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
• Strikingly.com Domain: Конструктор веб-сайтов.
• Logaster: Онлайн генератор логотипов и элементов фирменного стиля (new).
• Withoomph: Мгновенное создание логотипов (англ.).
• Hipster Logo Generator: Генератор хипстерских логотипов.
• Squarespace Free Logo: Можно скачать бесплатную версию в маленьком разрешении.
• Invoice to me: Бесплатный генератор счета.
• Free Invoice Generator: Альтернативный бесплатный генератор счета.
• Slimvoice: Невероятно простой счет.

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

Из бесплатных как оказалось их не так уж и много, самым известным является наверное OsClass. Другое дело когда говорим о платных аналогах, тут большое разнообразие движков, функционалов и цен за них.

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


Визуализация типичной агрессии со стороны большинства «лендинг пейджей»

Это еще одна попытка реализовать стабильный, полноценный шаблонизатор офисных документов, основанных на XML, пользуясь стандартными для PHP средствами DOMDocument и XSL.

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

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

Так начинался фантастический рассказ — антиутопия про один день из жизни программиста в недалёком будущем, написанный мной в 2010 году. Меня просили продолжить, и через какое-то время появились идеи, но всё никак не было времени их реализовать. Однако в связи с последними событиями начинает казаться, что придуманный мной сюжет того гляди может стать реальностью. Поэтому сегодня представляю вам вторую главу. Рисунок был сделан в прошлом году совсем по другому поводу, но он хорошо подошел сюда как иллюстрация.

Предыстория: я веду свой паблик ВК о веб-разработке, в связи с чем я каждый день имею дело с большим количеством материалов о веб-разработке. Однажды (3 месяца назад) мне пришла в голову идея опубликовать на хабре подборку «30 полезных сервисов для веб-разработчика». Тот пост набрал почти 100 000 просмотров, и мне приятно, что он оказался полезен сообществу. С тех пор у меня поднакопилось больше 30 новых сервисов, которые будут полезны как разработчикам, так и дизайнерам. Лучшие из них я собрал в этом посте. Осторожно, под катом много картинок!

В последнее время мы успели разобраться со множеством аналитических систем, построить экономическую модель и провести несколько экспериментов по оптимизации конверсий в регистрацию и активацию. Благодаря Илье Красинскому(ex. LinguaLeo product chief) мы научились правильной настройке и анализу данных Google Analytics, узнали как строить экономические модели интернет проектов. Далее мы стали разбираться с event based аналитикой и настройкой mixpanel. Теперь мы решили поделиться этими знаниями с хабросообществом.


В этой статье мы рассмотрим:

• Построение экономики продукта с помощью Google таблиц
• Формирование отчета Google Analytics по когортам и каналам
• Создание таблицы анализа эффективности платных каналов

PhpStorm — повышаем производительность (плагины и темы оформления). Часть 2

У всех нас есть любимые IDE или редакторы в которых мы пишем код. Для меня это PhpStorm, и потребовалось некоторое время, чтобы освоить все клавиатурные сокращения и ускорить свой рабочий процесс. В этой статье я поделюсь с вами некоторыми сочетания клавиш и советами, которые возьмут на себя часть рутинной работы, если вы тоже делаете свою работу в этой IDE. Эта статья была частично вдохновлена этим Reddit тредом, и я буду упомянать и демонстрировать некоторые трюки найденные там.

Обратите внимание, что я разрабатываю на Linux в Vagrant, размещенном в Windows, я буду использовать клавишу CTRL вместо CMD. Если вы работаете в OS X, замените CTRL на CMD.

Клавиатурные сокращения и хаки

PhpStorm позволяет настроить себя практически до бесконечности — вы можете заточить этот инструмент под себя так, что постороннему может показаться, что это совсем другая IDE.

(осторожно, много gif изображений)

Вступление

Возможность асинхронной работы с помощью callback-функций(далее просто возвращаемых функций) — отличительная особенность JavaScript. Использование асинхронных возвращаемых функций позволяет вам писать событийно-ориентированный код, но так же добавляет кучу проблем, ведь код перестает выполняться в линейной последовательности.

К счастью, теперь в Chrome Canary DevTools вы можете отслеживать весь стек вызовов асинхронных функций в JavaScript!

Привет Хабр!

Изначально хотел назвать статью «HTML по ГОСТ`у», но потом выяснилось что у большинства программистов не было предмета «Метрология и стандартизация» и о «стандартизации», «сертификации», «унификации» не все слышали.

В i-Free я много занимаюсь разработкой веб-приложений. А поскольку их много, они разные и работают в разных условиях, то само собой приходится задумываться о стандартизации. Есть такой проект «Пуленепробиваемый HTML5» (http://html5boilerplate.com/), в котором разработчики решили создать идеальный шаблон странички. Он мне очень нравился, и все свои проекты я начинал именно с него. Но, исправляя баг за багом, делая все новые и новые приложения, я пришел к выводу, что многого в нем не хватает. В этой статье я хотел бы рассказать о том, что обычно пропускают при написание страничек и веб-приложений и показать, чем и зачем я прокачал свой шаблон пустой странички.