Обновить
256K+

JavaScript *

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

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

Блюда и блоки: как «Программатор» помог улучшить бизнес-процессы в сети ресторанов

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

Сеть ресторанов запустила акцию в честь 8 марта: забронируйте столик в праздник, приходите в одиночку или с друзьями, затем закажите праздничный ужин и получите бесплатный десерт. Рекламу  акции настроили через Facebook Ads. Менеджерам приходили уведомления об отклике.

Они звонили, но в ответ слышали удивленные и раздраженные вопросы: «А вы кто? Какой ресторан? Акция? Я никуда не нажимал, как вы мне позвонили?»  

Менеджеры объясняли, кто они и какую акцию устраивает ресторан. Люди отказывались или сразу сбрасывали трубку.

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

Давайте разбираться, почему так вышло:

Люди, которым звонили менеджеры, оставляли номер телефона в рекламном посте часто по случайности или из любопытства. Спустя время забыли об этом и не поняли, почему им звонят. 

Как не допустить такой ситуации в будущем?

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

Человек через рекламу Google Ads, Яндекс.Директ, Facebook Ads или другую будет сразу попадать в бота. Тот задаст необходимые вопросы, а пользователь сможет принять решение. 

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

Читать далее

await vs yield на примере Effection 3.0 и React

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

18 декабря 2023 года вышел релиз Effection 3.0 - типизированная альтернативна async/await на генераторах (Structured Concurrency and Effects for JavaScript).

В статье сравним подходы на генераторах и async/await и расскажу как использовать Effection в React для решения типичных проблем с асинхронным кодом:

- Race condition

- AbortController

- Clean up

- Debounce

Читать далее

Простой путь к публикации Vue3 модуля на NPM с помощью Vite

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

Для веб-разработчика (особенно начинающего) создание собственных модулей и публикация их в open source может казаться сложным процессом. В этой статье я покажу один из самых простых и быстрых способов публикации своего модуля на NPM при помощи бандлера Vite.

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

Читать далее

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

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

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

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

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

Читать далее

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

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

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

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

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

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

Читать далее

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

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

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

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

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

И как?

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

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

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

Это как?

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

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

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

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

Читать далее

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

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

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

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

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

Читать далее

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

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

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

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

Читать далее

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

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

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

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

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

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

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

Читать далее

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

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

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

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

Коротко о Supercat Store:

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

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

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

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

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

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

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

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

Лицензия MIT.

Читать далее

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

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

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

Читать далее

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

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

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

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

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

Читать далее

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

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

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

Читать далее