К концу этой статьи вы создадите и развернете клиент ChatGPT с помощью Wing и Next.js.
Это приложение может запускаться локально (в локальном облачном симуляторе) или развертываться у вашего собственного облачного провайдера.
Мне в голову пришла идея пет-проекта, который изначально никак не был связан с текстовым редактором. Однако, в процессе работы все дошло до того, что пользователям нужно где-то набирать текст. Я люблю Notion и пишу там много и часто, поэтому решил сделать похожий (но сильно упрощенный) редактор в своём проекте. Не столько из нужды, сколько из любопытства, ведь я никогда не занимался ничем подобным и мало что знал о том, как писать текстовые редакторы.
В статье хочу рассказать про атрибут contenteditable у HTML-элементов, про сопутствующие проблемы при его использовании, про кастомное форматирование и про работу с выделенными участками текста.
Мне очень понравился пост abbeyperini, и я решил поделиться своими советами после более чем 5-летнего опыта работы разработчиком программного обеспечения.
Готовы? Давайте погрузимся 💪.
1. Освойте основы
Дом, построенный на шатком фундаменте, развалится при малейшей проблеме.
Аналогично, если у вас нет прочных основ:
Всем привет! На связи Supercat и я хочу рассказать о менеджере состояний Supercat Store.
Supercat Store - это JavaScript-библиотека, которая позволяет легко отслеживать и реагировать на изменения стейта приложения или его части.
Коротко о Supercat Store:
• Легковесная: 12 kB - minified, 3.8 kB - minified + gzipped;
• Не зависит от фреймворков, агностик;
• Можно создавать столько сторов, сколько нужно;
• Использует мутабельную систему реактивности;
• Применяются ленивые вычисления для computed;
• Поддержка мгновенных и отложенных реакций на изменения состояния;
• Код типизирован с помощью TypeScript внутри JSDoc;
• Код документирован, в документации почти на каждый метод есть пример использования;
• Лицензия MIT.
Всем привет! Меня зовут Иван Кузнецов, я Head of Frontend в Uzum Market. Расскажу о сложностях, с которыми мы столкнулись на пути к реализации микрофронтендовой архитектуры, и поделюсь результатами, которые мы получили в процессе пакетирования наших решений с помощью Lerna. Надеюсь, тебе, дорогой читатель, будет очень интересно :)
Программа обучения Frontend-разработке.
Frontend-разработчик — это специалист, который занимается созданием пользовательского интерфейса веб-приложений. Он отвечает за то, чтобы веб-сайт или веб-приложение выглядело хорошо и функционировало безупречно для пользователей.
Frontend-разработчик обеспечивает взаимодействие пользователей с веб-приложением, создавая удобный, интуитивно понятный интерфейс, который обеспечивает приятный опыт использования.
Next.js предлагает широкие возможности для создания высокопроизводительных веб-приложений. Важной частью его функциональности с появлением Next App Router являются серверные и клиентские компоненты, которые позволяют разработчикам управлять рендерингом на стороне сервера и на стороне клиента, в зависимости от требований проекта. Давайте разберемся в этих компонентах более подробно.
Год назад я планировал выпустить серию статей по мотивам бесед с моими коллегами, но дальше одной статьи не пошло, хотя материала накопилось достаточно. Большинство моих товарищей остались на прошлых местах работ и считаю необходимым в знак уважения перед этими неординарными и талантливыми личностями продолжить свои рассказы охотника до талантов.
Сегодня — это руководитель и senior fullstack Марк Локшин. В этой беседе мы обсуждаем о заходе в тему разработки собственного инструмента Business Intelligence. Тема недвусмысленно намекает на то, что данная тема уже не раз была описана на соответствующих ресурсах, а российский рынок даже после ухода с него западных вендоров обладает собственным набором вполне зрелых и рабочих решений.
Собственно, откуда у нас появилась такая задача? Конечно же от заказчиков. А заказчики у нас чаще специфические: государственные и около организации, администрации субъектов регионов. У этих «ребят» чаще всего основная задача показать большому начальнику на совещании красивый график и отчитаться, как же все классно поработали, у особенных из этих заказчиков предъявлены жесткие требования к инструментам разработки.
Только что завершилась Конференция React.js. Долгожданная конференция спустя почти 3 года после предыдущей. Не менее долгожданны и обновления реакта. И именно с них была начата конференция, им и будет посвящена статья. И да, как вы увидели из превью — 19 версия перешла в статус release candidate. Полноценный же релиз нам обещают в течении двух недель.
В целом, мне как next.js разработчику большая часть была знакома. Десятки статей на хабре уже рассказали о практически каждой части этого обновления, частично их касался и я рассказывая об обновлениях внесённых в next.js.
Можно сказать, что главным направлениям этого обновления было достижение «Высокого UX при высоком DX». Максимальная производительность при максимально простом коде. И так, а теперь к самой конференции.
Веб-разработка часто требует реализации механизмов обновления контента на странице в реальном времени. Существуют различные сценарии, где это необходимо, например, отображение прогресса выполнения тяжелых задач на бекенде, обновление каких-либо часто меняющихся данных, будь то курсы валют или мониторинг какой-то активности, чаты, различные уведомления. Эти сценарии объединяет одна общая особенность: источник события необходимости обновления данных находится не на клиентской стороне, поэтому мы хотим получать события с бекенда. В данной статье мы рассмотрим четыре популярных подхода к реализации этой функциональности: WebSocket, Server-Sent Events (SSE), Long Polling и Short Polling.
Мы проанализируем каждый метод, выявим их плюсы, минусы и сложность реализации.
Начиная с декабря 2023 года все ссылки на вложения Discord CDN имеют следующий формат: https://cdn.discordapp.com/attachments/channel/message/filename.ext?ex=EXPIRES&is=ISSUED&hm=CODE Значения параметров запроса EXPIRES и ISSUED представляют собой даты в формате Unix/epoch hex, CODE - это закодированная контрольная сумма, используемая для проверки значений EXPIRES и ISSUED. Попытка получить ссылки на вложения Discord CDN без вышеупомянутых параметров запроса или с параметром EXPIRES, превышающим текущее время, приведет к ответу 404: This content is no longer available. пример.
На практике это означает, что вы больше не можете ссылаться на вложения из Discord на своем сайте, делиться мемасиками на OK.ru и VK.com ?
В этой статье представлено эффективное решение для публичного доступа к Discord CDN ссылкам.
Наш браузер Ladybird неплохо справляется с качественно отформатированным веб-контентом, но я решил, что будет полезно проверить его инструментами для исследования безопасности. Поэтому сегодня мы воспользуемся Domato 🍅 — DOM-фаззером из Google Project Zero, чтобы провести стресс-тест Ladybird и устранить найденные в процессе ошибки.
Работает это следующим образом: Domato генерирует рандомизированные веб-страницы со множеством по большей части валидного, но странного HTML, CSS и JavaScript. Я загружу эти страницы в отладочную сборку Ladybird и посмотрю, что получится.
После окончания нативного Android приложения от заказчика последовало предложение написать мини-приложение VK. Так как я имел опыт написания кода только для нативных приложений, то для меня это был интересный челенж. Немного погуглив пришел к тому, что добрые разработчики из Jet Brains разработали Kotlin JS - оболочку над React (а Kotlin мой основной язык). Вдохновившись статьей https://habr.com/ru/companies/vk/articles/521192/ я приступил к написанию кода.
Итак, чем хорош Kotlin для разработки такого рода приложений - использование всех фишек (экстеншены, дата классы, корутины, конструкции и пр.) языка и в то же время возможность реализации компонентов и хуков React. Поэтому, сомнений у меня не было.
Несмотря на то, что в статьях указывается как легко имплементируются в проект библиотеки, действительность оказалось другой. Gradle сыпал ошибками несовместимости библиотек между собой. При этом, при одинаковых номерах версий дружба никак не зарождалась. В итоге, поэкспериментировав с различными версиями пришлось перейти к изучению списка оберток в https://github.com/JetBrains/kotlin-wrappers/. Здесь меня ожидало решение проблемы совместимости - https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-wrappers-bom. Добавление имплементации этой библиотеки позволяет не заморачиваться и передать это заботу этой библиотеке:
Изучите ключевые концепции программирования, лежащие в основе популярной JavaScript-библиотеки MobX. Понимание этих концепций поможет вам применить лучшие практики программирования в работе.
Недавно делал небольшой скрипт для браузера, который может рисовать спираль Фибоначчи поверх фотографий на вебстранице. Все это делалось для того, чтобы проверить свою догадку, по поводу форм встречающихся в природе - вписываются ли они в спираль или нет. Рисовать я ее хотел не поверх котов, а поверх фото, которые немного даже поинтереснее будут, и поэтому и пишу такое длинное предисловие, потому что в отличие от поста в личном блоге, здесь аудитория может отнестись к таком не сильно положительно. Но с другой стороны, все мы люди, поэтому я рискну рассказать об этом эксперименте и тут на хабре.
VRackDB - это простая In Memory Graphite like база данных, предназначенная для хранения временных рядов (графиков). (TypeScript)
Мне, как автору базы, хотелось бы немного рассказать о ее особенностях и области применения. Покажу немного картинок, немного кода, возможно даже, немного полезной для вас информации. В общем все как обычно.
Angular, один из ведущих фреймворков для создания веб-приложений. Фреймворк стабильно развивается, чтобы соответствовать требованиям современной веб-разработки. С каждой новой версией он приносит новые функции, оптимизации и улучшения. Пользовательское сообщество с нетерпением ждет выпуска Angular 18, и вот какие нововведения мы можем ожидать от этой следующей версии.
Планируется, что Angular 18 будет выпущен в мае 2024 года, и уже есть несколько подтвержденных функций для включения в предстоящую версию, которые мы рассмотрим в данном материале.
Прошло уже 10 лет с моего предыдущего разбора, не побоюсь этого слова, говнософта, как появилась очередная проблема, с которой мне захотелось разобраться и устранить её.
В процессе нашей миграции на Nuxt CAPI, а потом и Nuxt 3, я очень много переосмыслял работу с контекстом как в Vue, так и в Nuxt. Как он сохраняется, на что влияет, и как можем повлиять мы.
В какой-то момент я понял, что по данной тематике крайне мало публикаций, а большинство разработчиков даже не знают, что этот контекст существует - и поэтому сами не замечают, как его теряют.
Что? Какой контекст? В setup нет this. Как его можно потерять? На что это влияет? Давайте про это поговорим.
Бесконечно можно смотреть на три вещи: как горит огонь, как течет вода и то как фронтендеры пишут очередную статью про this.
Но все же такое количество статей существует не просто так, тема действительно для многих запутанная и зачастую даже сами авторы статей неправильно понимают this и соответственно закладывают неправильное понимание этого у читателей. Есть и хорошие статьи, где все описано верно, но в основном чисто с практической точки зрения, без погружения в то “как это работает на самом деле”.
В этой статье я попытаюсь раскрыть эту тему как можно глубже с теоретической точки зрения, исходя из спецификации ECMAScript, а уже на основе этой теории вывести определение значения this на практике.
