JavaScript *

Всем привет!

Давненько на Хабре не было блог-постов от команды WebStorm. Что же, будем исправляться, тем более, есть отличный повод: мы только что выпустили последнее крупное обновление WebStorm в этом году.



Если у вас нет времени на чтение всей статьи, вот несколько слов о том, что появилось в WebStorm 2019.3:

• Мы проделали серьезную работу над ускорением запуска IDE, и теперь WebStorm 2019.3 отображает экран приветствия и открывает ранее проиндексированные проекты приблизительно на 20% быстрее по сравнению с предыдущими версиями.
• Благодаря автодополнению имен слотов, быстрой документации для символов Vue и поддержке компонентов, определенных в отдельных файлах, теперь вы можете создавать приложения с Vue.js еще быстрее.
• Существующую функциональность стало удобнее использовать: теперь вы можете автоматически включать глобальные средства просмотра файлов для всех новых проектов, быстрее клонировать проекты из GitHub и не только.
• Автодополнение кода для JavaScript и TypeScript стало еще умнее. Например, для новых переменных, функций, классов и интерфейсов WebStorm теперь подсказывает подходящие имена, которые уже использовались в той же области, но еще не были определены и отмечены как unresolved.

Это только часть улучшений. Чтобы попробовать их в деле, скачайте 30-дневную пробную версию WebStorm 2019.3 на сайте или с помощью Toolbox App. Полную версию могут использовать обладатели действующей подписки на WebStorm или All Products Pack, а также бесплатно студенты и разработчики проектов с открытым исходным кодом.

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

Когда вы визуализируете 3D-объект, вам всегда нужно добавлять к нему какой-то материал, чтобы он был виден, и выглядел так, как вы хотите; неважно, делаете вы это в специальных программах или в режиме реального времени через WebGL.

Большую часть материалов можно имитировать с помощью встроенных средств библиотек вроде Three.js, но в этом уроке я покажу вам, как заставить объекты выглядеть, как стекло за три шага с помощью — вы угадали — Three.js.

Сколько технических интервью было у вас в жизни?

За последние пять лет я побывал на 35 технических интервью всех вообразимых видов и специфик — от казахстанских стартапов по коллективной закупке мяса на зиму до немецких и американских финтех-сервисов и банков; с уклонами в программирование, деливери и управление; удаленных и в офисе; ограниченных и неограниченных по времени; стрессовых и расслабленных, на разных языках.

Это, вкупе с ~20 собеседованиями, которые я провел сам в качестве нанимателя — достаточное число, чтобы стать королем собеседований сделать следующее наблюдение (изначально совершенно неочевидное) и утвердиться в нем: я убежден, что во многом благодаря такому количеству собеседований, начинающему походить на маргинальную привычку, я изучил свой стэк на профессиональном уровне и стал конкурентоспособным специалистом при том, что до этого уже работал 10 лет в веб-разработке.

Здравствуйте, меня зовут Дмитрий Карловский и я… хочу поведать вам о фундаментальной особенности систем типов, которую зачастую или вообще не понимают или понимают не правильно через призму реализации конкретного языка, который ввиду эволюционного развития имеет много атавизмов. Поэтому, даже если вы думаете, что знаете, что такое "вариантность", постарайтесь взглянуть на проблематику свежим взглядом. Начнём мы с самых основ, так что даже новичок всё поймёт. А продолжим без воды, чтобы даже профи было полезно для структурирования своих знаний. Примеры кода будут на псевдоязыке похожем на TypeScript. Потом будут разобраны подходы уже нескольких реальных языков. А если же вы разрабатываете свой язык, то данная статья поможет вам не наступить на чужие грабли.

Строгий режим (strict mode) — это важная часть современного JavaScript. Именно этот режим позволяет разработчикам пользоваться более ограниченным, чем стандартный, синтаксисом.

Семантика строгого режима отличается от традиционного нестрогого режима, который иногда называют «грязным» (sloppy mode). В таком режиме синтаксические правила языка не так строги, а когда происходят некоторые ошибки, система никак не оповещает о них пользователя. То есть — ошибки могут быть проигнорированы, а код, в котором они допущены, сможет выполняться дальше. Это способно привести к неожиданным результатам выполнения кода.



