У фреймворка AngularJS есть несколько интересных решений в коде. Сегодня мы рассмотрим два из них – как работают области видимости и директивы.

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

Если в следующей картинке вам что-то непонятно – эта статья для вас.



(В статье рассматривается AngularJS 1.3.0)

Краткий обзор

Один из лучших способов изучить, что то новое, это увидеть, как в нем используются уже знакомые нам вещи. Эта статья не намерена ознакомить читателей с проектированием или шаблонами проектирования. Она предлагает базовое понимание концепций ООП, шаблонов проектирования и архитектурных шаблонов. Цель статьи описать, как различные конструкции программного обеспечения и архитектурные шаблоны используются в AngularJS и написанных на нем SPA.

Введение

Статья начинается с краткого обзора фреймворка AngularJS. Обзор объясняет основные компоненты AngularJS: directives, filters, controllers, services, scope. Во втором разделе перечислены и описаны различные конструкции и архитектурные шаблоны, которые реализованы внутри фреймворка. Шаблоны сгруппированы по компонентам AngularJS, в которых они используются. Если некоторые шаблоны используются в нескольких компонентах, это будет указано.
Последний раздел включает несколько архитектурных шаблонов, которые обычно используются в SPA построенных на AngularJS.

И вновь в эфире цикл переводов полезных советов для веб-разработчика. На этот раз автор расширил спектр исследуемых инструментов, добавив туда редактор Sublime Text и фреймворк Node.js. Предыдущие части: 1-16, 17-32.

Поехали!

Содержание:
   33.  Разворачивание упрощенной записи CSS-свойств
   34.  Определение совпадения селекторов по цвету
   35.  Использование визуальной навигации и просмотр снятых скриншотов процесса загрузки страницы
   36.  Sublime Text: нечеткий поиск при помощи функциональности GOTO
   37.  Быстрое изменение значения CSS-свойств при помощи клавиатуры и колеса мыши
   38.  Прокрутка элемента в области видимости
   39.  Node.js: Использование Babel для запуска ES6
   40.  Переход к просмотру и редактированию CSS или Javascript-файлов из панели «Elements»
   41.  Отображение значений Javascript-переменных рядом с кодом в процессе отладки
   42.  Использование цветовой группировки в панели «Network» для упрощения идентификации типа ресурса
   43.  Активация псевдо классов DOM-элемента
   44.  Инспектирование самих инструментов разработчика
   45.  Запуск выбранного блока кода из панели «Sources»
   46.  Установка условных точек останова
   47.  Переход к следующему вхождению выбранной строки при помощи горячих клавиш
   48.  Редактирование CSS-файла в панели «Sources» и упрощенное изменение значений CSS-свойств

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. Стили по умолчанию для обычных ссылок

Все мы не раз слышали о test-first — философии разработки, которая призывает писать тесты раньше кода. Уверен, что любой, кто пытался применять этот метод на практике, сталкивался с тем, что у него просто не получается написать тест до функции (обычно в этом случае просто игнорируют эту проблему и локально нарушают test-first). Я считаю, что причина подобных провалов фундаментальна, и попытаюсь показать почему.

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

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

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

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

В ушедшем году, вышел стандарт ECMAScript 2015 (неформально ES6), который сильно изменил, то к чему мы привыкли. Появилась масса новых возможностей, которые по сути представляют собой современное надмножество языка, пытающегося решить существующие проблемы. Class, let, const, стрелочные функции… разработчик, который ранее не видел код, написанный на ES6, не сразу догадается, что перед ним, по сути, старый добрый JS.

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

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

Из-за большого размера статья разбита на три части. Первая часть. Вторая часть

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

Предупреждение: эффекты работают только в современных браузерах, поддерживающих возможности CSS3.

К каждого в жизни настает такой момент, когда что-то в быту безумно надоедает. Например, мне с супругой надоело мыть посуду руками, и тратить на это по 20 минут в день. А с рождением ребенка, когда 20 минут это огромный бонус просто поспать. Теперь стоит только один вопрос загрузить и разгрузить ее, тут уже пока никакие роботы не справятся. Многие скажут руками проще, быстрее и т.д., и вообще ненужная трата денег. Но к хорошему привыкаешь быстро, и сейчас отказ от посудомойки уже внесет свои коррективы в проведении досуга, отняв часть свободного времени. Ну это я очень издалека зашел, переходим к сути. По сути этот робот-пылесос, также на первый взгляд, бесполезная и ненужная в быту вещь. Да, сказал бы я пару месяцев назад, но не сейчас, ведь как я и говорил к хорошему привыкаешь очень быстро, а особенно когда это хорошее экономит твое время и силы на нудную уборку квартиры. Как превратить ежедневную уборку в развлечение прошу читать далее…

