Сегодня поговорим об измерении производительности рендеринга React-компонентов с использованием API React Profiler. Ещё мы будем оценивать взаимодействия с компонентом, применяя новый экспериментальный API Interaction Tracing. Кроме того, мы воспользуемся API User Timing для проведения собственных измерений.

В качестве площадки для экспериментов воспользуемся приложением React Movies Queue.

Приложение React Movies Queue

Звучит ли это знакомо: «Я начал заниматься веб разработкой после прохождения курсов»?

Возможно, вы хотите улучшить свои знания основ информатики в части структур данных и алгоритмов. Сегодня мы поговорим о некоторых наиболее распространенных структурах данных на примере JS.

1. Стек (вызовов) (Stack)

Стек следует принципу LIFO (Last In First Out — последним вошел, первым вышел). Если вы сложили книги друг на друга, и захотели взять самую нижнюю книгу, то сначала возьмете верхнюю, затем следующую и т.д. Кнопка «Назад» в браузере позволяет перейти (вернуться) на предыдущую страницу.

Как думаете, что произойдет, если запустить в консоли браузера этот фрагмент кода?

function foo() {
  setTimeout(foo, 0);
}

foo();

А этот?

function foo() {
  Promise.resolve().then(foo);
}

foo();

Если вы также, как и я, прочитали кучу статей про Event Loop, Main Thread, таски, микротаски и прочее, но затрудняетесь ответить на вопросы выше — эта статья для вас.

Доброго времени суток, друзья!

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

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

Буду признателен за развернутые комментарии. Все замечания будут учтены при редактировании статьи.

Итак, поехали.

Сегодня мы публикуем заметку, посвящённую особенностям использования JavaScript-консоли в браузерах, лежащим за пределами широко известной команды console.log(). Собственно говоря, эта команда представляет собой простейший инструмент для отладки программ, который позволяет выводить что-либо в консоль. Однако знание некоторых особенностей этого инструмента позволит тем, кто им пользуется, повысить эффективность работы.

Лимит

Есть на LinkedIn такое ограничение — Лимит коммерческого использования. Крайне вероятно, что вы, как и я до недавнего времени, никогда не сталкивались и не слышали о нем.



Суть лимита в том, что если вы используете поиск людей вне ваших контактов слишком часто (точных метрик нет, решает алгоритм, на основе ваших действий — как часто и много искали, добавляли людей), то результат поиска будет ограничен тремя профилями, вместо 1000 (по умолчанию 100 страниц, по 10 профилей на страницу). Лимит сбрасывается в начале каждого месяца. Естественно, премиум аккаунты такого ограничения не имеют.

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

Вступление

Наверняка многие фронтэнд разработчики да и в целом многие пользователи хоть раз интересовались работой и функционированием Youtube Player. В этой статье я расскажу, как он работает, и как сделать свой плеер для воспроизведения Youtube видео со своим интерфейсом. Так же приведу примеры для понимания, как это работает.

Сегодня в кругах программистов почти каждый знает о библиотеке Facebook – React.

В основе React лежат компоненты. Они схожи с DOM элементами браузера, только написаны не на HTML, а при помощи JavaScript. Использование компонентов, по словам Facebook, позволяет один раз написать интерфейс и отображать его на всех устройствах. В браузере все понятно (данные компоненты преобразуются в DOM элементы), а что же с мобильными приложениями? Тут тоже предсказуемо: React компоненты преобразовываются в нативные компоненты.

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

Итак, начнем.

Что такое иммутабельность

Неизменяемым (англ. immutable) называется объект, состояние которого не может быть изменено после создания. Результатом любой модификации такого объекта всегда будет новый объект, при этом старый объект не изменится.

В данной статье мы поговорим об основных особенностях объектно-ориентированного программирования в JavaScript:

• создание объектов,
• функция-конструктор,
• инкапсуляция через замыкания,
• полиморфизм и ключевые слова call/apply,
• наследование и способы его реализации.

От автора: я разработал и провёл десятки собеседований по программированию. Здесь я расскажу, как меня обыграть



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

