Привет, Хабр! В этот прекрасный пятничный день предлагаем вам ознакомиться с очередной частью цикла переводов советов для веб-разработчиков. Предыдущие части: 1-16, 17-32, 33-48.

Содержание:

   49   Циклическое переключение между панелями при помощи шорткатов
   50   Проверка и активация CSS media queries, а также нахождение этих правил в коде
   51   Предустановка разрешения нового устройства
   52   Улучшения полоски хлебных крошек в панели Elements
   53   Печать стектрейса в консоли
   54   Детектирование долгих фреймов (не путать с iframe)
   55   Продвинутая фильтрация запросов в панели «Network»
   56   Поиск по проекту с возможностью указания файла
   57   Новый экспериментальный редактор раскладки страницы
   58   Дублирование DOM-элементов
   59   Просмотр скриншотов поведения страницы
   60   Редактирование html-кода в панели «Console»
   61   Простые клавиатурные трюки для управления панелей «Стили»
   62   Выбор цвета, сгенерированного палитрой
   63   Инкремент и декремент чисел в DOM-атрибутах
   64   Сетевые запросы в панели «Timeline»

Без качественного тестирования невозможно разрабатывать и поддерживать крупный веб-сервис. На ранних этапах его развития часто можно обходиться только ручным тестированием по заданному тест-плану, но с появлением новых фич и увеличением количества тест-кейсов довольствоваться только им становится все сложнее и сложнее. В этой статье мы расскажем о том, как автоматизируем функциональное тестирование веб-интерфейса Яндекс.Почты с помощью Selenium WebDriver и Node.js.

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

Мы в Хекслете любим не только учиться и учить, но и развлекаться. Но развлекаться по-своему, по-программерски. Поэтому мы запустили Codebattle. Это игра для программистов.

Идея очень простая: вам и сопернику дается задача, вы решаете ее на выбранном вами языке. Вы видите код соперника в реальном времени, результаты запуска тестов и можете общаться с ним и зрителями в чате. Кто первый решит задачу (удовлетворит тестам) — тот победил.

Представляю вашему вниманию перевод очень ёмкой, и в то же время достаточно краткой (для такого масштаба проблемы) статьи Карла Чео. Я решил, что очень хочу сделать её перевод практически сразу, как только начал читать, и очень рад, что в итоге сделал это.

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

Важные замечания:

• Пункты с неуказанным источником написаны мной самостоятельно. Поправьте меня, если вы заметите какие-то неточности. Предложите лучшую аналогию, если это возможно.
• Заголовки ссылаются на соответствующие им статьи в Wikipedia. Пожалуйста, читайте эти статьи для более серьезных и детальных объяснений.
• Аналогии — отличный способ объяснить материал, но они не идеальны. Если вы хотите по-настоящему понять перечисленные концепции, вам следует начать с фундаментальных азов и рассуждать, исходя из них.

Также зацените эту инфографику (вариант на русском), если вы просто начинающий программист.

Введение

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

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

Все это приводит к тому, что каждый месяц в городе проходит несколько десятков еврейских мероприятий. Для примера, 13 сентября в разных частях города прошло 11 совсем не мелких мероприятий (50-200 человек каждое).

Какую я заметил проблему и как её хотел решить?

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

Тут отчасти работает веками сформированный принцип, что еврею нужно минимум две синагоги. В одну он будет ходить, зато в другую ни ногой! Это может казаться смешным, но так и есть — большинство моих знакомых точно могут назвать две еврейские организации в городе: одна им нравится, во вторую они бы точно не пошли.

Я посчитал нужным собрать все мероприятия вместе и сделать афишу еврейских мероприятий Санкт-Петербурга.

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

Сегодня будем говорить о некоторых возможностях замечательной IDE PhpStorm. Программисты из компании Jetbrains вкладывают огромные силы в создание своего продукта, в результате мы имеем мощную и одну из лучших IDE для языка программирования php. Думаю времена, когда хотелось выделиться программированием в Notepad++, практически ушли. Разрабатывать на коленке современные большие проекты с множеством файлов крайне затруднительно без хорошего инструмента.

Больше года назад я опубликовал 12 малоизвестных фактов о CSS (перевод на хабре), и по сей день это была одна из самых популярных статей на SitePoint. С тех пор я собирал больше интересностей и маленьких советов по CSS для новой публикации. Мы же все знаем, что каждый успешный фильм должен способствовать выходу новомодного сиквела, верно?

^{Автор иллюстрации SitePoint/Natalia Balska.}

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

