R7 – React-Bootstrap: Updated Thumbnail, added divider option

Apr 14, 2015

As per the request by the project creator mtscout6 on the last pull request, I’ve added a div option to the thumbnail. In this spec, the user can specify a “href” prop in order to use the thumbnail as an anchor tag. If the user omits the “href” property, the thumbnail will be a divider with an image at the top, and caption divider beneath.

I am currently waiting on comments for the latest addition to the thumbnail pull request.

For someone using the react-bootstrap framework the user would create the desired result below.

Anchor Thumbnail:
Anchor Thumbnail

Div Thumbnail:
Screenshot 2015-04-14 16.08.34

R6 – Contribution to React-Bootstrap

Apr 7, 2015

React is a javascript library developed by facebook for UI. It’s gaining traction as one of the most popular UI building tools because of it’s ingenious and easy to use coding style. Bootstrap is created by Twitter and is the most popular front-end framework which gives you beautiful components to rapidly web develop.

React-Bootstrap is a marriage of these two technologies.

I’ve contributed a new component to react-bootstrap. I’ve added the thumbnail component to the project as seen in Bootstrap’s docs which is a great component for featuring images, and is best used within the already existing grid system. Being new to the repository, I followed the coding examples of already existing components to create Thumbnail. It was a straightforward component to code and I am currently working through the responses on my pull request.

Traversing the Backlog

Mar 30, 2015

For this release, I traversed the backlog of Webmaker and added validation for a “counter block” editor. I investigated and marked reported issues such as this one have been resolved. As with most moderate sized open source development there are a large number of issues which are resolved through unrelated updates, or are fixed by other contributors who were not aware there was an open issue on Github regarding the issue. Sometimes it’s hard to put words to a specific issue, and because of that, it’s difficult to find it among the large list of issues for the project. Sometimes, the back log needs some work to clear out solved issues.

If you’re attempting to get into open source development, confirming issues do in fact exist is a very valuable contribution. Whether it’s a visual issue or an issue that only appears on certain devices there is a lot of value to validating the backlog.

As mentioned, I also added validation to the counter block’s editor. When the user is typing in a min that is larger than the max, both fields will show an error underneath the field. This is using Vue’s v-if functions which validate the “truthiness” of a statement and will create the error div as the user is typing. You can check out the pull request here.

For the next release, I will be focusing on Facebook’s React framework rather than Vue. While Vue is a great library for presentation and synchronous features, it has an API that leaves much to be desired. Further, React has a great deal more traction in today’s front-end development world. I will be starting by browsing Github’s trending section to find a suitable project to contribute to. I investigated into contributing to React directly but at this time, all the bugs labelled as beginner bugs are already assigned and in the works. Therefore, to beginning with projects that utilize react is the most logical start.

1-Month Plan for OS development

Mar 21, 2015

I will be returning to Mozilla’s Mobile Webmaker for the next month in order to tackle existing bugs that have reared their heads since the project was switched from Vue to React. During the next week I will be doing primarily visual updates to the UI. Following that, I will be spending the rest of the month developing a new requested feature (possibly this feature among others). I have a lot of hope for this Mozilla project and I’m excited to get back to working with Webmaker App.

Integrating XMP into iOS – Work in progress

Mar 8, 2015

I am currently attempting to integrate Adobe’s XMP Toolkit into iOS. Although it is simple enough to use the toolkit on a simple C++ program, it is proving difficult to link the library to iOS as it not only uses a different architecture, but also a different language (Swift). However, XCode is able to compile both languages and a linking of them should be possible, using a wrapper in order to access the functions from Swift.

I am currently unsuccessful but I will detail my attempts.

First, I created a basic 1-page application which allows the user to attribute a license to a static image. This is simply for testing once the library is linked.

Screenshot 2015-03-08 18.38.34

Next, I generated the static library for the XMP toolkit. To do this, download the toolkit, install CMake and run the shell code located at XMP-Toolkit/build/GenerateXMPToolkitSDK_mac.sh this will generate the .a files you need for the static library. This will not have dynamic sizing which is useful for mobile development. Copy the XMP-Toolkit folder into your project folder.

