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

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

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

В чём же дело?

В этой статье я хочу поделиться с вами результатами изучения основных возможностей Web Speech API (далее — WSA).

Введение

WSA — это экспериментальная технология, состоящая из двух интерфейсов: SpeechSynthesis (интерфейс для перевода текста в речь) и SpeechRecognition (интерфейс для распознавания речи).

О том, что из себя представляют названные интерфейсы и что в себя включают можно почитать на MDN или в рабочем черновике (данный черновик, в отличие от большинства спецификаций, написан более-менее человеческим языком).

Что касается поддержки, то вот что об этом говорит Can I use:

Настоящий или реальный (real) DOM

DOM расшифровывается как Document Object Model (объектная модель документа). Проще говоря, DOM — это представление пользовательского интерфейса (user interface, UI) в приложении. При каждом изменении UI, DOM также обновляется для отображения этих изменений. Частые манипуляции с DOM негативно влияют на производительность.

Что делает манипуляции с DOM медленными?

DOM представляет собой древовидную структуру данных. Поэтому изменения и обновления самого DOM являются достаточно быстрыми. Но после изменения обновленный элемент и все его потомки (дочерние элементы) должны быть повторно отрисованы (отрендерены) для обновления UI приложения. Повторный рендеринг — очень медленный процесс. Таким образом, чем больше у нас компонентов UI, тем более дорогими с точки зрения производительности являются обновления DOM.

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

Допустим, у нас имеется список из 10 элементов. Мы изменяем первый элемент. Большинство фреймворков перестроят весь список. Это в 10 раз больше работы, чем требуется! Только 1 элемент изменился, остальные 9 остались прежними.

Перестроение списка — это легкая задача для браузера, но современные веб-сайты могут осуществлять огромное количество манипуляций с DOM. Поэтому неэффективное обновление часто становится серьезной проблемой. Для решения данной проблемы команда React популяризовала нечто под названием виртуальный (virtual) DOM (VDOM).

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

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

Перевод статьи подготовлен специально для студентов курса «JavaScript Developer.Basic».

---

Введение

Кажется, библиотеки Lodash и Underscore теперь используются повсюду, и в них до сих пор есть известный нам суперэффективный метод compose.

Давайте поближе познакомимся с функцией compose и разберемся, как она может сделать ваш код более читаемым, простым в сопровождении и элегантным.

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

Single-page Application (SPA) – это набор статических JavaScript и HTML файлов, а так же картинок и других ресурсов. Поскольку они не изменяются динамически, опубликовать их в интернете очень просто. Для этого существует большое количество дешёвых и даже бесплатных сервисов, начиная с простого GitHub Pages (а для кого-то даже с narod.ru) и заканчивая CDN вроде Amazon S3. Однако мне нужно было другое.

Мне нужен был Docker-образ с SPA, чтобы его легко можно было запустить как в продакшене в составе Kubernetes-кластера, так и на машине back-end разработчика, который понятия не имеет, что такое SPA.

UPD 07.07.20: Посмотерть самому на то, что в итоге получилось, можно тут: https://github.com/alexxxnf/spa-docker-example

Я для себя определил следующие требования к образу:

• простота в использовании (но не в сборке);
• минимальный размер как с точки зрения диска, так и с точки зрения RAM;
• настройка через переменные окружения, чтобы образ можно было использовать в разных средах;
• максимально эффективная раздача файлов.

Сегодня я расскажу как:

• выпотрошить nginx;
• собрать brotli из исходников;
• научить статические файлы понимать переменные окружения;
• ну и конечно как собрать из всего этого Docker-образ.

Цель этой статьи поделиться моим опытом и спровоцировать опытных участников сообщества на конструктивную критику.

Компании с правильными дизайн-процессами зарабатывают существенно больше.

Я бы хотел рассказать про три базовые вещи с позиции пятилетнего исследования и своей практики в российских и международных компаниях:

1. Мало кто воспринимает дизайн как способ проектирования продукта и как полноценный бизнес-процесс. Чем глубже этот процесс интегрирован, тем лучше финансовые результаты бизнеса в целом.
2. Часто складывается ситуация, что в дизайне никто не играет за клиента.
3. Нет особой финансовой разницы между плохим, посредственным и хорошим дизайном: рынок вознаграждает только компании с отличными процессами.

