Обновить
234.49

JavaScript *

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

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

Видео в вебе, Browser Policy и палки в колёсах

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

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

Это негативно сказывалось на пользовательском опыте, и в какой-то момент разработчики браузеров решили, что хватит это терпеть. Так родилась Autoplay Policy.

Рассмотрим её подробнее

Использование директивы NgOptimizedImage для реализации загрузки изображений в Angular

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

Директива NgOptimizedImage в Angular отвечает за реализацию загрузки изображений, сохраняя высокую производительность. Она доступна в Angular v14.2.0. Директива помечена как standalone и может быть импортирована в standalone компоненты и модули.

Чтобы ее использовать, мы должны...

Читать далее

React: полное руководство по повторному рендерингу

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


Привет, друзья!


Представляю вашему вниманию перевод этой замечательной статьи, посвященной повторному рендерингу (re-render, далее — ререндеринг) в React.


Что такое ререндеринг?


Существует 2 основные стадии, которым следует уделять пристальное внимание, когда речь заходит о производительности в React:


  • первоначальный рендеринг (initial rendering) — происходит, когда компонент впервые появляется на экране;
  • ререндеринг — второй и последующие рендеринги компонента.

Ререндеринг происходит, когда React необходимо обновить приложение некоторыми данными. Обычно, это является результатом действий пользователя, получения ответа на асинхронный запрос или публикацию при подписке (паттерн "pub/sub" — публикация/подписка или издатель/подписчик) на определенные данные.

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

Создать игру за 24 часа и выжить

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

За 24 часа можно успеть очень много. Сегодня я решил рассказать, как всего за сутки мы с моими коллегами (шестью фронтендерами и одним бэкендером) создали настоящую мультиплеерную игру на JavaScript. Поехали!

Читать далее

Заметка о Redux и Zustand

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


Привет, друзья!


На днях мне на глаза попалась статья, посвященная разработке корзины товаров на React с помощью Redux Toolkit для управления состоянием приложения и Redux Persist для хранения состояния в localStorage.


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



Если вам это интересно, прошу под кат.

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

Доступ к API Binance, KuCoin и Huobi на C#

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


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

Рассмотрим одну из таких ситуаций, когда получать данные на клиента напрямую с биржи не удобно, в нашем случае это получение списка торговых пар биржи отсортированных по таким показателям как например, ликвидность и волатильность. Вот в примере ниже, мы из клиентского кода на JavaScript обращаемся за списком продуктов биржи к своему Rest full API Web Service по ссылке

https://cryptoalert.mizerov.com/api/Products/” + ex

где ex – код биржи.

Читать далее

Микрофронты для всех. Как мы построили платформу UIF, и что под капотом

Время на прочтение8 мин
Охват и читатели6.6K
Привет, на связи Павел Востриков, архитектор веб-направления в «Лаборатории Касперского». Сегодня я расскажу про User Interface Framework (UIF) — нашу внутреннюю платформу интеграции веб-приложений, которая позволяет проводить разработку микрофронтов и микросервисов разными командами, делает удобным переиспользование кода и увеличивает гибкость подхода, чтобы разные команды могли варьировать технологии под свои нужды.

image

Мы начали разрабатывать UIF еще в 2016 году, когда само понятие Micro-Frontends только входило в обиход. Платформа родилась из-за отсутствия на рынке готовых инструментов. А со временем стала одним из наших самых эффективных решений, существенно сократив нескольким продуктам time-to-market и стоимость разработки, и даже научилась автогенерировать UI!
Читать дальше →

Вредные советы для React-разработчиков

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

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

Читать далее

Отображение возраста контактов в Гугл календаре на день их рождения

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели6.3K

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

А ещё обновили похожий скрипт для детей: это когда каждый месяц скрипт автоматически создаёт событие в Гугл календаре, в заголовке к которому указано сколько исполнилось годов и месяцев вашему малышу (работает с самого рождения, 0 лет), а в описании указан возраст (годы и месяцы) каждого из родителей. Я сам обычно не помню даты и эти скрипты стали для меня настоящим спасением. 

Пошаговая инструкция внутри

Алгоритмы для веб-разработчиков простыми словами

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

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

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

Зачем мне алгоритмы? Я фронтендер!

