Anzu Dev Hub

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