Как создать радиальный градиент в CSS?

Для создания фона в виде радиального (кругового, эллиптического) градиента испольуется функция radial-gradient.

Самый простой градиент задаётся двумя цветами.
.element {
background-image: radial-gradient(#6e4aff, #49A16C);
}

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

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

Форма градиента задаётся ключевым словом circle или ellipse (по умолчанию).

Мы можем задавать положение центральной точки, используя те же ключевые слова, что и для background-position, но с приставкой at: at left, at top, at right, at bottom, at center (по умолчанию). Значения можно сочетать, чтобы поместить центр градиента в нужный угол элемента: at top left — центр градиента в верхнем левом углу.

Заливаем релиз на прод в пятницу вечером

👉 @seniorFront


Original post link: t.me/seniorFront/3974
Forwarded and filtered by @smartfeed_bot

​​Вот так вот делай и веб-приложение от нативного не отличишь:


Original post link: t.me/tproger_web/4500
Forwarded and filtered by @smartfeed_bot

​​✈️Путешествие в yarn

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

Читать...


Original post link: t.me/frontendnoteschannel/3476
Forwarded and filtered by @smartfeed_bot

Slider with Two Different Sidebars

Слайдер реализован при помощи библиотеки Swiper. А также в JS создана логика проигрывания музыки.

👉 @seniorFront


Original post link: t.me/seniorFront/3976
Forwarded and filtered by @smartfeed_bot

​​🫥Фильтр Блума

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

Читать...


Original post link: t.me/frontendnoteschannel/3478
Forwarded and filtered by @smartfeed_bot

Map в JavaScript

Map — это тип коллекции, элементы которого имеют свой ключ. Она немного схожа с Object, однако в качестве ключа можно принять любой тип данных

Методы и свойства:
new Map() – создаёт коллекцию.
map.set(key, value) – записывает по ключу key значение value.
map.get(key) – возвращает значение по ключу или undefined, если ключ key отсутствует.
map.has(key) – возвращает true, если ключ key присутствует в коллекции, иначе false.
map.delete(key) – удаляет элемент по ключу key.
map.clear() – очищает коллекцию от всех элементов.
map.size – возвращает текущее количество элементов.

Отличия от обычного объекта Object:
- Что угодно может быть ключом, в том числе и объекты.
- Есть дополнительные методы, свойство size.

Пример использования:
let map = new Map();
map.set("1", "str1");
map.set(1, "num1");
alert(map.get(1)); // "num1"


Original post link: t.me/senior_front/1951
Forwarded and filtered by @smartfeed_bot

​​​Мощь декораторов TypeScript на живых примерах: декорирование методов класса

С помощью декораторов вы можете избежать дублирования кода и убрать лишний «шум» в коде. Они также помогают легко добавить к классам и членам класса метаданные.

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

https://habr.com/ru/articles/707496/

@tproger_web #typescript


Original post link: t.me/tproger_web/4508
Forwarded and filtered by @smartfeed_bot

​​😉RSLike@3. Well-known Symbol, улучшенное использование Typescript, и весим больше

В этой статье автор расскажет о библиотеке Rslike, которая помогает избежать ошибок связанных с null и undefined в JavaScript.

Читать...


Original post link: t.me/frontendnoteschannel/3480
Forwarded and filtered by @smartfeed_bot

3D wave animation

Создано на HTML и CSS. При помощи комбинатора '+' стили задаются соседним элементам.

👉 @seniorFront


Original post link: t.me/seniorFront/3978
Forwarded and filtered by @smartfeed_bot

💾 Cursor Tracking – маска для курсора, которая показывает скрытый слой. В середине экрана диаметр маски становится чуть меньше.

Сайтодел | #сниппет #css


Original post link: t.me/sitodel/1730
Forwarded and filtered by @smartfeed_bot

Алиасы в GIT

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

Например:

git status
git commit -m 'commit'

Git позволяет создавать алиасы команд. Благодаря этому вы можете вводить не длинную строку команды, а ее короткий псевдоним.

Создаём alias:

git config --global alias.st status
git config --global alias.cm 'commit -m'

Теперь нам не нужно постоянно вводить git status или git commit -m, достаточно ввести:

git st
git cm


Original post link: t.me/senior_front/1952
Forwarded and filtered by @smartfeed_bot

​​Как правильно называть программиста, а как — неправильно?

Разработчик — это полноценный программист или еще нет? А можно ли назвать коллегу кодером или это уже что-то обидное? Обидно ли вам, когда вас называют компьютерщиком?

Инженер, оператор ЭВМ, автоматизатор, разработчик, хакер, кодер, сисадмин, компьютерщик или IT-специалист? Как бы вы назвали себя? Как, когда и почему нужно называть других разработчиков?

#обсуждение


Original post link: t.me/tproger_web/4509
Forwarded and filtered by @smartfeed_bot

​​🍕REST под сливочным соусом

В этой статье вы узнаете основные концепции и принципы REST (Representational State Transfer), а именно о клиент-серверной архитектуре, слоистой архитектуре, едином интерфейсе, отсутствии состояния, кэшировании и коде по запросу.

Читать...


Original post link: t.me/frontendnoteschannel/3483
Forwarded and filtered by @smartfeed_bot

27 основных однострочных функций JavaScript

Список из 27 однострочных функций JavaScript, которые используются ежедневно и необходимы каждому разработчику.

https://webformyself.com/27-osnovnyx-odnostrochnyx-funkcij-javascript/


Original post link: t.me/senior_front/1953
Forwarded and filtered by @smartfeed_bot

Responsive Contact us Page

В этом видео создается страница контактов с анимированной формой

👉 @seniorFront


Original post link: t.me/seniorFront/3982
Forwarded and filtered by @smartfeed_bot

​​🥰Модули ES6: Rollup

В этой статье вы узнаете о модулях ES6 и способах их использования с помощью инструмента Rollup.

Читать...


Original post link: t.me/frontendnoteschannel/3484
Forwarded and filtered by @smartfeed_bot