JavaScript *

Всем привет! На связи Supercat и я хочу рассказать о менеджере состояний Supercat Store.

Supercat Store - это JavaScript-библиотека, которая позволяет легко отслеживать и реагировать на изменения стейта приложения или его части.

Коротко о Supercat Store:

• Легковесная: 12 kB - minified, 3.8 kB - minified + gzipped;

• Не зависит от фреймворков, агностик;

• Можно создавать столько сторов, сколько нужно;

• Использует мутабельную систему реактивности;

• Применяются ленивые вычисления для computed;

• Поддержка мгновенных и отложенных реакций на изменения состояния;

• Код типизирован с помощью TypeScript внутри JSDoc;

• Код документирован, в документации почти на каждый метод есть пример использования;

• Лицензия MIT.

Всем привет! Меня зовут Иван Кузнецов, я Head of Frontend в Uzum Market. Расскажу о сложностях, с которыми мы столкнулись на пути к реализации микрофронтендовой архитектуры, и поделюсь результатами, которые мы получили в процессе пакетирования наших решений с помощью Lerna. Надеюсь, тебе, дорогой читатель, будет очень интересно :)

Программа обучения Frontend-разработке.

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

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

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

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

Сегодня — это руководитель и senior fullstack Марк Локшин. В этой беседе мы обсуждаем о заходе в тему разработки собственного инструмента Business Intelligence. Тема недвусмысленно намекает на то, что данная тема уже не раз была описана на соответствующих ресурсах, а российский рынок даже после ухода с него западных вендоров обладает собственным набором вполне зрелых и рабочих решений.

Собственно, откуда у нас появилась такая задача? Конечно же от заказчиков. А заказчики у нас чаще специфические: государственные и около организации, администрации субъектов регионов. У этих «ребят» чаще всего основная задача показать большому начальнику на совещании красивый график и отчитаться, как же все классно поработали, у особенных из этих заказчиков предъявлены жесткие требования к инструментам разработки.

Только что завершилась Конференция React.js. Долгожданная конференция спустя почти 3 года после предыдущей. Не менее долгожданны и обновления реакта. И именно с них была начата конференция, им и будет посвящена статья. И да, как вы увидели из превью — 19 версия перешла в статус release candidate. Полноценный же релиз нам обещают в течении двух недель.

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

Можно сказать, что главным направлениям этого обновления было достижение «Высокого UX при высоком DX». Максимальная производительность при максимально простом коде. И так, а теперь к самой конференции.

Веб-разработка часто требует реализации механизмов обновления контента на странице в реальном времени. Существуют различные сценарии, где это необходимо, например, отображение прогресса выполнения тяжелых задач на бекенде, обновление каких-либо часто меняющихся данных, будь то курсы валют или мониторинг какой-то активности, чаты, различные уведомления. Эти сценарии объединяет одна общая особенность: источник события необходимости обновления данных находится не на клиентской стороне, поэтому мы хотим получать события с бекенда. В данной статье мы рассмотрим четыре популярных подхода к реализации этой функциональности: WebSocket, Server-Sent Events (SSE), Long Polling и Short Polling.
Мы проанализируем каждый метод, выявим их плюсы, минусы и сложность реализации.

Начиная с декабря 2023 года все ссылки на вложения Discord CDN имеют следующий формат: https://cdn.discordapp.com/attachments/channel/message/filename.ext?ex=EXPIRES&is=ISSUED&hm=CODE Значения параметров запроса EXPIRES и ISSUED представляют собой даты в формате Unix/epoch hex, CODE - это закодированная контрольная сумма, используемая для проверки значений EXPIRES и ISSUED. Попытка получить ссылки на вложения Discord CDN без вышеупомянутых параметров запроса или с параметром EXPIRES, превышающим текущее время, приведет к ответу 404: This content is no longer available. пример.

На практике это означает, что вы больше не можете ссылаться на вложения из Discord на своем сайте, делиться мемасиками на OK.ru и VK.com 😢

В этой статье представлено эффективное решение для публичного доступа к Discord CDN ссылкам.

Наш браузер Ladybird неплохо справляется с качественно отформатированным веб-контентом, но я решил, что будет полезно проверить его инструментами для исследования безопасности. Поэтому сегодня мы воспользуемся Domato 🍅 — DOM-фаззером из Google Project Zero, чтобы провести стресс-тест Ladybird и устранить найденные в процессе ошибки.

Работает это следующим образом: Domato генерирует рандомизированные веб-страницы со множеством по большей части валидного, но странного HTML, CSS и JavaScript. Я загружу эти страницы в отладочную сборку Ladybird и посмотрю, что получится.

