#17 - MM - GILDAN - ACE
Another busy week, but this time I worked on multiple projects. Namely: the Media Monks app, Gildan and ACE. For the Media Monks app I got the oppertunity to implement something really interesting. Namely CodePush. With CodePush you as developer can send over-the-air (OTA) updates to the released app. So you don’t have to go through the whole store review process of both Google and Apple. Which can save up a lot of time or when an accidental bug is released with the app, it can be fixed in a nick of time through OTA. It’s really cool, because with just one simple command you can update the JS bundle of the app, but only the JS side. Native code cannot be updated OTA. It didn’t require much code and you can customize how the updates should happen on the users device. Whether the app should update in the background, immediately or that the user gets prompted with an update. Which is really cool to see, how you can just change like text or styling and see it change on your phone, while not having it being connected to the computer. I also implemented random local notification messages, so the notification doesn’t have the same default message all the time.
For Gildan I got to implement Firebase analytics, which was something new and interesting as well. With this you can track which screens the users go on, as well as tracking all of their interactions with the app. What I had to do for this to work, was just installing it, installing the debugger Flipper to see outgoing traffic and calling the setCurrentScreen of analytics. This is being handled for every page through a HOC. For ACE this was done as well, but there it was already installed and I actually understood how it worked, which was really interesting. Here I tested it with the debugview of Firebase, since I got access to it for ACE. What I needed to track for ACE was a marketingbanner which I had to implement as well. Made a new component for it, retrieved the data from BE, saved it in a new reducer and then display this data within the MarketingBanner component. I had to implement tracking for whether the user sees the banner and when the user interacts with the banner. Besides this I fixed a bug that the user data is being shown all capitalised. Apparently we got it back like that from BE, so I thought well let BE fix it. But since we have full control over we show it, I fixed it by saving it in lowercase and then capitalising the first letter only for certain names. After I implemented some text for terms and conditions and added a SEE MORE button for when the user has bought more than 5 products. This week was a really cool week, because I learned some stuff which I didn’t expect! I’m curious what next week will bring, the amazing people I’m working with always seem to surprise me.

NE: Weer een drukke week, maar deze keer heb ik aan meerdere projecten gewerkt. Namelijk: de Media Monks-app, Gildan en ACE. Voor de Media Monks-app kreeg ik de kans om iets heel interessants te implementeren. Namelijk CodePush. Met CodePush kunt u als ontwikkelaar OTA-updates (over-the-air) naar de release-app sturen. U hoeft dus niet het hele winkelbeoordelingsproces van zowel Google als Apple te doorlopen. Dat kan veel tijd besparen of wanneer er per ongeluk een bug wordt vrijgegeven met de app, kan deze in een mum van tijd worden opgelost via OTA. Het is echt gaaf, want met slechts één simpele command kun je de JS-bundel van de app updaten, maar alleen de JS-kant. Native code kan OTA niet bijwerken. Er was niet veel code voor nodig en je kan het helemaal aanpassen van hoe de updates moeten plaatsvinden op het apparaat van de gebruiker. Of de app op de achtergrond moet worden bijgewerkt, onmiddellijk of dat de gebruiker wordt gevraagd om een update. Dat is echt gaaf om te zien, hoe je gewoon code kunt veranderen zoals tekst of styling en het op je telefoon kunt zien veranderen, zonder dat het op de computer is aangesloten. Ik heb ook willekeurige lokale meldingsberichten geïmplementeerd, dus de melding heeft niet altijd hetzelfde standaardbericht.
Voor Gildan moest ik Firebase analytics implementeren, wat ook iets nieuws en interessants was. Hiermee kunt u bijhouden welke schermen de gebruikers gebruiken en al hun interacties met de app volgen. Wat ik moest doen om dit te laten werken was het installeren, de debugger Flipper installeren om uitgaand verkeer te zien en de setCurrentScreen van analytics aanroepen. Dit wordt voor elke pagina afgehandeld via een HOC. Voor ACE was dit ook gedaan, maar daar was het al geïnstalleerd en ik begreep hoe het werkte, wat echt interessant was. Hier heb ik het getest met de debugview van Firebase, omdat ik er toegang toe heb gekregen voor ACE kon ik dit gebruiken, voor Gildan moest ik daarom Flipper gebruiken. Wat er getrackt moest kunnen worden was een marketingbanner, die ik ook moest implementeren. Ik maakte er een nieuw component van, haalde de gegevens van BE op, bewaarde het in een nieuw verloopstuk en gaf deze gegevens vervolgens weer binnen het MarketingBanner component. Ik moest tracking implementeren om te zien of de gebruiker de banner ziet en wanneer de gebruiker interactie heeft met de banner. Daarnaast heb ik een bug gerepareerd dat de gebruikersgegevens allemaal met een hoofdletter worden weergegeven. Blijkbaar hebben we het zo teruggekregen van BE, dus ik dacht dat BE het maar goed zou maken. Maar aangezien we volledige controle hebben over het tonen van de gegevens, heb ik het opgelost door het eerst in kleine letters op te slaan en vervolgens de eerste letter alleen voor bepaalde namen in hoofdletters te schrijven. Nadat ik wat tekst voor algemene voorwaarden had geïmplementeerd en een knop ZIE MEER heb toegevoegd voor wanneer de gebruiker meer dan 5 producten heeft gekocht. Deze week was echt een coole week, omdat ik wat dingen heb geleerd die ik niet had verwacht! Ik ben benieuwd wat volgende week gaat brengen, de geweldige mensen waarmee ik werk lijken me altijd te verrassen.

#16 - MM
This week was all about the Media Monks app as well, but merely finishing stuff up and implementing feedback of the designers. The dinner page has a vegetarian option and the header has three images, which are being shown randomly every time the monk goes on this page. What I had to do was changing the image to another food image when the hamburger image was displaying while the vegetarian option was selected. Pretty, just do a condition on which image is displaying and whether the vegetarian is selected, if so, choose a random image from the array of images without the hamburger image. Another ticket was adding a loading animation to the company info page. That when the tiles load in, the images show a shimmer. For this I used the component Shimmer which I made earlier, but the interesting thing about this was that I had to check on the loading of the image. The library react-native-fast-image is being used for this and this component has a prop with which we can set the state to whether the image is loading or has ended. I didn't know FastImage was a thing and that you can show a component based on the returned state of the component, on whether the images are loading. Another new thing that I learned was AppState of React Native. Just when I thought to know everything about React Native, there was another thing that I've never heard of before. This is interesting because you can change the state based on whether the user is opening the app, so whether the app is on the foreground or background. I needed to use this for changing the isLoading state for signing. I didn't get it done, because the idea was that we do a check that when the modal closes for the Google login, the app state changes and based on that change the isLoading. But the app state didn't change when closing the Google login modal. So I didn't get to figure that out. Another thing that I got to make a start with and learned as well this week, is CodePush. With CodePush you can as developer push JS changes directly to the app on the users their devices. Over-the-air, OTA. This is handy because then you wouldn't have to go through the whole reviewing process of the stores to make the update. Didn't have enough time to configure it with the app, I might look into this in my spare time for this is handy with my side projects as well. So I learned a lot now I think about it this week. Curious to what next week will bring!

