Как называть переменные в 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

Типичный JS

Быстрая загрузка с предварительным просмотром изображений

Прогрессивная загрузка работает по такому принципу: сперва создаётся изображение плохого качества и постепенно заменяется качественным, которое и предполагалось. Грубо говоря, набросок, а только затем реальное содержимое.

Такой подход ускоряет загрузку страниц, и не нужно создавать дополнительные файлы — достаточно использовать Progressive JPEG и Ajax-запросы. Подробнее о магии отложенной загрузки читайте в статье:

https://tprg.ru/Zhao

#фронтенд

100 самых популярных проектов CodePen

В сотню «залайканных» за 2019 год вошли как прикольные анимации, так и готовые решения вроде Excel-таблицы, генератора паролей и списка дел. Весь ТОП-100 собрался здесь:

https://tprg.ru/B3Tm

А вы используете готовые проекты с CodePen? Как?

#фронтенд

Запускаем PHP 8 с JIT через Docker за 5 минут

Близится релиз PHP 8, и если вам не терпится протестировать свой код в beta-версии, а заодно и пощупать JIT, загляните в статью:

https://tprg.ru/iNf4

Автор описывает процесс, начиная сборкой образа и заканчивая запуском бенча.

#php #бэкенд #devops

Типичный CSS

​Как устроен интернет

Эта исчерпывающая статья нацелена не только на веб-разработчиков, но и на «нетехническую» аудиторию.

Сперва объясняются основные концепции, которые перетекают в более серьёзную информацию и завершаются погружением в DNSSEC. Статья состоит из семи разделов:

— Протокол связи
— Выявление аномалий
— Сетевая топология
— Маршрутизация сигнала
— Ретрансляция сигнала
— Интернет-слои
— История интернета

https://tprg.ru/hqSn

#интернет

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

Браузеры обрабатывают страницу попиксельно, применяя заданные эффекты, и отрисовывают результат поверх оригинала. Применяя несколько фильтров, можно достигать различных эффектов, так как они накладываются друг на друга.

Но помните: чем больше фильтров, тем больше времени требуется браузеру, чтобы отрисовать страницу.

Из этой статьи вы узнаете, какими бывают фильтры и как их применять:

https://tprg.ru/sEFr

#css #фронтенд

В JS без божьей помощи никак

​Форматирование чисел в JavaScript

Для этого чаще всего используют Number.prototype.toFixed(), стороннюю библиотеку или вручную обрабатывают число. Но современные браузеры поддерживают Number.prototype.toLocaleString() и Intl.NumberFormat, с помощью которых можно преобразовать число, добавить знак валюты, отформатировать проценты и многое другое.

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

#javascript

​Логирование в Kubernetes: как собирать, хранить, парсить и обрабатывать логи

Автор статьи разбирает основы логирования в Docker и Kubernetes, а затем рассматривает Grafana Loki и стек EFK (Elasticsearch + Fluent Bit + Kibana) — инструменты, которые можно смело использовать на продакшене:

https://tprg.ru/8HlD

#devops