CSS-Values API

[hansspiess]

Hi Louis,

thanks for that handy compendium! Did you think of providing a simple api which may take the searchterm as argument and return some json with the CSS-VAlues for that term?

thanks + greets, Hans

[impressivewebs]

This would definitely be good. I assume text editors could create plugins that tap into it, correct? If anyone wants to tackle this, be my guest. If I get some time I'll fiddle with it and see how it goes, but this also might be a little over my head as to how to do it most efficiently.

[Francisc]

I could help. Louis, how do you see this being done? I see there's no URL change when a property is matched. Also, how is data saved? Just a large HTML file with elements that get hidden or shown depending on the search phrase?

[impressivewebs]

It's all one static HTML page, and it uses the List.js plugin to filter what is "visible". Nothing complex, no backend. Originally, I put everything in a JS object, and I was going to populate it dynamically on the client side, but then figured that would have negative SEO implications, so I went with static HTML and the plugin. I actually used the JS object to create the page, so I wouldn't have to write all the HTML by hand, but it's not actually being used on the site.

What I could do is write a script that loops through the page to grab the necessary info from the nodes to create a JSON object. If you think you know the best way to write the JSON, then go ahead. Just view source, save locally, and go nuts.

Originally, my JS data looked something like this:

var Cssvaluesdata = {
    prop1: {
        propname: "animation-name",
        shorthand: false,
        values: ["none", "[ custom identifier ]"],
        info: 'Accepts a comma-separated list of animations and must correspond to a name given in any keyframes at-rule.' 
    },

    prop2: {
        propname: "animation-duration",
        shorthand: false,
        values: ["0s", "<time>"],
        info: 'Accepts a comma-separated list of times to correspond to the animations identified in animation-name and the matching keyframes at-rules.' 
    }

    // etc...
};

What do you think? Could it be structured better? I don't know too much about JSON, so I'm not sure if this qualifies as "JSON", but if you have any ideas, I'm all ears. Thanks!

[Francisc]

Hey,

JSON would work, but the problem with it is that if you want to look-up "text-shadow", the entire file would have to be loaded.

Do you want to keep this strictly backend-less?

[impressivewebs]

Ah, I see what you're saying.

No, I have no problem adding a back-end to this. The only back-end language I (kind of) know is PHP. Would it help if I divided the page so that each property is populated via a PHP include file?

If I do it that way, would the API have to be written in PHP? What do you recommend here?

[Francisc]

PHP is great.

PHP includes (include()) would work, but search would be difficult because it would have to look in each file. Even if files were named after properties it would be easier, but still disk I/O intensive. I'd use a database. I've worked with MySQL and SQLite intensively. I've been meaning to play more with MongoDB (NoSQL), but didn't have the opportunity to do so.

In regards to the API, I'd use a RESTful API. So to get text-shadow you'd visit http://api.cssvalues.com/text-shadow for example and that would output JSON containing the matched query, much like in your example. PHP can easily help here with json_encode function.

What do you think?

[impressivewebs]

Sounds fine to me.

So how would we go about structuring the data in the DB? Would you want the HTML to remain in the page, and then the data gets inserted raw from the DB? I've worked with MySQL too, but nothing too intense.

If you outline exactly how you would do it, I'll be glad to build the Database myself, to help you out. I just have to know how you want it structured and whether you want the HTML in there or not. I would assume you want the data separated from the HTML, correct?

If you want, I can post the code here on GitHub and then you can fork it and go nuts, but it's up to you, if you want to put the work into this with no pay. :)

[Francisc]

The DB should only have data, no HTML or any kind formatting. We'll use a template for that.

For the DB structure, could you please send me or post the initial JSON? It's easier to look at it and outline the DB structure. Generally speaking each key in the JSON file will be the equivalent of a DB column, give or take some optimizations that can be done when you have a DB.

I can build the API without the current website code, it's going to output JSON. And after that hook-up the website to the database as well if it all looks good to you.

I was going to say that if the cost of running the website increases because of the backend, I'm happy to split costs. I also don't want any kind of special recognition for doing this, it's still your project. I'd do it simply out of enjoyment and usefulness of such a service: I always forget the order of parameters for text-shadow and gradients (haha).

[impressivewebs]

Well, if I use what you build, I would definitely mention you in the site's footer as having helped. I'm currently making some edits to the site now, so I'll get back to you on this. Thanks!

[Francisc]

Deal. Thanks as well.

[Francisc]

Hey. Any news?

[impressivewebs]

Sorry, haven't had a chance to look at this again. I will have to recreate the JSon from the HTML again, because the original JSON data that I had is quite different, because I've made quite a few updates.

You can feel free to create anything yourself based on the HTML (which holds all the data), but I'll try to get back to you further on this to see if we can make the data more accessible to third party apps. Thanks.

[Francisc]

OK, no problem. It's easier to see data structure from JSON, but I can use the HTML structure if you don't have that at hand.

[Francisc]

Take a look at this: https://github.com/Fyrd/caniuse/tree/master/features-json

[WebInspectInc]

Hey guys, just wanted to mention that if the API comes through I would love to make an Alfred workflow out of it. And I'd be happy to contribute to the API as well, if you need another programmer.

[impressivewebs]

@tjacobdesign @Francisc

If either of you guys want to run with this, be my guest. I haven't had the time to look into creating an API for this, and it would probably be over my head anyhow. Everything you need is right inside the HTML file, there's nothing else running this app. So I'm sure you could write a parser to grab all the existing data and then use that as the basis for the API.

And when it's done, I'll be happy to promote it via my website and newsletter (http://webtoolsweekly.com/). Thanks!

[impressivewebs]

An update on this:

I've put all the data for this website into a MySQL database. I now make updates through the database, and build the HTML page using PHP. (The live page is not using PHP, it's just static.)

So if this can help someone create an API, then that's great. I don't know if the DB design is what you're looking for, but it is what it is.