Все потоки
Поиск
Написать публикацию
Обновить
202.03

JavaScript *

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

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

Автоматическое создание интерактивных карт

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

В данной статье будет рассмотрен подход к автоматизированному созданию карт с использованием следующего технологического стека: QGIS, PostgreSQL, Django, Leaflet. Идея родилась ввиду необходимости быстрого создания интерактивных карт из уже созданных проектов в QGIS. Хочу сразу оговорится что проекты создаются без использования локальных слоев, а исключительно с использование БД для их хранения.

Читать далее

Декомпозиция — ваша суперсила

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

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

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

Читать далее

Как я запрограммировала собственный рукописный шрифт

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

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

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

Как Apache Arrow поможет управиться JS с большими данными

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

Привет. Меня зовут Николай Шувалов, я занимаюсь коммерческим программированием около семи лет, владею Rust, JavaScript, PHP. Сейчас я работаю в отделе данных билайна. Наша платформа позволяет делиться с партнерами данными, не раскрывая их. Например, можно расширить данные с помощью фильтра Блума. 

Arrow в сравнении со строковыми форматами

Возьмём простую таблицу, которая состоит из трех столбцов: телефона, даты и имени. Рассмотрим, как она будет выглядеть в строковом и столбчатом форматах. Для строкового формата мы возьмем csv и json, для столбчатого формата структура будет одинаковой. Если же таблица состоит, например, из миллиона строк, а нужно получить имя на строке с номером 10 000, то придется бежать по всей строчке. В json то же самое. А в столбчатом формате ситуация иная — значения привязаны к столбцам. Когда мы хотим получить имя на строке 10 000, то сразу обращаемся к этому столбцу и получаем все его данные. 

Существуют RA (random access) файлы, в которых можно пропускать заданное количество строк, но все равно парсеру нужно читать и анализировать пройденные строчки.

Читать далее

Реализуем touch жесты на vanilla js. Часть 2 (drag, resize)

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

В предыдущей части мы подробно разобрали как устроены touch события и реализовали жест rotate, самое время добавить оставшиеся.

Читать далее

RxJs для самых маленьких

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

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

Читать далее

Демо City In A Bottle – система рейкастинга в 256 байтах

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

Привет всем любителям size coding, сегодня я расскажу о чём-то потрясающем: крошечном движке трассировки лучей (raycasting) и генераторе города, умещающихся в автономном файле HTML размером 256 байтов.

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

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

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

Читать далее

Как написание своего плагина может поменять то как вы пишете код

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

Привет, я — Лёша, и я люблю веб. Иногда это даже взаимно.

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

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

И как?

@ts-expect-error иногда не лучше @ts-ignore

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

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

Это как?

Как я делал шрифтовые иконки. Совмещаем желание UX-дизайнеров и возможности фронтендеров

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

Привет, Хабр! Меня зовут Артём Поморцев. Я фронтенд-разработчик компании «Криптонит» и хочу поделиться своим опытом создания набора иконок (icon pack).

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

Читать далее

Создание собственного графического клиента ChatGPT с помощью NextJS и Wing

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

К концу этой статьи вы создадите и развернете клиент ChatGPT с помощью Wing и Next.js.

Это приложение может запускаться локально (в локальном облачном симуляторе) или развертываться у вашего собственного облачного провайдера.

Читать далее

Как мне взбрело в голову свой Notion-like редактор написать

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

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

В статье хочу рассказать про атрибут contenteditable у HTML-элементов, про сопутствующие проблемы при его использовании, про кастомное форматирование и про работу с выделенными участками текста.

Читать далее

37 Советов от Senior Frontend Разработчика. Для начинающих

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

Мне очень понравился пост abbeyperini, и я решил поделиться своими советами после более чем 5-летнего опыта работы разработчиком программного обеспечения.

Готовы? Давайте погрузимся 💪.

1. Освойте основы

Дом, построенный на шатком фундаменте, развалится при малейшей проблеме.

Аналогично, если у вас нет прочных основ:

Читать далее

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

Supercat Store — новый менеджер состояний на JavaScript

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

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

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

Коротко о Supercat Store:

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

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

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

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

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

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

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

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

Лицензия MIT.

Читать далее

Пакетируем легко и просто с помощью Lerna

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

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

Читать далее

Путь Frontend разработчика. Как им стать? (Часть 1. Основы)

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

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

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

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

Читать далее

Разбираемся в серверных и клиентских компонентах в Next.js: когда, как и почему?

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

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

Читать далее

Кто ещё здесь не разрабатывал русский BI?

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

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

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

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

Поехали

React Conf 2024. React v19

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

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

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

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

Читать далее

Асинхронный веб: WebSocket, Server-Sent Events, Long Polling и Short Polling

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

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

Читать далее

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