Spotlight Effect

В этом видео создается эффект подсветки курсора на CSS и JS.

👉 @seniorFront

ThreeJS Toys

Создано и анимировано при помощи библиотеки Three.js

👉 @seniorFront

Help the Fruit Guy

Вам дан массив строк, представляющий собой набор фруктов - свежих и испорченных. Для испорченных фруктов добавляется приставка rotten.
Создайте функцию, которая заменит испорченные фрукты свежими.

Пример:
Дано - ["apple","rottenBanana","apple"]
Результат - ["apple","banana","apple"]

👉 @seniorFront

Клиент-серверная архитектура. SA для самых маленьких

Сперва давайте обратимся к всея знаний - великому Интернету и узнаем, что за зверь такой эта клиент-серверная архитектура.

Итак, как гласит гугл:

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

Отсюда понятно, что нам надо разобраться с двумя новыми понятиями: клиент и сервер. Let's go.

👉 @seniorFront

​Назовите отличия директив v-show и v-if во Vue

Это две директивы, которые используются для условного отображения элементов в DOM. Однако они работают по-разному и имеют разные случаи использования. Рассмотрим их отличия более детально.

Основные отличия

Рендеринг в DOM:
Элемент с v-if рендерится в DOM только тогда, когда условие истинно. Если условие ложно, элемент не создаётся и удаляется из DOM.
Элемент с v-show всегда рендерится в DOM, независимо от условия. Однако, его видимость контролируется с помощью CSS-свойства display.

Переключение состояния:
v-if: Переключение между состояниями приводит к созданию или уничтожению элемента в DOM. Это может быть медленнее при частом переключении, так как каждый раз происходит перерисовка.
v-show: Переключение состояния происходит мгновенно, поскольку элемент уже присутствует в DOM, и меняется только его CSS-свойство display.

Использование в условиях:
v-if: Рекомендуется использовать, когда элемент должен быть условно добавлен или удален из DOM. Полезно, когда условие меняется редко.
v-show: Рекомендуется использовать, когда необходимо часто переключать видимость элемента, поскольку это более производительно.

Примеры:

С v-if:

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <p v-if="isVisible">Этот текст отображается только если isVisible истинно</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

В этом примере элемент <p> будет добавляться или удаляться из DOM при каждом нажатии на кнопку.

С v-show:

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <p v-show="isVisible">Этот текст всегда присутствует в DOM, но может быть скрыт</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggle() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

В этом примере элемент <p> всегда присутствует в DOM, но его видимость контролируется с помощью CSS.

👉 @seniorFront

Pixie Dust Input

При вводе текста генерируются частицы и анимируются на canvas.

👉 @seniorFront

​Типы проблемных разработчиков

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

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

Одинокие волки
Они считают себя самыми компетентными и предпочитают работать в одиночку, часто сопротивляясь совместным усилиям. Ведь зачем вам помощь другого человека, если он намного хуже вас? Обычно они участвуют в командных обсуждениях только для того, чтобы сказать всем, что они «могли бы сделать это за 3 дня». Хотя их самоуверенность иногда может быть преимуществом, она также может привести к разобщенности и потенциальному несоответствию действий целям команды. И самое главное – людям не нравится работать с одинокими волками.
Есть два способа управлять одинокими волками – принять их или заставить сотрудничать. Принятие означает, что этот человек очень ценен для вашего бизнеса, и его комфорт важнее, чем общий моральный дух команды. Не рекомендуется, но все же это возможный компромисс, если вы считаете одинокого волка суперпрофессионалом.

Обещающие слишком много
Люди, обещающие слишком много, склонны чересчур оптимистично оценивать свои возможности или время, необходимое для выполнения задач, и скрывать, когда все идет не так, как планировалось. Даже во время обновления статуса они могут сказать: «все отлично», несмотря на то, что им трудно найти решение и они сталкиваются с препятствиями – потому что все еще надеются закончить задачу в срок. Они часто не выполняют свои обещания, что приводит к разочарованию и недоверию в команде и к владельцам продукта.
Управление людьми, которые обещают слишком много включает в себя:
- установление реалистичных ожиданий вместе с членами команды;
- определение подходящего срока для проекта и разделение его на подзадачи (также вместе с членами команды);
- после этого все договариваются, сколько времени займет каждая из этих подзадач.

Ещё больше типов, а также дополнительные советы в статье.

👉 @seniorFront

Как понять, что твой мидл готов стать сеньором? Гайд для тимлида (и не только)

Новый грейд — это не просто лычка IT-спеца. По сути, это кульминация работы над задачами и решений различных кейсов, которыми он занимался на своей позиции. Но на этот новый уровень айтишник переходит не один.
Важным звеном в процессе повышения разраба зачастую оказывается тимлид — он как наставник должен навести «молодого джедая на путь истинный», помочь своему мидлу наконец-то стать сеньором-помидором.

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

👉 @seniorFront

Pastel drawing buttons

Кнопки, стилизованные и анимированные на чистых HTML и CSS.

👉 @seniorFront

Scratch Effects

В этом видео создается эффект защитного слоя, который можно стереть курсором. Реализовано на чистом JS.

👉 @seniorFront

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

👉 @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