Frontend Den
@junnot_chat
#frontend #wordpress #html #css
Architec.Ton is a ecosystem on the TON chain with non-custodial wallet, swap, apps catalog and launchpad.
Main app: @architec_ton_bot
Our Chat: @architec_ton
EU Channel: @architecton_eu
Twitter: x.com/architec_ton
Support: @architecton_support
Last updated 2 weeks, 6 days ago
Канал для поиска исполнителей для разных задач и организации мини конкурсов
Last updated 1 month, 1 week ago
12 бібліотек, які вам можуть стати у нагоді 😉
AOS (Animate on Scroll) — це легка та налаштовувана бібліотека для додавання ефектних анімацій при прокручуванні ваших вебсторінок.
https://michalsnik.github.io/aos
Chart.js - дозволяє легко створювати різні типи графіків, включаючи лінійні, стовпчасті, радарні та кругові, з мінімальною конфігурацією.
https://www.chartjs.org
SweetAlert2 пропонує адаптивні, повністю налаштовувані спливаючі вікна, які легко інтегруються у ваші проєкти.
https://sweetalert2.github.io
SortableJS дозволяє легко реалізувати функцію перетягування для списків. Її гнучкість робить її ідеальною для створення інтерактивних інтерфейсів, таких як канбан-дошки.
https://sortablejs.github.io/Sortable
Floating UIдозволяє легко керувати складними компонентами інтерфейсу, такими як підказки, випадаючі меню та спливаючі вікна.
https://floating-ui.com
FullCalendar пропонує зручний, повнофункціональний інтерфейс календаря з налаштовуваним керуванням подіями, функцією перетягування та різними режимами перегляду.
https://fullcalendar.io
Animate.css - додавайте попередньо створені анімації до елементів вашого сайту за допомогою Animate.css.
https://animate.style
Lottie від Airbnb - Ця бібліотека дозволяє інтегрувати високоякісні анімації у ваші вебдодатки.
https://lottiefiles.com/free-animations/airbnb
Tippy.js - Легка, розширювана бібліотека для створення красивих, налаштовуваних підказок, спливаючих вікон і випадаючих меню.
https://atomiks.github.io/tippyjs
Day.js — це проста й швидка бібліотека, яка чудово підходить для проєктів, що працюють з датами, не займаючи багато місця та не уповільнюючи роботу.
https://day.js.org
Swiper — це безкоштовний і потужний інструмент для створення слайдерів і каруселей. Він забезпечує плавні переходи й добре працює на різних екранах, що робить його ідеальним для мобільних проєктів.
https://swiperjs.com
Vivus - Створюйте приголомшливі анімовані SVG-малюнки за допомогою Vivus. Ця легка JavaScript-бібліотека дозволяє анімувати SVG, імітуючи процес малювання, додаючи унікальний стиль вашим графікам.
https://maxwellito.github.io/vivus
Для роботи скрипта необхідно встановити наступні залежності:
```
npm install @vue/compiler-sfc cheerio glob js-cookie util
```
@vue/compiler-sfc — для парсингу .vue файлів
cheerio — для роботи з HTML (розбір шаблонів Vue)
glob — для пошуку файлів у файловій системі
js-cookie — для роботи з кукі (якщо використовується у застосунку)
util — для промисифікації функцій.
Для генерації графу потрібен Graphviz
На macOS
```
brew install graphviz
```
На Ubuntu/Debian/Windows треба пошукати 😅
У мене весь проект лежить в src
А ще у мене є components.d.ts для автоматичного підкючення компонентів
По суті той скрипт що вище сканує всі .vue файли в папці src, потім визначає залежності між компонентами. Створює файл architecture.dot, який використовується для генерації графу.
Приклад результату
Якщо структура вашого проєкту виглядає так:
```
src/
├── components/
│ ├── Button.vue
│ ├── Modal.vue
├── pages/
│ ├── Home.vue
│ ├── Dashboard.vue
├── shared/
│ ├── Header.vue
│ ├── Footer.vue
```
То граф архітектури виглядатиме приблизно так:
Групи:
components: Modal, Button.
pages: Home, Dashboard.
shared: Header, Footer.
Залежності:
Home → Header.
Dashboard → Header, Footer.
Modal → Button.
Короче у підсумку виходить дуже не поганий інструмент для візуалізації архітектури
Він по суті може допогти
1. Швидко розуміти залежності між компонентами.
2. Визначати зайві зв'язки.
3. Покращувати модульність застосунку.
Частина 2
``
const generateArchitecture = async () => {
try {
if (!fs.existsSync(componentsDTSPath)) {
console.error(File ${componentsDTSPath} not found.`);
return;
}
const globalComponents = getGlobalComponents(componentsDTSPath);
console.log("Globally registered components:", globalComponents);
const pattern = path.join(srcDir, "**/*.vue");
const vueFiles = await globAsync(pattern, { ignore: "**/node\_modules/**" });
if (vueFiles.length === 0) {
console.warn("No Vue components found. Check the file path.");
return;
}
console.log(`Found ${vueFiles.length} Vue components.`);
const dependencyGraph = {};
const groups = {};
vueFiles.forEach((file) => {
const relativePath = path.relative(srcDir, file);
const componentName = path.basename(relativePath, ".vue");
dependencyGraph[componentName] = [];
const group = getComponentGroup(relativePath);
if (!groups[group]) {
groups[group] = [];
}
groups[group].push(componentName);
});
for (const file of vueFiles) {
const relativePath = path.relative(srcDir, file);
const componentName = path.basename(relativePath, ".vue");
const content = fs.readFileSync(file, "utf\-8");
const { descriptor } = parse(content);
if (!descriptor.template) {
console.warn(`File ${file} does not contain a <template>.`);
continue;
}
const templateContent = descriptor.template.content;
const usedComponents = getUsedComponents(templateContent, globalComponents);
dependencyGraph[componentName] = usedComponents;
console.log(`Component: ${componentName}, Uses: ${usedComponents.join(", ")}`);
}
let dotContent = 'digraph G {\n node [shape=box];\n rankdir=LR;\n splines=true;\n';
Object.keys(groups).forEach((group, index) => {
const color = groupColors[index % groupColors.length];
dotContent += ` subgraph cluster\_${index} {\n label="${group}";\n color="${color}";\n`;
groups[group].forEach((component) => {
dotContent += ` "${component}";\n`;
});
dotContent += " }\n";
});
Object.keys(dependencyGraph).forEach((component) => {
const dependencies = dependencyGraph[component];
if (dependencies.length > 0) {
dependencies.forEach((dep) => {
dotContent += ` "${component}" \-> "${dep}";\n`;
});
}
});
dotContent += "}\n";
const dotDir = path.join(\_\_dirname, "docs", "architecture");
const dotPath = path.join(dotDir, "architecture.dot");
fs.mkdirSync(dotDir, { recursive: true });
fs.writeFileSync(dotPath, dotContent, "utf\-8");
console.log("\nFile architecture.dot successfully created.");
const outputPngPath = path.join(dotDir, "architecture.png");
const cmd = `dot \-Tpng "${dotPath}" \-o "${outputPngPath}"`;
const { stdout, stderr } = await execAsync(cmd);
if (stderr) {
console.error(`Graphviz stderr: ${stderr}`);
}
console.log(`Architecture diagram generated at: ${outputPngPath}`);
} catch (error) {
console.error(`Error generating architecture: ${error.message}`);
}
};
generateArchitecture();
```
Дайджет новин і статей №3
? Коли слід використовувати компоненти, а коли просто HTML? - https://chrissmith.xyz/blog/2024/when-should-we-use-components-and-when-should-we-just-use-html/
? Як розширення Chrome впливають на продуктивність веб-сайту у 2024 році? - https://www.debugbear.com/blog/chrome-extensions-website-performance
?5 найкращих передових методів JavaScript - https://thenewstack.io/top-5-cutting-edge-javascript-techniques/
? Підсумки реакт конф 2024 - https://react.dev/blog/2024/05/22/react-conf-2024-recap
https://javascript.plainenglish.io/react-conf-2024-highlights-b7cc29fb5109
?Альтернатива Websocket: як використовувати Firestore для прослуховування подій у реальному часі - https://canopas.com/websocket-alternative-how-to-use-firestore-to-listen-to-realtime-events-141e634d04bc
?ECMAScript 2024 - Promise.withResolvers() - https://2ality.com/2024/05/proposal-promise-with-resolvers.html
?Трохи про CSS Gap - https://ishadeed.com/article/the-gap/
? Старі методи, нові трюки CSS - https://mxb.dev/blog/old-dogs-new-css-tricks/
? Нова магія для CSS Анімаціі - https://chasem.co/2024/05/css-animations/
?CSS якірне позиціонування на практиці - https://geoffgraham.me/css-anchor-positioning-in-practice-winging-it-live/
? CSS Timer - https://frontendmasters.com/blog/how-to-make-a-css-timer/
chrissmith.xyz
When should we use components and when should we just use HTML?
A lot of UI frameworks or design systems include a component library, a series of components that can be dropped into a page to add functionality
Давайте розглянемо приклад memoization із використанням в реальному проекті, наприклад, для оптимізації функції, що обчислює результати складних обчислень або запитів до бази даних. Уявімо, що ми розробляємо веб-сайт електронної комерції, де потрібно відображати вартість товарів у різних валютах в залежності від курсу валют, що часто змінюється.
Без memoization кожен запит користувача на перегляд ціни товару у певній валюті вимагав би нового запиту до API для отримання актуального курсу валют, що може бути витратно з точки зору часу та ресурсів.
``
function currencyConverter() {
const cache = {};
return async function convert(amount, fromCurrency, toCurrency) {
const key =${fromCurrency}_to_${toCurrency}`;
//Перевірка кешу для ключа: ${key}
if (key in cache) {
return cache[key] * amount;
}
// Якщо курс валют не знайдено у кеші. Запит до API для отримання курсу "fromCurrency" до "toCurrency"
// Припустимо, fetchCurrencyRate() це функція, що робить запит до зовнішнього API для отримання курсу валют
const rate = await fetchCurrencyRate(fromCurrency, toCurrency);
//Отримано курс валют \- "rate" і зберігаємо його в кеш
cache[key] = rate;
return rate * amount;
}
}
```
Цей приклад показує, як мемоізація може бути використаний для підвищення продуктивності в реальних проектах, зменшуючи кількість звернень до зовнішніх сервісів та оптимізуючи швидкість відповіді сервера.
Architec.Ton is a ecosystem on the TON chain with non-custodial wallet, swap, apps catalog and launchpad.
Main app: @architec_ton_bot
Our Chat: @architec_ton
EU Channel: @architecton_eu
Twitter: x.com/architec_ton
Support: @architecton_support
Last updated 2 weeks, 6 days ago
Канал для поиска исполнителей для разных задач и организации мини конкурсов
Last updated 1 month, 1 week ago