Обновить
256K+

JavaScript *

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

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №366 (20 — 26 мая 2019)

Время на прочтение3 мин
Охват и читатели11K
Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.


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

Мои грабли: из грязи в князи

Время на прочтение8 мин
Охват и читатели5.3K

Предыстория


Я работаю фронтенд разработчиком уже на протяжение одного года. На моём первом проекте был «вражеский» бэкенд. Бывает так, что это не составляет больших проблем, когда налажена коммуникация.


Но в нашем случае было не так.

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

Настоящее реактивное программирование в Svelte 3.0

Время на прочтение8 мин
Охват и читатели18K

Заголовок статьи может показаться немного кричащим, впрочем как и сам фреймворк Svelte и те идеи, что стоят за ним. Если вы ещё не знаете ничего про Svelte, пристегнитесь, сейчас мы рванём навстречу революции.


Учтите, что это не урок по началу работы со Svelte. Уже существует прекрасное пошаговое интерактивное руководство от команды Svelte, которое погрузит вас в мир реактивного программирования.


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

Как получить проходку на OFFZONE 2019 и оффер за один день

Время на прочтение4 мин
Охват и читатели4K
image

17–18 июня в Москве состоится OFFZONE 2019 — международная конференция по кибербезопасности, где свои разработки и практические исследования представят крутые специалисты из 8 стран. %Username%, предлагаем тебе убить сразу много зайцев — посетить мероприятие бесплатно, получить заряд от решения интересных задач и побороться за оффер от BI.ZONE прямо на нашем стенде.
Читать дальше →

«Там надо знать и веб-стек, и C++»: интервью с Алексеем Козятинским о разработке Chrome DevTools и не только

Время на прочтение25 мин
Охват и читатели9.6K


Как разрабатывать с помощью Chrome DevTools, всем известно. А как выглядит разработка самих Chrome DevTools? Алексей Козятинский ранее работал в Google и занимался именно этим, а теперь перешёл в Netflix, но от прежней деятельности далеко не ушёл.

Чем именно он занимается сейчас? Насколько реально для обычного разработчика не из Google законтрибьютить что-то полезное в DevTools? Какие компьютеры используют инженеры Chrome?

У нас сейчас идёт конференция HolyJS 2019 Piter, где Алексей уже выступил с новым докладом «Протокол Chrome DevTools» (запись можно увидеть в бесплатной трансляции). И по такому случаю его подробно расспросили двое участников программного комитета HolyJS: Дмитрий DmitryMakhnev Махнёв и Алексей zolotyh Золотых.
Читать дальше →

Обмен данными между React-компонентами с использованием библиотеки RxJS

Время на прочтение4 мин
Охват и читатели8.4K
Перед вами перевод статьи Chidume Nnamdi, опубликованной на blog.bitsrc.io. Перевод публикуется с разрешения автора.



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

React. Lazy loading

Время на прочтение4 мин
Охват и читатели42K

Доброго времени суток.


Занимаюсь разработкой проекта на React и Redux. Хочу в этой статье описать архитектуру своего проекта.

Итак, начнем. Файловая структура:



Для подключения редьюсеров создаем класс singleton reducerRegister:

./reducerRegister.js
class ReducerRegistry {
  constructor () {
    if (!ReducerRegistry.instance) {
      this._emitChange = null
      this._reducers = {}
      ReducerRegistry.instance = this
    }
    return ReducerRegistry.instance
  }

  getReducers () {
    return {...this._reducers}
  }

  register (name, reducer) {
    this._reducers = {...this._reducers, [name]: reducer}
    if (this._emitChange) {
      this._emitChange(this.getReducers())
    }
  }

  setChangeListener (listner) {
    this._emitChange = listner
  }
}

const reducerRegistry = new ReducerRegistry()

export default reducerRegistry

С помощью этого класса редьюсеры могут сами себя регистрировать в store.
Читать дальше →

Краткий обзор программы HolyJS 2019 Piter и ссылки на онлайн-трансляции

Время на прочтение5 мин
Охват и читатели3.2K


Уже завтра начнётся седьмая по счёту конференция HolyJS. С каждым годом работа над её программой всё сложнее не только из-за стремительного развития и взросления JS-экосистемы, но и из-за роста качества и количества заявок.

В этот раз программному комитету пришлось разобрать ≈250 заявок на 30 мест. По заявлению некоторых из участников ПК, при желании можно было сделать HolyJS в формате 4x4 (4 трека на 4 дня). А помимо докладов непосредственно про JS, нас ожидают и смелые эксперименты.

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

Детальный разбор новых возможностей React 16+, часть 1: общие сведения

