Про React 19: найцікавіше з оновлення - https://dou.ua/forums/topic/48550/

Мій власний фронтенд дайджест із новин і статей які я виділив для себе з яким вирішив поділитися з вами😁
Якщо вам зайшло, чи було корисно, обовязково лайк 😉


Даджет новин і статей #1

Використання API Popover для підказок HTML - https://frontendmasters.com/blog/using-the-popover-api-for-html-tooltips/

Створення інтеграції чату з Google Gemini - https://www.raymondcamden.com/2024/04/30/building-a-chat-integration-with-google-gemini

Безпечне відкриття посилань у новій вкладці: «Target=_blank» та «rel=noopener» - https://www.stefanjudis.com/today-i-learned/target-blank-implies-rel-noopener/

Використання CSS Scroll-Driven Animations , для індикаторів прогресу прокрутки на основі розділів - https://frontendmasters.com/blog/using-css-scroll-driven-animations-for-section-based-scroll-progress-indicators/ і ще ось ця стаття про CSS Scroll-Driven Animations https://developer.chrome.com/blog/scroll-driven-animations-video-course

Створення різноманітних геометричних фігур за допомогою CSS Shapes - The Modern Guide For Making CSS Shapes

CSS Anchor position API - https://developer.chrome.com/blog/anchor-positioning-api

Нова альтернатива innerHTML - https://fullystacked.net/innerhtml-alternatives/

Дайджет новин і статей №2

🔹Найпростіший спосіб розгорнути веб-сайт, щоб можна було поділитися ним з іншими людьми? - https://frontendmasters.com/blog/exactly-how-to-deploy-local-files-to-make-a-live-website/

🔹5 крутих функцій Chrome DevTools, про які більшість розробників не знають - https://javanoscript.plainenglish.io/5-cool-chrome-devtools-features-most-developers-dont-know-about-cf55d3b46c95

🔹Як зробити форми доступнішими використовуючи псевдокласи - https://css-tricks.com/accessible-forms-with-pseudo-classes/

Також, ви можете допомогти формувати дайджет скидаючі цікаві новини і статті про розробку і фронтент сюди - @denispopov_web

🔹На іменовані ідентифікатори елементів можна посилатися як на JavaScript-глобали - https://css-tricks.com/named-element-ids-can-be-referenced-as-javanoscript-globals/ ( цікава статейка. Вийшла ще в 2022 а я на ней тільки зараз наткнувся )

🔹Цікава статистика від State of HTML - https://2023.stateofhtml.com/ua-UA/demographics/

🔹Якщо слідкуєте за оновлення браузерів, то можете дізнатись що нового в 🔹🔹Chrome 125 - https://developer.chrome.com/blog/new-in-chrome-125
а також, що нового буде в DevTools - https://developer.chrome.com/blog/new-in-devtools-125

🔹Як краще зрозуміти errors та warnings краще разом з Gemini - https://developer.chrome.com/docs/devtools/console/understand-messages

🔹Про FireFox 126 - https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/126

🔹І куди ж без Safari. Webkit фічі в Сафарі 17.5 - https://webkit.org/blog/15383/webkit-features-in-safari-17-5/

Також ви можете взяти участь у формуванні цього дайджесту і закинути цікаві статті або новини про фронтенд розробку сюди 👉 @denispopov_web

Дайджет новин і статей №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-javanoscript-techniques/

🔹 Підсумки реакт конф 2024 - https://react.dev/blog/2024/05/22/react-conf-2024-recap

https://javanoscript.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/

Зустрічайте Highload fwdays'24 — унікальну та єдину в Україні конференцію від Fwdays, присвячену практичним питанням розробки високонавантажених систем, архітектури, масштабування, роботи з базами даних, DevOps 🙌


🗓 Дата: 15 червня
🗣 Формат: офлайн (у Києві) та онлайн
🎙 Мови доповідей: українська та англійська

Спікери та їх доповіді:
📍 Олена Сирота –Software architect у Star, викладач у SET University.
У доповіді "Як обрати правильний тип скейлінгу" ми спочатку проаналізуємо підходи до масштабування, а потім виберемо найкращий для нашої системи.

📍Тарас Кльоба – Microsoft, Senior Partner Solutions Architect, Data & Artificial Intelligence. Має понад 14 років досвіду в ІТ-індустрії, банківській справі та кібербезпеці
У доповіді "NATO Hackathon Winner: AI-Powered Drug Search" буде йти мова про те, як можна ефективно використовувати функції PostgreSQL і служби штучного інтелекту Azure для значного покращення функціональності пошуку в будь-якій програмі.

📍 Greg Young – творець Command Query Responsibility Segregation, незалежний консультант, автор книги про паттерни.
У доповіді, "Event Souring Patterns", мова піде про серію паттернів від AW: Design Patterns, Enterprise Integration Patterns та ін, засновані на книзі про паттерни, автором якої є сам Greg Young.

Та не тільки!

Використайте промокод POPOVHL10 та отримайте знижку 10%, деталі за посиланням 👉 https://bit.ly/3KB3SEl

Приєднуйтесь до Highload fwdays'24!

Якщо вам не лінь, можете прийняти участь в щорічному опитуванні State of Frontend 2024 - https://stateoffrontend2024.typeform.com/survey

