JavaScript заметки

Как мы создаём Squadus. Реализуем «прыжок к сообщению» в мобильной версии Весной этого года мы выпустили Squadus — цифровое рабочее пространство для компаний любого масштаба. Решение позволяет общаться в чатах, проводить конференции, совместно работать над документами и автоматизировать типовые действия с помощью ботов. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Работа с локализацией: перевод и форматирование текста на разных языках Работа с локализацией является важной частью разработки веб-приложений, особенно при создании мультиязычных интерфейсов. Для перевода текста на разные языки в JavaScript можно использовать объект Intl, который предоставляет функциональность для локализации. С помощью объекта Intl можно форматировать числа, даты, валюты и другие типы данных в соответствии с правилами языка и региона. В данном примере мы создаем объект Intl с помощью конструктора new Intl.NumberFormat(). Мы указываем язык и регион (в данном случае 'en-US' для английского языка в США) и опции форматирования (в данном случае стиль 'currency' и валюту 'USD'). Затем мы используем метод format() объекта Intl для форматирования числа amount в соответствии с указанными опциями. В данном примере мы форматируем число в денежный формат. #полезное

Один компонент, 20+ фич, A/B-тесты: Поможет ли машина состояний? Сталкивались ли вы с проблемой возникновения багов из-за пересечения включенных фичей в приложении? Или, возможно, была необходимость одновременно проводить большое число A/B-экспериментов в одном компоненте?  #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Работа с графикой: использование библиотеки Canvas для рисования и визуализации данных Работа с графикой является важной частью разработки веб-приложений, особенно при рисовании и визуализации данных. Для этого разработчики часто используют библиотеку Canvas, которая предоставляет мощные инструменты для создания интерактивных и красочных графических элементов. Canvas - это элемент HTML5, который позволяет рисовать графику с помощью JavaScript. Он предоставляет API для создания и управления контекстом рисования, на котором можно рисовать линии, фигуры, текст и многое другое. В данном примере мы получаем контекст рисования Canvas с помощью метода getContext(). Затем мы используем методы контекста, такие как fillRect() для рисования прямоугольника, stroke() для рисования линии и fillText() для рисования текста. Мы также можем устанавливать различные свойства контекста, такие как цвет заливки (fillStyle), цвет обводки (strokeStyle), толщина линии (lineWidth) и шрифт (font). #полезное

Увеличиваем свою производительность в WebStorm / PhpStorm c помощью шаблонов В этой статье я хотел бы рассказать вам, как можно сократить рутинную работу написания кода, используя шаблоны для создания файлов. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Ищем фронта. Релокейт, удалёнка, платим много! Специально для Вас, собираем топовые вакансии для фронтов на канале @job_frontend. Подпишись чтобы не упустить свой шанс получить лучший оффер!

Манипуляция с элементами страницы: создание, удаление и изменение HTML-элементов Манипуляция с элементами страницы - это важная часть разработки веб-приложений, которая позволяет создавать, удалять и изменять HTML-элементы динамически с помощью JavaScript. Это особенно полезно при обновлении содержимого страницы без перезагрузки. В данном примере мы создаем новый элемент div с текстом "Новый элемент" и классом "my-class". Затем мы добавляем этот элемент в конец body документа с помощью метода appendChild(). Мы также изменяем содержимое элемента с помощью свойства textContent и стилизуем его, устанавливая значение свойства backgroundColor. Через 3 секунды мы удаляем элемент с помощью метода remove(). Это демонстрирует возможность удаления элементов из документа. Таким образом, манипуляция с элементами страницы позволяет нам динамически создавать, изменять и удалять HTML-элементы, что открывает широкие возможности для создания интерактивных и динамических веб-приложений. #полезное

React + Three.js. Создаём собственный 3D шутер В современной веб-разработке границы между классическими и веб-приложениями стираются с каждым днём. Сегодня мы можем создавать не только интерактивные сайты, но и полноценные игры прямо в браузере. Одним из инструментов, который делает это возможным, является библиотека React Three Fiber - мощное средство для создания 3D-графики на основе Three.js с использованием технологии React. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

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

2d движок для игр Javascript Game Engine Любая игра представляет собой набор файлов: изображений, звуков и.т.д. и программы, которая эти файлы воспроизводит по заданным алгоритмам. Звуки проигрываются, а изображения обрезаются в нужных пропорциях и воспроизводятся на экране в нужном порядке, как в кино, или мультипликации с той лишь разницей, что тут процессом можно управлять, используя прикладные интерфейсы — клавиатуру, мышь, джойстик, экран мобильного телефона и т.п. Управлять, не значит только переключать сцены, а управлять актерами, или даже группами актеров, влияя на сюжет или события, насколько это позволяет задумка автора. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Использование JavaScript SIMD для параллельных вычислений с векторами SIMD (Single Instruction, Multiple Data) позволяет параллельно выполнять вычисления с векторами данных. #полезное

Что такое react-afc react-afc - библиотека для более простого (чем в простом react) уменьшения количества ненужных ререндеров дочерних компонентов. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Использование JavaScript Intl API для локализации Intl API предоставляет возможности для форматирования чисел, дат и строк в соответствии с локалью пользователя. #полезное

Возможности контроля в JavaScript: методы AbortSignal.timeout() и AbortSignal.any() Представляем два малоизвестных, но очень полезных метода управления асинхронными задачами: AbortSignal.timeout() и AbortSignal.any(). Оба эти метода поддерживаются основными веб-браузерами и позволяют корректно прервать асинхронные операции. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

.forEach() Метод forEach() используется для обхода элементов коллекции Set. Обход происходит в порядке добавления значений в коллекцию от старых к новым. Метод работает идентично одноимённому методу массива. #множества #forEach Подробнее

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

Когда не стоит использовать метод find() в JavaScript Немногие знают истинную ценность Map. Между тем, применение этой структуры данных позволяет повысить производительность и улучшить пользовательский опыт. Особенно она полезна при работе со сложными структурами данных или при необходимости получить быстрый доступ к данным. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

Использование JavaScript Intl API для локализации Intl API предоставляет возможности для форматирования чисел, дат и строк в соответствии с локалью пользователя. #полезное

Движок JavaScript, JIT-компилятор, стек, куча, память, примитивы, ссылки и сборка мусора Как функционирует JIT-компилятор? Что такое стек и куча памяти? В чем отличие примитивных типов от ссылочных? Представляем общий краткий гайд по основам JavaScript, в котором поговорим о том, как работает один из самых популярных языков программирования “под капотом”. #статья ❤️ Прожимай реакции, если нравится такой формат 👉 Читать статью

🚀 Frontend для всех! Ищешь место, где можно учиться, общаться и прокачивать свои навыки в веб-разработке? Тогда тебе сюда: 👥 Reactify | Frontend Разработка — бесплатные курсы, практические проекты и поддержка единомышленников. Теория, примеры кода и свежие IT-новости — всё для твоего роста. 💼 Frontend | Собеседования — разбираем реальные интервью, готовимся к вопросам и делимся полезными материалами. Здесь собрана база знаний для уверенности на любом собеседовании.

В каждом канале тебя ждёт Гайд по Frontend-разработке: подробный Roadmap для изучения, топ вопросов по проектам и soft skills, список технических вопросов, лайвкодинг-задачи и советы по созданию резюме, которое привлечет внимание работодателей. Всё, чтобы уверенно двигаться к своей цели!

Учись. Общайся. Развивайся. Стань частью IT-сообщества! 💪