Обновить
207.98

JavaScript *

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

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

Современные способы переключения контента

Уровень сложностиСредний
Время на прочтение14 мин
Количество просмотров5.4K



Тот, у кого из всех инструментов есть только молоток, склонен на любую проблему смотреть, как на гвоздь.
Абрахам Маслоу

Мы склонны использовать знакомые решения. Когда речь заходит о переключении контента, мы обычно используем свойства display: none или opacity: 0 с добавлением JavaScript. Однако современный веб стремительно развивается, и, возможно, настало время рассмотреть другие подходы к переключению контента — узнать, какие нативные API на сегодняшний день поддерживаются, их достоинства и недостатки, а также некоторые нюансы, о которых мы могли и не подозревать (включая псевдоэлементы и другие малоизвестные вещи).

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

PGlite — полноценный Postgres-сервер на WASM. Работает прямо в браузере и Node.js

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

Безумные штуки иногда можно найти в интернете. Листая 2024 JavaScript rising stars (https://risingstars.js.org/2024/en#section-all) обнаружил там удивительного зверя - Postgres скомпилированный через emcc в WASM версию, и допиленный до состояния, когда его можно запустить внутри JS-процесса (браузер/Node.js/Bun/etc).

Как он устроен, как им пользоваться, и, самое главное, зачем? Добро пожаловать под кат :)

Поехали!

Почему текстовые форматы не идеальны в разработке: пример на JSON

Уровень сложностиПростой
Время на прочтение7 мин
Количество просмотров13K

JSON - наш повседневный помощник, но вместе с другими текстовыми форматами он может преподнести неприятные сюрпризы: потеря точности чисел, громоздкие файлы, путаница с датами. Рассказываю, как этих проблем избежать и повысить эффективность с помощью стриминга в Node.js, а также MessagePack и Protobuf. Узнайте, где подводные камни и как их обходить на практике!

Если хотите понять, в чём именно проблема на иллюстрации, загляните в статью — там всё разобрано :-)

Читать далее

Performance и оптимизация TypeScript-типов в больших проектах

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

Узнайте, почему большие TypeScript-проекты начинают "захлёбываться" от рекурсивных типов и обилия импортов, и как с помощью правильной структуры монорепы, настройки tsconfig и диагностики ускорить время компиляции и работу IDE. Рассматриваем инструменты, параллельную сборку, оптимизацию рекурсивных типов и прочие техники, которые помогут сохранить ваш проект быстрым и удобным.

Читать далее

Почему джуны путаются в асинхронном коде (и как научиться с ним работать)

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров45K

Асинхронный код часто становится камнем преткновения для начинающих разработчиков. Почему функции выполняются не в том порядке, зачем нужны промисы, и что делает async/await? В статье я простыми словами объясняю:

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

Если асинхронность вызывает больше вопросов, чем ответов, загляните в статью - там всё по шагам. 🙂

Читать далее

Как сделать ёлку, если ты Unicode

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

Поздравляю Хабр и Хаброжителей с Новым 2025 годом! Несколькими годами ранее я писал о том, как сделать ёлку из функций, в этот раз сказ пойдёт о ёлке из Unicode символов. Ограничение - должна быть музыка, а результат должен помещаться в QR код.

Читать далее

Фронт без бэка: как мы сумели собрать тысячу форм в одну систему и не потерять рассудок

Время на прочтение9 мин
Количество просмотров6.8K
Когда три года назад в июле к нам пришли с просьбой сделать фронтенд для маленькой системы документооборота, мы оценили задачу в полгода… ТЗ принесли на создание более 1000 разных форм. Обещанные нами полгода перестали казаться спокойными.

Через пару недель к задаче добавились две крупные системы на 1С и ещё несколько в разработке, с бэкендами на С++ и Java. Объём работы стал выглядеть неподъёмно. Плюс основное требование — всё должно быть в едином интерфейсе. Так мы поняли, что нужно браться за универсальное решение, которое «скушает» любой бэкенд.

image
Импортозамещённый JSON

Эта история о том, как команда из 16 человек разработала Атом.Форму — продукт, который уже работает для шести крупных систем в «Росатоме», и их количество постоянно растёт. А срок создания фронта теперь занимает 2–3 недели для маленьких и несколько месяцев для развесистых систем.
Читать дальше →

Создаем Hamster Kombat почти с нуля. Практика по Vue 3 и Telegram Mini Apps

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

Привет, Хабр! В этой статье-инструкции вы узнаете, как с нуля сделать свою собственную Telegram-тапалку на современном стеке. Важный дисклеймер: тапалка, кликер и прочее — это всего лишь форма. Цель статьи — дать всеобъемлющий практикум по современному стеку и деплою проектов в облако.

Внутри статьи — полноценный Serverless-подход, разработка бота на Node и полный цикл создания FE-приложения. А еще комментарии по архитектурным и тактическим решениям, чтобы вы прокачали уровень программирования и насмотренности. Подробности под катом!
Читать дальше →

Парольная защита статичной HTML-страницы на JS

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


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

Для шифрования HTML перед публикацией StatiCrypt использует AES-256 и WebCrypto, а расшифровка происходит с помощью ввода пароля в браузере на стороне клиента, как показано в демо (пароль test).

StatiCrypt генерирует статическую страницу, которую можно безопасно заливать на любой хостинг, в том числе бесплатный сторонний хостинг, такой как GitHub Pages.
Читать дальше →

Чистая архитектура фронтенд приложений. Часть первая

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

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

Читать

Как мы превратили рутинную работу в удовольствие: история создания плагина для Р7-Офиса

Уровень сложностиПростой
Время на прочтение6 мин
Количество просмотров2.9K

