Посчитай свой кредит!
Как и обещал в прошлом посте - чуть более серьезный проект:
Иногда планирую крупную покупку и считаю кредит + проверяю предложения от кредиторов, чтобы знать не добавили ли они что-то.
Все инструменты для этого, которые находил, мне не нравились - поэтому сделал свой.
Самый быстрый, удобный и красивый калькулятор кредита!
Сохранение данных (даже в ссылке), диаграмма, таблица платежей и % переплаты - все на месте.
Наслаждайтесь)
Привет друзья! Сделал максимально простые аналоговые часы на SVG. Можно ли их еще упростить или уменьшить? Или добавить немного улучшений без переусложнения? Буду рад вашим идеям!
Вот CodeSandbox
Сделано с помощью библиотеки Fusor
Калькулятор финансов - теперь можете посчитать свои средства и данные сохранятся локально на устройстве)
Предтеча другого, более крупного проекта, который будет потом)
Как в нативе: эти Web API поднимут ваше веб-приложение в стратосферу
Салют, на связи Clevertec. Сейчас наша команда разрабатывает веб-версию банкинга с использованием React. С помощью Web API даем пользователям фичи, которые они привыкли получать в нативных приложениях. Отрываем от сердца список решений 😉
- Web Share API – для обмена ссылками, текстом и файлами с другими приложениями на устройстве. К примеру, удобно отправить чек об оплате в мессенджере, не покидая банковское приложение.
- Contact Picker API позволяет делиться контактами из своего списка. Можно использовать для перевода по номеру телефона. Не нужно вводить цифры вручную – поле автоматически заполнится контактом из телефонной книги.
- Media Capture and Streams API в нашем случае позволяет отсканировать QR-код с помощью камеры устройства. Нажимаешь на “Сканировать QR” – открывается окно с камерой, она считывает код и переводит пользователя в дерево платежей.
- Web OTP API открывает возможность автоматически вставлять код из смс. Например, для подтверждения оплаты на телефон приходит сообщение. Внизу экрана появляется модальное окно с подтверждением вставки. И после нажатия на “Разрешить” код отображается в поле ввода.
Подробнее про этот опыт использования Web API мы рассказали в отдельной статье. Что вы думаете о Web API, какие используете? Расскажите в комментариях, будем взаимно полезны друг другу.
Объектная парадигма и всё, что нужно о ней знать
В седьмом выпуске нашего открытого курса по JavaScript вместе с веб-разработчиком Василием Новиковым рассказываем про:
способы создания примитивов с помощью конструкторных функций и простой нотации;
доступ к методам строкового объекта и использование метода valueOf для получения примитивных значений;
концепции области видимости: глобальную, функциональную, блочную и модульную;
введение в блочную область видимости, добавленную в ECMAScript 2016, и её применение;
понимание лексической среды и замыканий, которые позволяют функциям сохранять доступ к переменным родительских функций.
Не забывайте заглядывать в описание к видео — там ссылки на полезные материалы по теме.
Подписывайтесь на канал AvitoTech в Telegram, там мы рассказываем больше о профессиональном опыте наших инженеров, проектах и работе в Авито, а также анонсируем митапы и статьи.
В иконках сайта обновление!
Теперь можно генерировать изображения иконок для сайта самостоятельно (все-таки он теперь генератор).
Работает на GigaChat API - генерирует так себе, так что это скорее для галочки.
Но если будет пользоваться популярностью может куплю токенов по-лучше
Кнопка со счётчиком: React vs Fusor
Fusor это новый способ разработки вэб приложений https://github.com/fusorjs/dom
Производственный календарь
Мини-сервис, который позволит удобнее выяснить свою ЗП (аванс и оплату)
Открыт к предложениям по улучшению
Сделал небольшую страницу-шпаргалку для фронтенд-разработчиков.
Напоминалки и полезные функции для рутинных задач.
Буду рад предложениям, что еще полезного можно добавить)
Какая-то нездоровая движуха пошла вокруг Telegram, и я задумался, как можно еще больше обезопасить свои сообщения. На выходных закодил плагин для локального шифрования на Telegram Web. Вот такая штука получилась.
Идея такая, отправлять не явные сообщения, а локально зашифрованные и далее плагин на лету их расшифровывает непосредственно на клиенте.
Тем самым если даже сервер скомпрометируют, то они найдут только ваши закодированные сообщения, которые зашифрованы локальным ключем.
Плагин больше, как концепция, интересно было попробовать насколько это может быть удобно. Так то можно не только в телеге использовать, главное написать адаптер.
Как вам идейка вообщем?
Потестить можно тут https://github.com/dmitrymalakhov/NebulaEncrypt
Telegram: Мотивируй IT
BigInt и работа с числовыми значениями в JavaScript — в шестой серии открытого курса по JS
Это курс от инженеров AvitoTech — вместе с фронтендером Василием Новиковым разбираемся в базовых технологиях веб-разработки в JavaScript.
В новой серии изучаем, как проводить разные операции с помощью BigInt, на какие особенности нужно обращать внимание в полученных результатах, как определить безопасные целые числа и что делать, если числа оказались вне безопасного диапазона.
Приятного просмотра!
Невидимый трекинг через куки
Всем привет. Тестирую формат постов и, заодно, делюсь подсмотренной идеей трекинга пользователей «без палева», который прямо-таки очень тяжело отловить (если не делать отладку HTTP-запросов) и очень технически сложно заблокировать.
Разработчики [CENSORED], придумали практически безотказный способ отправлять логи, даже если пользователь использует блокировщики. Схема простая:
Случилось событие, которое нужно затрекать.
С помощью JavaScript создаётся кука, имя которой соответствует определённому формату + рандомная строка-суффикс, а в значении содержится urlencoded-набор-параметров-значений.
Любой следующий запрос к сервису содержит эту куку. Сервис в ответе в хэдерах пишет, что куку нужно удалить. Кука отправилась и удалилась, никто ничего не заметил, никаких лишних запросов, трекинг-данные доставлены.
PROFIT.
Я читал много разных новостей про экзотические способы трекинга, но конкретно этот обнаружил самостоятельно. Буду рад, если покормил чью-то паранойю.
Работа с данными в JavaScript — в пятой серии открытого курса по JS
Это новый курс от инженеров AvitoTech — вместе с фронтендером Василием Новиковым разбираемся в базовых технологиях веб-разработки в JavaScript.
В этой серии изучаем проблемные числа, разбираемся с мантиссой, экспонентой и сдвигом, пытаемся понять арифметику стандарта IEEE 754. Знаете, почему 0,1 и 0,2 в сумме не дают 0,3? Смотрите, и всё поймёте!
А если знаете — всё равно смотрите, вспоминать базу всегда полезно!
Омар Шехата поделился одним из своих самых популярных проектов. Это крошечное веб-приложение JPEG Viewer для демонстрации алгоритмов, которые работают в формате сжатия JPEG.
Страница демонстрирует, как изображение разбивается на блоки 8×8 пикселей, каждый из которых затем подвергается алгоритму дискретного косинусного преобразования. Упрощённо можно сказать, что каждый из блоков математически преобразуется из двумерного изображения в сигнал, а затем представляется как сумма синусоид. Интересно в инструменте Омара то, что он допускает ручное редактирование преобразования каждого из блоков 8×8 пикселей.
Также Омар рекомендует свою статью про алгоритмы сжатия JPEG, в которой он применил схожие инструменты.
Разработчик Мишан Пудель представил открытое локальное приложение в виде клона интерфейса Windows 11 на React.js с некоторыми компонентами ОС, включая работающий браузер Chrome, инструментарий VS Code, игру Emoji Tic-Tac-Toe, клиент Spotify в качестве музыкального проигрывателя и калькулятор.
Используемые в проекте технологии:
React.js: для создания интерактивного пользовательского интерфейса.
Tailwind CSS: для стилизации компонентов и создания дескопного окружения.
React Router DOM: для управления навигацией и маршрутизацией в приложении.
Framer Motion: для добавления анимации и переходов.
React Draggable: для создания элементов, которые можно перетаскивать.
Страница входа в ОС: можно ввести что угодно на странице входа, чтобы получить доступ к приложению. Фактические учётные данные не нужны. Щёлкните по значкам на рабочем столе, чтобы открыть различные приложения. Используйте панель задач для переключения между открытыми приложениями. Взаимодействуйте с приложениями, чтобы изучить их функции и возможности.
Установка проекта локально:
Clone the repository: git clone https://github.com/MishanPoudel/Windows11-3.0;
Navigate to the project directory: cd Windows11-3.0;
Install the dependencies: npm install;
Start the development server: npm start;
Открыть в браузере: http://localhost:3000.
Два основных подхода к разработке UI-китов
1. All-in подход. Подключение компонента вместе со стилями или без них. Здесь любой компонент — это самостоятельная единица, которая уже содержит всё нужное. Внутри этого подхода можно выделить два подвида:
Инлайн-стили через Styled Components (возможно, добавить просто подключение стилей внутри компонента). Этот метод позволяет писать стили непосредственно в компоненте. При этом стили изолированы, что уменьшает возможность конфликтов между стилями разных компонентов.
Без добавления стилей (Headless). В этом случае компоненты предоставляют только логику без UI, что позволяет самостоятельно управлять стилями. Для создания подобной библиотеки нужно также ознакомиться с паттерном Compound component.
2. Dependency CSS & Bundle CSS подход. Второй большой подход — когда стили и компонент подключаются по отдельности. В этом случае стили и логика компонента отделены друг от друга.
Dependency CSS: этот способ подключения улучшает модульность и позволяет загружать стили только тогда, когда они действительно необходимы.
Bundle CSS предполагает подключение всех стилей сразу и отдельно — компонента. По сути, в этом случае все стили объединены в общий бандл и импортируются в корне проекта.
Но при написании они схожи, и стили к компоненту подключаются как модули.
О том, как создавать и подключать UI-киты, рассказываем в нашем гайде для начинающих Frontend-разработчиков. Там вы найдете примеры кода и полезные ссылки.
В кодовую базу Node.js принято изменение, добавляющее возможность выполнения файлов с кодом на TypeScript.
Поддержка TypeScript включается при помощи опции "--experimental-strip-types" и сводится к очистке специфичных для данного языка определений типов, то есть преобразованию перед выполнением исходного кода в JavaScript.
Не связанные с описанием типов возможности TypeScript пространства имён, декораторы, свойства параметров и перечисляемые типы (enum) пока не поддерживаются. Протестировать новую опцию можно в ночных сборках Node.js 23.
Для трансляции задействован компилятор SWC (Speedy Web Compiler), написанный на языке Rust. Чтобы не добавлять дополнительные зависимости к Node.js, задействовано представление компилятора swc/wasm-typescript в промежуточном коде WebAssembly и уже применяемое для тех же целей в платформе Deno.
Это изменение добавлено в ответ на просьбы пользователей реализовать возможность запуска кода на TypeScript без установки внешних загрузчиков и дополнительных зависимостей. В проектах Deno и Bun поддержка TypeScript реализована изначально.
Ключевым отличием TypeScript от JavaScript является явное определение типов. Статическая типизация позволяет избежать многих ошибок в процессе разработки, даёт возможность задействовать дополнительные техники оптимизации и упрощает отладку.
В добавленной в Node.js реализации данные возможности TypeScript теряются, в процессе трансляции исходных текстов в JavaScript проверка типов не осуществляется.
Источник: OpenNET.
В продолжение публикации «Загрузка es‑модулей в браузерные приложения» cделал более‑менее практичное веб‑приложение с загрузкой кода из публичных ресурсов (GitHub Pages & jsDelivr).
Приложение позволяет использовать OpenAI API напрямую из браузера. В приложении задействованы следующие библиотеки:
Код приложения - здесь, описание - здесь (на англ.).
Отдельное спасибо @SuperCat911 за комменты про importmap - без них бы не получилось юзать OpenAI-библиотеку :)
Кстати, до 4-версии у OpenAI не было браузерной версии API-клиента (только для nodejs). И несмотря на то, что библиотека написана на TS, для браузера они сделали ES-модули, а не UMD-бандл.
Неожиданный факт о JavaScript всплыл, и снова стал актуален, при разработке приложения с генеративными нейросетями.. Оказывается, в языке нет поддержки 64-битных целых. По сути, доступно только 53-бита!
JavaScript Numbers are represented as IEEE 754 double-precision floats. Unfortunately, this means they lose integer precision for values beyond +/- 2^^53.
Факт давно известный, но от того не менее неприятный. Казалось бы, ну ничего страшного -- ведь есть, вроде бы, уже поддержка встроенного объекта BigInt и она добавлена во все современные браузеры.
Но если речь идет о работе с API (как в случае с параметром seed для StableDiffusion, например) и вы хотите использовать весь диапазон (а не его половину, как в automatic1111) -- то вы неизбежно сталкиваетесь с де/сериализацией объектом JSON, который для целочисленных значений использует стандартный тип Number.
И вуаля -- кроме обходного пути с передачей числа в виде строки, решения не видно! Ни на первый, ни на второй взгляд)
Если у кого-то есть идеи как этого избежать, или я что-то недопонял -- буду признателен за комментарий!) Проект давно закончен, но хотелось бы найти "красивое" решение.
UPD: подсказали еще вариант с модификацией всех вызовов JSON.parse() и JSON.stringify() -- см. https://github.com/tc39/proposal-json-parse-with-source (но есть нюансы).
