​Нужно ли хранить 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

Шпаргалка по БЭМ

Компоненты, которые приходится писать каждому верстальщику, разложенные на составляющие согласно БЭМ-методологии.

Смотреть: https://prglb.ru/3s3jq

#css #html #bem

​​Фильм Microsoft Build 2020: главные новинки IT-индустрии

Рассказ и видео о последних новинках от компании Microsoft. Суперкомпьютеры, безопасное машинное обучение, Learn TV, Fluid Framework и многое другое – будьте в курсе инноваций!

https://proglib.io/sh/RSsI59cBpz

SvelteJS

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

Урок 1. Что такое SvelteJS (отличие от React, Angular, Vue)
Урок 2. Как работает SvelteJS
Урок 3. Переменные и стили в SvelteJS
Урок 4. Как добавлять события в SvelteJS
Урок 5. Реактивность в SvelteJS
Урок 6. Как SvelteJS работает с формами (bind)
Урок 7. Как работают условные операторы в SvelteJS
Урок 8. Как создавать компоненты в SvelteJS
Урок 9. Как работают циклы в SvelteJS. Зачем нужен key

Смотреть: https://prglb.ru/3y75m

#video #svelte #frameworks

Большое руководство по iframes

iframe - это довольно мощный инструмент, который дает много возможностей разработчику, но и требует большой ответственности. Статья рассказывает о преимуществах фреймов (например, удобное управление фокусом), недостатках и лучших практиках работы с ними.

Читать: https://prglb.ru/4tcp0

#html #iframe

Как сделать ваш HTML отзывчивым, добавив одну строку кода на CSS

Используем CSS Grid для создания крутой сетки изображений, которая изменяет количество столбцов в зависимости от ширины экрана или окна браузера. И все это всего лишь одной строчкой CSS-кода! 😲

Читать: https://prglb.ru/5mbd1

#css #grid #layout

Создание дизайн-системы: чеклист

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

Ссылка: https://prglb.ru/45ex6

#design #checklist

🙇Любите пораскинуть мозгами? 20 и 21 июня образовательный портал GeekBrains проведет онлайн-конкурс по математике и информатике. Решите задачи, войдите в десятку лучших и выиграйте бесплатное обучение IT-профессиям на выбор: веб-программированию, системному администрированию, разработке игр и др.

👨‍🏫 Участвуют все желающие, достаточно школьных знаний. А задания с выбором ответа и без.

🙋‍♂️ Выглядит жизненно: как будто сдаёшь ЕГЭ, чтобы поступить в онлайн-университет. Все подробности здесь: https://proglib.io/w/ab5b5cee

Привет, Чувак на связи.

Веду канал с вакансиями в IT без херни.

✅ Лично отбираю вакансии - никакой херни.
✅ Вакансии краткие и по делу - никаких полотен в два экрана.
✅ Только две вакансии в день - никакого спама, я уважаю своих читателей.
✅ Все вакансии имеют стандартизированный вид - никакого хаоса.
✅ Заставляю эйчаров переписывать вакансии по 10 раз - никаких дружных коллективов.

Правильный ответ: 3

1: Для тега aside по умолчанию используется role=complementary, не имеет смысла дублировать
2: Не следует радикально изменять нативную семантику тегов
4: У обычного текстового поля нет состояния aria-checked
5: Для скрытого input нет доступных ARIA-ролей
6: Для обозначения недоступности кнопок следует использовать нативный атрибут disabled

Что такое ARIA?
Узнать: https://prglb.ru/ds7n

#accessibility #aria

Интеграция Typescript в существующее VueJS приложение

Три шага для внедрения типизированного JS в ваш проект!

Читать: https://prglb.ru/1r9em

#frameworks #vue #typescript #tools

​Шаблоны верстки email-рассылок

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

Тут есть базовый каркас письма, колонки, оформление текста, кнопок и т.д. Бонусом - подробные объяснения, для чего нужно каждое правило.

Забрать себе: https://www.goodemailcode.com/

#html #email #bestpractices