В математике есть три постоянных величины, встречающихся, наверно, во всех основных её областях - e, π, i, хоть последняя и не действительное число. В то же время, есть еще одна знаменательная постоянная, хоть и не участвующая в великих формулах, но известная многим. Это "золотое сечение" - φ = 1.6180339887498948482...
Во античные времена математика ассоциировалась с красотой мира. Исследую красоту звуков и из сочетаний, Пифагор открыл музыкальную гамму, которая применяется и доныне. Он пришел к выводу, что приятное для слуха созвучие получается когда длины струн (= высоты нот) находятся между собой в простых целочисленных отношениях - типа 1/2, 3/4 и т.д. Так числа определили нотный строй.
#math #webdesign
Во античные времена математика ассоциировалась с красотой мира. Исследую красоту звуков и из сочетаний, Пифагор открыл музыкальную гамму, которая применяется и доныне. Он пришел к выводу, что приятное для слуха созвучие получается когда длины струн (= высоты нот) находятся между собой в простых целочисленных отношениях - типа 1/2, 3/4 и т.д. Так числа определили нотный строй.
#math #webdesign
Попытка применить числовые отношения к визуальному миру, чтобы задать критерии красоты, продвинулись не так далеко. Было принято, что "красивый" прямоугольник это такой, у которого маленькая сторона относится к большой так же, как большая к сумме маленькой и большой. Решение простого квадратного уравнения дает бесконечную дробь: a/b = 1.61803... Её и назвали золотым сечением.
Сразу же получается, что если a/b = 1.61803..., то b/a = 0.61803... Только одно число обладает таким свойством. Отметим, если a/b = φ и b/c = φ, то a/c = φ*φ, и таким образом можно получить ряд уменьшающихся или увеличивающихся гармоничных отрезков, как и с музыкальными нотами и их созвучиями.
#math #webdesign
Сразу же получается, что если a/b = 1.61803..., то b/a = 0.61803... Только одно число обладает таким свойством. Отметим, если a/b = φ и b/c = φ, то a/c = φ*φ, и таким образом можно получить ряд уменьшающихся или увеличивающихся гармоничных отрезков, как и с музыкальными нотами и их созвучиями.
#math #webdesign
Из интересных свойств можно еще отметить, что отношение соседних чисел Фибоначчи при их росте стремится именно к золотому сечению. Другими словами, последующий член последовательности примерно в 1.6 раза больше предыдущего.
Золотое сечение сразу стали, с одной стороны, находить в природе, а с другой - использовать при создании произведений искусств и архитектуры. В наше время им часто руководствуются при создании логотипов для брендов (Apple, Pepsi, Twitter, Google), и веб-дизайна - гармоничное разбиение отрезка на две части.
#math #webdesign
Золотое сечение сразу стали, с одной стороны, находить в природе, а с другой - использовать при создании произведений искусств и архитектуры. В наше время им часто руководствуются при создании логотипов для брендов (Apple, Pepsi, Twitter, Google), и веб-дизайна - гармоничное разбиение отрезка на две части.
#math #webdesign
Лучше всего избегать пустых CSS class атрибутов.
Например, следующий код отобразит
Передавая
#tip
Например, следующий код отобразит
div
с пустым атрибутом class:<div :class="isDisabled ? 'disabled' : ''"></div>
<!-- Will render <div class></div> -->
Передавая
null
вместо пустой строки, можно избежать отображения пустого атрибута класса:<div :class="isDisabled ? 'disabled' : null"></div>
<!-- Will render <div></div> -->
#tip
Если кто использует большие сторонние библиотеки, например, bootstrap, то с помощью PurgeCSS можно удалить из вашего бандла неиспользуемые стили, коих может быть много, и облегчить его вес.
Библиотека подключается как PostCSS плагин и хорошо настраивается. Можно использовать с Vite.
#css #purgecss
Библиотека подключается как PostCSS плагин и хорошо настраивается. Можно использовать с Vite.
#css #purgecss
Purgecss
PurgeCSS - Remove unused CSS | PurgeCSS
PurgeCSS is a tool to remove unused CSS from your project
Vue Router позволяет указать, куда и как скролить экран при переходе на роут:
Другие варианты можно посмотреть в документации
#vuerouter #tip
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
// всегда прокручивать до верха
return { top: 0 }
},
})
const router = createRouter({
// нативное поведение при навигации с помощью кнопок назад/вперед:
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { top: 0 }
}
},
})
const router = createRouter({
// задержка перед скролом
scrollBehavior(to, from, savedPosition) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ left: 0, top: 0 })
}, 500)
})
},
})
Другие варианты можно посмотреть в документации
#vuerouter #tip
vue-router-ru.netlify.app
Vue Router
Официальный маршрутизатор для Vue.js
Нашел четыре плагина для Vite для написания браузерных расширений:
https://github.com/samrum/vite-plugin-web-extension
https://github.com/antfu/vitesse-webext
https://crxjs.dev/vite-plugin/
https://github.com/aklinker1/vite-plugin-web-extension
Самый удобный и эффективный - последний. Поддержка HMR. В dev режиме возможно запускать в режиме расширения браузера, и в режиме веб приложения, что удобно для разработки.
#lib #webextension #vite
https://github.com/samrum/vite-plugin-web-extension
https://github.com/antfu/vitesse-webext
https://crxjs.dev/vite-plugin/
https://github.com/aklinker1/vite-plugin-web-extension
Самый удобный и эффективный - последний. Поддержка HMR. В dev режиме возможно запускать в режиме расширения браузера, и в режиме веб приложения, что удобно для разработки.
#lib #webextension #vite