С Vue 3 больше не нужен Vuex?

Vuex — это паттерн управления состоянием и библиотека для приложений на Vue.js. Так зачем от неё отказываться? Дело в том, что новый Vue 3 из коробки предлагает реактивность и новые способы структурирования веб-приложений. Эти изменения настолько глобальны, что можно централизовать управление состоянием без дополнительных инструментов.

Подробнее в статье: https://tprg.ru/m61Q

#фронтенд #vuejs

Сайт, на котором собран 61 PHP-инструмент для анализа кода, управления зависимостями, тестов: https://phpqa.io/

А в этом репозитории ещё свыше ста линтеров, форматтеров и статических анализаторов: https://tprg.ru/lptv

#php #инструменты

Наверняка каждый JavaScript-разработчик использовал метод console.log(‘text’) для отладки кода. Скорее всего, console.warn() и console.error() вам тоже знакомы.

Но есть много других логов, которые могут помочь повысить эффективность отладки кода на JS. В этой статье читайте про 8 самых интересных из них:

https://tprg.ru/Lvha

#javascript #nodejs

Как стать full stack разработчиком

https://tprg.ru/QgnI

По пунктам разобрали необходимые навыки:

— вёрстка и дизайн;
— языки и фреймворки;
— базы данных и DevOps;
— вспомогательные инструменты.

#фронтенд #бэкенд

А вы знали, что JavaScript может отсортировать ваш массив с помощью setTimeout()?

Краткая шпаргалка по TypeScript

Это полноценный базис: типы, параметры, модификаторы доступа, примеры классов, подсказки по установке и ссылка на документацию.

https://tprg.ru/kO7x

#typescript

Оптимизация CLS для списков с бесконечным скроллом

Пагинация и кнопки вроде «Загрузить ещё» порядком надоели, и многие сайты переходят на бесконечную подгрузку элементов. Чтобы избежать при этом сдвига макета, нужно сделать следующее:

— зарезервировать место перед подгрузкой элементов;
— удалить футер или любые DOM-элементы после списка;
— использовать prefetch для предварительной загрузки данных вне области браузера.

Планируете работать с бесконечной прокруткой? Тогда вам будет полезна эта статья:

https://tprg.ru/StXG

#фронтенд #дизайн #ux

CSS в реальной жизни

«Невозможный» чекбокс — это креативный проект, в котором вредный мишка возвращает переключатель в исходное положение. Автор использовал React + GSAP и не поленился добавить звуковые эффекты. Посмотреть код и пощёлкать со звуком можно в сервисе CodePen:

https://codepen.io/jh3y/pen/LYNZwGm

#фронтенд

Как называть переменные в JavaScript

Автор рассказывает в своей статье о том, что не позволяет язык и как подобрать названия, которые помогут вам и другим разработчикам легко разобраться в коде. Статья включила такие разделы:

— Чувствительность к регистру
— Самодокументируемый код
— Соглашение об именовании булевых переменных
— Соглашение об именовании констант

Подробнее: https://tprg.ru/iYtm

#javascript

Вы можете 15 лет учиться, но потом появится человек, который за 2 месяца выучит Vue.js, напишет приложение про котят и будет зарабатывать больше вас.

Встречайте TypeScript 4.0, который порадовал такими обновлениями:

— Добавлены вариативные типы кортежей.
— Появилась поддержка составных операторов логического присваивания и меток для элементов кортежей.
— Операнды для delete должны быть опциональными.
— Добавлен вывод типов для свойств класса из конструктора.
— Теперь для catch можно указывать тип unknown.
— Ускорена работа инкрементальной сборки.

Кроме того, сайт проекта был полностью изменён, и если у вас возникнут вопросы, комментарии или предложения по его работе, вы можете сообщить об этом команде разработчиков.

Подробнее обо всех обновлениях в TypeScript 4.0 можно почитать здесь:

https://tprg.ru/7XGY

#typescript

Google экспериментирует со скрытием полного URL

Эксперименты касаются браузерной строки. Разработчики полагают, что такое нововведение позволит пользователям лучше определять фишинговые сайты визуально.

Чтобы протестировать новую функцию, Google будет включать её у случайных пользователей. У участников эксперимента будет два способа просмотреть полный URL-адрес:

— наведя курсор на адрес, чтобы развернуть его;
— щёлкнув правой кнопкой мыши на URL-адрес и выбрав «Всегда показывать полные URL-адреса в контекстном меню».

Подробнее: https://tprg.ru/rnLE

#google

Автор статьи подробно рассказывает, как анимировать адресную строку браузера с помощью JavaScript и эмодзи:

https://tprg.ru/YOzr

Не то чтоб это было полезно, но точно позволит скрасить досуг.

#кек #javascript

Как себя чувствуют веб-разработчики после новости о прекращении Microsoft поддержки IE в 2021 году

Объектно-ориентированный CSS

Это один из подходов к организации CSS-кода, который характеризуется разделением структуры элемента и его оформлением. Из статьи вы узнаете, зачем вообще организовывать CSS-код и каковы преимущества такого подхода:

https://tprg.ru/5ds1

#фронтенд #css

Библиотека анимации на чистом CSS

Здесь вы найдёте демонстрацию различных вариантов появления, исчезновения, поворота элементов и анимацию для привлечения внимания:

https://tprg.ru/FDB1

Добавьте файлы из GitHub-репозитория в проект и используйте в HTML нужный класс: <div class="u--fadeIn" >...</div>

#css #фронтенд

Когда фронтенд готов раньше бэка

Состоялся релиз Mozilla Firefox 80

Что новенького:

— Появилась возможность блокировать и разблокировать сетевые запросы с помощью команд :block и :unblock.
— Ускорена загрузка и обработка списка вредоносных и проблемных дополнений.
— Добавлена поддержка синтаксиса export * as namespace из ECMAScript 2021.
— Директива fullscreen, применённая к <iframe>, не работала, если отсутствовал атрибут allowfullscreen. Исправлено.
— Свойства Window.open() outerHeight и outerWidth больше не доступны веб-содержимому.
— Разрешены атомарные операции для неразделяемой памяти.
— При назначении класса элементу в Инспекторе пользователю будут предложены варианты автодополнения.
— Добавлено больше экспериментальных настроек (для их показа нужно включить browser.preferences.experimental).
— Добавлена поддержка RTX и Transport-cc.

Больше обновлений по ссылке: https://tprg.ru/yUfl

#firefox

В процессе загрузки веб-страницы генерируется два события:

— load запускается, когда все исходные ресурсы готовы, включая скрипты, изображения и CSS;
— DOMContentLoaded запускается, когда HTML-документ полностью загружен без ожидания CSS, изображений и фреймов.

Но автор статьи уверен, что оба события не очень. Чтобы докопаться до истины, он создал интерактивную демо-панель для управления загрузкой страницы с помощью ряда параметров. Измените время, необходимое для загрузки CSS, JS или изображения, и посмотрите, что получится:

https://tprg.ru/yfwH

#фронтенд #html #css