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

JavaScript *

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

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

Сравнение производительности CSS и CSS-in-JS в реальном мире

Время на прочтение7 мин
Количество просмотров23K
Технология CSS-in-JS заняла прочное место среди инструментов фронтенд-разработки. И возникает ощущение, что CSS-in-JS-тренд в ближайшем будущем лишь усилится. Особенно — в мире React. Например, в исследовании State of CSS, проведённом в 2020 году, приняли участие 11492 человека. Лишь 14,3% из них не слышали о Styled Components (о ведущей CSS-in-JS-библиотеке). А вот пользовались этой библиотекой более 40% участников исследования.



Мне уже давно хотелось найти серьёзный материал, посвящённый сравнению производительности CSS-in-JS-библиотек, вроде Styled Components, и доброго старого CSS. Но я, к сожалению, ничего такого, вроде сравнения их производительности на реальном проекте, а не на каком-то простом наборе тестов, найти не смог. Поэтому я решил сам сделать такое сравнение. Я перевёл реальное приложение со Styled Components на Linaria, на библиотеку, которая выполняет извлечение CSS в файлы во время сборки проекта. В результате в приложении, использующем Linaria, не выполняется генерирование стилей во время работы этого приложения на компьютере пользователя.
Читать дальше →

Шпаргалка по JS-методам для работы с DOM

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

image


Основные источники



Введение


JavaScript предоставляет множество методов для работы с Document Object Model или сокращенно DOM (объектной моделью документа): одни из них являются более полезными, чем другие; одни используются часто, другие почти никогда; одни являются относительно новыми, другие признаны устаревшими.


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


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


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


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

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

Я выпустил Grafar — JS-библиотеку для визуализации

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

После пяти лет в столе я готов представить свою библиотеку для визуализации — grafar. У нас есть: 3D, реактивные вычисления и самое простое АПИ для построения математических графиков прямо в браузере. В статье рассказываю, что я сделал и как этим пользоваться.

Читать далее

1 CPU 1 Гб – а я хочу мониторинг, как у больших дядей

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


Я обожаю читать на хабре статьи про то, как устроены системы больших интернет-компаний. Кластеры SQL-серверов, монг и редисов. Тут у нас кластер ELK собирает трейсинг, там – сборка логов, здесь балансер выдает входящим запросам traceID и можно отслеживать, как запрос ходит по всем нашим микросервисам. Класс. Но, допустим, у вас совсем маленький проект и вы можете себе позволить лишь VPS минимальной конфигурации. Реально ли на ней сделать мониторинг не хуже, чем у больших проектов? Я решил – надо попробовать.
Читать дальше →

Используем GPU для повышения производительности JavaScript

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

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

Но думали ли вы об использовании мощи GPU для повышения производительности веб-приложений?

В этой статье я расскажу о библиотеке ускорения JavaScript под названием GPU.js, а также покажу вам, как повысить скорость сложных вычислений.

Что такое GPU.js и почему его стоит использовать?


Если вкратце, GPU.js — это библиотека ускорения JavaScript, которую можно использовать для любых стандартных вычислений на GPU при работе с JavaScript. Она поддерживает браузеры, Node.js и TypeScript.

Кроме повышения производительности есть и множество других причин, по которым я рекомендую использовать GPU.js:

  • В основе GPU.js лежит JavaScript, что позволяет использовать синтаксис JavaScript.
  • Библиотека берёт на себя задачу автоматической транспиляции JavaScript на язык шейдеров и их компиляции.
  • Если в устройстве отсутствует GPU, она может «откатиться» к обычному движку JavaScript. То есть вы ничего не потеряете, работая с GPU.js.
  • GPU.js можно использовать и для параллельных вычислений. Кроме того, можно асинхронно выполнять множественные вычисления одновременно и на CPU, и на GPU.

Учитывая всё вышесказанное, я не вижу никаких причин не пользоваться GPU.js. Давайте узнаем, как его освоить.
Читать дальше →

Варианты создания интерактивной экскурсии для пользователей

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

Доброго времени суток, уважаемые читатели!

Меня зовут Евгений Когтев, я ведущий разработчик в команде Web Core в ДомКлик. Мы уже рассказывали подробнее о команде и стоящих перед ней задачах, если не читали, то рекомендую. А сегодня я расскажу, зачем нужен онбординг и как его реализовать в UI-kit.

Читать далее

JavaScript-классы — это не просто «синтаксический сахар»

Время на прочтение6 мин
Количество просмотров30K
После того, как я прочитал очередную статью, где говорится о том, что JS-классы — это всего лишь «синтаксический сахар» для прототипного наследования, я решил написать материал, призванный (в который раз!) прояснить вопрос о том, почему данное утверждение неверно. Тут я, надеюсь, смогу объяснить разницу между JS-классами и прототипным наследованием, и смогу рассказать о том, почему важно понимать эту разницу.


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

5 React-хуков, которые пригодятся в любом проекте

Время на прочтение7 мин
Количество просмотров29K
Хочу рассказать о пяти простых React-хуках, которые пригодятся в любом проекте. Причём, полезность этих хуков не зависит от того, в каком именно приложении их будут использовать. Описывая каждый из них, я рассказываю о его реализации и привожу пример его использования в клиентском коде.


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

Библиотека next-persist: преодоление разрыва между серверным рендерингом и постоянным хранением данных на клиенте

Время на прочтение9 мин
Количество просмотров5.8K
Статья, перевод которой мы публикуем сегодня, посвящена next-persist — компактному и нетребовательному к ресурсам NPM-пакету. Цель его создания — упрощение обработки и реконсиляции данных, на постоянной основе хранящихся на клиенте и не имеющих критического значения. При этом данный пакет задуман так, чтобы его применение не ухудшило бы полезных возможностей Next.js по серверному рендерингу и генерированию статических сайтов.