Что является самым важным при создании (своей) компании? Создать инновационный продукт, способный изменить мир? Найти средства? Собрать людей в команду? Создать опытный образец?.. Безусловно, все эти пункты очень важны, особенно для новой фирмы. При этом над-стоящим пунктом всего списка важных вещей является продажи. Наверняка, вы нередко встречались со спором, что важнее, производство или продажи. Ответ на этот вопрос вы не найдете в моих статьях — решение о важности вы должны принять сами. Однако найти клиента, то есть продать то, чего еще нет, намного приятнее, чем создать идеальный готовый продукт, но не зная при этом, кто и когда его купит, и ждать первых продаж.

Поздний час, половина первого…

Так выходит, что мы частенько собираемся у Веры. У нее всегда по-домашнему уютно и тепло. И если атмосферу мы создать можем в любом месте, то с обстановкой сложнее. А здесь еще и бюджетно :)

Первым делом определились в необходимости составления регламента встречи. Начали с тайминга – окончание в 5 утра, обязательные перерывы. Ваня вспомнил про методику Pomodoro – идея всем понравилась, и мы ее тут же применили.

Мы в HTML Academy постоянно работаем над повышением эффективности наших образовательных программ и курсов (ради этого мы ставим опыты на студентах и внедряем геймификацию).

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

Именно поэтому мы решили создать курс, прохождение которого позволяло бы людям не просто получить базовые знания вёрстки, но стать настоящим (пусть и начинающим) ИТ-специалистом. В сегодняшнем материале мы расскажем о том, что в итоге из всего этого получилось.

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

Мы в Хекслете любим свой стек технологий :) Когда рассказываем другим — многие завидуют: Rails, Docker, AWS, React JS. Реакт мы используем в первую очередь для создания веб-среды для разработки Hexlet-IDE, которая позволяет нашим пользователям выполнять упражнение по разработке приложений и взаимодействию с виртуальной машиной прямо в браузере.

Сегодня мы публикуем перевод статьи «An Unconventional Review of React» Джеймса Шора, ведущего проекта Let’s Code: Test-Driven JavaScript.



Он мне понравился. Я не ожидал такого.

Для специальных выпусков Let’s Code JavaScript в августе и сентябре я изучал Реакт.

На случай если вам не знаком Реакт: это библиотека для фронт-энд веб-разработки. С помощью него создаются компоненты: короткие, не-совсем-ХТМЛ теги, которые можно комбинировать для создания интерфейса.

Реакт знаменит своими нетрадиционными решениями: реализацией виртуального DOM’а, созданием элементов интерфейса в JavaScript вместо шаблонов, создание суперсета языка JavaScript — JSX, который позволяет вставлять не-совсем-ХТМЛ прямо в код JS.

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

Пишущую машинку я расчехляю нечасто, но сегодня есть повод.

Тесты для JavaScript пишут многие, некоторые пишут много тестов. Есть несколько популярных тестовых фреймворков, таких как Jasmine, Mocha, QUnit, а также инструменты для автоматического запуска тестов. Некоторые из них даже интегрированы в некоторые редакторы кода. Например, Karma runner и Mocha прекрасно интегрированы моими коллегами в WebStorm. Словом, существуют разные способы запускать тесты автоматически и получать результаты в течении одной или нескольких секунд. Впрочем, время зависит от количества и характера тестов.

Как мы используем наши JavaScript тесты

За более чем десять лет моих активных поисков и применения GTD/PM-методик в своей, без малого, десятилетней практике фрилансера и предпринимателя, до меня наконец дошло — серебряной пули нет. Многие знали об этом всегда, мне же понадобились годы. Когда для тебя одновременное количество проектов измеряется не одним десятком. Когда ты прокрастинатор настолько, что даже прокрастинируя этой статьей от работы умудряешься прокрастинировать прокрастинацию чтением писем Лейбница и готов прокрастинировать рекурсивно. Когда ты перфекционист шестого разряда и программист-романтик, то до последнего надеешься, что есть универсальное лекарство. Но его нет…

Было бы счастье, да… многолетние поиски философского камня принесли и свои плоды. У меня накопился большой сундук различных подходов, которыми я хочу поделиться.

