Underdog UI Frameworks: 5 JavaScript Frameworks you Need to Try in 2022

https://blog.bitsrc.io/underdog-ui-frameworks-5-javascript-frameworks-you-need-to-try-in-2022-93e11fef186d?source=rss------vuejs-5
Other frameworks deserve some love too!Continue reading on Bits and Pieces »

VUE cli with electron

https://dev.to/grahammorby/vue-cli-with-electron-3ke9
I remember the days when JavaScript simply ran hover effects on buttons and made my page a little more interactive. Ahh the good old days before the many frameworks and crazy things we are now doing with good old JS!
But a project came up recently that required a desktop application which I have never made. How do we do it I thought, I mean I’m a web developer, not an app developer! So after picking my flavor of JavaScript frameworks a few years ago I wondered if there was a way I could use VUE.js as my sword of choice and build this app and thanks to Electron that is all very possible.
Shall we have a go? Now before we jump in I’m going to assume you have used VUE before and are familiar with NPM/Yarn and the terminal. So with that all done let’s get started.
First and foremost we need to get VUE Cli installed which we can do by running the following.



npm install -g @vue/cli


Then we need to create our app. When you move forward it will ask you which flavor of VUE you want to use and for this tutorial, we are going to use VUE 2. So go ahead and run the following in your terminal to create an app. Options like Eslint, babel, and separate js files are your personal choice so I’ll leave the full flavor up to you.



vue create electron-app



Next we need to install Electron, to do this simply install the VUE electron package as so.



cd electron-app
vue add electron-builder


With that done we now need build our little app out by running the following code. You will get asked for a version and for this set up we are using version 13.0.0

Lets now run to serve our app so we can see it in all its wonderful glory!



npm run electron:serve



We now have our desktop app all up and running and ready to code something cool. Now imagine we have a fully fledged JavaScript app with all its wonderful abilities running in a desktop environment. Pretty cool right?
Now if you want to build out the app to install, run the following code



npm run electron:build


Now if we head over to our file explorer you will see we have a dist folder and contained here is our build with an installer, a bundled and non bundled version all ready to test out!

There is so much more we can do with config files and such but for now have a play and see what you think, maybe try building out a few different apps, use vuex and connect to an api! It’s a satisfying way to develop.

generate android app from website url with api

https://dev.to/amreldessouki/generate-android-app-from-website-url-with-api-6ha
*try endpoint *

rapidapi
build your engine now to convert any website to android app ready to publish on google play
the endpoint return key & app bundle & apk

Understanding IIFEs

https://javascript.plainenglish.io/understanding-iifes-64d1b8f234ce?source=rss------vuejs-5
Immediately Invoked Function Expression, you are using them without knowingContinue reading on JavaScript in Plain English »

Vue's Computed Properties - The Most Important Feature?

https://dev.to/ttntm/vues-computed-properties-the-most-important-feature-1fhp
Coincidences happen sometimes and last night was one such occasion. I was casually checking my inbox and read Michael Thiessen’s newsletter, one of my favorites when it comes to Vue. This particular issue dealt with Vue’s “most important feature”, computed properties - a statement that I tend to agree with and also one that made me write better code when working on version 2 of aitrack.work, my FOSS time tracking companion app.
I was implementing drag and drop sorting for the tasks the app uses to track time and I chose vue.draggable.next for that based on a positive experience I had using it for another project. Getting it to work as intended wasn’t too much trouble, but the resulting code felt a little off somehow. Best to have a look yourself though:



<script setup>
import { ref, watch } from 'vue'
const localList = ref([])
// ...
watch(tasklist, () => localList.value = tasklist.value)
const events = {
onDragChange() {
const ordered = (arr) => arr.map((el, index) => {
el.order = index
return el
})
setState('tasklist', ordered(localList.value), false)
},
// ...
}
localList.value = tasklist.value
</script>


As you can see, there’s 3 different parts of code that all take care of setting/updating the localList ref() that’s used by the drag and drop component. It’s based on an array called tasklist that’s obtained (read-only) from the app’s centralized (composition API) store. That works, but it’s prone to errors when making further changes due to the code being spread all over the place. I’m talking about the ‘TaskList’ component here and that’s basically the centerpiece of the whole application. As such, changes are very likely to occur in the future and the code should be kept as clean and maintainable as possible - one more reason the code shown above felt a little off to me.
Anyway, I left it like that for the day until I read the newsletter mentioned earlier. That got me thinking about the code again and I remembered Vue’s ‘Computed Setters’ - something that wasn’t even mentioned in the newsletter, but also something I’d occasionally used in the past. With that in mind, the new drag and drop feature was quickly up for refactoring, even before it ever made it to production…
Eventually, this is what I ended up with:



<script setup>
import { computed } from 'vue'
const localList = computed({
get: () => [...tasklist.value],
set: (val) => {
const ordered = (arr) => arr.map((el, index) => {
el.order = index
return el
})
setState('tasklist', ordered(val), false)
}
})
// ...
</script>


