3D Spinner

В этом виде создается трехмерный Spinner на чистом CSS.

👉 @seniorFront

Input range kawaii style

Оригинальные input type="range", реализованные на чистом CSS.

👉 @seniorFront

"Волна" на стадионе

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

Правила :
1. Входная строка всегда будет в нижнем регистре, но может быть и пустой.
2. Если символ в строке является пробелом, то передайте его, как если бы это было пустое место

Пример

wave("hello") => ["Hello", "hEllo", "heLlo", "helLo", "hellO"].

👉 @seniorFront

Один выгоревший сеньор или два джуна с горящими глазами?

— Кому бы вы разрешили себя оперировать — одному опытному уставшему хирургу или двум интернам с горящими глазами?
Многое зависит от контекста. Удалить вросший волос можно доверить и самому себе.

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

Не работал на серьезных проектах — не надо обобщать

👉 @seniorFront

​Зачем необходим DOM?

DOM (Document Object Model) необходим для взаимодействия с веб-страницами и управления их содержимым, структурой и стилями программным образом. DOM представляет собой программный интерфейс для HTML и XML документов. Он описывает логическую структуру документов и позволяет языкам программирования взаимодействовать с ними.

Зачем он нужен
1. Доступ к элементам страницы: Позволяет программно получать доступ к элементам HTML-документа (теги, текст, атрибуты) и манипулировать ими.
2. Изменение содержимого: С помощью него можно изменять содержимое страницы динамически, например, обновлять текст, менять изображения, добавлять или удалять элементы.
3. Обработка событий: Позволяет обрабатывать события, такие как клики, нажатия клавиш, прокрутка и другие взаимодействия пользователя с веб-страницей.
4. Динамическое изменение структуры страницы: Предоставляет методы для добавления, удаления и изменения элементов и атрибутов, что позволяет динамически изменять структуру страницы.
5. Интерактивность: С помощью него можно создавать интерактивные веб-приложения, которые реагируют на действия пользователя без перезагрузки страницы.

Как он работает
Представляет собой древовидную структуру, где каждый элемент страницы является узлом дерева. Вершиной дерева является объект document, который представляет весь HTML-документ. Узлы могут быть элементами (<div>, <p>, <a> и т.д.), текстом, комментариями и другими типами.

Пример HTML-документа:

<!DOCTYPE html>
<html>
<head>
  <title>Document Object Model</title>
</head>
<body>
  <h1>Hello, world!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

Структура для этого документа:

document
 └── html
     ├── head
     │   └── title
     │       └── "Document Object Model"
     └── body
         ├── h1
         │   └── "Hello, world!"
         └── p
             └── "This is a paragraph."

Основные методы и свойства

Доступ к элементам:
✅document.getElementById(id): Возвращает элемент по его id.
✅document.getElementsByClassName(className): Возвращает все элементы с указанным классом.
✅document.getElementsByTagName(tagName): Возвращает все элементы с указанным тегом.
✅document.querySelector(selector): Возвращает первый элемент, соответствующий CSS селектору.
✅document.querySelectorAll(selector): Возвращает все элементы, соответствующие CSS селектору.

Создание и удаление элементов:
✅document.createElement(tagName): Создает новый элемент.
✅parentElement.appendChild(childElement): Добавляет элемент в конец дочерних элементов родителя.
✅parentElement.removeChild(childElement): Удаляет элемент из дочерних элементов родителя.

Изменение содержимого и атрибутов:
✅element.innerHTML: Изменяет или получает HTML-содержимое элемента.
✅element.textContent: Изменяет или получает текстовое содержимое элемента.
✅element.setAttribute(name, value): Устанавливает значение атрибута элемента.
✅element.getAttribute(name): Получает значение атрибута элемента.

Пример:

// Изменение текста заголовка
const header = document.querySelector('h1');
header.textContent = 'Hello, DOM!';

// Добавление нового параграфа
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph.';
document.body.appendChild(newParagraph);

// Изменение атрибута
const link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');

👉 @seniorFront

Wallet App Animation

Свёрстано с использованием препроцессоров Pug и SCSS. Анимировано библиотекой TweenMax.

👉 @seniorFront

​Ожидание vs реальность: какие взгляды я поменял за 10 лет в разработке

