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.

Deploy your Vue.js app to Azure using Terraform

https://dev.to/roxait/deploy-your-vuejs-app-to-azure-using-terraform-335b

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 »

Migrating from Vue 2 to Vue 3

https://tolbxela.medium.com/migrating-from-vue-2-to-vue-3-f4c7f3c89e33?source=rss------vuejs-5
My experience and tips of upgrading Vue.js projects to Vue 3Continue reading on Medium »

Update: Using Vue 3 Components in ASP.NET Core without bundler

https://tolbxela.medium.com/update-using-vue-3-components-in-asp-net-core-without-bundler-d144f9a649e6?source=rss------vuejs-5
An update to my article about using Vue.js Components in ASP.NET Core Web Application without JavaScript bundlerContinue reading on Medium »

Updates to my Vue 2 articles

https://tolbxela.medium.com/updates-to-my-vue-2-articles-e99280ab9c54?source=rss------vuejs-5
Migration from Vue 2 to Vue 3Continue reading on Medium »

Forcing Vue.js devtools extension to work in production mode on any website

https://medium.com/drmax-dev-blog/forcing-vue-js-devtools-extension-to-work-in-production-mode-on-any-website-84798162b5f?source=rss------vuejs-5
This “hack” is kind of must have for any Vue.js developer. Read more…Continue reading on Dr.Max IT Development Blog »

My top 3 places to go to when I am stuck with programming problem

https://medium.com/@maltinimalmo/my-top-3-places-to-go-to-when-i-am-stuck-with-programming-problem-39899f270ee?source=rss------vuejs-5
The struggles of learning by your selfContinue reading on Medium »

Ionic Framework v6 VueJS And Firebase - Authentication Flow Using Pinia For State Management

https://dev.to/aaronksaunders/ionic-framework-v6-vuejs-and-firebase-authentication-flow-using-pinia-for-state-management-5aia
Source code walkthrough for a template for Vuejs authentication flow using firebase for authentication, latest Ionic Framework version 6, and Pinia for State Management.
We are also using the newest version of Firebase in this template, the APIs have changed a bit but the examples in the application try to make it easier



The Video Covers


How to manage the authentication flow with state management in Pinia
Keep the user state and profile information there.
Manage authentication guards in the vuejs router utilizing state variables.
Updating data in your application views as the data is refreshed in firebase. Using collection listeners and updating the Pinia State.







Template Source Code






aaronksaunders
/
ionic-v6-firebase-tabs-auth



template for vuejs authentication flow using latest firebase version, latest ionic v6 and pinia for state management






ionic-v6-firebase-tabs-auth
template for vuejs authentication flow using latest firebase version, latest ionic v6 and pinia for state management
Video On YouTube

https://youtu.be/XWHdFQPkS9Q





View on GitHub








Links


Pinia Video - https://youtu.be/sKGh2wp4QfM

Pinia Documentation - https://pinia.vuejs.org/

Source - https://github.com/aaronksaunders/ionic-v6-firebase-tabs-auth





Follow Me

twitter - https://twitter.com/aaronksaunders

github - https://github.com/aaronksaunders

udemy - https://www.udemy.com/user/aaronsaunders

gumroad - https://app.gumroad.com/fiwic

Update: Vue 3 Components in ASP.NET Core using vue3-sfc-loader

https://tolbxela.medium.com/update-vue-3-components-in-asp-net-core-using-vue3-sfc-loader-e0ed74d86cc8?source=rss------vuejs-5
Upgrade to Vue 3 of my previous article for Vue 2Continue reading on Medium »

Create a simple time ago component in Vue using Moment.js

https://dev.to/maxwelladapoe/create-a-simple-time-ago-component-in-vue-using-momentjs-3en7
Ever needed a time ago component where you can parse a datetime string and get your date in the format like 10 days ago , a year ago etc.? Well you could create that easily in vue.js using moment.js.
Let's dive straight into it.

Install moment.js using npm npm install moment --save or with yarn yarn add moment

Create a new component. You can name it TimeAgo.vue
In your component



#TimeAgo.js
<template>
<span>{{convertedDateTime}}</span>
</template>
<script>
import moment from 'moment'
export default {
name: "TimeAgo",
props:{
dateTime:{
required:true
}
},
created() {
this.moment = moment;
},
computed:{
convertedDateTime(){
return moment(this.dateTime).fromNow();
}
}
}
</script>


to use it in your project



...
<time-ago :dateTime='new Date()'/>
...
<script>
import TimeAgo from "@/components/TimeAgo";
export default {
...
components: {
TimeAgo
}
...
}
</script>


and thats it. This should work in vue 2 and vue 3 without any issues. if you need to extend it you can see the moment.js docs

Build Web Apps with Vue JS 3 & Firebase

