Обновить
256K+

JavaScript *

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

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

Что будет в Angular 18?

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

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

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

Читать далее

Ехал handler через handler, или почему всё тормозит

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

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

К ленивой отладке

Контекст в Vue/Nuxt: осознать, не терять и беречь

Уровень сложностиСредний
Время на прочтение10 мин
Охват и читатели11K

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

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

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

Читать далее

Разбираемся с this в JavaScript раз и навсегда (но это не точно)

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели19K

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

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

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

Читать далее

Руководство по Next.js. 3/3

Уровень сложностиСредний
Время на прочтение45 мин
Охват и читатели17K


Hello world!


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



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


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


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


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


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


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

VGranite — Софт для преобразователя интерфейсов serial<->ethernet

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели4.3K

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

Однажды к нам перешел дом, на котором в качестве счетчиков электричества стояли "Меркурий 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.

Читать далее

Рендерим таблицы с помощью Symbiote.js

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели2.6K

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

Читать далее

Как перенести все записи из выбранного гугл календаря в таблицу менее чем за минуту при помощи скрипта

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

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

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

Самый простой способ перенести все записи из выбранного гугл календаря в таблицу - воспользоваться Google Apps Script.

Гугл календарь в таблицу

Как запустить WebRTC на сервере, или как я пилю вебкам

Уровень сложностиСредний
Время на прочтение12 мин
Охват и читатели17K

Значит решил я создать сервис для одиноких мужчин, где они могут пообщаться с прекрасными дамами, aka вебкам. Соответственно встал вопрос, как организовать видеосвязь в браузере. Обычно для этого используется WebRTC, эта технология позволяет установить p2p соединение между браузерами для передачи видео, звука и прочих данных в реальном времени с минимальной задержкой. Однако была одна проблема: что делать, если приходит жалоба от пользователя, что ему показали не то (или не показали), что он хотел. Поскольку это p2p соединение напрямую между пользователями, у меня как у владельца сервиса нет возможности провалидировать жалобу. Первое, что пришло в голову это вместо WebRTC использовать MediaRecorder API для записи видео небольшими кусочками и отправки их по вебсокету через сервер, попутно сохраняя. Я набросал прототип и столкнулся с тем, что если получатель пропустил первый пакет (там где есть метаданные), то видео у него не воспроизводится. Пришлось поиском определенного набора байт в первом пакете вычленять эти самые метаданные и сохранять их отдельно для отправки первым сообщением только что подключившемуся получателю, и это даже сработало. Вторая проблема этого решения - это задержка в пару секунд, и это только в локальной сети, что приемлемо для односторонней связи, но для двусторонней уже сомнительно. И третья проблема это то что видео у получателя со временем все больше и больше отстает, и нужно регулярно проматывать видео ближе к концу. Костыльность такого решения меня не устраивала, и я решил использовать WebRTC для связи собеседников и параллельно использовать MediaRecorder для отправки записи от модели к серверу. Некоторое время оно так работало, пока я пилил другие фичи, но неэлегантность этого решения все еще не давала мне покоя, т. к. оно повышает требования к интернет соединению модели.

Читать далее

Картографический фотопроект «По местам съёмок фильма «Брат 2»

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

Проект начал делать в 2022 году, параллельно с проектом по первой части фильма. Во второй части многие локации пришлось искать вооружившись Яндекс и Гугл панорамами. Около полугода искал человека, который сделает фото в Чикаго.

С технической точки зрения ничего не поменялось, про нее я рассказал в статье по первой части фильма. Хочу более детально остановиться на поиске и съемке локаций.

Читать далее

И снова о useCallback

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

Привет, Хабр! Так вышло, что на текущем я попал под сокращение, а значит путь к собеседованиям открыт. Как раз вчера случилось одно (видимо, из многих), на котором зашла речь про useCallback.

Читать далее

Cовместное использование GitHub Actions, Docker и GitHub NPMvPackage

Уровень сложностиСредний
Время на прочтение5 мин
Охват и читатели4.2K

В современном мире разработки программного обеспечения GitHub остается самой популярной платформой для хранения Git-репозиторий и управления ими. Помимо своей фундаментальной роли в управлении версиями, GitHub предлагает дополнительные функции, включая возможность размещения private NPM registry. Эта функция упрощает хранение и совместное использование JavaScript и TypeScript библиотек между проектами и командами, улучшая совместную работу и возможность повторного использования кода в вашей компании.

GitHub Actions позволяет автоматизировать задачи ваших проектов, такие как linter, sonar , запуск тестов, билд образов Docker, развертывание в различных средах и многое другое.

