Forem: Anzelika

5 ways of displaying i18n translations in Vue

Anzelika — Tue, 14 Jul 2020 11:09:17 +0000

When your Vue app needs internalization, you'll probably come across i18n. It took me a while to get a proper grasp on how to display messages in different scenarios (especially #5), so I'm laying out a quick easy-digest summary here.

1. Basic interpolation

With the interpolation curly brackets you can render any content that can be placed directly in your template HTML.

<p>{{$t('introText')}}</p>

2. Binding the value

Useful for input placeholders or labels.

<v-text-field :label="$t('form.firstName')"></v-text-field>

3. Within a function

Note that within the Vue instance it would be necessary to use this keyword

btnLabel(){
  return this.$t('buttons.save')
}

4. Using `v-t` directive

With v-t directive you may specify the path of the translation string in the data object and then easily render it in the template.

data: () => ({
   path: "buttons.add"  
}),

 <v-btn v-t="path"></v-btn>

NB: This directive is not reactive, therefore the content needs to be manually reloaded when the locale changes.

5. Using `v-text` directive

To solve the reactivity problem, you may use v-text directive instead.

data: () => ({
   path: "buttons.add"  
}),

 <v-btn v-text="$t(path)"></v-btn>

Hope this comes in handy for our translation wizards! Give me a shout if there's a technique I missed 😜

User-friendly way to set your CSS font size

Anzelika — Mon, 13 Jul 2020 18:33:34 +0000

Today I learned that from the perspective of accessibility, it's bad practice to hardcode a root font size in your application in pixels 🙈

html {
font-size: 10px
}

Why? Some users may have increased the default font size in their browser settings to help with the legibility. By hardcoding the root font size in your CSS with pixels, the web browser won't have an effect on your site and the user may end up struggling or resorting to manual zoom. And that's just bad UX.

So, how to solve the situation when you want your app's root font size to differ from the default 16px?

We need to tell our CSS to calculate it as a percentage from the default. If 16px is 100% then 10px is 62.5%.

html {
font-size: 62.5%
}

With this set-up, you can now set up the rest of your app's elements with rem:

.btn {
    font-size: 1.6rem;
}

Everyone wins!

Your app has its custom settings
Your app also listens to default browser settings and takes the user's chosen font size as the new root font size to make calculations from

💻 Information from Jonas Schmedtmann's Advanced CSS course

8 things I learned during my internship

Anzelika — Sun, 07 Jun 2020 01:51:08 +0000

Wireframing & prototyping
Version control
It pays off to contribute
Back End wizards are your best friends
Deploying
Your worth =/= lines of code
Localization
Experience > money

After learning web development via online courses for a year, a long awaited opportunity arose - Front End internship for some real life experience! I've been at it for a few months now and my responsibilities revolve around designing the GUI and building Vue projects. It's been like trying to drink from a firehose - so much information! You can watch as many Udemy lectures as you want, but nothing quite prepares you for that very first developer job. Here are some takeaways I've gathered from my experience so far:

1. Wireframing & prototyping 🏗️

As a freelancer my workflow was pretty straightforward:

Idea
Generic sketch on paper
Coding

During my internship, I quickly learned that this isn't how things work "in the real world". As projects get bigger and more people are involved in the decision making process, it's important that you spend time coding the right thing. Our project's new feature needed a GUI but its design had to be a team decision, therefore I was tasked to build a clickable prototype. My freelancer 3-step process turned out to be a team effort of 7 steps:

Idea
Sketch on board
Basic wireframe on Balsamiq
Internal user testing (asking team members to click through and gather feedback)
Analzye feedback and build a prototype on Proto.io
Internal user testing (asking team members to click through and gather feedback on the reassessed version)
Coding

I thorougly enjoyed the collaborative aspect of all this where you can lean on expertise of your team members. As a developer, it's easy to focus on the technical and forget nuances of the product itself. Gathering feedback on prototypes before even touching the code editor helps avoid unpleasant surprises and make sure that you create something that brings value to the users.

2. Version control 🕒

This was something I never really got into before the internship. As a beginner, my solo projects felt too small for version control and the idea of git commands being able to modify my files felt.. downright scary (what if I accidentally delete all my stuff?). When I anxiously admitted this to my team it naturally earned a collective gasp "You've never used git???". I'm lucky to have good spirited coworkers and very soon my Slack was full of links and tutorials to nail the concept and a cheat sheet of the commands I need to get my repo running. I've now worked with Bitbucket repositories, branched and merged and pull requested for 2 months and while merge conflicts still seem a bit scary, version control in general is becoming more and more second nature.

