So in the Dynamic Web Development class, I would like to make an app that I personally wish would exist. Although I suspect many designers would want this when its built. The concept of the app is simple, it lets users make a collection of the color palettes and typography styles from different webpages. I am calling it, simply, Savestyles for now.
Here’s how it would work:
- A user would copy-paste any URL in the app.
- The app would fetch all the color and font data from the page.
- It would display the information in form of a style sheet.
- User can save this style sheet for later consumption. A user account might be required for this.
- User can keep adding multiple such stylesheets.
Need for such an app:
The primary users for this app would be designers. In my personal experience and from what I have observed from my fellow designers, our first instinct when we visit an interesting webpage is to find the font and color information of the page. If we find it particularly inspiring we bookmark the page, but that quickly becomes unmanageable. There has to be a way to efficiently address this need of designers and even front-end engineers.
Clickthrough Prototype: https://marvelapp.com/ei9680g
Made some design changes. Wasn’t happy with the readability of the list page and the colors. Here are the new mocks:
Here is the github: https://github.com/kshivanku/Week-2-Homework
Clickable Prototype: https://marvelapp.com/3f38deb
Scraping Webpages, Tech POC
Scraping webpages for their CSS files is surprisingly easy. There are pretty direct node modules that help you do it in very few lines of code. The node package that I used to do it is called “website-scraper“.
Find the code of tech POC here: https://github.com/kshivanku/color_scraper
Here is the problem. When I ran this code on the following page, I got 89 unique colors!
A simple github page gave 496 unique colors!
It’s not that the code was wrong, I tried it with one of my project and it gave correct result
It is clear that for me to make a style guide that makes sense, I can’t just scrape all the colors and dump it in a page. I’ll have to make a program that can distinguish between primary and secondary colors, understand what is the main CSS and take ignore the framework CSS etc. Lets see how can we do it.
Fonts had a similar problem. I could get all the fonts mentioned in the CSS, but which ones were the primary fonts? Just dumping the information does not make much sense.
14 font variations is Techcrunch:
27 font variations in Mashable:
93 font variations in NYT:
Takeaway from tech POC:
With colors as well as with fonts, there has to be some sort of hierarchy built into the final output to make it effective. A long list of colors and fonts, without any information of context they are coming from, makes no sense.
There was no point designing screens before looking at the content. A fundamental rule of design, learnt yet again.
App Version 1
Its time to connect the backend and front-end. It took me some time because I had no idea how to do it and the more than coding its about knowing how to work around various cloud server providers and databases. Here are the steps to do it:
- Put your server code in a cloud server provider. Run the server forever.
- Have your client site access the server through an ajax request. Figuring out the path was tricky and there was this one very important issue that I’ll mention in a bit.
- Have the client side talk to a database as a service to build persistence and user categorization.
Putting the server code on a cloud service
I tried three cloud services for this project:
- Digital Ocean
- Bluemix, IBM
All three have good documentation, Heroku and Bluemix have a CLI and Digital Ocean has a very simple interface. Heroku is free for the most part, the other two are paid. I stuck with Heroku, I could’t get Digital Ocean to work for the local client.
Connecting the server to an external client
Theoretically this was suppose to be a very simple step. All I had to do was change the path of my ajax request from ‘/localpath’ to ‘http://appname.herokuapp.com/localpath’. This will not work on its own because of this thing called CORS, cross origin resource sharing. The easiest was to get rid of this is include an NPM package for CORS like so:
install cors –save
var cors = require(‘cors’);
I can’t tell you how much time it took me to figure this thing out.
Then there is another problem with Cordova. This Content Security Policy meta tag that cordova inserts at top of the index.html:
<meta http-equiv=”Content-Security-Policy” content=”default-src *; style-src ‘self’ ‘unsafe-inline’; script-src ‘self’ ‘unsafe-inline’ ‘unsafe-eval'”>
This prevents Cordova to connect with external resources. I had problems loading the fonts from google api and of course talking to my app sitting in Heroku. It took me a lot of time to figure out that this line was the problem, I commented it out, pretty sure it was the unsafe thing to do but it made my life so much easy.
Connecting to a database
I wanted to have a way for users to maintain a list of websites they saw and I wanted it to be platform agnostic so that it can be converted into a chrome extension without any data loss. I did not want any sort of passwords, the information in the system is pretty non-personal, at least for first version the feature of not having a password looked like an asset. So I decided to go with Firebase. Its free and its very simple. Here is the sample code to set it up:
And thats it for v1.
Here are the github links:
- Extract a more hierarchical data from the CSS files. Right now the app is more of less useless as it dumps all the information in a page without any hierarchy.
- Web animations and detail design. The experience of using the app is very jerky.
- Implement the remaining functionalities such as logout, delete.
- Make a website and a chrome extension.
- Improve database protection, if it has to reach the play store ever.