JavaScript заметки

Гайд по микрофронтендам на single-spa, или Как уже наконец-то уйти от монолита во фронтенде Наш опыт я постарался упаковать в пошаговый гайд – надеюсь, этот материал поможет тем, кто только начинает свой путь в мире микрофронтендов. По ходу статьи мы с вами вместе пройдём от полного незнания до понимания принципов и ответа на заветный вопрос — нужно ли всё это вам. На практике мы сделаем небольшую демонстрацию, которую вы сможете использовать в своём проекте. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Когда я только начинал во фронтенде — тонул в море туториалов, апдейтов и «новых подходов». Каждую неделю — новая библиотека, новый формат, новый способ «писать кнопки лучше». 😅 В какой-то момент я понял: хочется просто понимать, что реально важно, без шумного инфо-потока. Так и появился мой канал — «Плавный, как CSS-анимация». Я собираю туда всё, что действительно помогает фронтендерам: ⚡ свежие обновления из мира web 💡 короткие разборы и фичи, которые стоит знать 🧩 примеры и идеи, которые можно применить прямо в коде 👨‍💻 иногда делюсь личным опытом и практими, которые применяю Без воды и бесполезных демок — просто, по делу и с душой. 👇 Если ты тоже хочешь расти как frontend-разработчик и не теряться в потоке новостей — загляни: @loveefrontend

Использование async/await для асинхронных операций async/await позволяет более чисто и легко работать с асинхронными операциями, такими как HTTP-запросы. #полезное

Как мы заинжектили кнопку на Behance Дело было год назад, не помню что я там забыл, но мне определенно хотелось скачать какую‑то картинку с behance.net, но как вы знаете — опции скачать там нет. Зная, как работает веб — я без проблем забрал нужное изображение найдя ссылку в HTML коде, но не все готовы так заморачиваться, поэтому я решил автоматизировать этот процесс. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Группировка данных с помощью reduce Метод reduce применяется для агрегации значений в массиве. В этом примере, мы используем reduce для вычисления суммы чисел. #полезное

JavaScript. WebRTC. Соединение браузеров напрямую без сервера, peer-to-peer WebRTC позволяет браузерам обмениваться информацией напрямую без сервера. Можно передавать видео, звук и данные. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Работа с Web-сокетами (WebSockets) Этот код демонстрирует, как устанавливать WebSockets-соединение с сервером, отправлять и получать сообщения в режиме реального времени. WebSockets широко используются для создания интерактивных и мгновенных веб-приложений. #полезное

Next JS и Nginx Решил сделать небольшую инструкцию как запустить проект Next JS на сервере. Я использовал Ubuntu 22.04 и Nginx. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Работа с регулярными выражениями (RegExp) Регулярные выражения позволяют проверять и извлекать текст, соответствующий определенным шаблонам. #полезное

Fusor vs React Моя работа состоит в написании кода на React. Несмотря на то, что мне нравится React, при разработке на нем я столкнулся с некоторыми его недостатками. В связи с этим, я решил создать свою библиотеку, Fusor, чтобы исправить эти недостатки и вот что из этого получилось. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Манипуляция стилями CSS Этот код позволяет изменять стили элементов страницы динамически с использованием JavaScript. #полезное

Service Workers против медленного интернета: Кэширование и улучшение UX Плохой интернет, когда нужно загрузить картинку весом как чугунный мост. В эпоху очень быстрого интернета мы стали забывать о том, что в некоторых локациях нашего мира нет хорошей сети (например, когда вы едете в поезде по нашей необъятной стране). Эту проблему довольно хорошо решают Service Workers, о которых я вам сейчас расскажу. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Работа с Promise Этот код создает и использует промис для асинхронной обработки данных и управления успешными и неуспешными результатами. #полезное

Интересные трюки JS Небольшая подборка нестандартных вариантов использования HTML/JS/CSS, где каждый найдёт что-то интересное. Если информация окажется полезной, будем собирать эти хаки на постоянной основе и публиковать по мере накопления. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Symbiote.js VS LitElement Мотивация разработчиков библиотек и фреймворков для фронтенда может быть разной. И если вы, являясь таким разработчиком, хотите работать не “в стол” а с расчетом на какое-то признание и пользу для индустрии, вы должны четко понимать, что именно и зачем вы делаете. Если вы хотите сэкономить пользователям пару килобайт трафика или пару миллисекунд отклика - вам будет очень тяжело доказать миру, что ради этого стоит выбрать именно ваше решение. Люди выберут размер комьюнити, богатую экосистему и крупного вендора. Ваш набор аргументов должен быть достаточно веским, чтобы обратить на себя внимание. Сейчас я попытаюсь доказать, что при наличии такого решения как LitElement от гиганта индустрии Google, имеет смысл посмотреть в сторону Symbiote.js. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Использование JavaScript Proxy для реализации валидации данных Proxy позволяет перехватывать доступ к свойствам объекта и выполнять на них дополнительные действия, такие как валидация данных. #полезное

Next.js App Router. Опыт использования. Путь в будущее или поворот не туда Два года назад команда Next.js представила новый подход к роутингу, который должен был стать заменой так называемому Pages Router, вместе с тем добавив ряд принципиально нового функционала. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Использование JavaScript WebGL для создания 3D-графики в браузере WebGL - это JavaScript API для рендеринга интерактивной 3D-графики в браузере без использования сторонних плагинов. #полезное

React-lens — эффективное управление состоянием в приложениях в ReactJs Во многих разрабатываемых программах мы сталкиваемся с необходимостью организации работы с данными. Такие задачи могут быть самыми разными: хранение, актуализация, масштабирование и т. п. А ещё приходится реализовывать взаимодействие различных библиотек. Рассмотрим один из способов решения этих проблем при помощи React Lens. Как бы мы не хотели, всегда будут ограничения в вычислительных мощностях или человеческих ресурсах. Большую роль оказывает необходимость развивать и расширять свой продукт. Потому баланс задач по организации состояния может быть также разным: где-то нужно сделать упор на производительность, где-то на масштабируемость и т. д. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Использование JavaScript Web Cryptography API для выполнения криптографических операций Web Cryptography API предоставляет возможность выполнения криптографических операций, таких как генерация ключей, шифрование и расшифрование данных, непосредственно в браузере. #полезное