​Почему HTTPS так важен

Сейчас принято переводить все сайты на протокол HTTPS взамен устаревшего HTTP, так как новый более безопасный о чём и говорит буква S - Secure в аббревиатуре. Но что именно делает этот протокол более безопасным и как он помогает пользователям и владельцам сайтов?

Узнаете в этой статье:

https://tprg.ru/YJOz

Неоморфные элементы для сайта

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

Сохраните к себе в избранное, а когда понадобится вам будет достаточно скопировать нужные элементы и стили для получения мгновенного эффекта:

https://tprg.ru/6GzL

#codepen

​Совместное использование ресурсов между источниками (CORS)

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

Подробнее о CORS можете прочитать в этой статье:

https://tprg.ru/UAPx

​Обслуживание оптимизированных изображений во Vue

Загрузка изображений сильно бьёт по производительности сайта. А согласно HTTP Archive изображения составляют не 50% от полезной нагрузки веб-сайта.

Но выход из этой ситуации есть. ImageEngine в связке с Vue.js позволяют снизить нагрузку на сеть при загрузке изображений. Подробнее здесь:

https://tprg.ru/Q1UX

#vue

​Размышления о способах создания цветовых схем

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

https://tprg.ru/281i

#видео

Построение компонентов с выпадающими блоками с помощью Angular и Material CDK

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

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

Посмотрите, это может вам пригодиться:

https://tprg.ru/NnWY

#angular

Лучше ничего не менять от греха подальше

​Как работать с localStorage в JavaScript

Благодаря наличию веб-хранилища данные пользователя хранятся непосредственно в браузере. localStorage — это веб-хранилище, где данные хранятся бессрочно и не теряются при перезапуске браузера.

В этой статье вы создадите простой список дел, где данные будут храниться в localStorage:

https://tprg.ru/lzXr

#javascript

​Что можно положить в тег <head>

Что обычно вы помещаете в <head> при написании страницы? Само собой обязательные метаданные, ссылки на JS и CSS-файлы, заголовок страницы, так ведь?

Но на самом деле для тега <head> предусмотрено ещё множество других элементов, которые по-разному влияют на страницу.

Здесь вы можете узнать о них подробно:

https://tprg.ru/jM1K

#html

Ближайшие события для разработчиков

— Митап «Эволюция фронтенд-разработчика»
10 июля, Санкт-Петербург

Специалисты Mercury Development обсудят, как развиваться фронтендеру, стоит ли двигаться в сторону фуллстека или пробовать себя в мобильной разработке.

— Конференция Podlodka Frontend Crew
Старт 12 июля

2 недели онлайн-сессий, воркшопов, кейсов, интервью и круглых столов по архитектуре фронтенда и разработке интерфейсов. Спикеры — ведущие разработчики из Авито, Aviasales, Feature Sliced Core Team, DRIVE2 и Effector.

— Вебинар «3 технологии вёрстки, которые вы должны знать»
15 июля, онлайн

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

— Митап «about:cloud о Serverless»
15 июля, онлайн

Разработчики Yandex.Cloud покажут новые фишки в разработке приложений на Serverless, дадут рекомендации по проектированию структур БД для больших нагрузок и поделятся клиентским опытом использования Yandex Database Serverless.

— Конкурс Russian Drupal Awards 2021
Регистрация до 18 июля, онлайн

Разработчики и владельцы русскоязычных сайтов на Drupal встретятся, чтобы продемонстрировать функционал CMS, повысить её престиж на российском веб-рынке и побороться за призы.

— Greenplum Community Meetup
15 июля, онлайн

Специалисты Yandex.Cloud, Яндекс.Такси, «Леруа Мерлен», «Тинькофф» и VMWare Tanzu поделятся опытом эксплуатации больших кластеров Greenplum в production, расскажут о нюансах работы и планах по развитию СУБД.

#ивенты

​Что почитать: Серия книг Кайла Симпсона «Вы не знаете JavaScript»

Отличная серия из шести книг, которая поэтапно рассказывает и объясняет все тонкости языка от простого к сложному. В книгах мало «воды», объяснения понятны и просты, есть упражнения для закрепления изученного, а главное она подойдёт как новичкам, так и опытным разработчикам, которые хотят улучшить свои знания JavaScript.

#книги

Как использовать HTTPS для локальной разработки

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

Здесь вы можете узнать, как это можно быстро сделать:

https://tprg.ru/wYRi

Когда в офисе осталась только команда веб-разработки

Soft Skillz — новый канал от Tproger, где мы будем рассказывать о важности soft skills для работы и жизни и делиться способами их прокачки.

Тема soft skills достаточно широкая, поэтому в канале будет интересно не только айтишникам, но и тем, кто просто хотел бы повысить свою продуктивность.

Подписывайтесь сами и приглашайте друзей: @soft_skillz

​5 облачных баз данных с собственными SDK для JavaScript

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

В этой статье рассмотрены пять наиболее популярных вариантов:

https://tprg.ru/lozA

Демистификация стилизованных компонентов React

Если не знать как устроен мир, то многое кажется магией. В разработке также. Если вы хоть раз использовали стилизованные компоненты React, то видели его «магию».

В этой статье вы сможете понять, как это работает:

https://tprg.ru/nPb0

#react

Свежая подборка вакансий для фронтендеров

— Frontend developer
Где: Новосибирск.
Сколько: От 150 000 до 180 000 ₽.
Подробнее: https://tprg.ru/Npu4

— Lead frontend engineer
Где: Удалённо.
Сколько: До 5000 €.
Подробнее: https://tprg.ru/0Q9u

— Middle Frontend Developer (TypeScript, Svelte) к нам, Tproger
Где: Удалённо, Москва.
Сколько: От 80 000 до 160 000 ₽.
Подробнее: https://tprg.ru/9ydU

— High middle front-end разработчик в CSSSR
Где: Удалённо.
Сколько: По итогам собеседования.
Подробнее: https://tprg.ru/VPdB

— Middle front-end разработчик в CSSSR
Где: Удалённо.
Сколько: По итогам собеседования.
Подробнее: https://tprg.ru/IV5n

— Front-end Developer (Tools) в Авиасейлс
Где: Удалённо, Санкт-Петербург, Москва, Пхукет, Таиланд.
Сколько: По итогам собеседования.
Подробнее: https://tprg.ru/TASr

— Front-end Developer (Partners) в Авиасейлс
Где: Удалённо, Санкт-Петербург, Москва, Пхукет, Таиланд.
Сколько: По итогам собеседования.
Подробнее: https://tprg.ru/8Q1Y

— Front-end Developer (Brands) в Авиасейлс
Где: Удалённо, Санкт-Петербург, Москва, Пхукет, Таиланд.
Сколько: По итогам собеседования.
Подробнее: https://tprg.ru/quW1

​Сможете ли вы понять, что означает эта строка?

html {
font: 110%/1.4 system-ui;
}

На самом деле такая запись может сбить с толку в начале, но если разобраться, то всё встанет на свои места. А разбираются как раз тут:

https://tprg.ru/SR71

#css

Когда клик - это не просто клик

Если залезть под капот HTML и разобраться в том, как работает самый простой клик, то окажется, что он не так прост. Кликнуть можно мышкой, а можно и клавиатурой, если, например, у вас нет возможности использовать мышку. И это будут разные нажатия несмотря на один результат.

Обо всех нюансах вы можете узнать в этой статье:

https://tprg.ru/xY1T

​CSS: появляется в 1994 году

Земля в 1993: