​​🚀Обрезать нельзя сжать. Как ускорить метрики проекта без больших вложений

В этой статье автор расскажет о своем опыте с оптимизацией сайта, используя различные инструменты и методы. Важные практики такие как минификация JS и CSS, оптимизация шрифтов, сжатие изображений, работа с CDN, Tree Shaking, Lazy Load, оптимизация тэгов link и script, а также другие методы, которые позволяют ускорить загрузку сайта и улучшить пользовательский опыт.

Читать...


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

accordion gallery zoom animation

Реализовано на HTML и SCSS, без использования JS.

👉 @seniorFront


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

​​🤔Redux vs Mobx кого же выбрать для React-приложения в 2024 году?

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

Читать...


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

Rotating text

Вращающийся текст. Сделан с помощью JavaScript.

https://codepen.io/M0nica/pen/goYrMN


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

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

Top 3 source channels:
Frontender's notes [ru]: 3 message(s)
Senior Frontend - javascript, html, css: 2 message(s)
Веб-страница: 1 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

✍️ Space Grotesk – пропорциональный шрифт без засечек, основанный на семействе шрифтов Space Mono. Имеет особенности моноширного шрифта. Пример есть на официальном сайте Meteor

Сайтодел | #шрифт


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

Ваш заказ, пожалуйста

Ваша задача — отсортировать переданную строку. Каждое слово в строке будет содержать одно число. Это число обозначает позицию, которую слово должно занимать в результате

Примеры:

 Thi1s T4est 3a"  -->  "Thi1s is2 3a T4est"
"4of Fo1r pe6ople g3ood th5e the2"  -->  "Fo1r the2 g3ood 4of th5e pe6ople"

👉 @seniorFront


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

​​⚡️Релиз Bun Shell (новый shell для JavaScript)

В этой статье вы узнаете о новом shell под названием Bun Shell, который предназначен для использования в JavaScript и TypeScript.

Читать...


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

​​Figma закрыла Dev Mode: пути обхода и их краткий обзор

В июне 2023 года Figma выпустила масштабное обновление: появился режим разработки Dev Mode. Эта функция обеспечивает плавный переход от дизайна к разработке. Такое новшество сразу же пришлось по душе многим.

Однако совсем недавно пропала возможность пользоваться режимом бесплатно. Как быть и какие есть альтернативы — рассказали в статье: https://habr.com/ru/companies/selectel/articles/795621/

#дизайн #figma


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

​​👩‍💻Пишем сложный Page object для playwright тестов вместе с Dorama

В этой статье я расскажу о том, как удобно организовать Page Object для большого проекта с использованием Playwright и библиотеки Dorama.

Читать...


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

🔥 Годнота

Наткнулся на базу с 1400 вопросов с собеседований на Frontend разработчика. Фишка в том что просчитана вероятность с которой вопрос буден задан и есть примеры ответов. Теперь можно легко получить оффер, подготовившись к самым популярным вопросам.


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

Switch Day and Night - Cat

Вся сцена реализована на HTML и CSS.

👉 @seniorFront


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

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

Top 3 source channels:
Senior Frontend - javascript, html, css: 3 message(s)
Frontender's notes [ru]: 2 message(s)
Сайтодел | GitHub, Макеты, Шрифты, JavaScript, Figma: 1 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

Если вам были нужны встраиваемые комментарии для сайта, то вот отличный проект на React — Replyke

Replyke — бесплатный, готовый к использованию компонент комментариев, который легко настраивается и интегрируется с существующими React-проектами. Сами комментарии подключаются по системе Plug’n’Play, а настроить их можно прямо на веб-сайте проекта.

#react #инструменты


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

​Итератор

Итератор — это объект, который умеет обращаться к элементам коллекции по одному за раз, при этом отслеживая своё текущее положение внутри этой последовательности.
Иными словами итератор — это такой механизм, который позволяет перемещаться (итерироваться) по элементам коллекции в определённом порядке и делает их доступными.

В JavaScript итератор — это объект, который возвращает следующий элемент последовательности, через метод next(). Этот метод возвращает объект с двумя свойствами:
- value — значение текущего элемента коллекции.
- done — индикатор, указывающий, есть ли ещё в коллекции значения, доступные для перебора.

function makeIterator(array) {
let nextIndex = 0

return {
next: function () {
if (nextIndex < array.length) {
const result = { value: array[nextIndex], done: false }
nextIndex++
return result
} else {
return { done: true }
}
}
}

После создания, объект-итератор может быть явно использован, с помощью вызовов метода next():
let iterator = makeIterator(['Hello', 'world'])
console.log(iterator.next().value)
// 'Hello'
console.log(iterator.next().value)
// 'world'
console.log(iterator.next().done)
// true

Как только метод next() завершает перебор, то возвращается { done: true }. Это является сигналом, что итерирование завершено.

👉 @seniorFront

​​👤Как работает автозаполнение в браузерах и что важно учитывать веб-разработчику

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

Читать...


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

Задача

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

Римские цифры представлены семью разными символами:

I - 1,
V - 5,
X - 10,
L - 50,
C - 100,
D - 500,
M - 1000

Справка: римские цифры обычно пишутся от наибольшего к наименьшему слева направо. Однако цифра четыре - это не IIII. Вместо этого число четыре записывается как IV. Поскольку единица стоит перед пятью, мы вычитаем ее и получаем четыре. Тот же принцип применяется к числу девять, которое записывается как IX.

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

- I можно поставить перед V (5) и X (10), чтобы получилось 4 и 9.
- X можно поставить перед L (50) и C (100), чтобы получилось 40 и 90.
- C можно поставить перед D (500) и M (1000), чтобы получилось 400 и 900.

Входные данные: n - натуральное число от 1 до 3000.

Вывод: римская запись числа n.

Ответ


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

​​ИИ победил: GitHub Copilot уже может имитировать разработчика уровня сеньор


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

Star Wars Imperial Army's Product Slider

Свёрстано на HTML и SCSS. Функционал слайдера реализован при помощи библиотеки Swiper.

👉 @seniorFront


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

💾 Parallax Depth Cards – карточки, имитирующие объемное изображение под стеклом. Каждая карточка вращается в пространстве и показывает скрытые края картинки.

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


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

​​🧐Как составить Customer Journey Map и почему не надо игнорировать этот инструмент

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

Читать...


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