Строгий режим вносит в семантику JavaScript некоторые изменения. Он не даёт системе закрывать глаза на ошибки, выдавая соответствующие исключения. Это приводит к остановке выполнения программ.

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

WebSocket — это прогрессивный стандарт полнодуплексной (двусторонней) связи между клиентом и сторонним сервисом в режиме реального времени. Веб-сокеты используются для организации непрерывного обмена данными без дополнительных HTTP-запросов.

И мы рады сообщить вам, что все это стало возможным в Voximplant благодаря новому модулю VoxEngine, который называется – сюрприз – WebSocket. Отныне вы сможете передавать текст и аудио, пользуясь преимуществами веб-сокетов в полной мере. Проще говоря, у вас появился еще один инструмент, чтобы прокачать ваше приложение.

Из этой статьи вы узнаете, как создать исходящее WebSocket-соединение, передать через него аудиопоток и преобразовать его в текст с помощью Google Cloud Speech-to-Text API.

Добрый день, уважаемые коллеги!

Меня зовут Александр, я разработчик HTML5 игр.

В одной из компаний, куда я отправлял свое резюме, мне предложили выполнить тестовое задание. Я согласился и, спустя 1 день, отправил в качестве результата разработанную по ТЗ HTML5 игру.



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

Данная статья даст представление об объеме работ, достаточном для успешного выполнения среднестатистического тестового задания на позицию HTML5 разработчика. Материал также может быть интересен всем, кто хочет познакомиться с фреймворком Phaser. А если вы уже работаете с Phaser и пишете на JS — посмотрите, как разработать проект на TypeScript.

Итак, под катом много кода на TypeScript!

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

В данной статье угоняем куки через Stored XSS, разбираемся с CSRF атакой и реверсим Flash SWF файл. Ссылки на предыдущие статьи:

Часть 1: Web — javascript authentication, obfuscation и native code. Решение задач с r0от-мi Web— Client.

Node.js 13.2.0 идет с поддержкой ECMAScript модулей, известных по своему синтаксису import и export. Ранее эта функциональность была за флагом --experimental-modules, который больше не требуется. Однако, реализация все еще экспериментальная и может меняться.

От переводчика: это долгожданная фича наконец-то позволит нам использовать стандартный модульный синтаксис, уже доступный в современных браузерах, а теперь еще и в Node.js без флагов и транспайлеров

Прошло примерно 18 месяцев с внутреннего релиза Deno, вышел preview release, появилось несколько статей на Хабре, и Райан ездит по конференциям и рассказывает о нём. Однако я нигде так и не видел сколько-нибудь вдумчивого разбора этого проекта — почему-то все ограничиваются переводом документации...

Что же, давайте попробуем это сделать сейчас. Последние 5 лет я пишу на Node.JS, а компания OneTwoTrip, где я сейчас работаю, пишет проекты на ноде около 9 лет (да, это я писал историю про 9 лет в монолите на ноде). Так что анализ должен выйти неплохой. Тем более что я его уже рассказал на Moscow Node.JS Meetup 10, и было интересно. Кстати, если вам удобнее слушать, а не читать, то послушать и посмотреть можно вот тут. Моё выступление второе, я чувак в розовой рубашке.

Angular-разработчики в большом долгу перед библиотекой zone.js. Она, например, помогает достичь в работе с Angular почти волшебной лёгкости. На самом деле, практически всегда, когда нужно просто поменять какое-нибудь свойство, и мы меняем его, ни о чём не задумываясь, Angular производит повторный рендеринг соответствующих компонентов. В результате то, что видит пользователь, всегда содержит самую свежую информацию. Это просто замечательно.

Здесь мне хотелось бы исследовать некоторые аспекты того, как применение нового компилятора Ivy (он появился в Angular 9) способно значительно облегчить отказ от использования zone.js.



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

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

