Паттерн проектирования #supapattern
Facade (Фасад) ⛩

Тип: структурный

Суть: это простой интерфейс для работы со сложной системой. Он предоставляет именно те фичи, которые нужны, и скрывает все остальные. Фасад полезен, если вы используете сложную библиотеку со множеством возможностей, но вам нужна только часть её возможностей

Недостатки:
- Фасад рискует стать объектом, который делает слишком много

Применение:
На личном опыте применял паттерн для получения транзакций и балансов с бирж. Каждая биржа имеет свою библиотеку-обёртку над API. Мой фасад предоставлял удобные методы getTransactions и getBalances, которые трансформировали данные каждой биржи к единому виду

Реализация:
Реализация всегда зависит от задачи, абстрактно от кейса трудно что-то придумать, а если лить код из проекта, то это только запутает тебя, да и к тому же он под NDA 🤭
Но если хочется всё-таки глянуть на код, то вот, держи, здесь абстрагировались от задач и попытались привести пример, надеюсь, что тебя это не запутает
Ссылка на пример

Фреймворк для e-commerce на Vue 👩‍🌾

Откопал интересный фреймворк, чтобы быстро клепать онлайн магазы на Vue.js (полностью бесплатный и опенсурсный)

Разрабы заявляют о Customization-first и Performance oriented

Их дизайн систему можно глянуть в фигме

Вот офф сайт

NFC приходит в web 👀 #translate

Снова вечерком засел и перевёл интересную статью про Web NFC, залетай и читай!

https://habr.com/ru/post/570954/

