Anzu Dev Hub

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 so...

Today was the day! My first day as a web developer intern. Thing is, I still pinch myself over the fact this startup with the coolest guys gave me an opportunity to join the team and see how things go. Since many people asked for more details and gave such heartwarming encouragement in the web dev community, I'll try to do my best to document my journey :) My background No formal CS education nor even university degree  Previous work experience in fintech customer support with a touch of product management as a side project 100% self taught via online courses  Colt Steele's Bootcamps (CSS, Bootstrap, jQuery, Javascript, Nodejs) various Youtube tutorials on Javascript a few projects along with my portfolio https://anzudev.com What's 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 ...

Really exciting news - I got an offer of a position to work with an awesome startup! After getting a few rejections due to my lack of professional workplace experience and some frameworks, I was feeling a bit hopeless in regards to what learning curve I still have ahead to be employable, but then I got an unexpected callback by 3 lovely gentlemen who deemed me a good match for my illustration skills, willingness to learn and potentially my startup culture background helped too. We agreed on a 80% mini "internship" for 2 months during which I'll try to wrack up my Vue skills and help make the webapp interactive and visually appealing. It's scary. It's new! But I'll give my very damn best at my first job opportunity in the frontend field! Words can not accurately describe how grateful I am to them for taking this leap of faith in me :) My tasks revolve around using Vue and Vuetify.js with their webapp. They've been in my bucketlist for ages, so what be...

It's day 5 and therefore time to submit the technical task for the job application. Here is the final result. All in all, I can say I learned a lot here by practicing all kinds of loops and manipulating DOM. In plenty places, the code was not working, since the variables were referencing data, not extracting its value, so it was a good reminder how even a tiny syntax change can make a world of difference. let compareDataSet = []; compareDataSet . push ( tabledata [ tableIdx ]) //vs let compareDataSet = tabledata [ tableIdx ] It also showed me the upsides and downsides of using external libraries. They can certainly eliminate a lot of the grunt work (in this case creating functions for table data editing), but they can also make it very challenging to incorporate requirements on top of the initial purpose. Tabulator solved the problems of interactive tables and data management, but it also created a problem I could not solve within the timeframe: how to h...

I've been elbow deep in a recently assigned technical task and I may see the light in the end of the tunnel here! I reached out to a friend (Per, if you're reading this:  ♡ ), and he was a really great teacher, guiding me how to achieve what I wanted without explicitly copy pasting me the solution. Here's what we achieved by the end of the day. See the Pen Tabulator project by Anzelika ( @anzuj ) on CodePen . UPSIDE: All the dictionaries now dynamically load upon page load, fetching the data from a nested array of all dictionaries! DOWNSIDE: Had to revamp the "add new pair" function I made for a single dictionary before, so that a form of 2 fields and a submit button would be generated for each and single dictionary within the loop. The above codepen solution works, but it is a bit lengthy, so I went back to the drawing board and tried out Tabulator's native "add row" method to reduce the amount of code. The results are pretty specta...

 I got a response back from the place I applied to! Cheers and jump-up-and-downs quickly subsided though, after seeing the technical task they've set up for me. It's quite a pickle! Essentially, I need to build interactive dictionaries, AKA DOM manipulation on steroids. This means I have to brush off dust from my Javascript skills big-time, if I want to complete this task in 5 days. I am not yet so proficient in React, so I can only hope that doing it "old school" and styling it aesthetically pleasing would show how invested I am to make it work with the best way I know right now. For the sake of confidentiality, I modified the given data to animals/colors in the blog. Some source information was already given, so I decided to put the original data in an object array (eventually it would need to be an array of object arrays with other dictionaries too):  let tabledata = [{ animal : "hippo" , color : "grey" }, { ...

Today is the day I did it! I opened the ever-feared terminal in my VS code. The final push was looking at React/Angular videos and seeing that following the project all required terminal commands. Since package management is elementary knowledge in this field, I decided I could no longer avoid getting comfortable with it. Aaand of course nothing went smoothly from the beginning. As soon as I tried to create a new file with touch index.html, this happened: Luckily my awesome Facebook coding community quickly came to rescue and pointed out that Window's native terminal "does not speak that lingo". So I had to switch to Git Bash terminal instead, which knows how to touch things. He. He. He. I dove into a React video next, but as if doomed, another problem showed within the first minutes. I was able to install react by: npx create-react-app, but when doing npm start, another error popped up *sigh* A bit discouraging to say the least, just wanting to learn a new ...

Today is a very happy day. Spent around a week of polishing, but here it is: https://anzudev.com. My web-home is ready! Here it is on mobile view (600px viewport) I learned a lot during these last days, especially since the site is using vanilla CSS/HTML. So I went back to Flexbox basics to make sure my images and content line up in all screen sizes. Gallery was the biggest challenge, since I was relying on Bootstrap's Lightbox so much. But after some googling I found a nifty solution I could restyle for my own site. Here is a before/after. The buttons felt a bit 1999, so I used Awesome Icons instead and positioned them on top instead of on the sides. After adding the personal section where witch hats and cats were mandatory of course, I finally felt ready to do the thing I've dreaded for a while: start to search for real life jobs in front end field. Since I'm self taught with no computer science university degree it's easy to feel inferior, but today I s...

Today has been an immensely rewarding day! My partner was having a bit of a low day at work, since he is currently actively seeking better fitting employment, and he casually said whether perhaps a website would make his applications stand more out. I reckon he did not expect me to dive headfirst into Bootstrap templates to build him one in a few hours by the time he got back! Since he is a technical engineer, I wanted to make it a bit thematic and include some animated gears. That was hell of a lot of fun, since my partner immediately stepped into the "client" shoes and demanded the cogwheels to turn fast and ferociously. Luckily I managed to convince him that it would be counterproductive, since it would distract the viewer from the actual content. Now there are slowly, yet surely rotating gears on his personal site, and I swore on my pinky that these gears will be the reason he secures an interview, because they beat boring resumes any day! Domain shopping went smoothl...

The time has come! To craft my very own site, my gem, my business card to the Front End world, my creative baby! *jumps around excitedly* I knew that I wanted my own site to incorporate all of this: animated backdrop of particles I fell in love with a few weeks ago (Github here ) mobile responsiveness dark backdrop and light text smooth animations for changing sections no CSS framework (Bootstrap/Semantics) to practice positioning the whole site from scratch one pager with a toggle menu to follow the contemporary trends fresh feel, big clear elements When browsing for inspiration I found  this  tutorial that pretty much covered all the above. It also involves practicing all of this: vanilla CSS, positioning all elements by yourself via flexbox. Good chance to practice the basic understanding of how positioning and display attributes work jQuery. Toggle menu and animations are supported by jQuery, allowing me to familiarise  myself with that syntax and...

Hacking away at Colt Steele's JS course! We've now reached Javascript events and from the simple coin game demo I developed my own version featuring penguins and hearts because.. I'm nothing but cheesy after all  ^^ Here's the site. It's a really basic exercise of creating addEventListeners based on keyboard events (arrow keys) and moving the heart around in a random location once the penguin reaches it. I went for the extra mile and figured out how to add a temporary "uh-oh!" message once the heart is reached and.. sadly goes away again. The neverending quest for love, ey? :) The course moved on to form events and that's when it got really tricky. The mixed use of conditionals, destructuring, eventListeners and loops really puts your logical grasp on a test. For example this code snippet is looping through user inputs and updating the values in a formData object simultaneously as the user types. I coded along, but still squinted at it like a bab...