ЛО @webdevlair
Showing posts older than #4223 · Back to latest
const input = [1, 2, 2, 3, 4, 3, 5, 3];
const result = countFrequency(input);
console.log(result);
// Ожидаемый результат: {1: 1, 2: 2, 3: 3, 4: 1, 5: 1}
function countFrequency(array) {
return array.reduce((acc, item) => {
acc[item] = (acc[item] || 0) + 1;
return acc;
}, {});
}
// Пример использования:
const input = [1, 2, 2, 3, 4, 3, 5, 3];
const result = countFrequency(input);
console.log(result);
// Ожидаемый результат: {1: 1, 2: 2, 3: 3, 4: 1, 5: 1}
Forwarded from Frontender's notes [ru]
✅ Как performance budget обычно выглядит в теории
На бумаге всё выглядит аккуратно и логично. Ограничения на размер бандла, контроль LCP, TTI и CLS, лимиты на количество запросов, ожидания по времени рендера. Кажется, что если есть цифры, значит есть и контроль. Но реальность быстро вносит свои правки.
❌ Почему budget умирает почти сразу
Самая частая ошибка в том, что budget вводят как набор чисел, а не как процесс. Написали JS не больше условных 200 KB и разошлись. Никто не проговорил, что делать если лимит превышен, кто за это отвечает и что важнее в конкретный момент новая фича или перф. В итоге цифры есть, а решений ноль.
Вторая боль это отсутствие автоматической проверки. Если budget не проверяется в CI, его просто не существует. Локально у всех всё быстро, а в проде внезапно плюс десятки килобайт и лишние секунды LCP. И самое грустное никто этого не поймал в моменте.
👏 Почти всегда побеждают фичи
Когда нужно выбирать между релизом и остановкой из за производительности, команда почти всегда идёт в сторону релиза. Performance это отложенная боль, а фича нужна прямо сейчас. Потом к этому возвращаются. Или не возвращаются.
Ещё одна проблема в том, что budget делают слишком общим. Один лимит на всё приложение выглядит просто, но работает плохо. Лендинг, дашборд и админка живут по разным правилам и ожиданиям. Но budget почему то часто одинаковый для всех.
📣 И финальный гвоздь в крышку гроба это отсутствие прозрачности
Когда лимит превышен, никто не может быстро ответить, чем именно мы его съели. Без понимания причин budget превращается в абстрактную цифру из дока.
⚙ Когда performance budget реально начинает работать
Он перестаёт быть про килобайты и становится про пользовательские метрики. Он проверяется автоматически через CI, Lighthouse или Web Vitals. Он разбит по страницам и сценариям, а не размазан по всему приложению. И самое важное есть чёткое правило, что делает команда если лимит превышен. Performance становится частью Definition of Done, а не красивым бонусом.
• При нажатии на кнопку из точки клика расходится круг, который исчезает через мгновение.• Анимация должна быть плавной и не мешать повторным кликам.<button class="ripple-button">Нажми меня</button>
.ripple-button {
position: relative;
overflow: hidden;
padding: 10px 20px;
font-size: 16px;
color: white;
background-color: #007BFF;
border: none;
border-radius: 4px;
cursor: pointer;
}
.ripple-button .ripple {
position: absolute;
border-radius: 50%;
transform: scale(0);
animation: ripple-animation 0.6s linear;
background-color: rgba(255, 255, 255, 0.6);
}
@keyframes ripple-animation {
to {
transform: scale(4);
opacity: 0;
}
}
document.querySelector('.ripple-button').addEventListener('click', function (event) {
const ripple = document.createElement('span');
const rect = this.getBoundingClientRect();
ripple.style.width = ripple.style.height = `${Math.max(rect.width, rect.height)}px`;
ripple.style.left = `${event.clientX - rect.left - ripple.offsetWidth / 2}px`;
ripple.style.top = `${event.clientY - rect.top - ripple.offsetHeight / 2}px`;
ripple.className = 'ripple';
this.appendChild(ripple);
ripple.addEventListener('animationend', () => ripple.remove());
});
Forwarded from xCode Journal
Об этом говорилось уже тысячу раз, но позвольте мне добавить свой голос: эра, когда код писали люди, закончилась. Это тревожно для тех из нас, кто считает себя разработчиками программного обеспечения, но это так. Это не значит, что у разработчиков ПО нет работы, но написание синтаксиса напрямую — это не то, чем они теперь занимаются.
exit и его псевдоним die — языковые конструкции, выводящие сообщение и завершающие текущий сценарий. В CLI-приложениях exit/die можно использовать для завершения работы приложения с заданным кодом выхода.
<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Три равных столбца */
gap: 10px; /* Расстояние между элементами */
}
.item {
background: lightblue;
padding: 20px;
text-align: center;
}
</style>
🗣️ В этом примере .grid-container создает сетку с тремя столбцами одинаковой ширины. Свойство gap добавляет отступы между элементами. Grid Layout упрощает создание адаптивных макетов.
• Изображение занимает верхнюю часть карточки.• Текст закреплён внизу карточки, даже если изображение маленькое.<div class="card">
<img src="https://via.placeholder.com/150" alt="Placeholder Image" class="card-img">
<div class="card-text">Текст внизу карточки</div>
</div>
.card {
width: 200px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card-img {
width: 100%;
height: auto;
max-height: 70%; /* Ограничиваем высоту изображения */
}
.card-text {
padding: 10px;
background-color: #f9f9f9;
text-align: center;
}