Все потоки
Поиск
Написать публикацию
Обновить
222.62

JavaScript *

Прототипно-ориентированный язык программирования

Сначала показывать
Порог рейтинга
Уровень сложности

Экосистема JavaScript: тренды в 2021 году. Всё ли так однозначно?

Время на прочтение4 мин
Количество просмотров14K

В конце прошлого года на сайте State of JS 2020 было опубликовано исследование о состоянии экосистемы JavaScript в 2020 году с ретроспективой на предыдущие годы развития. Исследование основывалось на многочисленных опросах, в которых суммарно приняли участие более 23 тысяч человек из 137 стран мира.

Читать далее

Умная квартира на JavaScript. От светодиода до распознавания лица в камере домофона

Время на прочтение12 мин
Количество просмотров21K

Привет! Меня зовут Антон, я ведущий разработчик в команде рекламного фронтенда ВКонтакте. Мои рабочие задачи связаны с развитием рекламного кабинета и возможностей для продвижения сообществ в приложении VK. Здесь результаты можно видеть только в браузере и телефоне, но мне давно хотелось научиться управлять объектами и в реальном мире — например, в своей квартире. Таким опытом я и хочу поделиться в этой статье: опишу, как создал и развивал свой умный дом, с какими проблемами столкнулся по ходу проекта и как их решал.

Читать далее

Метрики производительности WEB Vitals

Время на прочтение6 мин
Количество просмотров16K

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

Какие существуют метрики производительности?

Как оценить качество вашего приложения? 

Как поднять метрики? 

Какие инструменты позволяют оценить показатели производительности, и др. 

Читать далее

Профилирование Node.js. Доклад Яндекса

Время на прочтение18 мин
Количество просмотров9.2K
Полтора года назад я выступил на FrontendConf и посвятил 40 минут профилированию. Перечисленные приемы и инструменты по-прежнему актуальны — сегодня публикую видео с подробным конспектом. Доклад расскажет, что такое профилирование, научит локализовывать потенциальные утечки памяти, а также немного углубит ваше понимание инструмента DevTools.

— Всем привет. Меня зовут Артём Несмиянов, я fullstack-разработчик Яндекс.Практикума. И, как видите, сегодня я хочу рассказать о профилировании Node.js, хотя это не совсем фронтендерская тема. Но сейчас очень много приложений используют фронтбэк, где есть свой server-side rendering, где нужно это все отдавать клиенту, и фронтендеру часто приходится взаимодействовать с Node.js. Иногда происходят вещи, которые могут повлиять на ваш сервер, положить его, перегрузить и так далее. С этим надо бороться. Я хочу показать, какие методы использовали мы. Это скорее введение в профилирование Node.js.
Читать дальше →

О завершении работы Node.js-процессов

Время на прочтение9 мин
Количество просмотров25K
Node.js-процессы завершают работу по разным причинам. При этом в некоторых случаях «смерть» процесса можно предотвратить. Например — в ситуации, когда причиной остановки процесса может стать необработанная ошибка. А вот иногда с остановкой процесса ничего поделать нельзя. Например — если её причина кроется в нехватке памяти. В Node.js существует глобальный объект process, являющийся экземпляром класса EventEmitter. Этот объект, при нормальном завершении процесса, генерирует событие exit. Код приложения может прослушивать это событие и, при его возникновении, выполнять, в синхронном режиме, некие операции по освобождению ресурсов.

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

Операция Пример
Ручной выход из процесса
process.exit(1)
Неперехваченная ошибка
throw new Error()
Необработанное отклонение промиса
Promise.reject()
Проигнорированное событие error
EventEmitter#emit('error')
Необработанный сигнал
$ kill <PROCESS_ID>

Многие из этих операций часто выполняются случайно, например — это касается неперехваченных ошибок и необработанных исключений. Но одна из них, с которой мы начнём разбор причин завершения Node.js-процессов, была создана с целью дать разработчику возможность вручную завершать процессы.
Читать дальше →

Шпаргалка по функциональному программированию

Время на прочтение23 мин
Количество просмотров44K

Привет, меня зовут Григорий Бизюкин, я преподаватель Школы разработки интерфейсов и фронтенд-разработчик в Яндексе. Давайте поговорим о функциональном программировании в мире JavaScript. Мы все про ФП что-то слышали, нам всем оно интересно, но у меня, когда я искал полезные материалы для подготовки к лекциям, сложилось такое впечатление: есть куча статей, каждая из которых либо говорит об ФП общими словами, либо раскрывает отдельный маленький кусочек темы, чего, конечно, недостаточно.



Добавим функционального света


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

Читать дальше →

Angular Universal: проблемы реального приложения

Время на прочтение9 мин
Количество просмотров19K

Angular Universal — это опенсорсный проект, который расширяет функциональность @angular/platform-server. Он делает возможным Server Side Rendering в Angular. В этой статье мы обсудим проблемы и возможные решения, с которыми мы столкнулись при разработке реального приложения с Angular Universal.

