JavaScript *

Всем привет? Я Данила, фронтенд разработчик в ПСБ. Angular я начал изучать не так давно, а поэтому часто встречаются сложные темы, которые непонятны и их нужно разобрать. Одной из таких тем и стало внедрение зависимостей (DI). Что ж, давайте разбираться :)

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

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

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

Только что вышла IntelliJ IDEA 2023.2. В этом релизе в IDE появилась куча интересных фичей и важных улучшений.

Вы можете скачать последнюю сборку с официального сайта, или из бесплатного приложения Toolbox, или из snap-пакетов для Ubuntu.

Этот релиз IntelliJ IDEA 2023.2 представляет вам AI-ассистента, вооруженного набором инструментов машинного обучения. IntelliJ Profiler показывает подсказки в редакторе, делая профилирование более интуитивным и иформативным. Еще, в этом релизе появилась интеграция с GitLab.

В том посте мы пробежимся по всем основным фичам IntelliJ IDEA 2023.2. В отличие от официального анонса, вся европейская политкорректность выкинута на свалку, автор перевода не видит никакой ценности в соблюдении повесточки.

Кроме того, в этот четверг в Питере будет встреча Javawatch, посвященная Java 21. Я прочитаю мини-доклад минут на 30 о новых фичах, и потом мы сможем все вместе собраться и за кружкой пива это обсудить. Анонс события в телеге, обсуждение в чате. Я бывший PMM в JetBrains Big Data и тимлид в Remote Development/Projector, а сейчас работаю над российским дистрибутивом Java - Axiom JDK.

В данной статье продемонстрирован способ реализации “параметризованной” css анимации React компонента с помощью styled components. Параметризованная потому что css анимация описывается через параметры, которые динамически рассчитываются на основе пропсов и состояний компонента при его рендеринге.

В 2010 году Сами Камкар написал скрипт, который позволял идентифицировать пользователя сайта, если тот ранее посещал его. Решение было названо эверкукой (суперкукой). Данная статья рассматривает механизм восстановления куки и отвечает на вопрос работает ли это в 2023 году. В конце статьи приводится реализация части evercookie для Angular.

В TypeScript 5.2 появится новое ключевое слово 'using', которое можно будет использовать для утилизации чего-либо с помощью функции Symbol.dispose, когда оно покидает область видимости.

Веб — богатая экосистема с массой мощных API, которая только пополняется. В нашем распоряжении уже знакомые инструменты — Canvas или Intersection Observer, но в 2023 мы также имеем Web MIDI API, Speech Recognition и даже такие экзотические штуки, как геймпады и VR прямо в браузере. Естественно, эти API сложно использовать в Angular из-за разницы парадигм нативного JavaScript и декларативного Angular. Вот тут и появляемся мы!

Как улучшить работу анимаций в React Native?

Привет! Меня зовут Евгений Прокопьев, я старший инженер-разработчик в СберМаркете. На React Native я пишу уже больше 6 лет и очень люблю создавать красивые анимации. Я уже делал обзор на 6 инструментов для анимаций в RN, а в этот раз хочу углубиться в работу Animated и Reanimated под капотом. Это поможет вам более осознанно выбирать инструмент под ваши задачи и умело лавировать грабли, на которые можно наступить, работая с RN.

Hello world!

Zustand (читается как "цуштанд", что переводится с немецкого как "состояние") — это, на мой взгляд, один из лучших на сегодняшний день инструментов для управления состоянием приложений, написанных на React.

В этой статье я немного расскажу о том, как он работает.

Давайте начнем с примера использования zustand для реализации функционала отображения/скрытия модального окна.

Статья-туториал для тех, кто хочет узнать, как из заголовка получается «6» методом рекурсивного спуска. Начнём с самого простого и дойдём до вычисления -1.82 или около того из строки -2.1+ .355 / (cos(pi % 3) + sin(0.311)).

Конечно, этот метод неоднократно описан на Хабре и зачитан каждому айтишному первокурснику. В своей версии я хочу изложить его очень просто, подробно и поэтапно, элементарной практикой на JavaScript. Ссылки на рабочий код — в самом низу.

В идеальном мире автотесты должны проходить быстро, чтобы их хотелось запускать как локально, так и в CI. Но почему в большинстве проектов запуск тестов отнимает критически много времени?

– Зачастую причиной является неправильная работа с асинхронными операциями. В статье разберемся, как Jest помогает писать молниеносные тесты, и рассмотрим ключевые сценарии.

JP Camara, главный инженер Wealthbox, в своём блоге поделился интересным опытом ускорения TanStack Table — новой версии React-библиотеки для создания функциональных таблиц — аж до 10 мс. Делимся с вами переводом его статьи.

В своём предыдущем посте я попытался объяснить, что такое "инверсия контроля" и в каких случаях использование внедрения зависимостей в JS (ES6+) становится оправданным (если у вас в кодовой базе десятки npm-пакетов, в каждом из которых сотни, а то и тысячи es6-модулей). В этом посте я шаг за шагом покажу, как можно построить собственный контейнер объектов, который будет загружать исходный код es6-модулей, создавать нужные зависимости и вставлять их в нужные места. Сразу предупреждаю, что для упрощения изложения в демо-коде будут использоваться определённые допущения, связанные с генерацией объектов. Целью статьи является демонстрация собственно технологии внедрения зависимости, а не готового "всепогодного" решения. По итогу у вас должно сложиться понимание, как в ES6+ можно сделать свой контейнер объектов, если он вам вдруг по какой-то причине понадобится.

Решим реальную практическую задачу, с которой мне пришлось столкнуться на моем проекте React/TypeScript.

Задача

У нас есть массив конкретных строковых значений, таких как "first", "second", "third", "fourth" и "fifth". Необходимо отобразить их на странице, т.е как-то использовать, а также убедиться, чтобы эти данные были строго типизированы и TypeScript нам выдавал всплывающие подсказки при их использовании в коде.

React 18 представил конкурентные (concurrent) возможности, которые радикально меняют способ рендеринга приложений. В этой статье мы рассмотрим, как эти возможности улучшают производительность приложения.

Начнем с повторения основ "долгих (долго выполняющихся) задач" (long tasks) и соответствующих метрик производительности.

Привет! Сегодня мы рассмотрим относительно новую библиотеку для интеграции с web3 - viem. Мы постараемся понять, способна ли эта библиотека заменить ethers и какие преимущества она предлагает.