Красивые симуляции на JavaScript с целью изучения его возможностей по производительности

Статья

#js #performance

const count = ?;

let x = count;
let y = count;

x++;
console.log(x);

y = y + 1;
console.log(y);

Немного JavaScript

В каких случаях результат вывода будет различным?

#js #challenge

В комментариях меня ознакомили с Антоном Ларичевым и его PurpleSchool

На Youtube много видео, оставляет приятное впечатление компетентного человека. Vue почти нет, но много фронтенда (HTML, CSS, JS/TS, сопутствующие технологии)

Есть курсы, цены на них копеечные (по сравнению с одним бойцом ММА)

Не реклама

#learning #nereklama

В стандарте HTML давно появился <dialog> элемент и относительно недавно Popover API для модальных окон и всплывающих меню.

Они стандартизировали и значительно упростили работу с ними, частично избавив от необходимости использовать сторонние библиотеки. Только "умное" позиционирование тултипа/меню требует дополнительной логики.

Мы рассказывали ранее как анимировать появление диалогового окна / всплывающего меню через transition.

Тут пример создания CSS анимации для всплывающих элементов через keyframes.

#popoverapi #css

И чтобы закончить с Popover API - сайдбары и выезжающие боковые шторки можно делать тоже на нем

#popoverapi

В комментариях подсказали еще один eslint-config, сильно упрощающий настройку линтинга и форматирования кода - @sxzz/eslint-config,

По сравнению с eslint-config от Anthony Fu у него более строгие ESlint правила (от unicorn и perfectionist), которые заставляют писать более эффективный код, а для форматирования используется Prettier.

Поставил - пока положительные впечатления. Форматирует везде и неплохо. Не нужно поправлять вторым форматтером.

#eslint #prettier #eslintconfig

JavaScript worker threads / Web workers — это мощный функционал, доступный в современных веб-браузерах, а также в Node.js, Deno и Bun, который позволяет создавать независимые потоки выполнения в одной JavaScript-среде. Эти worker threads работают параллельно с главным потоком, позволяя приложению выполнять ресурсоемкие операции или обрабатывать сетевые запросы без блокировки пользовательского интерфейса.

Преимущества использования worker threads:

Повышенная отзывчивость: Передавая длительные задачи на worker threads, главный поток остается свободным для обработки пользовательских взаимодействий и обновления интерфейса. Это приводит к более плавному и отзывчивому пользовательскому опыту.

Повышенная производительность: Worker threads могут использовать несколько ядер современных процессоров, что позволяет параллельно выполнять ресурсоемкие задачи.

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

Модульный код: Worker threads способствуют модульной организации кода. Мы можем изолировать сложные задачи в отдельных worker-скриптах, улучшая поддержку и повторное использование кода.

Варианты использования:

1. Ресурсоемкие вычисления

Представьте, что у нас есть сложная математическая формула для расчета данных по нескольким точкам. Непосредственное выполнение этого на главном потоке заблокирует пользовательский интерфейс и сделает наше веб-приложение неотзывчивым. Такие задачи идеально подходят для worker threads.

2. Обработка изображений/видео

Допустим, мы хотим разрешить пользователям загружать изображения в наше веб-приложение и применять фильтр черно-белого цвета перед отображением. Обработка изображения непосредственно в главном потоке может вызвать задержку во время применения фильтра. Опять же, это ресурсоемкая задача, где worker threads могут спасти ситуацию.

3. Анализ данных

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

4. Фоновые задачи

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

5. Приложения в реальном времени

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

#js #workerthreads

Интересный случай рассказали.

Человек прошел Школу 21 от Сбера, попал туда на стажировку на 1.5 месяца с зарплатой 100К в месяц, а после предложили джуниорскую позицию на 120К.

Не думал, что когда-то буду рекламировать Сбер, но это один из правильных способов вкатиться в IT - то есть, когда есть желание, но нет релевантного образования, знаний и опыта.

Обучение в школе очное, доступно во многих городах, бесплатное и длится от 1.5 до 3 лет. С трудоустройством Сбер помогает, и не только в себя.

#learning #jobs

Профессиональные преподаватели Школы 21 и подобных школ предлагали бесплатно получить знания и гарантированно трудоустроиться на оплачиваемую стажировку в солидные компании, но люди все равно шли к Минину и несли ему деньги...

#learning #minin

Vue Data UI библиотека

Множество компонент[ов] для визуализации отчетных данных

#lib

Общественные слушания

#minin #chernov

Наткнулся тут на Quake на JS, даже прошел до конца

Движок Quake был первым, способным полноценно обрабатывать трехмерную графику и стал отцом многих других движков.

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

Забавно, что всё самое крутое в IT было изобретено в 1995-1997 годах )

#gaming #offtop

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

Я привык к Clockify. В бесплатной версии есть практически всё, что нужно, а недавно добавили и Calendar, что еще более улучшило UX.

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

#timetracking #dx

На стоит превозносить open-source разработчиков и молиться на них как бескорыстных альтруистов.

Ездящий по конференциям с рюкзачком очкарик Эван живет в недешевом Сингапуре и коллекционирует спортивные машины не только в масштабе 1:12. Его ставка, по-моим оценкам, должна начинаться от $300/час. Он может месяц консалтить коммерческих заказчиков, потом год отдыхать в опен сорсе.

Никаких претензий, - Эван полностью заслужил это своим трудом и талантом. И большинство опен сорс разрабов именно так делает себе имя и резюме, которые потом приносят им деньги. И Anthony Fu с Johnson Chu вполне, уверен, востребованы на рынке, при их желании заработать. Поэтому слышать их нытье о депрессии от того, что много работы и мало денег - странно. И нытье о плохих отзывах тоже странно - пошли всех вместе с проектом нахрен и занимайся своим психическим здоровьем, если эмоционально не тянешь. Иди на завод в Facebook в их дружелюбный коллектив.

Развели детский сад, понимаешь...

#opensource #esse