[recovery mode] Модульный фронтенд для репликационного масштабирования или как перестать копировать репозитории целиком

https://habr.com/ru/post/647179/?utm_campaign=647179&utm_source=habrahabr&utm_medium=rss
В этой статье будут изложены основные идеи и показаны простые примеры для  грамотной организации, скажем так — «репликационного» масштабирования проектов на фронтенде. То есть, само понятие масштабирования здесь будет рассматриваться скорее с той точки зрения и в одном из смыслов как это понимает бизнес, но, при этом, речь будет пойдет именно о технической стороне процесса, правда, сугубо в контексте браузерной клиентской части информационных систем. Ближе к реальной ситуации: предположим что ваша компания разрабатывает, условно — некий OLAP-продукт, и перед вами как фронтенд-разработчиком ставят задачи по развертыванию и поддержке более или менее сходных новых проектов фронтенда для самых разных клиентов. После скандальной критической статьи о, имхо, сомнительных дурных современных подходах и тенденция в верстке веб-интерфейсов — моя карма на Хабре, наконец-то упала ниже нуля, а я, если честно, не очень хорошо понимаю правила игры, увидят ли эту статью читатели… Но, с другой стороны, готов изложить все просто «в стол», так как считаю что лучшая мотивация для написания чего либо — это если «просто очень хочется написать», сформулировать, прежде всего — для себя самого.Эта статья логично продолжает тематику первой статьи о модулях позволяющих сделать разработку фронтенда качественнее и эффективнее. Но если в первом материале речь шла, прежде всего, об замечательном атомарном тренде в вебдизайне и простом надежном способе доставки его в код компонентных фреймворков с помощью препроцессоров, построении простой кастомной библиотеки UI-компонент для единообразного оформления разных проектов, то новый пример станет немного сложнее — хочется сосредоточиться уже не на «внешних», «оформительских» моментах, а на функциональных и организационных. Для наглядной демонстрации практического применения изложенных в статье идей снова написаны примеры: небольшой модуль-библиотека (и документация к нему), а также использующий его проект, на этот раз с использованием более актуального стека Vue3+TypeScript/Vuex4/VuePress2. В отличии от более примитивной либы из первой статьи этот модуль: 1) использует хранилище, то есть содержит состояние 2) может запускаться в полноценном режиме разработки, как будто это собственно уже сам конечный проект 3) поддерживает темизацию и локализацию. Пример модуля содержит совсем немного компонент и документация на новой версии VuePress, в отличии от первой версии, не кастомизируется под фирменный стиль который предоставляет библиотека. Так сделано не только по причине лени и экономии времени, но, прежде всего, потому что кажется излишним — то что призваны продемонстрировать примеры — этого совсем не требует. Читать далее

Share Your Work!

https://dev.to/cwraytech/share-your-work-1ab2
My wife got me this awesome book by Austin Kleon titled, "Show your Work!". The book is super easy to read and I highly recommend it. The title is pretty clear, but the point of the book is how to share your work and use that as a way to get discovered.
Here is me sharing my work.
The past few months I've been working on a project with Garden Gate Nursery that soon will be finished. It's an inventory program that will help plant nurseries track inventory as it comes and goes from their nursery and generate orders & quotes for customers.
It will be fully integrated with QuickBooks Online & Desktop to generate invoices for orders and track sales. We may integrate with the QuickBooks Payments API as well to be able to charge customers through the app.
It is built on Laravel utilizing Inertia JS as a connector with the backend and Vue on the frontend. I'm using Tailwind CSS for the styling and Daisy UI for some components.



This video is a fast forwarded version of all the updates I took while working on the project. You can see the progress I made on the app and how it evolved over time! All in under 10 minutes.

How to Use Cards in Vuetify

https://javascript.plainenglish.io/how-to-use-cards-in-vuetify-ab50243cd7c7?source=rss------vuejs-5
Learn how to create and customize cards in VuetifyContinue reading on JavaScript in Plain English »

Vue 3 + Vite + TypeScript + Quasar issue

https://dev.to/ingsm/vue-3-vite-typescript-quasar-issue-1hlc
Namaste to everyone!🙏
I'd like to share with you an issue that I had to cope with today:)
It's important to mention, that I used vite cli command to create vue project, then I started adding extensions to it.
When I tried to add typescript to my exsisting project on Vue 3 + Vite + Quasar, I faced the problem:

Following the stipulations here

I received an error from the compiler : File "@quasar/app/tsconfig-preset" was not found.

So, I started to look for a solutions on github and stackoverflow, but found nothing there...
After trying commands likevue add quasar, I looked up in Quasar docs and found App Extensions section. But there I found instructions only for quasar cli:(
But not got discouraged I decided to try a command: yarn add @quasar/app
And voila! It works!:D
Thank you for reading and I hope that this information will be useful:)
P.S. I'm always open to discussion on any theme! Feel free to reach me!:) I'm on Discord: IngSm#0471

Jarida la Yesaya Software — Issue #5

