When I first began working on our app, it was mostly a proof of concept prototype. So I threw in a Firebase setup, and as we began testing out features, I used Firebase to save data as need be. I knew I’d have to rewrite this later, or users could end up without necessary data if they go offline mid stream. Also, it meant that every saved PNG had to be delivered from Firebase - when localStorage would be a far better way to serve those images.

Firebase does tout its “offline capabilities” but in the past I didn’t find that I could both save and retrieve data while offline. Perhaps they’ve improved this in the past year, but I don’t think it’s adequate for an offline solution. Articles here and there suggest that you

1- find a good offline/local browser based database
2- build a script to sync up data when the user goes back online

I found what looks to be a pretty awesome script in localForage, with over 9500 stars in Github it sounds like a few other people are using it… Setting it up was about as easy as I’ve ever seen, I didn’t even have to declare the DB in advance. Sweet. And at only 25KB for the minified JS file, that is nice and slim.

But the logic for an “offline” or “mobile first” setup is still something I’m working on. So far I think I’ll have the user save images and image definitions to both, then if they go offline, it will timestamp the localStorage and Firebase, and sync up any data once the user goes back online. I also have to divide the line between paid and free users - so that paid users get the benefit of cloud synced data, whereas the free users should probably only have the localStorage.

That’s my plan for now anyway. All of this is usually easier said than done, as little glitches seem to pop out of nowhere no matter how hard one tries!

I feel very blessed to have found some amazing open source and public domain resources for artwork lately, and our color art selection has really skyrocketed as a result. We are being careful to track the attribution requirements for each collection, so we can allow artists to create bio pages on our website, as well as adding links to their Twitter, Facebook, websites, etc. While many of our collections do not technically require this - we feel it’s important to recognize the authors of the artwork whenever possible - and help drive some traffic to their commercial ventures as well. If you love an artist, you should check out their website and see if you can help support their work buy purchasing something. We love the idea that some of the generous folks who have open sourced their art, may end up getting some benefit by being in our app.

So we would like to invite anyone who has authored a vector art, game art, or icon collection which is open source, public domain, or Creative Commons without a “non redistribution” or “non commercial” clause - to submit their collection to Kwippe. I’m not sure just how slammed I’ll be once we go live in August, but I hope to keep processing art on a regular basis. If you would like to submit to us, we can offer you the following:

1- a bio page that includes information about you, an avatar or personal picture as well as a picture representing your art
2- links to your website and social media accounts from your bio page
3- your license requirements and name/link to bio page listed on every piece of art, so when the user chooses your art to edit, they see the information about you

The requirements for submitting to us are as follows:

1- Each element should be in an individual SVG, like the art you find in our app
2- The SVG should be named using all lowercase, with up to 3 keywords defining the image. For example: apple-fruit, prickly-pear-fruit, banana, banana-bunch
3- Please make sure your image does not contain:

- transforms
- clip paths
- gradients

We have some Illustrator scripts we can point you to if you need help getting this stuff out of your artwork. We also highly recommend using some of the awesome SVG cleaning tools, such as SVGMO and SVG Cleaner.

4- Your collection should have at least 100 different elements
5- Your collection can be color, or simple black icons that are compound paths. If you are submitting icons, we can process them a lot faster if you upload them to the free app Fontastic and download them as an icon font - the “install manually” option on the publish page. Then just send us the resulting SVG font file. Remember to properly keyword each image! We cannot process font files that don’t contain keywords as the image names.
6- Make sure this work is yours, not work you’ve found online. We can only take submissions for artwork that you have full legal ownership of.
7- Provide a license .txt file that we can distribute when somebody downloads your image. You cannot include anything prohibiting commercial use, redistribution, or making of derivatives.

Later on I’ll be adding a form using Wufoo - but for now I just ask that you submit any collections or questions about submitting to mspanish at outlook dot com. You can also give me a shout out on Twitter .

In an inspiring tale of perseverance and tenacity, a company called Tiny Speck was forced to shut down after releasing their Flash based game Glitch, (which had over 150,000 users) - and these same guys went on to found the “unicorn” we now know as Slack.

What is so incredibly cool is that despite having to close down their game operation, they made a decision that few companies in their position have: they dedicated all of the art assets from their game to the Public Domain. Over 10,000 beautiful pieces of game art - everything from characters to worlds, food, furniture - you name it. And the art has this unique style to it, making it really different from other open source stuff you can find, as well as high end - which is so hard to achieve when you’re cobbling together free artwork.

God Bless these guys for having had the uber generosity to make that art public, so that other game developers might profit! It’s a pretty cool piece of karma that they went on to found Slack, the teams collaboration and communication Saas platform.

