✍️ @Rachel's Blog

[rsensenig]

Hi and welcome to Content Lab! Here is a self paced guide to ensure you get feedback as you publish your technical blog.

Resources:

• Previous workshop recording
• Previous blog posts

Timeline:

• 📋 Week 4: Create an outline by 3/2
• 📰 Week 7: Rough draft due by 3/16
  • Mentor reviews by 3/30
• Week 9: Final version due 4/7

📋 Blog Outline: Write your outline in the issue directly

Requirements

Questions to consider:

• Who’s reading this? Where are they in your dev journey? What do they need to know before they can dive into this story?
• If people could leave with just one action, what would it be?
• Were there surprises or alternative problem solving you want to give a heads up to?

Sample Topics for your blog post

• Creating tests for Stripe/Cicero/Twilio
• Using Vuetify and V-cards
• Debugging a PR test failure affecting entire codebase and creating an issue for it
• System Design/Architecture design for caching capability
• Implementing Text to Speech
• Configuring secrets for APIs in codespaces
• Building Actions for [security|community|CI| etc]

Example Outlines

What makes good documentation on open source?

• Could this be a list? (3 pieces of documentation thats easy to check for and add to the project to add immediate value?
• What inspired you from the Tech documentation workshop?
• What would you help encourage other first time contributors to do?
• Is a learning curve for everyone? And whats the balance between good documentation and too much documentation? Choice architecture
• What is each space used for? Wiki vs Discussion vs Pages
• How do we search and find?
  Reference: https://blackgirlbytes.dev/conquering-the-fear-of-contributing-to-open-source
  Reference issue/PR for photos
  Conclusion: Documentation is always changing, will always be needed`

To Do: when you complete the requirements, add "outline ready" label on your issue

• Identify your topic from one of the PRs approved
• Outlining bullet points of blog roadmap
• Is your blog a List, Survey, or demo?
• Which Visuals or Diagram or Code snippets will you add
• References to resources

📰 Blog Rough draft: Format into a google doc

Questions to answer across draft

• Why is this helpful for a reader?
• What problem does this help them solve?
• What kind of experience should the reader have or that you will provide so they’re up to speed
• What larger problem is this solving?
• Were there other ways of solving this problem - what made you choose the one that you did?
• What were the positive tradeoffs? (Did it save time? Save hours? Was more secure?)
• What is the best way to present the content (i.e. code snippets, graphics) ?
• What additional resources can they provide the reader if they want more information?
• Is there a call to action?

To do: when you complete the requirements, add "draft ready" label on your issue

• intro paragraph
• context of Amplify
• paragraph on problem
• paragraph compare your solution
• paragraph impact your solution
• Less than 600 words
• Drop link to your google doc (with permissions for edits) in review issue

[rsensenig]

Blog Outline

Audience: People who want to implement full stack logging on their Vue and Node app

Goal: Give people concrete steps so that they can set up a base for their project

Title: How I Implemented a Full Stack Logging Solution for a Vue and Node App

Introduction:

• Context:
  • What is logging?
  • Why is adding logging to your project important?
• What will your audience get out of reading your article:
  • You will see how to connect client and server-side loggers through an API endpoint, so that log messages from activity on your app will be stored in the back-end.

Middle:

• Front-end logging with vue-logger-plugin
  • Attaching vue-logger-plugin to the Vue app
  • Creating a testLog method
  • Code snippet(s) to include:
    • vue_logger.js file
    • using vueLogger on main.js
    • test logs on component
• Back-end logging with Winston
  • Setting up a custom format
  • Code snippet(s) to include:
    • Winston_logger.js file
• Creating API endpoint
  • Testing using Postman - send “hello world” message
    • Visual to include: screenshot of Postman sending “Hello World” message at logging endpoint
  • Use Winston method logger.info to send {severity, data} from front-end to Console or File
  • Code snippet(s) to include:
    • Event_logger.js - note: remove database migration to Postgres for purpose of demo

Conclusion:

• Quick summary of what was learned
  • Attach vue-logger-plugin to click event on component of Vue app
  • Create a custom hook and leverage axios to send the log messages to the api endpoint
  • At the api endpoint, use Winston to store the log messages in a File, or print the log messages to the Console
• Call to action
  • Try it out, and tag me or leave a comment if you do!

Resources:

• vue-logger-plugin
• Winston
• Postman

[unnamedrd]

This is a very comprehensive outline. Well done! Perhaps keep in mind that the length of your blog should be something that the reader can comfortably consume on a site like Dev.to. Can you address all these points in ~400-600 words? Consider this while you're doing the final walk through of your rough draft. But overall, really well thought out!

[rsensenig]

Hi @unnamedrd - Thanks for this feedback! I think the blog post will be somewhat similar to this one in length: https://dev.to/programequity/creating-github-actions-for-community-engagement-58be, and perhaps even a little shorter. Each of the sub-bullet points won't be elaborated on too much because the code snippets will provide a lot of context. If needed, I can cut out the testing I did using Postman. Thanks again!

[unnamedrd]

Exactly, you can always cut out extraneous information if necessary later on.

[unnamedrd]

noting that Rachel is out for a pre-approved reason and the link to this blog post will be updated no later than Tuesday night

[rsensenig]

Please see the first draft of my blog post here: https://docs.google.com/document/d/10ZC-WJH8AnnGPhAhwi-a0dTCPSQQV9G0EKrv0L_0n8U/edit?usp=sharing

[rsensenig]

The final draft of my blog post can be viewed here: https://docs.google.com/document/d/10ZC-WJH8AnnGPhAhwi-a0dTCPSQQV9G0EKrv0L_0n8U/edit?usp=sharing.