Оптимизация SVG для веба

Подробное руководство по оптимизации векторной графики, из которого вы узнаете, что можно удалить из SVG-файла, чтобы он занимал меньше места.

Читать: https://css-irl.info/optimising-svgs-for-the-web/

#svg #performance

​Создание HTML5 игр с помощь Phaser 3 и JavaScript

Плейлист из 11 видео, посвященный созданию небольших игр на JS-фреймворке Phaser 3.

Что входит в курс:

- установка редактора и его изучение
- работа со спрайтами
- реализация основных игровых механик: движение, анимация, взаимодействие объектов
- структурирование проекта, архитектура игры
- подсчет очков

Смотреть: https://www.youtube.com/playlist?list=PLNtbY2SklBywbsC50hNS7IFn5iurwX7l3

#video #gamedev #frameworks #phaser

​Введение в Web Vitals: новые метрики от Google

Основываясь на опыте миллионов сайтов, Google представляет новую инициативу по оценке пользовательского опыта - Web Vitals - которая включает в себя три важные метрики:

👉 LCP (Largest Contenful Paint) - отрисовка самой большой части видимого контента - позволяет измерить воспринимаемую скорость загрузки.
👉 FID (First Input Delay) - задержка первого ввода - оценивает опыт взаимодействия со страницей
👉 CLS (Cumulative Layout Shift) - характеризует стабильность макета при загрузке

Очень скоро все основные инструменты аналитики Google будут обновлены с учетом новых показателей.

Подробнее в Chromium Blog: https://blog.chromium.org/2020/05/introducing-web-vitals-essential-metrics.html

​front-end vs back-end vs client-side vs server-side

Статья будет полезна новичкам, которые еще плохо ориентируются в структуре современного веба и с трудом отличают frontend от backend. На понятных примерах описывается, чем занимается сервер, а чем клиент, и в чем разница между клиентским и серверным рендерингом.

Читать: https://chunksofco.de/front-end-vs-back-end-vs-client-side-vs-server-side-7a04b3ec8764

#beginners #frontend #backend

​Redux против React Context. Что выбрать?

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

Читать: https://dev.to/ibrahima92/redux-vs-react-context-which-one-should-you-choose-2hhh

#react #redux #frameworks

​​print(f"Hello, {username}")

Мы во ВКонтакте проводим конкурс для самых креативных из вас на лучший мем для статьи с нашего сайта. Правила простые:

1. Вы берете произвольную статью с сайта, не утратившую свою актуальность
2. Делаете для нее мем.
3. Отправляете в предложенные новости ссылку и вашу картинку
4. Мы оформляем и публикуем.

Автор картинки с публикацией с наибольшим охватом среди всех нам отправленных получит 10 тысяч рублей. Поехали: https://vk.com/proglib

Срок окончания конкурса — 7 июля 2020 года.

​Правильный ответ: Компоновщик

Паттерн Компоновщик (Composite) позволяет работать с наборами элементов как будто это отдельные элементы. Например, с коллекцией DOM-узлов как с одним узлом.

Это очень полезный паттерн для веб-разработки, в которой часто приходится иметь дело с древовидными структурами. Современный компонентный подход, использующийся в React, Vue и других фреймворках и библиотеках, также основан на шаблоне Компоновщик.

Узнать больше о паттерне Компоновщик в JavaScript: https://nuancesprog.ru/p/6282/

#designpatterns #bestpractices

​​Собрали все самое актуальное по Front-End в одной online программе с наставником, чтобы ты не терял время, а быстрее устроился на работу в IT. У нас ты изучишь востребованный стек технологий и получишь опыт коммерческой разработки в проекте. Оплата только после трудоустройства. А если не найдешь работу, то обучение за наш счет.

Пройти тестовое задание 🙋‍♂️👉 https://clck.ru/Nstpn

👇Что тебя ждет:
1. Подготовка с личным ментором online по индивидуальной программе за 7 месяцев;
2. Жесткий контроль знаний на каждом этапе
3. Обучение востребованному на рынке стеку технологий: HTML/CSS/JS, React + Redux;
4. Отработка знаний в настоящем бизнес проекте, который дает опыт и строчку для резюме;
5. Общение с одногруппниками и студентами-разработчиками других потоков групповом чате slack (уже более 1500 участников)
6. Быстрое карьерное и финансовое развитие за счет программы поддержки на 2 года: митапы, мастер-классы, закрытые лекции со спикерами и offline интенсивы;
7. Гарантированное трудоустройство и первая зарплата от 100 000 рублей.

