Loading...

Templarian - Design, Develop, and Deploy


Next Page

AngularJS Upload Button

The goal is simply to combine the simple CSS on this <a href="http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/">tutorial</a> with a AngularJS directive. You *do not* need the CSS from the tutorial above as it is injected by the directive. ```html HTML for Button <button ng-upload="/api/import" ng-model="importForm.data"> Import File Data </button> <!-- Preview --> <pre ng-bind="importForm.data"></pre> <!-- Error Message --> <ng-messages for="importForm.data.$error"> <ng-message when="failed">Failed to import file.</ng-message> </ng-messages> ``` When used it should look like something below... Hopefully you find this helpful.

About those Icons

This blog post is basically about me refocusing my priorities. Some of you may know I have a long <a href="http://www.webos-internals.org/wiki/Icons">history</a> of doing <a href="http://modernuiicons.com/">icon</a> work. I have kind of strayed slightly from Open Source in the last few years and I'm not really happy with that realization. With that said from now on Community Open Source is going to be my primary focus. !<a href="/files/freelance_break.png">Break</a> I wrapped up my last freelance client for a while and replied back to those in the last month that I will not be taking on new clients. This is a pretty big change for those than know me, since I always like to be doing something. The _first_ dive back into Community driven Open Source will be done with a new icon sharing platform as seen on <a href="http://materialdesignicons.com">Material Design Icons</a>. This is still in early stages, but will progress relatively fast now that is has focus. !<a href="/files/freelance_mdi.png">Material Design Icons</a> Wait-a-minute, isn't 'Material Design' Android? Definitely, but I assume that was phrased more in context with Modern UI Icons. For every new icon you see by me there will be a <a href="https://github.com/Templarian">commit</a> in the other repository for the same icon (in their respective style). !<a href="/files/freelance_crossplatform.png">Android</a> Now that is all sorted out, what is this icon platform. It is more-or-less a contribution platform specifically aimed at icons. The main goal allows developers *and* designers to acquire icons in the formats and sizes they want. !<a href="/files/mdi_dialogview.png">Contributors</a> This goes a little further to ensure that everything can be downloaded with as few clicks as possible. Even just right clicking to directly download a single asset. !<a href="/files/mdi_contextmenu.png">Context Menu</a> All the next goals focus on the _contributor._ This starts with easy entry for new designers and removing the minor hurdle of GitHub. Developers embrace it as their best friend, but it really is not needed to add icons. !<a href="/files/mdi_becomecontributor.png">Become a Contributor</a> A designer can either import (not shown) or paste in SVG path data. The server uses this vector data to generate all assets and download options. Once the icon is in the system they can tag and categorize it appropriately. !<a href="/files/mdi_addicon.png">Add Icon</a> Once a contributor is in the system all five icons that were previously submitted are visible to the public and a welcome email is sent. From then on there are no reviews. Just developers with a comment button (a bright pink comment button). !<a href="/files/mdi_comments.png">Comments</a> A designer has a few icons in the system now, but what keeps them motivated to keep adding new icons. A full range of stats and metrics will track pretty much all interaction and views as it relates to the user / contributor relationship. This rich data set should help track which icons users are more interested in. More anonymous global metrics on this will also be shown as traffic increases. !<a href="/files/mdi_contributorview.png">Contributors</a> From here developers can view a contributor's gallery of icons and get links to their various social networks. !<a href="/files/mdi_contributorpage.png">Contributors</a> Those are all the high level features so far planned for the initial release. I am really excited to get this platform further along and open it to anyone that would be interested in alpha testing. !<a href="/files/mdi_community.png">Contributors</a> If you actually read this far just for a mention about <a href="http://modernuiicons.com">Modern UI Icons</a>, yes that whole site will shift to this new platform. The two sites will have very tight integration.

Branding: Ribbon Icons

!<a href="/files/branding_ribbon.png">Ribbon Icons</a> This was a pretty ambitious project where the client needed over 100 custom icons (and many more from 3rd party packs to cut down cost). This project was completed a year ago, but I just now got around to creating the image above.