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

Привет, читатель.

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

Максимальная глубина рекурсии ограничена движком JavaScript. Точно можно рассчитывать на 10000 вложенных вызовов, некоторые интерпретаторы допускают и больше, но для большинства из них 100000 вызовов – за пределами возможностей. Существуют автоматические оптимизации, помогающие избежать переполнения стека вызовов («оптимизация хвостовой рекурсии»), но они ещё не поддерживаются везде и работают только для простых случаев.

Пример рекурсивной функции:

function sum(n) {
  return n === 0 ? 0 : n + sum(n - 1)
}

sum(5) // 1 + 2 + 3 + 4 + 5  = 15
sum(100000) // Error: Maximum call stack size exceeded.

Привет! Это пост-отчёт с Panda Meetup #22, который проходил в офисе Авито. Мы обсуждали тестирование на основе свойств, работу со «сложными» данными (объектами с большой вложенностью и хитрой структурой), плагины vue-cli и декларативный Angular (почему бы и нет?).

Заходите под кат, если вам интересны эти темы. Внутри вы найдёте материалы встречи: презентации спикеров, видеозаписи, отзывы гостей митапа и ссылки на фотоотчёт.

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

Под катом рассказ о том, как я переписал приложение с react-native на Svelte и опубликовал его в Google Play.

Ещё одна имплементация Dependency Injection в JavaScript — с ES6-модулями, с возможностью использовать один и тот же код в браузере, и в nodejs и не использовать транспиляторы.

Под катом — мой взгляд на DI, его место в современных web-приложениях, принципиальная реализация DI-контейнера, способного создавать объекты и на фронте, и на бэке, а также объяснение, при чём тут Майкл Джексон.

Сегодня мы публикуем вторую часть перевода материала о новшествах JavaScript. Здесь мы поговорим о разделителях разрядов чисел, о BigInt-числах, о работе с массивами и объектами, о globalThis, о сортировке, об API интернационализации и о промисах.



→ Первая часть

И снова здравствуйте. На связи Омельницкий Сергей. Сегодня я поделюсь с Вами одной из своих головных болей, а именно — что делать, когда проект пишут много разноуровневых программистов на примере angular приложения.

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

И тут мы разрослись. Появился новый проект с унаследованным кодом, а к нему в придачу новые разработчики в размере 4-х добрых молодцев. И чет тут пошло не по плану.

Материал, первую часть перевода которого мы сегодня публикуем, посвящён новым стандартным возможностям JavaScript, о которых шла речь на конференции Google I/O 2019. В частности, здесь мы поговорим о регулярных выражениях, о полях классов, о работе со строками.

Ретроспективные проверки в регулярных выражениях

Регулярные выражения (Regular Expression, сокращённо — RegEx или RegExp) — это мощная технология обработки строк, которая реализована во множестве языков программирования. Регулярные выражения оказываются очень кстати в тех случаях, когда нужно, например, выполнять поиск фрагментов строк по сложным шаблонам. До недавнего времени в JavaScript-реализации регулярных выражений имелось всё кроме ретроспективных проверок (lookbehind).

Для того чтобы разобраться с тем, что такое ретроспективная проверка, поговорим сначала об опережающих проверках (lookahead), которые уже поддерживаются в JavaScript.

→ Вторая часть

* скорее всего, я что-нибудь да упустил, но уверен, в комментариях мне это подскажут

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


Содержание.

1. Введение
2. Заблуждения о this
3. Как определить значение this

Дорогие товарищи инженеры и будущие инженеры, сообщество Метархия открывает набор на бесплатный курс «Основы программирования», который будет доступен на youtube и github без всяких ограничений. Часть лекций уже записана в конце 2018 и начале 2019 года, а часть будет прочитана в Киевском политехническом институте осенью 2019 года и сразу же доступна на канале курса. Начало курса 3 сенября. Опыт предыдущих 5 лет, когда я делал более сложные лекции, показал необходимость лекций и для самых начинающих. В этот раз, по многочисленным просьбам студентов, я постараюсь добавить много материалов по основам программирования и, по возможности, абстрагировать курс от JavaScript. Конечно большинство примеров останутся на JavaScript, но теоретическая часть будет гораздо шире, и не ограничится синтаксисом и API языка. Часть примеров будет на TypeScript и C++. Это не курс по голому JavaScript, но фундаментальный курс по основам программирования, включая основные концепции и шаблоны проектирования для разных парадигм, функционального, процедурного, объектно-ориентированного, обобщенного, асинхронного, реактивного, параллельного, мультипарадигменного и метапрограммирования, а так же основы структур данных, тестирования, принципы построения структуры и архитектуры проектов.

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

