Веб-страница
25 May 2025 14:03
Web API, которые функционально приближают веб-приложения к нативным
Чтобы дать пользователям доступ к функциям, привычным в нативных приложениях, и добавить новые, можно использовать Web API.
В статье подробно рассказали о них и раскрыли некоторые тонкости: https://habr.com/ru/companies/clevertec/articles/820227/
#javascript #api #react
Читать полностью…
Веб-страница
24 May 2025 09:33
Анимация раскидывания частиц на чистом JavaScript
Вы наверняка встречали такой эффект, как на видео. Часто для его реализации используются уже готовые бибилотеки. Но в этот раз предлагаем вам посмотреть, как повторить такой эффект с помощью чистого JS-кода.
Подробнее: https://codepen.io/ma77os/pen/ExOKBay
#codepen
Читать полностью…
Веб-страница
23 May 2025 09:34
Что такое примеси (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 #основы
Читать полностью…
Веб-страница
22 May 2025 15:06
Делитесь своим опытом в опросе про облака
Мы готовим большое исследование по облачным технологиям и хотим узнать ваше мнение.
Расскажите, как вы работаете с облаками, какие у вас возникают вопросы или трудности. Фидбэк можно оставить в этой гугл-форме
Спасибо 🙏
Читать полностью…
Веб-страница
21 May 2025 17:04
В гостях хорошо, а http://127.0.0.1 лучше
Читать полностью…
Веб-страница
20 May 2025 18:39
SOLID на фронтенд примерах
В этом плейлисте собраны 6 уроков по SOLID для фронтенд-разработчиков. Вы узнаете про принцип единственной ответственности, использование DIP, LSP, OCP и не только.
#solid@tproger_web #фронтенд@
Читать полностью…
Веб-страница
19 May 2025 20:43
Пятнашки на Vue
Полезный codepen-проект для тех, кто изучает Vue. Сможете не только изучить алгоритм игры, но и посмотреть, как это реализовано на фреймворке.
https://codepen.io/leemartin/pen/VwmdyNQ
#codepen #vue
Читать полностью…
Веб-страница
19 May 2025 11:09
Compound Component: избавляемся от props-drilling и получаем гибкий API
«Составной компонент» — паттерн, в котором родитель хранит состояние, а дочерние элементы свободно комбинируются без явной передачи пропов. В материале показан путь от обычного аккордеона с длинным списком props к контекст-ориентированной версии, где порядок и число подпроектов не ограничены. Плюсы, минусы, подводные камни — всё разобрано на живых примерах.
#фронтенд #react
Читать полностью…
Веб-страница
18 May 2025 09:11
Старожилы веб-разработки на месте? К вам вопрос
Споры про выбор инструмента для работы с фронтендом не утихают и никогда не утихнут. React, Vue, Svelte или какая-то ещё библиотека или фреймворк всегда будут иметь последователей.
Но что выбрать новичку? Вспомните себя. В начале пути столько всего нужно изучить и понять, что голова кружится. А тут ещё с каждой стороны летят противоположные советы и наставления.
Если поставить себя на место этого новичка, то что бы вы посоветовали ему изучать сегодня в качестве первой библиотеки или фреймворка? У какого сейчас больше перспектив или ниже порог входа? Поделитесь своим мнением в комментариях и расскажите почему вы считаете именно так.
#обсуждение
Читать полностью…
Веб-страница
17 May 2025 10:04
Container Queries: адаптивные компоненты без медиазапросов
Представьте карточку-виджет, которая сама подстраивается к ширине блоков сетки, не глядя на размеры экрана. Container Queries дают такую гибкость: элемент ориентируется на контейнер и меняет стили при порогах вроде @ (min-width: 40rem).
В этой статье подробно о контейнерных запросах — понятная теория, примеры кода и обзор текущей поддержки во всех основных браузерах.
#фронтенд #css #адаптивность
Читать полностью…
Веб-страница
16 May 2025 16:11
Расскажите про свой опыт поиска работы
Мы сейчас проводим исследование — хотим разобраться, как айтишники ищут работу: на что обращаете внимание в вакансии, что для вас точно красный флаг, а что — зеленая простыня. Мы хотим из первых уст узнать про все боли, подводные камни и нюансы рекрутинга в ИТ в 2025 году, поэтому просим вашей помощи — пройдите опрос, который займет у вас около 15 минут.
Давайте поможем компаниям и специалистам эффективнее и быстрее находить друг друга.
#опрос
Читать полностью…
Веб-страница
15 May 2025 12:59
GSAP теперь доступна бесплатно
Популярная библиотека для создания анимаций в вебе получила очередное обновление и стала бесплатной для сообщества. Теперь и ядро либы, и все её платные плагины доступны каждому благодаря Webflow.
Все подробности в блоге команды GSAP: https://gsap.com/blog/3-13/
#новости #gsap
Читать полностью…
Веб-страница
14 May 2025 13:34
Относительные цвета в CSS
В CSS появился синтаксис, который позволяет динамически менять цвета в браузере без использования препроцессоров. Чтобы понять, как это работает, мы нашли интерактивное руководство, где все показано наглядно.
Посмотрите его и, возможно, вы сможете отказаться от препроцессоров в своих проектах:
https://ishadeed.com/article/css-relative-colors/
#css
Читать полностью…
Веб-страница
13 May 2025 13:06
React 19 — новые хуки за 15 минут
Владилен Минин коротко демонстрирует useActionState, useOptimistic и улучшенный useDeferredValue, чтобы вы поняли, как ускорить UI без лишних перерендеров.
#react@tproger_web
Читать полностью…
Веб-страница
12 May 2025 14:13
CSS для печати на бумаге
Интересная статья, в которой рассмотрели особенности стилизации веб-страниц для экспорта в печатный вид: https://habr.com/ru/articles/798765/
#css@tproger_web
Читать полностью…
26007