https://medium.com/@yesayaathuman/jarida-la-yesaya-software-issue-5-cb5ed9d34b3?source=rss------vuejs-5
Leo nimekuandalia meetup na conference 3 muhimu kwa ajili yako kwa mwezi huu wa kwanza na wa pili.Continue reading on Medium »

Публикация Vue.js-приложения в GitHub Packages с помощью GitHub Actions для самых маленьких

https://habr.com/ru/post/599119/?utm_campaign=599119&utm_source=habrahabr&utm_medium=rss
В этой серии вы узнаете как собрать докер-образ приложения на Vue.js и как опубликовать его в GitHub Packages. Вот так. Вот в общем-то и... не всё... Одним GitHub Action, как это было для Spring Boot приложения, о котором я рассказывал тут, в этот раз обойтись не получится. Нужно ещё проделать некоторые манипуляции, о которых я и расскажу в данной статье. Читать далее

TIL how to set up path resolving in vite.

https://dev.to/valbuena/til-how-to-set-up-path-resolving-in-vite-lm9
What I Learned

[ is not set up by default. i wonder why.. ]



And why exactly is this interesting?


[ because my imports look way sexier ]




vite.config.js


import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
})

wovoui-icons: Bootstrap 5 icons in Vue 3

https://dev.to/wovosoft/wovoui-icons-bootstrap-5-icons-in-vue-3-2eop
Bootstrap Icons

wovoui-icons are imported

from Bootstrap 5 icons. There are almost 1522 icons.

And in the future, if Bootstrap provides some more icons, those will be available too as soon as possible.
wovoui-icons are wrapped in a separate package so that it's dependency can

be optional.



Getting Started

Of-course You can use the icons using the provided methods of Bootstrap 5. For example,



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">



@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");



import "bootstrap-icons"





Installation




Using NPM


npm install @wovosoft/wovoui-icons





Using yarn


yarn add @wovosoft/wovoui-icons





How to Use



<template>
<Activity :size="5"/>
<Alarm :size="5"/>
</template>
<script>
import {Activity, Alarm} from "@wovosoft/wovoui-icons";
export default {
components: {Activity, Alarm}
}
</script>

Как визуальный генератор пароля спас меня от выгорания и соцсетевой аддикции (HTML/CSS/JS vue без сборки)

https://habr.com/ru/post/647295/?utm_campaign=647295&utm_source=habrahabr&utm_medium=rss
Перед новым годом по мере нарастания стресса на работе я стал проводить много времени в Твиттере.

Это было моё последнее пристанище после почти годовой деактивации Фейсбука, ВКонтакте и Инстаграма. Автоматический статус ВК после отключения аккаунта хорошо передавал суть моего положения: «Я не могу жить и работать, пока в интернете есть страница с моим именем». Твиттер я никогда не понимал, завел по рекомендации Ситника, и стал вести его осенью на английском языке. Подписывался только на коллег, узнал много интересного, но вскоре и он превратился в обычную соцсеть с болтовней, флиртом и сотнями друзей.Но мне было стыдно удаляться и оттуда. Получится -- убежал отовсюду, оставив после себя пустое место. Соцсеть это всё-таки связь с людьми, и даже с потенциальными клиентами. Читать далее

Angular vs. Vue: The Better Bet for My Web App Project

https://javascript.plainenglish.io/angular-vs-vue-the-better-bet-for-my-web-app-project-d94d3a4418d9?source=rss------vuejs-5
When it comes to creating front-end interfaces, you can choose from numerous frameworks and libraries to work with. Not every framework or…Continue reading on JavaScript in Plain English »

Chai—Build & Export Landing Pages, HTML/React/Vue Components

https://surajair.medium.com/chai-build-export-landing-pages-html-react-vue-components-e2afd6855171?source=rss------vuejs-5
I’ve been working on Chai Builder for past couple of months and happy to annouce that its live for public use in beta.Continue reading on Medium »

How to use Material Design Icons with Nuxt.js efficiently

https://medium.com/@fatihsolhan/how-to-use-material-design-icons-with-nuxt-js-efficiently-75dcd7da2fd0?source=rss------vuejs-5
I have developed many large-scale Nuxt.js applications, one of the difficulties I had while developing these applications was icon…Continue reading on Medium »

Vue.js tutorial for beginner — binding HTML

https://medium.com/@azizabdulaziz70932/vue-js-tutorial-for-beginner-binding-html-2e1d06d56032?source=rss------vuejs-5
In vue application we can binding tag html with simple directive below.Continue reading on Medium »

We choose React & TypeScript not because they’re easy, but because they’re hard.

https://medium.com/next-generation-web/we-choose-react-typescript-not-because-theyre-easy-but-because-they-re-hard-d198a04b2bc6?source=rss------vuejs-5
Breaking the React + TypeScript “perceived” complexity for Web developers who are sceptical or hesitant about using these technologies.Continue reading on Next-Generation Web »

How to Use Dialogs in Vuetify

https://javascript.plainenglish.io/how-to-use-dialogs-in-vuetify-856256b680a4?source=rss------vuejs-5
Learn how to create and customize dialogs with Vuetify.Continue reading on JavaScript in Plain English »

