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

Разработчики 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:

​Создайте фитнес-трекер с React и Firebase

Давайте сделаем на этих выходных что-то необычное и крутое! Сегодня предлагаем вас руководство по созданию фитнес-трекера, который будет реализован в виде веб-приложения на React.

Если интересно, то переходите по ссылке:

https://tprg.ru/uInp

#react

Основные переходы и анимация в Svelte

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

В этой статье вы научитесь использовать их:

https://tprg.ru/HhAz

#svelte

​Идеальный инструмент для работы с СУБД без SQL для Node.js или Все, что вы хотели знать о Sequelize

Sequelize — это ORM для работы с системами управления базами данных, которая позволяет взаимодействовать с БД, используя синтаксис приложения. То есть веб-разработчик может обращаться к БД, используя привычный JavaScript.

В этой статье вы сможете ближе познакомиться с Sequelize и узнать его особенности:

https://tprg.ru/h3mK

​Изучение свойства CSS Position с примерами

Подробное, понятное и иллюстрированное объяснение свойства Position, которое поможет вам раз и навсегда запомнить его основные возможности и отличия:

https://www.youtube.com/watch?v=yFXEur3SCGI

#видео #css