​​🥳Создание Web components на Vue 3

В этой статье автор расскажет о том, как можно создать Web компоненты на Vue 3, а также в статье рассматривается унификация компонента на примере release-timeline, созданного с использованием Vite.

Читать...


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

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

Ответ


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

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

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

​​9 главных трендов в разработке фронтенда

Рост популярности TypeScript, PWA, микрофронтендов, использование ИИ на всех этапах разработки и другие тренды 2024 года — в статье: https://proglib.io/p/9-glavnyh-trendov-v-razrabotke-frontenda-v-2024-godu-2024-01-16

#фронтенд #тренды


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

💾 Balkan Style Portfolio Gallery – лендинг для портфолио дизайнера. Детализация каждой работы находится в выпадающем окне.

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


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

Login Form

В этом видео создается анимированная форма входа на HTML и CSS.

👉 @seniorFront


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

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

В этой статье автор расскажет о своем опыте с оптимизацией сайта, используя различные инструменты и методы. Важные практики такие как минификация 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