Editing article

Title

Summary

Content

I suck at Javascript. 😒 It’s time to admit it. 😅 Let’s see how Bard helped me overcome this limitation… and create <a href="https://js-simple-search-bsl7ylv4hq-ew.a.run.app/">this app</a>!I tried for years to cope and survive in a world which seems to be unable to exist without Javascript, and last weekend I succumbed. Time to ask your favorite JS developer <a href="https://medium.com/@ch.stanger">Chris</a> to point you at some good documentation and start reading about this weird language.Promises, promises… unless? Wait, what if an LLM could code the app for me? Maybe I’m not good to start the project myself, but what if <a href="https://bard.google.com/">Bard</a> can do it for me, I should be able to tweak the code myself.TL;DR If you don’t want to read my Italian drama, <a href="https://github.com/palladius/js-simple-seach">jump to the code</a> (or see the <a href="https://js-simple-search-bsl7ylv4hq-ew.a.run.app/">result on Cloud Run</a>).Two days ago, I was babysitting my kids; playing with my mobile phone while they were playing with Lego…<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*GRWdYdfz_8efocft" /><figcaption>Little Seby in the Lego room in Google Zurich</figcaption></figure>.. and I started asking Bard a question. But wait, “how do I make sure the question remains available when I go back home to my big computer?” I was quite surprised by the answer.<h4>The Coding concept</h4>What’s my idea? Say you have a gazillion articles / assets and want to be fast at searching on them. But you can’t accept a 1–2 seconds latency from a typical server-side website search.<figure><img alt="" src="https://cdn-images-1.medium.com/max/970/0*hWAdQ_6qqfONWXn1" /><figcaption>Flash is searching through all my docs ina static, local JSON! Barry likes to win easy :)</figcaption></figure>I want a search bar where I can start typing stuff and the choice starts to diminish. Then I want to have a number of cards with the results (from a static JSON — I’ll make it dynamic in a next episode!). I also want to have some rudimental clicking to narrow down the choice, say with a Boolean “is this a technical article).<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*_glEQUM0vp5CBAJ_" /><figcaption>A quick and customizable search bar.</figcaption></figure><h4>Write a good prompt</h4>My kids are delving into plenty of Legos, so I have plenty of time to try a verbose and well planned prompt. After all, I want it to write an app for me! Let’s not save time and details.Prompt 1: “I would like to build a small and responsive search engine. The DB Is small and static so I don’t need anything complicated. I just want to have a frontend JavaScript where you start typing a word and it searches for all the elements matching this word in title or description. The only important thing to me is responsiveness so every time you type a letter it starts selecting just things matching it, so you want to write say “pistachio”, the selection should start kicking in already with ‘p’, ‘pi’, ‘pis’, and so on. Can you help me write the code?”I’m so ignorant on JS that I’m not even sure this is something you can do fully on client-side ( index.html+ script.js) or if you need some server-side effort (add node.jsto the mix) to provide the JSON (although on the server-side I have 20-year expertise — this part I can do without help).<h4>Bard reply might surprise you..</h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*aZIktNHDSVE0nl-MhdHkPw.png" /><figcaption>Bard answer</figcaption></figure>Now, Bard started with a confident “Sure, here’s the JavaScript code for a small and responsive search engine that works with a static database:” but I don’t trust what I see. Plus, I don’t have a computer with me, so I can’t try the code. I asked him to do two things that Google is really good at doing:<ul><li>export in email (cheap / persistent)</li><li>export to <a href="https://docs.google.com/document/d/1y75TsYpu9kr3vh0zEEoq-IpBTfmbJ77fsISVKbHsRRU/edit">GDoc</a> (richer / can edit)</li></ul>Look:<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*7AU7_E2Wql-JTjPmC8Zz-A.png" /><figcaption>Bard exports to GDocs and GMail in case you want to elaborate on your brainstorming idea.</figcaption></figure>When I was home I had plenty to choose from: my 📬 GMail inbox, my 📃 Google Docs link. what I didn’t know is that the conversation is saved conveniently in a top left tab, and you can pin it — until you’re done with your project.I paste the JS / HTML code and… it works FROM SCRATCH! Teh first tentative works! Wow I’m impressed. I start putting the <a href="https://github.com/palladius/js-simple-search">code into github</a> for posterity and for making potentially breaking changes.<h4>Let’s add complexity. Add a Boolean and multi-parameter search!</h4>Prompt2. “Wow! Say I want to do something a bit more complex for example selecting a Boolean (isTechnical=true/false) which is in the frontend as checkbox and in the JSON, and I want to sort the result by some kind of rating? Can you help me add those two functionalities both to html and to JavaScript?”Result:<figure><img alt="" src="https://cdn-images-1.medium.com/max/916/1*LqieYZJOw5dEYrNiyER7pA.png" /><figcaption>The result is impeccable — except with the Pasta Primavera which definitely not 🇮🇹-compliant!</figcaption></figure>Note that Bard gives me the index.html code, the script.jscode , and also a pre-baked JSON which responds to my requirements (a isTechnical boolean and a float rating).<h4>Add little nits: CSS and Cards</h4>Prompt 3. Wow this is amazing! Final thing, can you share a little css snippet to make this look nice and professional? I’m bad at CSS.This made the final visualization a bit better (not much).Prompt 4. Fantastic! Last thing. I would like to visualize the search result as nicely formatted cards, think of three rectangles per row, with title description and maybe a small image turned into a square with rounded corners. Can you help me with html and CSS?And this is the first time Bard makes a mistake. He gives me a HTML code which seems like <a href="https://angular.io/api/common/NgFor">Angular</a> (ngFor ):<figure><img alt="" src="https://cdn-images-1.medium.com/max/940/1*CsYSrgiS7TedB28Xt-7atw.png" /><figcaption>This is a mistake: `ngFor` only exists in <a href="https://angular.io/api/common/NgFor">Angular</a> framework (I presume?)</figcaption></figure><h4>Result</h4>The app is currently served by cloud run here: <a href="https://js-simple-search-bsl7ylv4hq-ew.a.run.app/">https://js-simple-search-bsl7ylv4hq-ew.a.run.app/</a>This is the final result in GIF format:<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*D8xzbhzjBKZkjsvU.gif" /></figure>The functionalities it demonstrates are:<ul><li>responsive sub-JSON search function (every letter triggers a search on Title or Description)</li><li>boolean selection (isTechnical or not)</li><li>Sort by rating (number) or by Title (string)</li></ul><h4>Conclusions</h4>As a person who can’t even code a strlen() in Javascript, I was able to create a simple / dumb — yet customized — website within an hour on a Saturday afternoon (when my wife was babysitting).<a href="https://bard.google.com/">bard.google.com</a> gave me good code from the beginning, and responded correctly to the next 2 questions. The first error was at the 4th prompt (!). Also, on the negatives, the CSS for cards was pretty ugly so I had to fix it myself (luckily I speak some rudimental <a href="https://getbootstrap.com/docs/4.0/components/card/">Boostrap</a>).I found Bard can be a pretty good companion if you have time to kill away from keyboard, and you want to go with the flow in some brainstorming phase, ready to copy the content when you’re back to your workstation.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=b2585e55385e" width="1" height="1" alt="">

