Техники антипродуктивности

К чёрту продуктивность.

Лично я более 10 лет варился в супе техник продуктивности и борьбы с прокрастинацией, многое что пробовал. Искал ту технику, которая будет подходить лично мне. Ведь, кажется, что надо найти тот подход, который сработает для тебя. И тогда ты вдруг станешь успевать делать больше дел в срок.

Но это не так, и в этой статье я попробую донести смысл того, как действительно делать больше, не становясь более продуктивным.

👉 @seniorFront

​Как можно работать с датами в js?

В JavaScript для работы с датами можно использовать:

- Date – встроенный объект
- Библиотеку Intl.DateTimeFormat – для форматирования
- Библиотеки (moment.js, date-fns, luxon) – для удобной работы

Встроенный объект `Date`
Создание даты

const now = new Date(); // Текущая дата и время
console.log(now); // Например: 2025-02-25T12:34:56.789Z

Способы создания даты

new Date(); // Текущая дата
new Date(2025, 1, 25); // 25 февраля 2025 (месяцы с 0)
new Date("2025-02-25"); // ISO строка
new Date(1708850400000); // Unix timestamp (в мс)

Получение значений

const date = new Date();
console.log(date.getFullYear()); // 2025
console.log(date.getMonth());    // 1 (февраль, потому что январь — 0)
console.log(date.getDate());     // 25
console.log(date.getDay());      // 2 (вторник, потому что воскресенье — 0)
console.log(date.getHours());    // Часы
console.log(date.getMinutes());  // Минуты
console.log(date.getSeconds());  // Секунды
console.log(date.getTime());     // Время в миллисекундах (Unix timestamp)

Изменение даты

const date = new Date();
date.setFullYear(2030);
date.setMonth(11); // Декабрь
date.setDate(31);
console.log(date); // 31 декабря 2030

Форматирование даты

const date = new Date();
console.log(date.toDateString()); // "Tue Feb 25 2025"
console.log(date.toISOString());  // "2025-02-25T12:34:56.789Z"
console.log(date.toLocaleString()); // Локальное представление
console.log(date.toUTCString());  // "Tue, 25 Feb 2025 12:34:56 GMT"

Форматирование с Intl.DateTimeFormat

const date = new Date();
const formatter = new Intl.DateTimeFormat("ru-RU", {
    year: "numeric",
    month: "long",
    day: "numeric",
    weekday: "long",
});
console.log(formatter.format(date)); // "вторник, 25 февраля 2025 г."

Библиотеки (более удобные способы)
date-fns (легковесная альтернатива Moment.js)

npm install date-fns

import { format, addDays } from "date-fns";

const now = new Date();
console.log(format(now, "dd.MM.yyyy HH:mm")); // 25.02.2025 15:30
console.log(addDays(now, 5)); // Дата + 5 дней

moment.js (устаревший, но популярный)

npm install moment

import moment from "moment";

const now = moment();
console.log(now.format("DD.MM.YYYY HH:mm")); // 25.02.2025 15:30
console.log(now.add(5, "days").format("DD.MM.YYYY")); // +5 дней

luxon (современная альтернатива Moment.js)

npm install luxon

import { DateTime } from "luxon";

const now = DateTime.now();
console.log(now.toFormat("dd.MM.yyyy HH:mm")); // 25.02.2025 15:30
console.log(now.plus({ days: 5 }).toFormat("dd.MM.yyyy")); // +5 дней

Разница между датами

const date1 = new Date("2025-02-25");
const date2 = new Date("2025-03-01");

const diff = date2 - date1; // Разница в миллисекундах
console.log(diff / (1000 * 60 * 60 * 24)); // Разница в днях (4)

👉 @seniorFront

Canvas Loader

Реализовано на canvas и чистом JS.

👉 @seniorFront

Почему найти работу в 2025 году стало почти невозможно?

Раньше поиск работы был прост: обновил резюме, откликнулся на вакансии, прошёл пару собеседований — и вот оффер. Больше откликов — больше шансов. Но в 2025 году это уже квест на выживание. Требуют 5 лет опыта, возраст до 30, навыки работы за троих, знание нейросетей и TypeScript, готовность к стрессу и KPI без чёткого ТЗ. Найти работу стало не просто сложно — почти нереально. Разбираемся, почему.

"Низкая безработица" — миф?
Росстат рапортует: безработица на уровне 2,4% — исторический минимум. Но реальность другая. На hh.ru в мае 2025 вакансий на 28% меньше, чем в 2024, а резюме — на 29% больше. На одну позицию разработчика — 100–500 откликов. HR’ы тонут в резюме, а соискатели — в конкуренции.