Время на прочтение3 мин
Охват и читатели8.6K
Сегодня мы представляем вам первую часть перевода этого большого материала. Он посвящён детальному разбору новых возможностей React, которые появились в этой библиотеке начиная с версии 16. Автор этого материала уже 5 лет занимается программированием. В прошлом он был дизайнером и пробовал себя в качестве иллюстратора. Он включил в статью комиксы, которые, по его мнению, помогут читателям лучше усвоить то, о чём тут идёт речь.
image
В оригинале эта статья называется «Reintroducing React: every React update since v16 demystified». Название намекает на то, что читателю, возможно, уже знакомому с React, предлагается снова познакомиться с этой библиотекой. Это повторное знакомство с React поможет ему упорядочить то, что он уже знает, и открыть для себя что-то новое.
Читать дальше →

Выведение Action type с помощью Typescript

Время на прочтение6 мин
Охват и читатели51K
Всем привет! Меня зовут Дмитрий Новиков, я javascript-разработчик в Альфа-Банке, и сегодня я расскажу вам про наш опыт выведения Action type при помощи Typescript, с каким проблемами мы столкнулись и как их решили.

Это расшифровка моего доклада на Alfa JavaScript MeetUp. Код из слайдов презентации можно посмотреть здесь, а запись трансляции митапа — здесь.

Наши фронтовые приложения работают на связке React+Redux. Redux data flow упрощенно выглядит так:

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

Асинхронное программирование (полный курс)

Время на прочтение2 мин
Охват и читатели110K

Методы асинхронного программирования


Асинхронное программирование за последнее время стало не менее развитым направлением, чем классическое параллельное программирование, а в мире JavaScript, как в браузерах, так и в Node.js, понимание его приемов заняло одно из центральных мест в формировании мировоззрения разработчиков. Предлагаю вашему вниманию целостный и наиболее полный курс с объяснением всех широко распространенных методов асинхронного программирования, адаптеров между ними и вспомогательных проемов. Сейчас он состоит из 23 лекций, 3 докладов и 28 репозиториев с множеством примеров кода на github. Всего около 17 часов видео: ссылка на плейлист.

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

JavaScript-движки: как они работают? От стека вызовов до промисов — (почти) всё, что вам нужно знать

Время на прочтение14 мин
Охват и читатели66K

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

Начнём наше путешествие в язык с экскурсии в удивительный мир JavaScript-движков.
Читать дальше →

Node.js для начинающих: основы работы с файлами

Время на прочтение4 мин
Охват и читатели62K
Сегодня мы поговорим о том, как работать с файловой системой средствами Node.js, рассмотрим базовые операции, выполняемые с файлами. К таким операциям относятся следующие:

  • Создание файла
  • Чтение файла
  • Запись данных в файл
  • Удаление файла
  • Переименование файла

Необходимость в выполнении подобных операций возникает в самых разных ситуациях.


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

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

Машинное обучение глубокой нейронной сети с подкреплением на tensorflow.js: Трюки

Время на прочтение4 мин
Охват и читатели13K
Обучать глубокие нейронные сети с нуля — задача не из простых.

Требуется много данных и времени на обучение, но ускорить процесс могут помочь некоторые трюки, о которых я и расскажу под катом.

Демонстрация прохождения простого лабиринта с использованием трюков. Длительность обучения сети: 1 час 06 минут. Запись ускорена в 8 раз.

Как подключить скрипт на сторонний сайт

Время на прочтение12 мин
Охват и читатели34K
Привет, Хабр! Это первый пост в нашем блоге. Многие знают нас как чат для сайта, именно с него мы начинали, а сейчас занимаем лидирующие позиции в сфере бизнес-мессенджеров. Мы постепенно эволюционировали в комплексное бизнес-решение, которое предоставляет множество возможностей для клиентов: callback, общение с клиентами через мессенджеры, соцсети, мобильные приложения, виртуальная АТС, CRM-функции и многое другое.

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

image

Jivosite сегодня это:

  • 250К клиентов по всему миру;
  • 150М показов виджета в сутки;
  • 3.5М сообщений в сутки;
  • 10М чатов в месяц;
  • 1М одновременных коннектов;
  • 250+ серверов в production.

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

Входная точка


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

<script src="https://site.com/file.js"></script>

Казалось бы, что может быть проще подключения скрипта на сайт?
Читать дальше →

Конференция веб-разработчиков DevConf X — 21 июня

Время на прочтение1 мин
Охват и читатели1.1K
Юбилейный десятый DevConf пройдет в этом году 21 июня в X-perience Hall. Каждый год на DevConf веб-разработчики обмениваются опытом посредством докладов и, что не так заметно, но не менее важно, разговорами в кулуарах.