NE: Deze week stond ook in het teken van de Media Monks-app, maar het afmaken van dingen en het implementeren van feedback van de ontwerpers. De dinerpagina heeft een vegetarische optie en de koptekst heeft drie afbeeldingen, die willekeurig worden weergegeven telkens wanneer de monnik op deze pagina komt. Wat ik moest doen was de afbeelding veranderen naar een andere afbeelding van een gerecht toen de afbeelding van de hamburger werd weergegeven terwijl de vegetarische optie was geselecteerd. Mooi, doe gewoon een voorwaarde waarop de afbeelding wordt weergegeven en of de vegetariër is geselecteerd, zo ja, kies dan een willekeurige afbeelding uit de reeks afbeeldingen zonder de hamburgerafbeelding. Een ander ticket was het toevoegen van een laadanimatie aan de bedrijfsinformatiepagina. Dat wanneer de tegels worden geladen, de afbeeldingen een glans laten zien. Hiervoor gebruikte ik de component Shimmer die ik eerder maakte, maar het interessante hiervan was dat ik moest kijken naar het laden van de afbeelding. Hiervoor wordt de bibliotheek react-native-fast-image gebruikt en deze component heeft een prop waarmee we de status kunnen instellen op het al dan niet laden van de afbeelding. Ik wist niet dat FastImage iets was en dat je een component kunt laten zien op basis van de geretourneerde status van de component, of de afbeeldingen worden geladen. Een ander nieuw ding dat ik leerde was AppState of React Native. Net toen ik dacht alles te weten over React Native, was er nog iets waar ik nog nooit van gehoord had. Dit is interessant omdat u de status kunt wijzigen op basis van het feit of de gebruiker de app opent, dus of de app zich op de voorgrond of op de achtergrond bevindt. Ik moest dit gebruiken om de isLoading-status voor ondertekening te wijzigen. Ik heb het niet voor elkaar gekregen, omdat het idee was dat we controleren of wanneer de modal sluit voor de Google-login, de app-status verandert en op basis van die wijziging de isLoading. Maar de app-status veranderde niet bij het sluiten van de Google-inlogmodal. Dus ik heb dat niet kunnen achterhalen. Een ander ding waarmee ik deze week een begin heb gemaakt en ook heb geleerd, is CodePush. Met CodePush kunt u als ontwikkelaar JS rechtstreeks naar de app op de gebruikers van hun apparaten pushen. Over-the-air, OTA. Dit is handig omdat u dan niet het hele beoordelingsproces van de winkels hoeft te doorlopen om de update uit te voeren. Ik had niet genoeg tijd om het met de app te configureren, ik zou dit in mijn vrije tijd kunnen onderzoeken, want dit is ook handig met mijn zijprojecten. Dus ik heb veel geleerd nu ik er deze week aan denk. Benieuwd wat volgende week gaat brengen!

#15 - MM
Another week with the Media Monks app. Which was really nice, because this is really an app in which we can try new things, implement fancy things that we come up with. You can try new things and through that learning things, which you normally wouldn't with projects. Because there you are bound to what the client wants. Here we aren't.
I worked on three tickets, with one ticket I had to filter out the anniversary monks and have them show in the carousel with the birthday monks and the anniversary monks should show first in the carousel as well. With this filtering, you also have to check whether these monks their anniversary is today, so I also got to work with moment, Date objects. With this ticket I discovered that you can add objects at the start of an array with the unshift method. I also learned that we program according to the function programming methodology. That you make functions which you write in a certain to make it reusable and implicit enough. So not passing a boolean, that is not implicit enough, make it two separate functions instead. So first I had a function which checks whether the birthday/anniversary was today and passed a parameter to this function whether it was a birthday or not. But to have it be implicit, I had to make it two separate functions, one that handles the birthday and one that handles the anniversary. In those functions, we call the function which contains all the logic. So from the birthday and anniversary functions, I converted the incoming dates into a proper date and called the function which contains the logic in which we compare the actual incoming dates. Which was interesting, because I never stood still with such methodologies or conventions.
The other ticket was working on a parallax effect. On iOS, you have a bounce when swiping down and on the dinner page, is an image on the top of the page. When we swipe down, we want the image to scale, to become bigger. Apparently RN doesn't have the transform-origin property for styling, CSS does, but what I found out while working with the reanimated and redash libraries, was that the redash library has such a method. Which is really, really nice, because to make such a thing yourself with transformMatrixes is a real hassle. So that way I could scale the image from the top center instead of the mid-center which is by default. To make the image scale in the first place I interpolated on the scrollY node that we can return from the scrollview. Which was really interesting, because now I have a much better understanding of interpolation and transform-origin. For my last ticket, I got to work on a shimmer, I did this before for the New York Pizza app, but that was with the Animated API from react-native itself. Now I got to replicate the shimmer effect with Reanimated, which is handled on the native side and therefore more performant. This was interesting because I got to learn about the Suspended component, which is a experimental component in RN which you load a fallback component for when the code or component still has to load in. Also, I got to learn how the timing function works in Reanimated and how to loop on things. But also, just how to move something, to have it animate. Really cool stuff and I'm curious what next week will bring!

NE: Nog een week met de Media Monks-app. Dat was erg leuk, want dit is echt een app waarin we nieuwe dingen kunnen proberen, mooie dingen kunnen implementeren die we bedenken. Je kunt nieuwe dingen uitproberen en daardoor leren, wat je normaal niet met projecten zou doen. Omdat je daar gebonden bent aan wat de klant wil. Hier zijn we dat niet.
Ik werkte aan drie kaartjes, met één kaartje moest ik de jubileum-monniken eruit filteren en ze in de carrousel laten zien met de verjaardags-monniken en de jubileum-monniken zouden ook als eerste in de carrousel moeten verschijnen. Met deze filtering moet je ook checken of deze monniken vandaag jarig zijn, dus ging ik ook aan de slag met moment, Date-objecten. Met dit ticket ontdekte ik dat je aan het begin van een array objecten kunt toevoegen met de unshift-methode. Ik heb ook geleerd dat we programmeren volgens de functie programmeermethodologie. Dat je functies maakt die je in een bepaalde schrijft om het herbruikbaar en impliciet genoeg te maken. Dus als je een boolean niet doorgeeft, dat is niet impliciet genoeg, maak er dan twee afzonderlijke functies van. Dus eerst had ik een functie die controleert of de verjaardag / verjaardag vandaag was en gaf een parameter door aan deze functie of het een verjaardag was of niet. Maar om het impliciet te maken, moest ik er twee afzonderlijke functies van maken, één voor de verjaardag en één voor de verjaardag. In die functies noemen we de functie die alle logica bevat. Dus van de functies verjaardag en jubileum heb ik de binnenkomende datums omgezet in een juiste datum en de functie genoemd die de logica bevat waarin we de werkelijke inkomende datums vergelijken. Dat was interessant, want ik stond nooit stil bij dergelijke methodologieën of conventies.
Het andere ticket werkte aan een parallax-effect. Op iOS heb je een stuiter wanneer je naar beneden veegt en op de dinerpagina staat een afbeelding bovenaan de pagina. Als we naar beneden vegen, willen we dat de afbeelding groter wordt. Blijkbaar heeft RN niet de eigenschap transform-origin voor styling, CSS wel, maar wat ik ontdekte tijdens het werken met de gereanimeerde en redash-bibliotheken, was dat de redash-bibliotheek zo'n methode heeft. Dat is echt heel leuk, want om zoiets zelf te maken met transformMatrixes is een heel gedoe. Op die manier kon ik de afbeelding vanuit het midden bovenaan schalen in plaats van vanuit het midden, wat standaard is. Om de afbeelding in de eerste plaats te schalen, heb ik geïnterpoleerd op het scrollY-knooppunt dat we kunnen teruggeven vanuit de scrollview. Dat was heel interessant, omdat ik nu een veel beter begrip heb van interpolatie en transformatie-oorsprong. Voor mijn laatste ticket ging ik aan de slag met een shimmer, ik deed dit eerder voor de New York Pizza-app, maar dat was met de Animated API van react-native zelf. Nu heb ik het glinsterende effect kunnen repliceren met Reanimated, dat aan de native kant wordt afgehandeld en daardoor beter presteert. Dit was interessant omdat ik meer te weten kwam over de Suspended-component, een experimentele component in RN waarvoor je een reservecomponent laadt voor wanneer de code of component nog moet worden geladen. Ik heb ook geleerd hoe de timingfunctie werkt in Reanimated en hoe je dingen kunt herhalen. Maar ook hoe je iets kunt verplaatsen, om het te laten animeren. Echt coole dingen en ik ben benieuwd wat volgende week gaat brengen!