Я хочу тебя в напарники 👾
(https://getmoni.io/)

Мы ищем Senior Frontend разработчика, чтобы вместе перевернуть крипто рынок 🦄

Обзязательно мочь и уметь:
- Отличать ООП от ФП
- Знать архитектурные подходы и паттерны
- Уметь в React и Typescript

Будет плюсиком:
- Уметь в React Native
- Опыт разработки сложных аналитических проектов
- Гореть криптой и всё что с ней связано

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

Условия:
- Зарплата $4000+
- Работа в талантливой команде и растущем стартапе.
- Участие в развитии нового масштабного продукта.

По всем вопросом писать мне: @qmzik

Вышла vite@2.5.0-beta.0 🥳

- Примерно в 6 раз увеличилась скорость минификации css файлов используя esbuild
- Modulepreload полифилл

Полный changelog тут 🖖

Vite супер быстро развивается, меня это очень радует 🚀

Го тусить и общаться 🗣

Я ни разу не говорил тебе об этом, но у этого канала есть чатик, где можно поболтать о всяком около фронтендерском, да и в принципе о чём угодно ☺️

Приглашаю тебя на огонёк в @frontend_pasta_chat 👨‍🚒

Паттерн проектирования #supapattern
Observer (Наблюдатель) 👀

Тип: поведенческий

Суть: создаёт механизм, позволяющий одним сущностям следить и реагировать на события, происходящие в других сущностях. Обычно событиями является набор функций. То есть при изменении данных в объекте, вызываются подписанные на обновления функции.

Недостатки:
- Явные недостатки отсутствуют

Применение:
Отличный пример - flux подход, на котором построены стэйт-менеджеры (redux, mobx, vuex).

Реализация:
https://gist.github.com/qmzik/d8f4751c4cebfc0aa994fbcc9e5ccc35

Гайд по миграции с Vue 2 на Vue 3. Часть 2 🚀 #translate

Сорян, что задержался с этой статьей, она оказалась довольно большой 🙈
Именно поэтому вчера не было поста(

Но все кто ждал её - приятного чтения и удачного продолжения миграции на Vue 3

https://habr.com/ru/post/571774/

Pinia - новый store для Vue 🍍

Новый store от одного из участников основной команды разработчиков Vue. Релиза как такового ещё нет, но следить за ним думаю стоит

Основные отличия от Vuex:
1. Нет мутаций
2. Все сторы по дефолту динамически регистрируются
3. Супер Typescript-friedly
4. Продвигает плоскую архитектуру вместо вложенной, в связи с этим отсутсвуют нэймспейсы

Ссылка на гитхаб
Ссылка на доку
Ссылка на разраба

Vue двигается вперёд 🚀 #translate

Вчера у Vue был очень классный апдейт, затащили несколько прям топовых фич

В кратце:
— v-bind в стилях и сахар в виде <script setup>
— Новая директива v-memo
— Создание нативных веб-компонентов с Vue синтаксисом
— Куча оптимизаций

Я перевёл статью от Evan You по новым фичам из этого апдейта, залетай и читай, это правда стоит прочитать

P.S: Мне очень нравится как развивается Vue и в каком направлении он движется, прям глаза радуются 🌈

Super Duper Secure Mode 🤓 #translate

Команда VR (Vulnerability Research) Майкрософта выпустила интригующую статью про сокращение уязвимостей браузера, путём выпиливания JIT (Just-In-Time Compilation) из браузера 🤭

Заходи и читай, у них получился интересный ресёрч 👾

Пора уже навести здесь порядок 🧹

У этого канала есть чатик, где можно пообщаться - @frontend_pasta_chat

Также есть рубрики:
1. #ES12 - пробуем новые фичи вошедшие в стандарт в 2021 году ✅
2. #supapattern - изучаем паттерны проектирования ⛩
3. #translate - мои переводы специально для тебя 👨‍💻
4. #fun - что-то, где можно похахать 😂
5. #Moni - посты связанные с проектов, которым я занимаюсь фулл-тайм 👾
6. #topoffer - лучшие вакансии по всему миру 🌎

Время от времени я буду дополнять этот список с появлением новых рубрик, хороших выходных тебе 👋

Релиз ESLint v8.0.0-beta.0

Главные изменения:
— Дефолтный парсер теперь поддеживает синтаксис ES2022, влючая class-fields и top-level await
— Автофикс теперь может чистить неиспользуемые eslint директивы через --fix, о которых раньше мог только сообщать --report-unused-disable-directives
— Также он содержит пачку breaking changes :(

Подробнее можно глянуть тута ☺️

TypeScript 4.4 RC 🥳

Тайпскрипт 4.4 beta был выпущен где-то 2 месяца назад, и за это время стал довольно стабильным, в связи с этим Майкрософт выпустила статью со всеми изменениями, которые уже вряд ли изменяться

Прочитать подробнее можно тут

MacOS на Svelte + Vite 🤯
#fun

Один паренёк начал интересный проект - он хочет сделать интерфейс MacOS в вебе, используя Svelte. Думаю, что это сильный вызов самому себе 🙂

Можешь глянуть, что у него получается:
Сам сайтик
Его гитхаб

P.S. ещё существует Windows XP в вебе - https://winxp.vercel.app/ 👨‍🦳

Паттерн проектирования #supapattern
Decorator (Декоратор) 🎁

Тип: структурный

Суть: позволяет динамически добавлять объектам новую функциональность, создавая над ними некую обёртку. Также объёкт может иметь несколько декораторов.

Применение:
Представьте, что у нас есть класс Coffee. И мы хотим создать дочерние классы Espresso, Latte, Cappuchino. И потом сделать каждый из них с сахаром нам придётся создавать класс EspressoWithSugar, который наследуется от Espresso, LatteWithSugar и так далее. У нас получается огромное количество классов. Мы можем избежать этого создав декоратор @‘withSugar 🤭

Думаю те, кто работал с vue-class-compoent уже знакомы с декораторами @‘Component, @‘Prop и т.д.

Также, те кто разрабатывает в связке mobx + react должен был встретить декоратор @‘observer с классовым компонентом

Реализация:
Не стал писать собественную реализацию, в связи с тем, что никогда этого не делал и вряд ли в кодерской рутине тебе приспичет сделать это 🙂
Но для примера всё-таки скину чужую реализацию 🎁

Бесплатный курс по Vue 3 от Vue Mastery на этих выходных 😍

Тема: Real World Vue 3

На лединге пишут, что будет несколько направлений (можно глянуть их на лендосе), как для начинающих разработчиков, так и для опытных. Думаю, что там будет что подцепить для себя 🙂

Ссылка на регистрацию

Вышел Node.js v16.7.0 🚀

Не совсем про разработку интерфейсов, но знать точно полезно ❤️

Глянуть изменения можно тут