Job diary #2

My intern journey continues :)

It's now been 3 weeks and mostly I've spent my time independently learning Vue and Vuetify via my Udemy course and this Youtube playlist from Net Ninja ("Hi ganngg!").


Net Ninja tutorial and its dynamic dashboard generation especially helped me feel less afraid of the concepts I knew I needed to soon create for my own company. Granted, the content is slightly out of date since syntax changed in Vuetify v2, but there are comments helping out with the differences and I added my own too for any 2020 viewers.

The more I learn about Vue the more I fall in love with it. Remember how painstaking it is to dynamically create content or lists with Vanilla JS? With Vue you can do it all with a simple v-for directive. It's going to be pretty hard not to "think in Vue" with future non-static projects of my own.

Here is a quick example of how data generating and binding works in Vue. For practice I made a simple feedback sorting demo. It uses a local array as a database (but it could easily be linked to MongoDB etc), and with a button click you can manipulate DOM AND the actual dataset alongside it! And all that it takes is just a couple of lines with an easy syntax, a breath of fresh air. Honestly I'd marry v-model and v-for directives if I wouldn't be engaged already!.

See the Pen sorting transition by Anzelika (@anzuj) on CodePen.

WORKFLOW DIFFERENCES

Now that I was all giddy about Vue, it was time to be more involved with the actual project! Side by side with my coworker (I should perhaps say team lead, but it's such a close-knit tiny team that we really have no hierarchy) I helped create one universal flow for the user experience and how information is displayed. This gave me a real taste of how something is coded as a team and I loved bouncing ideas and reasonings of why something should be displayed X or Y way.

What was new to me was how production flow differs from being a freelancer. When stuff is in the sketchboard still, you could essentially put your code editor away for a few days.

Creating a project as a freelancer:

1. idea
2. sketch 
3. coding

Creating a project in a company:

1. idea
2. sketch
3. minimalistic clickable wireframe
4. user testing
5. styled clickable prototype
6. user testing
7. coding

Since we agreed on a concept and user flow, my task was nr 3, to make a clickable wireframe. For this I used Balsamiq, and I must say, I recommend it SO much, if you need something to get a concept down in a very basic, but still somewhat interactive way.

LOCAL DEV ENVIRONMENT MADNESS

While I was working on the wireframe, the team was discussing a bug in their survey interface. I heard "Hello Frontend guru?" (it's precious how they lift me up...) and ran to see what was up! It seemed as if the ticks on the slider component were not clickable, while areas left and right from it were. To try and troubleshoot, I had to get the local files working on my laptop along with the development environment. And boooy, what a day that was.

First of all, I gave them all a tiny heart attack by admitting that I'd never used version control in my personal projects. That collective gasp of "You don't use GIT??" was quite priceless. My solo projects so far felt too small for the need of version control, but I quickly learned that no project is too small for it and I was pretty much a cavewoman copying and pasting files in my computer manually if I wanted to have a "checkpoint" (which I now know is a branch!). After my team recovered from the shock and I was blushing in the corner, they were practically all competing in who sends me the best blog post/tutorial/visual game/Kindle book to help me get the concept down. They are all so thoroughly cool <3

Absolutely coolest of the bunch, at least that day, was the lead developer who sat by my screaming possum of a laptop for the better part of the whole day, getting odd errors from all kinds of dependancies. It turned out that the set they were working with perhaps just was not compatible with Windows.. and I had the only Windows machine in the whole office. Well.. that was awkward :D
Eventually we installed an actual Ubuntu virtual machine allowing to run the dependancies. It felt all so over the top just to be able to see code for one tiny page live, but I guess this was the wake up call of what kind of package you deal with every day when developing and maintaining real-life projects.

DEPENDANCIES ARE A DOUBLE EDGED SWORD

By the end of the day I did get a glimpse of the actual project code and first thing I checked is the version of Vuetify they use. It was 1.53. And the latest is 2.2.17. After digging in Github, my suspicion turned out to be true and the slider behaviour is a known bug, fixed by updating the Vuetify version. When I asked if it could be possible to update our Vuetify version, it was another learning point: updating ANY dependancies is not something anyone does lightly, since it can create a domino effect of malfunctioning libraries. One of our core dependancies had a recommended level below 2.2.17, so it turned out that a simple thing such a clickable slider could not be fixed due to a completely another dependancy in the webapp. But it's definitely in the books once more urgent matters are tended to.

A good lesson for myself to choose dependancies in a very picky manner, to make sure that they could all be friends also in the long term :)

USER TESTING

I completed the wireframe and it was time to check it out with the rest of the team. We sat team members in front of the Balsamiq wireframe and asked them to go through it without us guiding them nor explaining much at all. This was again such a fascinating experience. What felt logical to me, did not seem logical to the person clicking through the flow, and I had to practically hold my fist in my mouth trying not to shout instructions, with the other developer smiling at my direction fully feeling the same way.

But we got loads of amazing feedback from 2 people already and realised one universal truth: "Simplicity beats everything". While we wanted to keep the user informed with all kinds of snippets and categories, we ended up visually cluttering some interfaces. My next job was to create a version 2, taking out as much details as possible, for the purpose of giving the user a straightforward experience. This was done in a day, and now I'm excited to hear feedback on that, so that we can hopefully move on to the stylised prototype! Our company uses https://proto.io/ for that, and I bet it will be a fun experience to learn that tool.

TINY YET EMPOWERING TASK

One time, I got asked if I have time for a tiny Vue task. In our internal tooling, we oftentimes have to look up users from a database and see their login links. But they did it by manually searching the JSON database. Obviously quite a tedious way. So I was asked by a backend developer if there was a way to visually represent the user data in a better way. I was so excited because that is what I literally just had learned! Essentially it was just generating Vuetify components (v-card) in a loop with v-for directive and populating each card with data from the database, such as {{ user.name}}. It felt so cool to actually have been asked something, at first feel terrified about having to say "Oh no... I am not there yet" and instead saying "Hey, I know how to do this!". Being an intern is such a rollercoaster :D Below is a picture of what I did, just a really simple way of generating user cards, and I love icons, so naturally I had to slap them on there too.
PS: Does anyone know the difference between Material Icons and Material Design Icons, and which one is supposed to be native to Vuetify/Vue? Because we were surprised that the first one didn't come natively with Vuetify and spent a few confused minutes talking about different iconsets :D 

ALL TALENTS ABOARD!

Between wireframing and coding I was actually approached with an idea to create some personalised illustrations for a client's survey. This essentually meant turning their initials into cartoon characters and making them do all kinds of stuff to illustrate the question scale of 1-6. It felt so wonderful to take my graphics board to work and just draw for a day, letting my creative juices flow outside the code editor as well. After we sent some demo drawings to the client and they liked it I was given a green light to make a whole spread by next month's survey. Yay!

COVID-19 strikes us too

Yes, we can't escape the inevitable mention of the corona virus. Our office is based in the middle of Zurich and while the overall atmosphere of Switzerland is relaxed, home office is recommended and practiced more and more. Our team was also told that home office is not a problem as long as we are reachable by Slack and check in about daily tasks. Very grateful about that to be honest, since my partner is a risk group himself, and I would rather not bring him home complications by simply taking the train or touching a door handle which was contaminated. Therefore, next week or even two will be mostly home officing, which I reckon will be much to the pleasure of my two cats.

Whoever ended up here to read my tale, stay safe, keep coding and if you can.. #staythefuckathome!