3. It pays off to contribute 🤝

You get back what you give. As an intern I had to learn things from scratch and naturally there were hiccups along the way when you just didn't know what to do. I looked up Discord channels Vue Land and Vuetify to network with fellow developers. It was heartwarming to see how responsive people were in offering help when I felt most hopeless.

To give back to the community, I started responding to other beginner's questions as much as my knowledge allowed. This had many benefits:

By thinking along to someone else's problem I learned and solidified what I already knew myself
It's a great confidence boost. As a beginner it's often discouraging to realise the mountain of tools and languages you still don't know. But seeing someone's question, having a 💡 go off, make a suggestion for a fix and hear back it works... there's hardly a better drug for me in terms of feeling like a coding wizard despite my humble experience
Networking with developers working with same technologies. What started as a typical help request grew into a casual fun online comradery. Joking about shortcomings of a certain technology or sharing the pains of getting something to work really helped me feel like I "belong"
It got me noticed by Vuetify's core team. I was active in asking/offering help and shared a self-made helper class cheat sheet in Vuetify's discord channel. Not long after I was approached and asked if I'd like to become a contributor. Naturally I said yes, and ever since I've worked on drafting some beginner tutorials and been a bit closer to the product in general. I'm excited to see where this can lead in the future!

4. Back End wizards are your best friends 🧙‍♂️

Building something in a small company is a piggyback process. When building logic for the app, have a good talk with the people who "magic" the data into it. When there's effective collaboration between Front/Backend, you can bring projects to life so much easier.

Quite often you can avoid dozens of lines of code and confusing nested loops in Front End codebase by having some help from Back End (tweaking API calls, adding new data fields, normalising data etc).

5. Deploying 🚀

We needed a clickable demo of the prototype accessible for the team and for a prospective user as well. I spent the day learning how to deploy Vue apps and how to hook them up to Heroku. It was a definite learning curve about remote repositories and it feels awesome knowing how to bring projects live now!

6. Your worth =/= lines of code 🏆

I come from a call centre/customer support background. For years, my worth was pretty much calculated in the number of e-mails I did per day and if I took extra 10 min for my lunch/pee break, it was very well noticed.

Only after working as a developer for a few months I realise how dehumanising that sector was and the detrimental effect it eventually had to my perception of self worth. It's hard to detach yourself from a mindset of "must produce visible results" and accept that you ARE working even when you spend hours watching tutorials or a bug in your console or drawing pseudo code on post-its. As a customer support agent my work revolved around immediately perceivable daily results. As a developer my work revolves around projects - my team trusts me how I spend my time, as long as the long term goals are met. There is a daily morning checkin call, but after that I get to put on my headphones, zone in and do my thing. My team trusts my process and it's awesome.

7. Localization

Before my internship I never had to deal with matters related to localization or multilingual interfaces. In Switzerland though, basically every site needs to be in German, Italian and French. This affected my development in several ways:

Translated button elements can break UI. For example a basic button with a 1-word English label may look awesome, but not when it needs to be a 2-word French expression. It's now in the back of my mind not to put text label buttons in places where their width needs to be fixed.
Dates can not be hardcoded, since most of the time you save a new Date() object and render it in DOM with .toLocaleDateString() or something similar.
Learning to implement i18n to switch interface language and replace all hardcoded values in the codebase with references to i18n locale files.

8. Experience > money 💸

In my area in Switzerland, a junior front end web developer with 0-2 years of experience gets roughly 6-7K USD/month. I've self-taught myself for the past 1.5 years and of course it's easy to daydream about those paychecks. But experience in agile web development is more important to me than a paycheck right now. The team I'm working with creates a great environment to observe and gain the skills I need on my journey to call myself a web developer with confidence.

Big-shot positions may be in the books one day, but for right now, my job is to be a sponge and enjoy the ride 🎢

If anyone stumbled here and would care to mention their takeaways from their very first web dev job, I'm all ears!

1-line solution for importing and registering your Vue component

Anzelika — Sun, 07 Jun 2020 01:39:41 +0000

Today I was working on some Vuetify themes and was pleasantly surprised to learn an elegant 1-line solution to import and register a component. The pattern I usually saw in Vue projects was this:

<template>
  <v-app>
    <home-system-bar />
    <home-view />
    <home-footer />
  </v-app>
