​​​Мощь декораторов TypeScript на живых примерах: декорирование методов класса

С помощью декораторов вы можете избежать дублирования кода и убрать лишний «шум» в коде. Они также помогают легко добавить к классам и членам класса метаданные.

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

https://habr.com/ru/articles/707496/

@tproger_web #typescript


Original post link: t.me/tproger_web/4508
Forwarded and filtered by @smartfeed_bot

​​😉RSLike@3. Well-known Symbol, улучшенное использование Typescript, и весим больше

В этой статье автор расскажет о библиотеке Rslike, которая помогает избежать ошибок связанных с null и undefined в JavaScript.

Читать...


Original post link: t.me/frontendnoteschannel/3480
Forwarded and filtered by @smartfeed_bot

3D wave animation

Создано на HTML и CSS. При помощи комбинатора '+' стили задаются соседним элементам.

👉 @seniorFront


Original post link: t.me/seniorFront/3978
Forwarded and filtered by @smartfeed_bot

💾 Cursor Tracking – маска для курсора, которая показывает скрытый слой. В середине экрана диаметр маски становится чуть меньше.

Сайтодел | #сниппет #css


Original post link: t.me/sitodel/1730
Forwarded and filtered by @smartfeed_bot

Алиасы в GIT

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

Например:

git status
git commit -m 'commit'

Git позволяет создавать алиасы команд. Благодаря этому вы можете вводить не длинную строку команды, а ее короткий псевдоним.

Создаём alias:

git config --global alias.st status
git config --global alias.cm 'commit -m'

Теперь нам не нужно постоянно вводить git status или git commit -m, достаточно ввести:

git st
git cm


Original post link: t.me/senior_front/1952
Forwarded and filtered by @smartfeed_bot

​​Как правильно называть программиста, а как — неправильно?

Разработчик — это полноценный программист или еще нет? А можно ли назвать коллегу кодером или это уже что-то обидное? Обидно ли вам, когда вас называют компьютерщиком?

Инженер, оператор ЭВМ, автоматизатор, разработчик, хакер, кодер, сисадмин, компьютерщик или IT-специалист? Как бы вы назвали себя? Как, когда и почему нужно называть других разработчиков?

#обсуждение


Original post link: t.me/tproger_web/4509
Forwarded and filtered by @smartfeed_bot

​​🍕REST под сливочным соусом

В этой статье вы узнаете основные концепции и принципы REST (Representational State Transfer), а именно о клиент-серверной архитектуре, слоистой архитектуре, едином интерфейсе, отсутствии состояния, кэшировании и коде по запросу.

Читать...


Original post link: t.me/frontendnoteschannel/3483
Forwarded and filtered by @smartfeed_bot

27 основных однострочных функций JavaScript

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

https://webformyself.com/27-osnovnyx-odnostrochnyx-funkcij-javascript/


Original post link: t.me/senior_front/1953
Forwarded and filtered by @smartfeed_bot

Responsive Contact us Page

В этом видео создается страница контактов с анимированной формой

👉 @seniorFront


Original post link: t.me/seniorFront/3982
Forwarded and filtered by @smartfeed_bot

​​🥰Модули ES6: Rollup

В этой статье вы узнаете о модулях ES6 и способах их использования с помощью инструмента Rollup.

Читать...


Original post link: t.me/frontendnoteschannel/3484
Forwarded and filtered by @smartfeed_bot

Fancy Fading Footer

Создано на HTML и CSS. Размытие реализовано при помощи CSS backdrop-filter. Форма размытия создана свойством mask-image.

👉 @seniorFront


Original post link: t.me/seniorFront/3983
Forwarded and filtered by @smartfeed_bot

​​Если пропустили, тут Хабр запустил тёмную тему. Но нам интересен не сам факт, а то, что там под капотом и за кулисами.

Как решили делать тёмную тему, зачем понадобилось перерисовать 135 иконок и какие еще сложности возникли на пути — команда Хабра рассказала в статье: https://habr.com/ru/companies/habr/articles/805131/

#дизайн


Original post link: t.me/tproger_web/4510
Forwarded and filtered by @smartfeed_bot

​​🤨Понимаем полностью useMemo и useCallback

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

Читать...


Original post link: t.me/frontendnoteschannel/3485
Forwarded and filtered by @smartfeed_bot

🎨 Цветовая палитра макета "Smoothie Bowl Transition Prototype"

HEX | RGB
#EDFFCD | rgb(237,255,205)
#8FB351 | rgb(143,179,81)
#DF9499 | rgb(223,148,153)

⚠️ Цвет копируется одним кликом!

Сайтодел | #палитра


Original post link: t.me/sitodel/1731
Forwarded and filtered by @smartfeed_bot

​​🍪Сделали платформу, которая считает, хватает ли нам в офисе бананов и печенья

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

Читать...


Original post link: t.me/frontendnoteschannel/3486
Forwarded and filtered by @smartfeed_bot

​Что такое Tree shaking?

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

Tree shaking (Встряхивание дерева) – это метод оптимизации библиотек путем удаления любого кода из окончательного файла, который фактически не используется.

Допустим, у нас есть файл утилит с некоторыми математическими операциями, которые мы можем использовать в нашем основном скрипте.

 export function add(a, b) {
     console.log("add");
     return a + b;
 }
 export function minus(a, b) {
    console.log("minus");
    return a - b;
 }
 export function multiply(a, b) {
     console.log("multiply");
     return a * b;
 }
 export function divide(a, b) {
     console.log("divide");
     return a / b;
 }

В нашем основном скрипте импортируем и используем только функцию add().

 import { add } from "./mathUtils";
 add(1, 2);

Воспользуемся для сборки webpack. После сборки мы увидим, что все функции из файла mathUtils.js включены в финальный пакет, хотя мы только импортировали и использовали функцию add().

Если воспользуемся tree shaking, тогда только то, что мы импортировали и фактически использовали попадет в окончательную сборку.
Tree shaking, как правило, является функции сборщиков пакетов. Например, если вы используете webpack, вы можете просто установить mode в production в своем файле конфигурации webpack.config.js. Это, помимо других опций, так же запускает tree shaking.
module.exports = {
...,
mode: "production",
...,
} ;

👉 @seniorFront

Tailwind - form

Реализовано на HTML и стилизовано при помощи Tailwind. Анимации созданы в CSS.

👉 @seniorFront


Original post link: t.me/seniorFront/3988
Forwarded and filtered by @smartfeed_bot

​​🎂Пет-проект: путь от «простого получения опыта» до «продукта, способного приносить пользу IT сообществу»

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

Читать...


Original post link: t.me/frontendnoteschannel/3490
Forwarded and filtered by @smartfeed_bot

VR Landing Page

Реализовано на HTML и стилизовано при помощи Tailwind

👉 @seniorFront


Original post link: t.me/seniorFront/3995
Forwarded and filtered by @smartfeed_bot

🖥 Velvety – дизайн сайта для магазина косметических средств. Выполнен в теплых оттенках оливкового и темно-зеленого. В заголовках используется шрифт с засечками.

Сайтодел | #макет #figma


Original post link: t.me/sitodel/1734
Forwarded and filtered by @smartfeed_bot