JavaScript current year with getFullYear()

https://dev.to/nickfrosty/javascript-current-year-with-getfullyear-h1c
Did you hard code the year in your footer? New year, new problems.
With this one-liner, you can dynamically set the year with JavaScript:



let year = new Date().getFullYear();


If you are using VueJS or NuxtJS, you can add the current year code directly into your template section



<template>
<footer>
Copyright © {{ new Date().getFullYear() }}
</footer>
</template>


You can find more useful dev articles on my site, frostbutter.com/articles

Hacking together a web-scraping enrollment app

https://dev.to/nandanv2702/hacking-together-a-web-scraping-enrollment-app-3eb6
Overview of My Submission

If you're a university student / have ever been to uni, you know how cumbersome enrollment can be. You need to look for a class, find the profs, find out how good they are and their average GPA - all this takes time!
So, this app aims to sort professors by rating and GPA trend for any course in this semester or the upcoming one/(s) at my uni - and all you need to do is look up course 😄




Submission Category

Choose Your Own Adventure



Link to Code






nandanv2702
/
unitrack



Sort UW-Madison professors by rating and GPA trend for any course in this semester or the upcoming one/(s)






UniTrack
Sort professors by rating and GPA trend for any course in this semester or the upcoming one/(s)

The Problem
Here's what it's like enrolling for classes:


Search for a class on the Course Search and Enroll App

Search for every professor's rating online

Search for every professor's GPA trends on MadGrades


Try to make sense of this data

Have a Spotted Cow 🍻


Repeat for 5 other classes this semester


The Solution
Here's what you could do instead:


Look up a class on this app

Have a Spotted Cow 🍻


View grade trends and ratings all in one place!


What I Used


MadGrades API

Find course by name, e.g., 'Econ 101'
Find all GPA data and filter by professor


UW Madison's Public Course Search and Enroll API

Find course in a particular semester
Find professors for all sections in one course in a semester


Good ol' web scraping for…



View on GitHub




Additional Resources / Info

Here's some of the tools I used

MongoDB Atlas

NuxtJS - a VueJS framework

ChakraUI - an accessibility-oriented component library

Vuejs artık eskisi gibi değil…

https://medium.com/@swoorr/vuejs-art%C4%B1k-eskisi-gibi-de%C4%9Fil-cc9615ae53bc?source=rss------vuejs-5
Herkese selamlar öncelikle… 
Ben kendi gördüklerimi paylaşmaya çalışacağım, bilgi değil deneyim aktarma yanlısıyım ✌️Continue reading on Medium »

Create a Beautiful To-Do List App With Vuetify: Adding New Tasks

https://javascript.plainenglish.io/create-a-beautiful-to-do-list-app-with-vuetify-adding-new-tasks-63839dc462c8?source=rss------vuejs-5
Use FABs, dialogs and form controls to enable adding of new tasks in the to-do list app.Continue reading on JavaScript in Plain English »

i coded and published a fancy cursor component

https://dev.to/valbuena/i-coded-and-published-a-fancy-cursor-component-3i62
i am re-building my personal website using VUE3 (vite, gsap, typescript, composition API and WebGL-Fluid-Simulation by Pavel Dobryakov)
i've put everyhing in components. some may find this one interesting/useful.
https://github.com/vlbn/fancycursor
any feedback is always welcome!

Solved: Module not found: Error: Can't resolve 'sass-loader'

https://dev.to/cyebukayire/solved-module-not-found-error-cant-resolve-sass-loader-50l7
I have been struggling with this problem a few minutes ago when I was trying to install node-sass and sass-loader in my Vuejs project.

I used this command :

npm i --save-dev node-sass sass-loader

Output:

Could not resolve dependency: npm ERR! dev sass-loader@"*" from the root project npm ERR!

With some sort of:




npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/webpack
npm ERR! peer webpack@"^4.0.0" from @intervolga/[email protected]
npm ERR! node_modules/@intervolga/optimize-cssnano-plugin
npm ERR! @intervolga/optimize-cssnano-plugin@"^1.0.5" from @vue/[email protected]
npm ERR! node_modules/@vue/cli-service
npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/[email protected]
npm ERR! node_modules/@vue/cli-plugin-babel
npm ERR! dev @vue/cli-plugin-babel@"~4.5.0" from the root project
npm ERR! 4 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...)
npm ERR! peer webpack@"^4.0.0 || ^5.0.0" from @soda/[email protected]
npm ERR! node_modules/@soda/friendly-errors-webpack-plugin
npm ERR! @soda/friendly-errors-webpack-plugin@"^1.7.1" from @vue/[email protected]
npm ERR! node_modules/@vue/cli-service
npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/[email protected]
npm ERR! node_modules/@vue/cli-plugin-babel
npm ERR! dev @vue/cli-plugin-babel@"~4.5.0" from the root project
npm ERR! 4 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...)
npm ERR! 19 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev sass-loader@"*" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! peer webpack@"^5.0.0" from [email protected]
npm ERR! node_modules/sass-loader
npm ERR! dev sass-loader@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\user\AppData\Local\npm-cache\eresolve-report.txt for a full report.