После приобретения телефона на базе Android, возникла задача сделать из сайта brainexer мобильное приложение. Выбор пал на jQuery Mobile и PhoneGap. До этого никаких познаний в обрасти мобильной разработки не было, поэтому пришлось осознать некий пласт новой информации, выжимкой из которого я бы и хотел поделиться. В итоге статья представляет из себя небольшой quick start — как из пачки html файлов получить приложение опубликованное в Google Play.

Предлагаю вашему вниманию перевод статьи из официального блога AngularJS.

Мы счастливы поделиться с вами новостью, что проект Angular 2 достиг бета-версии. О том множестве нововведений, что принесла вторая версия по сравнению с первой, вы можете узнать из предыдущего поста. Изучение Angular 2 можно начать на сайте angular.io.

Что означает «бета»?

«Бета» означает, что теперь мы уверены в том, что большая часть разработчиков имеет возможность успешно создавать крупные приложения с помощью Angular 2.

По результатам опроса из первого топика продолжаю серию статей об Ionic Framework (далее IF). Сегодня поговорим о работе с камерой устройства и в дополнение рассмотрим работу с localStorage. В качестве основы возьмем приложение из прошлого топика и добавим нужную функциональность.

• Добавление ngCordova
• Подключение плагина для работы с камерой
• Создание сервиса для работы с камерой
• Редактирование шаблонов
• Добавление маршрутов, контроллеров и фабрик
• Заключение

Ionic framework — один из самых широко обсуждаемых фреймворков. Как гласит официальный сайт, Ionic — это SDK для создания гибридных мобильных приложений, набор CSS и JS компонент, созданный на основе AngularJS, SASS, Apache Cordova.

На момент написания статьи репозиторий Ionic насчитывает 15300 звездочек, а сумма инвестиций в компанию Drifty, чьим продуктом является Ionic, уже достигла $3.7 миллиона.

Посмотрим, что интересного предлагает Ionic для разработчика.

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

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

Так как шаблоны в AngularJS являются неотъемлемой его частью, важно разобраться с ними в самом начале знакомства с новой версии этого фреймворка. Заодно обсудим, какие преимущества дает нам данный синтаксис по сравнению с angular 1.x. Причем лучше всего будет рассматривать это на небольших примерах.

Данная статья во многом основана на материалах этих двух статей:

• Angular2: синтаксис шаблонов
• Angular2: Синтаксис биндинга данных

Для того, что бы упростить подачу материала, давайте разберемся. Под AngularJS я буду подразумевать всю ветку Angular 1.x, в то время как под Angular2 — ветку 2.x.

Так же спасибо господину Bronx за ценное дополнение, которое я включил в текст статьи.

Примечание: вечер выходного дня, потому о опечатках и т.д. сообщайте в личку. Премного благодарен и приятного чтения.

Всем привет! Не так давно в одном из комментариев я пообещал написать вводную статью для быстрого знакомства с возможностями Ionic Framework (далее IF). Стараюсь сдерживать свои обещания. Для начала мне хотелось бы выложить список ссылок, которыми часто пользуюсь при разработке с помощью IF:

• Список компонентов интерфейса IF
• API компонентов AngularJS для IF
• Документация по CLI IF
• Обучающие материалы по IF
• Цикл разработки на IF
• Базовый набор иконок

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

Примечание переводчика: Тема наследования в JavaScript является одной из самых тяжелых для новичков. С добавлением нового синтаксиса с ключевым словом class, понимание наследования явно не стало проще, хотя кардинально нового ничего не появилось. В данной статье не затрагиваются нюансы реализации прототипного наследования в JavaScript, поэтому если у читателя возникли вопросы, то рекомендую прочитать следующие статьи: Основы и заблуждения насчет JavaScript и Понимание ООП в JavaScript [Часть 1]

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

JavaScript является очень мощным языком. Настолько мощным, что в нем сосуществует множество различных способов проектирования и создания объектов. У каждого способа есть свои плюсы и минусы и я бы хотел помочь новичкам разобраться в этом. Это продолжение моего предыдущего поста, Хватит «классифицировать» JavaScript. Я получил много вопросов и комментариев с просьбами привести примеры, и для именно этой цели я решил написать эту статью.