Now there’s a single computed() call that defines everything that should happen to localList which itself is referenced once in the drag and drop component’s v-model directive. Messing up the code is definitely less likely this way and we’re also making better use of Vue’s internals, i.e. ‘Computed Caching’ instead of manually taking care of setting and updating the component’s state with watch() when that’s not really neccessary. On top of that, it’s less code that’s also much easier to understand compared to the initial version without using computed().
I’ll end this with the quote from Michael’s newsletter that I shamelessly paraphrased into this little article’s title:

Computed properties are the most important feature of Vue.

By: Michael Thiessen
And please don’t get me wrong: I’m not trying to promote someone else and/or their newsletter here, but I think it’s a really helpful resource for people working with Vue, even just to get you to remember about things you might not have considered initially (i.e. computed setters in my case).

i18n style

https://dev.to/razbakov/i18n-style-48me
Style Guide


key pattern: <page>.<block>.<element>.<attribute>


camelCase for multiple words




Background

What are possible ways to map strings in JSON?
You would probably start with plain object:



{
"Login": "Login",
"Logout": "Logout",
"New post": "New post",
}


And you will create same file for each language, just changing values with translations.
But what if you decide later to change New post to Add post? You will need to change the key in all language files and in all source code files.
Alternative way is to use more abstract keys, that gives you more flexibility. For example:



{
"login": "Login",
"logout": "Logout",
"new": "New post",
}


And what if you now have another feature: Add event? You alternatives are:

1) make complex keys

2) group by meaning
Complex-word keys would be:



{
"login": "Login",
"logout": "Logout",
"newPost": "New post",
"newEvent": "New event",
}


And what if now you have a login screen, which has a title, subtitle, 2 fields and submit button?

You might do this:



{
"loginTitle": "Login",
"loginSubtitle": "Please login to continue",
"loginSubmit": "Continue",
"logout": "Logout",
"newPost": "New post",
"newEvent": "New event",
}


And what if you have a registration screen which have similar elements?



{
"loginTitle": "Login",
"loginSubtitle": "Please login to continue",
"loginSubmit": "Continue",
"registerTitle": "Registration",
"registerSubtitle": "Create new account",
"registerSubmit": "Start",
"logout": "Logout",
"newPost": "New post",
"newEvent": "New event",
}


As you see translation file grows exponentially. You can make life easier for developers and translators by grouping keys:



{
"login": {
"title": "Login",
"subtitle": "Please login to continue",
"submit": "Continue",
},
"register": {
"title": "Registration",
"subtitle": "Create new account",
"submit": "Start",
},
"logout": "Logout",
"post": {
"new": "New post"
},
"event": {
"new": "New event"
}
}


When grouping elements look for similarities, what those elements have in common and how it would scale.
Input element can have label, placeholder, error. Those are attributes of that element, so it make sense to group values by element name, i.e. in our login screen:



{
"login": {
"title": "Login",
"subtitle": "Please login to continue",
"submit": "Continue",
"username": {
"label": "Enter your username",
"placeholder": "JohnDoe",
"error": "Username is a required field",
}
},
}


But what if there are more error messages later? If we need to add error message for complexity validation (i.e. "Please use numbers, letters, special symbols"). Both are errors, so we would group them under errors.



How does this look in YML?

YML looks similar to JSON, just without curly brackets:



login:
title: Login
subtitle: Please login to continue
submit: Continue
username:
label: Enter your username
placeholder: JohnDoe
error: Username is a required field


or you can also do it per line:



login.title: Login
login.subtitle: Please login to continue
login.submit: Continue
login.username.label: Enter your username
login.username.placeholder: JohnDoe
login.username.error: Username is a required field


Last one have few benefits:

It's easier to review PRs having the whole context, and not just seeing some part of bigger object
It's easier to find string from t() function in the translations

But also you could mix up login and login.title and destroy the object without even noticing it.



More on this topic:


https://dev.to/omaiboroda/three-ways-to-name-i18n-translation-keys-2fed
https://medium.com/frontmen/web-internationalisation-i18n-lessons-ive-learned-the-hard-way-438a3e157e0
https://lokalise.com/blog/translation-keys-naming-and-organizing/
https://phrase.com/blog/posts/ruby-lessons-learned-naming-and-managing-rails-i18n-keys/

How to Use the Hover Component in Vuetify

https://javascript.plainenglish.io/how-to-use-the-hover-component-in-vuetify-7059cf8724d2?source=rss------vuejs-5
Learn how to use the hover component in Vuetify.Continue reading on JavaScript in Plain English »

Gitpod for OpenBMC study

https://medium.com/@chiyanglin/gitpod-for-openbmc-study-a3db317737a1?source=rss------vuejs-5
HTML and Node JS studyContinue reading on Medium »

What is the utility of a v-model directive?

https://dev.to/leonnimoy/what-is-the-utility-of-a-v-model-directive-coh
Definition