Джунам дверь захлопнулась
Новичкам и карьеристам-свитчерам особенно тяжело:
- Стажировок почти нет — компании не хотят обучать, им нужны готовые мидлы+.
- На junior-позиции откликаются опытные специалисты, которых сократили.
- Рынок переполнен однотипными резюме от выпускников курсов.

IT уже не тот остров стабильности
До 2022 года IT-шники жили в раю: открой резюме на hh.ru — и отбивайся от рекрутеров. Уволился без плана? Найдёшь работу за пару недель. Теперь даже мидлы+ с 5 годами опыта ищут месяцами. Мои знакомые с сильным бэком сидят без офферов — и это норма.

Почему так?
- После 2022 года компании урезали бюджеты, многие уехали, рынок стал локальным.
- ИИ забирает простые задачи: джунам не дают шанса, ведь код пишут нейросети.
- Хайп «войти в IT» породил толпу одинаковых кандидатов.
- Зарплаты стагнируют, а требования растут: ждут многозадачности за скромные деньги.

Что ещё бесит?
- Собеседования превратились в марафон: 3+ этапа, тестовые, которые никто не смотрит.
- Работодатели предлагают проектные роли или частичную занятость, но с полной ответственностью.
- Обучение? Забудьте. Все хотят готовых спецов.

Что делать?
Рынок сузился, конкуренция бешеная, а требования запредельные. Устроиться в 2025 — это подвиг, а не норма. Но если IT — ваше, не сдавайтесь. Работайте над навыками, ищите ниши, где ИИ пока не рулит, и держите фокус. Прорвётесь!

P.S. Это не нытьё, а честный взгляд на рынок. Если вы в поиске работы — дело не только в вас. Рынок перегрелся и забыл про новичков. Но у тех, кто горит делом, шансы есть всегда.

👉 @seniorFront

UX не так прост. 18 примеров темных паттернов

Темные паттерны, также известные как обманные или манипулятивные, — элементы UX-дизайна, которые подталкивают (может и не умышленно) пользователей к действиям, которые те не планировали совершать.

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

В краткосрочной перспективе такой подход вполне может принести выгоду вроде роста продаж или вовлеченности. А что в долгосрочной? Подрыв доверия и вред пользователям? В статье разбираем, что такое темные паттерны, оцениваем их распространенность и рассматриваем 18 конкретных примеров.

👉 @seniorFront

Direction-aware 3D hover effect

В JS создана логика определения стороны, с которой приходит курсор пользователя и установки соответствующего CSS класса.

👉 @seniorFront

Responsive Image Slider

В этом видео создается анимированная карусель картинок на HTML и CSS.

👉 @seniorFront

Поймали JavaScript за руку!

👉 @seniorFront

Pizza

Анимированная 3D пицца, реализованная на HTML и SCSS.

👉 @seniorFront

CSS scroll down button

Подборка анимированных кнопок прокрутки, реализованных на HTML и CSS.

👉 @seniorFront

Cursor in & Out Ripple Effects

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

👉 @seniorFront

Gooey Menu

Анимированное меню, реализованное на HTML и SCSS с использованием SVG фильтров.

👉 @seniorFront

Sum of two lowest positive integers

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

Например, когда массив передается как [19, 5, 42, 2, 77] вывод должен быть 7.

👉 @seniorFront

Как спасти проект, если нашли баги перед релизом

Документация есть, тесты написаны, проверки закончили, даже QA не выгоревший. И всё равно за день до выкладки что-то ломается. Мы собрали истории — из больших и не очень команд — о том, как баги всплывают в последний момент и что с этим делать, если вы не Google, а просто хотите выкатиться без боли.

👉 @seniorFront

Как отследить изменение поля объекта?

Чтобы отслеживать изменения свойств объекта в JavaScript, можно использовать несколько методов, каждый из которых подходит для различных случаев.

Использование Proxy
Proxy является мощным и гибким способом перехвата и настройки операций с объектами, включая чтение и запись свойств.

const handler = {
    get(target, property) {
        console.log(`Getting value of ${property}`);
        return target[property];
    },
    set(target, property, value) {
        console.log(`Setting value of ${property} to ${value}`);
        target[property] = value;
        return true;
    }
};
const person = {
    name: 'Alice',
    age: 25
};
const proxyPerson = new Proxy(person, handler);
proxyPerson.name = 'Bob'; // Setting value of name to Bob
console.log(proxyPerson.name); // Getting value of name // Bob

