Применил паттерн "Адаптер", но что-то пошло не так

👉 @seniorFront

UI - Flip Card

Оригинальные анимированные карточки, реализованные на HTML и CSS.

👉 @seniorFront

Accordion

Оригинальные карточки, свёрстанные и анимированные на HTML и CSS.

👉 @seniorFront

Drag and Drop with JavaScript

В этом видео создаётся Drag and Drop на чистом JS при помощи браузерных событий "dragover" и "drop".

👉 @seniorFront

Trippy Hue Boids

Частицы созданы и анимированы на canvas и чистом JS.

👉 @seniorFront

String incrementer

Вам дана строка. Если она заканчивается числом, то прибавьте к этому числу 1. Если она не заканчивается числом, то вставьте 1 в конец строки.

Примеры:

foo -> foo1

foobar23 -> foobar24

foo0042 -> foo0043

foo9 -> foo10

foo099 -> foo100

👉 @seniorFront

Даты в Javascript наконец-то пофиксят

Из всех последних изменений, которые будут внедрены в ECMAScript, моим любимым с большим отрывом от остальных стало предложение Temporal. Это предложение очень прогрессивное, мы уже можем воспользоваться этим API при помощи полифила, разработанного командой FullCalendar.

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

👉 @seniorFront

​Как часто происходит рендер в React?

Первоначальный рендеринг
Когда компонент впервые добавляется в DOM, происходит его рендеринг. Это единственный раз, когда компонент рендерится в процессе монтирования.

function App() {
  return <MyComponent />;
}

Обновление состояния
Когда состояние компонента изменяется, React вызывает рендеринг компонента. Это позволяет компоненту отобразить новые данные.

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Обновление пропсов
Если родительский компонент передаёт новые пропсы, дочерний компонент будет ререндериться с новыми данными.

function ParentComponent() {
  const [value, setValue] = useState(0);

  return (
    <div>
      <button onClick={() => setValue(value + 1)}>Change Value</button>
      <ChildComponent value={value} />
    </div>
  );
}

function ChildComponent({ value }) {
  return <p>{value}</p>;
}

Обновление контекста
Когда значение контекста изменяется, все компоненты, использующие этот контекст, будут ререндериться.

const MyContext = React.createContext();

function App() {
  const [value, setValue] = useState('initial');

  return (
    <MyContext.Provider value={value}>
      <button onClick={() => setValue('updated')}>Update Context</button>
      <MyComponent />
    </MyContext.Provider>
  );
}

function MyComponent() {
  const contextValue = useContext(MyContext);
  return <p>{contextValue}</p>;
}

Обновление при изменении ключа
Если ключ компонента изменяется, React удаляет старый компонент и добавляет новый, вызывая рендеринг нового компонента.

function App() {
  const [items, setItems] = useState([1, 2, 3]);

  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
      <button onClick={() => setItems([4, 5, 6])}>Change Items</button>
    </ul>
  );
}

Чтобы уменьшить количество ненужных рендеров, можно использовать:

- PureComponent и React.memo для функциональных компонентов.
- shouldComponentUpdate для классовых компонентов.
- useMemo и useCallback для мемоизации значений и функций в функциональных компонентах.

👉 @seniorFront

sticky stacking on scroll

Логика перелистывания карточек реализована в JS и задействуется по событию 'scroll'.

👉 @seniorFront

​Анатомия техдолга. Излечим ли пациент?

Почти все ИТ-компании имеют технический долг, но не у каждой есть с ним сложности. Где же эта тонкая грань?

Данный вопрос становится проблемой, когда он либо бесконтрольный, либо проценты уже слишком высоки. «Долговая яма» очень сильно влияет на вовлеченность команды, особенно в случаях, когда данный код достается «в наследство». Сопровождение такого кода становится тяжелой, а иногда и невыполнимой задачей. Отсюда вытекают негативные последствия:

- Большие временные затраты
- Сложность внедрения новыx фич, которые могут увеличить сам долг.
- Снижение мотивации команды и общей комфортной среды внутри.
- Выгорание и отсутствие интереса.

Один из основных способов решения – рефакторинг кода (контролируемый процесс улучшения кода или процесса старой кодовой базы без внесения в него новых возможностей).

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

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

👉 @seniorFront

Отделяй и делегируй или Как безболезненно разгрузить менеджера

В этой статье я хотел бы ответить на вопрос: на что нужно обратить внимание руководителю при передаче отдельной функции исполнителю? Или всё достаточно просто, и мы зря здесь сегодня собрались? В термин «функция» я закладываю смысл какой-либо прямой деятельности руководителя. Давайте вместе попробуем разобраться и понять, есть ли подводные камни в этом вопросе и, если есть, то какие.

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

👉 @seniorFront

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

Но можно написать свою, или стилизовать готовую. В статье разработчик интерфейсов Яндекс Про рассказывает про плюсы и минусы каждого подхода. 

А какое решение выбрала команда Про, читайте по ссылке: dev.go.yandex

Share & Social Semicircles

Свёрстано и анимировано с использованием возможностей препроцессоров Haml и SCSS.

👉 @seniorFront

CSS & JS Background Animation Effects

В этом видео создаётся CSS анимация, которая запускается при событии 'mousemove'.

👉 @seniorFront

Только вчера же отпуск взял

👉 @seniorFront

Pop Up / Overlay

Свёрстано на HTML и SCSS. Логика раскрытия видео реализована в JS.

👉 @seniorFront

all CSS

Реализовано без использования JS. Свёрстано и анимировано при помощи препроцессоров Pug и SCSS.

👉 @seniorFront

CSS SVG Neon Loader Animation Effects

В этом видео создается с нуля SVG картинка-загрузчик, анимированная в CSS.

👉 @seniorFront