So, I thought this was some dependency conflicts and there is actually a note about this here
This is how I solved the issue:

npm install -D sass-loader@^10 sass

Multi-tenant web app with firebase and google cloud identity

https://medium.com/@andriamanamisoa/multi-tenant-web-app-with-firebase-and-google-cloud-identity-f6227f198db6?source=rss------vuejs-5
As I am developing a SAAS project that is going to be used by several clients that share common activities but they don’t need necessarily…Continue reading on Medium »

Setting Up Vue 3 & Adonis JS Using Laravel Mix

https://cerwyn.medium.com/setting-up-vue-3-adonis-js-using-laravel-mix-d0107cffd9df?source=rss------vuejs-5
Adonis JS is one of the Laravel-like full-stack Node JS frameworks that have some benefits compared to Laravel. One of the reasons I used…Continue reading on Medium »

How To ‘Design’ a Design System — Part I

https://medium.com/insiderengineering/how-to-design-a-design-system-part-i-38a5c87f84f8?source=rss------vuejs-5
We decided to create our own design system because of the increasing complexity of the code between the components and the inconsistency…Continue reading on Insider Engineering »

VueJS Is The Most Preferable Core For Web Application Development

https://medium.com/@ishita.177/vuejs-is-the-most-preferable-core-for-web-application-development-437b96bc254d?source=rss------vuejs-5
In this blog, we will list out all those things that make Vue.js one of the most popular front-end frameworks. Vue.js offers the ease of…Continue reading on Medium »

How to attempt Coding-Assignments, for job applications

https://javascript.plainenglish.io/how-to-attempt-coding-assignments-for-job-applications-5cbbc5d06521?source=rss------vuejs-5
Show-off your skills in a tasteful mannerContinue reading on JavaScript in Plain English »

Web Weekly — Issue #1

https://blog.canopas.com/web-weekly-issue-1-4bb08558fb9c?source=rss------vuejs-5
Welcome to Web weekly — a weekly newsletter on new development and updates of Web universe curated by Canopas team, delivered every Monday.Continue reading on Canopas Software »

Quasar admin CRM with Quasar 2!

https://dev.to/mayank091193/quasar-admin-crm-with-quasar-2-5c78
I have migrated my Quasar Admin CRM template to Quasar 2! I am offering it at the cheap price of $49! If you want to purchase, please send me an email at [email protected]
Live demo:



https://next-quasar-admin-crm.netlify.app/

Do let me know in case of any questions.

Prevent Form Submission in Vue.js

https://dev.to/hirajatamil/prevent-form-submission-in-vuejs-3ncj
In this article, I’m going to cover two different ways on how to prevent default form submission behaviour using vue.js.
Let’s say you have a sign-up form that you do not want to submit to the server directly.
As you know, the default behaviour of the form element is to send the form input data via GET request when the submit button is pressed.



<form class="ui large form">
<div class="field">
<div class="ui left icon input">
<i class="user icon"></i>
<input type="text" placeholder="Username or Email"/>
</div>
</div>
<div class="field">
<div class="ui left icon input">
<i class="lock icon"></i>
<input type="password" placeholder="Password"/>
</div>
</div>
<button class="ui fluid pink button big" >SIGN IN</button>
</form>



form {
width:400px;
margin:20px auto;
}



To prevent that, what we want is to handle the form submission via an AJAX call of some sort.
There are two main ways you can prevent form submission in vue.js.



Invoke preventDefault Method

Attach a click event with a callback function signInButtonPressed to the submit button.



<button class="ui fluid pink button big" @click="signInButtonPressed">SIGN IN</button>


Then, declare the signInButtonPressed function inside the methods object.



methods: {
signInButtonPressed() {
console.log("sign in button is pressed");
}
}


When you hit the sign in button at this stage, you can see the message quickly in the browser console and then it disappears as the page gets reloaded.
Also notice the question (?) mark added to the URL that indicates the form is trying to send data via GET request.
Continue Reading...

how to add Tailwind CSS to your Vue 2 project easily [in one command]

https://dev.to/slimpython/how-to-add-tailwind-css-to-your-vue-2-project-easily-in-one-command-1db0
In this video, I have explained how to add Tailwind CSS to your Vue 2 project easily, this video can be very helpful for those are trying the old fashion way and getting lot's of errors like tailwindcss postcss plugin tailwindcss requires postcss 8 etc

Nuxt Fetch - A renderless component

https://dev.to/elmatella/nuxt-fetch-a-renderless-component-3hdn
Hey, I'm writing my first blog post here to talk about a simple renderless component I wrote for NuxtJS that I use everyday.
It's a renderless component for NuxtJS that allows me to take advantage of VueJS slots to write less logic when fetching remote data.
Here is a basic copy/paste of the README:



Installation


yarn add @hammerbot/nuxt-fetch





