100 Days of Code

Round 2 - Started 11 Aug, 2019

Goals


Day 1: Kambr Media

Worked on Kambr Media today. I played around with components and passing an object in as a prop, which wasn’t that difficult. It was just figuring out when to use : and when not to. Also how to use the props. So the structure for iterating through custom components is: v-for="item in items" :key="item.id" :item="item".

The key must be a primitive type.

Then I also played around with custom filters in Vue, which is super cool. I couldn’t quite get it to work though, so I’ll look into that some more tomorrow.

Day 2: Kambr Media

Had another productive morning working on Kambr media. It was mostly dealing with CSS and trying to get things to align, so I didn’t learn as much Vue.js.

Day 3: Kambr Media

Mostly dealing with CSS today, but also learning about bootstrap breakpoints and SASS mixins. Such a brave new world.

SASS mixin reference

Example

@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}

.header-title {  
   font-size: 2rem;  
 
   @include for-phone-only {    
      font-size: 1rem; 
   }
}

Translates to:

@media (max-width: 599px) {
   font-size: 1rem;
}

Bootstrap grid reference

Day 4: Kambr Media

Managed to make the components fully responsive today. Bootstrap was a great help and I figured out how to import SCSS mixins. That helped quite a bit with the media queries. Plus it cleans up the code much more.

These were the imports:

  @import "bootstrap/scss/_functions.scss";
  @import "~bootstrap/scss/_variables.scss";
  @import "~bootstrap/scss/mixins/_breakpoints.scss";

Day 5: Kambr Media

Played around with the bootstrap carousel but I couldn’t get it to cooperate.

Day 6: Kambr Media

Continued wrestling with the carousel today. Gave up on the bootstrap carousel and tried out Slick.js carousel which didn’t really work either. I managed to fix the SSR issues with Nuxt, but now I’m having issues with css instead.

Day 7: Kambr Media

Continuing on with the carousels. Also managed to connect the recent stories section with prismic which was pretty cool. Managed to get the slick carousel to work, turns out adding all css files to the project helped.

Also finished up the draft of the video section of the front page. It still needs a bit of love but that’ll be tomorrow.

Day 8: Kambr Media

Started working on setting up pages, which is super cool since I can knock out multiple pages at once once I have the basic layout done. Which I managed to do. Also looked into GraphQL and next up is implementing the prismic calls in GraphQL.

Day 9: Kambr Media

Worked with the prismic GraphQL API today and tried to get that set up. Pretty cool stuff, just need to figure out how to query it correctly.

Day 10: Kambr Media

Worked with the prismic API some more and managed to extract the content for the static pages.

Turns out you can’t call asyncData inside compontents that are not pages in nuxt.

Day 11: Kambr Media

More Kambr Media today. Made the contact form and played around with routing.

A co-worker of mine taught me some tricks. In nuxt you can use to instead of href and it won’t reload the page when you click a link. It makes it look super flawless.

Also figured out that command + D lets you create multiple cursors in places that match you current selection. VS Code is pretty cool.

Day 12: Kambr Media

Managed to refactor the jumbotron component today. Also got the top stories connected to prismic, so that almost works too. Just need to add a link, but maybe I have time for that later.

Also learned that option + command + up/down creates multiple cursors in VS Code. So I’m slowly becoming more efficient. More VS Code shortcuts:

Hold down option and press up/down to move elements up or down.

Hold down option + shift and press up/down to duplicate a row above or below.

Press command + shift + P to go to user preferences. type in wrap and pick wrap with abbrieviations to wrap html elements in another html element.

command + P will let you navigate to any page you type in

Go me!

Day 13: Kambr Media

Nuxt links today. Super cool. It’s basically a wrapper for an anchor tag. Also very important, /path will give you the absolute path and path will give you the relative path. This I already knew, but apparently not well enough to figure it out on the first try… :’)

Day 14: Kambr Media

Tried to program without internet. Did not work out.. But I read about API’s instead and made notes for my next blog post.

Day 15: Kambr Media

Worked on the footer for Kambr Media. Plus learned that you can create multiple selections by holding down option while selecting.

Day 16: Kambr Media

More bootstrap playing around. CSS is starting to become a bit annoying, but I think I have the main design for desktop down, so tomorrow I’ll do the responsive ones, which hopefully shouldn’t take to long.

Day 17: Kambr Media

Made the footer responsive so that’s all done now. I also started looking into how to tackle the pagination, which I can make plenty complicated if I want to.

Day 18: Kambr Media

Worked with bootstrap pagination today. Also experimented with the transition component in Vue, but it doesn’t work correctly in nuxt :/

Day 19: Kambr Media

Managed to get pagination to work with navigation today. Super happy with that. You have to use watchQuery in nuxt and tie the page number generated by bootstrap to the url. Which bootstrap will also do for you. Very cool and magical. Plus I got it to work way faster than expected.

Day 20: Kambr Media

Set up downloading files and fixed getting some content from Prismic.

Day 21: Kambr Media

Spent most of my time looking at github actions and trying to see how I can use those for SmartPack. Also finished up my API blog post.

Day 22: SmartPack

Opened SmartPack back up and started to figure out how I’m going to deploy it on Google Cloud. Also sorted out some messed up git stuff. Still need to thoughly test it. But first priority is getting it deployed.

Day 23: SmartPack

Played around with SmartPack some more. There were some issues with git and I had to go back and fix stuff for the second time, but that’s done now, so now I can focus on deploying the thing to Google Cloud.

Day 24: SmartPack

Looked into Gunicorn to serve my flask application. Also set up kubernetes configuration so I can manage my work stuff and my side project stuff. You switch between configurations like this: gcloud config configurations activate <config-name>

Day 25: SmartPack

Managed to deploy smartpack on google cloud platform today :D Super cool! Now I just have a few kinks to sort out.

I can get the external IP bu running kubectl get service.

And I can update the container image by running: docker build -t gcr.io/smartpack/smartpack:v<X> .

docker push gcr.io/smartpack/smartpack:v<X>

kubectl set image deployment/smartpack-web smarpack=gcr.io/smartpack/smartpack:v<X>

Day 26: SmartPack

More SmartPack today, managed to fix some issues on the site. I still have some fixes to make, but the raw javascript and html is making it really difficult when I know what I could have done with Vue. I don’t want to refactor again though. So I’ll stick with what I have for now and work on a refactor later when it’s up and running.

Day 27: SmartPack

More fixes on SmartPack and updating the container image on docker.

This is done like so:

docker build -t gcr.io/smartpack/smartpack:vX. docker push gcr.io/smartpack/smartpack:vX kubectl config use-context smartpack kubectl set image deployment/smartpack-web smartpack=gcr.io/smartpack/smartpack:vX

Day 28: Davosa USA, API blog

Fixed some old code on Davosa USA and started setting up Ktor for my API blog post. Ktor looks super nice and I can’t wait to work more on it.

Day 29: Smartpack

Messed around with wkhtmltopdf today with rendering images. Turns out you need to add file:/// in front of all files to get the path to render correctly

Day 30: API Design

Implementing datastubs and repository functionality for my API repo, so that’s mostly set up now.

Day 31: Kambr Media

Tried to get nuxt routing to work, but TypeScript is being annoying. Maybe some other time.

I got it! Using an achor tag and setting the scrollBehaviour in nuxt.config worked.

<a id="anchor" href="#anchor">

and in nuxt.config

  router: {
    scrollBehavior(to, from, savedPosition) {
      if (to.hash) {
        return {
          selector: to.hash
        };
      }
    }
  }

Day 32: Kambr Media

Worked on my API in the morning. Kambr Media in the evening. Turns out Safari can’t parse UTC formatted date strings… Oh well, it should be fixed now. At least I hope so!

Day 33: SmartPack

Looked into persistent volumes on Kubernetes today. It was a bit of a slow day, so I didn’t do much more than that.

Day 34: Kambr Media

Created a related stories section on Kambr Media and used the .similar predicate from Prismic.

Day 35: API Design repo

Managed to finish up my API for my blog post series today. It wasn’t pretty and there’s a bunch of stuff I would have liked to include, but I hadn’t given myself enough time to work on it. Still, it got done so go me. Next one will be better.

Day 36: Smartpack

Added breadcrumbs to Smartpack and looked into how to create a persistent volume in kubernetes.

https://kubernetes.io/docs/tasks/configure-pod-container/configure-persistent-volume-storage/

Day 37: Smartpack

More Kubernetes today, trying to figure out how to do the Volume stuff so it’s persisted. I’m selving it for now though. There are more pressing issues.

Day 38: API design

Reading about authentication in Ktor today in preparation for my blog post next week.

Day 39: API design

Implemented data validation in my Ktor API.

Day 40: SmartPack

It’s been a bit of a low effort the past two days. I managed to fix some errors on smartpack, I just need to deploy them. And that’s about it really.

Day 41: Api design and smartpack

Read up about api security and JWT tokens. Also implemented authentication with jwt tokens in my todo API.

Then I fixed some stuff in Smartpack.

Day 42: Api design

Reading about authentication and prepping for blog post

Day 43: SmartPack

Looking into SendGrid to send emails and print.js to print a pdf on click and then how to play sound in from a web page.

Turns out playing a sound is easy. Finding the right sound is not.

Day 44: SmartPack

Worked on SmartPack fixes, implemented an alert and allowed the user to print the pdf from the completion window.

Day 45: SmartPack and HexagonKt

Did some minor fixes on UltraSmartPack in the morning and started implementing my solution for the Todo backend of HexagonKt. It super cool and so clean.

Day 46: HexagonKt

Played around with Responses and request as will as setting up the endpoints

Day 47: HexagonKt

Worked on getting hexagon to do backend to work and managed to pass the tests. Now I just need to clean it up a bit and deploy it with travis.ci

Day 48: USP

Just some basic HTML, CSS and javascript today. Plus some bootstrap classes thrown in.

Day 49: USP

Set up hexagon and tried to figure out how to tackle the task for hacktoberfest.

Day 50: Hexagon

Implemented the mapper today and the insert methods

Day 51: USP

Added a note field and changed the complete request into a POST request, so now all I need is the HTML.

Day 52: Pack-Wise

Implementing notes and making some general adjustments. Also spent some time making my Hexagon issue pass the tests.

Day 53: Pack-Wise

Worked on both Pack-Wise and on Hexagon today. Managed to fix the shopify issue with the many requests. Didn’t manage to create a PR for Hexagon though.

Day 54: Pack-Wise

Set up the sub domain for pack-wise. It was pretty simple, all I had to do was add an A record to the DNS on GoDaddy with the sub domain I wanted. Also fixed the timezone issue.

Day 55: Hexagon

Read up on pagination for the next blog post. Also finished up my PR for HexagonKt. It’s pretty cool.

Day 56: Pack-wise

Messing around with setting up a Vue project. Such a pain to get ESLint and Prettier to collaborate.

Day 57: Pack-wise

Managed to get my project set up by getting rid of prettier and installing the Airbnb standard instead. It took forever though. The trick was to turn off the prettier plugin.

Day 58:

Watched a Domain Driven Design Talk. Also looked into FTP

Day 59:

Worked on Kambr Media and brushed up on my Vue skills.

Day 60:

Finished my hacktoberfest PR of improving the test coverage.

Day 61:

Worked on Kambr Media and brushed up on my Vue skills.

Day 62:

Worked on Kambr Media and brushed up on my Vue skills.

Day 63: SmartPack

Set up Sweet Alerts for wrong input and played the sound on repeat.

Day 64: USP

Worked on getting the PDF HTML template to work with jinja today.

Day 65: Hexagon

Added some more functionality. I’m feeling a bit out of my league with the reflection and stuff, but it’s still super cool.

Day 66: Kambr Media

Worked on Kambr Media refactored a service so it’s cleaner and then I created a 404 page by adding an error.vue in the layouts folder.

Day 67: Pack Wise

Started setting up the Vue js project and wrote the type interfaces.

Day 68: Pack Wise

Made some changes to the current pack-wise code and started setting up for a quick fix on the settings, so I don’t have to spend so much time on it.

Day 69: Davosa-usa

Looked into some youtube video loading issues on davosa for the mobile version. Not looking forward to fixing this one.

Day 70: Pack-wise

Migrated database to new structure and started refactoring the code

Day 71: Pack-wise

Set up sqlite connections and connect one of them to the settings