Меня зовут Николай, я дизайн-директор в McKinsey & Company. Одна из моих рабочих задач — показывать и объяснять компаниям, что такое дизайн. Вопреки распространённому мнению, это не «картинка» или «нарисованный интерфейс». Это проектирование, которое ведёт к тому, что будет решаться основная задача бизнеса. А основная задача бизнеса — максимально удовлетворять потребности клиентов, зарабатывая при этом или накапливая какой-то другой ресурс.

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

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

Давайте расскажу чуть подробнее и с числами исследования.

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

Вероятно, многие из вас слышали о таком новшестве в экосистеме JavaScript, как сервис-воркеры (Service Workers), которые являются ключевым элементом современной веб-разработки. Сервис-воркеры становятся все более востребованными, в первую очередь, благодаря популярности прогрессивных веб-приложений (Progressive Web Applications — PWA).

Когда я впервые услышал о них, я задался вопросом: «Когда мы должны использовать сервис-воркеры? В каким сценариях или контексте мы можем их использовать?»

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

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

Консоль инструментов разработчика Chrome — это, вероятно, одно из самых широко используемых и самых полезных специализированных средств браузера. Консоль даёт программисту множество интересных возможностей. Она помогает в отладке, профилировании и мониторинге кода страниц.



Материал, перевод которого мы сегодня публикуем, посвящён рассказу о некоторых возможностях консоли Chrome, которые известны не так широко, как они того заслуживают.

Свежая подборка со ссылками на новости и материалы. В выпуске: PHPUnit 9 и другие релизы, 3 свежих RFC предложения из PHP Internals, порция полезных инструментов, видео, подкасты и многое другое.

Приятного чтения!

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

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

Алиса — опытный фулл-стек разработчик и способна за неделю написать каркас SAAS проекта на своем любимом фреймворке с использованием php. На фронтенде предпочитает Vue.js.

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

Это короткая, но достаточно полезная статья для продолжающих разработчиков о итераторах в Javascript.

Привет! Меня зовут Сергей Мелюков, я senior engineer в команде Frontend Architecture в Авито.
17 августа в нашем офисе пройдет пятый по счёту митап-сателлит Moscow.js — Moscow SPA, встреча для фронтенд-разработчиков, которым интересна тема веб-приложений (Single Page Application). Поговорим об интеграции Jest с QA-инфраструктурой, DI в качестве способа масштабирования, может ли UIKIt быть максимально гибким и подходящим для всего, росте библиотек компонентов и платформенной команде. С докладами, кроме меня, выступят эксперты из Mail.Ru, Яндекса, ВКонтакте и Тинькофф.

Встреча начнётся в 11:00. Регистрируйтесь сами и приглашайте коллег. Под катом — тезисы выступлений, ссылки на регистрацию и видеотрансляцию митапа.

Перевод статьи подготовлен для студентов курса «MS SQL Server разработчик»

---

Реляционные базы данных являются одними из наиболее часто используемых баз данных по сей день, и поэтому навыки работы с SQL для большинства должностей являются обязательными. В этой статье с вопросами по SQL с собеседований я познакомлю вас с наиболее часто задаваемыми вопросами по SQL (Structured Query Language — язык структурированных запросов). Эта статья является идеальным руководством для изучения всех концепций, связанных с SQL, Oracle, MS SQL Server и базой данных MySQL.

Введение в ES6

Оглавление
1. Template literals
2. let and const
3. Arrow function expressions
4. For...of
5. Computed property names
6. Object.assign()
7. Rest parameters
8. Default parameters
9. Destructuring assignment
10. Map
11. Set
12. Classes
13. Promise
14. Iterators
15. Generators
16. Sumbol

Template literals (Template strings)

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

Шаблонные литералы заключены в обратные кавычки (` `) вместо двойных или одинарных. Они могут содержать подстановки, обозначаемые знаком доллара и фигурными скобками (${выражение}). Выражения в подстановках и текст между ними передаются в функцию. По умолчанию функция просто объединяет все части в строку. Если перед строкой есть выражение (здесь это tag), то шаблонная строка называется «теговым шаблоном». В этом случае, теговое выражение (обычно функция) вызывается с обработанным шаблонным литералом, который вы можете изменить перед выводом. Для экранирования обратной кавычки в шаблонных литералах указывается обратный слэш \.