Вы наверняка задумались: «А зачем мне нужно тратить своё время на изучение этих сложных алгоритмов, если я работаю с фронтендом? Как знание графов и бинарных деревьев поможет мне лучше отцентровать одну div-ку внутри другой div-ки?»

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

Многие веб-разработчики на таких форумах, как Reddit и Stack Overflow, отмечали, что, освоив даже на базовом уровне эти фундаментальные основы программирования, чувствовали себя увереннее, профессиональнее и писали более чистый и структурированный код.

Также это помогло им прокачать главный скилл разработчика – умение логически думать и решать сложные технические задачи.

Кстати, именно по этой причине многие крупные IT-компании требуют от своих потенциальных сотрудников знания фундаментальных основ computer science, к которым как раз относятся алгоримты и структуры данных, и с пристрастием спрашивают их на собеседованиях.

Ведь они ищут лучших из лучших, и знание алгоритмов как раз делает вас лучше как разработчика. Тем более, лучше инвестировать свое свободное время в новые знания и навыки, чем в сериалы на Netflix.

И на этой прекрасной ноте давайте перейдем к основной теме статьи.

Читать далее

Как рассуждать, чтобы проходить Capture The Flag игры

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

Capture The Flag - название ряда соревнований в информатике, чаще всего - в информационной безопасности. Как веб-разработчик, я интересуюсь только CTF в области web'а - поиск уязвимостей, атаки, сетевое взаимодействие. На старте решения первого CTF было трудно понять, как же именно рассуждают проф. игроки, участвующие в турнирах, и я решил написать несколько статей о том, как можно искать зацепки в исходных данных и как раскручивать их до победы.

Читать далее

Django и PWA

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

Всем привет! Гуляя по Хабру, мне ни разу не доводилось обнаружить статью на тему Django + PWA. А ведь тема интересная (лично мне пришлось потратить 4 дня на то, чтобы с ней разобраться). И дабы сэкономить ваше время, в данной статье я попытался представить достаточно простой способ для создания прогрессивного веб приложения (PWA) вместе с Django без сторонних библиотек.

Читать далее

Заметка о Mapped Types и других полезных возможностях современного TypeScript

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


Привет, друзья!


Представляю вашему вниманию перевод 2 статей:


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

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

Мета-приложения и Symbiote.js

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

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

Читать далее

Как создать игру Tetris с помощью Three.js

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

Вспомните, как мы играем в «Тетрис». При движении блока мы свободно перемещаем и вращаем его. Кубы, из которых состоят блоки, соединены, поэтому должно быть соединено и их описание в коде. С другой стороны, когда мы завершаем горизонтальный срез (в 2D это строка), кубы удаляются и блок, к которым они принадлежали, на этом этапе уже не важны. На самом деле, они и не должны быть важны, ведь некоторые кубы из блока могут удалиться, а другие остаться на поле.

Для отслеживания начальной точки куба пришлось бы постоянно разделять и объединять геометрию, и поверьте мне, это был бы сущий хаос. В оригинальном двухмерном «Тетрисе» показателем исходного блока был цвет квадрата. Однако в 3D нам нужен удобный способ демонстрации оси Z, и лучше всего для этого подходит цвет.

В нашей игре кубы будут соединены, когда они динамичны и разделены, когда они статичны.
Читать дальше →

Выходим за пределы JVM. Объясняем на крестиках-ноликах чем хорош Kotlin Multiplatform

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

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

Что делать, если хочется писать нативный код и при этом не иметь дублей реализации — на этот вопрос я постараюсь ответить подробно в данной статье. В процессе чтения можно будет познакомиться с технологией Kotlin Multiplatform и создать полноценный проект всем известной игры «Крестики-нолики» на трех самых популярных платформах Browser (JS), iOS (Swift) и Android (Java) с общей логикой на Kotlin.

Читать далее

Проверяем, есть ли у нативной JavaScript‑функции манкипатч

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

Как можно понять, была ли переопределена нативная JavaScriptфункция? Никак — или не совсем надежно. Способы есть, но полностью доверять им нельзя.

Узнать способы

Задачи на собеседованиях. Event loop. JS

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

Почти на каждом собеседовании бывает задачка на событийный цикл. И как я понял, не все до конца понимают как их решать. А решают их обычно в голове, а лучше используя бумажку и ручку. В статье я приведу способ решения через таблицу
Основной поток/Микрозадачи/Макрозадачи

Читать далее

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