Еще есть время подать заявку на доклад.

Поданные заявки можно посмотреть здесь.

Василий Богонатов расскажет как Яндекс строил сервис распределённых очередей на своей новой newSQL базе данных Yandex Database.

Александр Макаров хочет обсудить пакетные метрики.

Порассуждают о вечном вопросе быстроты и качества со стороны back-end (Николай Притульский) и front-end (Дмитрий Лукиянчук) разработчиков.

До встречи на DevConf.

Исчезающие фреймворки

Время на прочтение18 мин
Охват и читатели48K
Почему мы используем фреймворки? Angular, React и Vue помогают нам строить сложные веб-приложения: структурировать код, управлять состоянием и разрабатывать сложные интерфейсы. За последнее десятилетие фреймворки стали стандартом. Дорогим стандартом. С тех пор как фреймворки вошли в обиход, JS сильно раздуло. Страниц весом несколько мегабайт становится больше, и существенная часть этого объема — фреймворк сам по себе. Кажется, это немного, но для пользователя критично — на телефоне или слабом интернете страница может даже не загрузиться. Это проблема.



Кроме лишнего веса у классических фреймворков много других минусов и они подходят не для всех проектов. Эти проблемы решены в «исчезающих фреймворках». Что это за новый тренд, почему это не «еще один JS-фреймворк», а хорошая идея и как таинственные фреймворки могут улучшить наши приложения, расскажет Павел Малышев.

Пишем чистый и масштабируемый JavaScript-код: 12 советов

Время на прочтение10 мин
Охват и читатели34K
Язык JavaScript родом из раннего веба. Сначала на нём писали простые скрипты, которые «оживляли» страницы сайтов. Теперь же JS превратился в полноценный язык программирования, который можно использовать даже для разработки серверных проектов.

Современные веб-приложения сильно зависят от JavaScript. Особенно это касается одностраничных приложений (Single-Page Application, SPA). С появлением библиотек и фреймворков, таких как React, Angular и Vue, JavaScript стал одним из основных строительных блоков веб-приложений.



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

Автор статьи, перевод которой мы сегодня публикуем, хочет поделиться советами по написанию чистого JavaScript-кода. Он говорит, что статья рассчитана на JS-программистов с любым уровнем подготовки. Но особенно полезной она будет для тех, кто знаком с JavaScript хотя бы на среднем уровне.
Читать дальше →

Как начать программировать в Adobe Illustrator. Часть вторая

Время на прочтение7 мин
Охват и читатели4.3K

Этот пост — продолжение первой части, где был представлен скрипт Expand Clipping Mask и детально описано, что и как он делает, а также попутно рассмотрены основные принципы создания подобных программ в целом. В этой части я продолжу рассказ о том, как добавить в программу новый функционал, чтобы из "заготовки" получить на выходе "готовое изделие". Здесь не обойтись без более глубокого погружения в предметную область, что является одним из необходимых условий создания полноценного продукта. Итак, начинаем погружение!


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

Как начать программировать в Adobe Illustrator. Часть первая

Время на прочтение8 мин
Охват и читатели13K

Сразу хочу предупредить, что эта серия постов не для матёрых программистов и даже не для программистов вообще. Понимаю, что это звучит крайне вызывающе, учитывая IT-тематику ресурса, и все же позвольте объяснить… В качестве аудитории, я вижу обычных дизайнеров, которые хотели бы начать программировать в среде Adobe, но по каким-то причинам (из-за страха перед неизвестным, неуверенности в своих возможностях или незнания языка) не могут сделать первые шаги в данном направлении. Свою скромную задачу вижу в том, чтобы помочь им понять, что "не боги горшки обжигают" и любой, достаточно мотивированный человек, может научится писать работающий программный код. Вполне возможно, некоторые из них так увлекутся этой игрой, что решат стать настоящими разработчиками. Чем код не шутит?


В этом посте будет рассказано о том, как посредством написания небольшой программы (скрипта на JavaScript) создать свой уникальный инструмент в Adobe Illustrator, который позволит не только сократить ваше время, но и улучшить взаимодействие с этим замечательным графическим редактором. Сначала я сформулирую задачу, затем покажу код, который ее решает и, далее, подробно расскажу о том, как он создавался. Здесь не будут обсуждаться основы Javascript, особенности объектной модели Illustrator или различные редакторы для написания/отладки кода. Эту информацию вы сможете при желании найти сами. Главное, на мой взгляд, это понимание базовых принципов написания программ, на что и делается основной упор в этой статье. Если вы готовы прыгнуть чуть выше своей головы, добро пожаловать под кат!


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