Searching for bars... - sahajss/knowledge_base GitHub Wiki

   I’ve never been a great rapper.  My one and only mixtape was an utter failure.  I guess my issue has always been that I’m not that great at making bars.  As it turns out, that shortcoming of mine extends into app development too.  My challenge should have been simple.  I wanted to create a clean, cozy, and compact search bar that integrated into my app really easily.  The issue was that in a world of a multitude of different options and sizes, it’s incredibly difficult to design an interface that is all three. 

I was upset.  After all, one of the main draws to an html based mobile app was the ability to build an attractive interface.  As I was building an app centered on searching, an attractive search bar was critical to my app’s future.  However, as soon as I styled my search bar to look cool, it ceased to be simple.  As soon as I changed it to be simple, it ceased to look cool.  Ultimately, there seemed to be a tradeoff at every turn. 

As my mom frequently reminds me, there is nothing new under the sun.  It turns out designing search bars that are thematically consistent, functionally simple, and aesthetically pleasing, is not a new problem either.  So eventually, I realized that it was time to take some inspiration from those who had earlier met the task. 

Some background on my project.  I’ve been using ionic to build a web based mobile app that works on both IOs and android.  Ionic is really simple to use.  It comes with a ton of sample code.  It comes with a lot of tutorials.  It’s perfect for someone going through the motions like me, and probably you too.

Returning to my problem.  I did find a solution.  I decided to take inspiration from the IOs search bar and style it to my needs using ionic.  The code for creating a IOs-like search bar can be found online, and for your ease of access I linked one resource I used here: https://florian.ec/articles/ios-search-bar-ionic/ 

I would thoroughly recommend using the IOs search bar as a starting point for anyone trying to style their own bar.  There is a lot they got right.  It’s already clean, simple, and attractive.  You can easily edit what it looks like using ionic, and often for apps that rely on extensive usage of the search bar, it can be critically important.  For anyone with any questions, feel free to reach out to me on Facebook or twitter.  Hopefully your search bar development is smoother than mine was.