Использование Object.defineProperty
Object.defineProperty позволяет определить новое или изменить существующее свойство непосредственно на объекте, позволяя добавить геттеры и сеттеры для отслеживания изменений.

const person = {
    _name: 'Alice',
    _age: 25
};
Object.defineProperty(person, 'name', {
    get() {
        console.log('Getting name');
        return this._name;
    },
    set(value) {
        console.log(`Setting name to ${value}`);
        this._name = value;
    }
});
Object.defineProperty(person, 'age', {
    get() {
        console.log('Getting age');
        return this._age;
    },
    set(value) {
        console.log(`Setting age to ${value}`);
        this._age = value;
    }
});
person.name = 'Bob'; // Setting name to Bob
console.log(person.name); // Getting name // Bob
person.age = 30; // Setting age to 30
console.log(person.age); // Getting age // 30

Использование библиотеки MobX
MobX — это библиотека для управления состоянием, которая делает состояния наблюдаемыми и автоматически синхронизирует их с пользовательским интерфейсом.

import { observable, autorun } from 'mobx';
const person = observable({
    name: 'Alice',
    age: 25,
    setName(name) {
        this.name = name;
    },
    setAge(age) {
        this.age = age;
    }
});
// Автоматически вызываемая функция при изменении наблюдаемого состояния
autorun(() => {
    console.log(`Name: ${person.name}, Age: ${person.age}`);
});
person.setName('Bob'); // Name: Bob, Age: 25
person.setAge(30); // Name: Bob, Age: 30

Наблюдатель на изменение (MutationObserver)
Для отслеживания изменений в DOM можно использовать MutationObserver. Это не напрямую связано с объектами, но полезно для отслеживания изменений в элементах DOM.

const targetNode = document.getElementById('target');
const config = { attributes: true, childList: true, subtree: true };
const callback = function(mutationsList, observer) {
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('The ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
targetNode.setAttribute('data-test', 'value');

👉 @seniorFront

Responsive Parallax Drag-slide

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

👉 @seniorFront

​Мы — не семья

Когда устраиваешься в компанию, тебе обещают интересные задачи, рост и нормальный график. Но потом приходит письмо: «Мы — как семья, у нас общие ценности, мы делаем великое дело». Ты улыбаешься, думаешь: «Ладно, семья так семья». А потом — зарплату не повышают, потому что «недостаточно восхитительных отзывов», а коллегу и вовсе увольняют за «несоответствие». Разве с семьёй так поступают?

Ценности — это маркетинг
Корпоративные ценности — не душа компании, а инструмент. «Открытость», «смелость», «инновационность» — красивые слова, которые придумывают маркетологи и HR, чтобы оправдать низкие зарплаты «великой миссией». Это не скрепы, а лендинг для сотрудников.

Как появляются ценности
В стартапе на этапе MVP никто не думает о «миссии». Команда живёт кодом и кофе. Но когда людей становится больше, появляется хаос. Тогда HR говорит: «Нужны ценности, чтобы все были на одной волне». Так рождается неофициальная конституция компании.

Почему это работает
Человек хочет быть частью группы. Назови его «братом» — и мозг решит, что это безопасно. Особенно если ты на удалёнке и тимлид ближе, чем родные. Хочется верить, что работа — это «дело жизни», а не просто зарплата. И вот ты уже читаешь конфлюенс как Библию.

Но это становится давлением
Ценности превращаются в рычаг: задержись, потому что «мы же команда»; чувствуй вину, если закрыл ноут в 18:00; переживай за дедлайн, как за свою жизнь. Ты сам соглашаешься, хотя тебя никто не заставляет.

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

Что делать

- Не очаровываться. Компания — не семья, а сделка. Ты — профессионал, делающий нужную работу.
- Иметь свои ценности. Уважай команду, но не принимай слоганы как догму.
- Не бояться быть «не своим». Не всем нужны тимбилдинги и йога. Можно просто хорошо работать.

Хорошая компания платит за работу и уважает твои границы. Мы — не семья. Мы — взрослые люди с договором. И этого достаточно.

👉 @seniorFront

Как мы внедрили единый шаблон тикетов для разработчиков и упростили работу команды

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

👉 @seniorFront

Banksy Shredder

Реализовано на Vue и стилизовано в CSS. Есть возможность добавлять свою картинку через input type="file".

👉 @seniorFront

Scroll Animation Effects for Website

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

👉 @seniorFront