Старожилы веб-разработки на месте? К вам вопрос

Споры про выбор инструмента для работы с фронтендом не утихают и никогда не утихнут. React, Vue, Svelte или какая-то ещё библиотека или фреймворк всегда будут иметь последователей.

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

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

#обсуждение

Милое объяснение оператора JOIN в SQL

Оператор JOIN в SQL — это инструмент, который помогает соединить данные из двух или более таблиц, если у них есть что-то общее, например, одинаковые значения в определённых столбцах (ID, названия и т. д.).

Держите ролик, где простыми словами объясняют работу этого оператора, а что самое главное — всё это наглядно и с котиками.

#sql #бд

Compound Component: избавляемся от props-drilling и получаем гибкий API

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

#фронтенд #react

Пятнашки на Vue

Полезный codepen-проект для тех, кто изучает Vue. Сможете не только изучить алгоритм игры, но и посмотреть, как это реализовано на фреймворке.

https://codepen.io/leemartin/pen/VwmdyNQ

#codepen #vue

Синтезатор в браузере: создаём музыкальный инструмент на Web Audio API

AudioContext, OscillatorNode и GainNode — всё, что нужно, чтобы браузер зазвучал. Этот пошаговый материал научит вас превращать вашу клавиатуру в мини-аккордеон: вы подготовите таблицу частот, подключите осцилляторы разной формы волн, пропишите обработчики keypress/keyup и настроите все в Svelte.

В итоге вы получите полноценный JavaScript-инструмент с открытым исходным кодом. Все подробности в статье.

#фронтенд #svelte

SOLID на фронтенд примерах

В этом плейлисте собраны 6 уроков по SOLID для фронтенд-разработчиков. Вы узнаете про принцип единственной ответственности, использование DIP, LSP, OCP и не только.

#solid@tproger_web #фронтенд@tproger_web

Матовое стекло следующего уровня с backdrop-filter в CSS

Для создания эффекта матового стекла на веб-сайте самый просто способ — использования filter: blur(). Но Джош Комо предлагает вариант с помощью backdrop-filter: blur(), ещё одного CSS-свойства, которое делает эффект круче.

В этой статье вы узнаете, чем оно отличается от классического свойства filter, как браузер вычисляет «то, что под элементом», какие эффекты (blur, brightness, contrast…) сочетаются между собой и где сегодня есть поддержка. В конце — интерактивная песочница: меняйте параметры и сразу видите результат.

#фронтенд #css

В гостях хорошо, а http://127.0.0.1 лучше

Без сборщика: подключаем JS-библиотеку напрямую

Чтобы притянуть стороннюю библиотеку в проект, не обязательно городить Webpack или Vite. Здесь разбираются три вида файлов, которые обычно лежат в npm-дистрибутиве: модули ES, «классические» глобальные переменные и CommonJS, способы находить нужный вариант в dist, писать компактный import map и подключать сложные модули даже без Node.

В довесок — чек-лист инструментов (esm.sh, download-esm, JSPM) и подсказки, как определить тип файла за пару секунд.

#фронтенд #javascript

Что такое примеси (mixins) в JS

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

Почему вообще понадобились примеси:
1. В JavaScript только одно наследование «по классам». Класс может расширять ровно один другой класс (extends). Если же необходимо поделиться возможностями между несколькими иерархиями, наследование начинает «скрипеть».
2. Составление (composition) гибче, чем наследование. Примеси позволяют «составлять» объект из маленьких независимых блоков логики, не связывая их жёстко цепочкой «родитель → потомок».

Как это выглядит в коде:

// 1. Описываем примесь как обычный объект с методами
const canLog = {
  log(message) {
    console.log(`[${this.name}] ${message}`);
  }
};

// 2. Функция-помощник, которая «подмешивает» методы
function applyMixin(targetClass, mixin) {
  Object.assign(targetClass.prototype, mixin);
}

// 3. Используем
class User {
  constructor(name) { this.name = name; }
}

applyMixin(User, canLog);

const u = new User('Анна');
u.log('Привет!'); // [Анна] Привет!

Вы только что сделали любого User умеющим писать лог в консоль, не меняя иерархию классов.

Начиная с ES2015, популярна форма, где примесь — это функция, возвращающая класс:

const TimestampMixin = (Base) => class extends Base {
  get createdAt() {
    if (!this._createdAt) this._createdAt = Date.now();
    return this._createdAt;
  }
};

class Article {}
class Comment {}

class ArticleWithTime extends TimestampMixin(Article) {}
class CommentWithTime extends TimestampMixin(Comment) {}

Так вы оборачиваете любой базовый класс, не трогая оригинальную цепочку extends.

Плюсы примесей:
1. Повторное использование кода. Один раз написали — применили в нескольких местах, избавившись от копипаста.
2. Гибкая композиция. Собираете объект как конструктор LEGO из маленьких блоков логики.
3. Изолированность обязанностей. Каждая примесь решает одну задачу, поэтому код легче читать и тестировать.

#простымисловами #javascript #основы

Большой сборник задач для фронтендеров

Тут собрано более 600 заданий по различным темам для проверки ваших знаний. А для удобства есть встроенный редактор, в котором можно проверить свой вариант решения, не переходя в другой редактор кода или IDE.

Проверить себя можно тут: https://bigfrontend.dev/

#фронтенд #инструменты

Анимация раскидывания частиц на чистом JavaScript

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

Подробнее: https://codepen.io/ma77os/pen/ExOKBay

#codepen

Уходит эпоха

Мини-Reddit в Telegram: бот + React-мини-апп за неделю

В этой статье показан полный путь создания сообщества «как на Reddit», но прямо в Telegram Mini App. Бот на node-telegram-bot-api управляет постами и голосами, мини-приложение на React рендерит древовидные комментарии и недельный ТОП, API-сервер на Express раздаёт данные, а MySQL и Redis держат хранилище. MVP подняли за одну рабочую неделю, активно используя ИИ для генерации 80–90 % кода.

#фронтенд #бэкенд #telegram

Web API, которые функционально приближают веб-приложения к нативным

Чтобы дать пользователям доступ к функциям, привычным в нативных приложениях, и добавить новые, можно использовать Web API.

В статье подробно рассказали о них и раскрыли некоторые тонкости: https://habr.com/ru/companies/clevertec/articles/820227/

#javascript #api #react

От Moment.js к Temporal: новый стандарт работы с датами в JavaScript

Унаследованный Date API путает тайм-зоны, мутирует объекты и требует громоздкого кода. В этой статье мы познакомимся с его альтернативами: Moment.js и date-fns, а затем посмотрим, как встроенный Temporal решает те же задачи — иммутабельность, наносекундная точность, богатая работа с тайм-зонами и разные календарные системы.

Вас ждут: наглядные примеры Temporal.PlainDate, ZonedDateTime, Instant, операции add/round/with и таблица сравнений с Moment.js и date-fns.

#фронтенд #javascript

Недавно узнали, что ОТП Банк меняет позиционирование и берет курс на смелость и дерзкую философию. А еще выяснили, что у них работает 700+ айтишников и за их работой можно наблюдать в этом канале.

Знаем, что его ведет последователь Agile (собственно, этой методологии и придерживаются в Банке). Он делится вакансиями, статьями о том, как пилят фичи в Банке, финтех-новостями, экспертными комментами коллег. Да что уж там — в канале можно просто поболтать о насущном, и даже договориться о том, чтобы поучаствовать в батле с ребятами из ОТП.

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

Это #партнёрский пост