</template>
<script>
import SystemBar from '@/layouts/home/SystemBar'
import View from '@/layouts/home/View'
import Footer from '@/layouts/home/Footer'
  export default {
    components: {
      HomeSystemBar: SystemBar,
      HomeView: View,
      HomeFooter: Footer
  }
}
</script>

Above you can see that the components are imported separately and then registered in the components object. There is actually no need for a separate line to import, you may do all of it in components with an arrow function expression:

<template>
  <v-app>
    <home-system-bar />
    <home-view />
    <home-footer />
  </v-app>
</template>

<script>
  export default {
    name: 'HomeLayout',
    components: {
      HomeSystemBar: () => import('@/layouts/home/SystemBar'),
      HomeView: () => import('@/layouts/home/View'),
      HomeFooter: () => import('@/layouts/home/Footer')
    },
  }
</script>

How cool is that? When dealing with multiple imported components, this certainly makes things cleaner 🧹

Custom styling Vuetify buttons

Anzelika — Thu, 14 May 2020 16:12:30 +0000

As a developer working on user interfaces, it’s a common struggle to find yourself in this scenario: You find an awesome library to work with, the site components come together ultra fast and you feel invincible! Well, that’s right up until the point you want to overwrite some default CSS for your application. And then you find yourself elbow-deep in your Devtools and Stack Overflow trying to figure out What selector should I use? and How many lines of !important do I need to add to make this style show up? 😐

Today we’re going to take a look at how to overwrite some of the behaviour and styling of Vuetify's default buttons. Check out the Codepen below to see what we get out of the box and what we want to achieve:

🎨 Button width

Let's begin with trying to make the button take on a square styling. By default, Vuetify's button height is 36px.
Therefore, it would make sense that setting .v-btn { width: 36px; } creates a square button, right?
That was my first instinct, but the button was still rectangular 🤔 In order to hunt down what was going on, I opened my Devtools. When you find yourself trying to style something and it just doesn't work as expected - a good first step is to look under the hood! 🛠️
In order to do that, right click the element you want to style in your project and choose "Inspect" ("Inspect element" in Firefox).

Next, when we check the styles on the div with a class .v-btn, we can see that Vuetify's default styling is interfering with our square plans.

Here you can see that .v-btn has a min-width: 64px property, which is the culprit in the matter. Therefore, to get our button square, we need to overwrite that in our stylesheet like so:



.v-btn {
  width: 36px;
  min-width: 36px;
}

🎨 Ripple effect

Ripple effect is what happens by default after you click a .v-btn.
The color of the effect is generated automatically by Vuetify from the color of the button itself.
In most cases that's quite handy, since you can have a nice red ripple for your red button with 0 work. However, sometimes you want the ripple effect to be a different color.
For example I wanted the button to be modest light gray, but the ripple effect to be blue. To modify the ripple effect, it would be necessary to hack a bit into Vuetify's v-ripple directive. You can use Material Design's color palette names or theme colors (primary, secondary, success etc) to modify the ripple color like so:



 <v-btn v-ripple="{ class: 'primary--text' }">

🎨 Hover effects

By default, Vuetify buttons have a hover effect of a slightly darker background color. I wanted to remove that so that the only hover effect would be the icon scaling up. Interestingly enough .v-btn:hover { background-color: none; } or any other background property removal attempts did not work. It wasn't until scrolling all the way down in Devtools when I started to suspect the ::before pseudo selectors. ::before was there before :hover was cool 😉
Here's how to get rid of that sneaky hover color:



.v-btn::before {
  background-color: transparent;
}

And a cherry on top, enlarging the icons on hover is easy to change like so:



.v-btn i:hover{
  transform: scale(1.15);
}

And that's a wrap! Hope you found these little tips useful when wrestling with Vuetify buttons in your own projects 💪

🐣 This blog post is a part of Vuetify Beginner's Guide Series. Each blog has been collaboratively worked on by the Vuetify Core Team.
💡 Interested in contributing a topic? Reach out to Johanna on Dev.to or in the Vuetify Community Discord.

Story of a self-taught web developer: humble beginnings #2

Anzelika — Sat, 09 May 2020 13:27:18 +0000

3 months ago in a tiny startup office in the middle of Zurich, a woman was sitting down for her first interview for a web developer internship. A lot was on the line, but she kept on a brave face, trying to somehow, by some miracle, get the foot in the door in tech world. She was armed with vanilla JS/CSS, a touch of Bootstrap and a bucket of enthusiasm. That woman was me and this is my story.

