Обновить
256K+

JavaScript *

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

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

Это под силу даже веб-разработчику! Размышляю, как создать драйверы на JavaScript с API WebUSB

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

Привет! Я Игорь Кечайкин, руководитель группы разработки во Frontend-команде Flocktory. Недавно, решая задачу, связанную с API WebUSB для Fingerprint-атрибуции пользователя, задался совершенно не связанным теоретическим вопросом: а как создать с этим API  драйверы на JavaScript?

Чтобы разобраться, изучил спецификацию API WebUSB, а теперь принёс на Хабр выжимку самых важных элементов. В статье я расскажу о принципах работы решения и том, что с ним делать веб-разработчику, который хочет напрямую реализовать на сайт функцию, например, 3D-принтинга с пользовательских девайсов. А также вы узнаете, насколько это безопасно — для сайта, внедряющего API, и для девайсов юзера.

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

Читать далее

Решаем фундаментальную проблему асинхронных JavaScript-ошибок

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

Асинхронный JavaScript-код встречается практически в любом проекте (самый популярный пример использования — сетевые запросы). Но работа с ним сопряжена с рядом особенностей. Одна из них — специфичная работа с ошибками. Так, поскольку ошибки могут возникать в разное время и в разном месте, надо уметь их отлавливать, определять место «поломки» и корректно передавать всю информацию для последующей обработки. Для этого критически важно, чтобы stack trace ошибки был не формальный «однострочник», а максимально информативный.

Читать далее

Как создать веб-приложение со своей картой: подключение API v3 Яндекс Карт

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

Сколько карт установлено на вашем смартфоне? Попробуйте ответить на этот вопрос и задумайтесь, как часто их добавляют разработчики приложений. Кто-то отмечает на картах свои магазины, кто-то — делает проекты в духе Zenly, другие — показывают зоны доставки еды и т. д.

Если вам тоже пришлось «вшить» в свое веб-приложение карты, запаситесь терпением. В инструкции рассказываем, как это сделать и настроить тестовое окружение с IDE в облаке. Подробности под катом!
Читать дальше →

JavaScript: структуры данных и алгоритмы. Часть 10

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


Привет, друзья!


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


Сегодня мы продолжим разбирать алгоритмы для работы с графами.


Код, представленный в этой и других статьях серии, можно найти в этом репозитории.


Структуры данных и алгоритмы на MyJavaScript.


Интересно? Тогда прошу под кат.

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

Прочтите это, если планируете работать с Next.js

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

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

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

Именно такие ожидания я связывал с Next.js — опенсорсным фреймворком для веб-разработки, созданным и управляемым компанией Vercel. Vercel — это облачный провайдер, предлагающий управляемый хостинг Next.js как услугу.

Читать далее

Скрываем без JavaScript элементы, требующие JavaScript

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

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

Небольшой контекст: я сейчас разрабатываю небольшую кнопочку «Share», которую можно вставлять в посты и с лёгкостью делиться ими, если мне захочется. Взгляните, как она сейчас выглядит без JavaScript:  

Читать далее

Запуск Linux внутри PDF

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


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

Оказалось, что на этом возможности движка по рендерингу PDF не ограничиваются. Он способен запустить даже эмулятор полноценного процессора, а в нём — целую операционную систему.
Читать дальше →

JavaScript: структуры данных и алгоритмы. Часть 9

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


Привет, друзья!


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


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


Код, представленный в этой и других статьях серии, можно найти в этом репозитории.


Интересно? Тогда прошу под кат.

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

Адаптивная вёрстка с учётом размера шрифта пользователя и брейкпоинты

Уровень сложностиПростой
Время на прочтение19 мин
Охват и читатели14K
На эту статью меня вдохновил вопрос из раздела Q&A «Как выбрать «опорные точки» перехода ширины экрана для стилей страниц сайта?». Занимаясь в последнее время адаптивной вёрсткой, я пришёл к нескольким выводам, которыми и хочу с вами здесь поделиться. Заодно разберём некоторые полезные (и не очень) техники для адаптивной вёрстки, и пересоберём Bootstrap с их учётом.


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

CI/CD для чайников — разберитесь и начните наконец-то автоматизировать рутину в разработке. Часть1. Введение

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

Всем привет. Наверняка каждый, кто так или иначе связан с IT сферой, слышал модную аббревиатуру CI/CD. Везде мы слышим про необходимость ее использования, преимущества автоматизации процессов и т.д.

В вакансиях все чаще требуется опыт работы с одним из инструментов в этой инфраструктуре – Jenkins, Travis, AWS, Gitlab CI/CD.

⚠️Я предлагаю вам посмотреть на этот процесс, глазами простого разработчика. Чем ему может помочь автоматизация. Что в конечно итоге скрывается под этой аббревиатурой, и как уже начать получать дивиденды в своей ежедневной рабочей практике.

Первые шаги

Мы рассмотрим внедрение инструментов автоматизации в приложение, построенное на базе React. В целом разберем именно основные подходы и моменты, на которые стоит обратить внимание в самом начале.

В целом, это будет актуально для любого стека.
Чаще всего я использую для хранения кодовой базы и групповой работе над проектами Gitlab. Очень кстати, что эта площадка предоставляет инструментарий CI/CD.

Я пытался пару лет подступиться к этому вопросу. Стильно, модно, молодежно. Да, дает кучу преимуществ. Но все попытки переварить официальную документацию, заканчивались неудачей. А видео уроки или материалы в общем доступе – чаще всего давали рецепт автоматизации какого-то конкретного кейса, который либо частично, либо полностью отличался от моего приложения.

