Vue-FAQ
936 subscribers
571 photos
91 videos
562 links
Канал сайта https://vue-faq.org
Информация о Vue.js, фронтенд разработке и не только

Contacts: @RuslanMakarov
Download Telegram
Vue.js релизнула v3.4.19

Опять не очень удачно - были добавлены предупреждения пользователям, если computed имеет side effect-ы, однако в соответствующем PR-e сразу посыпались жалобы, что из предупреждения не видно, в каком computed-e проблемы, и даже что чистые computed-ы дают такие предупреждения.

#vue
🤯3
Принцип инверсии зависимостей

Буква D в аббревиатуре принципов объектно-ориентированного программирования SOLID означает Dependency inversion principle - Принцип инверсии зависимостей, который очень хорошо применим и во фронтенд разработке.

Он гласит: "Завись от абстракций. Не завись от конкретной реализации".

Другими словами, если у вас есть некая сущность, которая что-то использует, то возможно она должна это делать через интерфейс.

Пример: в ваших компонентах вам надо форматировать дату и время. Вы можете сразу подключить какой-нибудь dayjs и использовать его везде. В какой-то момент вы обнаруживаете, что функционала dayjs не хватает, и подключаете date-fns, попутно меняя весь предыдущий код.

Согласно Принципу инверсии зависимостей вам следует создать интерфейс для функций работы с датой - например, dates.ts, в котором прописать свои функции, которые являются обертками над date-fns функциями. В коде вы обращаетесь к этим своим функциям, а их реализация уже лежит в этом файле. Это даёт ту самую loose coupling - слабую связанность.

В ООП языках между конкретной реализацией dates.ts и кода, её использующего, нужно бы было создать промежуточный абстрактный класс DateUtilities - именно его называют в объяснении принципа "абстракцией". В JavaScript он не создается, dates.ts выполняет и его роль.

Таким образом вы можете спокойно работать над проектом с самого начала, не задумываясь, кто именно будет реализовывать логику работы с датами. Вполне возможно, к концу проекта вы увидите, что используете только 3 функции из date-fns, и они вполне могут быть реализованы самостоятельно. Вы избавляетесь от зависимости, делаете бандл легче, приложение - быстрее, и не надо ничего менять в коде, кроме самого dates.ts. Возможно будет иная причина поменять одну зависимость на другую - вы снова это делаете, не меняя основного кода.

То же самое относится к компонентам - обертки BaseButton, BaseIcon, BaseDropdown и т.п. служат этой же цели - значительно облегчить разработку, поддержку и дальнейшее развитие проекта путем снижения привязанности основного кода к конкретным зависимостям.

#architecture #solid
6👍3
Забавный твит

Моя жена только что сказала мне, что сайт по покупке билетов не работает. Оказывается, она просто нажимала кнопку до того, как JS закончил гидратацию, поэтому ничего не происходило 🙈. Спасибо, SSR...

#ssr #nuxt
🤣8👍5😁2
Сайт, который показывает что может современный PWA на мобильных устройствах.

whatpwacando.today

#pwa
👍14
FormKit выпустила библиотеку `tempo`, для работы с датой и временем

Tempo - это новая библиотека в ряду библиотек работы с датой и временем JavaScript. Вдохновленная такими библиотеками, как moment.js, day.js и date-fns, Tempo создана с нуля, чтобы быть как можно более маленькой и простой в использовании.

Tempo лучше всего рассматривать как набор утилит для работы с объектами Date - важное отличие от других библиотек, предоставляющих пользовательские примитивы даты. Под капотом Tempo использует JavaScript's Intl.DateTimeFormat для извлечения сложных данных, таких как смещение часовых поясов и форматы дат с учетом локали, предоставляя вам простой API для форматирования, разбора и манипулирования датами.


В коде под капотом действительно все чистенько и tree-shakable.
Но, повторюсь, если вам нужно немного каких-то особенных функции для работы с датами, например, addHour(), попросите Codeium или другой чат-бот сгенерировать их и, возможно, этого вкупе с Intl.DateTimeFormat вполне хватит

#formkit #tempo #dates
👍2🤔2🤡1
В математике есть три постоянных величины, встречающихся, наверно, во всех основных её областях - e, π, i, хоть последняя и не действительное число. В то же время, есть еще одна знаменательная постоянная, хоть и не участвующая в великих формулах, но известная многим. Это "золотое сечение" - φ = 1.6180339887498948482...

Во античные времена математика ассоциировалась с красотой мира. Исследую красоту звуков и из сочетаний, Пифагор открыл музыкальную гамму, которая применяется и доныне. Он пришел к выводу, что приятное для слуха созвучие получается когда длины струн (= высоты нот) находятся между собой в простых целочисленных отношениях - типа 1/2, 3/4 и т.д. Так числа определили нотный строй.

#math #webdesign
👍4
Попытка применить числовые отношения к визуальному миру, чтобы задать критерии красоты, продвинулись не так далеко. Было принято, что "красивый" прямоугольник это такой, у которого маленькая сторона относится к большой так же, как большая к сумме маленькой и большой. Решение простого квадратного уравнения дает бесконечную дробь: a/b = 1.61803... Её и назвали золотым сечением.

Сразу же получается, что если a/b = 1.61803..., то b/a = 0.61803... Только одно число обладает таким свойством. Отметим, если a/b = φ и b/c = φ, то a/c = φ*φ, и таким образом можно получить ряд уменьшающихся или увеличивающихся гармоничных отрезков, как и с музыкальными нотами и их созвучиями.

#math #webdesign
👍2
Из интересных свойств можно еще отметить, что отношение соседних чисел Фибоначчи при их росте стремится именно к золотому сечению. Другими словами, последующий член последовательности примерно в 1.6 раза больше предыдущего.

Золотое сечение сразу стали, с одной стороны, находить в природе, а с другой - использовать при создании произведений искусств и архитектуры. В наше время им часто руководствуются при создании логотипов для брендов (Apple, Pepsi, Twitter, Google), и веб-дизайна - гармоничное разбиение отрезка на две части.

#math #webdesign
🤔4👍1
👎6👍1🔥1
Лучше всего избегать пустых CSS class атрибутов.
Например, следующий код отобразит div с пустым атрибутом class:

<div :class="isDisabled ? 'disabled' : ''"></div>
<!-- Will render <div class></div> -->


Передавая null вместо пустой строки, можно избежать отображения пустого атрибута класса:

<div :class="isDisabled ? 'disabled' : null"></div>
<!-- Will render <div></div> -->


#tip
👍1512👌2👎1
Если кто использует большие сторонние библиотеки, например, bootstrap, то с помощью PurgeCSS можно удалить из вашего бандла неиспользуемые стили, коих может быть много, и облегчить его вес.

Библиотека подключается как PostCSS плагин и хорошо настраивается. Можно использовать с Vite.

#css #purgecss
👍16
Может кому надо, можно скачать себе почти весь интернет.

vue-faq.org тоже есть, я проверил.

#crawlers
😱5😁3🤔1