Animated Circular Progress Bar

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

👉 @seniorFront

Monument Valley in Space

Оригинальная карточка с эффектом при наведении, реализованная на angular.

👉 @seniorFront

Merged String Checker

На собеседовании вам предстоит написать алгоритм, проверяющий, может ли строка(s), быть сформирована из двух других строк, part1 и part2.

Ограничение состоит в том, что символы в part1 и part2 должны располагаться в том же порядке, что и в s.

Пример:

'xcyc', 'xc', 'yc' —> // true
'xcyc', 'yc', 'xc' —> // true
'codewars', 'code', 'wars' —> // true
'codewars', 'cdwr', 'oeas' —> // true
'codewars', 'code', 'code' —> // false

👉 @seniorFront

Команда на одной волне: неформальные правила ИТ разработки, которые реально работают

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

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

👉 @seniorFront

Зачем размещают статический контент на отдельные домены?

Статический контент – это файлы, которые не изменяются на сервере и могут кэшироваться у пользователей:
- CSS, JavaScript
- Изображения, видео
- Шрифты, иконки

Чтобы ускорить загрузку сайта и снизить нагрузку на основной сервер, статические файлы часто выносят на отдельный домен или CDN.

Зачем использовать отдельные домены для статики?

Разгрузка основного сервера
Основной сервер обрабатывает только динамический контент (например, API-запросы). Статические файлы отдаются с другого сервера быстрее

Ускорение загрузки сайта
Браузеры ограничивают количество одновременных соединений к одному домену (обычно 6-8). Если статика загружается с другого домена, браузер может скачивать больше файлов одновременно.

Кэширование и CDN
Отдельный домен можно использовать через CDN (Cloudflare, AWS S3, Vercel, Fastly). Это уменьшает задержки и ускоряет загрузку контента по всему миру

Уменьшение размера cookie
Основной сайт передает cookies при каждом запросе. Если статика загружается с отдельного домена без cookies (static.example.com), это снижает трафик

Как настроить отдельный домен для статики?

Создать поддомен для статики
Обычно статику размещают на поддомене:
static.example.com
cdn.example.com
assets.example.com

Настроить веб-сервер или CDN
Если используем NGINX:

  server {
    server_name static.example.com;
    root /var/www/static;
  }

👉 @seniorFront

Lowpoly holy space cow

Это SVG картинка, анимированная в JS.

👉 @seniorFront

​КАША в голове, КАША в коде — как навести порядок

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

Фундамент важнее фасада
Сначала разберись в основах, а потом строй "свой Instagram". Без понимания основ твой код — декорация, которая рухнет на первом вопросе.

Пиши понятный код
Назови переменные так, чтобы через неделю не гадать, что делает doIt(). Простые имена и структура спасут нервы тебе и коллегам.

Не зубри, а ищи
Не пытайся запомнить всё. Знай, что инструмент существует, и умей его найти (Google/ИИ в помощь).

Копипаст — не грех
Гуглить и копировать — норм. Главное, учись задавать вопросы чётко, а не "у меня не работает".

Уточняй проблему
Не понимаешь код? Разбей проблему на части: что именно неясно? Назови проблему — и половина уже решена.

Простота > сложность
Сложные имена и конструкции не делают код умнее. Делай понятно, читабельно и без лишних заморочек.

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

Итог: строй фундамент, пиши просто, не бойся гуглить и экспериментировать. Тогда каша в голове превратится в порядок!

👉 @seniorFront

Роль СТО: как из разработчика вырасти в технологического лидера

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

👉 @seniorFront

Get lost into space

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

👉 @seniorFront

CSS Card Hover Effects

В этом видео создаются карточки с 3D эффектом переворота при наведении на HTML и CSS.

👉 @seniorFront

Pov: выдал джуну задачу и наблюдаешь за работой

👉 @seniorFront

Space Junk preloader

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

👉 @seniorFront

One Page sliding Nav

Навигационное меню, реализованное с использованием препроцессоров Pug и Stylus.

👉 @seniorFront

Wavy Shape Card

В этом видео создается карточка с границей в форме волны на чистом CSS

👉 @seniorFront

Wow Winter Blanket

Реализовано с использованием библиотеки Three.js

👉 @seniorFront

Сравнение строк

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

Первый параметр функции - создаваемая строка.
Второй и третий - используемые строки

Функция не должна быть чувствительна к регистрам, а также должна использовать все символы из строк.

Примеры:

isMatching("email box", "b aIl", "Mo x e") return true
isMatching("bouh", "0b", "uh") return false
isMatching("kata", "kt", "aaa") return false

👉 @seniorFront

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

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

Лично я более 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