#14 - MM
This week I worked on one project only. The Media Monks app. It's a really cool app, with quite some animations, and those animations are what make it mostly cool. And to see how those animations are made is really interesting. But, what I worked was partly animations and getting the dinner page to work with Firebase. That when the user swipes to the right, the user is being added into the database for dinner. And when the user swipes back, the user should be deleted from the database for dinner. It was in the end more simpler than I initially thought. Especially as there is some example code of what my colleagues had already made. So this took me maybe a day to have it to work and the day later was just optimizing the code, for I got quite a bit of feedback on my code. Like not being lazy with TypeScript, because I was, we all were actually, using 'any' too much. Which throws away the essence of it. So I got to go in depth with that one, for the rest just naming changes to have it fit the naming convention that we're using. After all this was done, I got to work on the splashscreen which has an amazing animation. Static animation made with Adobe. We show this animation by using lottie-react-native library, which converts json code to actual animation on the native side. Which was really interesting to learn, that you can implement adobe effect animation into such an app. Also I got to implement a gif for the birthday monks, that when a monk has its birthday, the screen of the app shows a gif in which the monk in being congratulated. Which I think is a really nice touch for the app and a nice surprise for the monks. Also with showing the splashscreen I got to learn how the authentication flow works on the navigation side. So on boot up of app, show splashscreen, change state, which then loads the authentication, when that's done it changes the state to whether the user is authenticated or not and based on that value is being redirected to the correct page. And with all these things that I learn, especially this week, I think of how I can implement this in my own project. And it makes me realize how much more I can optimize my own projects. Which is really cool to see. So I learned a lot again, I bet I'll learn a lot next week as well.

NE: Deze week heb ik maar aan één project gewerkt. De Media Monks-app. Het is echt een coole app, met behoorlijk wat animaties, en die animaties maken het vooral cool. En om te zien hoe die animaties worden gemaakt, is echt interessant. Maar waar ik aan werkte, waren deels animaties en het aan de praat krijgen van de dinner pagina met Firebase. Dat wanneer de gebruiker naar rechts veegt, de gebruiker wordt toegevoegd aan de database voor het avondeten. En wanneer de gebruiker terug veegt, moet de gebruiker voor het diner uit de database worden verwijderd. Het was uiteindelijk eenvoudiger dan ik aanvankelijk dacht. Vooral omdat er een voorbeeldcode is van wat mijn collega's al hadden gemaakt. Dus dit kostte me misschien een dag om het te laten werken en de dag erna was ik gewoon de code aan het optimaliseren, want ik kreeg nogal wat feedback op mijn code. Zoals niet lui moeten zijn met TypeScript, want ik was, we gebruikten eigenlijk allemaal de 'any' methode te veel. Wat de essentie van TypeScript weggooit. Dus ik moest hier even dieper op ingaan, voor de rest alleen waren het vooral het wijzigingen van namen om het te laten voldoen aan de naamgevingsconventie die we gebruiken. Nadat dit allemaal was gedaan, ging ik aan de slag met het splashscreen met een geweldige animatie. Statische animatie gemaakt met Adobe. We tonen deze animatie met behulp van de lottie-react-native-bibliotheek, die json-code converteert naar daadwerkelijke animatie aan de native kant. Wat echt interessant was om te leren, is dat je adobe-effectanimatie in zo'n app kunt implementeren. Ook heb ik een gif kunnen implementeren voor de verjaardagsmonniken, dat wanneer een monnik jarig is, het scherm van de app een gif toont waarin de monnik wordt gefeliciteerd. Wat volgens mij een heel leuke touch is voor de app en een leuke verrassing voor de monniken. Ook met het tonen van het splashscreen leerde ik hoe de authenticatiestroom aan de navigatiezijde werkt. Dus bij het opstarten van de app, toon splashscreen, wijzig status, die vervolgens de authenticatie laadt, wanneer dat is gebeurd, verandert het de status in of de gebruiker al dan niet is geverifieerd en op basis van die waarde wordt omgeleid naar de juiste pagina. En met al deze dingen die ik leer, vooral deze week, bedenk ik hoe ik dit in mijn eigen project kan implementeren. En het doet me beseffen hoeveel meer ik mijn eigen projecten kan optimaliseren. Dat is echt gaaf om te zien. Dus ik heb weer veel geleerd, ik wed dat ik volgende week ook veel zal leren.

#13 - MM - GH
This week was mostly working on the new Media Monks app and there was one day that I went to help my colleague with Google tickets. Some leftovers, mostly copy tickets. Took me a day, because Google is very good at wanting something else every five minutes on the thing we've made or have changed on. Besides Google, I got to work on the dinner page of the Media Monks app. It's honestly a beautiful app and to see how fast my colleagues are in making such complex components is mad, but super interesting. I've worked on getting the swipe animation and countdown timer done. I optimized the countdown with just moment methods, in the first place I also used js methods to have it show properly, but I found out that wasn't necessary. The swiper animation is that the user can swipe a circle from right to left. When the user swipes the circle right, the circle snaps into its snap point and thus calls the signup function. Which signs the user up for dinner. When the user swipes back to the left, they. cancel their reservation. Really cool that I got it done with a little push of my mentor who showed me a video in which snap points are being used, which was what I was struggling with making, And that I got it working in the end, feels so good and abstracting and optimizing the code, and then looking back at it is just so beautiful to see, like I'm looking at it like, "Geesssh I wrote that, so smart ^*^". It's really cool and I got it all done at the end of the week, only need to implement the BE for it, which I had a fast peek at and it did seem quite confusing. So that should be interesting.

NE: Deze week werkte ik voornamelijk aan de nieuwe Media Monks-app en op een dag ging ik mijn collega helpen met Google-tickets. De laatste paar, vooral kopieertickets. Het kostte me een dag, omdat Google heel goed is om elke vijf minuten iets anders te willen over wat we net hebben gemaakt of veranderd. Naast Google ben ik aan de slag gegaan op de dinerpagina van de Media Monks app. Het is echt een prachtige app en om te zien hoe snel mijn collega's zijn in het maken van zulke complexe componenten is insane, maar super interessant. Ik heb gewerkt aan het afmaken van de swipe animatie en de countdown timer. Ik heb het aftellen geoptimaliseerd met alleen moment-methoden, in de eerste plaats gebruikte ik ook js-methoden om het correct weer te geven, maar ik kwam erachter dat dat niet nodig was. De swiper-animatie is dat de gebruiker een cirkel van rechts naar links kan vegen. Wanneer de gebruiker de cirkel naar rechts veegt, springt de cirkel in het klikpunt en roept zo de aanmeldingsfunctie op. Die de gebruiker aanmeldt voor het avondeten. Wanneer de gebruiker terug naar links veegt, wordt hun reservering geannuleerd. Echt gaaf dat ik het voor elkaar kreeg met een klein duwtje van mijn mentor die me een video liet zien waarin knikpunten werden gebruikt, hier had ik namelijk ook wat moeite mee om te maken, en dat ik het uiteindelijk aan het werk kreeg, voelt zo goed en de code verbeteren en optimaliseren, en er dan naar terugkijken is gewoon zo mooi om te zien, ik kijk er naar als: "Geesssh dat heb ik geschreven, ik ben zo slim ^ * ^". Het is echt gaaf en ik heb het aan het einde van de week allemaal klaar gekregen, ik hoefde er alleen de BE voor te implementeren, waar ik snel naar keek en het leek nogal verwarrend. Dus dat zal interessant moeten zijn.

#12 - MM - Gildan
This week was another week with Gildan. There was a new endpoint made by BE which we had to implement, but this caused issues with the way the FE was set up. The new endpoint was filtering out all the distributors that did not sell the product the user selected. On the list of distributors when selecting a product, the user can select distributors as their favorites, which is being stored in the Redux state. But, when the user goes to another product and the selected product doesn't sell in certain distributors which were made favorites, then the list is being updated which shouldn't happen, it should only show the distributors that sell the product. But the actual issue was that the favorites list on the profile, was being updated, which should stay the same no matter which distributors are set on favorites when having selected a product. So, we added another list in the store, by duplicating the whole thing of the other list and by doing that keeping it separate. This is not a great solution, but it was the most efficient one.
Since Google was put on hold, right after I helped finishing up the last tickets, in which I had to change some styling in order to have it show perfectly, we all of a sudden had enough time re-create the app for Media Monks. They have an intern app, but its really outdated, so we are now re-creating it with extra features. This is fun because it feels like less pressure, because I'm not doing it for a client. I started to work on the dinner page, on which the workers can notify Media Monks that they want to have dinner at the office. I made the design, but the most tough thing about it was that I had to make a countdown to when the dinner is ready. Since this doesn't come out of the box I had used moment and by making certain calculations I in the end, after quite some trial and error and a bit of a work around to have it show good, I got it working fine. Which was really cool, because I didn't really see it get done after failing to get it to work after working on it like couple of hours. Now the only thing I have to do for that page, that'd be to make a swipe function, on which the user can swipe to the left, in which they notify that they want to have dinner and by swiping left, to cancel it. This should be interesting, because I'm not so good at animating stuff. This was another week, done. Curious for the next, I bet that will be just as much fun!