Как можно понять из предыдущей статьи, я работала с разными проектами. Первые дни в новой команде обычно проходят одинаково: бэкендер подсаживается ко мне и выполняет магические действия по установке и деплою приложения. Докер незаменим для фронтендеров, т.к. бэкенд зачастую написан на широком спектре стеков PHP/Java/Python/C# и фронту не надо каждый раз отвлекать бэка, чтобы все установить и развернуть. Только в одном месте я видела связку Docker-Jenkins с прозрачным деплоем, логами, прикрученными автотестами.

Про докер написано много подробных статей. В этой статьей речь пойдет о развертывании Single Page Application с использованием VueJS/Vue Router, серверная часть в виде RESTful API c NodeJS, а в качестве базы данных используется MongoDB. Для описания и запуска нескольких приложений-контейнеров используется Docker Compose.

Публикуем вторую часть перевода материала, посвящённого пятёрке лучших JavaScript-инструментов для разработки клиентских частей веб-проектов. В первой части речь шла о библиотеке React и о фреймворке Angular. Здесь мы обсудим Vue, Ember и Backbone.

С 10 июня 2019 (а технически с ноября 2019), Яндекс прекратил поддержку анонимного использования сервисов JS API & HTTP Geocoder — тарифицируемые запросы к API (поиск, геокодирование, панорамы и т.д.) перестали работать. Но адекватного биллинга и трекинга запросов Яндекс — не предоставил. Если интересно как спихнуть счёт за геокодирование на гигантов рунета (перечисленных партнёров на заглавной странице сервиса), а так же — как трекинг запросов делается «по уму» — прошу под кат.

Оглавление

Предисловие
Краткий обзор ES7
1. Object.entries
2. Object.values
3. String.prototype.padEnd
4. String.prototype.padStart
5. Object.getOwnPropertyDescriptor
6. Trailing commas
7. SharedArrayBuffer
8. Atomics
9. Async functions

Предисловие

Здравствуйте, в прошлом я уже рассматривал нововведения в ES6 и теперь время разобрать ES8 так как он принёс много нового. Рассматривать отдельно ES7 (2016), я не стал так как этот релиз принёс всего 2 нововведения. Это Array.prototype.includes() и оператор возведения в степень. Но всё же прежде чем приступить к ES8, давайте рассмотрим нововведения из ES7.

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

Метод includes() определяет, содержит ли массив определённый элемент, возвращая в зависимости от этого true или false.

Array.prototype.includes(searchElement[, fromIndex = 0]) : Boolean

searchElement — Искомый элемент.

fromIndex — Позиция в массиве, с которой начинать поиск элемента searchElement. При отрицательных значениях поиск производится начиная с индекса array.length + fromIndex по возрастанию. Значение по умолчанию равно 0.

Мы выбрали из 20 000 проектов и библиотек для JavaScript 48 самых лучших (по звёздам на GitHub) и сгруппировали в 5 категорий:

• Пользовательский интерфейс (1~9)
• Инструменты JavaScript (10~25)
• Machine Learning (26~33)
• Проекты (34~39)
• Инструменты разработчика (40~48)

Привет!

Во вторник, 26 ноября, мы проведём третий JS-митап. Бесплатный по предварительной регистрации, на привычной вам площадке, Большая Полянка, дом 2/10, строение 1 (Deworkacy Полянка).

Спикеры от Ozon.travel, HH.RU и, само собой, Альфа-Банка.



Поговорим о CI/CD, про использование Typescript вместо Babel и многом другом.

Вероятно, фронтенд-разработчикам знакомо нечто подобное: вводишь в поисковике «лучшие JavaScript-фреймворки» и получаешь в ответ целую гору результатов, из которой очень непросто выбрать именно то, что нужно.

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



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

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

Раньше приложения «не помнили» ни действия, что выполняют сценарии, ни результаты вычислений, так что разработчики были вынуждены сохранять значения в сторонних сервисах или на своем бэкенде. Если вы когда-либо работали с local storage в браузере, то наша новая функциональность весьма похожа на это, т.к. позволяет приложениям запоминать пары «ключ-значение», которые уникальны для каждого приложения в вашем аккаунте. Работа хранилища стала возможна благодаря новому модулю ApplicationStorage – под катом вас ждет краткое руководство по его использованию, welcome!