https://medium.com/@maxiruti/build-web-apps-with-vue-js-3-firebase-e71aac3dac05?source=rss------vuejs-5
Build Web Apps with Vue JS 3 & FirebaseContinue reading on Medium »

Why You Should Use VueJS

https://dev.to/adyaksa_w/why-you-should-use-vuejs-49il
In the current framework trend for frontend, there is 3 mainstream that we commonly know: React, Vue, and Angular. In my recent projects, when there is a need to write frontend applications, I always used Vue. I just love using Vue.


From VueJS Official Site
Why? Well, first of all, I'm not hardcore enough to learn many things just for a simple project. I want simplicity. So for this reason, I excluded Angular. Now it comes down to React and Vue. Here comes my second reason: I love Vue syntax.
First of all, the file structure is quite simple yet separated beautifully. If you never touched Vue before, here is a snippet of basic Vue syntax



**<template>**
<h1>Hello {{name}}</h1>
**</template>
<script>**
export default {
data() {
return {
name: 'Adyaksa',
}
}
}
**</script>
<style>**
h1 {
color: red;
}
**</style>**


So Vue file structure is divided into 3 sections: template, script, and style. The combination will form a Vue Component. The template is where the HTML structure is described. All heavy lifting is placed in the script section, where we can put all normal frontend scripts here in addition to Vue-specific scripts such as component lifecycle. And then the last section is where we put our CSS for the code.
One thing that I have experienced when using React is that when your team doesn't have a clear formatting guideline, it's harder to find specific code that you need. Moreover, when you have many components with their own specific styling, you will have an enormous number of files that you have. But when we're using Vue, all the HTML, CSS, and JS are combined in 1 class with a specific order that is already defined. Because of this, we know where each section is located in the file and we have an easier time finding what we need. This is also described in Vue docs: "What About Separation of Concerns?"
And then the second one is what makes creating HTML in Vue fun: Directives. Imagine that you want to create a list based on value from array arrayList . You can easily do it by adding v-for directives like this:



<li **v-for="item in arrayList"**> {{ item }} </li>


Hey, what's so fun about it? Well, imagine that you want to create something more complex such as displaying the ranking of an item with its attributes. By using this, we can just add v-for directives to easily access all the attributes of the item. And there are many more neat directives such as v-if, v-show, v-model etc.
But it's not all fun and game. Like all languages, VueJS readability would suffer at a more complex project. Its code structure also doesn't help, with every bit of code stuffed in a file. But still, I think this is a small price to use this fun language.
Hello, I'm Adyaksa, and I write about software development and my language learning experience. I'm planning to release a weekly blog about something that I find interesting while working on my side projects. If you're interested, you can follow me to keep updated about it!

Why You Should Use VueJS

https://medium.com/@adyaksa.w/why-you-should-use-vuejs-d7d97aaf964c?source=rss------vuejs-5
In the current framework trend for frontend, there is 3 mainstream that we commonly know: React, Vue, and Angular. In my recent projects…Continue reading on Medium »

Creating Tabs with Vue 2 and Tailwind css

https://dev.to/maxwelladapoe/creating-tabs-with-vue-2-and-tailwind-css-121d
So I was building an admin dashboard for hirehex using tailwind and needed to create some Tabs.
To be honest its rather simple to implement but requires some understanding of how components work in vue.js

I will be skipping the vue.js & tailwind project set up. But should you need it, you can check it out here
We will need 2 components for this:

Tab.vue & Tabs.vue
in Tab.vue:



<template>
<div v-show="isActive">
<slot></slot>
</div>
</template>

<script>
export default {
name: "Tab",
props: {
name: {
required: true,
type: [Number, String],
},
selected:{
default: false
}
},
data(){
return {
isActive:false
}
},
mounted(){
this.isActive = this.selected;
}
}
</script>



in Tabs.vue:



<template>
<div>
<div id="tab-links">
<ul class="flex space-x-2 ">
<li v-for="(tab, index) in tabs "
:key="index"
:class="{'border-b-2':tab.isActive}"
class="py-2 border-solid text-center w-40 cursor-pointer"
@click="selectTab(tab)">
{{tab.name}}
</li>
</ul>
<hr>
</div>

<div id="tab-details">
<slot></slot>
</div>

</div>

</template>

<script>
export default {
name: "Tabs",
data() {
return {
tabs: []
}
},
created() {
this.tabs = this.$children;
},
mounted() {
//check if a tab has been selected by default
let hasTabBeenSelected = this.tabs.findIndex(child=> child.selected ===true)
//set the default to the first one
if (hasTabBeenSelected === -1){
this.tabs[0].isActive=true;
}
},
methods: {
selectTab(selectedTab) {
this.tabs.forEach(tab => {
tab.isActive = tab.name === selectedTab.name;
})
}
}
}
</script>

<style scoped>
</style>


With these in place you should have a working tab component.

Feel free to modify this in anyway to meet your use case.

Thanks.