# ✍️ Week 4 Micro Blog Project ✍️  --- ### A Micro Blog web app, hosted on heroku (Kat) - The user enters their blog title, name and blog content. It is then posted to archive of other blog posts. Once the server side code is running the user is able to see blog posts from other users and delete their previous posts ✨https://gmno-blogsite.herokuapp.com/✨ --- ## Project board (James)  --- - Tried to log more modular issues this week, this really helped with finding a good progression and pace through the project. - We had lots of tags and had an assignable P (priority tag) - Reviewed priorities at each stand up --- ## Working as a team (Ina & Vatsal) - What we did well: -- Lots of Mobbing (every1 knew what was happening, we all learned how to do a lot of stuff) -- Communicating work we did after hours (not duplicating work) -- Being open about difficulties/blockers in communication  --- ### Git Co-authoring (Ina) ``` $ git commit -m "Refactor usability tests. > Relates #14, 36 > > Co-authored-by: teammate's-github-ID <name@example.com> Co-authored-by: another-ID <another-name@example.com>" ``` --- # Techy stuff  --- ## Deloying on Heroku (Kat) ##### Link: https://dashboard.heroku.com/apps --- ### Some thing to consider - Have the person that has ownership of repo be the one to deploy - Use the Activity section to check if it has been deplyed - Automatic deploys, will update heroku page when you push to github --- ```javascript= const hostName = process.env.HOSTNAME || "localhost"; // try using "0.0.0.0" instead const hostName = process.env.HOSTNAME || "0.0.0.0"; ``` --- ## Router (V) - "source" (backend) -- "handlers" = (home.js, public.js, **submit.js**) -- router.js, server.js, **template.js** - "public" (frontend) -- style.css, - "tests" --- ## Template + string appending (Ina)  --- ## Submit (Kat) --- ### querystring npm: ##### Parse and stringify URL query strings ```javascript= const queryString = require('query-string'); console.log(location.search); //=> '?foo=bar' const parsed = queryString.parse(location.search); console.log(parsed); //=> {foo: 'bar'} ``` --- ### **_Show code_** : --- ## Serving Static Files (James) - With only having one html file we only had to link 1 style sheet and script. I really stuggled to conceptialise how the route to serve static files from our assets directory was working.  --- - When the HTML page is served there are then multiple requests made to get any additional scripts or style sheets. When these requests are made the static assets are then sent back. ```HTML <link rel="stylesheet" href="assets/style.css"> ``` #### 👇 ```JavaScript if (request.url.includes("assets")){ publicHandler(request, response); ``` #### 👇 ```JavaScript const requestURl = request.url; // assets/style.css ``` #### 👇 ```JavaScript response.end(file); ``` --- ## Accessibility ()  - Pretty dececent right???⛔ - There were a few keyboard navigation issues and the screen reader would just blurt out all of the content from the blog post with no pause. It sounds really hectic --- ## Stretch Goals (V) - Deleting Posts ---> How to remove it from our string? - gitignore --- modules on gitHub - oops. - Refresh page doesn't resubmit the form. - Some testing --- ## Resources ###### Olis example using templates:https://glitch.com/~vanilla-node-templating ###### Textarea: https://www.w3schools.com/tags/att_textarea_form.asp ###### Git Co-authoring:https://help.github.com/en/github/committing-changes-to-your-project/creating-a-commit-with-multiple-authors ###### Handling post data:https://itnext.io/how-to-handle-the-post-request-body-in-node-js-without-using-a-framework-cd2038b93190 --- # Questions?  ---