What was the company like?

It's a startup of 6 people, focusing on improving the microclimate of workplaces. Their webapp has a user-friendly and engaging twist on feedback surveys that employees get. Results are displayed in a visual and meaningful way, allowing team leaders to track trends, mark down problems, set deadlines, delegate issues etc.

What was the job opening?

They were looking for a front end web developer to finalise their webapp (big part of it is served to clients with Google Charts and manually put together slideshows at the moment). They were looking for someone with a few years of experience, knowledge of Vue+Vuetify and using CSS preprocessors. I had none of that, but did that stop me from bugging them? No! 😄

How did I apply?

I was not fooling myself, I knew I was missing some major requirements. But I decided to go for it anyway, since startups are my weak spot and it was one of the few postings where German was not a necessity (their team speaks stellar English!). In my cover letter I decided to be honest and just a tad bit pleading.
Here's what I sent, unedited:

Hello, I am writing to apply for a junior front end web developer position. As someone self-taught via online courses, I am hoping to practice my skillset in a real-life work environment to bring aesthetically pleasing and responsive projects into the world, one pixel at a time!

I've always enjoyed an ambitious environment of a start-up company, especially with no ironclad "hierarchy", allowing people's creative minds work together for a common goal. I am very passionate about proving myself in this field as an asset to the development team with my dedication, enthusiasm and an eye for detail. My work ethic of encountering a technical problem is to try and tackle it independently first and never shy away from learning a more elegant solution.

As a junior web developer, I take responsibility and initiative for improving my skillset. This means that if a framework or library which I am not familiar yet is needed for the project, I will make it a personal priority to find online resources to teach the concept to myself instead of expecting others to tutor me from ground-up (for example for this opening I expect to spend many evenings with Vue courses!).

If a standard position is not available due to me being relatively new to the field, I would be interested even in a minimally paid temporary intern position assisting the senior frontend developers. Perhaps this way I could showcase my working ethics and earn a place in your company in the future. You may find more information and work examples on my portfolio site here: https://anzudev.com. I'm excited and hopeful to hear back!

Interview

They replied that for a front end developer position they were looking for someone a bit more experienced which was absolutely expected. BUT! Here comes the unexpected part. They said they noticed the drawings in my portfolio which matched their app's illustrations and that they really liked my last paragraph offering myself up as an intern, as it showed my eagerness to learn. I was invited to a meeting in their office and I immediately loved their easygoing vibe, product idea and how it was visually presented to clients.

The only pickle was: they need the project to be finalised with Vue/Vuetify. I just straight up honestly said: "Phew, it has been in my bucketlist for months, but I am a total green leaf on that as of right now!". Here's where the magical bit lies: instead of sending me out of the door they said "Well, why don't you come and learn it in our office? Let's have a trial period of 2 months and see how quickly you can catch things on?"

Needless to say, I was on board! Some would say "Eh, just as an intern?", but for me, that's everything. As someone self-taught without a physical support system, this experience would be invaluable for the hands-on approach and learning how to work in a team. We agreed on a 80% contract, for 6 months.

As for money, I was lucky enough to be in a position were that was not my main concern. I asked for a modest internship paycheck, just to cover the basic bills (health insurance, public transport, food etc).

First day

I was of course a complete nervous wreck, barely slept the night before! I did not know what to expect, will they slap on some tasks or maybe make me do a technical tests? To try and prepare myself, I followed some tutorials on Vue to grasp the concept of importing components and how they interact with each other, but I was a long way from bending them to my will at ease.

Honestly, I needn't have worried. I arrived to the office, everyone was super encouraging and welcoming. My station was set up and they actually said I can just spend the day continuing the same tutorials to get a bit more comfortable with the component library! When other people arrived, they spoke German about some project specifics, but everyone still went out of their way to speak English as much as possible so that I would be included ❤

We had lunch together as a team, I shared my lovestruck "move to Switzerland" story, we laughed about Swiss stereotypes, pondered about intermittent fasting and with these personal touches it felt like a small family already.

This post concludes the "humble beginnings" series, from now on I'll write under the flag of my internship experience. Expect lots of Vue, Vuetify, prototyping extravaganza and Git heart attacks 🎉

Story of a self-taught web developer: humble beginnings #1

Anzelika — Fri, 08 May 2020 19:10:47 +0000

🔥 Burnout