I’ve always tried to use these pieces as I could in the last few years, but I have to admit that since the SWF to SVG conversion wasn’t exactly perfect, I struggled to find elements that I could modify enough to be usable in my own designs. Well I’m proud to say that Kwippe now boasts over 400 of the most gorgeous pieces from the Glitch collection. While we weren’t able to get everything I wanted - in particular the inhabitants and few other key sections were not usable in SVG format - I was able to adjust a great number of pieces for use inside our editor. This meant stripping out the gradients, as right now we aren’t set up to process gradients from our database. That would slow down everything, and my plan is to implement gradients in the editor, then once I have a good method for applying them, develop a compatible method for pre-processing SVGs with gradients so that it will remain lightweight.

The flattened stuff is just lovely - despite the loss of “3d” like quality. And the great thing is that it will be easy to create a color coordinated set from the Glitch collection, and once I add back the Spine export which I backlogged for now, game developers will be able to quickly throw together a set of elements, and export to Spine for immediate animation.

Very exciting! Thanks again to the team at Glitch - now Slack - for making is a better app.

Earlier this year I spent several months working on a project for my adorable autistic daughter Catherine, who I hope to teach reading through a visual method. I decided to gamify this app as much as possible, as I wanted a completely immersive learning environment where she could “play to learn”. In order to try and make things as game like as possible, I used a game rendering JS library called Pixi.js, and looked for game art resources that would help keep the app as lightweight as possible, which can be really important in games, otherwise they run slow on mobile devices. It was fun to explore the game art world, and one great resource for open source and other free game art is OpenGameArt.org. It’s amazing how many kind people put up their own work so that others may benefit, often asking for nothing at all in return.

There’s nothing wrong with people putting a CC 3.0 license on their work - I fully understand that people want to be at least credited. But it isn’t always easy to comply with that. What about people who’d like to print 30 t-shirts for their school? Or a sticker set using a butterfly? Under the terms of a lot of Creative Commons licenses, they can only do that if they add an attribution to the printed artwork. In many ways this protects the authors - and some of the most fantastic work we’re privileged to have in our own art database, falls under CC licenses that require attribution. But we do get excited when we see artwork that comes without these restrictions, only because it opens up different avenues for what people can do with it.

Such is the case with the newly added Kenney.nl Game Art collection, which carries a CC0 (public domain dedication) license. The generosity of these developers as pretty astounding - they have thousands of graphic assets, all neatly organized, color coordinated, and packaged by theme - all ready for the aspiring developer to download and use in their game. I was lucky enough to find around 600 pieces that I thought would work will inside of Kwippe - and you’ll be able to access them all soon via a hyperlink to that collection. They were originally developed in Flash, making these asset super clean and lightweight as well. I plan to have a variety of export tools specifically for app and game developers, where they can choose their sizing, and export a zip file and hopefully a sprite sheet with all of their assets in a neat package. But definitely give Kenney.nl a visit if you’d like to explore their packs as well as their software, which looks awesome for any game dev.

When I first began looking into good sources for open source, public domain, and creative commons artwork, emojis weren’t even on my list of things to look at. I didn’t realize they were mostly open source, or that so many beautiful designs were behind these little images you see on Twitter, Facebook, etc! The breadth and detail of the images in the emoji libraries is rather astonishing, and I’m excited to say that emojis now make up some of the best images we have in our database.

I may have been thinking more of emoticons than emojis - more like smiley faces with a few weird characters thrown in here and there. But the emoji libraries have over 800 unique concepts/images each - plus all of the diversity stuff where they include variations in different colors, as well as men and women for each item. We’ve gotten rid of the diversity stuff just to reduce redundancy - as Kwippe is for building your own variations, and it makes it harder to find what you are looking for when you have to look through 20 of each item just to find something. I’ve tried to vary the hair a bit, alternating between some of the varieties. We’ve got wizards, fairies, wrestlers, snowboarders, and all kinds of fruits, vegetables, landmarks like the Statue of Liberty, animals, and way more.

I did have to pull a lot of the images into Illustrator to get them ready for use in our system - especially with the earlier emojis, where transforms and clip paths seem to abound! (agghh!).

All of these beautiful emojis have gotten me wondering about where the idea for emojis came from, and I found an interesting article today - The Suprising History of Emojis. Worth a read! From where I’m sitting I’m extraordinarily grateful for the emergence of these emojis, and the generosity of folks at Firefox, Twitter, Google, and Emojione, who make up the bulk of the awesome emoji artwork we’ve gotten into our system.

One thing we feel really strong about here at Kwippe is the value of icons as art, and not just simple symbols you use in a menu or something similar. One need look no further than the Noun Project to see examples of icon art that are so detailed that they rival any “regular” art or graphic design piece. Emojis seem to be the next step in the evolutionary scale of artwork, and nobody seems to doubt that emojis are artwork rather than simple icons. But the reality is that they can be both. We applaud the team at EmojiOne for helping take emojis to the next level - and their latest pack really shines.

But icons, just icons, usually drawn with simple paths that may not even contain a color - can also contain all kinds of wonderful detail that makes for beautiful designs once you add a bit of coloring. We were really amazed when we put our first set of ordinary web icons into Kwippe, and saw just how they came alive.

