Дошка ідей
Декілька речей, які я хочу зробити:
- Маленький «нотатник системного дизайнера» — патерни, типові помилки та чеклісти.
- Мініплатформа для демо версіонування API, кешування, фонових задач і міграцій.
- Грайлива мережева «пісочниця»: експерименти з IPv6, пояснені як історія.
Бонус: меню вище — навігація на базі UL (вимога лабораторної), стилізована через CSS.
ASP.NET + глосарій сучасного вебу (список визначень)
Демо списку визначень: <dl> <dt> <dd>
- ASP.NET Core
- .NET Web Stack
-
Сучасний фреймворк для створення вебзастосунків та API на .NET. Найчастіше я використовую його для:
- REST API / Minimal API
- Автентифікації (JWT/cookies), конвеєрів middleware
- Фонової обробки + запланованих задач
- Middleware
- Конвеєр компонентів, які обробляють HTTP-запити (логування, auth, кешування, маршрутизація).
- Dependency Injection (DI)
- Спосіб акуратно збирати сервіси (інтерфейси + реалізації) та зберігати код тестованим.
- Сучасний CSS
-
Розкладка Flexbox/Grid, логічні властивості,
clamp(),filter, переходи (transitions). - Сучасний JavaScript
-
Модулі,
fetch, делегування подій, DOM API та “vanilla-first” патерни UI.
Демонстрація списків (UL / OL / вкладені / атрибути)
Є 2 типи списків: нумеровані та маркеровані. Але можна трохи «схитрувати» й використати display:list-item
1) Маркерований список: тип маркера + маркер-зображення
- Квадратні маркери (CSS + type)
- list-style-position: outside (майже за замовчуванням)
- list-style-position: inside (подивись, як зміщується маркер)
- Ці маркери беруться із зображення (з файлу
img/bullet.svg) - Резервний (fallback) маркер все одно заданий у CSS
-
Демо вкладеного списку:
- вкладений ol починається з «c»
- і все одно працює всередині ul
2) Нумерований список: type, start та value
- Start дорівнює 3 ⇒ починається з III
- Цей елемент примусово ставить номер X (value="10")
- Наступний продовжується: XI
-
Вкладені кроки:
- проєктування
- реалізація
- реліз
3) display:list-item для елементів не-LI (лаб-хак)
Minimal API
Короткі ендпоінти, чиста маршрутизація, чудово для малих сервісів.
Логування + метрики
Зробіть прод «нудним»: структуровані логи, дашборди, алерти.
Таблиця техстека (caption, colgroup, thead/tbody/tfoot, rowspan/colspan)
| Технології | Практика | ||
|---|---|---|---|
| Напрям | Інструмент / Фреймворк | Для чого використовую | Нотатки |
| Backend | C# / ASP.NET Core | API, auth, middleware, фонові задачі | Чиста архітектура, профайлінг, спостережуваність |
| EF Core / Dapper | ORM + швидкий доступ до даних | Вибір під задачу: зручність vs швидкість | |
| REST + версіонування | Контрактні API | Стабільність + сумісність | |
| Data | SQL Server | Дизайн схеми, індекси, продуктивність | Тюнінг запитів, міграції, звітність |
| Redis (опційно) | Кешування / rate limiting | ||
| DevOps | Docker | Контейнери, відтворювані деплої | Compose для локальних стеків |
| Linux | Хостинг, автоматизація, дебаг | Мережеві утиліти + логи + скрипти | |
| Web | HTML/CSS/JS | Vanilla UI + DOM | Flex, фільтри, доступний фокус |
| jQuery (трохи) | Швидкі рішення для legacy | Тільки коли є сенс | |
| Особисте | macOS + VS Code, і мені подобається будувати «нудно-надійні» системи. | ||
| Використані можливості таблиці: caption, colgroup/col, thead/tbody/tfoot, rowspan/colspan, а також CSS для caption-side / border-collapse / border-spacing / empty-cells. | |||
Міні-демо: border-collapse vs border-spacing
| Режим | Вигляд |
|---|---|
| collapse | одинарні тонкі межі |
| Режим | Вигляд |
|---|---|
| separate | видимі проміжки між комірками |
Нотатки та фрагменти
/*Раз і назавжди — ось так центрують DIV-и!*/
.parent {
display: flex;
justify-content: center; /* Горизонтально */
align-items: center; /* Вертикально */
height: 100vh; /* Висота на весь viewport */
}
/* Маленька нотатка про ASP.NET Core */
app.MapGet("/health", () => Results.Ok(new { status = "ok" }));