Author

Link

Published date

Image url

Feed url

Guid

Hidden blurb

--- !ruby/object:Feedjira::Parser::RSSEntry
title: Hey Bard, write a responsive Javascript Search Engine app for me..
url: https://medium.com/@palladiusbonton/hey-bard-write-a-responsive-javascript-search-engine-app-for-me-b2585e55385e?source=rss-b5293b96912f------2
author: Riccardo Carlesso
categories:
- javascript
- bard-ai
- google-cloud-run
- search
- json
published: 2023-11-20 14:01:41.000000000 Z
entry_id: !ruby/object:Feedjira::Parser::GloballyUniqueIdentifier
 is_perma_link: 'false'
 guid: https://medium.com/p/b2585e55385e
carlessian_info:
 news_filer_version: 2
 newspaper: Riccardo Carlesso - Medium
 macro_region: Blogs
rss_fields:
- title
- url
- author
- categories
- published
- entry_id
- content
content: "I suck at Javascript. \U0001F612 It’s time to admit it. \U0001F605 Let’s
 see how Bard helped me overcome this limitation… and create <a
 href=\"https://js-simple-search-bsl7ylv4hq-ew.a.run.app/\">this app</a>!I
 tried for years to cope and survive in a world which seems to be unable to exist
 without Javascript, and last weekend I succumbed. Time to ask your favorite JS developer
 <a href=\"https://medium.com/@ch.stanger\">Chris</a> to point you at some good documentation
 and start reading about this weird language.Promises, promises…
 unless? Wait, what if an LLM could code the app for me? Maybe I’m
 not good to start the project myself, but what if <a href=\"https://bard.google.com/\">Bard</a>
 can do it for me, I should be able to tweak the code myself.TL;DR
 If you don’t want to read my Italian drama, <a href=\"https://github.com/palladius/js-simple-seach\">jump
 to the code</a> (or see the <a href=\"https://js-simple-search-bsl7ylv4hq-ew.a.run.app/\">result
 on Cloud Run</a>).Two days ago, I was babysitting my kids; playing with my
 mobile phone while they were playing with Lego…<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/0*GRWdYdfz_8efocft\"
 /><figcaption>Little Seby in the Lego room in Google Zurich</figcaption></figure>..
 and I started asking Bard a question. But wait, “how do I make sure the question
 remains available when I go back home to my big computer?” I was quite surprised
 by the answer.<h4>The Coding concept</h4>What’s my idea? Say you
 have a gazillion articles / assets and want to be fast at searching on them.
 But you can’t accept a 1–2 seconds latency from a typical server-side website search.<figure><img
 alt=\"\" src=\"https://cdn-images-1.medium.com/max/970/0*hWAdQ_6qqfONWXn1\" /><figcaption>Flash
 is searching through all my docs ina static, local JSON! Barry likes to
 win easy :)</figcaption></figure>I want a search bar where I can start typing
 stuff and the choice starts to diminish. Then I want to have a number of cards with
 the results (from a static JSON — I’ll make it dynamic in a next episode!). I also
 want to have some rudimental clicking to narrow down the choice, say with a Boolean
 “is this a technical article).<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/0*_glEQUM0vp5CBAJ_\"
 /><figcaption>A quick and customizable search bar.</figcaption></figure><h4>Write
 a good prompt</h4>My kids are delving into plenty of Legos, so I have plenty
 of time to try a verbose and well planned prompt. After all, I want it to write
 an app for me! Let’s not save time and details.Prompt 1: “I would
 like to build a small and responsive search engine. The DB Is small and static so
 I don’t need anything complicated. I just want to have a frontend JavaScript where
 you start typing a word and it searches for all the elements matching this word
 in title or description. The only important thing to me is responsiveness so every
 time you type a letter it starts selecting just things matching it, so you want
 to write say “pistachio”, the selection should start kicking in already with ‘p’,
 ‘pi’, ‘pis’, and so on. Can you help me write the code?”I’m
 so ignorant on JS that I’m not even sure this is something you can do fully on client-side
 ( index.html+ script.js) or if you need some server-side effort (add node.jsto the
 mix) to provide the JSON (although on the server-side I have 20-year expertise — this
 part I can do without help).<h4>Bard reply might surprise you..</h4><figure><img
 alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*aZIktNHDSVE0nl-MhdHkPw.png\"
 /><figcaption>Bard answer</figcaption></figure>Now, Bard started with a confident
 “Sure, here’s the JavaScript code for a small and responsive search engine that
 works with a static database:” but I don’t trust what I see. Plus, I don’t
 have a computer with me, so I can’t try the code. I asked him to do two things that
 Google is really good at doing:<ul><li>export in email (cheap / persistent)</li><li>export
 to <a href=\"https://docs.google.com/document/d/1y75TsYpu9kr3vh0zEEoq-IpBTfmbJ77fsISVKbHsRRU/edit\">GDoc</a>
 (richer / can edit)</li></ul>Look:<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/1*7AU7_E2Wql-JTjPmC8Zz-A.png\"
 /><figcaption>Bard exports to GDocs and GMail
 in case you want to elaborate on your brainstorming idea.</figcaption></figure>When
 I was home I had plenty to choose from: my \U0001F4EC GMail inbox, my \U0001F4C3
 Google Docs link. what I didn’t know is that the conversation is saved conveniently
 in a top left tab, and you can pin it — until you’re done with your project.I
 paste the JS / HTML code and… it works FROM SCRATCH! Teh first tentative works!
 Wow I’m impressed. I start putting the <a href=\"https://github.com/palladius/js-simple-search\">code
 into github</a> for posterity and for making potentially breaking changes.<h4>Let’s
 add complexity. Add a Boolean and multi-parameter search!</h4>Prompt2. “Wow!
 Say I want to do something a bit more complex for example selecting a Boolean (isTechnical=true/false)
 which is in the frontend as checkbox and in the JSON, and I want to sort the result
 by some kind of rating? Can you help me add those two functionalities both to html
 and to JavaScript?”Result:<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/916/1*LqieYZJOw5dEYrNiyER7pA.png\"
 /><figcaption>The result is impeccable — except with the Pasta Primavera
 which definitely not \U0001F1EE\U0001F1F9-compliant!</figcaption></figure>Note
 that Bard gives me the index.html code, the script.jscode , and also a pre-baked
 JSON which responds to my requirements (a isTechnical boolean and a float rating).<h4>Add
 little nits: CSS and Cards</h4>Prompt 3. Wow this is amazing! Final thing,
 can you share a little css snippet to make this look nice and professional? I’m
 bad at CSS.This made the final visualization a bit better (not much).Prompt
 4. Fantastic! Last thing. I would like to visualize the search result
 as nicely formatted cards, think of three rectangles per row, with title description
 and maybe a small image turned into a square with rounded corners. Can you help
 me with html and CSS?And this is the first time Bard makes
 a mistake. He gives me a HTML code which seems like <a href=\"https://angular.io/api/common/NgFor\">Angular</a>
 (ngFor ):<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/940/1*CsYSrgiS7TedB28Xt-7atw.png\"
 /><figcaption>This is a mistake: `ngFor` only exists in <a href=\"https://angular.io/api/common/NgFor\">Angular</a>
 framework (I presume?)</figcaption></figure><h4>Result</h4>The app is currently
 served by cloud run here: <a href=\"https://js-simple-search-bsl7ylv4hq-ew.a.run.app/\">https://js-simple-search-bsl7ylv4hq-ew.a.run.app/</a>This
 is the final result in GIF format:<figure><img alt=\"\" src=\"https://cdn-images-1.medium.com/max/1024/0*D8xzbhzjBKZkjsvU.gif\"
 /></figure>The functionalities it demonstrates are:<ul><li>responsive sub-JSON
 search function (every letter triggers a search on Title or Description)</li><li>boolean
 selection (isTechnical or not)</li><li>Sort by rating (number) or by Title (string)</li></ul><h4>Conclusions</h4>As
 a person who can’t even code a strlen() in Javascript, I was able to create a simple
 / dumb — yet customized — website within an hour on a Saturday
 afternoon (when my wife was babysitting).<a href=\"https://bard.google.com/\">bard.google.com</a>
 gave me good code from the beginning, and responded correctly to the next 2 questions.
 The first error was at the 4th prompt (!). Also, on the negatives, the CSS for cards
 was pretty ugly so I had to fix it myself (luckily I speak some rudimental <a href=\"https://getbootstrap.com/docs/4.0/components/card/\">Boostrap</a>).I
 found Bard can be a pretty good companion if you have time to kill away from keyboard,
 and you want to go with the flow in some brainstorming phase, ready to copy the
 content when you’re back to your workstation.<img src=\"https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=b2585e55385e\"
 width=\"1\" height=\"1\" alt=\"\">"

Language

Active

Ricc internal notes

Ricc source

Show this article Back to articles