Icon montages are sprouting up everywhere - on Fortune 500 websites as well as on the landing pages of design companies. That’s where a handful of icons are arranged artistically against a colored background to create an infographic or new design. These designs are often crisp and bold, conveying their message simply but clearly, and its one reason why they have become so popular.

We’ll keep hunting down and adding as many cool icons as we can here at Kwippe - and accept recommendations too - so if you have a cool pack you’d like to see uploaded into our system, give us a shout out here or on Twitter!

If you are using Illustrator regularly, and aren’t using scripting - you’re missing a fantastic way to improve your art and work a lot faster. Illustrator still remains an absolute powerhouse when it comes to vector art creation and manipulation, and despite my efforts to move the bulk of my tools to Node.js, I find that there are still things that only Illustrator seems to be able to get right. in particular resizing SVGs has proven really problematic via the command line and Node.js, but a simple batch process in Illustrator cleans up unruly SVGs with a high degree of accuracy.

IconFinder has a talented guy heading up their content development named Scott Lewis, and he’s put some really amazing scripts online on his Github account.

Another excellent list of scripts for Illustrator is at Astute Graphics - the company responsible for some amazing plugins.

While I still dream of being able to quickly manipulate every aspect of SVGs via a nice batch script in Node.js (ahhhh…) - in the meantime I’ll keep using these gems to get the job done!

OpenClipArt.org is a fantastic resource, and offers a treasure trove for people on small budgets. It does take a lot of time to comb through and find good resources though. I’ve found that the lack of good filters in their search engine make finding art really difficult to find. You can’t sort by style, or file size, or even recently uploaded. This isn’t a complaint, mind you, as I really appreciate the work the folks behind the open source project have done. It’s just a shame they don’t have a data geek working with them who could throw all of that awesome art into a sortable DB with some good tagging so that people could quickly find what they need.

We’re trying to do this ourselves, little bit at a time. It’s slow going! I’ve gotten through a couple of thousand images, things like animals, flowers, clothes, food, etc - but the work I have to do to get these images ready for use in our system is pretty time consuming. As there is no uniformity to sizing or creation methods, and some of the images even use bitmap elements inside of them - I have to pre-process each piece of art before we can use it.

But the good news is that we’ll keep going on this - little by little! We hope users will submit suggestions to us, or even folders of open clip art stuff they’d like to see up inside of Kwippe. We would have to verify that it actually came from OpenClipArt.org though, as licensing is really important.

The benefit to users of truly Public Domain artwork is enormous. You can use it for anything, and not having to worry about copyright, attribution, etc is a great thing. Logos especially can benefit from adding Public Domain elements - whereas you can’t really do that with work that is copyrighted, even under a liberal license.

We hope to see OpenClipArt.org continue to grow - and hopefully they’ll get some sorting and filtering soon to help reduce the time it takes to find a super cool design.

I remember back in the day when SEO was something only super geeks even knew existed! There was no such thing as social media yet, and it was so much easier to get your pages ranked that it sometimes seems like it was a different universe. You could put things up on Ebay, and they would sell within the hour if it was a good listing. While I haven’t bought or sold on Ebay in years, they don’t even do digital items anymore. And Etsy so far has just been a bottomless pit of listings, where throwing in 20 nicely crafted listings has generated hardly a visit. The web itself has so much more content that each blog post or web page is like a tiny speck in a vast ocean.

So in anticipation of our big launch I’ve started to look at the new SEO - and what that means for our website. This blog is proudly generated with Hexo, the Node.js static blog platform. We are very dedicated to making this app as serverless as possible, and Hexo is an awesome tool for quickly generating static content. There are tons of plugins as well, including a sitemap tool and Structured Data Markup tags already included in our theme (the lovely Icarus theme).

It remains to be seen if any of this will help - for me the blog is more about writing about issues we are facing day to day with our development, and sharing ideas that may be useful to other people. If that helps bring traffic, great. If not, I’ll keep blogging anyway! Ah and the broken down house above refers to my overall impression of the daunting task a new app/website faces when trying to get their SEO house in order…

We’ve been doing a lot of work with color palettes at Kwippe in the last few weeks. Even my kids have gotten in on the action, giving ideas about which colors look good together, and which don’t. Our app comes loaded with thousands of pre-made color palettes that it uses behind the scenes, as well as dozens for users to choose from in the front end.

I’ve come to see that some palettes that look lovely when you put them together, don’t produce very usable designs. I’ve seen 3 basic problems with most of these palettes:

1- Too few colors
2- Too many light or dark colors
3- Not enough contrast between the colors

One my favorites is actually the palette for the keyword APPLE. It’s great because it contains several nice greens and reds, along with some gold colors - but no black or white. While black and white are nice when used sparingly, they can also overwhelm the other colors if overused.

The ability for pro users to choose their own palettes and use them in the future is a cool feature I’m working on now, and it should help app developers and others to create some working definitions they can reuse over and over again with new graphic sets. We’re trying to keep a keen eye on the fact that Kwippe needs to be focused on generating usable designs for folks - not just art for fun! While we do think the app is pretty fun to use… :)