NE: Deze week was weer een week met Gildan. Er was een nieuw eindpunt gemaakt door BE dat we moesten implementeren, maar dit veroorzaakte problemen met de manier waarop de FE was opgezet. Het nieuwe eindpunt filterde alle distributeurs die het door de gebruiker geselecteerde product niet verkochten. Op de lijst met distributeurs bij het selecteren van een product, kan de gebruiker distributeurs selecteren als hun favorieten, die wordt opgeslagen in de Redux-staat. Maar wanneer de gebruiker naar een ander product gaat en het geselecteerde product niet verkoopt, en bepaalde distributeurs die tot favorieten zijn gemaakt, laat de lijst bijwerken, wat niet mag gebeuren, maar alleen de distributeurs die het product verkopen. Maar het echte probleem was dat de favorietenlijst in het profiel werd bijgewerkt, wat hetzelfde zou moeten blijven, ongeacht welke distributeurs op favorieten zijn ingesteld wanneer ze een distributeurs hebben geselecteerd bij het selecteren van een product. Dus hebben we nog een lijst in de winkel toegevoegd, door de hele lijst van de andere lijst te dupliceren en dat apart te houden. Dit is geen geweldige oplossing, maar het was de meest efficiënte.
Omdat Google in de wacht werd gezet, direct nadat ik hielp met het afronden van de laatste tickets, waarin ik wat styling moest veranderen om het perfect te laten zien , hadden we ineens genoeg tijd om de app opnieuw te maken voor Media Monks. Ze hebben een interne app, maar deze is echt verouderd, dus we zijn deze nu opnieuw aan het maken met extra functies. Dit is leuk omdat het minder druk voelt, omdat ik het niet voor een klant doe. Ik begon te werken aan de dinerpagina, waarop de arbeiders Media Monks kunnen laten weten dat ze op kantoor willen eten. Ik heb het ontwerp gemaakt, maar het moeilijkste was dat ik moest aftellen tot wanneer het diner klaar is. Omdat dit niet uit de doos kwam, had ik het moment gebruikt en door bepaalde berekeningen te maken, heb ik het uiteindelijk, na behoorlijk wat vallen en opstaan en een beetje werk om het goed te laten zien, goed gewerkt. Dat was echt gaaf, want ik zag het niet echt gedaan worden nadat ik het niet had laten werken nadat ik er een paar uur aan had gewerkt. Het enige wat ik voor die pagina hoef te doen, is het maken van een veegfunctie, waarop de gebruiker naar links kan vegen, waarin hij meldt dat hij wil eten en door naar links te vegen, om het te annuleren . Dit zou interessant moeten zijn, omdat ik niet zo goed ben in het animeren van dingen. Dit was weer een week, klaar. Benieuwd naar de volgende, ik wed dat dat net zo leuk zal zijn!

#11 - ACE - Gildan
On this week I've mostly worked on a new design for the rewards ticket. This was a pain because ACE wants lower resolution devices supported as well, so to take all devices into account from the oldest to the new newest is honestly a pain. So I made the design generally, then started to put a lot of conditions for positioning, that when there is a small screen move the element a bit more up or down or left or right from the bigger devices. And then the SE has different positions from the Galaxy Nexus, which are both low res devices, so I needed to add another util for these two. Basically just a bunch of conditions and seeing what fits with all elements. In the end I got it all positioned really nice. Besides this I got to fix a weird bug in which an element showed a white spaced border, it isn't actually a bug, there was a border around this element while there never should've been a border, but it threw us of, so that was quite a surprise. I also got two tickets back from Gildan. One ticket was just copy changes and the other was changing the endpoint. There was a new endpoint on which I need to do a GET, only the structure of the codebase is different from other projects and therefor I don't get how I should call the action in which I wrote the call. For in this project they return actions through bindActionCreaters or something, never heard of that. I'll pick this back up Monday or somewhere next week. And that was another week.

NE:

Deze week heb ik voornamelijk gewerkt aan een nieuw ontwerp voor het beloningsticket. Dit was lastig omdat ACE ook apparaten met een lagere resolutie wil ondersteunen, dus het is eerlijk gezegd lastig om met alle apparaten rekening te houden, van de oudste tot de nieuwste. Dus ik maakte het ontwerp in het algemeen en begon toen veel condities te maken voor positionering, dat wanneer er een klein scherm is, het element een beetje meer omhoog of omlaag of naar links of rechts van de grotere apparaten positioneert. En dan heeft de iPhone SE ook nog verschillende posities ten opzichte van de Galaxy Nexus, en beide apparaten zijn lage resoluties, dus ik moest nog een util toevoegen voor deze twee. Eigenlijk gewoon een heleboel condities en kijken wat bij alle elementen past. Uiteindelijk heb ik het allemaal heel mooi gepositioneerd. Daarnaast heb ik een rare bug gerepareerd waarin een element een witte, gespatieerde rand vertoonde, het is eigenlijk geen bug, er was een border rond dit element terwijl er nooit een border had moeten zijn, dus dat was nogal een verrassing. Ik heb ook twee tickets teruggekregen van Gildan. Het ene ticket was slechts kopieerwijzigingen en het andere moest ik een endpoint wijzigen. Er was een nieuwe endpoint waarop ik een GET moest doen, alleen de structuur van de codebase is anders dan bij andere projecten en daarom snap ik niet hoe ik de actie moet roepen waarin ik de oproep heb geschreven. Want in dit project retourneren ze acties via bindActionCreaters of zoiets, ik heb daar nog nooit van gehoord. Ik haal dit maandag weer op of ergens volgende week. En dat was de week alweer.

#10 - ACE - Gildan

NE:

Deze week stond vooral in het teken van ACE. Op de laatste dag kwamen er een paar nieuwe tickets voor Gildan, zoals het verwijderen van de visuele paginering, totdat de BE het aan hun kant heeft gemaakt. Tekst wijzingen en een ander ticket waar ik geen tijd voor had. Over ACE Ik heb veel onderhoudstickets verzorgd. Eén ticket was een verwijderoptie voor de zelfgemaakte producten van de gebruiker. De endpoint werd eindelijk aan de BE-kant gemaakt, dus daar kon ik deze week aan werken. Ik heb het geïmplementeerd, hoewel mijn code niet de beste was ontdekte ik in de opmerkingen van het team, ik ontdekte zelf dat het eindpunt niet correct werkte en dat het hoogstwaarschijnlijk een BE-probleem is. Het probleem is dat we bij het verwijderen van één product, geven wij de id van de gebruiker en de product-id aan de BE, maar wanneer we nog een call doen om de bijgewerkte gegevens op te halen, zijn alle producten ineens verdwenen. Dus we hebben het ticket teruggestuurd naar BE en we zullen moeten afwachten wat ze zullen zeggen. Sommige opmerkingen gingen over optimalisaties die niets te maken hadden met wat ik schreef en sommige waren iets over de code die ik schreef. Zoals het ophalen van de producten riep 2 keer na het verwijderen van een product, eenmaal in de actie en vervolgens in de verwijderfunctie, het zal wel door mijn ogen zijn geglipt. Ook heb ik de actie voor het ophalen van de producten in de actie niet dispatched en async gemaakt, dus het deed niet veel, was logisch toen hij het zei, maar het kwam niet in me op toen ik het schreef. Ook toegang krijgen tot de reducerstate van de acties is blijkbaar iets dat je kunt doen, wat ik deed was het doorgeven aan de actie via een functieparameter. En dat was het ongeveer all opmerkingen op mijn code.

