JavaScript *

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

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

С самого начала работы над проектом, было понятно, что качественный AI мне жизненно необходим! Самому с собой играть скучно, а модуль для игры по сети — он неизвестно когда ещё будет. Я пытался писать ботов сам, но все они работали либо плохо, либо плохо и медленно. В конце концов, я устал заниматься этой самодеятельностью и нашёл шахматного бота, качество игры которого меня вполне устраивало. Но тут возникла проблема. Мне-то были нужны не только Шахматы. Тому, как я с этим боролся, и посвящена эта статья.

Уже давно я заглядывался на фреймворк для тестирования jest, в котором есть огромное количество всяких вкусных фишек, одна из которых — многопоточное выполнение тестов. При условии того, что у меня был проект на 5000 юнит тестов, миграция обещала быть крайне полезной. Далее я расскажу 14 простых шагов, за которых мне удалось мигрировать — пусть и с некоторыми оговорками — и что мы в результате получили. Спойлер — всё получилось очень круто.

Yarn — менеджер пакетов для ноды — выпустили вторую версию. И, похоже, парни серьёзно вознамерились изменить статус-кво в экосистеме ноды, а то и вообще в пакетных менеджерах. Удаляйте все свои картинки про гигабайтные мамки node_modules, убирайте yarn install из скриптов CI, мы начинаем очередную великую JavaScript-смуту. Если вкратце:

• Режим Plug'n'Play стал дефолтным, а node_modules — вторичным, через плагин.
• Сделали плагин и воркфлоу для монореп — может и lerna будет не нужна.
• Встроили свой мини-шелл, чтобы скрипты пакета без этих ваших cross-env в винде запускать.
• Добавили пролог для проверки правил между воркспейсами.
• npx опять же свой запилили.

Если вы не хотите обновлять все ваши проекты, просто запустите yarn policies set-version ^1 (смотри legacy.yarnpkg.com/en/docs/cli/policies) в репозиториях, которые должны остаться на Yarn 1 и закомитьте результат. Тогда Yarn будет использовать локальные бинарники Yarn 1 вместо глобальных так что все в команде будут использовать одну версию!

Привет Эмберисты!

Приходите на митапы конференции EmberConf, узнайте, как использовать RouteInfo.metadata из EmberMap, попробуйте сэндвич Octane & JAM на EmberConf, изучайте производительность приложения Ember с помощью Tracerbench и попробуйте расширение для VSCode Related Files Hopper!

От переводчика: Все ссылки без пометки указывают на англоязычные ресурсы. На русском вопросы можно задать в нашем добром телеграмм-канале

Ace (Ajax.org Cloud9 Editor) — популярный редактор кода для веб-приложений. У него есть как плюсы, так и минусы. Одно из больших преимуществ библиотеки — возможность использования пользовательских сниппетов и подсказок. Однако, это не самая тривиальная задача, к тому же не очень хорошо документированная. Мы активно используем редактор в своих продуктах и решили поделиться рецептом с сообществом.

Доброго времени суток, дорогие хабрахабровцы!

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

В случае JavaScript-движка V8 — очень даже. В этой статье я привожу результаты своего маленького исследования эффективности одной из внутренних оптимизаций V8.

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


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

Я — начинающий front-end разработчик. Сейчас я учусь и стажируюсь в одной минской IT компании. Изучение основ web-ui проходит на примере JS библиотеки Webix и я хочу поделиться своим скромным опытом и сохранить его в виде небольшого учебного пособия по этой интересной UI библиотеки.

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

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

