Quasar & Vue 3: i18n, Themes & Accessibility (Real World App #2)

in this series i'm documenting my journey creating a real world quasar app budget 2 from scratch an app that will be ultimately deployed to ios android mac and windows make sure you click subscribe and click the bell so you don't miss any of the videos in this series and you can find the link to the whole playlist down in the description [Music] so this week i sent my sketch design to pete the amazing designer that designed the original budget icon this pretty little thing here and he was kind enough to give me some great feedback which i've integrated into the design such as reducing my color palette down to just a few different colors i'm making my positive and negative colors a bit more vibrant reducing my font weights down to just two because previously i had bold regular and light fonts in the app and now i just have bold and regular fonts everywhere and he also recommended adding consistent border radius so i had different amounts of border radius on different rounded squares within the app and now they all have exactly 10 pixels of border radius and inspired by his feedback i also reduced the number of fonts in the app to just three different sizes 12 16 and 21 because previously i had about 20 different font sizes in the app and i thought if i reduce this right down it might improve the design and i discovered this article on lifehacker which tells you to stick to these font sizes in your designs and within this list of sizes is 12 16 and 21 so i've just made absolutely everything in the app one of those three sizes and although these changes are quite subtle it's actually massively improved the look and feel of the app and made it feel a lot cleaner and nicer and as far as building the app although i haven't actually started building the app yet i have done three important things in little apps that i've created so number one is i figured out how i'm gonna handle theme switching in my app because fudgit plus subscribers will have a bunch of different themes that they can choose from so you can see i have five different themes in this drop down here and when we choose a different one you can see all the colors of our app change and even the colors that are in quasar components such as this q input here so you can see the label is our primary color and this line at the bottom is our primary color as well and the second thing i've done is figure out how i can give the user an option for different text sizes within the app so we have this drop down here of text sizes and if i choose one of these we can see the entire app updates so we see the text size increase in the header and in all of our components and the footer as well and we even see it increase in our quasar components because this option for different text sizes was a very commonly requested accessibility feature and the third thing i've done in a separate project is figure out how to use internationalization because i want budget 2 to work in multiple languages so i just created a simple internationalization demo and we can see all of the text is in english right now in the header and this text and these buttons and the label for this drop down as well but if we click on that and choose german then we can see all of the text changed to german so i'm going to explain what i've learned this week and show you around some of these features and how i set them up [Music] so the first thing i've learned this week is that it's sometimes a really good idea to create separate little apps to solve particular problems in isolation before you start working on your main app or before you add those features to your app if you've already started creating it and the reason i wanted to solve these three particular problems before i started creating the app is because the entire app will be affected by these three features so every single little bit of text in the app every single component in the app will be affected every time the user changes the theme or changes the text size or changes the language so i wanted to figure out how these things would work and create these little proof of concepts before i started the app and i'm glad i did now because it's obvious to me now that this is going to save me an enormous amount of time and i've also learned that i need to use sas with scss syntax for the css preprocessor instead of sas with indented syntax which i usually use and the reason for that is that i'm using these maps to store all of my themes and theme colors and although you can use maps in sas with indented syntax you can't type out your maps on multiple lines like this you have to have your maps on a single line and if i just select this themes map and put it all onto one line it looks like this and you can see this is completely unmanageable so that's why i'm going to have to use sas with scss syntax when i start creating the app so i'll try to explain how this theme switcher works and if you look at the body tag here in the inspector i have this data theme attribute on the body which is currently set to orange because we're currently using the orange theme and if we choose a different theme such as blue then we can see that data theme attribute changed to blue and we can see our entire theme change and all of the colors in our app change so i did have to use some vanilla javascript to add this attribute to the body tag because in vue.js we can't bind to the body tag because it's outside of our root view component which in a quasar app is this div with an id of q app so if i just jump to my main layout.view file so i have this watcher here which is watching the value of this theme drop-down and whenever the value changes we fire some vanilla javascript to set this data theme attribute on the body tag and you might be wondering why i'm adding this to the body tag and not to the cue layout component for example and you might also be wondering why i'm using a data attribute and not just a class well the reason that i'm adding it to the body tag is that i was initially adding a class to the cue layout component in the usual vue.js way just by binding to the class attribute on the cue layout component and this is all working great on most components whenever i changed themes however it wasn't working on components that pop up such as this menu that pops up when we click on the select box so i would switch to the blue theme and this blue highlight color you can see in the background here would still be orange and it took me about two hours to figure out why and if i just right click on this element that's popped up and we look at this in the inspector here it's this q menu component here quasar is actually adding this as a direct child of the body and not as a child of the cue layout component so that's why i needed to add these things to the body tag to make this all work and the reason i'm using a data attribute instead of using a class is because quasar already adds loads of different classes to the body tag and so i didn't want to risk interfering with quasars default body class system so if i jump to this themes.scss file which is just an scss file that i'm importing into my main app.scss file here so i have this map called themes which contains an object for each theme so we have an object for the orange theme one for the orange light theme one for the blue theme etc and each of these objects contains color codes for all of the different types of colors primary secondary positive negative etc then if i scroll down past this map i have this each loop here which is looping through each of the themes and spitting out the data theme attribute selector so this is going to split out data dash theme equals orange and then data theme equals orange light etc for each of the themes and then within that selector i have another each loop which is looping through each of the colors in each of these objects and this is spitting out background classes and text classes for each of these colors so this is going to spit out a class such as bg primary and then the color that we've set in the theme and then this is going to spit out text primary and then the color and then it's going to spit out bg dash secondary and then the color and then text secondary and the color etc so this loop will spit out all of the classes that we need for each theme and i'm also spitting out some overrides here for quasar components as well where i needed to override the default styles of quasar components when you're working in a quasar project or review project it's very difficult to know exactly what's being spit out by complicated scss like this so i actually used an online tool called sas meister to figure all this stuff out so if i just go to sas meister so we can add some scss here or sas if you want and we can see the result here so if i just copy all of this code and paste it in here we can see the css that it's generating so first we see all of the orange theme classes then we see the orange light theme classes etc so i'm just going to do a really simple example here to show you how i got started figuring all this stuff out so i'm just going to get rid of all this let's start with a really simple map so i'm going to create a map called themes for now i'm just going to put orange blue and red in there and now let's spit out a class for each of these themes that we could add to the body tag so we can use an each loop to do this so we can just add each and then dollar theme in themes and then parentheses so this will loop through each item in our themes map with this dollar theme variable as the placeholder so if we wanted to spit out a class for each of these such as theme orange themed blue and theme red we could just do dot theme dash and then to spit out this theme variable we can just do hash curly braces and then dollar theme then we can just add our curly braces for now i'll just stick a comment in there which says styles go here and this is wrong actually these should be curly braces and not parentheses here so i'll just change these to curly braces and so we can now see a class being spit out for each of these themes in this map so let's add some colors for each of our themes to this map so i'm just going to break this up onto multiple lines like this i'm just going to add a child object to each of these themes like this with parentheses and inside that let's add a primary property i'll just set this to say orange and then a comma then we'll add a secondary property and set that to let's say blue then i'm just going to copy these and paste them into the blue theme but this time we'll set the primary to blue and the secondary to purple and i'll do the same in the red theme so we'll set the primary to red and the secondary to let's say yellow so now what we can do here is add another each loop to loop through each of these colors so primary and secondary so what we can do here is at each um we need to provide a placeholder for both the property name and the value so we could call this type and color so we could do each type comma color in let's say colors and we can use any names we want for these placeholder variables then we could add curly braces let's say we want to spit out a class for each of these colors such as bg dash primary and bg secondary then we could just do something like dot bg dash and then to spit out this type variable which will be equal to either primary or secondary we can do hash then curly braces and then just do dollar type then we can add our curly braces and add our style property so we want to set background to whatever this color is here and that's going to be in this color placeholder so i'll just put dollar color here we should see this update now i know we have an error here primary orange secondary blue isn't a valid css value oh i think that's because i put these in quotes here color values so i'll get rid of all these quotes and this should hopefully work now no still not working primary orange secondary blue isn't a valid css value and i see what the problem is here i also need to add this dollar colors variable to this first each loop as well so i'll add that here and we can now see all of our classes and all of our background properties being spit out so the theme orange bg primary is set to orange but the theme blue bg primary is set to background blue and the theme red bg primary set to background red so from this point it was fairly simple to build this up to what i've got here [Music] okay so for the text size switcher again i'm adding a data attribute to the body tag this data text size attribute and i'm setting that to either xs md lg or xl so right now it's set to md medium which is the default size so if i change the option here we can see that data attribute change and we see all of the text size for all of our components increase so if i just jump to this textsizes.scss which again it's just a css file that i'm importing into the main app.scss file so this text sizes map is just a map of my default text sizes 12 pixels 16 pixels and 21 pixels and as i mentioned earlier all of the text size within budget is going to be one of these three sizes and so i'm going to be using classes for each of these sizes such as text dash size dash 12 text dash size dash 16 and same for 21 and if i jump to index.view we can see some of these classes here like text size dash 16 and this one here is text dash size dash 21 and i'll jump back to text sizes dot scss and i have another map here with all of the text size options sm md lg in excel along with multipliers for each text size so md is the default text size so when the text size is set to medium the multiplier will be one so when we split out all of these text size classes down here we're just going to be multiplying these default text sizes by one so they won't change so when the text size is set to medium all of the text in the app will be either 12 pixels 16 pixels or 21 pixels but when we set it to large then the multiplier will be 1.2 so these default sizes will be increased to around 14 and then 19 and then about 24 and so i have an each loop here which is looping through each of these text size options and multipliers and then it's setting up the body data attribute for each of those such as data text size equals sm and then equals md lg excel and then within that each loop i have another each loop which is looping through each of these default text sizes and spitting out those text size classes so this will spit out text size dash 12 then text size dash 16 then text size dash 21 and then it's going to set the font size for that class and basically multiply the default text size by the multiplier which is specified here and i also have some override styles for quasar components as well because i had to also increase line height and stuff like that in some of the quasar components to make this work on components such as the q input and the cue select but just so you can see what's going on here i'm just going to copy all of this and paste it into sas meister i'm just going to remove all of these quasar overrides just to simplify this a bit and i'll just remove this bit at the bottom where i'm spitting out some fixed text sizes for text that i don't ever want to change size and we can now see it spitting out these text size classes for each of the different options so we have the sm classes the md classes and so on so if we look at the md classes then the multiplier is one so a class of text size dash 12 will just give a font size of 12 and the same 416 and 21 but if the user sets the text size too large then we're multiplying these default text sizes by 1.2 and so 12 becomes 14.4 16 becomes 19.2 and 21 becomes 25.2 so now all i need to do to make sure that this works is make sure that every single component in my app which has text has one of these classes and then all i need to do to change the text size for the whole app is just change this data attribute on the body tag so it should now be really easy for me to create the app in a way where we can easily change the text size for every single element in the entire app [Music] okay so i'll show you how this internationalization thing works so when we change this drop down here all of the language of our app changes to german and this is actually unbelievably simple to set up and in fact it's so simple i'm just going to create a new project to demonstrate this so i'm going to open new window in code and open up the terminal i'm just going to jump to my projects folder and run quasar create uh let's call it quasar dash i 18n and i'll run that i'm going to leave the project name and i'll change the product name to quasar i18n and i'll leave the description and just put my name for the author and i'll just choose sas with indented auto import and i'll disable eslint and the important thing here is to enable this view i18n option so i'll enable that and hit enter i'll use npm to install the dependencies and it's finished creating the project so i'm going to drag it into vs code open up the terminal and just run quasar dev and that's now running in the browser so if we go to our source folder and because we enabled i18n we have this i18n folder and if we jump in there we have this en us folder for us english and if we go in there we have this index.js file and we have some text fields here one called failed which is set to action failed and one called success which is set to action was successful so before we add any other languages let's just spit out these fields in our app so i'm going to jump to pages and index.view and i'll get rid of the image tag i'll get rid of these classes on the cuepage component and i'll just start a padding prop to add a little bit of padding and so let's say we want to add a button which uses one of these fields we can do this really easily with the i18n helper so let's just add a button to the page q btn and we'll bind to the label prop and to use the translation helper we can just do dollar t then parentheses and then we can just pass in the name of the field we want to use in a string so if we want to use this failed field we can just pass in failed and i'll save that and we can see that text on this button action failed so i'll just duplicate this button and we'll stick the other field in here which is called success so i'll put that there save that and we can see that text in this button and i'll also just set up a couple of paragraphs as well so if we want to spit this out in a paragraph we can just do double curly braces and then again dollar t parentheses and then the name of the field and i'll do another one for the success field and save that we can see those paragraphs on the page and if we wanted to use one of these fields in our view instance say in our mounted hook then we would just do this dot dollar t then the name of the field like that so nice and simple okay so now let's add another language to this app so all we need to do is duplicate this en us folder and rename it to a different i18n locale code so if you just google i18n codes then you should be able to find a list of all the different codes so if we want to use french then we can just use the code fr so let's duplicate this enus folder by the way this option is being added by the duplicate action extension that you can get from the extension store so we'll just rename this to fr uh we'll jump in there and we just need to translate these strings here so i'm just going to google english to french and i'll just paste this in and copy that and paste it there i'll do the same for this one copy that paste that in here and copy this and paste it in here and i'll just escape that apostrophe with a backslash and save that and we also need to jump to this index.js file in the root of this i18n folder and import it so we can just do import fr from dot slash fr and we need to add it here as well so we can just set fr to fr like that and save that and we should now have french available in our app and we can easily use the i18n helper to switch our language so i'll jump back to index.view and at the top of our cue page i'm just going to add a cue separator and just add a bit of margin to that so i'll add q dash m y dash lg save that and i'll just stick a couple of buttons here a couple of q buttons and i'll set the label on this one to english and duplicate that and set the label on this one to french and so i'll add a click handler to each of these and so to set the language we can just do dollar i 18 n dot locale equals and then the locale code so this one is going to be e n en-us then i'll copy this click handler and paste it into the other button and change the code here to fr and i'll save that and hopefully we should be able to translate our app into french now so i'll click on french and you can see all of our buttons and our paragraphs are now in french and if i click on english we're back in english again and you can easily use a cue select instead for changing your language like i've done here and you could easily use something like local storage or local base to store the user's chosen language so that you can set the language when the app first starts quasar also has a really handy method which you can use to detect the user's locale as well so if i jump to the quasar site and options and helpers and app internationalization and jump down to detecting locale then we can fire this get locale method which will return a string of the current user's local code so we can use this to actually automatically set the language for the user the first time they launch the app although you probably still want to give the user the option to change the language if they prefer to and so for budget i'm just going to start off with a few different languages the more popular ones and initially i will just use google translate to translate all of these fields and some of them probably won't be quite right but probably what will happen is people who speak different languages will email me and say this bit is wrong and that bit is wrong and that way i can correct all of the fields over time and if budget two does well then i may actually just pay to have the app professionally translated into all the different [Music] languages so what i'm going to do next is actually start building the app using quasar version 2 which unfortunately is still in beta and i'll hopefully get started on the layout get this playing nicely on both mobile and desktop and get started on the front end for some of the pages check out the full playlist in the description and please check out my quasar courses at danny's dot link courses please hover over my face and click subscribe so you don't miss any of the videos in this series thanks for watching and i'll see you in the next one you

Channel: Make Apps with Danny

Views: 6,008

Keywords: android, app design, app development, app development process, app ideas, app success, building an app, cordova, create a real world app, create an app, creating an app, css, electron, firebase, firebase cloud firestore, how to create a successful app, how to launch an app, how to start an app business, html, ios, javascript, mac, make money with apps, quasar, quasar framework, quasar framework tutorial, real app, real world app, successful app launch, vue, vue.js, vuejs, windows

Id: yUUdhCpOCFY

Length: 24min 7sec (1447 seconds)

Published: Wed Apr 14 2021