Говоря о Docker, общепринятой практикой является создание приложения, библиотеки или любого кода в определенном образе Docker (то есть сборка внутри Docker контейнера). В этом контейнере можно задать определенную версию Node, а также любые внешние ресурсы и библиотеки, необходимые в процессе сборки. Этот подход обеспечивает максимальное удобство, поскольку устраняет необходимость полагаться на конкретный ПК или виртуальную машину со всеми необходимыми настройками. Вместо этого вы можете один раз подготовить среду на уровне Docker и последовательно использовать ее на разных машинах и в разных средах, обеспечивая согласованность и воспроизводимость на протяжении всего процесса разработки.

Однако возникает проблема, когда вы пытаетесь создать свое приложение в Docker, и для этого требуется библиотека npm, хранящаяся в вашем частном реестре GitHub NPM. Более того, этот процесс должен быть осуществим в GitHub Actions. В этой статье я покажу вам процесс настройки, чтобы добиться этого без проблем!

Читать далее

Оптимизация JavaScript. Inline Caches

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

Думаю, ни для кого не секрет, что все популярные JavaScript движки имеют схожий пайплайн выполнения кода. Выглядит он примерно следующим образом. Интерпретатор быстро компилирует JS-код в байт "на лету". Полученный байт код начинает исполняться и параллельно обрабатывается оптимизатором. Оптимизатору требуется время на такую обработку, но в итоге может получиться высоко-оптимизированный код, который будет работать в разы быстрее. В движке V8 роль интерпретатора выполняет Ignition, а оптимизатором является Turbofan. В движке Chakra, который используется в Edge, вместо одного оптимизатора целых два, SimpleJIT и FullJIT. А в JSC (Safari), аж три Baseline, DFG и FTL. Конкретная реализация в разных движка может отличаться, но принципиальная схема, в целом одинакова.

Сегодня мы будем говорить об одном из множества механизмов оптимизации, который называется Inline Caches.

Читать далее

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

Реализация многооконного приложения на Vue 3

Уровень сложностиСредний
Время на прочтение5 мин
Охват и читатели7.4K

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

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

Меня зовут Дмитрий Дербин – frontend-разработчик компании «Криптонит». В данном материале я поделюсь некоторой теоретической базой по теме и краткими наработками для реализации на Vue 3 на примере простого сайта с погодой.

Читать далее

Преобразования данных с React Query

Уровень сложностиСредний
Время на прочтение5 мин
Охват и читатели3.2K

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

Читать далее

Особенности обработки native events в React.js

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

В данной статье рассматриваются особенности, которые связаны с обработкой нативных событий (native events) в React-приложениях. Существует проблема частичной потери контекста функционального компонента при обработке нативных событий, которые навешиваются на элементы с помощью глобальных объектов document, window или через ссылки (refs). В статье рассматривается данная проблема и предлагается способ её решения (один из вариантов).

Читать далее

Самые интересные задачи для безопасников — Джабба одобряет

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

Мы решили не один CTF-турнир. За плечами остались KnightCTF, 0xL4ugh и DiceCTF. Найти по-настоящему интересные и сложные задачи все труднее, поэтому будем смотреть в оба глаза и следить за несколькими мероприятиями одновременно.

На этот раз — порешаем задачи сразу двух CTF-турниров: Space Heroes и ThCon 2024. Уже интересно, что подготовили безопасники из США и Франции? Тогда добро пожаловать!
Читать дальше →

Руководство по Next.js. 2/3

Уровень сложностиСредний
Время на прочтение52 мин
Охват и читатели18K


Hello world!


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



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


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


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


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


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


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

Настройка транзакций в Solana через Phantom Wallet

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

Я не разбираюсь в крипте от слова "совсем". И как-то через знакомых на меня вышли ребята-криптовалютчики, которые сделали свою монету на основе Solana и хотели на сайте настроить автоматическую покупку этих самых монет за SOL (надеюсь, правильно сформулировал). Сам сайт у них на конструкторе webflow и в целом код для создания и отправки транзакций у них был написан. Однако была проблема, что вылетали ошибки при попытке подписать и отправить транзакцию через Phantom Wallet. Короткая статья о том, как я с этим разобрался.

Читать далее

Cample.js — один из самых быстрых фреймворков без виртуального DOM в Интернете! Отчёт № 2

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

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

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

В прошлом, вышли отчёт № 0 и отчёт № 1, в которых я в похожей манере проводил тесты фреймворка, в этом же отчёте, я думаю, заострить внимание больше на результаты работы.

Все результаты тестов основаны на показателях keyed реализации в репозитории js-framework-benchmark в github. Сами они располагаются на странице выпуска №123.

Читать далее