Vue.js Digest 🇷🇺 🇺🇸
39 subscribers
389 photos
745 links
Дайджест новостей из мира vuejs
Download Telegram
Create a New Project With Vue CLI

https://medium.com/@la.dev/create-a-new-project-with-vue-cli-712ee88430d1?source=rss------vuejs-5
Vue.js is slowly becoming a very popular framework, and adding this skill to your resume might be interesting for your career. So if you…Continue reading on Medium »
Fun way to sort how people will start talking in meetings, with daily quotes to boost your day

https://dev.to/dippas/fun-way-to-sort-how-people-will-start-talking-in-meetings-with-daily-quotes-to-boost-your-day-1epg
Hi there,
You know those daily meetings that almost everyone have nowadays mostly virtually due to Covid-19? It can be hard to start them, specially in large teams, because no one knows if its their turn to talk or not, maybe want to respect hierarchy or something else.
With that in mind (and a few other reasons) in the beginning of the pandemic I created just for fun and as dare from my co-workers a way to randomly sort the order in how everyone in each team would speak everyday.
As this was just for fun and in house project I created a few extra features such as:

daily quotes to boost the day
the shuffler user (the user who would shuffle the order in every day)
number of rounds the shuffle would sort, completely random also.
sound of deck cards shuffling
confetti effect when shuffle had finished sorting (with an extra audio - 20th Century Fox Intro Flute - which is an inside joke in my team)

This project was well received in the team and others also inside the company that more than a year passed it is still used everyday.
Today I show you guys the improved version of this project.
The old project was basic, being built with Vue 2 without components (file extension was .js) nor es6 modules
The new project (improvement) is built with:

Vue 3
SCSS
Pug
Vite
JSON Server

It has a few new features/improvements:

CRUD application with JSON Server (with ability to upload image/avatar stored in base64, fallback to UI avatars API if no image provided)
Daily Random Background from Picsum API

New quotes API and it's author with picture from Quoteable API

Layout improvement - the shuffle sorting works in mobile






dippas
/
shuffler



Fun way to sort how people will start talking in meetings, with daily quotes to boost your day






Shuffler

Fun way to sort how people will start talking in meetings, with daily quotes to boost your day

Show your support

Give a ⭐️ if you enjoyed this project!

Status








Built With

Vue 3
SCSS
Pug
Vite
JSON Server


Getting Started

Installation

npm i


Development
Run json-server and let it running

npm run db

Run project in another terminal at the same time

npm run dev


Build for Production

npm run build


Locally preview production build

npm run preview


Features

Shuffle Randomly Users (with random rounds bwtween 5 and 10)
CRUD application with JSON Server (with ability to upload image/avatar stored in base64, fallback to UI avatars API if no image provided)
Randomly select daily who will shuffle
Daily Random Background from Picsum API

Daily Quotes and it's author with picture from Quoteable API