Thank you, Faker. Now it’s Time to Move On.

https://medium.com/@shahar.kazaz/thank-you-faker-now-its-time-to-move-on-27253d3b0885?source=rss------vuejs-5
TL;DR — Falso is a modern, tree-shakeable, well-documented replacement for Faker.jsContinue reading on Medium »

Thank you, Faker. Now it’s Time to Move On.

https://dev.to/shaharkazaz/thank-you-faker-now-its-time-to-move-on-5cfi
TL;DR — Falso is a modern, tree-shakeable, well-documented replacement for Faker.js
You probably know what happened to Faker.js around two weeks ago.
In collaboration with Netanel Basal, I created a new mock data generator lib to provide a quick, suitable replacement for those relying on Faker (including us).



Meet Falso 🎩

✅ 160+ Functions ( at the time of writing)

✅ Tree Shakable

✅ Fully Typed

✅ Entity Functions

✅ Well documented with live previews

✅ Single and Array Results
There was a lot of community effort put into building this library. In just two weeks, we accomplished:
✨ A whopping 1.6k Github Stars

💪 59 Merged pull requests

🎁 58 New Features
I want to thank everyone who took part in this, you rock!
Give Falso a try and let me know what you think 🌟





ngneat
/
falso



All the Fake Data for All Your Real Needs 🙂









All the Fake Data for All Your Real Needs 🙂

Create massive amounts of fake data in the browser and NodeJS. Tree Shakeable & Fully Typed.






✅  164 Functions

✅  Tree Shakable

✅  Fully Typed

✅  Entity Functions

✅  Single and Array Result
🤓 Learn about it on the docs site

🔥 Run it on Stackblitz

Installation
npm i @ngneat/falso
yarn add @ngneat/falso


Usage

import { randEmail, randFullName } from '@ngneat/falso';
const user = { email: randEmail(), name: randFullName() };
const emails = randEmail({ length: 10 });


Setting a Randomness Seed
You can set your own seed if you want consistent results:

import { rand, seed } from '@ngneat/falso';
seed('some-constant-seed');
// Always returns 2
rand([1, 2, 3, 4, 5]);…



View on GitHub

See the docs:

We’re just getting started.



What’s Next?

🌐 Locale support

💪 More Generators

🎯 Improve data accuracy
You are welcome to contribute! Let us build the next generation of mock data together!
For those looking to contribute for the first time to an open-source, Falso is an excellent choice!

Building Reusable component with Vue — Part 2 (Accordion Component)

https://samador9.medium.com/building-reusable-component-with-vue-part-2-accordion-component-12b65d858900?source=rss------vuejs-5
Hey!, welcome to part 2 of this tutorial where we’re building reusable components with Vue. In part 1 of this tutorial, we learnt how to…Continue reading on Medium »

Chapter 4 — Init Nuxt 3 App

https://brieuccaillot.iss.onedium.com/chapter-4-init-nuxt-3-app-62c3c5981f5a?source=rss------vuejs-5
In the article, I will be creating the Nuxt project, before adding ThreeJS.Continue reading on Medium »

Preload JSON to load websites faster (Lighthouse, SEO)

https://medium.com/@marius.dras/preload-json-to-load-websites-faster-lighthouse-seo-880a31815913?source=rss------vuejs-5
Avoiding issues when using <link rel=”preload”>Continue reading on Medium »

Add BootstrapVue to VuePress

https://dev.to/conorsheehan1/add-bootstrapvue-to-vuepress-3h7g
Create a VuePress project

The first thing we need to do is create a new VuePress project. It's really easy with the latest version of npm or yarn. From the VuePress docs



yarn create vuepress-site $optionalDirectoryName





Install BootstrapVue

Next we install BootstrapVue



yarn add bootstrap bootstrap-vue





Configuration

Now we need to import BootstrapVue in .vuepress/enhanceApp.js, where we have access to the vue instance.



// .vuepress/enhanceApp.js
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
export default ({ Vue, options, router, siteData }) => {
// Make BootstrapVue available throughout your project
Vue.use(BootstrapVue);
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin);
}


Finally we need to load the bootstrap css. VuePress ships with stylus by default now, but we can still import css into our stylus file at .vuepress/styles/index.styl



/**
* Custom Styles here.
*
* ref：https://v1.vuepress.vuejs.org/config/#index-styl
*/
@require '~bootstrap/dist/css/bootstrap.css'
@require '~bootstrap-vue/dist/bootstrap-vue.css'


That's it! Now you can use BootstrapVue components in your VuePress app.



Example

Vuepress lets you embed components directly in markdown, so you can do something like this



<!-- src/index.md -->
## Hi from bootstrap-vue
<b-button>Hello world!</b-button>


Here's an example app I've deployed to netlify which uses various BootstrapVue components including b-carousel and b-table: https://conorscocktails.netlify.app/
You can find the sourcecode here: https://github.com/ConorSheehan1/conors-cocktails