Требования к кандидату:
• Обучение минимум 25 часов в неделю
• Проживание или готовность к переезду в Москву для трудоустройства

​Прогрессивные веб-приложения в 2020

Большой обзор современного состояния PWA на разных платформах, реализованные возможности и ожидания.

Читать: https://habr.com/ru/post/482772/

#pwa

Канал без флуда и огромного количества надоевших мемов. Ребята из «ИТ-ГРАД» публикуют только полезные материалы:
🌩 Что нового в VMware Cloud Director 10.1
🌩 Шифровальщик нападает на госсектор и медицинские учреждения
🌩 В Австралии зафиксирована рекордно высокая скорость интернета
🌩 Как стать картошкой в Zoom или Skype
🌩 Чипирование: пока одни только обещают, другие делают

Присоединяйтесь, если вам близки технологии, их история и развитие, и регулярно получайте полезные материалы от команды облачного провайдера → https://yangx.top/iaasblog

​Веб-платформа: большое руководство

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

Основное внимание уделено ошибкам совместимости в браузерах, разбор которых приведет читателя к самым азам веба.

Читать обязательно: https://wpc.guide/

#web #browser

​Современное тестирование React-приложений

Серия статей, посвященная лучшим практикам тестирования в React:

1️⃣ Modern React testing, part 1: best practices
2️⃣ Modern React testing, part 2: Jest and Enzyme
3️⃣ Modern React testing, part 3: Jest and React Testing Library

#testing #react

​Нужно ли хранить Google шрифты на своем домене?

В статье очень подробно описывается, как работают шрифты Google для разных браузеров и систем и как можно улучшить их производительность.

Несколько советов:
👉 Предварительное подключение к домену fonts.gstatic.com с помощью хинта rel=preconnect
👉 Включение параметра font-display: swap для избежания блокировки шрифта до загрузки

А также, стоит ли хостить шрифты на своем домене и как правильно это делать.

Читать: https://www.tunetheweb.com/blog/should-you-self-host-google-fonts/

🚀 Вашей команде разработки ПО не хватает крупных проектов?

ИЦ Ай-Теко предлагает компаниям и отдельным командам сотрудничество для совместного выполнения задач от крупнейших заказчиков страны.

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

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

🤝 Присоединяйтесь к нам: https://is.gd/OIKwpB

Правильный ответ: 3 из приведенных реализаций некорректны

Реализация #1. Цикл for-in перебирает индексы массива, а не значения.
Реализация #6. Оператор in также работает с индексами (ключами), а не со значениями
Реализация #8. Результатом работы метода findIndex является порядковый индекс элемента, который может быть равен 0. Поэтому некорректно преобразовывать это значение в булево.

Многие операции в JS можно выполнить несколькими способами. Обычно мы выбираем самый понятный, самый короткий или самый производительный из них.

25 полезных сокращений, которые пригодятся любому разработчику: https://www.sitepoint.com/shorthand-javascript-techniques/

#javascript #core #bestpractices

13 способов вертикального центрирования в 2020

1. Абсолютное позиционирование + margin: auto
2. top: 50% + translateY(-50%)
3. Таблицы + vertical-align: middle
4. Использование псевдоэлемента с height: 100% и vertical-align: middle
5. margin: auto внутри flex-контейнера
6. Использование псевдоэлементов с flex-grow: 1 внутри flex-контейнера
7. Выравнивание по осям внутри flex-контейнера (align-items: center или justify-content: center)
8. Выравнивание потомка flex-контейнера (align-self: center)
9. Выравнивание по осям внутри grid-контейнера
10. Выравнивание потомка grid-контейнера
11. Использование псевдоэлементов внутри grid-контейнера + указание размеров рядов в fr
12. Явное указание занимаемого ряда для потомка grid-контейнера (grid-row: 2/3)
13. margin: auto внутри grid-контейнера

Источник: https://www.youtube.com/watch?v=ngT6ZiInXDY

#css #video