Merge pull request #18 from codersforcauses/feature/add-old-articles

Feature/add old articles

Author: thaingu

assets/content/confidence-vs-competence.jpg

@@ -0,0 +1,19 @@
+---
+title: About Coders for Causes and Blog
+description: About us
+updatedAt: December 30, 2018
+img: https://og-social-cards.vercel.app/**.%2Fcoders_for_causes**.png?theme=dark&md=1&fontSize=125px&images=https%3A%2F%2Fcodersforcauses.org%2Flogo%2Fcfc_logo_white_full.svg
+tags:
+  - about-us
+alt: About
+author:
+  name: David Yu
+  bio: I love to code
+  img: /_nuxt/assets/content/davidthrone.jpg
+---
+
+This blog was started by [David](https://github.com/noobling) which mainly discusses software and tips for student/professional developers. Content would revolve around what I am working on. Writing helps me learn. Underneath the hood this blog is built using Nuxt/Vue.
+
+If you found any mistake or want to make an addition please create a new issue [here](https://github.com/codersforcauses/blog-guides/issues)
+
+If you want to help develop this app further please read [this](https://github.com/codersforcauses/blog-guides/blob/master/README.md)

assets/content/davidthrone.jpg

@@ -0,0 +1,79 @@
+---
+title: Best Practices for Express Apps
+description: Best practices in production Express apps
+updatedAt: December 30, 2018
+img: https://images.unsplash.com/photo-1549605659-32d82da3a059?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=60
+tags:
+  - express
+  - best-practices
+alt: Best Practices Production Express Apps
+author:
+  name: David Yu
+  bio: I love to code
+  img: /_nuxt/assets/content/davidthrone.jpg
+---
+
+## Process managers
+
+- Automatically restart app
+- Performance metrics
+- Modify settings dynamically to improve performance
+- Control clustering
+
+### Examples
+
+#### Forever
+
+Simple cli to that runs a script continuously forever. Good for small apps.
+
+#### PM2
+
+Production process manager that has a built in load balancer. Allows applications to be up forever with no downtime
+
+#### Strong Loop Process Manager
+
+- Build, package and deploy your Node.js app to local or remote system
+- View CPU profiles and heap snapshots to optimize performance and diagnose memory leaks
+- Keep processes and clusters alive forever
+- Unify multiple StrongLoop PMs to a distributed mircoservices runtime that is managed from Arc
+
+### Security Best Practices
+
+- Don't use a deprecated or vulnerable versions of Express and Node
+- Use TLS
+- Use Helmet
+- Use cookies securely
+- Ensure dependencies are secure
+- Avoid other known vulnerabilities
+
+#### TLS
+
+Encrypts data before it is sent from the client to the server. Preventing some common and easy hacks. TLS is the next progression of SSL
+
+#### Use Helmet
+
+Prevents some well known web vulnerabilities by setting HTTP headers appropriately
+
+#### Use cookies securely
+
+- Don't use in memory storage in production
+- Don't use default session cookie name
+  - `app.use(session({name: 'notdefaultsessionidname'})`
+  - Helps prevent attacks from discovering what framework is used
+- Set cookie security options
+  - `app.use(session({name: 'session', cookie: { secure: true, httpOnly: true, domain: 'example.com', path: 'foo/bar', expires: expiryDate})`
+
+#### Ensure your dependencies are secure
+
+- Use snyk to check for vulnerabilities in your app
+
+### Performance and reliability
+
+- Use gzip compression
+- Don't use synchronous functions like console.log
+- Handle exceptions properly
+  - Node app crashes from uncaught exception
+  - use try-catch and promises
+  - next() function propagates errors through the middleware chain
+- Set node env to production
+- Ensure app auto restarts on failure, if all exceptions properly handled the app should not crash however as a fail safe this should be added.

assets/content/docs-content.png

@@ -0,0 +1,21 @@
+---
+title: Join the Next Billion Dollar Startup
+description: Startup Canva pops off
+updatedAt: December 30, 2018
+img: https://images.unsplash.com/reserve/LJIZlzHgQ7WPSh5KVTCB_Typewriter.jpg?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60
+alt: Billion Dollar Startup
+tags:
+  - startups
+author:
+  name: David Yu
+  bio: I love to code
+  img: /_nuxt/assets/content/davidthrone.jpg
+---
+
+Tech companies are constantly being acquired for hundreds of millions even billions of dollars. Take for example the this recent acquisition by Amazon http://www.businessinsider.com/why-amazon-acquired-ring-2018-3/?r=AU&IR=T or our very own Australian company Canva https://techcrunch.com/2018/01/08/new-sequoia-china-investment-values-australian-design-company-canva-at-1-billion/
+
+There are new sites popping up to connect talented people with these start ups take a look at these sites
+
+https://angel.co and https://triplebyte.com
+
+https://triplebyte.com

assets/content/graphql-companies.png

@@ -0,0 +1,34 @@
+---
+title: Break Down of Current Programming Landscape
+description: Current programming landscape as of 2018
+updatedAt: December 30, 2018
+img: https://images.unsplash.com/reserve/LJIZlzHgQ7WPSh5KVTCB_Typewriter.jpg?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60
+alt: Programming Landscape
+tags:
+  - 2018
+  - programming-landscape
+author:
+  name: David Yu
+  bio: I love to code
+  img: /_nuxt/assets/content/davidthrone.jpg
+---
+
+The much anticipated annual SO survey has just dropped here is the link to the entire results https://insights.stackoverflow.com/survey/2018/
+
+Here are the key takeaways:
+
+- Data scientists and Dev Ops are the highest paid
+- Most popular development environment Visual Studio Code
+- Web development industry is the biggest employer of developers
+- 81.1% of programmers are either happy or fine with their job
+- Developers value compensation and benefits the most when searching for a job
+- Most wanted programming language is python
+- 80.8% of programmers have side projects outside of work/uni
+- 93% of programmers are males
+- Most programmers spend 9-12 hours a day on computers
+- Most loved programming language is python
+- Most popular framework is node js
+- Most popular OS is linux
+- Most loved framework is TensorFlow
+
+Note information from voluntary surveys are subject to response bias (and other biases) where a certain group of individuals are more likely to take the survey hence skewing the results for example individuals who feel they are paid well tend to respond to the survey skewing the results for salary.

assets/content/mosaic-main.png

@@ -0,0 +1,18 @@
+---
+title: Break Down of a Database URL
+description: Break down of mysql database url
+updatedAt: December 30, 2018
+img: https://images.unsplash.com/photo-1489875347897-49f64b51c1f8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60
+alt: SQL Database URL
+tags:
+  - sql
+  - database-url
+author:
+  name: David Yu
+  bio: I love to code
+  img: /_nuxt/assets/content/davidthrone.jpg
+---
+
+```c
+mysql://USER:PASS@HOST:PORT/DATABASENAME
+```

assets/content/nav-yaml.png

@@ -0,0 +1,51 @@
+---
+title: CFC Project Learnings
+description: CFC project learnings for 2019
+updatedAt: August 25, 2019
+img: https://og-social-cards.vercel.app/**.%2Fcoders_for_causes**.png?theme=dark&md=1&fontSize=125px&images=https%3A%2F%2Fcodersforcauses.org%2Flogo%2Fcfc_logo_white_full.svg
+alt: CFC Project Learnings
+tags:
+  - cfc
+  - projects
+author:
+  name: David Yu
+  bio: I love to code
+  img: /_nuxt/assets/content/davidthrone.jpg
+---
+
+It has been a while since I posted on this blog. Hopefully I can get back into it :)
+Running projects require a different skill set than programming. Here are some things I learnt while running projects for Coders for Causes
+
+## Learnings regarding students
+
+- Its hard to conduct workshops. The most effective way is maybe to copy frontend masters where the presenter talk for a bit, write code then gives out exercises where they can then walk around and mentor people and go through the solution
+- 1 on 1 programming is effective in teaching people how to code
+- We need to motivate students more
+  - Designating times where everyone comes in. Maybe 3 times a week
+  - Get big name companies in so they want to do well to impress them
+- Possible effective workflow
+  - Build a basic project scaffold for them to work off so they can follow the best practices and its easier for them to get started
+  - Use a physical board for task tracking
+  - Everyone pushes to master but everyone is also paired up. Especially initially when code constantly changes
+- Its hard to manage a large group of students
+
+## Managing Client Expectations
+
+Clients don't have a lot of technical knowledge so we need to inform them and continually inform them of the best approach to things. We need to also educate them a little in software. Here is a checklist we need to convey
+
+- [ ] **Sometimes we need to push back on features** that are not important in order to be efficient and deliver the best possible product in terms of reliability, maintainability and usability. It is very easy to waste a lot of time building a low impact feature so we need a disciplined process to determine how meaningful a feature is and how much time it takes for the programmer to make.
+- [ ] **Software is very hard to build well.** Thats why you constantly see bugs and websites getting hacked for example linkedIn losing millions of passwords [https://en.wikipedia.org/wiki/2012_LinkedIn_hack](https://en.wikipedia.org/wiki/2012_LinkedIn_hack) Facebook storing passwords in plain text [https://www.theverge.com/2019/4/18/18485599/facebook-instagram-passwords-plain-text-millions-users](https://www.theverge.com/2019/4/18/18485599/facebook-instagram-passwords-plain-text-millions-users) and the bug in IPhones that allowed people to eavesdrop on others [https://www.zdnet.com/article/iphone-facetime-bug-now-apple-sued-over-eavesdrop-on-lawyers-client-phone-call/](https://www.zdnet.com/article/iphone-facetime-bug-now-apple-sued-over-eavesdrop-on-lawyers-client-phone-call/). Bear in mind these companies have the smartest people with the most funding. So it is important that you as the client understand these points so they can help us in building the best possible software application with our given resources.
+- [ ] **There will be bugs mostly small ones but occasionally there will be the big one.** The reason is because it relates to the first point, building good software is hard because its very technical. This means its easy to get things wrong due to oversights or lack of understanding. Therefore we need a strategy to minimize the impact of bugs and to catch them. The most obvious one is rigorous testing. We need tight feedback loops between building a feature and user testing.
+- [ ] **You need to ask yourself do you really need programmers?** There are a lot of easy to use websites and tools to help you create websites and applications for example SquareSpace and Wix. Since building software is hard it can be a stressful process for both the clients and programmers so you need to consider this carefully. Hiring programmers allow you to **build customized solutions** for example it will be very hard to pull data from your company database and display it in a chart on the website securely. They can also can give you guidance on how to build a secure, scalable and maintainable solution.
+- [ ] **Building software is also a discovery process.** The idea you had will likely change when it takes shape. For example you wanted to build a chatbot for students but as you test it you find out that students don't like chat-bots and won't use it. Then you have to pivot and you find that a mobile app would be a better choice to engage students.
+- [ ] **What exactly can software developers provide?** Good ones can build out whatever your idea is. It won't exactly match your idea to the pixel but the main features will be built. There will be minimal bugs and the features will be delivered in a timely manner. They can also provide you guidance both on the technical and high level on how to build an software application
+- [ ] **Be mindful that seemingly simple changes may not be simple to implement in code.** Try not to assume that the programmer is being lazy (if they are a good one) when they push back on your simple request. For example moving a text box around. This seems really simple and you can easily do it in photoshop but at a code level it may not be because the programmer has to consider the optimal location on all devices. The text box also won't magically resize they have to code it. Finally software development is very broad they may not be knowledgeable in coding layouts.
+
+## Potential Action Items for Next Project
+
+- Use a more effective workflow
+- Keep groups small e.g. max 5 people
+- Get big name companies involved by giving workshops (issue since we are reducing the number of people it may not be as attractive for them)
+- Give a week or two worth of workshops before the projects in the style of frontend masters
+- Be physically available to mentor them
+- Designate 3 days a week to have the group come in to work

assets/content/ui-component-list.png

@@ -0,0 +1,26 @@
+---
+title: Simple Common Laravel Mistakes
+description: Common mistakes for Laravel
+updatedAt: December 30, 2018
+img: https://images.unsplash.com/photo-1517852058149-07c7a2e65cc6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60
+alt: Common Laravel Mistakes
+tags:
+  - laravel
+  - common-mistakes
+author:
+  name: David Yu
+  bio: I love to code
+  img: /_nuxt/assets/content/davidthrone.jpg
+---
+
+1. Everything looks bigger in production but in local environment everything is sized correctly.
+- Zoom level is different for the web pages
+
+2. The webserver is failing silently there is no log errors but the page doesn't load
+- CSRF token is not being passed in the form
+
+3. The data is not being saved to the database but all the data is there just not being saved
+- The elements have not been whitelisted e.g. fillable
+
+4. Jquery is not changing the data on screen but I am sure the code is right
+- Check that the targeted code is in a async call or not if it is you have to wait for the async operation to finish before you can start manipulating the code

content/articles/about.md

@@ -0,0 +1,105 @@
+---
+title: Create a Mosaic in HTML and CSS
+description: Guide to making a mosaic in HTML and CSS
+updatedAt: March 20, 2019
+img: /_nuxt/assets/content/mosaic-main.png
+alt: Mosaic
+tags:
+  - mosaic
+  - html
+  - css
+author:
+  name: David Yu
+  bio: I love to code
+  img: /_nuxt/assets/content/davidthrone.jpg
+---
+
+Click [here](https://www.youtube.com/watch?v=vnjZ3jYylsY) to view the screen cast in a new tab or watch below.
+
+<iframe loading="lazy" width="100%" height="522" src="https://www.youtube.com/embed/vnjZ3jYylsY" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+Here is the accompanying code.
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      http-equiv="X-UA-Compatible"
+      content="IE=edge"
+    />
+    <title>Mosaic</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1"
+    />
+    <style>
+    .container {
+      display: grid;
+      grid-gap: 10px;
+      max-width: 1200px;
+      margin: auto;
+      grid-template-columns: repeat(4, 1fr);
+      grid-template-rows: repeat(4, minmax(10px, 150px));
+    }
+    .image1 {
+      grid-column: 1/4;
+      grid-row: 1/3;
+      background-image: url(img1.jpg);
+    }
+    .image2 {
+      grid-column: 1/3;
+      grid-row: 3/5;
+      background-image: url(img2.jpg);
+    }
+    .image3 {
+      grid-column: 3/5;
+      grid-row: 3/5;
+      background-image: url(img3.jpg);
+    }
+    .image4 {
+      grid-column: 4/5;
+      grid-row: 1/2;
+      background-image: url(img4.jpg);
+    }
+    .image5 {
+      grid-column: 4/5;
+      grid-row: 2/3;
+      background-image: url(img5.jpg);
+    }
+    /* Use this if you want the shrinking image effect */
+    /* [class^="image"] > img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    } */
+    [class^='image'] {
+      overflow: hidden;
+      position: relative;
+      background-size: cover;
+      background-position: left center;
+      background-repeat: no-repeat;
+    }
+    @media screen and (max-width: 600px) {
+      .container {
+        display: block;
+      }
+      [class^='image'] {
+        margin-bottom: 1rem;
+        height: 200px;
+      }
+    }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="image1"></div>
+      <div class="image2"></div>
+      <div class="image3"></div>
+      <div class="image4"></div>
+      <div class="image5"></div>
+    </div>
+  </body>
+</html>
+```

content/articles/best-practices-production-express-apps.md

@@ -0,0 +1,30 @@
+---
+title: How to Delete Documents with Mongoose
+description: Deleting documents with mongoose
+updatedAt: December 30, 2018
+img: https://images.unsplash.com/photo-1489875347897-49f64b51c1f8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60
+alt: Mongoose
+tags:
+  - mongoose
+  - delete-documents
+author:
+  name: David Yu
+  bio: I love to code
+  img: /_nuxt/assets/content/davidthrone.jpg
+---
+
+You have to add a callback to the statement e.g.
+`User.deleteOne({_id: req.params.userId}, err => console.log(err));`
+
+You can't do something like this
+`User.deleteOne({_id: req.params.userId})`
+
+If that doesn't work try this longer way
+
+```js
+TodoList.findOne({ _id: req.params.todoListId }).then((result) => {
+  result.participants.push(req.user.id)
+  result.save()
+  res.json('worked')
+})
+```