Looking through the documentation v-model is a directive that can be use to:
"Create a two-way binding on a form input element or a component".
Which in other words, allows you to kinda create a data relation between the data object of your component and some other component or an HTML element, like a form input.



Nice! But why is that useful?

Because allows you to make quick value updates in your component. Without the need to use states, props, or anything like that. And is a "two-way binding", allowing a great manipulation of data in your component.




Example

Let's see a quick example:

HTML:



<div id="app">
<input v-model="checkedNames" type="checkbox" id="kirk" value="John"/>
<label for="kirk"> Kirk</label>
<input v-model="checkedNames" type="checkbox" id="spock" value="Paul"/>
<label for="spock"> Spock</label>
<input v-model="checkedNames" type="checkbox" id="mcCoy" value="George"/>
<label for="mcCoy"> McCoy</label>
<input v-model="checkedNames" type="checkbox" id="uhura" value="Ringo"/>
<label for="uhura"> Uhura</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>


CSS:



body {
font-family: 'Bitter', serif;
}
#app {
text-align: center;
padding: 70px;
max-width: 360px;
font-size: 16px;
margin: 0 auto;
display: table;
line-height: 2em;
}
label {
padding-right: 10px;
}


JavaScript:



const App = {
data() {
return {
checkedNames: []
}
}
}
Vue.createApp(App).mount('#app')


See how in each input tag, the v-model directive manipulates the DOM and appends the value in each label, into the array. From the input to the data component object (one-way biding). And after that, send the array updated with the values to the span tag(two-way biding)?
Awesome, right?




Restrictions

As explained in the documentation, the v-model directive has its use limited to the following elements:



<input>
<select>
<textarea>
components





Acknowledgment

I'll like to thank @sarah_edo, for the great example provided in her CodePen.

Binary to Base64 Conversion

https://rohitshresthaa.medium.com/binary-to-base64-conversion-8840d677954a?source=rss------vuejs-5
Why convert into Base64 format?Continue reading on Medium »

Best Front-End Frameworks in 2022

https://artbees.medium.com/best-front-end-frameworks-in-2022-c9a6ed946b25?source=rss------vuejs-5
Front-end frameworks are instrumental in creating applications with a rich user experience.Continue reading on Medium »

MVVM nedir ? Two-way data binding nasıl işler ?

https://enisgltkn.medium.com/mvvm-nedir-two-way-data-binding-nas%C4%B1l-i%C5%9Fler-ace469f83ea9?source=rss------vuejs-5
Bir MVVM şablonunda Model, View ve ViewModal bulunur. Şablon da adını bu üçünden alır. Günümüzdeki Angular, Vue, Flutter gibi yazılım…Continue reading on Medium »

Simple Vue.js Pagination Example with Laravel

https://medium.com/techvblogs/simple-vue-js-pagination-example-with-laravel-6c1a561030c?source=rss------vuejs-5
Mar 13, 2021, Originally published at techvblogs.com ・3 min readContinue reading on TechvBlogs »

Frontend Olympics Coding Challenges

https://dev.to/devolympics/frontend-olympics-coding-challenges-16pl
Code yourself to the top on this new coding challenge!


Fight your way through several front-end challenges and get rewarded by the DevOlympics community!

Top 8 Vue.js Website Template Choices: Pros and Cons & What to Expect From the Framework?

https://medium.com/javarevisited/top-8-vue-js-website-template-choices-pros-and-cons-what-to-expect-from-the-framework-b9e1ee6a8bf2?source=rss------vuejs-5
Vue.js is a JavaScript framework that allows you to create user interfaces (UIs) and single-page apps (SPAs). Vue.js, like the finest of…Continue reading on Javarevisited »

90 days survey

https://medium.com/arctouch/90-days-survey-fda3025373ac?source=rss------vuejs-5
What it’s like to be a junior software engineer at ArcTouchContinue reading on ArcTouch »

My First 3 Months at ArcTouch

https://medium.com/arctouch/my-first-3-months-at-arctouch-d10b0037d0f3?source=rss------vuejs-5
What it’s like to be a junior software engineer at ArcTouchContinue reading on ArcTouch »

Axios Requests In VueJs

https://nikakharebava.medium.com/axios-requests-in-vuejs-e9437bae37b8?source=rss------vuejs-5
Knowing how to do Fetch API is good but knowing how to use Axios Requests is even better. This article is about that.Continue reading on Medium »

Offline Storage with IndexDB — Part 2

https://medium.com/@CryptOpenSource/offline-storage-with-indexdb-part-2-a2185ff2b1fe?source=rss------vuejs-5
Adding a Record to Your Store and Viewing that Record in the UI.Continue reading on Medium »

Vue and Storybook component scaffolding

https://medium.com/@tbusser/vue-and-storybook-component-scaffolding-50df77b8d79d?source=rss------vuejs-5
How to avoid writing boilerplate code when creating a new componentContinue reading on Medium »