A dialogue with Q. Build a social share toolbar.

Written by Michael Rood on 

I’ve been using Q at work for non-programming related purposes with mixed success. Primarily I’ve treated Q as 1) a rubber duck 2) an internal search replacement and 3) document summary and content evaluator. I figured it was about time I evaluate it on its coding merits, so I’ve asked it to add a social media share toolbar to each blog post.

First the prompt:

Create a “share this post” toolbar that displays on top of each page that allows the visitor to share a post to facebook, X, reddit, and linkedIn. The share this post toolbar should be displayed in a horizontal toolbar above the post image.

And the result:

It worked! A social media share widget was created above the post image. Lets evaluate the result.

The Good

  1. It completed the tasks of creating a share widget above each post image.
  2. It understood basic context about the project and created necessary partials.
  3. It created/stole svg icons for each of the services asked despite no instructions to do so.
  4. It created a “Share this post” label without instructions to do so.
  5. It correctly placed the toolbar directly above the post image.

The Bad

  1. Architectual decisions are suspect. It created an entirely new head and header partial, duplicating what is already in my theme.
  2. Icons and styling are different from existing icons.
  3. SCSS code is inconsistent with existing code.
  4. It added a horizontal rule between it and the image. I wonder why it did that?

I’m going to ignore the architectual decisions for now and stick to the easier task of modifying the icons and styling.

For the social media share toolbar just created, replace the icons with bootstrap icons available from the bootstrap documentation website.

The answer to whether Claude can retreive the bootstrap icons from the website seems to be no, despite Claude confidently proclaiming success.

Lets undo that and give it the svgs.

Replace the facebook icon in header.html with: [provided svg] Replace the reddit icon in header.html with: [provided svg] Replace the X icon in header.html with: [provided svg] Replace the linkedin icon in header.html with: [provided svg]

Style the social media icons just created like the icons found in the socialshare partial in the layouts directory.

Hey, there we go. It arrived at its destination and is using the correct icons and styling to match the social media toolbar found in the footer of my blog…complete with center alignment.

Taking a closer look at the altered CSS, I’m not thrilled with the decision making. It duplicated the code from the existing social media toolbar including the class names. So now we’re going to have collisions. Lets ask it to align the social share toolbar to the left and see what kind of mayhem ensues.

Align that social share toolbar to the left

Indeed, it aligned left both the social share widget as well as my social media toolbar in the footer and now I have two CSS files with identical class names and clashing styles. This exercise is beyond repair but it is important to reflect on the result and why Q arrived at this result. And who better to ask than Q!

Evaluate the prompt “Create a “share this post” toolbar that displays on top of each page that allows the visitor to share a post to facebook, X, reddit, and linkedIn. The share this post toolbar should be displayed in a horizontal toolbar above the post image.”

I’ll evaluate the prompt “Create a ‘share this post’ toolbar that displays on top of each page that allows the visitor to share a post to facebook, X, reddit, and linkedIn. The share this post toolbar should be displayed in a horizontal toolbar above the post image.”

This prompt is asking for a social sharing functionality to be added to blog posts. Let me analyze its strengths and weaknesses:

Strengths:

  1. Clear objective: The prompt clearly states the need for a “share this post” toolbar
  2. Specific platforms: It explicitly lists the required social platforms (Facebook, X/Twitter, Reddit, LinkedIn)
  3. Placement guidance: It specifies the toolbar should be horizontal and positioned above post images

Weaknesses:

  1. Architectural ambiguity: The prompt doesn’t specify how to integrate with the existing theme structure
  2. Missing styling requirements: No guidance on visual style, colors, or consistency with existing design
  3. No icon specifications: Doesn’t mention what icons to use (custom, Bootstrap, Font Awesome, etc.)
  4. No behavior details: Doesn’t specify if links should open in new tabs or include sharing text
  5. No mobile considerations: Doesn’t address responsive behavior

Suggested Improvements:

Create a “share this post” toolbar that displays above each post’s featured image. The toolbar should:

  1. Allow visitors to share posts to Facebook, X, Reddit, and LinkedIn
  2. Use Bootstrap icons to match existing site styling
  3. Be horizontally aligned and left-justified
  4. Open share links in new tabs
  5. Include the current page URL and post title in share links
  6. Reuse existing theme components where possible (avoid duplicating partials)
  7. Be responsive on mobile devices

I’m impressed that Q (ostensibly?) used follow-up prompts in its suggested improvements including my biggest issue which was its architectual decisions regarding duplicate partials. Reflecting on this experience, I obviously need to be more clear with Q and give specific instructions regarding what I want it to do. Lets try again in part 2 of this series.