Много времени прошло с момента появления AngularJs (в масштабах веб-технологий конечно). Сейчас в интернетах есть огромное количество постов восхваляющих этот фреймворк до небес, что это манна небесная не иначе, а критики не так уж и много как он того заслуживает. Но такие статьи уже потихоньку начинают появляться, и меня это радует, надеюсь индустрия переболеет ангуляром так же, как переболела MooTools, Prototype, %какой-нибудь новый язык под JVM%, %другая-супер-революционная-технология%. Не знаю почему, но в IT-области такие революционные технологии, которые поднимают шум, а потом пропадают, появляются довольно часто. Хороший разработчик должен уметь отличать очередную модную технологию, от работающего инструмента. И для этого очень важно критически смотреть на вещи. Моя статья — это компиляция самых весомых выводов из других статей, и моих личных умозаключений. Ангуляр создает хороший вау-эффект, когда видишь его впервые: «ух ты, я написал ng-repeat, и реализовал эту логику одними тегами и все само обновляется!», но как только приходится реализовывать реальные приложения, а не очередной TODO-лист, то все становиться очень печально. Сразу хочу сказать, что фреймворк я знаю хорошо, даже больше чем мне хотелось бы его знать, я программировал на нем в течении 2 лет. И для следующего проекта я его точно не выберу, и это хорошо, все мы учимся на ошибках. Так что же не так с ангуляром? Тут нет однозначного ответа, слишком много разных недостатков, которые создают такой облик фреймворку. Если одним словом – непродуманная архитектура. Под катом я привожу конкретику, так что устраивайтесь поудобнее. ДА НАЧНЕТСЯ ХОЛЛИ ВАР!

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

Хотел ли создатель игры Донг Нгуен (Dong Nguyen) намеренно вызвать что-то из вышеперечисленного? Ни в малейшей степени. После того, как буря улеглась, он впервые нарушил свое молчание с тех пор, как удалил игру из магазинов приложений для iOS и Android, сказав, что он сделал это ради блага самих же игроков, т.к. боялся, что игра вызывает слишком сильную зависимость. Гипотетически, это совсем даже неплохо для разработчика игр.

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

Содержание

1 Введение в AngularJS
2 Engineering concepts in JavaScript frameworks
3 Modules
4 Understanding $scope
5 Controllers
6 Services and Factories
7 Templating with the Angular core
8 Directives (Core)
9 Directives (Custom)
10 Filters (Core)
11 Filters (Custom)
12 Dynamic routing with $routeProvider
13 Form Validation
14 Server communication with $http and $resource

1 Введение в AngularJS

Angular – MVW-фреймворк для разработки качественных клиентских веб-приложений на JavaScript. Он создан и поддерживается в Google и предлагает взглянуть на будущее веба, на то, какие новые возможности и стандарты он готовит для нас.

MVW означает Model-View-Whatever (модель – вид – что угодно), то есть гибкость в выборе шаблонов проектирования при разработке приложений. Мы можем выбрать модели MVC (Model-View-Controller) или MVVM (Model-View-ViewModel).

Этот обучающий материал задумывался как отправная точка для изучения AngularJS, его концепций и API, чтобы помочь вам создавать великолепные веб-приложения современным способом.

В своей статье я хотел бы рассказать о теории относительности. Эта теория не требуется в представлении. С самого своего создания она была окутана ореолом тайны, поскольку полностью подрывает наши привычные представления о пространстве и времени. Все мы в школе учили формулы теории относительности, но мало кто действительно понимал их. И это не удивительно, ведь человеку, чтобы по-настоящему понять какую-то теорию во всей её красоте, полноте и непротиворечивости, не достаточно знать формулы. Нужно иметь какой-то визуальный ориентир, нужна динамика, чтобы было что-то, что можно повертеть в руках. Я решил восполнить этот пробел и написал небольшую программку, в которой можно «повертеть в руках» пространство-время. Мы, как настоящие исследователи, с помощью небольших экспериментов попытаемся выяснить основные свойства этой загадочной материи.
Под катом много картинок (и ни одной формулы).

Среди фрилансеров есть те, перед кем хочется снять шляпу и сказать «Спасибо». Они стремятся выполнить заказ качественно и оставить о себе благоприятное впечатление. Такие фрилансеры востребованы и успешны. Они заняли светлую сторону. Но есть и темная сторона творчества – занявший её фрилансер оставляет черный шлейф в памяти клиента, портит свою карму и сидит без заказов. Важно то, что нанести ущерб проекту и отношениям с дорогим клиентом исполнитель может неумышленно. Это может произойти вследствие отсутствия опыта.

Довольно частый запрос от коллег-менеджеров, который приходится слышать: как повысить ответственность человека?

Казалось бы, человечество за тысячи лет своего существования должно было прийти к какому-то алгоритму повышения ответственности. И вот он, твой тренерский шанс — изложи этот алгоритм и измени навсегда жизнь отдельно взятого менеджера!

Однако, в жизни все сложнее… Приходится заниматься занудными уточнениями: а сейчас люди как работают? — Ну… безответственно.

Хм, яснее не становится. Хочется ехидно уточнить: “в смысле, бросают жен и детей?”, но в реальности, начинаешь разбираться.

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