Я уверен, что среди уважаемой аудитории найдутся те, кто меня поймет. Дело в том, что во всем изобилии популярных библиотек и фреймворков для веб-фронтэнда, лично мне, не нравятся, практически, все альтернативы. В каждом из вариантов я нахожу для себя существенные минусы, которые не дают мне спокойно ими пользоваться. Начинается всегда все радужно: интересный концепт, здравые, на первый взгляд, рассуждения в пунктах «за»… Но затем, все, снова и снова, начинает упираться в избыточные зависимости, лишние сущности и попытки решить проблемы, которые разработчики сами же и создали. Нам предлагают выучить новый синтаксис, принять новые идеи, узнать кучу умных слов, установить множество «необходимых» пакетов. Ок, я люблю все новое, и люблю умные слова. Но меня сильно обескураживает, когда то, что можно сделать просто, люди начинают фрактально усложнять. Вы наверняка уже читали исповеди тех, кто также как и я, отчаялся искать во всем этом здравый смысл и решил уйти в другую крайность — все писать «на ваниле». Со мной это случилось, когда я разочаровался в проекте Polymer, создаваемом при активном участии разработчиков из Google. Сначала мне все очень нравилось, девизом этого движения была фраза «Use the platform!», что для меня означало: «не стоит делать в коде того, что браузер сам сделает эффективнее». Команда Polymer сделала очень многое для внедрения новых стандартов и возможностей на уровне платформы, и за это им — огромное спасибо. Но когда эти цели были достигнуты, они сами принялись нарушать свои-же принципы. И вот их новая библиотека (LitElement) уже отказывается работать напрямую в браузере без установки специального окружения, потому как ребята не следуют стандартам… Я продолжаю наблюдать за развитием LitElement, и даже вижу явные признаки возвращения этих заблудших на путь истинный, но сам я этим уже пользоваться не буду, потому, что теперь у меня есть кое-что получше.

Попробовав Svelte в личных проектах, мне захотелось двигаться дальше, и взять фреймворк в проект побольше. Для этого написал библиотеку компонентов svelte-atoms. За основу я взял UI кит на React, который используем на работе.

Каким приемам Svelte я научился, читайте под катом.

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

Если Вы следите за релизами TypeScript, то знаете, что опциональная цепочка (Optional Chaining) и объединение с null (Null Coalescing) были представлены в TypeScript 3.7. Также эти фичи по умолчанию включены в Babel 7.8.0. Это одни из главных претендентов на роль особенностей JavaScript. В настоящее время они находятся на 4 и 3 стадиях рассмотрения, соответственно (23 января был принят стандарт ECMAScript 2020, где есть и опциональная цепочка, и объединение с null, и еще парочка занимательных вещей; я в курсе, что недавно на Хабре вышла статья-перевод про особенности, которые привнес в JS ES2020, однако, полагаю, парочка лишних примеров не повредит — прим. пер.).

В статье речь идет о state colocation, то есть о совместном размещении состояний, этот термин можно было бы еще перевести как стейт колокейшн или стейт колокация.

Одной из основных причин замедления работы React приложения является его глобальное состояние (global state). Я покажу это на примере очень простого приложения, после чего приведу более близкий к реальной жизни пример.

Вот простенькое приложение в котором можно ввести имя для собаки (если окно не работает, вот ссылка):

Если вы поиграете с этим приложением то вскоре обнаружите что оно очень медленно работает. При взаимодействии с любым полем ввода возникают заметные проблемы с производительностью. В такой ситуации можно было бы использовать спасательный круг в виде React.memo и обернуть им все компоненты с медленным рендером. Но давайте попробуем решить эту проблему по другому.

Вот код этого приложения:

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

Сидя за столом, вы используете мышку и клавиатуру, сидя на диване — скорей всего тачпад ноутбука или тачскрин планшета. Возможно, вы даже используете Leap Motion и управляете компьютером с помощью жестов. Как вы уже поняли, существует множество способов серфить интернет и управлять вашим компьютером. Геймпад может быть одним из них.

В этой статье я поделюсь с вами как:

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

Подключайте свой геймпад используя USB или Bluetooth и давайте начнем.

Когда я заглядываю в файл {domain}/selectors.js в больших проектах на React/Redux, с которыми работаю, я часто встречаю огромный список redux-селекторов подобного вида:

getUsers(state)
getUser(id)(state)
getUserId(id)(state)
getUserFirstName(id)(state)
getUserLastName(id)(state)
getUserEmailSelector(id)(state)
getUserFullName(id)(state)
…

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

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

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

Представляем вам перевод статьи из блога Carlos Caballero на сайте Medium.com. Ранее мы публиковали материал этого автора о функциях ES10, появившихся в 2019 году.