Многие компании продолжают активно использовать Excel и язык макросов VBA для обработки и анализа данных. Однако с переходом на отечественные офисные решения (например, Р7-Офис) появилась необходимость в разработке новых инструментов обработки данных на JavaScript. 

В ЛАНИТ мы помогаем клиентам осуществить переход на Р7-Офис и создаем макросы, которые ранее использовались в Excel. Во время этого процесса наши разработчики внимательно анализировали запросы пользователей и выявили несколько общих трендов, на основе которых и был разработан наш плагин Аналитика.

Читать далее

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

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

TLDR. Я примерно год создавал курс из 141 урока. Курс получился хороший, все кто проходят рады и пишут положительные отзывы. Я пытался его продавать, в лучшем случае у меня получалось отбивать рекламу в ноль. Короче, я хороший разработчик, я хорошо доношу материал, но я плохой маркетолог. Все эти таргреты, ретаргеты, воронки, шморонки — тоска унылая. Мне гораздо веселее и понятнее заработать на создании и запуске IT-продуктов, чему я и учу в этом учебнике. Так что пишу эту статью, чтобы сообщить вам о существовании моего курса и предложить всем желающим абсолютно бесплатно получить от него пользу 🙂

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

Читать далее

Ultimatum — еще один форк хромиума, с претензией…

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

image


Добрый день! Меня зовут Тимур и я программист.


Сегодня я хочу сделать настоящий анонс своей сборки chromium — Ultimatum. Он умеет уже достаточно много что бы гордо носить свое собственное имя.


В прошлой своей статье я рассказал о том как пробросил в js прямой доступ до http кеша и объяснил для чего я это делаю. Статья завершилась со словами что я еще вернусь со своим антидетект браузером. Я вернулся и это немного больше чем антидетект браузер.


Если коротко — Ultimatum уже помножил на ноль такие техники трекинга как hsts-pinning, favicons cache и вообще использование многих других кешей в трекинге. А также! Теперь можно поставить расширение с любого сайта, не только со сторов гугля, оперы или микрософта (с них кстати тоже можно — со всех!). А еще! Можно перехватывать сетевые запросы и подменять их полностью! Ну и так далее и тому подобное.


А теперь более подробно и более спокойно.

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

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

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

Уровень сложностиПростой
Время на прочтение8 мин
Количество просмотров65K

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

Важно при этом отметить, что я считаю себя достаточно адекватным собеседующим. Я практически не задаю лично-специфичных вопросов (моя часть – техническое собеседование, и мы с него начинаем); отвечаю всем кандидатам, чтобы сразу было понятно, рассматриваем мы их или нет; стараюсь построить собеседование так, чтобы на него не уходило больше полутора часов; не спрашиваю про красно-черные деревья и знание алгоритмов; и вообще имею достаточно четкие критерии для оценки собеседуемых, которые и попытаюсь для вас обосновать.

Читать далее

Как сделать анимацию разными способами: CSS, WebP, Canvas, Lottie, Spine и секвенции

Уровень сложностиСредний
Время на прочтение25 мин
Количество просмотров8.3K

Привет! Меня зовут Даша, я фронтенд-разработчик отдела спецпроектов в KTS.

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

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

Читать далее

Слабоумие и отвага: как найти ликвидные облигации с доходностью до 40% и ежемесячными фиксированными выплатами

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

Что может быть привлекательнее депозита в Сбербанке под 21%? Видимо только депозит в ВТБ под 24%. А еще можно рассмотреть облигации с доходностью до 40% и ежемесячной выплатой купонов. Посмотрим, что они предлагают и какие существуют риски.

В статье будем искать такие варианты при помощи скрипта поиска ликвидных облигаций, который выложен на GitHub.

Вообще покупки высокодоходных облигаций с низким рейтингом (ВДО) на фоне роста ключевой ставки Центрального банка Российской Федерации – задача не для слабонервных. Высокие процентные ставки означают повышенный риск дефолта, особенно для эмитентов ВДО.

Ищем %

JavaScript. Как сделать невероятно быстрый многопоточный Data Grid на 1 000 000 строк. Часть 1/2: нюансы работы с DOM

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

Demo | GitHub

Особенности Fast Data Grid:
— Невероятно быстрый
— Многопоточный
— Всего 523 строчки кода
— Нет зависимостей
— Vanilla JavaScript

Попробуйте скролл и поиск по 1 000 000 строк — Fast Data Grid.

В статье перечислю нюансы работы с DOM. Про многопоточность в следующей статье.

Читать далее

Как я создал Vanilla Calendar Pro — легкий и гибкий календарь на JavaScript с использованием TypeScript

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

Привет, Habr!

Честно говоря, долго сомневался, стоит ли писать эту статью. Я понимаю, что среди комментариев наверняка будут такие, кто скажет: «Очередной никому не нужный датапикер». Но сегодня, когда Vanilla Calendar Pro собрал больше 480 звезд на GitHub и получает 17 тысяч скачиваний в месяц, я решил поделиться своей историей.

Хочу сразу отметить: я не претендую на лавры лучшего разработчика календарей и датапикеров. Эта статья о моем первом опыте в open source, о том, как я создавал проект с нуля и как он стал полезен другим разработчикам.

Читать далее

Пишем плагины для Obsidian. Часть 2

Уровень сложностиПростой
Время на прочтение12 мин
Количество просмотров7.1K

Продолжаем писать собственные плагины для Obsidian. Первую часть статьи можете найти здесь. В ней мы:

Выяснили, что можно писать плагины даже проще, чем это предлагает делать официальная документация

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

Грозились написать четвертый финальный босс-плагин

Вот и приступим.

Читать далее

Как спрятать любые данные в PNG

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

А вы уже прятали что-то внутри PNG? Базовый способ надежно спрятать что-то внутри картинки. И все на вашем любимом JavaScript!

Подробнее

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