From here a great deal of trawling for research and anecdotes from blogs of people achieving similar goals of cross-platform and cross-language compilation in XCode assisted in determining the following settings. Within build settings and you’ll need to change the build settings for the following:

Architectures: Standard architectures
Base SDK: iOS 8.1
Build Active Architecture Only: No
Supported platforms: iphonesimulator iphoneos macosx
Valid architectures: arm64 armv7 armv7s x86_64 i386
Scan all source files for includes: yes
Header search paths: the include directory for XMP (public/include)
Preprocessor macros: MAC_ENV=1
Other linker flags:
directory to libXMPCoreStatic.a
directory to libXMPCoreFiles.a
-framework Cocoa

Here are some screenshots of what some of those build settings look like:
Screenshot 2015-03-08 18.39.23

Screenshot 2015-03-08 18.39.09

Screenshot 2015-03-08 18.38.58

At this point, I seem to be pointed in the correct direction, and it seems to be an issue with how the compilation process is searching, or linking the headers specified in Header Search Path to the compilation. I’m receiving 12 lexical and/or pre-processor issues (not finding the file) or processing issues (not being able to build the specified header).

It should be possible to link it, as Adobe mentions that the toolkit works in iOS (XMP Toolkit SDK Overview – Adobe).

I am seeking assistance in attempting to link this static library to iOS at the moment in hopes that an easily configured process can be determined. At the moment there seems to be applications which are capable of doing basic XMP reading, and a custom developed API which is capable of both reading and writing (http://www.chilkatsoft.com/xmp-objc.asp) though this application comes at a charge. If you are interested in assisting me, or have insight into this process please don’t hesitate to contact me.


There were many more, but I did not save all the sources as I went.

My stack overflow question:

Scheme for adding a valid license to an image using Adobe XMP Toolkit

Feb 20, 2015

In continuation of my previous post, I’ve created a sample which stores the licenses, uses the XMP Toolkit to create the valid XMP packet, and applies it to a file. The real take-away is the library function which allows easy creation of XMP packets and can be used now in C++ programs. However, the size of the XMP toolkit is large as it will still take whittling away the dense and irrelevant code, or integrate it into wrappers like the Android XMP kit that my fellow team members are working on. The following code is adapted from code released by my colleague Gideon Thomas.

I am using an XMP metadata packet instance and enums in for the function parameters. Using enums allows coders to easily reference a CC license without the use of “magic numbers”. These enums are used to access a map which contains instances of license objects, which in turn contain the license information.

AddLicense(MyXMPPacket, CC_ATTRIBUTION) is the function where MyXMPPacket is an XMP packet which is either new or contains a previous license and CC_ATTRIBUTION is the enum which could be any of 6 creative commons licenses.

In order to determine how to add the specific properties using the API, I referenced this list, as well as this.

Snippets from the code

Note: These are condensed, for proper usage reference the files.

The code which adds a license to correct properties is:
“URI” is where the license URI is placed as a string.
“Description” is where description for Usage Terms would be placed.
meta->SetProperty(kXMP_NS_XMP_Rights, "Marked", "True", 0);
meta->SetProperty(kXMP_NS_XMP_Rights, "WebStatement", "URI", 0);
meta->SetProperty(kXMP_NS_XMP_Rights, "UsageTerms", "Description", 0);

kXMP_NS_XMP references the namespace “http://ns.adobe.com/xap/1.0/rights/” which is defined in XMP_Toolkit/public/include/XMP_Const.h (a great resource for those working with the XMP Toolkit for any reason).

To affix the code to the file:
myFile.OpenFile(filename, kXMP_UnknownFile, opts);

In this release is the new license class, library code in conjunction with the test code. In order to compile this, you will also need the aforementioned adobe XMP library repaired for OSX compilation by my colleague Gideon Thomas.

Screenshot 2015-02-20 17.28.37

1. C++ Files
2. Image with license added

Taxonomy of Extensible Metadata Platform (XMP) with a Creative Commons License

Feb 2, 2015


Adobe’s Extensible Metadata Platform is capable of the “creation, processing, and interchange of metadata”.(Adobe, 2) and most resembles the well-known XML format. The XMP packets are widely used in image files already, Adobe has integrated XMP into the most well known name in photo editing (Photoshop), 2D graphics creation (Illustrator), video editing (Premiere) and photo management (Bridge) making them the most logical choice for globally defining image metadata standards. This includes licensing information but is mostly used for last date modified, author, and common metadata. The XMP library is available from Adobe in C++ and can be downloaded here. This, among a vast functional list, allows the programmatic reading and writing of these XMP files.

Creative Commons provides simple, easy licenses that anyone can attribute to their works. These licenses have a wide variety of specifications that include allowing for share-alike, commercial and noncommercial uses. The fact that these can so easily be changed and still hold their legal meaning makes the Creative Commons licenses a fantastic choice for those working with images.

XMP Properties – Content Analysis

Among the large number of fields available in the XMP protocol, there are three fields which will be useful for adding the license: “Copyright Notice” (string), “Copyright Status” (boolean), and “Rights Usage Terms” (string). In order for proper attribution, it is also useful to include the option to an author for the work, but is not necessary in the basic case.

The length of these fields, as being a derivative of XML implies, are not limited in size other than what the image format can hold. However having a large field may cause unnecessary bloating to the image file. The full license for a Creative Commons license varies slightly depending on the particular customizations but are approximately 1600 words. Since these licenses have the aim of being in most image files, including full licenses could cause a great deal of clutter on the Internet. Therefore, it would be preferable to include a uniform resource identifier (uri) which Creative Commons provides for all license variations. Inserting this into the “Rights Usage Terms” would be sufficient for providing these terms.

Comparing Packets

Creative Commons provides a tool for generating an XMP packet which can be found here.

The packet generated by the tool available on Creative Common’s website does not make use of “Rights Usage Terms” and instead uses a description, with an XML namespace named “cc”. However, although it has proper XML syntax and does not break XMP syntax, this does not closely follow the XMP specifications as per Adobe’s documentation. This may be possible to include if there is a specific reason for it, but I can’t see an obvious reason for including the namespace. This packet does include the “Copyright Notice” and “Copyright Status” which are correct. However, the “Copyright Notice” contains repetition for languages “en”, “en_US” and “x-default” which could be used as an optional feature within the library.

I used Adobe Bridge to produce an XMP packet using the terms from the Creative Commons generated package to compare. The one produced was very similar, but excluded the aforementioned xml namespace, and did not have repetition for language options. In short, this package generated by Adobe Bridge seems to be a more lean XMP packet and conforms perfectly to the XMP specifications while providing a fully valid license.

Take a look at the packets, the first being the one generated by Creative Common’s XMP packet tool. And the second I generated using Adobe Bridge.

  1. Creative Commons Generated XMP Packet
  2. Adobe Bridge Generated.

I have attempted to contact Creative Commons Metadata team, and I am awaiting correspondence to inquire about the XMP formatting and other questions regarding embedding metadata. If you have any comments or questions regarding my findings, you can find my contact information under “Contact” on my website.

Embedded License Data

Jan 23, 2015

Right clicking and pressing save as is the most known practice for downloading a photo on the internet. There are few venues for photo hosting which will protect a photo online. Flickr for example provides right-click protection, watermarks, and original size protection. Even these features do not fully protect the piece of work and therefore we must, as developers and creatives alike, operate under the assumption online that any photo can be taken without permission.

The next line of defence is licensing information. Even if the proper information is given on the same page that the photo can be downloaded from, once it is in another location the licensing data does not come with the photo. It’s therefore difficult for someone to know who the photo is attributed to and what they are able to do with it legally.

Broxigard via DeviantArt

Embedding licenses in the image files is Moby-Dick and developers Captain Ahab. Long desired by many legal and creative entities around the web but never quite fully realized. The ability to use a library or libraries to add this easily to an application would be a huge boon to the popularity of proper licensing, which lets face it, benefits everyone.


Working with my professor David Humphrey and 4 other peers at Seneca College, we are engaging the task of creating a library or libraries which will enable a developer to attribute a Creative Commons license to image files. This has been something Creative Commons is eager to have as a tool in order to further innovate licensing.

Most popular image formats have an area which allows text to be inserted into it. As David Humphrey mentions PNG, JPEG and GIF all have fields which the licensing information, a condensed license, or even a permalink to the license can be added into.

To begin, we have divided into groups. We are first attempting to programatically insert licensing into an image file via Android by whatever means necessary.

I am investigating the Extensible Metadata Platform (XMP) file format as per Adobe’s specifications in order to develop the most appropriate method for generating and attributing a Creative Commons license. This will need to take into account the length of space available in the smallest space between major image formats, and allowing for the creator of the image to customize the license. An example of the tool Creative Commons has can be seen here.

Please also check out David Humphrey’s blog post on the topic.

Release 0.4 – Map Block Pull Request

Dec 5, 2014

I have submitted a pull request for the Map Block in Mozilla’s Webmaker App. This component was extremely helpful in learning nuances of programming with Node.js, Vue.js and Leaflet.js. Currently it will locate on a map based on latitude and longitude coordinates and display a marker on the specified location. You can optionally add information to a popup window which will give further information the user can input like address or address title.

The Map brick at this moment is the most complex and most memory-consuming brick in Webmaker App but in the future additions may be able to made to reduce it’s load on network such as better caching of the map tiles. However, making less network work means that the application will be more bloated so that is a trade-off to be explored in future fixes.

There were many issues, but to highlight:

  1. Choosing map provider was a very difficult process which took a great deal of research into licensing and map tile servers. In the end, I decided to use MapQuest as there are no limits on the use and is free for anyone to use within their application. Since what Webmaker App does is allow others to create their own applications, this was the most permissive server to use which will allow people enabled with creating their own apps, to not worry about licensing.
  2. Using maps in a dynamic application was difficult due to re-loading of the page and the fact that it is run on Vue.js which manages the presentation. Mitigating the presentation of the map with Leaflet involved re-setting the map during page re-loads.
  3. Multiple maps on the same page was perhaps one of the most difficult tasks to solve. I used the singleton paradigm to allow access to Leaflet through all blocks within the app. However, using a unique ID based on the newly created block for the map div and putting the map object within the module data in Javascript allowed me to have multiple maps for a single app, and multiple apps with maps.
  4. Leaflet has a strange proprietary statement for referencing the marker icon resource. However since Leaflet is imported as a node module, once the project compiles the node modules folder is no longer accessible. Therefore, I had to move the marker icon images into the static resources folder and reference this folder.

All in all, I am very happy with the map block. But for the future I would love to add geocoding in order to get longitude and latitude coordinates from an address and possibly customize the visuals.

You can check out the pull request here.

Map Block – Attributions

Dec 4, 2014

As I am furthering my development of the map block for Mozilla’s Webmaker App, I have come into an important decision of it’s development: choosing tile provider. Running a server to deliver tiles is not an easy task and depending on how widely Webmaker App is used, it may be necessary to start a tile server on the Mozilla network. However, until then there are a few free alternatives.

I decided to use Leaflet.js to develop this map block, and thankfully it makes it extremely simple to switch between tile servers.

Open Street Maps (OSM) is a great source for map tiles and for testing I have used them up until now. However their tile server is forbidden for use in applications as per their terms. Therefore based on recommendations on their website I have turned to use MapQuest’s tile server which, to my surprise, is provided free for use in applications as long as they are properly attributed.

I have seen many suggestions on the Webmaker App issues page regarding lookup from address to coordinates and many other options. But the reality is, these features require services, and services require licenses.

At this point as an open source project the map block is limited to only locating based on longitude and latitude coordinates until an agreement is sourced out with Google who seems to be the leading force in address-to-coordinate technology.

I only have a few more things to fix for this block to work in a basic form:
– Fix strange bug of marker icon not loading (could be a node package path error)
– Allow multiple map blocks to work on the same app (if you have experience with this, please help me.)
– Fix leaflet attribution on edit page so it doesn’t overlap other content

If you would like to comment or give me some help, you can check out my progress on the branch mapblock-leaflet.