2 years ago I found myself in a bad place. I had worked in a fintech startup as a customer support for 4 years, and while I adored the people, any meaningful career change within the company never happened. I had side projects, sure, but at the end of the day my worth was still calculated very plainly by the amount of calls and e-mails I handled per day. While wholesome coworkers can keep you going, deep down where it really matters, it can be... well, quite soul crushing 😑

I no longer took pride in what I was doing. It felt like anyone could pick up the phone and give a customer their status update. I wanted to do more, but I wasn't in an environment where I could actually do more. And so I kept seething in internal turmoil, secretly envying developers working one floor above mine, creating magic one pixel at a time. All my life I had been an artsy-craftsy person, and coding seemed like such a polar opposite of that. How can I write such abstract gibberish when I could create stuff from polymer clay or leather? Well, I took a leap of faith and as it turns out, you sure as hell can do BOTH, and they're equally creative.

💡 Turnaround

My final kick in the butt was in January 2019 when I said goodbye to the workplace and lifestyle I had for years. I was hermiting on my own and had all the time in the world to focus on self-improvement. Since I had savings to sustain me without work for 6-8 months, it was quite clear that by the time it runs out, I should be in a position where I could apply for junior/entry level dev jobs. There was simply no plan B. I couldn't go back to working in a call-centre. I couldn't just move back in with my parents and declare myself a failure. I had time and money for a limited amount of time. No distractions. No excuses of a tired brain after long day at work. This is it. This is where I turn my life around.

💻 Online learning

I decided to start my journey with Colt Steele's Bootcamp and it was a great choice. Javascript was playfully etched to my mind by looping through all other dogs who are inferior to his Rusty and I was there for it 😄. Here are two examples of my take on what you build in the JS section of Colt's Bootcamp. In my defiance to Colt's dog-loving, I of course made it cat-themed.

🎨Color game

📝To do list

Practicing with fun little projects like that got me the skills to make my first two solo projects with vanilla CSS, JS, jQuery and Bootstrap:

🧙Magic School timetable generator -> visit
🌲Homepage for a small Fir tree business ->visit

As the bootcamp went to the backend part, I lost the willingness to follow through since Colt used a cloud-based IDE which no longer is live, and getting the out-dated code to work via alternative means was just too much of a hurdle for a newbie like me to chew through (2021 disclaimer: the course has now been updated!). At this point my artsy craftsy side kicked in as well, and I just wanted to continue experimenting with the "fun bits". I kept following Youtube code-alongs for more advanced CSS, for example I very much recommend this one that finally helped me build my first portfolio.

I'm very picky about online tutorials & mentors, since my ADHD plummets my attention span from 100 to 0 in 6 seconds. To be engaged in the learning, I need the mentor to project enthusiasm and think out loud with every step. Hand on my chest I can recommend these 3 guys whose material I always enjoy:

💼 Job hunting

About halfway into my "hermit bootcamp" I moved countries to move in with my partner. It was more important than ever to get that first coding position for the living permit as well. But what did I really have to offer?

No bachelor's in anything
Not speaking the local language (German in this part of Switzerland)
Self-taught coding for a year
Not knowing any frameworks yet
No real work experience in web development

Yeah.. not looking that great.
But still, my amazing partner made sure I'd feel no financial pressure to stop my studies and encouraged me to apply to places even if the advertisement was in German and required skills I haven't even touched yet (SCSS, SASS, prototyping, React/Angular/Vue etc). My goal was to get an entry level/junior Front End web developer position. First consideration I got was from a startup who gave me a technical task of making interactive tables. It still makes me cringe, thinking back to that week I stayed up until 2-3AM, trying to chew through the algorithms of adding new data and manipulating DOM accordingly. I look back to this blog post describing how I tried my hardest to do it while knowing only vanilla JS and ooff, it still hurts! I handed in something hitting only 4 of the required 7 features, so needless to say I didn't end up getting chosen.

Now, at this point I've had 10 no-response applications and 1 failed technical task behind me. It was downright scary. Look at all these frameworks I don't know! What are all these acronyms? Why would anyone ever hire me? German? Now I need to fast track German too? I'm not exaggerating with this GIF:

🎈 Opportunity arises

Just when I was about to give up and apply at Starbucks, I got the most unexpected message in my inbox:

Will you look at that, my artsy craftsy side and plea for an internship caught their attention! This was the ray of hope I so desperately needed (it was actually my birthday) and visiting their office started a new chapter in my developer journey, 14 months after it started.

...to be continued