Мне не хватало именно взгляда на основные шаги – что, зачем и как мы делаем. А уже потом реализации практических задач.

CI – continuous integration

Что же скрывается за термином "непрерывной интеграция". Когда мы работаем над созданием программного продукта – в одиночку, или в рамках команды, мы стараемся добавить в наш проект, несколько строк кода. Новый функционал, исправление или доработки. Суть не особо важна. В конечно счете – либо появляется новый код, либо появляются изменения в старом. И нам нужно убедиться, что эти новые изменения, не содержат ошибок, которые могут вызвать проблемы или неработоспособность приложения. ⛔️

Читать далее

Чем хорош Emacs, или Полезные советы современным приложениям от 50-летнего редактора

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

Когда я только начал использовать Emacs, то он мне показался довольно странным. У меня возникали вопросы вроде: «Почему окна в нём называются фреймами, а вкладки — окнами?» и «Что вообще значит C-x C-s

Но я всё же на него подсел, так как это внушало мне чувство индивидуальности, а уже со временем пришло понимание преимуществ и практичности архитектуры Emacs. Он прост, но невероятно удобен.

И в современных реалиях мне кажется странным, что другие приложения не похожи на него, ведь у этого 50-летнего текстового редактора можно многому поучиться.
Читать дальше →

Как 9.3 уязвимость ждала открытия 3 года

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

В крупнейшем JavaScript фреймворке, Next.js, была найдена критическая уязвимость 9.3/10, на исправление которой Vercel потребовалось 13 дней.

Читать далее

Postman скрипт для обновления токена авторизации

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

Недавно по работе занимался тестирование очередного апи и столкнулся с таким неудобством, что все запросы требуют авторизации, а токен живёт всего 5 минут. Из-за этого приходилось постоянно делать запрос авторизации и обновлять токен вручную.

В какой-то момент мне это надоело, и я задумался как это дело автоматизировать. Узнал, что можно написать Pre-request скрипт для коллекции в постмане, который будет выполняться перед каждым запросом, а уже в этом скрипте делать запрос токена авторизации.

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

Мне неожиданно помогла локально запущенная лама, которая мощно сходу дала мне хорошую подсказку, как сделать в скрипте постмана запрос с телом urlencoded и сохранить из него ответ в переменные. Чем я собственно и хотел поделиться.

Итак исходное положение. Имеем некую коллекцию запросов в постмане и все креды для авторизации сохранённые в переменных.

У нас есть запрос Auth, который получает токен авторизации.

Читать далее

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

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

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

Привет, меня зовут Андрей, и я написал книгу.

Нет, не о синтаксисе и не про очередной набор «лучших практик».
А о том, что часто остаётся за кадром — в рефлексии, в мыслях после проектов, в спорах между «пишем быстро» и «делаем правильно».

Читать далее

Cohere Command — революция, которую мы пропустили

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

🔪 Карусель триальных токенов под ребро облачному LLM провайдеру

Облачный LLM провайдер Cohere предоставляет бесплатно 20 запросов в минуту без проверки кредитной карты. Я просто не смог отказаться от задумки сделать веселую карусель.

Читать далее

Пошагово создаём QR-код

Уровень сложностиСредний
Время на прочтение4 мин
Охват и читатели6.6K
В этой статье (оригинал представляет собой интерактивное приложение на JavaScript) подробно описывается, как текстовая строка кодируется в символ QR-кода. Она, по сути, объясняет, как устроена внутри моя библиотека генератора QR-кодов.

Пользовательский ввод




Результат генерации QR-кода



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

Выбор локальной LLM модели. Публикация на сайт с чатом

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

🐝 Выбор локальной LLM модели. Публикация на сайт с чатом.

В мире нейросетей - хайп. Не всегда заявления производителя соответствуют действительности, например, на бумаге DeepSeek R1 поддерживает русский язык, на деле не всё так гладко. Данная статья содержит подборку LLM моделей, хорошо работающих с русским языком и имеющих возможность tool calls - вызов внешних python/nodejs функций для интеграции в стороние сервисы

Читать далее

Рекомендуемые библиотеки для React

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



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


React позволяет разработчикам создавать пользовательские интерфейсы (user interfaces, UI) на основе функциональных компонентов. Хотя он предоставляет встроенные решения, такие как хуки (hooks), для управления локальным состоянием, обработки побочных эффектов и оптимизации производительности, в конечном итоге все сводится к работе с функциями — как компонентами, так и хуками — для построения UI.


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


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

Прожариваем React

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

Привет, Хабр! Я уже рассказал, что умею разнообразно писать счётчики . Пришло время сделать шаг вперёд! Сегодня поговорим о том инструменте, который я и миллионы разработчиков используют ежедневно. Речь пойдёт о великом и ужасном ReactJS.

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

И важное: несмотря на указанные ниже проблемы, я до сих пор считаю React прекрасным и удобным инструментом для создания фронтенда, в частности SPA.  Громких слов типа «ReactJS не пригоден для разработки» тут не будет - пригоден, да ещё как! Но... и на Солнце бывают пятна. Приступим.

Читать далее

Дзен и публикация картинок

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

Привет, Хабр! Сегодня я хотел бы поговорить с тобой о проблеме публикации картинок. Зачем вообще об этом говорить? Ежедневно миллионы людей публикуют миллионы, или даже, миллиарды изображений, что тут можно обсуждать? Наверняка, для веб-разработчика, тем более, опытного - это вообще никакая не проблема.

Эх, как бы не так.