Недавно понадобилось сделать график. Вроде простой, но перебрал несколько библиотек и не нашел подходящей - чтобы маркеры горизонтальные были, тултип, расположение по оси Х как надо, растягиваемый и т.п.
В итоге решил сделать сам используя третий подход - на
Времени на создание рабочего варианта (первая картинка) ушло меньше, чем на поиски и пробы готовых графических библиотек (четырёх).
К сведению любителей не изобретать эти чертовы велосипеды.
Ну и дальше можно закастомизировать по красоте как нужно именно тебе.
#charts
В итоге решил сделать сам используя третий подход - на
HTML и CSS. Времени на создание рабочего варианта (первая картинка) ушло меньше, чем на поиски и пробы готовых графических библиотек (четырёх).
К сведению любителей не изобретать эти чертовы велосипеды.
Ну и дальше можно закастомизировать по красоте как нужно именно тебе.
#charts
Бесплатные, доступные, опенсорсные и self-hosted альтернативы платным приложениям и сервисам
Notion -> Appflowy
Zoom -> Jitsi
Jira -> Plane
Airtable -> NocoDB
Vercel -> Coolify
Heroku -> Dokku
Firebase -> Pocketbase/Appwrite/Convex/Supabase
Shopify -> Prestashop
GitHub -> GitLab
Slack -> Mattermost
Salesforce CRM -> ERPNext
Dropbox -> NextCloud
Mailchimp -> Mautic
Trello -> Wekan
Docusign -> Docuseal
Calendly -> Cal dot com
Datadog -> Prometheus
Google Analytics -> Matomo
Microsoft Office 365 -> LibreOffice
Asana -> OpenProject
#software
Notion -> Appflowy
Zoom -> Jitsi
Jira -> Plane
Airtable -> NocoDB
Vercel -> Coolify
Heroku -> Dokku
Firebase -> Pocketbase/Appwrite/Convex/Supabase
Shopify -> Prestashop
GitHub -> GitLab
Slack -> Mattermost
Salesforce CRM -> ERPNext
Dropbox -> NextCloud
Mailchimp -> Mautic
Trello -> Wekan
Docusign -> Docuseal
Calendly -> Cal dot com
Datadog -> Prometheus
Google Analytics -> Matomo
Microsoft Office 365 -> LibreOffice
Asana -> OpenProject
#software
Для дебага в девтулзах браузера есть различные варианты, кроме
1.
2.
3.
4.
5. Также браузер позволяет симулировать
Ну и для реактивного
#debug
console.log()1.
debugger в коде остановит выполнение в этом месте2.
debug(funcName) - остановит при выполнении глобальной функции funcName3.
DOM Breakpoints позволят перехватить модификацию элемента4.
XHR Breakpoints - остановится при запросу определенного URL5. Также браузер позволяет симулировать
User Agent и локали.Ну и для реактивного
Vue не забываем про {{ someVar }} в шаблоне#debug
на vue писать довольно просто
берешь и пишешь, прям вот так
но если бывший ты реактер -
никак
денис любил ужасно пинью
глобальный стейт денис любил
но как-то понял всё и пинью
убил
#literature #creative
берешь и пишешь, прям вот так
но если бывший ты реактер -
никак
денис любил ужасно пинью
глобальный стейт денис любил
но как-то понял всё и пинью
убил
#literature #creative
Полезные советы по написанию "чистого кода"
1. Используйте осмысленные имена
2. Следуйте принципу единственной ответственности (SRP)
3. Избегайте излишних комментариев
4. Делайте код читабельным
5. Пишите юнит-тесты
6. Будьте аккуратны с зависимостями
7. Организуйте структуру своего проекта
8. Используйте единый стиль форматирования
9. Избегайте хардкода значений
10. Ограничивайте размер функций
Согласен со всеми пунктами, кроме пятого.
#tip #bestpractices
1. Используйте осмысленные имена
2. Следуйте принципу единственной ответственности (SRP)
3. Избегайте излишних комментариев
4. Делайте код читабельным
5. Пишите юнит-тесты
6. Будьте аккуратны с зависимостями
7. Организуйте структуру своего проекта
8. Используйте единый стиль форматирования
9. Избегайте хардкода значений
10. Ограничивайте размер функций
Согласен со всеми пунктами, кроме пятого.
#tip #bestpractices
Хабр
Как писать чистый код — советы для разработчиков с примерами
Представьте комнату, где повсюду разбросана одежда, книги и другие вещи. Найти что-то в такой комнате было бы сложно, не так ли? Теперь представьте, что вы пишете беспорядочный код – это не менее...
Человек пытается привить реактерам правильное и красивое
React SFC
P.S. Предлагаю зафлешмобить и наставить ему GitHub звёзд
#react #sfc
React SFC
P.S. Предлагаю зафлешмобить и наставить ему GitHub звёзд
<template>
<div>
<h1>Counter</h1>
<button onClick={() => setCount(count + 1)}>Increment</button>
<p $if={count > 0}>Count: {count}</p>
<p $if={count === 0}>Start counting!</p>
</div>
</template>
<script lang="ts">
import { useState } from 'react';
const [count, setCount] = useState<number>(0);
</script>
<style>
button {
padding: 10px 20px;
font-size: 16px;
}
</style>
#react #sfc
GitHub
GitHub - roonie007/react-sfc: Single File Components (SFC) for react
Single File Components (SFC) for react. Contribute to roonie007/react-sfc development by creating an account on GitHub.
Иногда при создании своих
Например, минималистичный BeerCSS
#css #lib #ui
UI компонент не обязательно использовать громоздкие Vue библиотеки, достаточно стилизации CSS фреймворка. Например, минималистичный BeerCSS
CSS фреймворки подходят как минимум для прототипирования и вдохновения. Также их можно использовать с unstyled компонентами, типа Radix Vue#css #lib #ui
Beercss
Beer CSS - Build material design interfaces in record time, without stress for devs 🍺💛.
The first CSS framework based on Material Design 3. Latest M3 Expressive already. 10x smaller than others CSS frameworks based on Material Design. Translates Material Design to HTML semantic standard. Ready to use with any JS framework. Highly focused on…