Прежде чем мы поговорим о месте next-persist в экосистеме современной веб-разработки, нам нужно коснуться Next.js — передового фреймворка, созданного Vercel, позволяющего без особых сложностей создавать и развёртывать приложения, которые, при этом, отличаются высокой скоростью загрузки.



Next.js произвёл революцию в осмыслении того, как именно веб-содержимое доставляется пользователям. Произошло это за счёт объединения всего лучшего из сфер серверного и клиентского рендеринга с технологиями генерирования статических сайтов. Кроме того, применение Next.js до крайности упрощает доведение веб-проектов до рабочего состояния. Это происходит за счёт автоматизации конфигурирования вспомогательного ПО, вроде webpack и babel, и благодаря использованию CI/CD Vercel.

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

Полезные JavaScript-библиотеки

Время на прочтение6 мин
Количество просмотров37K
Не стоит недооценивать силу простоты. Пожалуй, сложно представить себе, что на чистом JavaScript реализовано что-то вроде системы push-уведомлений, работающей в реальном времени, или инструмент для работы с базами данных, или полноценный текстовой редактор. Но подобные проекты существуют и позволяют решать множество актуальных задач. В этом материале речь пойдёт о нескольких весьма полезных библиотеках, которые подключаются к страницам в виде обычных JavaScript-файлов. При рассказе о каждой из них я постараюсь выделять их особенности и приводить примеры их использования.


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

Делаем хитмап стоимости недвижимости на общедоступных алгоритмах и опенсорсных библиотеках

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


Карта 2gis.ru работает на WebGL-движке, который позволяет визуализировать данные. Когда мы делали слой недвижимости, то решили добавить ещё и тепловую карту стоимости квадратного метра. Во-первых, это красиво. А во-вторых, такие карты могут помочь с выбором квартиры.

Под катом — про то, какими алгоритмами пользовались и с какими трудностями встретились, когда делали хитмап стоимости квартир на собственных данных.
Читать дальше →

Дайджест свежих материалов из мира фронтенда за последнюю неделю №464 (19 — 25 апреля 2021)

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

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

Простые советы по написанию чистого кода React-компонентов

Время на прочтение8 мин
Количество просмотров20K
Автор материала, перевод которого мы публикуем сегодня, делится советами, которые помогают делать чище код React-компонентов и создавать проекты, которые масштабируются лучше, чем прежде.


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

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

Есть ли жизнь после жизни?

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

Всем доброго дня или ночи! Затронутая в статье, тема может показаться настолько избитой до популярности, что при ее прочтении возникнет стойкое желание взять помидор или, не дай бог, кирпич и кинуть в автора. А изложенные мысли будут напоминать повторное изобретение велосипеда с квадратными колесами. Но идея, побудившая приступить к описанию, буквально зудит и проситься ей поделиться, несмотря на угрозу физического или морального наказания.

Читать далее

Микрофронтенды: разделяй и властвуй

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


Всем привет! Меня зовут Аня, я фронтенд-разработчик в Delivery Club. Хочу рассказать про использование микрофронтендов. Поговорим о том, что же это за зверь такой — микрофронтенд, почему мы решили использовать этот подход в своих проектах и с какими проблемами столкнулись при внедрении.
Читать дальше →

Ontol: подборка видео-лекций и каналов для продвинутых программистов

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

Недавно на HackerNews обсуждали видео и каналы, где можно поучиться продвинутому программированию. Под катом — подборка из 30 полезняшек.

В перерывах между полетами на реактивном ранце и переводами материалов Y Combinator, я делаю проект «Ontol» — такое место в сети, где максимальная концентрация полезного, апгрейдящего мировоззрение материала (ценного на горизонте 10+ лет, например, такого), которым можно делиться бесплатно в 1 клик. (канал в телеграм: t.me/ontol)

Вот мои предыдущие бесплатные образовательные подборки:


Как хакнуть Github и заработать $35000?

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

Сегодня, специально к старту нового потока курса Этичный хакер, делимся с вами историей поиска уязвимости не где-нибудь, а в самом Github. Когда автор поста нашёл эту уязвимость и сообщил о ней, она стала его первым оплаченным баг-репортом на HackerOne. $35,000 — это также самая высокая награда, которую он получил от HackerOne (пожалуй самая высокая оплата от GitHub на сегодня). Многие найденные ошибки, кажется, — это удача и интуиция, вместе взятые. В этом посте рассказывается, как мыслил автор, приближаясь к цели.

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

Как я на коленке делал бесплатный курс программирования, о котором мечтал 3 года (и что пошло не так)

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

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

Читать далее

IntelliJ IDEA 2021.1

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

Привет, Хабр!

Сегодня у нас особый день: состоялся первый релиз этого года — IntelliJ IDEA 2021.1! Обновление уже доступно на нашем сайте и в Toolbox App. Кроме того, можно обновиться из самой IDE или с помощью snap-пакета, если вы являетесь пользователем Ubuntu.

Читать далее

DevTools для «чайников»

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


Недавно на базе Владимирского Института информационных технологий и радиоэлектроники прошла очередная встреча VLADIMIR TECH TALKS. Технологический митап, организованный международным IT-разработчиком Altenar в формате открытого и доверительного разговора про насущные проблемы в области разработки ПО, собрал немало участников из числа начинающих и продвинутых программистов. Делимся содержанием наиболее интересных докладов.

Наиболее заметным стало выступление независимого WEB-разработчика Антона Грибанова. Он поделился своим опытом использования DevTools. На самом деле, обзорных статей по заявленной тематике для профессионалов немало. С ними легко можно ознакомиться на профильных ресурсах (тык, тык, тык, тык).

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

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