После окончания нативного Android приложения от заказчика последовало предложение написать мини-приложение VK. Так как я имел опыт написания кода только для нативных приложений, то для меня это был интересный челенж. Немного погуглив пришел к тому, что добрые разработчики из Jet Brains разработали Kotlin JS - оболочку над React (а Kotlin мой основной язык). Вдохновившись статьей https://habr.com/ru/companies/vk/articles/521192/ я приступил к написанию кода.

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

Несмотря на то, что в статьях указывается как легко имплементируются в проект библиотеки, действительность оказалось другой. Gradle сыпал ошибками несовместимости библиотек между собой. При этом, при одинаковых номерах версий дружба никак не зарождалась. В итоге, поэкспериментировав с различными версиями пришлось перейти к изучению списка оберток в https://github.com/JetBrains/kotlin-wrappers/. Здесь меня ожидало решение проблемы совместимости - https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-wrappers-bom. Добавление имплементации этой библиотеки позволяет не заморачиваться и передать это заботу этой библиотеке:

Изучите ключевые концепции программирования, лежащие в основе популярной JavaScript-библиотеки MobX. Понимание этих концепций поможет вам применить лучшие практики программирования в работе.

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

VRackDB - это простая In Memory Graphite like база данных, предназначенная для хранения временных рядов (графиков). (TypeScript)

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

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

Планируется, что Angular 18 будет выпущен в мае 2024 года, и уже есть несколько подтвержденных функций для включения в предстоящую версию, которые мы рассмотрим в данном материале.

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

В процессе нашей миграции на Nuxt CAPI, а потом и Nuxt 3, я очень много переосмыслял работу с контекстом как в Vue, так и в Nuxt. Как он сохраняется, на что влияет, и как можем повлиять мы.

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

Что? Какой контекст? В setup нет this. Как его можно потерять? На что это влияет? Давайте про это поговорим.

Бесконечно можно смотреть на три вещи: как горит огонь, как течет вода и то как фронтендеры пишут очередную статью про this.

Но все же такое количество статей существует не просто так, тема действительно для многих запутанная и зачастую даже сами авторы статей неправильно понимают this и соответственно закладывают неправильное понимание этого у читателей. Есть и хорошие статьи, где все описано верно, но в основном чисто с практической точки зрения, без погружения в то “как это работает на самом деле”.

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

Hello world!

Представляю вашему вниманию третью и заключительную часть обновленного руководства по Next.js.

• Первая часть
• Вторая часть
• Руководство целиком

На мой взгляд, Next.js — это лучший на сегодняшний день инструмент для разработки веб-приложений.

Предполагается, что вы хорошо знаете JavaScript и React, а также хотя бы поверхностно знакомы с Node.js.

Обратите внимание: руководство актуально для Next.js версии 14.

При подготовке руководства я опирался в основном на официальную документацию, но в "отсебятине" мог и приврать (или просто очепятаться) 😁 При обнаружении подобного не стесняйтесь писать в личку 😉

Парочка полезных ссылок:

• Официальные примеры использования Next.js
• Классные туториалы по разработке веб-приложений с помощью Next.js

Мы занимаемся сбором данных с ИПУ в многоквартирных домах. Наше предпочтение - проводное подключение. Обычно мы подключаем одинаковые типы счетчиков в один канал - Вода, Газ, Электричество.

Однажды к нам перешел дом, на котором в качестве счетчиков электричества стояли "Меркурий 203.2ТL". Особенность этих счетчиков в том, что они используют в качестве интерфейса опроса - CAN шину. И тут важно уточнить, что именно только CAN шину, ничего более от CAN там нет. То есть, если вы купите преобразователь Ethernet<->CAN по типу USR-CANET200 - работать у вас ничего не будет. Причина в том, что подобные преобразователи используют кадры CAN для общения между устройствами, но разработчики счетчиков "Меркурий 203.2ТL" вертели на своем вертеле все это и просто поставили внутри драйвер CAN<->UART.

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

Скажу честно, мы не любим зависимости, поэтому пошли своим путем. Была приобретена Orangepi Zero, USB<>SerialTTL, TTL<>CAN. Все это было слеплено вместе в один преобразователь Ethernet<>CAN. Сразу скажу, что мы пробовали несколько разных драйверов CAN и на практике они оказались довольно капризными, мы пришли к выводу, что лучше использовать драйвер VD230 с UsbSerialTTL-CH340G.

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