Старший инженер-программист в Amazon Крис Киль (Chris Kiehl), автор книги по дата-ориентированному программированию на Java поделился заметкой о том, как изменились его взгляды за 10 лет пребывания в индустрии разработки ПО.

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

О чём поменял своё мнение
Вот что я верю сейчас, но о чём раньше бы поспорил:

- Простота — не данность. Она требует постоянной работы.
- Нечем гордиться, если вы оперируете и мыслите сложными конструкциями.
- Типизация в языках программирования нужна в командах с разным уровнем опыта.
- Java — великий язык, потому что скучный.
- Среды REPL (интерактивные среды исполнения) бесполезны в проектировании, но как инструмент для исследований они хороши.
- Львиную долю программирования нужно выполнять задолго до написания первой строчки кода.
- Frontend-разработка — это кафкианский кошмар, который я больше не выношу.
- Привлекательность — это не метрика.
- Эффективное управление бесценно. За свою карьеру я многое повидал и пережил прежде, чем сам узнал, что такое хороший менеджмент.
- DynamoDB — хорошая база данных, только если ваша рабочая нагрузка не выходит за рамки её возможностей.
- Объекты хороши исключительно для тех целей, для которых они предназначены. Слепая преданность функциональному подходу — глупость.

О чём сформировал мнение

- Разработка — это про коммуникацию.
- Никогда не используйте полные монады в Java.
- Планировщик запросов — это злая госпожа.
- Если что-то кажется мне простым — это точно что-то, чего я до конца не понимаю.
- Молодым разработчикам нужно давать пространство для ошибок и экспериментов.
- Нужно активно инвестировать в развитие своих софт-скиллов. Это быстро окупается.
- В разработке приложений мало места для абстракций. Просто пишите нужный код.
- А вот разработка библиотек, наоборот, основана на абстракциях. Потратьте время на поиски алгебраических структур.
- ORM — это дьявол во всех языках и реализациях. Используйте SQL.
- Главная беда функционального программирования — это функциональные программисты.
- В долгосрочной перспективе вы глубоко пожалеете о выборе бессерверных функций.
- Типы — это просто утверждения о мире, в котором работает ваш код.
- Распределённые блокировки по-прежнему и по какой-то непонятной причине остаются очень сложными.
- Навыки формального моделирования и анализа — это база.
- Изоляция — важнейшее свойство хорошего набора интеграционных тестов.
- Худшее, что можно выбрать для разработки приложений общего назначения — это DynamoDB.
- Большинству плевать на ремесло программиста. Берегите тех, кому не всё равно. С остальным смиритесь.
- Будущее за языками с постепенной зависимой типизацией.
- Вы буквально не можете добавлять к тестовому коду слишком много комментариев (готов поспорить с тем, кто сможет).

О чём мнение не поменялось
- Те, кто заморачивается над стилем кода, правилами линтинга и прочими мелочами — извращенцы. Занимайтесь более важными вещами.
- Покрытие кода никак не связано с качеством кода. А зачастую и вовсе обратно пропорционально ему.
- Монолиты остаются довольно няшными.
- Крайне сложно превзойти десятилетия исследований и доработок реляционных баз данных.
- Использование микросервисов нужно обосновывать, а то их всё чаще воспринимают как решение по умолчанию.
- Большинство проектов не нужно масштабировать. Иллюзия этой необходимости только вредит.
- Если завтра исчезнут 93%, а может быть, даже 95,2% проджектов — ничего не изменится, а то и повысится эффективность работы.

А вы согласны с автором или в каких-то моментах готовы поспорить, потому что ваш опыт говорит о другом? Менялось ли ваше отношение к разработке в процессе работы? Расскажите.

👉 @seniorFront

Как наладить управление ИТ командой, не привлекая внимания санитаров (про оценки и списания)

Я давно наблюдаю, как ломаются копья в вечных спорах: "Нужно ли оценивать задачи?" и "Нужно ли списывать время?". Мне кажется, я нашёл тот баланс, который позволяет, с одной стороны, учитывать трудозатраты, а с другой — не превращать процесс в никому не нужную бюрократию.

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

В статье ниже я собрал основные подходы, выделил их плюсы и минусы, а в конце, опираясь на свой опыт (25+ лет внедрения проектов и несколько лет развития собственного продукта для управления IT-командами), делаю вывод о наиболее эффективном подходе.