Як використовувати Rem в CSS для доступного дизайну - https://www.a11y-collective.com/blog/what-is-rem-in-css/

Випробування нового HTML-елементу <permission> - https://developer.chrome.com/blog/permission-element-origin-trial?hl=en

Поради щодо написання хорошого CSS - https://andrewwalpole.com/blog/opinions-for-writing-good-css/

BEM-модифікатори у чистому CSS-Nesting - https://whatislove.dev/articles/bem-modifiers-in-pure-css-nesting/

Чистий круговий текст CSS (без використання моноширинних шрифтів) - https://frontendmasters.com/blog/pure-css-circular-text-without-requiring-a-monospace-font/

Випущено Htmx 2.0, що має на меті замінити складні фреймворки JavaScript зрозумілими атрибутами HTML - https://devclass.com/2024/06/18/htmx-2-0-released-aims-to-replace-complex-javanoscript-frameworks-with-easily-understood-html-attributes/

Привіт, 19 жовтня відбудеться React+ fwdays'24 — щорічна конференція для всіх, хто цікавиться розробкою на JavaScript 🤩

Основний фокус заходу — React. Проте, цього разу, Fwdays не обмежуються лише React та поговорять і про інші фреймворки, такі як Vue.js, Node.js, Angular, Svelte та інші.

Вас очікують:
📍Цікаві спікери та практичні доповіді про покращення React за допомогою TypeScript, мікро-фронтенд та монорепо, здоровий ґлузд та перфекціонізм під час рефакторингу та багато іншого.
📍Нетворкінг, Q&A зі спікерами, нові знайомства
📍Вайб Halloween під час офлайн частини заходу 👻
📍Розіграші та подарунки від партнерів

Формат: онлайн та офлайн у Києві

Використайте промокод POPOVREACT10 та отримайте знижку 10%, деталі за посиланням 👉 https://bit.ly/3TvYp6u

Приєднуйтесь до React+ fwdays'24!

Коротше, вирішив я проаналізувати архітектуру проєкту.
Часу, щоб самому її малювати, немає, та й лінь. Вирішив трохи пошукати інформацію, бо думаю, що таких, як я, багато, і рішення точно вже якесь є.
Коротше, по факту, все вийшло.
Результат на фото.

Він не ідеальний, але якщо трохи підкрутити, змінити порядок блоків і прибрати дублікати (так вийшло), то все буде взагалі дуже непогано.

Нижче декілька дописів із повним кодом і описом, що й як.

Частина 1

import fs from "fs";
import path from "path";
import { fileURLToPath } from "url";
import { parse } from "@vue/compiler-sfc";
import { load } from "cheerio";
import glob from "glob";
import { exec } from "child_process";
import { promisify } from "util";

const execAsync = promisify(exec);
const globAsync = promisify(glob);

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const srcDir = path.join(__dirname, "src");

const componentsDTSPath = path.join("", "components.d.ts"); // Change the path if needed

const groupColors = ["red", "blue", "green", "orange", "purple", "yellow", "pink", "cyan"];

const sharedComponents = ["SVGIcons", "Button", "Input", "Tooltip", "Calendar", "ValidationErrorBlock"];

onst getGlobalComponents = (filePath) => {
    const content = fs.readFileSync(filePath, "utf-8");
    const globalComponents = [];
    const regex = /(\w+): typeof import\(['"][^'"]+['"]\)\['default'\]/g;
    let match;
    while ((match = regex.exec(content)) !== null) {
        globalComponents.push(match[1]);
    }
    return globalComponents;
};

const getUsedComponents = (templateContent, globalComponents) => {
    const usedComponents = new Set();
    const $ = load(templateContent, { xmlMode: true, decodeEntities: false });

    const toKebabCase = (str) => str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();

    $("*").each((_, elem) => {
        const tagName = elem.tagName;
        const possibleNames = [tagName, toKebabCase(tagName)];
        possibleNames.forEach((name) => {
            if (globalComponents.includes(name) || globalComponents.includes(toPascalCase(name))) {
                usedComponents.add(name);
            }
        });
    });

    return Array.from(usedComponents).filter((comp) => !sharedComponents.includes(comp));
};

const toPascalCase = (str) =>
    str
        .split("-")
        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
        .join("");

const getComponentGroup = (relativePath) => {
    const parts = relativePath.split(path.sep);
    return parts.length > 1 ? parts[0] : "Others";
};

Частина 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 { denoscriptor } = parse(content);

            if (!denoscriptor.template) {
                console.warn(`File ${file} does not contain a <template>.`);
                continue;
            }

            const templateContent = denoscriptor.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();

Для роботи скрипта необхідно встановити наступні залежності:

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. Покращувати модульність застосунку.

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

26 листопада був реліз Vite 6
Про нові зміни можна почитати тут
Якщо коротко, то:
- Деякі умови більше не додаються автоматично і мають бути вказані в конфігурації.
- JSON.stringify тепер за замовчуванням працює в режимі 'auto'
- За замовчуванням використовується сучасний API.
- У бібліотечному режимі ім'я CSS-файлу тепер залежить від назви пакету.

Якщо ви цікавитесь Vue як і я, ось вам цікавенька стаття де розповідають як побудувати веб апплікейшин який видаляє фон за допомогою Vue та Transformers.js