🖥 Дайджест самых интересных публикаций за неделю:

• Как написать функцию для поиска анаграмм в списке слов.

• Что такое Promise, и какими бывают его состояния.

• 18 советов по созданию чистого и эффективного кода JavaScript.

• Обзор на распределённые условные типы в TypeScript.


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

This is a daily stats digest!
Today the bot processed: 9 messages
Today you received: 2 messages
Our filtering prevented you from: 7 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 3 message(s)
Frontender's notes [ru]: 2 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 2 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

​.scrollTo()

Метод scrollTo() позволяет программно прокрутить элемент до некоторой точки координат на странице.
window.scrollTo(x, y)
Где x и y — это координаты левого верхнего угла экрана.

Для скролла внутри элемента (например, в <div>) нужно сначала получить этот элемент. Прокрутим первый на странице <div> на 100 пикселей вниз (этот блок должен содержать достаточно контента, чтобы появилась полоса прокрутки):
const div = document.querySelector('div')
div.scrollTo(0, 100)

Вместо координат в scrollTo() можно передать объект с тремя параметрами:
- top задаёт количество пикселей для прокрутки по оси y;
- left то же самое, но по оси x;
- behavior определяет поведение прокрутки. По умолчанию резкое auto, но можно указать плавный smooth.
window.scrollTo({
top: 100,
left: 0,
behavior: 'smooth'
})

scrollTo() необходим в случае, когда прокрутку нужно совершить до определённых координат на экране. В случае прокрутки относительно текущего положения лучше воспользоваться scrollBy(), а в случае прокрутки до конкретного элемента — методом scrollIntoView().

👉 @seniorFront

👩‍💻 Smooth Liquid Background Effect

Сцена с анимированным фоном. Сделана на SVG, CSS и JavaScript.

#codepen


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

Section design with hover effect

Адаптивные карточки с красивым анимированным фоном при наведении. Реализованы с помощью CSS и JavaScript.

https://codepen.io/uiswarup/pen/BaaexdO


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

Button Hover Effects

Подборка кнопок, стилизованных и анимированных в SCSS.

👉 @seniorFront


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

JavaScript. Что будет выведено в консоль?

Ответ


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

👩‍💻 Полноценная поддержка вложенности без препроцессоров

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

Теперь это можно реализовать в обычном CSS. Например, у родительского элемента .card есть дочерние элементы .title и .content. Мы можем поместить стили дочерних элементов прямо внутрь стилей .card:

.card {
    /* основные стили карточки */
    &:hover,
    &:focus {
        /* стили ховера и состояния фокуса */
    }
    .title {
        /* стили для заголовка внутри карточки */
    }
    .content {
        /* стили для контента внутри карточки */
    }
}

В таком коде легче искать нужный селектор — всё сгруппировано в одном месте.


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

This is a daily stats digest!
Today the bot processed: 12 messages
Today you received: 6 messages
Our filtering prevented you from: 6 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 4 message(s)
Frontender's notes [ru]: 3 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 3 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

Signup Form 3D FLIP Animation

3D-анимация формы регистрации, реализованная с помощью CSS и JavaScript.

https://codepen.io/team/keyframers/pen/LYRXGxO


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

This is a daily stats digest!
Today the bot processed: 11 messages
Today you received: 1 messages
Our filtering prevented you from: 10 messages

Top 3 source channels:
Frontender's notes [ru]: 4 message(s)
Senior Frontend - javascript, html, css: 3 message(s)
Веб-страница: 2 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

lapisCordis

Вёрстка создана на Pug и CSS. В JS реализована логика раскрытия карточки.

👉 @seniorFront


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

🖥 Ice Cream Landing Page – дизайн лендинга для магазина мороженого. Здесь использованы сочные, "ягодные" оттенки красного и фиолетового.

Сайтодел | #макет #figma


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

Acrobatic Preloader

Оригинальный лоадер, созданный из svg-картинки и анимированный на CSS.

https://codepen.io/jkantner/pen/VwrYggy


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

💾 SVG Filter Text Marquees – многослойное изображение с анимированным текстом. Анимацию можно остановить, нажав на кнопку.

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


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

Circular Progress Bar

В этом видео создаётся анимированный индикатор на HTML, CSS и JS.

👉 @seniorFront


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

👩‍💻 Firefly Button

Сцена с измененным курсором и анимированной кнопкой. Сделана на CSS и JavaScript.

#codepen


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

Face Grid Track

Сетка с отслеживанием положения курсора, выполненная с помощью Pug, SCSS и JavaScript.

https://codepen.io/ryankbrown/pen/QWQxQeB


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

This is a daily stats digest!
Today the bot processed: 15 messages
Today you received: 7 messages
Our filtering prevented you from: 8 messages

Top 3 source channels:
Сайтодел | GitHub, Верстка, Сайты, FullStack: 4 message(s)
Senior Frontend - javascript, html, css: 4 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 3 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report

Тот самый гаджет, который помогает протянуть до пятницы

👉 @seniorFront


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

Point and click penguin

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

https://codepen.io/Ma5a/pen/MWrZPOP


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