Читать далее

Минимальное PWA

Время на прочтение6 мин
Количество просмотров23K

Какие характеристики должны быть у web-приложения, чтобы соответствовать критерию "прогрессивное"? Понятно, что, как и обычные web-приложения, прогрессивные строятся на базе "большой тройки" web-технологий - HTML/CSS/JS. Но что именно делает web-приложения прогрессивными?

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

Читать далее

Сделаем худший Vue.js в мире

Время на прочтение5 мин
Количество просмотров17K
Некоторое время назад я опубликовал похожую статью про React, где с помощью пары строк кода мы создали крошечный клон React.js с нуля. Но React — далеко не единственный инструмент в современном фронтенд-мире, Vue.js стремительно набирает популярность. Давайте разберемся, как работает этот фреймворк, и создадим примитивный клон, похожий на Vue.js, в образовательных целях.

Реактивность


Как и React.js, Vue является реактивным, то есть все изменения в состоянии приложения автоматически отражаются в DOM. Но в отличие от React, Vue отслеживает зависимости во время рендеринга и обновляет только связанные части без каких-либо «сравнений».

Ключ к реактивности Vue.js — это метод Object.defineProperty. Он позволяет указывать настраиваемый метод getter / setter для поля объекта и перехватывать каждый доступ к нему:
Читать дальше →

Как мы делаем базовые компоненты в Taiga UI более гибкими: концепция контроллеров компонента в Angular

Время на прочтение6 мин
Количество просмотров13K

В процессе эволюции нашей библиотеки компонентов Taiga UI мы стали замечать, что некоторые компоненты посложнее имеют @Input просто для того, чтобы прокинуть его значение в @Input другого нашего базового компонента внутри себя. Иногда встречается такая вложенность даже в три слоя.

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

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

Посмотреть

Полноэкранное зацикленное слайд-шоу из изображений и видеофайлов на JavaScript

Время на прочтение3 мин
Количество просмотров5.4K
Недавно я подумал о том, что было бы неплохо сконвертировать кучу имеющихся у меня GIF-файлов в формат MP4 ради экономии места на картах памяти. Мне хотелось сделать так, чтобы полученные видеофайлы можно было бы смотреть в зацикленном виде. QuickLook на Mac, что весьма печально, этого не умеет.


Слайд-шоу

Поэтому я взялся за решение моей задачи собственными силами и быстро создал небольшой проект на чистом JavaScript, который дал мне то, что нужно. Здесь с ним можно поэкспериментировать. А вот — видео, демонстрирующее его в деле.
Читать дальше →

Hello, Word! Разрабатываем браузерное расширение в 2021-м

Время на прочтение5 мин
Количество просмотров20K
Привет!

Меня зовут Саша Коновалов, я разработчик в компании Oxonit и наставник на программе «Мидл фронтенд-разработчик» в Яндекс.Практикуме.

На примере разработки расширения «Hello, Word» я расскажу, как разрабатывать кроссбраузерное расширение со знаниями современного фронтенда:

  • для чего нужно кроссбраузерное расширение;
  • как его разработать под разные браузеры;
  • модульность кода, как переиспользовать компоненты и как современный фронтенд помогает в разработке расширений;
  • какие инструменты можно использовать для сборки и публикации расширений (webpack, web-ext).

Если вам интересно посмотреть исходники, я разместил их на GitHub.

Структура расширения, о котором я расскажу в статье, близка к проекту SponsorBlock. Этот проект вдохновлял меня во время работы над собственным.

Итак, создадим расширение – Hello, Word!


Hello, Word — это расширение для перевода и запоминания слов. Оно стало прототипом моего пет-проекта Wordzzz, поэтому в посте я буду приводить примеры из него.


Рисунок 1. Описание функциональности
Читать дальше →

Мир JavaScript в 2021 году

Время на прочтение7 мин
Количество просмотров37K
Мир веб-разработки весьма изменчив. Изменения в нём происходят очень быстро. Что принесёт в него 2021 год? Здесь я хочу поделиться выводами о грядущих крупных JS-трендах, которые я сделал, проанализировав соответствующие исследования, проведённые в 2020 году.



Сначала — пара слов о самих этих исследованиях. К сожалению, какое-то время нам придётся обходиться без свежих материалов отличного Front End Tooling Survey. Это усложняет поиск трендов. И хотя в этом году на одно хорошее исследование стало меньше, вместо него появилось одно новое — The State of Front End. Но оно проводится первый год, поэтому в нашем распоряжении нет его данных за прошлые годы, что, опять же, не способствует облегчению задачи поиска трендов. Правда, в нём приняло участие внушительное количество разработчиков со всего мира (4500), что, определённо, делает его ценным источником информации.
Читать дальше →

Ближайшие события

TypeScript: Раскладываем tsconfig по полочкам. Часть 1