TL;DR

---

VKScript — это не JavaScript. Семантика этого языка кардинально отличается от семантики JavaScript. См. заключение.

Посмотреть демо версию программы здесь.

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

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



Хуки были представлены в React 16.8. Это — новый механизм, позволяющий создавать компоненты, обладающие состоянием, и при этом не сталкиваться с проблемами, характерными для компонентов, основанных на классах. Сейчас Apollo Client включает в себя три хука, которые можно использовать в приложениях — во всех тех местах, где используются компоненты высшего порядка или механизмы render props. Речь идёт о хуках useQuery, useMutation и useSubscription. Эти хуки просты в освоении, они обладают множеством преимуществ перед ранее существовавшим API. В частности, это касается уменьшения размеров бандла приложения и сокращение объёма шаблонного кода.

Всем привет. Сегодня делимся с вами заключительной частью статьи «Тестирование инфраструктуры как код с помощью Pulumi», перевод которой подготовлен специально для студентов курса «DevOps практики и инструменты».

Тестирование развертывания

Рассмотренный стиль тестирования — это мощный подход, он позволяет нам проводить тестирование белого ящика для проверки внутренностей работы нашего инфраструктурного кода. Однако он несколько ограничивает то, что мы можем проверить. Тесты выполняются на основе in-memory плана развертывания, созданного Pulumi перед непосредственным развертыванием и поэтому само развертывание не протестировать. Для таких случаев в Pulumi есть фреймворк интеграционных тестов. И эти два подхода отлично работают вместе!

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



Так как состояния не должны обновляться напрямую (в React состояние должно быть иммутабельным), при усложнении структуры состояний работа с ними превращается в весьма нетривиальную задачу. А именно, программисту становится непросто ориентироваться в состоянии и пользоваться его данными в приложении.

Современная фронтенд-разработка оставляет полярные впечатления: одни её любят, другие презирают.

Я большая поклонница современной веб-разработки, хотя она мне напоминает некую «магию», со своими плюсами и минусами:

• Когда вы поймёте, как использовать волшебные инструменты (babel! бандлеры! вотчеры! и так далее!), ваш рабочий процесс становится быстрым, мощным и восхитительным
  
• Если вы не понимаете волшебные инструменты, всё ужасно запутанно
  
• …и попытки освоить магию слишком часто неудачны, если вам кто-нибудь не поможет продраться через джунгли жаргона, преувеличений и устаревшей информации в интернете

Материал, перевод которого мы сегодня публикуем, посвящён процессу разработки системы визуализации динамических древовидных диаграмм. Для рисования кубических кривых Безье здесь используется технология SVG (Scalable Vector Graphics, масштабируемая векторная графика). Реактивная работа с данными организована средствами Vue.js.

Вот демо-версия системы, с которой можно поэкспериментировать.

Интерактивная древовидная диаграмма

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

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

Придя впервые к технологии DRAG and DROP столкнулся с очень тяжелым её описанием (Это мое субъективное мнение. Прошу с ним не соглашаться, а перечитать все что только можно и посмотреть на этот вопрос с многих сторон). И решил написать пару статей, нацеленных на начинающих разработчиков, кто хочет познать дзен.

Статья будет состоять из двух частей:

• Метод создания DRAG and DROP эффектов.
• Практическое применение полученных знаний для создание сортировки при помощи DRAG and DROP

Параграф №1 Метод создания DRAG and DROP эффекта

Перед началом глубокого разбора, посмотрим поверхностно. Представьте себя в роли грузчика, вам необходимо перемесить коробку с одного места на другое. Для грузчика это «Ну взял, ну перенес. Готово!», а для программиста “Подошел к коробке, наклонился, взял коробку, поднял коробку, прошел N шагов, наклонился, отпустил коробку.”. Я это к тому, что перед началом работы проиграйте все в голове, по шагам и вы станете гораздо ближе к истине.

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

При создании DRAG and DROP первым шагом необходимо объекту, который мы будем перемещать, присвоить значение draggable='true'.

<html>
  <head>
    <style>
      .ddd {
	display:block;
	float:left;
	padding:10px;
	border:1px solid #000;
      }
    </style>
  </head>
  <body>
    <div id='d1' class='ddd' draggable='true'>Pervii 1</div>
  </body>
</html>