Een ander ticket was dat er vermoedelijk een bug was op lagere Android-apparaten (systeemversie 7 of minder). Het punt is dat niemand het kan reproduceren, de enige aanwijzing die we hebben is dat de Firebase Crashlytics ons een native probleem laat zien, het klaagt over het SVG Gradient-probleem. En de gebruikers die dit probleem in de beoordelingen ervaren, hebben allemaal om de een of andere reden zulke goedkope Android-telefoons. Dus omdat de app veel SVG-componenten gebruikt vanwege de vorige ontwikkelaar, had ik het genoegen om de meeste SVG-componenten eruit te halen en ze te vervangen door PNG-afbeeldingen en sommige met Views. Wat ik met views maakte, was een parallellogram en maakte dit tot zijn eigen component, zodat het overal kan worden gebruikt. Dit was in het begin een hele klus, want ik had geen idee hoe ik dit moest beginnen, zocht wat dingen op internet, vond driehoeken en vierkanten en daarmee kun je ze combineren om een parallellogram te maken. Zeer interessante dingen, ik had ook het genoegen om veel condities rond bepaalde SVG-componenten te zetten, gradients en animaties zodat het niets zwaars zou laden op deze lagere apparaten. Hopelijk lost dit het probleem op. Dat was volgens mij al het werk dat ik deze week had gedaan. Op naar de volgende! Maar eerst genieten van het paasweekend.

#10 - ACE - Gildan
This week was mainly about ACE. On the last day a couple of new tickets on Gildan arose, like removing the visual pagination, until the BE has made it on their side. Copy changes and another ticket which I didn't have the time to look into. About ACE I took care of a lot of maintenance tickets. One ticket a delete option for the users self made products. The endpoint was finally made on the BE side, so I could work on that this week. I implemented it, though my code wasn't the best I found out by the comments of the team, I found out by myself that the endpoint isn't working correctly and that its most likely a BE problem. The issue is that on deleting one product, we give the id of the user and the product id to the BE, but when we do another call to retrieve the updated data, all the products are all of a sudden gone. So we returned the ticket to BE and we'll have to wait and see what they'll say. Some comments were about optimizations that had nothing to do with what I wrote and some were something on the code that I wrote. Like fetching the products twice when having deleted one, once in the action and then in the delete function, it must've slipped through my eyes. Also I didn't dispatch the action for fetching the products in the action and make it async, so it didn't do much, made sense when he said it, but it didn't cross my mind when I wrote it. Also accessing reducer state from the actions is something you can do apparently, what I did was pass it to the action through a function parameter. And that was about it on my code.

Another ticket was that there is supposedly a bug on lower end Android devices (system version 7 or less). The thing is, that nobody could reproduce it, the only clue that we have is that the Firebase Crashlytics shows us a native issue, complaining about SVG Gradient problem. And the users who experience this problem in the reviews, all have such low end Android phones for some reason. So since the app uses a lot of SVG components because of the previous developer, I had the pleasure of ripping out most of the SVG components and replace them with PNG images and some with Views. What I made with views was a parallelogram and abstracting this into its own component so that it can be used anywhere. This was quite a task at the beginning, cause I didn't quite have a clue how to begin this, searched some stuff on the internet, found triangles and squares and with that you can combine them together to make a parallelogram. Very interesting stuff, I also had the pleasure to put a lot of conditions around certain SVG components, gradients and animations that it won't load anything heavy on these lower end devices. Hopefully this will solve the issue. That was I believe all the work I had done for this week. Up to the next! But first enjoy the Easter weekend.

#9 - ACE - Gildan
At the start of this week, I figured out with Tom how to make builds for the Gildan app. For most apps, Firebase Distribution Builds are used, only for this app, they use AppCenter. So a bit of unknown territory, but we got it done. Which was interesting, I've heard of AppCenter before, but I never know how that looks like. I found out it looks a lot like the Firebase Distribution Builds, it's almost just as easy to make builds. After having done these builds, the Gildan project was done and I went back on ACE. ACE has a lot of tickets on maintenance, bugs and features. Tickets like making a card clickable in a certain state, decrease font size when a certain amount of numbers are shown, linking products in the cart back to its own product page (what made this interesting was that this app makes use of WebView and it works so backwards opposed to having everything on the app itself, so it was a bit of figuring out where I could retrieve the URL that I needed of the product, which in the end was already locally stored, and it’s really interesting to see how such project is set up like I didn’t even know it was possible to add a product in the cart of the web view and at the same time add in the cart in the app, this was really interesting.), copy changes, adding CTA button, capitalizing the first letter automatically of certain names when submitting a form and I finished off with two bugs, in the app the user can make their own products. When editing their product and saving it while they didn't change anything, it still showed a message. It shouldn't show a message, it should go back immediately. What I learned from this was how to compare the contents of an object. So you cannot do {a: a} === {a: a}, this will output false. You have to convert it to a string, like this: JSON.stringify(initialObject) === JSON.stringify(object). The other bug was that the with setting a purchase date, the user could edit the date to whenever in the future. So I converted the previous customInput with a date time picker modal. In which you have props which handle maximum date. This was interesting to set up since this was completely new for me, also they use like a weird form library which I had to invest time in to understand the works of it, Formik library, which also made it a bit harder. But in the end, got it in, ready to go on iOS, for some reason it didn't change the date on Android, so I'm gonna revisit that with Tom on Monday. And just like that another week was gone, very interesting again, getting easier as well by the week, since I'm getting more and more comfortable with the code base. I notice that I ask a lot less, which is a good thing. So up to the next week!

NE:

Begin deze week bedacht ik met Tom hoe ik builds kon maken voor de Gildan-app. Voor de meeste apps worden Firebase Distribution Builds gebruikt, alleen voor deze app gebruiken ze AppCenter. Dus een beetje onbekend terrein, maar we hebben het voor elkaar gekregen. Wat interessant was, ik heb eerder van AppCenter gehoord, maar ik wist nooit hoe dat eruit zag. Ik kwam erachter dat het veel lijkt op de Firebase Distribution Builds, het is bijna net zo gemakkelijk om builds te maken. Nadat ik deze builds had gedaan, was het Gildan-project klaar en ging ik terug op ACE. ACE heeft veel tickets voor onderhoud, bugs en features. Tickets zoals het klikbaar maken van een kaart in een bepaalde staat, verkleinen van de lettergrootte wanneer een bepaald aantal getallen wordt getoond, koppelen producten in de winkelwagen terug naar hun eigen productpagina (wat dit interessant maakte was dat deze app gebruik maakt van WebView en het werkt dus achteruit in plaats van alles op de app zelf te hebben, dus het was een beetje uitzoeken waar ik de URL kon ophalen die ik nodig had van het product, dat uiteindelijk al lokaal was opgeslagen, en het is echt interessant om te zien hoe zo'n project is opgezet, ik wist niet eens dat het mogelijk was om een product toe te voegen aan de winkelwagen van de webweergave en tegelijkertijd de winkelwagen toe te voegen in de app, dit was echt interessant.), wijzigingen kopiëren, CTA-knop toevoegen , waarbij ik de eerste letter automatisch van bepaalde namen kapitaliseerde bij het indienen van een formulier. Ik eindigde deze week met twee bugs, in de app kan de gebruiker zijn eigen producten maken. Bij het bewerken van hun product en het opslaan terwijl ze niets veranderden, toonde het nog steeds een bericht. Er mag geen bericht worden weergegeven, het moet onmiddellijk teruggaan. Wat ik hiervan heb geleerd, was hoe ik de inhoud van een object kon vergelijken. Dus je kunt {a: a} === {a: a} niet doen, dit zal false opleveren. Je moet het converteren naar een string, zoals deze: JSON.stringify (initialObject) === JSON.stringify (object). De andere bug was dat de gebruiker met het instellen van een aankoopdatum de datum naar de toekomst kon wijzigen. Dus ik heb de vorige customInput geconverteerd met een date time picker modal. Waarin je props hebt die de maximale datum afhandelen. Dit was interessant om op te zetten omdat dit voor mij volkomen nieuw was, ze gebruiken ook een rare formulier library waar ik tijd in moest investeren om uit te zoeken hoe dit werkt, de Formik-bibliotheek, die het ook een beetje moeilijker maakte. Maar uiteindelijk kreeg ik het werkend, op iOS althans, om de een of andere reden veranderde het de datum op Android niet, dus ik ga dat maandag met Tom opnieuw bekijken. En net zoals dat was er weer een week voorbij, weer heel interessant, en het werd met de week ook gemakkelijker, omdat ik me steeds meer op mijn gemak voel met de codebasis. Ik merk dat ik veel minder vraag, wat een goede zaak is. Dus tot de volgende week!

#8 - Gildan
Gildan is a new project for me in which I've been introduced to on Monday. There were like 7 tickets for me to work on, which I worked on this whole week and got them all done by the end of it! The first two tickets I worked on were quite simple, I had to add the brand of the product below the product details based on what I get back from the back end. This needed to happen on two pages, which were two separate tickets. The third ticket was pagination, this was pagination. Apparently this should be done on the back end, instead of the front end, which is how I did it. Which makes sense to do it on back end, because from there you can give small payloads to the front end, instead of the whole list which potentially could give a performance boost. But I spent a day on this, though it may have been a bit useless, it definitely a learning curve. Like I learned a bit more about scopes, I had a callback in a callback and the second callback grabbed the wrong value because it was out of the scope. That is good to know for the next time. Another ticket was that I needed to show the product sizes based on what I would get from the back end. Which was rather simple as well. Another ticket was making a legend, which included mostly styling, some abstraction of making the Legend its own component. Then there were two more tickets, one was that the carousel on the home page only showed New Adult styles, while it should display all new styles. This was rather easy since the code was already there, just had to change some names and access points to the values. The last ticket was about showing the right icons based on certain conditions. This was quite a bit more complex since the code had a lot of nested indexes and conditions. The naming wasn't perfect and it wasn't abstracted that well. So spend the last day figuring out when to show the correct icons, testing that it actually shows the correct icon under these special circumstances and just abstracting the code a bit more. That was another week successfully completed.

NE:

Gildan is een nieuw project voor mij waarin ik maandag ben voorgesteld. Er waren ongeveer 7 kaartjes waar ik aan kon werken, waar ik de hele week aan heb gewerkt en ze allemaal aan het einde hebben gedaan! De eerste twee tickets waar ik aan werkte waren vrij eenvoudig, ik moest het merk van het product onder de productdetails toevoegen op basis van wat ik van de back-end terugkrijg. Dit moest op twee pagina's gebeuren, dat waren twee afzonderlijke tickets. Het derde ticket was paginering, dit was paginering. Blijkbaar zou dit aan de achterkant moeten gebeuren, in plaats van aan de voorkant, en zo heb ik het gedaan. Wat logisch is om het op de back-end te doen, want van daaruit kun je kleine payloads aan de front-end geven, in plaats van de hele lijst die mogelijk een prestatieverbetering zou kunnen geven. Maar ik heb hier een dag aan besteed, hoewel het misschien een beetje nutteloos was, het is zeker een leercurve. Zoals ik iets meer over scopes heb geleerd, had ik een callback in een callback en de tweede callback pakte de verkeerde waarde omdat deze buiten het bereik viel. Dat is fijn om te weten voor de volgende keer. Een ander ticket was dat ik de productmaten moest laten zien op basis van wat ik van de achterkant zou krijgen. Dat was ook vrij eenvoudig. Een ander ticket was het maken van een legende, die voornamelijk styling omvatte, en een beetje abstractie om van de Legend zijn eigen component te maken. Vervolgens waren er nog twee tickets, één was dat de carrousel op de startpagina alleen nieuwe volwassen stijlen liet zien, terwijl het alle nieuwe stijlen zou moeten tonen. Dit was vrij eenvoudig omdat de code er al was, je hoefde alleen wat namen en toegangspunten naar de waarden te veranderen. Het laatste ticket ging over het tonen van de juiste pictogrammen op basis van bepaalde voorwaarden. Dit was een stuk ingewikkelder omdat de code veel geneste indexen en voorwaarden bevatte. De naamgeving was niet perfect en het was niet zo goed geabstraheerd. Besteed dus de laatste dag aan het uitzoeken wanneer de juiste pictogrammen moeten worden weergegeven, test of het onder deze speciale omstandigheden het juiste pictogram weergeeft en abstraheer gewoon de code een beetje meer. Dat was weer een succesvolle week.

#7 - NY - ACE.
This week was mainly about getting some maintenance tickets done for Ace. There was also one ticket open for NY about the date in checkout. That when you select the time from daytime to midnight, the date should automatically change to the next day. And when going back to daytime, the date should go one day back automatically. I've talked about this in week 5, only the ticket was still open because there were still some bugs. What I achieved in that week was that the date went automatically to the next day, only when you would change the time back to the daytime, the date wouldn't go back on the checkout, but on the modal that you open it did go back. Now, this was a tough issue to fix since as I said before, these are very messy components. Now, in the end, I fixed it halfway and the other half with Tom. I got it to go back to the previous day on both modal and checkout. Only when I kept on changing the time from midnight to daytime, the date on the modal and the checkout would stop being synchronous. I did this by saving the prev props of the date, that when it goes back to daytime from midnight, the prev props date which I would store separately could show. But there was another issue when you'd leave the time at midnight and then change the date, the time would stay at midnight and the day would move up in the modal, but on checkout, it would stay on the same day. And I knew the issue, I just didn't know anymore, I was getting confused by the spaghetti code. So I asked Tom to help me and he started abstracting code. So that it would be more structured, this way you would a better overview of what's actually happening. So after having done that, it got clearer, that's for sure. And then we added a setState to the date component, to set the midnight to false when changing the date from a midnight time, to then update the date which would cause into a reset of time to daytime so all would show synchronously. It got a bit complex, but in the end, it got a lot more clearer to me and it was a nice learning curve to how messy components can get and how componentDidUpdate actually works. Besides this interesting ticket, I worked on some tickets for Ace. I had to optimize the progress bar of the video because the offset was just off. Also, the swipe gesture didn't work on Android for a while, because the previous developer who added the gesture handler didn't actually update the java code to have it work on Android ... So we wasted a couple of hours on that mishap. Also, I got to add the swipeable row component to remove an item on swipe. When deleting a function is called which deletes the item from the reducer state, locally. So I learned to work a bit with the data structure of Redux, which was very interesting, cause if I compare it with my project, this is really nice and elegantly structured. Besides this ticket, there were some smaller tickets, like making some icons clickable, moving up the barcode on low res phones only, have the video stop playing when navigating to other pages. That was another week over. I learned a lot once again, got a lot done as well. So up to the next week!

#6 - ACE - NY.
This week was a lot about animations, getting to know the library Reanimated more. Which for me, it wasn't a great success, but just because I needed it to work with the library react-native-video. The issue was that the onProgress props from the component, couldn't for some reason be saved in our Value node of Reanimated. I understand the principle and how it works, I just haven't been able to make it because of issues with the lib. So I made it in React-Native Animated, which was a success. What needed to be realized was a custom progression bar in which you can swipe to a different position in the video. Again I learned a lot, how animations work and most of all the events, that you have nativeEvents in which user swipes positions are being stored. Really cool. Then Thursday, we got to hear that because of the Corona outbreak, the whole Media Monks building is being locked down, so we all have to work from home until further notice. So Thursday we got me a MacBook and phone and prepared these for me so I could work from home. Which I did Friday. We started with a digital standup in which we discussed what we were gonna do for the day and this went quite alright. I got some issues starting up the app, but after I asked Tom, he helped me out. Also, the quick responses of Robert, like I can't say it enough, every time I'm stuck or don't understand something, they are willing to help me and explain to me in depth how things work. Awesome people. What I found out though, is that I preferably work at the building though, just in person. I feel like it's easier to ask then, maybe because I know I will get an answer immediately or that I can see whether they are busy or not, but either way, it went alright I would say. I got a lot of my work done and I did my thing, asked at times where I would get stuck and then the end of the day was there. Very interesting week once again. Especially now I really come to understand the whole structure of the app and a lot of the things that I learn I implement in an app that I make for someone at the church. So most of the things that I learn I practice at home as well most of the time and I really enjoy it. Up to the next work week!

NE


Deze week stond veel in het teken van animaties, kennismaken met de bibliotheek Reanimated. Wat voor mij geen groot succes was, omdat ik het moest laten werken met de bibliotheek react-native-video. Het probleem was dat de onProgress props van de component om de een of andere reden niet kond worden opgeslagen in ons Value-node van Reanimated. Ik begrijp het principe en hoe het werkt, ik heb het gewoon niet kunnen halen vanwege problemen met de lib. Dus ik maakte het in React-Native Animated, wat wel een succes was. Wat gerealiseerd moest worden, was een aangepaste voortgangsbalk waarin je naar een andere positie in de video kunt vegen. Opnieuw heb ik veel geleerd, hoe animaties werken en vooral events, dat je nativeEvents hebt waarin posities van gebruikers swipes worden opgeslagen. Echt heel interessant. Donderdag kregen we te horen dat vanwege de Corona-uitbraak het hele Media Monks-gebouw zou worden afgesloten, dus we moeten allemaal tot nader order vanuit huis werken. Dus donderdag hebben we een MacBook en telefoon voor me geregeld en deze voor me voorbereid, zodat ik thuis kon werken. Vrijdag zijn we begonnen met een digitale stand-up waarin we bespraken wat we die dag gingen doen en dit ging goed. Ik kreeg wat problemen bij het opstarten van de app, maar nadat ik het aan Tom had gevraagd, hielp hij me. Ook de snelle reacties van Robert, ik kan het niet vaak genoeg zeggen, elke keer dat ik vastzit of iets niet begrijp, zijn ze bereid om me te helpen en me diepgaand uit te leggen hoe de dingen werken. Fantastische mensen. Wat ik echter ontdekte, is dat ik bij voorkeur in het gebouw werk, het is wat persoonlijker. Ik heb het gevoel dat het dan gemakkelijker te vragen is, misschien omdat ik weet dat ik onmiddellijk een antwoord zal krijgen of dat Ik kan zien of ze het druk hebben of niet, maar overal ging het goed vandaag. Ik heb veel van mijn werk gedaan en ik deed mijn ding, vroeg soms wat dingen als ik vast kwam te zitten en toen was het einde van de dag er alweer. Nogmaals een zeer interessante week. Vooral nu ik de hele structuur van de app echt begin te begrijpen en veel van de dingen die ik leer, implementeer ik in een app die ik voor iemand in de kerk maak. Dus de meeste dingen die ik leer, oefen ik meestal ook thuis en ik geniet er echt van. Op naar de volgende werkweek!

#5 - GH - NY.
For Google Home I had to make this carousel in this new library Reanimated in which we all have no experience. The reason we want to use this library is because it is handled natively and not on the JS thread, which is a major performance boost, especially on large animations, which this app is full of. Only since I was struggling with it and they too, we decided to postpone this and make this in the React-Native Animated for now, and then later on convert into Reanimated. Though, this was the initial idea, we cheated it a bit by using a Scrollview instead of a custom Animated component, since this was just taking too much time at the moment to figure out. And tracking on which photo the user is, is done with Reanimated, so still a bit of Reanimated was used after all for now. After this, I got a ticket back from New York Pizza on which I needed feedback before I could go on, it was about the day showing the previous day, instead of the next day on the time transition of evening to midnight. This was hacky to fix since the component which handles the time and date is one component which is used with it's own state. So to let the component know when it is the date or time and also have a check in place of when it's midnight to do things separately for time and date, ughh it was a bit of mess, as they acknowledged as well that there should be two components, for each one. Anyhow, I got it fixed with some spaghetti code, which was fine because the release would come out soon, so there was no time to refactor it to some nice well structured code. And then it was already weekend, on the Friday I wasn't there, because I had to go to a matching day of the HBO education in Leiden. And like that another week is wrapped up.

NE: Voor Google Home moest ik deze carrousel maken in deze nieuwe bibliotheek Reanimated waarin we allemaal geen ervaring hebben. De reden dat we deze bibliotheek willen gebruiken, is omdat deze native wordt behandeld en niet op de JS-thread, wat een belangrijke prestatieverbetering is, vooral bij grote animaties, waar deze app vol mee is. Alleen omdat ik ermee worstelde en ook zij, hebben we besloten dit uit te stellen en dit voorlopig in de React-Native Animated te maken en later in Reanimated te converteren. Hoewel dit het eerste idee was, hebben we het een beetje gecheat door een Scrollview te gebruiken in plaats van een aangepaste geanimeerde component, omdat dit op dit moment gewoon te veel tijd kostte om erachter te komen. En het bijhouden van bij welke foto de gebruiker is, wordt gedaan met Reanimated, dus vooralsnog word er een beetje Reanimated gebruikt. Hierna kreeg ik een ticket terug van New York Pizza, waarop ik feedback nodig had voordat ik ermee verder kon gaan, het ging over dat de dag met de vorige dag werd laten zien in plaats van de volgende dag wanneer de overgang van de avond naar middernacht wordt gemaakt om te leveren. Dit was moeilijk te repareren, omdat het component dat de tijd en datum verwerkt wordt, een component is dat wordt gebruikt met zijn eigen state. Dus om het onderdeel te laten weten wanneer het de datum of tijd is en ook een check te hebben van wanneer het middernacht is om dingen apart te doen voor tijd en datum, het was een beetje een puinhoop, wat ze ook erkenden dat er twee componenten voor elk moesten zijn. Hoe dan ook, ik heb het opgelost met wat spaghetti-code, wat prima was omdat de release snel uit zou komen, dus er was geen tijd om het te veranderen in een mooie, goed gestructureerde code. En toen was het al weekend, op de vrijdag was ik er niet, omdat ik naar een 'matchmaking' dag van het HBO-onderwijs in Leiden moest gaan. En zo was er weer een week voorbij.

#4 - Wrapping up NYP, start GH.
New York Pizza would get its new release today. So this week was all about getting it bullet proof for the release, fixing some bugs which after some research you find out it is a back-end problem, which is out of our hands. This went on up to Wednesday, when all the tickets were as good as finished and the app thoroughly tested, I got my first assignment for the new project of Google Home. The assignment was basically making a page completely like the design. And what makes this app really cool are the animations, the animations are over the moon! And then the week was over, learned a lot about best practices and how the code works through some complex components and the basic structure itself. NE: New York Pizza zou vandaag zijn nieuwe release krijgen. Dus deze week stond helemaal in het teken van kogelvrij maken voor de release, het repareren van enkele bugs waarvan je na enig onderzoek ontdekt dat het een back-end probleem is, waar wij geen beheer in hebben. Dit ging door tot woensdag, toen alle tickets zo goed als klaar waren en de app grondig getest was, kreeg ik mijn eerste opdracht voor het nieuwe project van Google Home. De opdracht was eigenlijk om een ​​pagina helemaal naar het ontwerp te maken. En wat deze app echt cool maakt, zijn de animaties, de animaties zijn in de wolken! En toen was de week alweer voorbij, ik heb weer eens veel geleerd over onder andere best practices en hoe de code werkt bij enkele complexe componenten en de basisstructuur zelf.

#3 - Shimmer and tickets, NYP.
This is third week and this has been very interesting as well. I finished the shimmer animation on the first two days. I had it first just implemented separately in one component, when I got the animation and the gradient right, I made it dynamic. I put the shimmer in it's own component and like that I could place it everywhere where it needs to be initiated. Though I had a bit of trouble at startup of the app with this animation, because it didn't want to start smoothly. And I asked, but the guys didn't know it either so eventually my colleague asked, do you use the useNativeDriver. My first thought was, yes, of course. That's the most important thing of an animation I recently read. But he said, well, let's check to be sure. And well well, I forgot to implement it, I assumed I had done, but I had not. Couple of hours well spent haha. But the animation works real smooth now, fixed some comments on this code in the following days and comments on other tickets as well. The rest of the week I mostly fixed small issues, like text changes and small bug fixes. The animation was the biggest thing and it's really cool that I actually made that from scratch. I believe the next release of NYP will come out next week or so and I have a lot of small tickets to get through, which I don't mind, because I get all the more familiar on the whereabouts of things in the app. Really interesting week, I learn a lot by the comments on my code and I can't wait what big things are ahead of me. NE: Dit is de derde week en dit was ook erg interessant. Ik was klaar met de shimmer-animatie binnen de eerste twee dagen. Ik had het eerst in in één component geïmplementeerd afzonderlijk, toen ik de animatie en het verloop goed kreeg, maakte ik het dynamisch. Ik stopte de animatie in zijn eigen component en zo kon ik hem overal plaatsen waar hij moest worden geïnitieerd. Ik had wel een beetje problemen had bij het opstarten van de app met deze animatie, omdat deze niet soepel wilde beginnen. En ik vroeg hoe ik het moest oplossen, maar de jongens wisten het ook niet, dus uiteindelijk vroeg mijn collega, gebruik je de useNativeDriver. Mijn eerste gedachte was, ja, natuurlijk. Dat is het belangrijkste van een animatie had ik onlangs gelezen. Maar hij zei, wel, laten we het controleren voor de zekerheid. En natuurlijk, ik vergat het te implementeren, ik nam aan dat ik het had gedaan, maar dat had ik niet gedaan. Een paar uur goed besteed haha. Maar de animatie werkt nu erg soepel, corrigeerde enkele opmerkingen over deze code in de volgende dagen en opmerkingen over andere tickets. De rest van de week heb ik vooral kleine problemen opgelost, zoals tekstwijzigingen en kleine bugfixes. De animatie was het grootste en het is echt gaaf dat ik dat helemaal vanaf het begin heb gemaakt. Ik geloof dat de volgende release van NYP volgende week uitkomt of zo en ik heb veel kleine tickets om door te komen, wat ik niet erg vind, omdat ik des te bekender wordt over de plekken van dingen in de app. Echt een interessante week weer, ik leer veel van de reacties op mijn code en ik kan niet wachten welke grote dingen voor me liggen.

#2 - Tickets and animations, NYP.
In this week I worked on quite some tickets. Tickets are basically all the features and bugs that need to be handled. One ticket was that the number of products didn't match the items in the cart on checkout. Which is critical, but eventually rather simply fixed. How it initially was counted was through .length on the array with all the products. But each element/item has an amount, which wasn't being counted with the .length and therefore you get a wrong number. I fixed it by using the reduce helper, which iterates over the array and returns an integer, in this .reduce I counted the amount on top of the initial value which is 0 by default. Another ticket was to have the ability to choose your discount in the cart. Whether you want discount with Coupon or VIPCard number. So when you click on a button, it opens up a modal which shows two menu items. One which shows the coupon form and the other which shows the VIPCard number form. And if you've an active coupon, the form should replace itself with the list of active coupons and below that have a button for an option to activate more coupons. Same goes for the VIPCard number, only there you won't have the ability to choose another VIPCard number. This was an interesting ticket in which I learned a lot, like nested ternaries, redux selectors a bit, hooks, functional components, good use of lifecycle for performance and just the code structure overall. This was as good as finished at the end of the day of Thursday, on which they assigned me an animation assignment for Friday, for me to make a shimmer animation for the skeleton. And animations is totally new for me, so that should be fun. This is also which I spent all my Friday afternoon on. On the morning of Friday my colleague went through my code of the coupon and VIPCard code and told me where code could be more optimized, which is was interesting and good to know. So I changed this and then the week was over. Again a very productive and interesting week. NE: In deze week heb ik aan nogal wat tickets gewerkt. Tickets zijn eigenlijk alle functies en bugs die moeten worden afgehandeld. Eén ticket was dat het aantal producten niet overeenkwamen met de items in de winkelwagen bij het afrekenen. Dat is cruciaal, maar uiteindelijk tamelijk eenvoudig opgelost. Hoe het aanvankelijk werd geteld was door .lengte op de array met alle producten. Maar elk element / item heeft een hoeveelheid, die niet werd geteld met de .lengte en daarom krijg je een verkeerd nummer. Ik repareerde het met behulp van de reductie-helper, die over de array itereert en een geheel getal retourneert, in deze .reduce telde ik het bedrag bovenop de initiële waarde die standaard 0 is. Een ander ticket was om je korting in de winkelwagen te kunnen kiezen. Of je nu korting met coupon of VIPCard-nummer wilt. Dus wanneer je op een knop klikt, wordt een modaal geopend met twee menu-items. Een die het couponformulier toont en de andere die het VIPCard-nummer toont. En als je een actieve kortingsbon hebt, moet het formulier zichzelf vervangen met de lijst met actieve kortingsbonnen en daaronder een knop voor een optie om meer kortingsbonnen te activeren. Hetzelfde geldt voor het VIPCard-nummer, alleen daar kun je geen ander VIPCard-nummer kiezen. Dit was een interessant ticket waarin ik veel heb geleerd, zoals nested ternaries, een beetje redux-selectors, hooks, functionele componenten, goed gebruik van de levenscyclus voor performance en de codestructuur in het algemeen. Dit was zo goed als klaar aan het einde van de dag van donderdag, waarop ze me een animatie opdracht gaven voor vrijdag, voor mij om een shimmer animatie voor het skeleton te maken. En animaties zijn helemaal nieuw voor mij, dus dat zou leuk moeten zijn. Dit is ook waar ik mijn hele vrijdagmiddag aan heb besteed. Op de ochtend van vrijdag nam mijn collega mijn code van de coupon en VIPCard-code door en vertelde me waar de code beter kon worden geoptimaliseerd, wat interessant en goed was om te weten. Dus ik veranderde dit en toen was de week voorbij. Wederom een ​​zeer productieve en interessante week.

#1 - Start up, NYP.
On monday I got to meet all my colleagues and helped my teamleader set me up on the iMac. My team exist out of 4 people, me included. One of them works a lot on another project so I don't see him a lot. One is an English man and the other is Irish. In the room where I work there are two other teams besides our team of React-Native, like Android and IOS. Half of them are Dutch, 3 Russians, one is from Greece and the others I don't know. The whole Monday was about installing the software and logging into the right websites in order for me to get to work. On Tuesday I got the time to spit into the code of the project I worked on this week, the app of New York Pizza. I got some minor assignments on Tuesday and Wednesday in order for me to get to know the structure of the project. Assignments like changing some text and some styling. On Thursday and Friday I got two bigger assignments. One of these two is the option to delete pizza slices on the double tasty and four tasty pages. The other one is showing more details in the cart where the order items display. I ask a lot, it's way harder than I initially thought it would be. Morely because of the insanely complex structure of the project and code, atleast in comparison to what I'm used to it's insanely complex. But I've learned a lot already, also like working on a iMac for the first time. So it has been a very productive and interesting first week. NE: Maandag ontmoette ik al mijn collega's en hielp mijn teamleider me met het opzetten van de iMac. Mijn team bestaat uit 4 personen, inclusief mijzelf. Een van hen werkt veel aan een ander project, dus ik zie hem niet veel. De ene is een Engelse man en de andere is Iers. In de kamer waar ik werk zijn er naast ons team van React-Native twee andere teams, zoals Android en IOS. De helft is Nederlands, 3 Russen, de ene komt uit Griekenland en de andere weet ik niet. De hele maandag ging over het installeren van de software en het inloggen op de juiste websites zodat ik aan het werk kon. Op dinsdag kreeg ik de tijd om in de code van het project te doorkijken waaraan ik deze week werkte, de app van New York Pizza. Ik kreeg een aantal kleine opdrachten op dinsdag en woensdag om de structuur van het project te leren kennen. Opdrachten zoals het wijzigen van wat tekst en wat styling. Op donderdag en vrijdag kreeg ik twee grotere opdrachten. Een van deze twee is de optie om pizza punten op de double tasty en four tasty pagina's te verwijderen. De andere toont meer details in de winkelwagen waar de orderitems worden weergegeven. Ik vraag veel, het is veel moeilijker dan ik in eerste instantie dacht dat het zou zijn. Merendeels wegens de waanzinnig complexe structuur van het project en de code, ten minste in vergelijking met wat ik gewend ben, is het waanzinnig complex. Maar ik heb al veel geleerd, ook graag voor het eerst aan een iMac werken. Het was dus een zeer productieve en interessante eerste week.

Blog about my internship
This will be the blog about my internship, where I will post my progress within this company. This is a simple blog just for the purpose of the designated assignment.