Добрый день, Хабр!

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

Только что вышла книга «Multiplayer Game Programming: Architecting Networked Games (Game Design)».



Насколько актуален ее перевод на русский язык? Подробности под катом. Ждем ваши комментарии.

На мой взгляд, директивы являются основной изюминкой декларативного стиля Angularjs. Однако, если открыть комментарии пользователей в разделе официальной документации Angularjs, посвященной директивам, то вы увидите, что самый популярный из них: «Пожалуйста, перепишите документацию, сделайте ее более доступной и структурированной. Начинающему разработчику на Angularjs сложно в ней разобраться» («Please rewrite a clearer well structured documentation of directives., this is not friendly to first time angular developers»). С этим трудно не согласится, документация пока еще сыровата и в некоторых моментах приходится прилагать большие усилия, чтобы разобраться в логике и сути функционала. Поэтому я предлагаю вам свой вольный пересказ данной главы в надежде, что кому-то это позволит сэкономить время, а так же рассчитываю на вашу поддержку и участие в комментариях. Итак, поехали!
Часть 1

Уже очень давно мне хотелось попробовать создать проект, который бы представлял собой настоящие JavaScript Application, а именно толстый клиент, без backend и своего хостинга, на основе open source и какого-нибудь BaaS/DaaS. К тому же я окончательно устал от jsperf.com, от этих бессмысленных двух шагов, от отсутствия хоть какого-то редактора кода и нормального поиска и от постоянной потери своих тестов, а история с капчой, которая не всегда срабатывает, окончательно добила меня. Я наконец выкроил время, чтобы осуществить давно задуманное и убить двух зайцев, реализовав альтернативу jsperf.

Если вы устали от «оставьте заявку» или «получите консультацию» на каждом лендинге, эта статья для вас.
Внутри мы показываем 15 примеров CTA (call-to-action) в разных нишах, 5 распространенных ошибок и разбираем как создать эффективный призыв к действию по шести формулам.

Используя данные от радиоинтерферометра Атакамская Большая Миллиметровая/субмиллиметровая Решётка (ALMA) астрофизики обнаружили ранее неизвестный удалённый объект в направлении Альфы Центавра. Научная статья опубликована 8 декабря 2015 года.

Предлагаем вашему вниманию очередную подборку со ссылками на новости и материалы. Также под катом вас ждет специальная подборка по PHP 7.

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

Ниже представлена подборка инструментов для дизайнеров и front-end-разработчиков. Мы настоятельно рекомендуем вам просмотреть их все. Надеемся, что вы найдете для себя что-то полезное.

Доброго времени суток, уважаемые хабравчане! В Elasticweb мы негласно ратуем за Nginx и, наверное, мы одни из немногих хостингов, которые не поддерживают Apache и .htaccess соответственно. В связи с этим, большое количество обращений в тех. поддержку связано с оказанием помощи в написании конфигурационного файла для Nginx. Поэтому мы решили собрать коллекцию полезных сниппетов и коллекцию готовых Nging конфигов для наиболее популярных CMS/CMF/Фреймворков на PHP.

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

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

Как видно из графика, уже три года производительность топового суперкомпьютера (выраженная в операциях с плавающей точкой в секунду — FLOPS) не растёт. Более того, если заглянуть в анонсированные планы, то можно с уверенностью сказать, что ситуация не изменится как минимум в ближайший год. А значит стагнация производительности топового суперкомпьютера распространится и на 2016 год:

Несколько часов назад Anatol Belski, релиз менеджер PHP, тегнул стабильный релиз PHP 7.0.0. Это значит, что сегодня-завтра мы увидим официальный анонс на php.net. Наконец, можно будет пользоваться новыми прекрасными возможностями: строгой типизацией, оператором ??, анонимными классами, безопасным рандомом и многим другим. Как приличный бонус все перешедшие получат значительный прирост производительности.

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