Обновить
256K+

JavaScript *

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

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

Больше, больше фронтенда — доклады c ЮMoneyDay

Время на прочтение2 мин
Охват и читатели2.8K
Готовы потереть за фронтенд? Мы — да. Поэтому публикуем новую партию полезного видеоматериала от экспертов крупного платежного сервиса. Под катом найдете 2 нескучных доклада про:

  • лайфхаки в CSS, HTML и JS,
  • архитектуру фронтенда ЮMoney.

Устраивайтесь поудобнее: возможно, такого вы раньше не слышали.


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

О первоклашках, дистанционке и асинхронном программировании

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

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

Пока я увлеченно занимался веб разработкой, где-то на фоне жена периодически жаловалась на проблемы выбора школы для ребёнка. И тут (вдруг) ребёнок подрос и школьный вопрос встал ребром. Ладно, значит, время пришло. Давайте вместе разберёмся, что же все-таки не так с системой образования в бывшей 1/6 части суши, и что мы с вами можем с этим сделать?
Читать дальше →

В чем разница между useLayoutEffect, componentDidMount, useEffect

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

Привет хабр!

В React на смену эпохи классов, пришла эпоха функциональных компонентов. И нам показали хуки, как замена методам жизненного цикла. Но многие так и не задумывались, а равнозначный ли обмен componentDidMount на useEffect. Эта статья направлена как раз на таких людей, чтобы закрыть ваш пробел, в том как работают componentDidMount, useEffect и useLayoutEffect. (данная статья является расшифровкой видео)

Read more

Видео вещание с OvenMediaEngine, до свидания nginx rtmp module

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


Когда Роман Арутюнян (rarutyunyan) выпустил модуль nginx-rtmp-module, это сильно перевернуло взгляд на доступность организации видеовещания. До этого, это казалось каким-то дорогим и сложным делом.

31 декабря Adobe официально хоронит флешплеер и убирает ссылки на скачивание с сайта. Это, конечно, не может не радовать. Эти засранцы то и дело подсовывали включенные по умолчанию галочки, так что даже продвинутому пользователю прилетал вместе с флешплеером еще и какой-то антивирус в лучшем случае. То, что это чудовище бесконечно просило обновлений ручками через браузер, знают все. Ходил даже анекдот, предлагающий создателям флешплеера законодательно ограничить паспорта сроком на 1 неделю с возможностью бесконечной перевыдачи.
Читать дальше →

Превращаем рекурсию в цикл

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

Максим написал рекурсивный алгоритм, и столкнулся со Stack Overflow exception.


Зачем Максим это сделал?


Потому что он любит короткие и элегантные на его взгляд решения.


Он не наслаждается, когда пишет так:


function factorial(n) {
  let res = 1;
  for (let i = 2; i <= n; i++) {
    res *= i;
  }
  return res;
}

Он хочет писать вот так:


const factorial = (n) => (n > 1 ? n * factorial(n - 1) : 1);

Но когда он запускает подобные этому рекурсивные алгоритмы, бывает так, что он видит это:


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

Разновидности объектно-ориентированного программирования (ОПП) в JavaScript. Часть 1

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

Объектно-ориентированное программирование - это способ написания кода, позволяющий создавать различные объекты из общего объекта. Общий объект обычно называется blueprint, в то время как создаваемые объекты называются экземплярами.

Каждый экземпляр имеет свойства, которые не разделяются с другими экземплярами. Например, если у вас есть blueprint Human, вы можете создавать экземпляры Human с разными именами.

Второй аспект Объектно-ориентированного программирования - это структурирование кода, когда у Вас есть несколько уровней blueprints. Это обычно называется наследованием или подклассом.

Третий аспект объектно-ориентированного программирования связан с инкапсуляцией, когда вы скрываете определенные кусочки информации внутри объекта, чтобы они были недоступны.

Начнем с основ — введения в четырех разновидностей объектно-ориентированного программирования.

Начнём!

JavaScript за 60 секунд: работаем с картой (Geolocation API, Leaflet.js, Nominatim)

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


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

В этом небольшом туториале мы вместе с вами выполним три простых задания:

  • С помощью Geolocation API и Leaflet.js определим текущее местоположение пользователя и отобразим его на карте
  • Реализуем анимированный переход между городами
  • Реализуем переключение между адресами с предварительным получением названия объекта и его координат

Код проекта находится здесь.

Поиграть с кодом можно здесь:


Автоматизация Instagram

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

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

Первым делом пошел смотреть что там говорят интернеты. Чтение официальных доков по API instagram дали четко понять, что владельцы не хотят давать доступ к неограниченной автоматизации, можно автоматизировать работу со своим аккаунтом в базовом варианте, но это не подходило под мою задачу, а "бизнес" вариант API требовал верификации компании, что естественно мне не подходит. (Может быть уже что-то изменилось …)

Читать далее

Serverless шагает по планете. Сравним SberCloud и AWS

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

image


Мне с друзьями довелось поучаствовать в хакатоне SberCloud.Advanced Hacking и пощупать облачные сервисы Сбера. На моем текущем месте работы я каждый день работаю с Serverless стеком от AWS (CloudFront + Lambda Edge + S3 + Lambda + Step Functions + Aurora PostgreSQL Serverless + DynamoDB + Cognito). Так что мне есть с чем сравнить. Если заинтересовались, то добро пожаловать под кат.


Дайджест свежих материалов из мира фронтенда за последнюю неделю №445 (7 — 13 декабря 2020)

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

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

