Как стать автором
Обновить
104.37

JavaScript *

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

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

Мой опыт создания frontend и backend приложений для моего стартапа

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

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

В этой части я хочу рассказать как проектировал backend & frontend приложения.

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

Читать далее
Всего голосов 6: ↑4 и ↓2+4
Комментарии0

Новости

7 раз отрежь, один релизни. А/Б тесты статических сайтов

Время на прочтение8 мин
Количество просмотров562

Релиз начинается с идеи. Когда в потоке мозгового штурма приходит та самая идея, которая понравится всем пользователям и привлечёт новых клиентов. Идея презентуется команде менеджеров, маркетологов и безоговорочно поддерживается всеми.

Прорабатывается ТЗ и задача отдаётся разработчикам. Затем новая версия тестируется и уходит конечным пользователям. На этом жизненный цикл идеи завершён. Теперь остаётся дождаться массива свежей аналитики и отпраздновать…

Однако эта идея изначально была обречена. Она была поддержана лишь схожими с её автором людьми. Однако эти люди не самая подходящая ЦА, а возможно и вовсе её редкие исключения. И есть только один гарантированный способ проверить гипотезу - проверить её именно на аудитории бизнеса. Но, не на всей. Этот способ называется А/Б тестированием.

И именно ему будет посвящена данная статья. От идеи до конкретной реализации тестирования на next.js (которую можно повторить и на других технологиях).

Читать далее
Рейтинг0
Комментарии0

WordPress Interactivity API: Подробное объяснение

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

WordPress Interactivity - это относительно новый API, который позволяет создавать декларативный фронтенд в WordPress нативно. Декларативный? Да, да, он использует тот же принцип, что React и Vue. Только тут под капотом Preact и собственные директивы. И конечно куда же без SSR, который здесь идет из коробки. Звучит интересно? Давайте разбираться вместе.

Читать далее
Всего голосов 1: ↑1 и ↓0+2
Комментарии0

Машинное обучение в браузере

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

Меня зовут Алексей, сегодня мы с вами поговорим, как можно ускорить вычисления машинного обучения веб приложения с помощью WASM, WebGL или WebGPU.

Когда фронтенд‑разработчик слышит о машинном обучении в браузере, первое, что приходит ему на ум, это вопрос: «Как это может быть применено? Мы же работаем в браузере на JS, который, как известно, медленный (по сравнению с компилируемыми языками)».

Читать далее
Всего голосов 3: ↑3 и ↓0+3
Комментарии0

Истории

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

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

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

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

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

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

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

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

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

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

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

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

Читать далее
Всего голосов 3: ↑0 и ↓3-3
Комментарии5

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

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

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

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

- Race condition

- AbortController

- Clean up

- Debounce

Читать далее
Всего голосов 16: ↑16 и ↓0+19
Комментарии10

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

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

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

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

Читать далее
Всего голосов 8: ↑8 и ↓0+10
Комментарии2

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

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

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

Читать далее
Всего голосов 6: ↑6 и ↓0+6
Комментарии2

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

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

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

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

Читать далее
Всего голосов 27: ↑26 и ↓1+25
Комментарии2

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

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

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

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

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

Читать далее
Всего голосов 12: ↑6 и ↓6+2
Комментарии16

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

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

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

Недавно я создала на JavaScript собственный блочный шрифт, решив, что запрограммировать слитное рукописное письмо будет слишком сложно. Но не прошло и двух месяцев, как вот я здесь и готова рассказать о созданном мной механизме слитного письма. Пожалуй, в этом есть свой урок, но мы в его смысл углубляться не станем.
Читать дальше →
Всего голосов 98: ↑96 и ↓2+123
Комментарии55

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

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

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

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

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

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

Читать далее
Всего голосов 4: ↑4 и ↓0+9
Комментарии1

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

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

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

Читать далее
Всего голосов 8: ↑8 и ↓0+9
Комментарии3

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

Конференция «IT IS CONF 2024»
Дата20 июня
Время09:00 – 19:00
Место
Екатеринбург
Summer Merge
Дата28 – 30 июня
Время11:00
Место
Ульяновская область

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

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

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

Читать далее
Всего голосов 5: ↑3 и ↓2+1
Комментарии16

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

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

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

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

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

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

Читать далее
Всего голосов 40: ↑37 и ↓3+54
Комментарии7

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

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

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

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

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

И как?
Всего голосов 18: ↑7 и ↓110
Комментарии17

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

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

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

Читать далее
Всего голосов 2: ↑2 и ↓0+3
Комментарии4

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

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

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

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

Читать далее
Всего голосов 7: ↑6 и ↓1+7
Комментарии21

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

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

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

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

Читать далее
Всего голосов 8: ↑6 и ↓2+4
Комментарии11

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

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

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

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

Читать далее
Всего голосов 24: ↑24 и ↓0+27
Комментарии12
1
23 ...

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

Работа