Usage


<template>
<div>
<nuxt-fetch :fetch-fn="fetchFn">
<template #default="{ data, fetching, error }">
<p>
{{ data }} - {{ fetching }} - {{ error }}
</p>
</template>
<template #fetching>
Fetching for the first time
</template>
<template #error="{ error }">
Error handling {{ error }}
</template>
</nuxt-fetch>
</div>
</template>
<script >
import NuxtFetch from '@hammerbot/nuxt-fetch'
export default {
components: {
NuxtFetch
},
methods: {
async fetchFn () {
const { data } = await this.$api.get('/foo')
return data
}
}
}
</script>


As you can see in the example, I don't need to use any v-if statement or anything. I'm just using slots here and I find it much less verbose.
Tell me if you like it! I will write a better documentation if someone in this world uses it.
Cheers and happy new year!
PS: If you like it, leave me a star on Github! If you don't.. Tell me why in the comments!
https://github.com/ElMatella/nuxt-fetch

Create a Beautiful To-Do List App With Vuetify: Deleting Tasks

https://javascript.plainenglish.io/create-a-beautiful-to-do-list-app-with-vuetify-deleting-tasks-3b7bc2bc301f?source=rss------vuejs-5
Use the Vuetify hover component and an icon button to add task deletion functionality to the app.Continue reading on JavaScript in Plain English »

Javascript Array methods, a simpler way!

https://medium.com/@rajukhunt/javascript-array-methods-a-simpler-way-92f4c2a23cb3?source=rss------vuejs-5
I know how long it takes before this knowledge sticks up in our minds, so here is a quick recap!Continue reading on Medium »

Best VueJs Development Company in New York| VueJs Services New York

https://itriangletechnolabs.medium.com/best-vuejs-development-company-in-new-york-vuejs-services-new-york-7476d364b34d?source=rss------vuejs-5
iTriangle Technolabs is the best VueJs Development company in New York with a development center located in India.Continue reading on Medium »

💡 Vue Typescript State Management : We can do better than “isLoading” in 2022

https://dev.to/monisnap/vue-typescript-state-management-we-can-do-better-than-isloading-in-2022-2n5d
Sorry for the clickbait title, but I needed your attention 👀 
Have you ever encountered code like this one :



new Vue({
el: '#app',
data () {
return {
info: null,
loading: true,
errored: false
}
},
filters: {
currencydecimal (value) {
return value.toFixed(2)
}
},
mounted () {
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => {
this.info = response.data.bpi
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
}
})
...
<div id="app">
<h1>Bitcoin Price Index</h1>
<section v-if="errored">
<p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
</section>
<section v-else>
<div v-if="loading">Loading...</div>
<div
v-else
v-for="currency in info"
class="currency"
>
{{ currency.description }}:
<span class="lighten">
<span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
</span>
</div>
</section>
</div>


It’s an example I found in the Vue documentation here https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html#Dealing-with-Errors
What if you have multiple things that could load, do you add a loading2 variable ? 👀
To solve this issue, you can use a variable for each async actions you have with this 4 “states” :

IDLE : the user didn’t trigger the action yet
WAITING : the action is ongoing
ERROR : there was an error
DONE : The action succeeded

Using an enum with the different states, and better naming, the code can be rewritten like this :



enum AsyncState {
IDLE = 'IDLE',
WAITING = 'WAITING',
ERROR = 'ERROR',
DONE = 'DONE',
}
new Vue({
el: '#app',
data () {
return {
info: null,
AsyncState,
currentPriceLoadState: AsyncState.WAITING,
}
},
filters: {
currencydecimal (value) {
return value.toFixed(2)
}
},
mounted () {
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => {
this.info = response.data.bpi
this.currentPriceLoadState = AsyncState.DONE
})
.catch(error => {
console.log(error)
this.currentPriceLoadState = AsyncState.ERROR
})
}
})
...
<div id="app">
<h1>Bitcoin Price Index</h1>
<div v-if="currentPriceLoadState === AsyncState.WAITING">Loading...</div>
<section v-else-if="currentPriceLoadState === AsyncState.ERROR">
<p>We're sorry, we're not able to retrieve this information at the moment, please try back later</p>
</section>
<section v-else>
<div v-for="currency in info" class="currency">
{{ currency.description }}:
<span class="lighten">
<span v-html="currency.symbol"></span>{{ currency.rate_float | currencydecimal }}
</span>
</div>
</section>
</div>


With better naming and this simple enum, you can almost cover all the use cases where you need to load one or multiple things and manage errors ✨
If you want to manage different error messages, you can add another variable with an enum type like this :



enum CurrentPriceLoadErrors {
INVALID_CURRENCY = 'INVALID_CURRENCY',
API_LIMIT_REACHED = 'API_LIMIT_REACHED',
DEFAULT = 'DEFAULT',
}


Tell me in the comment section if you like this trick or not, and if you have an even better technique !
And don’t forget to like and share this post if you liked it 💙