#посмотреть
В финальном уроке соберём всё воедино и выложим наше приложение в интернет. Обсудим, что такое деплой для фронтенда и чем отличается dev-сервер от production-сборки. Вернём хранение задач в localStorage, чтобы приложение работало без бэкенда. Настроим переключение API под разные окружения. Соберём production-бандл и проверим его через vite preview. Доработаем маршрутизацию, чтобы ссылки работали корректно после выкладки. Подготовим vite.config.js к продакшену и настроим base под GitHub Pages. Добавим копию 404.html, чтобы SPA-роутинг не ломался. Установим и настроим пакет gh-pages, пропишем удобные npm-скрипты и задеплоим проект. В итоге получаем полноценное React-приложение в продакшене, готовое для портфолио.
Please open Telegram to view this post
VIEW IN TELEGRAM
Ответ фронтендера на «Не занимайтесь преждевременной оптимизацией»
#почитать
Я хочу показать, почему распространённая фраза "не занимайтесь преждевременной оптимизацией" почти всегда используется неправильно, особенно в современных фронтенд-проектах. Я посмотрю на исторический контекст, разберу, что именно Кнут называл оптимизацией, и почему многие вещи, которые считаются "преждевременной оптимизацией", на деле — нормальная инженерная дисциплина.
⏱ Читать статью
#почитать
Я хочу показать, почему распространённая фраза "не занимайтесь преждевременной оптимизацией" почти всегда используется неправильно, особенно в современных фронтенд-проектах. Я посмотрю на исторический контекст, разберу, что именно Кнут называл оптимизацией, и почему многие вещи, которые считаются "преждевременной оптимизацией", на деле — нормальная инженерная дисциплина.
Please open Telegram to view this post
VIEW IN TELEGRAM
👎5
Цепочка ошибок в JavaScript: удобная отладка кода с помощью Error.cause
#почитать
Обработка ошибок в JavaScript всегда была немного хаотичной. Получить ошибку легко, но отследить ее первоисточник бывает очень сложно. Именно здесь и приходит на помощь свойство cause.
⏱ Читать статью
#почитать
Обработка ошибок в JavaScript всегда была немного хаотичной. Получить ошибку легко, но отследить ее первоисточник бывает очень сложно. Именно здесь и приходит на помощь свойство cause.
Please open Telegram to view this post
VIEW IN TELEGRAM
Как правильно обновлять зависимости в проекте
#почитать
Казалось бы что может быть проще и банальнее, чем обновить зависимости во фронтенд-проекте? Но зачастую даже опытные мидлы делают это не правильно и ставят себе палки в колеса. Давайте разберемся почему так происходит и как этого избежать.
⏱ Читать статью
#почитать
Казалось бы что может быть проще и банальнее, чем обновить зависимости во фронтенд-проекте? Но зачастую даже опытные мидлы делают это не правильно и ставят себе палки в колеса. Давайте разберемся почему так происходит и как этого избежать.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
Фронтенд обгоняет бек или как мы написали 200_000 строк кода на моках
#почитать
⏱ Читать статью
#почитать
Я работаю старшим фронтенд-разработчиком в it-отделе одного из крупнейших федеральных застройщиков. Специфика разработки в такой непрофильной компании — сроки спускаемые сверху и вообще не имеющие корреляции с реальными ресурсами и возможностями команды. Именно поэтому мы работаем очень быстро, постоянно пытаясь получить (максимум результата)*3 за (минимум времени)/4.
Please open Telegram to view this post
VIEW IN TELEGRAM
This is JavaScript: методы объектов и контекст «this»
#почитать
Ранее я рассказывал о callback-функциях, деструктуризации, операторах и многом другом. Если вы уже успели познакомиться с основами JavaScript, то наверняка вам знакомы такие понятия, как объекты и функции.
В этой статье мы двинемся дальше и соберем эти знания воедино. Я расскажу вам о методах объектов и загадочном слове this. Разберемся, для чего они нужны, как сделать объекты по-настоящему живыми и как избежать частых ошибок.
⏱ Читать статью
#почитать
Ранее я рассказывал о callback-функциях, деструктуризации, операторах и многом другом. Если вы уже успели познакомиться с основами JavaScript, то наверняка вам знакомы такие понятия, как объекты и функции.
В этой статье мы двинемся дальше и соберем эти знания воедино. Я расскажу вам о методах объектов и загадочном слове this. Разберемся, для чего они нужны, как сделать объекты по-настоящему живыми и как избежать частых ошибок.
Please open Telegram to view this post
VIEW IN TELEGRAM
😁1
ShadowRealm API: изоляция исполнения кода в JavaScript
#почитать
Джаваскриптеры давно мечтают о безопасной изоляции кода, чтобы можно было выполнить сторонний скрипт или библиотеку в своём песочном замке, без риска повредить глобальные объекты или залезть друг другу в прототипы. Сейчас для этого есть костыли, либо создавать скрытый <iframe> (у которого свой глобальный контекст), либо городить сложные рентаймы. В Node.js есть модуль vm и контексты, но и они далеки от идеала. Но на горизонте замаячило штатное решение от TC39, ShadowRealm API. От названия веет чем-то мистическим, но по сути это просто способ создать новый глобальный JavaScript-контекст в рамках текущего потока, и исполнить в нём код изолированно от основного.
⏱ Читать статью
#почитать
Джаваскриптеры давно мечтают о безопасной изоляции кода, чтобы можно было выполнить сторонний скрипт или библиотеку в своём песочном замке, без риска повредить глобальные объекты или залезть друг другу в прототипы. Сейчас для этого есть костыли, либо создавать скрытый <iframe> (у которого свой глобальный контекст), либо городить сложные рентаймы. В Node.js есть модуль vm и контексты, но и они далеки от идеала. Но на горизонте замаячило штатное решение от TC39, ShadowRealm API. От названия веет чем-то мистическим, но по сути это просто способ создать новый глобальный JavaScript-контекст в рамках текущего потока, и исполнить в нём код изолированно от основного.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Сервисворкер: когда Workbox уже слишком тяжёлый
#почитать
Сервис‑воркеры сегодня — не экзотика, а рабочий инструмент: offline‑режим, агрессивное кэширование, «живые» обновления и всё такое. Под это уже давно есть отличный, проверенный Workbox, и я сам с ним работал.
Но по мере того, как я таскал SW из проекта в проект, у меня всё чаще возникало ощущение, что мне нужен инструмент с другим профилем: поменьше магии и слоёв абстракции, попроще вход в код и в «как тут всё устроено», конструктор из маленьких плагинов, которые легко прочитать глазами и отладить.
⏱ Читать статью
#почитать
Сервис‑воркеры сегодня — не экзотика, а рабочий инструмент: offline‑режим, агрессивное кэширование, «живые» обновления и всё такое. Под это уже давно есть отличный, проверенный Workbox, и я сам с ним работал.
Но по мере того, как я таскал SW из проекта в проект, у меня всё чаще возникало ощущение, что мне нужен инструмент с другим профилем: поменьше магии и слоёв абстракции, попроще вход в код и в «как тут всё устроено», конструктор из маленьких плагинов, которые легко прочитать глазами и отладить.
Please open Telegram to view this post
VIEW IN TELEGRAM
Компилируем TypeScript в натив: хардкор и мясо
#почитать
Есть большой проект, с кодовой базой в два миллиона строк на C++. Ядро на плюсах, поверх него работают несколько UI: десктопный интерфейс, веб и мобильное приложение. В какой-то момент проект упирается сразу в две проблемы. Первая — лицензионные ограничения: новые версии Qt, на которых мог бы жить десктопный интерфейс, становятся недоступны по санкционным причинам. Вторая — скорость разработки: UI давно хотелось писать быстрее.
Возникает логичный вопрос: что, если взять лучшие, максимально автоматизированные инструменты из веба и перенести их в мир нативных приложений без браузера и лишних прослоек? Ключевая цель — обеспечить возможность вызова C++-код из TypeScript с возвратом результата без промежуточных интерпретаторов.
⏱ Читать статью
#почитать
Есть большой проект, с кодовой базой в два миллиона строк на C++. Ядро на плюсах, поверх него работают несколько UI: десктопный интерфейс, веб и мобильное приложение. В какой-то момент проект упирается сразу в две проблемы. Первая — лицензионные ограничения: новые версии Qt, на которых мог бы жить десктопный интерфейс, становятся недоступны по санкционным причинам. Вторая — скорость разработки: UI давно хотелось писать быстрее.
Возникает логичный вопрос: что, если взять лучшие, максимально автоматизированные инструменты из веба и перенести их в мир нативных приложений без браузера и лишних прослоек? Ключевая цель — обеспечить возможность вызова C++-код из TypeScript с возвратом результата без промежуточных интерпретаторов.
Please open Telegram to view this post
VIEW IN TELEGRAM
Как я писал свой первый веб‑чат на React + FastAPI и всё сломал
#почитать
История о том, как я перешёл от просмотра вакансий к реальному проекту. Сделал простой веб-чат на React + TypeScript и FastAPI, задеплоил на Vercel и Render, и столкнулся со всеми классическими проблемами начинающего разработчика: Git-хаос, CORS-ошибки, забытые коммиты и node_modules в репозитории.
В статье - честный рассказ про мой первый пет-проект: выбор стека, структуру проекта, работу с REST API, настройку деплоя и документацию. Без приукрашиваний, с реальными граблями и ощущением победы, когда всё наконец заработало.
⏱ Читать статью
#почитать
История о том, как я перешёл от просмотра вакансий к реальному проекту. Сделал простой веб-чат на React + TypeScript и FastAPI, задеплоил на Vercel и Render, и столкнулся со всеми классическими проблемами начинающего разработчика: Git-хаос, CORS-ошибки, забытые коммиты и node_modules в репозитории.
В статье - честный рассказ про мой первый пет-проект: выбор стека, структуру проекта, работу с REST API, настройку деплоя и документацию. Без приукрашиваний, с реальными граблями и ощущением победы, когда всё наконец заработало.
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔1
Руководство по архитектуре браузерных песочниц: как работает изоляция JavaScript-кода
#почитать
⏱ Читать статью
#почитать
Последние несколько месяцев я работаю над пет-проектом — интерактивной образовательной платформой для изучения Web Audio API и принципов обработки и синтеза цифрового звука. На платформе пользователи смогут решать задачи, программируя на JavaScript прямо в браузере. Эти программы выполняются в изолированной среде — песочнице, где пользовательский код не может повлиять на работу самой платформы.
Когда я начал реализовывать песочницу для своего проекта, я быстро понял, что это куда сложнее, чем кажется на первый взгляд. Я перепробовал разные подходы и убедился, что тема изоляции кода в браузере далека от очевидной, а большинство материалов в сети рассматривают её лишь поверхностно. Из моих исследований и экспериментов выросла эта статья — подробный разбор того, как устроены песочницы в браузере и какие архитектурные принципы и нюансы безопасности лежат в их основе.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Что происходит внутри Angular и React при решении одних и тех же задач
#почитать
React — популярная библиотека JavaScript, которая заслуженно пользуется популярностью у фронтендеров. А вот Angular часто называют избыточно усложненным и даже отчасти устаревшим. Мне довелось поработать на реальных проектах и с тем, и с другим, каждый раз проходя путь от «да как на этом вообще можно работать» до «человечество не придумало ничего лучше».
⏱ Читать статью
#почитать
React — популярная библиотека JavaScript, которая заслуженно пользуется популярностью у фронтендеров. А вот Angular часто называют избыточно усложненным и даже отчасти устаревшим. Мне довелось поработать на реальных проектах и с тем, и с другим, каждый раз проходя путь от «да как на этом вообще можно работать» до «человечество не придумало ничего лучше».
Please open Telegram to view this post
VIEW IN TELEGRAM