Background
So if you have already read my previous post about faviator, you might have visited the faviator playground.
Introducing Faviator: A simple easy favicon generator
YCM Jason ・ Feb 22 '18
I am very grateful to have received 19 stars (including my own star) on GitHub last week. My first goal for this project is to collect 100 stars, so please be generous.
This week has been very exciting, I have got a few issues raised on github which implies that somebody is actually using faviator! Yay!
I heard some feedback regarding the faviator playground. One of which suggests to provide a dropdown to make font style selecting easier.
So I decided to work on this one first.
Exploring Google Font API
The Google Font API is a very simple API. The API has only one endpoint which returns all font information given your API key.
https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY
You can generate your own API key here. The endpoint above return something like the following.
{
"kind": "webfonts#webfontList",
"items": [
{
"kind": "webfonts#webfont",
"family": "ABeeZee",
"category": "sans-serif",
"variants": [
"regular",
"italic"
],
"subsets": [
"latin"
],
"version": "v11",
"lastModified": "2017-10-10",
"files": {
"regular": "http://fonts.gstatic.com/s/abeezee/v11/mE5BOuZKGln_Ex0uYKpIaw.ttf",
"italic": "http://fonts.gstatic.com/s/abeezee/v11/kpplLynmYgP0YtlJA3atRw.ttf"
}
},
...
]
}
Nice! So we somewhat have all the family names, but I don't want to serve such a large file to my frontend just for the names. So I started writing a script to grab all the font names.
The bash script
#!/usr/bin/env bash
KEY=$1
echo '['
curl -s "https://www.googleapis.com/webfonts/v1/webfonts?key=$KEY&sort=alpha" | \
sed -n 's/ *"family": "\(.*\)",/ "\1",/p' | \
sed '$s/\(.*\),/\1/'
echo ']'
Usage:
> bash grepFonts.bash YOUR-API-KEY
[
"ABeeZee",
"Abel",
"Abhaya Libre",
"Abril Fatface",
"Aclonica",
"Acme",
...
"Zeyada",
"Zilla Slab",
"Zilla Slab Highlight"
]
And here we go, no more frustration when selecting text on faviator playground!
Top comments (15)
Cool script!
If you haven't already, you would probably benefit a lot from a tool like jq, which will give you superpowers in this context!
Ya, but I guess some how want to run this script every time I deploy the site. So I didn't want to bother installing jq on the production and staging servers. So I decided to go for a more primitive way.
With jq;
That makes sense. I wouldn't want to necessarily install
jq
for such a simple task, either.Hmm, I haven't look into jq yet, but I don't feel that jq is very easy to use from what I have scanned through.
Maybe I will start another project that makes json manipulation easier for people who are familiar with Javascript. Something like this is in my mind:
This would be much more easier for people who are familiar with Javascript already.
I guess
jq
has a bit of a learning curve. Something likeawk
, but with JavaScript syntax, I think could be useful to many JavaScript developers!Stay tuned. I will make one. :P
looks like something similar exists.
npmjs.com/package/json
Nice, I will have to check it out!
Awesome!
is so honest xD
Great post!
Hahahaa.. thanks!! XD
Are you running this once and saving the list to your app or are you running it every init?
I am just running it once in a while.
Terrific! I love the brevity. Need to brush up on my sed and awk skills.