Sound of deck cards shuffling
Confetti effect when shuffle finished sorting (with an extra audio…



View on GitHub

Give a ⭐️ if you enjoyed this project or buy me a coffee!
Create an App Information Component in Nuxt

https://dev.to/ravgeetdhillon/create-an-app-information-component-in-nuxt-1ock
You must have seen multiple apps which show the app’s information like app version and last updated at time in their footers or via a floating action button. In this tutorial, you’ll learn to create a component to show such kind of information in a Nuxt app.
Read the full blog on RavSam.
Thanks for reading 💜
I publish a monthly newsletter in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev-related posts which I come across while surfing on the web.
Connect with me through Twitter • LinkedIn • Github or send me an Email.
— Ravgeet, Full Stack Developer and Technical Content Writer
4 Top Rated Queries about Vue.js 3 on StackOverflow

https://javascript.plainenglish.io/4-top-rated-queries-about-vue-js-3-on-stackoverflow-90beaff3b285?source=rss------vuejs-5
Answering the 4 top-rated questions on Vue.js 3.Continue reading on JavaScript in Plain English »
Stale Closures — I underestimated closures

https://rahuulmiishra.medium.com/stale-closures-i-underestimated-closures-53ed55e8764a?source=rss------vuejs-5
Hello World 🌏Continue reading on Medium »
Vuetify Component: Button With Tooltip

https://javascript.plainenglish.io/vuetify-component-button-with-tooltip-c042014b7121?source=rss------vuejs-5
I use Vue for most of my projects, and, these days, Vuetify is my go-to UI framework. I routinely create buttons that only contain an icon…Continue reading on JavaScript in Plain English »
Top 5 VS Code extensions for Vue developers for 2022

https://medium.com/@epicprogrammer/top-5-vs-code-extensions-for-vue-developers-for-2022-cbc2e2d7b06?source=rss------vuejs-5
There’s a high chance that, if you’re a web developer, you’re using VS Code. After all, it’s the most popular code editor around. In large…Continue reading on Medium »
First Time as a Front-end Developer Using Vue.js

https://medium.com/@penpimjir/first-time-as-a-front-end-developer-using-vue-js-be202e159d69?source=rss------vuejs-5
Probably not much of useful educational content! More like a self-reflection, I guess?Continue reading on Medium »
Composition API vs VueX

https://dev.to/ironmandev/composition-api-vs-vuex-cdm
No framework Vue, na sua atual versão 3, é possível utilizar a API de composição do Vue (Composition API) para lidar com possíveis cenários de repetição de código.
Agora o Vue conta com funcionalidades importadas do framework, para ser utilizado somente aquilo que será necessário. A abordagem é um pouco parecida com os "react hooks" para quem vem do mundo do React.js.
Aqui vai um exemplo:
global.js



import { reactive } from 'vue';
const state = reactive({ count: 0 })
const incrementCount = () => state.count++;
export default { state, incrementCount };


No código acima é importada uma função que vai lidar com a reatividade do objeto, que é passado como argumento contento o atributo "count". Dessa forma qualquer alteração no atributo "count" será reativo, ou seja, qualquer lugar(componente, função, etc..) que use o count receberá a atualização em primeira mão, porque todos os valores dentro do objeto são reativos.
Com alguns novos recursos do Vue também é possível implementar funcionalidades parecidas com as da API de contexto do React. É possível agora utilizar provide / inject para trabalhar com estado global (não se limita a isso).
Agora com a nossa loja (store) configurada com o estado e a função incrementCount() que manipula um valor do estado, é necessário "prover" (provide) esse estado para toda a nossa aplicação Vue.
main.js



import { createApp } from "vue";
import global from "@/global";
const app = createApp({
provide: {
global
},
...
}


Agora todos os nossos componentes podem ter acesso ao estado e as funções que manipulam o mesmo, mas para isso ser possível é necessário fazer uma "injeção" do estado global no componente, para isso iremos utilizar o "inject":



<template>
<div>{{ global.state.count }}
<button @click="global.increment">Increment</button>
</template>
<script>
export default {
inject: ["global"]
}
</script>


Dessa maneira já temos um estado global simples já implementado, mas a pergunta é, substitui VueX? A resposta é, depende.

O VueX por ser um projeto grande e que já tem um bom tempo no ecossistema Vue foi pensado e feito somente para lidar com o estado global da aplicação, ele pode (sugerível) ser usado em aplicações que exijam estados globais mais complexos, e as motivações são as seguintes:

VueX conta com a extensão do Vue que facilita bastante a inspeção de problemas com o estado global, lá ele lista as mutations, actions, getters, e o próprio estado global de uma forma mais amigável de ler e compreender o estado da aplicação.
VueX conta com vários plugins famosos que podem ser úteis em vários cenários, como o "vuex-persisted" que persiste o estado global da aplicação no local storage.

Bom, entendendo quais problemas cada solução veio resolver, agora você pode escolher qual atende o cenário do seu projeto. :)
Referências:

https://vuejsdevelopers.com/2020/10/05/composition-api-vuex/
Vue.js Özel Directive Oluşturma

https://medium.com/@EmirEskici/vue-js-%C3%B6zel-directive-olu%C5%9Fturma-5d148e86fd08?source=rss------vuejs-5
Directive’ler v-directiveName yazım kuralı(syntax) ile yazdığımız
seçilen(DOM) yada içerisine yerleştirilen component’in veya elementin…Continue reading on Medium »
319724747f17a26a49b759aaa0e51bcd_349271_1640330711.jpg
4 MB
Popular Vue.js plugins & packages

https://mayank-1513.medium.com/popular-vue-js-plugins-packages-2bb370c4e49b?source=rss------vuejs-5
Vue.js is a modern JavaScript library as well as a framework. Well, it is actually a UI library that can be used with any other JS…Continue reading on Medium »
Building an Issue tracker application from scratch

https://devayansarkar.medium.com/building-an-issue-tracker-application-from-scratch-77765240c1a8?source=rss------vuejs-5
This blog is about how I built an “Issue tracker” application from scratch, the tools and technology I chose (and why) , the steps…Continue reading on Medium »
JavaScript is a single threaded "Synchronous", What does that mean?!

https://dev.to/ahmedm1999/javascript-is-a-single-threaded-synchronous-what-does-that-mean-271h
Hello everyone, in this article I will give you the mean of single threaded javascript.
First, let's talk about the JavaScript engine in brief way.
A JavaScript engine is a software component that executes JavaScript code, Its consists of many steps and components to allow it perform it's tasks.
The two main important things in this step are:
1- We need to store and write information/data for our application (variables, objects, etc..).
2- We need to keep track of what's happening to our code line by line.
This is where a Call stack and Memory heap comes in.
This image explain this two component in graphical way :

1. Call stack:
Help to know where we are in the code and to keep track of its place in a script that calls multiple functions — what function is currently being run and what functions are called from within that function, etc.

To know more about call stack and how it is work exactly, I recommend this tutorial for you.
2. Memory heap:
The memory heap, also called the ‘heap’, is a section of unstructured memory that is used for the allocation of objects and variables, so it is where our variables and functions stores Briefly.

To deep in heap from here
After that, back to our main subject, "Javascript is a single threaded programming language" which means it has only one call stack that is used to execute the program, so one set of instructions is executed at a time, it's not doing multiple things.

And because of that JavaScript is Synchronous.
So if you understand what is single threaded means, it's the same concept with Synchronous JavaScript "one thing at a time".
This approach of programming lead to make many problems, so the direction now to use another way of JavaScript called "Asynchronous" programming.

I will make to it another article in the come in days.
Hope you clearly understand this important concepts as a JavaScript developer! 🙌🌹

Ahmad Mukahal
Basic state management Vue

https://medium.com/@endySantoso/basic-state-management-vue-267d3f05a17?source=rss------vuejs-5
after a few years in my journey in FE development, I try to use Vue in my project. I think it’s easier to learn than react, but it’s just…Continue reading on Medium »
Suggestions Required For SayHeyToMe

https://dev.to/apidev234/suggestions-required-for-sayheytome-1c8j
So,A time back i made this website SayHeyToMe which easily allows users to create their portfolios,
You can visit the live web here, It has nothing except for showing user info and users social media. I have a planned feature list, Please check and add to the discussion

Follow System
Blogs Like medium.com n dev.to as well
Sponsor Button,Redirecting users to web sites like patreon,kofi
Sponsorships, Users will connect their stripe accs and anybody can pay them.
Creiamo una app con Vue ed Electron 1° parte

https://chiarapassaro.medium.com/creiamo-una-app-con-vue-ed-electron-1-parte-147209265616?source=rss------vuejs-5
Come realizzare una app in Vue ed Electron che permette di generare e visualizzare delle palette di coloriContinue reading on Medium »
Complete Understanding of Server-Side Rendering for ReactJs

https://bytecodepandit.iss.onedium.com/complete-understanding-of-server-side-rendering-for-reactjs-aebbf666899f?source=rss------vuejs-5
Let’s play with some Nodejs and ReactjsContinue reading on Medium »
Best practices in Vue.js and Jest

https://medium.com/@lambrospd/best-practices-in-vue-js-and-jest-514e6eebe1c2?source=rss------vuejs-5
In this tutorial we are going to go through the process of writing unit tests in Jest for a Vue.js application. I am going to use my…Continue reading on Medium »