Время на прочтение10 мин
Количество просмотров105K

В данной статье я хочу предоставить переработанную и упорядоченную выжимку документации по настройке tsconfig.json, которая, я уверен, будет полезна тем, кто только начинает свой путь в мире TypeScript или тем, кто до этого момента не нашёл времени и сил, чтобы разобраться в деталях и теперь хочет закрыть этот пробел.

Читать далее

Решение забавной задачки на JavaScript

Время на прочтение9 мин
Количество просмотров17K
Наша история начинается с твита Томаша Лакомы, в котором он предлагает представить, что такой вопрос встретился вам на собеседовании.



Мне кажется, что реакция на такой вопрос на собеседовании зависит от того, в чём конкретно он заключается. Если вопрос действительно в том, каково значение tree, то код можно просто вставить в консоль и получить результат.

Однако если вопрос в том, как бы вы решили эту задачу, то всё становится достаточно любопытным и приводит к проверке знаний тонкостей работы JavaScript и компилятора. В этой статье я попробую разобрать всю эту неразбериху и получить интересные выводы.
Читать дальше →

Сага о типизации и тайпчекинге для JavaScript

Время на прочтение12 мин
Количество просмотров12K

Привет! Хочу поделиться своими мыслями по, казалось бы, простой теме — типизации. В частности, поговорить о тайпчекинге в JavaScript.

Часто люди воспринимают типизацию как эдакую серебряную пулю, которая защищает от всех проблем. Но это не так, часто ожидания от типизации неоправданны, а простота таких инструментов, как TypeScript, обманчива и слишком переоценена.

Это не типичная статья из серии «Изучаем TypeScript», а, как мне кажется, фундаментальная история. Мы начнем с основ, поговорим о данных, о способе их хранения, а затем перейдем к типизации и посмотрим, как она влияет на работу программы.

Читать далее

Архитектурный паттерн Dependency Injection в React-приложении

Время на прочтение15 мин
Количество просмотров43K

Расшифровка доклада Сергея Нестерова с конференции FrontendLive 2020.

Привет! Меня зовут Сергей, уже больше двух лет я работаю в группе компаний Тинькофф. Моя команда занимается разработкой системы для анализа качества обслуживания клиентов в Тинькофф, и, как вы, наверное, догадались, мы используем React в своем приложении. Не так давно мы внедрили в свой проект архитектурный паттерн Dependency Injection совместно с IoC-контейнерами. Сделали мы это не просто так: это позволило нам решить ряд проблем, которые тормозили разработку нового функционала.

Читать далее

Как меня чуть не уволили за выбор React для корпоративного приложения

Время на прочтение8 мин
Количество просмотров58K

Предполагалось, что React облегчит разработку, но он создал препятствия


Летом 2018 года, мой босс, Эдриан, попросил меня присоединиться к его звонку по Skype с Джеймсом, техническим директором крупной канадской компании.

Пока мы узнавали друг друга, я понял, что Джеймс – умный парень с большими амбициями. Его видение заключается в миграции массивного десктопного приложения WPF в облако.

Мне нравится его дружелюбное отношение, и я могу сказать, что он готов сотрудничать с нами. У Джеймса уже есть партнёр по развитию в Индии, но ему не хватает опыта в создании веб-приложений. Казалось бы, что может пойти не так?


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

Углублённое руководство по JavaScript: генераторы. Часть 1, основы

Время на прочтение10 мин
Количество просмотров27K

В этой серии статей я расскажу почти всё, что нужно знать о генераторах в JavaScript: что это такое, как их использовать и какие тонкости с ними связаны. И, как всегда, начнём мы с основ — общего представления о том, что такое генераторы.

Я не исхожу из того, что вы хоть что-то знаете о генераторах. Но вам требуется хорошо разбираться в итераторах и итерируемых объектах в JavaScript. Если вы с ними не знакомы или «плаваете в теме», то сначала углублённо изучите их. Если же вы владеете этими знаниями, то можно погружаться в мир генераторов. Это очень странный мир, в котором многое совершенно не похоже на то, что вы используете в обычном JS-коде. При этом сам механизм очень прост, и даже после прочтения этой статьи вы сможете уверенно использовать генераторы. Приступим!
Читать дальше →

CRUD для NMAP’а: решение для мониторинга открытых портов на хостах

Время на прочтение9 мин
Количество просмотров10K
Привет, Хабр! Меня зовут Рудаков Александр, я занимаюсь информационной безопасностью в компании "ЛАНИТ-Интеграция". Однажды, в рамках работы над проектом, мне понадобилось организовать небольшой непрерывный мониторинг (с хранением истории) открытых портов в подсети серверов. Требовалось за короткое время сделать рабочий прототип решения для данной задачи. В этой статье я расскажу о том, как с помощью nmap, Node.JS, PostgreSQL и ORM Sequelize организовать мониторинг открытых портов на хостах.

Источник 
Читать дальше →

Вклад авторов