Эпическая сага про маленький custom hook для React (генераторы, sagas, rxjs) часть 3

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

Можно представить себе redux-saga (middleware) как администратора камер хранения. В камеры хранения можно класть эффекты на неопределенный срок и забирать их оттуда, когда будет нужно. Есть такой посыльный put, который приходит к диспетчеру и просит положить в камеру хранения сообщение (эффект). Есть такой посыльный take, который приходит к диспетчеру и просит ему выдать сообщение с определенным типом (эффект). Диспетчер, по просьбе take, смотрит все камеры хранения и если этих данных нет, то take остаётся с диспетчером и ждёт, пока put не принесёт данные с нужным для take типом. Существуют разные виды таких посыльных (takeEvery и т.д.).

Продолжить копать...

Дино (Deno): Создать Rest API с помощью JWT

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

Со времен первой версии Deno стал модным словом для разработчиков Javascript/TypeScript/Node. Давайте погрузимся в эту технологию, создав защищенный с помощью JWT REST API.

Желательно уже иметь некоторые основы в Node и его экосистеме (Express, Nodemon, Sequelize и т.д.), чтобы следовать этому руководству.

Читать далее

Эпическая сага про маленький custom hook для React (генераторы, sagas, rxjs) часть 2

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

Генераторы - это новый вид функций, который появился в ES6. О них написано немало статей и приведено множество теоретических примеров.

Представим, что генератор (функция в объявлении, которой есть *) - это некое электрическое устройство с дистанционным пультом управления. После создания и монтирования генератора (объявления функции) нужно его "крутануть" (выполнить эту функцию), чтобы он вращался на холостых оборотах и "запитал" пульт управления собой (при выполнении функции-генератора возвращает итератор). На этом пульте управления две кнопки: Пуск (вызвать первый раз метод next итератора) и Next (последующие вызовы метода next итератора). Далее с этим пультом управления можно носиться по всей электростанции (по нашему приложению) и когда понадобиться электрическая энергия (некие значения из функции-генератора) нажимать на пульте кнопку next (выполнять метод next() генератора). Генератор производит нужное количество электроэнергии (возвращает некое значение через yield) и опять переходит в холостой режим (функция-генератор ждёт следующего вызова next от итератора). Цикл продолжается, пока генератор может производить электричество (имеются операторы yield) или он не остановится (в функции-генераторе встретится return).

Копнуть ещё глубже

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

Кастомизация компонентов Ant Design и оптимизация бандла

Время на прочтение12 мин
Охват и читатели35K
The Archivist by juliedillon

Я Иван Копенков, ведущий фронтенд-разработчик в Mail.ru Cloud Solutions, в статье расскажу, какие есть подходы к кастомизации компонентов UI-библиотеки Ant Design, как это сделали мы, а так же покажу, как удалось полностью избавиться от неиспользуемых модулей и уменьшить размер бандла.

Если вы уже используете или собираетесь использовать библиотеку компонентов Ant Design, то из данной статьи сможете узнать, как можно делать это удобнее и эффективнее. Если вы используете другую библиотеку компонентов, то сможете использовать описанный подход в работе с вашей UI-библиотекой.
Читать дальше →

Brython: заменяем JavaScript на Python на фронтенде

Время на прочтение4 мин
Охват и читатели26K
Привет, Хабр!

К огромному удовлетворению нашей читательской аудитории, наша работа над обновлением книг по Python не прекращается. Но не прекращается и поиск в этом направлении — и сегодня мы хотели бы упомянуть Brython — Python для браузеров. Статья короткая, немного игривая и детективная, мы постарались сохранить авторский стиль.
Читать дальше →

Эпическая сага про маленький custom hook для React (генераторы, sagas, rxjs)

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

Стояла задача реализовать прелоадер с обратным отсчетом на реакте. Т.к. гуглить не умею и очень люблю лепить велосипеды (хороший двухместный получился из двух велосипедов "Украина"), то я был обречен глубоко копать на полях асинхреньщины. Забегу наперёд и скажу, что реализовал этот прелоадер с помощью генераторов, redux-saga, rxjs. Очень интересный опыт и хотелось бы поделиться, учитывая, что в процессе разбирательств, кроме статей, описывающих очевидные вещи, и обрывков сугубо специфической информации на stackoverflow, не находил.

Часть первая - создание кастомного хука прелоадера.

Копнуть глубже

Оптимизация трафика при синхронизации состояний через Jsonpatch

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

Задача синхронизации состояния между клиентом и сервером может быть решена разными способами, я хотел бы расказать про вариант с использованием спецификации JSON Patch, а также про спецификацию MessagePack и способ оптимизации размера пакета через библиотеку PatchPack.


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


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

Использование Effector в стеке React + TypeScript

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

В этой статье я поделюсь своим кратким обзором внедрения стейт-менеджера Effector в продуктовый проект на стеке React + TypeScript, а также покажу на примере, как легко это можно сделать.

Читать далее

Frida изучаем эксплуатацию алгоритмов Heap

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

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

Все примеры в статье будут касаться атак на кучу в операционной системе Linux, поэтому запасаемся терпением и попкорном.

Читать далее

Разработка сервера для многопользовательской игры с помощью nodejs и magx

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

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


Я хочу рассказать про библиотеку magx, используя которую можно не задумываться о сетевой составляющей (коммуникации сервера и клиентов), a сразу сконцентрироваться на разработке логики игры и клиентского UI.

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