Find Count of Most Frequent Item in an Array

Создайте функцию для нахождения количества наиболее часто встречающихся элементов массива. Можно предположить, что входными данными является массив целых чисел. Для пустого массива верните 0.

Пример:
input array: [3, -1, -1, -1, 2, -1, 3, -1, 2, 9, 3]
ouptut: 5
Самое частое число в массиве это -1, оно встречается 5 раз.

👉 @seniorFront


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

Реактивность в React и Vue

В этой статье автор сравнивает реактивности данных в таких библиотеках: React.js и Vue.js. Проводит сравнение процессов ре-рендеринга страниц. Данная статья хорошо подойдёт для новичков.

👉 @seniorFront


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

​​🧑🏽‍💻Самые полезные библиотеки JS для красивых анимаций

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

Читать...


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

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

Top 3 source channels:
Senior Frontend - javascript, html, css: 3 message(s)
Frontender's notes [ru]: 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

​Годных инструментов в ленту: Screenshot to Code — тулз для конвертирования скринов, Figma-шаблонов и мокапов в чистый код.

Инструмент поддерживает HTML + Tailwind, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind и SVG. Самое приятное, что инструмент бесплатный.

#инструменты #дизайн


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

​Synthetic events в React

В React, "синтетические события" (synthetic events) - это система обработки событий, которая предоставляет кросс-браузерную и кросс-платформенную абстракцию над нативными событиями браузера. Они создаются и управляются React и обеспечивают более единообразное поведение обработки событий в различных браузерах.

Синтетические события предоставляются компонентам React как аргументы обработчиков событий и имеют схожий интерфейс с нативными событиями браузера, но с некоторыми различиями и улучшениями.

Пример использования синтетических событий:
import React from 'react';

class Button extends React.Component {
handleClick = (event) => {
event.preventDefault();
console.log('Button clicked!');
};

render() {
return <button onClick={this.handleClick}>Click me</button>;
}
}

В этом примере, event является синтетическим событием, передаваемым в обработчик handleClick. Вы можете вызывать методы такие как preventDefault(), stopPropagation(), и другие, а также получать информацию о событии (например, event.target, event.clientX, и др.).

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

👉 @seniorFront

​​⚙️ Названия ветвей и комментарии к коммитам в Git: лучшие практики

В этой статье мы разберем лучшие практики для работы с ветвями и коммитами.

Читать...


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

🐙 Bruno – сервис с открытым исходным кодом для тестирования API, альтернатива таким инструментам, как Postman или Insomnia. Работает только оффлайн.

Сайтодел | #репозиторий #github


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

Замораживание объектов в JS

Давайте познакомимся с рядовым, но не слишком часто используемым методом для объектов в JS - .freeze()

.freeze() предотвращает добавление свойств к объекту, удаление старых свойств из объекта и изменение существующих, что довольно полезно в современной парадигме ООП.

Пример кода:
const obj = {foo: 'bar'};

Перед замораживанием: можно добавить, изменить или удалить свойства
obj.lumpy = 'woof';
delete obj.foo;

Замораживаем
Object.freeze(obj);

Так можно проверить
Object.isFrozen(obj); // === true

Теперь никакие изменения не произойдут
obj.foo = 'quux';


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

​Все: PHP-разработчики скоро останутся без работы, язык умирает.

Тем временем разработчики на PHP:


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

​​🐛 7 признаков неопытного программиста

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

Читать...


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

Blurry Text Reveal

Анимировано библиотекой gsap. Анимация запускается при прокрутке страницы.

👉 @seniorFront


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

​Годных codepen-проектов вам в ленту: Video To ASCII Art — анимация превращения коротких видео в ASCII-арт. Проект реализован с помощью CSS и JavaScript.

Исходники: https://codepen.io/konstantindenerz/pen/YzgRQZj

#codepen @tproger_web


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

Бесит часами искать подходящие скрипты?

Конечно, ведь в сети полно различных источников. Зато в Telegram достаточно одного канала – Сайтодел

Зашел – подписался ✔️ – и сразу применил в своём проекте!


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

👨‍💻 Вам нужен сайт?

Мы найдем вам исполнителя. Напишите нам свои пожелания по сайту в свободной форме. Достаточно нажать на кнопку ниже, потратить 1 минуту времени и ждать ответа.👇


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

@tproger_web pinned a message

​​Полезная библиотека для понимания работы JS

js2flowchart — библиотека визуализации для преобразования любого кода JavaScript в красивую блок-схему SVG. Вы можете изучать чужой код, делать рефакторинг или писать документацию, не путаясь в функциональности. А начинающим — неплохая шпаргалка по foo, while, if:

https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart

@tproger_web #javascript #инструменты


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

​​💫Как сделать из императивного компонента — декларативный React-компонент

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

Читать...


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

💾 Easy Sliding Menu – сайт-портфолио с анимированными диагональное меню для слайдера. Переключать слайды можно только через него, поэтому можно не беспокоиться, что не тот элемент включится случайно.

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


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

​Этот опасный рефакторинг (Как снизить риски?)

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

Некоторые задачи рефакторинга подразумевают крупные изменения и затрагивают несколько подсистем. Другие при этом ограничиваются одним компонентом, но могут непредвиденно повлиять на другие части системы и вызвать поломку важнейших бизнес-операций. В этом случае речь может идти о действующем потоке приобретения товара. Третья категория – это доработки, позволяющие внести новые возможности – например, изменение потока приобретения одного товара для поддержки большего числа его единиц и добавление ещё одного потока после.
Объединяет все эти сценарии то, что они сопряжены с высоким риском.
1. В случае ошибки такие доработки навредят бизнесу (потеря прибыли, недовольство клиентов), команде (подорвут доверие, мотивацию) или другим связанным функциям (разработка встанет).
2. Причём реализация этих изменений весьма затратна, так как требует повышенного внимания, усилий и времени. Предпочтительнее для таких задач задействовать опытных разработчиков, хорошо разбирающихся в этой области.

Как снизить риски
Рекомендую использовать чек-лист:
- Определите ограничения. Как далеко можно зайти?
- Изолируйте доработки от функциональности. Не применяйте их вместе.
- Напишите обширные тесты, более высокоуровневые (интеграционные) с меньшим числом деталей реализации, и сопровождайте ими внесение изменений.
- Проверьте всё наглядно. Запустите браузер.
- Не пропускайте тесты. Не ленитесь.
- Не полагайтесь слишком сильно на код-ревью и контроль качества (QA). Люди ошибаются.
- Не смешивайте масштабные зачистки с другими изменениями. Это можно делать в случае небольших доработок.

👉 @seniorFront

​Как защитить PROD от багов и себя от стресса

Эта статья - взгляд QA на проблему возникновения багов на ПРОДе. Он выделил пять основных рисков:

1. Идея попадает к аналитику
Владелец продукта и аналитик на этапе проектирования тех. требований могут некорректно описать логику нового функционала (флоу). Заказчик имел ввиду одно, а по итогу в спецификациях совершенно другое. Решение данной проблемы может зависеть от правил взаимодействия с заказчиком в вашей команде.

Необходимо ли заказчику описывать предложения в письменном виде с точным описанием? Ответственность данного риска лежит на плечах владельца продукта и он в свою очередь может сделать общение с заказчиком более прозрачным для команды.

2. Разработка по тех. требованиям
Frontend и Backend разработчики берут задачи из бэклога в спринт, но в задаче может быть прикреплена устаревшая документация, ее может и вовсе не быть.
Пиши то - не зная что, реализуй так - не зная как.

Часто встречается и такая модель разработки - когда ответственность падает только на разработчика, минуя владельца продукта и аналитику. Это грустно и в таком случае помогут DOR и DOD.
Definition of Ready - это критерии готовности взять задачу в разработку, то есть DOR это условия, при выполнении которых задача может упасть в спринт. Команда сама выбирает критерии и придерживается их. Например: аналитика написана, есть точные тех.требования и т.д.
Definition of Done - это критерии завершения задачи, то есть условия после которых выполненная задача переходит в тестирование к QA.

3. Frontend и Backend выполняют задачи не синхронно
Под синхронным выполнением задачи я подразумеваю, что задачи на фронте и на бэке будут выполняться как минимум в одном спринте. Почему это критично? Тех.требования имеют свойства корректироваться на этапе разработки и если один разработчик взял задачу в одном спринте и подкорректировал реализацию на своей стороне, то второй разработчик может выполнить задачу по устаревшим требованиям.

4. Тестирование
Само тестирование может быть некачественным из-за человеческого фактора. Пропустил ошибку т.к. не написал тест-кейс по этой функциональности или не проверил негативные тесты. Недостаточно времени было на тестирование. Не было документации вовсе.
Данный риск зависит от самого инженера по тестированию, но описанные выше риски могу напрямую влиять на качество тестирования и ответственность ложится уже на вас.
Защитить себя и ваше время помогут вышеупомянутые DOR и DOD.

5. Релиз (Поддержка)
Данный риск зависит от четвертого, т.к. вы можете обнаружить ошибку только при регресс тестировании, а это значит мало времени уделено тестированию. В этот риск я бы добавил момент, когда вы выкатились на прод, но заказчику не нравится что-либо.

👉 @seniorFront