Smooth Liquid Background Effect

"Кляксы" созданы в HTML, а в JS создана логика их передвижения и анимации.

👉 @seniorFront


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

​​🤔Микросервисы на фронтенде — что выбрать

В этой статье представлено сравнение четырех основных подходов к работе с микрофронтендами на фронтенде: Single SPA, Module Federation, NPM modules и Git Submodules.

Читать...


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

Объясните разницу между const person = Person() и const person = new Person() при function Person(){}

Если функция Person() не возвращает явным образом создаваемый экземпляр, то вариант const person = Person() присвоит константе person значение undefined, поскольку именно таков результат void функции.

Если функция Person явным образом возвращает экземпляр, он станет значением константы person при const person = Person().

Однако, вариант с использование оператора new "выигрывает", поскольку он устанавливает корректную связь объекта person с цепочкой прототипов Person, в то время как выражение const person = Person() просто присваивает константе результат вызова функции.


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

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

Top 3 source channels:
Frontender's notes [ru]: 9 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

Укорачивание массива

Этот способ позволяет зафиксировать размер массива и удалить все лишние элементы. Например, у вас есть массив из 6 элементов, а вам нужны только первые 3. В таком случае достаточно одной простой команды: array.length = 3.

#массивы


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

‼️Всем кодерам посвящается‼️

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

🪩 Расставь приоритеты, добавь лёгкости в свою работу и становись лучше с @code_ready


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

​Почему TypeScript считает compatible тип функции с меньшим количеством аргументов?

Ковариантность в TypeScript:
В контексте TypeScript, если функция ожидает аргументы определенного типа, то она также считается совместимой с функцией, требующей более узкий объем аргументов или более конкретный тип. То есть, функция, принимающая меньшее количество аргументов, считается совместимой с функцией, ожидающей большее количество аргументов, если они имеют подходящие типы. Это согласуется с принципом поддержки того, чтобы "меньший" тип мог быть использован в контексте, где ожидается "больший" тип.

Пример:

 type User = { name: string; };
 type Admin = { name: string; adminRights: boolean; };

 function logUser(user: User) {
   console.log(user.name);
 }

 const admin: Admin = { name: 'Alice', adminRights: true };

 logUser(admin); // TypeScript разрешит передачу admin в logUser

Преимущества:
1. Это предоставляет бóльшую гибкость в работе с функциями.
2. При правильном использовании позволяет избежать избыточной информации в определении функций.

Недостатки:
1. Может потенциально вызвать ошибки в ситуациях, когда поддерживается передача дополнительных аргументов без явного указания этого в сигнатуре функции.
2. Может показаться непривычным для разработчиков, привыкших к более строгой типизации в других языках.

👉 @seniorFront

​​🎃Как сделать SILO-структуру сайта

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

Читать...


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

Day & Night Toggle

Внутри переключателя SVG картинка, стилизованная в CSS. Логика изменения фона реализована в JS.

👉 @seniorFront


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

💾 Responsive GSAP Slider – слайдер для представления продуктов с подвижными SVG-картинками. Слайдер можно легко настроить под себя.

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


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

​Фронтендеры: Это ошибки бэкенда.

Бэкендеры: На нашей стороне нет ошибок, ищите у себя.

Тем временем где-то в серверной:


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

​​🧐Микровселенная безумия, или Как устроены микрофронтенды в Dodo

В этой статье автор расскажет о процессе разработки и доставки микрофронтендов с использованием Single-spa, SystemJS и import-map-overrides, а также о подходе к Continuous Delivery микрофронтендов.

Читать...


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

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

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

Создаём генератор персонажа

Этот codepen-проект Kodama Generator показывает необычную стороны возможностей CSS и JavaScript для создания персонажей с рандомизацией некоторых деталей.

Исходники: https://codepen.io/pavlovsk/pen/rNYwKeo

#codepen


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

​Экстремальные практики программирования

Экстремальное программирование — это одна из гибких методологий разработки. Понятие относится скорее к менеджменту, построению процессов, но оно тесно переплетено с непосредственно разработкой: техническими возможностями и конкретными технологиями, которые помогают соблюдать практики этой методологии.

Рассмотрим некоторые практики:

Разработка через тестирование
Эта практика подразумевает, что разработчики сначала пишут тесты, а потом под эти тесты пишется программное обеспечение. Наличие автотестов, которые запускают после каждого изменения кода, — это критически важный момент. Без этого уже тяжело представить взаимодействие с большой кодовой базой.

«Игра в планирование»
Сложно запланировать большую систему на несколько месяцев вперед. Как правило, когда команда начинает работать, план быстро начинает расходиться с реальностью. Или все продолжают придерживаться плана, но едут не туда и получают не такой качественный результат.
Здесь же идея в том, чтобы планировать более «несерьёзно», меньшими итерациями, — не бояться что-то зафейлить, быстрее адаптироваться к меняющимся условиям. Команда обсуждает, что они могут сделать в рамках спринта, условно пары недель, это позволяет им быть более гибкими («agile»).

«Заказчик всегда рядом»
Классическая модель работы выглядит так: заказчик ставит задачу, бизнес-аналитики собирают требования, исполнители реализуют проект и приносят результат на утверждение. Часто это не самая удачная стратегия.
Принцип «заказчик всегда рядом» подразумевает, что команда контактирует с заказчиком супермаленькими интервалами, показывая ему процесс разработки в мелочах. Это помогает вовремя всё подправить и избежать ситуации, когда при сдаче проекта оказывается, что требования поняли некорректно и принесли не тот результат.

Парное программирование
Вместо того, чтобы разработчик работал в одиночку, а потом показывал результат коллегам или продакт-оунеру, процесс построен по аналогии с гонками: когда есть драйвер и штурман.

- Качество кода, как правило, выше за счёт двух моментов:
- Люди — «социальные животные»: когда за ними наблюдают, они стараются сильнее. Конечно, при условии, что наблюдение экологичное и не создаёт стресса.

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

👉 @seniorFront

​​🔮Вдали от Webpack, или Как мы в Dodo микрофронтенды на Vite переводили

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

Читать...


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