👉 @seniorFront

Stack Slider with Animation

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

👉 @seniorFront

Скриншотное тестирование во фронтенде: современный подход к поиску визуальных багов

Традиционные подходы к тестированию на многих уровнях уже не успевают за реалиями фронтенд-разработки: ручное тестирование становится слишком трудоемким, а написание unit- или end-to-end-тестов не всегда позволяет отследить именно визуальные изменения. 

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

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

Статья: https://habr.com/ru/companies/yandex/articles/890548/

Cursor Move Animation

В этом видео создается анимация загрузки, следующая за курсором на HTML и JS.

👉 @seniorFront

Нужна помощь зала

👉 @seniorFront

Group button

В качестве кнопок используются SVG иконки, стилизованные в CSS с использованием препроцессора Stylus.

👉 @seniorFront

CSS Bulb Switch

Анимированный переключатель, реализованный на HTML и Stylus.

👉 @seniorFront

Circle Scroll Progress Indicator

В этом видео создается индикатор прогресса, реализованный в виде SVG картинки, анимированной в CSS.

👉 @seniorFront

Email Form Animation

Форма отправки E-mail в виде письма в конверте, реализованная на HTML и SCSS.

👉 @seniorFront

Responsible Drinking

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

Примеры

 "1 beer"  -->  "1 glass of water"
 "1 shot, 5 beers, 2 shots, 1 glass of wine, 1 beer"  -->  "10 glasses of water"

👉 @seniorFront

Геймификация продукта: почему призы и награды — не главный мотиватор пользователей

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

👉 @seniorFront

Какие преимущества у DI?

Dependency Injection (DI) – это паттерн проектирования, который помогает разделять зависимости и делает код гибче, тестируемее и поддерживаемее. Вместо того чтобы создавать зависимости внутри класса, они передаются (инъектируются) извне.

Почему DI полезен?

Уменьшает связность кода (Loose Coupling)
Вместо того чтобы жестко привязывать один модуль к другому, DI передает зависимости снаружи.

class UserService {
  constructor() {
    this.db = new Database(); // Прямо создаем зависимость
  }

  getUser(id) {
    return this.db.findUserById(id);
  }
}

С DI

class UserService {
  constructor(db) {
    this.db = db; // DI передает зависимость извне
  }

  getUser(id) {
    return this.db.findUserById(id);
  }
}

// Передаем нужную зависимость
const database = new Database();
const userService = new UserService(database);

Улучшает тестируемость (Unit-тесты проще)
С DI можно подменять зависимости на заглушки (mock, fake, stub).

const userService = new UserService(); // Всегда использует реальную Database
userService.getUser(1); // Как протестировать без реальной БД? 🤔

С DI (можно подменить зависимость)

class FakeDatabase {
  findUserById(id) {
    return { id, name: "Тестовый пользователь" };
  }
}

const fakeDb = new FakeDatabase();
const userService = new UserService(fakeDb);

console.log(userService.getUser(1)); // ✅ Тест без реальной БД

Улучшает расширяемость (легко менять зависимости)
Допустим, сначала использовали MySQLDatabase, но решили перейти на MongoDatabase.

class UserService {
  constructor() {
    this.db = new MySQLDatabase(); // Нужно менять здесь
  }
}

С DI (добавляем новую зависимость без изменения кода UserService)

const db = new MongoDatabase(); // Просто передаем другую зависимость
const userService = new UserService(db);

Упрощает управление зависимостями (через DI-контейнеры)
В крупных приложениях удобно использовать DI-контейнер (например, InversifyJS для JavaScript/TypeScript).

import "reflect-metadata";
import { Container, injectable, inject } from "inversify";

@injectable()
class Database {
  findUserById(id) {
    return { id, name: "База данных" };
  }
}

@injectable()
class UserService {
  constructor(@inject(Database) db) {
    this.db = db;
  }

  getUser(id) {
    return this.db.findUserById(id);
  }
}

// Настраиваем DI-контейнер
const container = new Container();
container.bind(Database).toSelf();
container.bind(UserService).toSelf();

// Получаем объект с нужными зависимостями
const userService = container.get(UserService);
console.log(userService.getUser(1));

👉 @seniorFront