Shop Mobile More Submit  Join Login

Embedding deviantART muro

Tue Feb 12, 2013, 12:00 PM

A new way to use deviantART muro


The deviantART muro team have been beavering away for a little while on a new feature for third-party developers, and today we're pleased to reveal that deviantART muro now has a third-party embedding API.


What does this mean?


In simple terms it means that with a small amount of JavaScript code, you can bring the power of deviantART muro to your website, allowing your visitors to draw or edit images anywhere you like.


To make life easier for you there's a jQuery binding for the API, or a raw HTML/JavaScript example if you prefer to work more directly or use a different framework. There's also a WordPress plugin that can be used as an example of what can be done, or use on your blog if it's run on WordPress.


The jQuery plugin



Using the jQuery plugin is the easiest way to embed deviantART muro in your site, this quick snippet of JavaScript is an example of how little is involved in hooking up to deviantART muro to edit an image and receive the edited image back:


// Embed deviantART muro within the element with id "damuro-goes-here".
$('#damuro-goes-here').damuro({
   // Say what image we want the user to embed.
   background: '../images/crane_squared_by_mudimba_and_draweverywhere.png',
   // We don't want to have deviantART muro load automatically.
   autoload: false
   })
   // Bind a single-use onclick handler to open muro when they click on the splash screen
   .one('click', function () { $(this).damuro().open(); })
   // Chain down to the damuro object rather than $('#damuro-goes-here')
   .damuro()
   // The .damuro() object is a promise, so lets bind a done() and fail() handler.
   .done(function (data) {
           // Here's where you'd save the image, we'll just set the page background as an example
           if (data.image && !/\'/.test(data.image)) {
               $('body').css('backgroundImage', "url('" + data.image + "')");
           }
           $(this).hide().damuro().remove();
       })
   .fail(function (data) {
           $(this).hide().damuro().remove();
           if (data.error) {
               // Something failed in saving the image.
               $('body').append('<p>Sorry, something broke: ' + data.error + '.</p>');
           } else {
               // The user pressed "done" without making any changes.
               $('body').append("<p>Be that way then, don't edit anything.</p>");
           }
       });

If you want to see an example like this in action, take a look at the examples page.


The jQuery plugin also provides a convenient interface to the command API, allowing you to send commands to an embedded deviantART muro, the range of commands is currently fairly limited but it does allow you to apply filters or import new images into layers:


$('#damuro-goes-here').damuro().command('filter', {
   filter: 'Sobel',
   layer:  'Background'
   })
   .promise()
   .done(function (data) {
       alert("The filter was applied.");
   })
   .fail(function (data) {
       alert("There was an error applying the filter: " + data.error);
   });

Raw HTML/JavaScript examples



The jQuery plugin is the recommended way to use the deviantART muro API, but if you don't or can't use jQuery, you'll probably find the Raw HTML/JavaScript reference implementation to be useful, it has no external dependencies and can either be copied directly or used as the basis to write a plugin for the JavaScript framework of your choice.


The interface is less friendly: you'll need to send messages via postMessage() directly and implement your own secure event listener to receive the messages back and take care of setup and teardown yourself.


If you do use this example code to write your own JavaScript framework plugin, please let us know so we can give you a shout out and link to you.


deviantART muro WordPress plugin



If you're stumped for ideas or just want to add deviantART muro to your WordPress blog then the deviantART muro WordPress plugin is for you.


It hooks into WordPress in three places:


  • The Media Library - Now you can draw items directly into your WordPress Media Library.
  • Comments - You can enable deviantART muro in comments, allowing your site visitors to post images with their comments. You can configure moderation independently of text-only comments if you're not too keen on trusting the internet-at-large with uploading images to your blog.
  • Article shortcodes - You can embed an instance of deviantART muro within any article using a [damuro background='filename.jpg'] shortcode, this allows visitors to draw on an image of your choosing and post the result as a comment. How you use this is up to you, but you could use it to ask for critiques on your work or just to run competitions with a starting background.

Licensing and where to get it


All the code in these plugins is open-source under a standard BSD 3-Clause license, the image assets are under a Creative Commons Attribution 3.0 License.


You can find the latest version of all this code in our GitHub repository, or if you prefer you can fetch the latest stable releases from the jQuery plugins site and the WordPress plugins site.


Please note that the open-source license only applies to the plugin code provided on GitHub, not to the core deviantART muro code running on Sta.sh, that remains copyrighted and is the property of deviantART.



#DT and LOGR

Mon Nov 5, 2012, 11:42 AM by fartprincess:iconfartprincess:
It's Friday evening and after a long day, you check the code you were working on into git, have the commit reviewed, accepted, merged, and sync it live. All seems right with the world. You let out a sigh of relief, back your chair away from your desk, and walk away in a satisfied mist of ease. In fact, you're excited because you're going to a concert with your friends tonight.

But then, twenty minutes after you leave, it begins. Errors. Fatal errors. And you're not around to know. So what happens?

In dt, we look out for one another. One of the ways we manage to do this is through an error logging service we've built called Logr. If you read our article on DRE, you'll remember we mentioned a variety of functions we use to generate messages within DRE. One of these is called dre_alert().

For example, you set up an alert in your code that gets triggered when a draft in Sta.sh Writer can't be loaded:

dre_alert("Failed to load draft");


And it seems to be happening every 5 seconds. Oops. It turns out the error is caused by a simple typo. But fortunately everyone in our team gets e-mailed when these severe types of errors are logged and since we're situated all over the world, someone is almost always around to be accountable for problems and emergencies. So yury-n kindly steps in, fixes the problem, and everyone is happy again, yay.

How does LOGR work?


We store both a message and a "payload" (any additional debugging information you pass along) along with host and backtrace information to help figure out the chain of events that led to the alert. All of this information gets sent to a Redis server. We rotate the data using a round-robin algorithm similar to RRDTool to keep the memory usage constant despite the fact that we store millions of different messages within LOGR.

Is it just for emergencies?


Nope. We use it for several things, often things that are recognized problems but not emergencies. Every time the alert happens, the incident gets grouped together with other alerts of the same type, so we can get a better picture of how frequently it's occurring, any patterns, or if there is a particular reason, using the payloads available, of why it's occurring.

We can tag our alerts however we want. So say we have 5 alerts set up for deviantART muro. We can tag each as so and then search for it later to find alerts related to that part of the site. Cool, right?

We also can set thresholds on alerts. Once established, if the incident occurs more than the number of times allowed, an e-mail will be sent to a particular developer.

For example, in this particular alert, $allixsenos is set up to receive an e-mail any time this particular alert happens more than 40 times in one hour:



Mousing over the chart, we can see a bit more information, like the exact number of occurrences that happened at different points in time.

And, as mentioned, we also get a nice payload of information:



With LOGR, we're able to get an idea of which of these alerts are exceeding their thresholds, which are happening frequently, which alerts are most recent, and when they were first seen. This helps us easily rule out which events were transitory or already resolved and which are continuing to happen and need fast attention.

We also generate histograms so that we can see a breakdown of how the error is occurring. This is available for any piece of data stored so that you can see different variations that occur. For example, we could see how the error is occurring, spread out across different servers:



But again, this isn't limited to just servers. It's available for any data stored in the payload.

We're always looking for ways to improve LOGR to help us spot problems with the site in a timely fashion to minimize the amount of impact it has on deviants so you can continue to enjoy the site as usual :)

How We Debug in DT

Thu Sep 13, 2012, 5:31 PM by fartprincess:iconfartprincess:
As developers, we often have to debug complex data across several different layers: server-side PHP, Javascript, load time, server information, memcache events, how pages are routed, along with several other pieces of data.

In dt, we use an internal system called DRE (Developer Runtime Environment), which allows us to grab information about how the code we write is executed while making a minimal impact on the code itself.

What makes DRE especially awesome?


We can use it to help debug and solve problems that other users are having. To accomplish this, once we are aware that a particular user is having an issue, we can add DRE logging to this user, usually limiting the logging to the part of the site in which they are having the problem. We can then use the log to check for any errors that might show up.

For example, say a user named testera is having trouble with a journal. We can log debug data for him when he visits journal pages. Examining that log, several pieces of information are stored, many of which will give us a better idea of where the point of failure is. We might want to check privileges the user has or what roles they have in a group if that's where the journal is being posted.






We take this type of logging very seriously, so don't be :paranoid:, because we only use it as a last resort, typically only using it within our own personal development spaces with test data.

We also store the logs so we're able to link them to other developers (and even then, we only store those logs for a few hours).

Why is it helpful to developers?


Because we load all debug information in a single window, it is accessible either by clicking a box at the top of any page or through F2. DRE can log simple data types but it can also provide a highly readable breakdown of complex objects using nested tables.



We also use it to set up alerts. If a high-risk condition occurs on a particular page, the box used to display DRE will turn red and pulsate to make it more apparent to us that there is a problem. This could be something as simple as a failure to retrieve data or something as severe as a failure to include a file (or worse, a fatal error).

More importantly, it allows us to trace data and debug across multiple layers, including processes that are non-web-facing or for asynchronous tasks, where the data may not be immediately available at runtime.

It's not just for fixing bugs; it's also for helping us spotting slow-loading modules and queries and seeing where we can better optimize the number of queries we do need to run on any given page.

For example, on this page, we have 12 separate queries that run:



This is pretty good, given all the data that has to be loaded to make DeviantArt run.

But on a different page, we might have 52 queries, some which are very similar and loading data from the same tables. If we can find a way to cull them together, we can reduce the number of queries, which will help the site perform better. We have a way of handling this in dt, a technique called wenching (which is combining several queries into a single query--we'll get to this in a future article), but we might not be aware that something needs to be wenched until we get a composite look of everything taking place on the page. This is where DRE comes into play.

We can also use it for profiling to see when a file in particular is taking a long time to load. This might be because the code in that file has inefficiencies that need to be refactored. For example, here's a page just to show you how this might look:



Eek. Bad, right? Fortunately, this isn't something we see too much of. And when we do, we try to remedy it.

So how does it work?


This is a silly impractical example, but it'll do.

$orders = $this->get_orders();
dre_trace('orders', $orders);


If get_orders() returns an object of orders, DRE will trace that object into a table, labeled "orders". Simple enough.

"This sounds like it could be kind of messy when you have a bunch of developers all using it! If everyone is using DRE, the panel would be completely overwhelmed with junk I don't care about!"

Yep. That's why we use dre_trace() sparingly. We have several functions for DRE, one which takes a parameter to filter the message to only those who want to see it. For example, if I wanted to make sure only I saw $orders from the aforementioned example in our DRE panel:

$orders = $this->get_orders();
dre_cond_trace('fartprincess', 'orders', $orders);


At the end of the day, this utility saves developers a massive amount of time.

Last year, we released the deviantART and Sta.sh APIs, our first official support for third-party app integrations. Eager developers have asked for many new APIs since then, anxious to step away from page-scraping and toward officially supported integration. We're eager for that too! :eager: 

Today we are happy to announce three new Sta.sh APIs which give developers greater access to their users' Sta.shes!

---

The New Sta.sh APIs

  • Fetch Submission Media - Now developers can request the filesize, dimensions and URL for the original media associated with any Sta.sh submission.

  • Fetch Submission or Folder Metadata - Apps can now get all of a submission's dirty details (keywords, artist comments, thumbnail URLs, etc). It can also be used with Sta.sh folders for greater organization capabilities!

  • List Folders and Submissions - My personal favorite and the workhorse of this release: this API call gives developers full read access to a user's Sta.sh in an intelligent way. We'll look more at the tech behind this call below.
--- 

The Challenges of a Delta

List Folders and Submissions (aka /delta), the most powerful call in this release, uses an incremental approach to allow apps to retrieve and store the current state of a user's Sta.sh in the most efficient way possible. By using the current state, developers and apps can recreate the Sta.sh experience on any device with any interface they desire. Let's look at what it does, how it works, and some of the challenges that dT faced during development.

Users can have up to 10GB of deviation submissions in their Sta.sh - literally thousands of 1Mb submissions. Each submission belongs to a folder, and folders can have many submissions. For an application to represent this to the user, it needs to know everything about the submissions as well as the containing folders. Because submissions can be updated, published, deleted, and moved between folders, an application needs to constantly check for the data.

Challenge 1: How can a third party application check the status of thousands of deviation submissions and Sta.sh folders repeatedly without drastically increasing server load and lagging the app?

Challenge.. Accepted: The solution was inspired by Dropbox's /delta API (though it's fundamentals can be seen throughout the world of computer science). The first time an application loads a user's Sta.sh state, we give it everything. All of the folders, all of the submissions. That kind of transmission could be megabytes, so we chunk it up into result sets of roughly 120 submissions. The application makes as many calls as necessary to retrieve the full list, and stores all of this information locally; when it completes, it will contain the exact state of that user's Sta.sh.

We also give the app a unique cursor which represents that exact state of that user's Sta.sh. After the user interacts with Sta.sh (submitting new deviations, modifying existing ones, publishing and deleting, moving deviations between folders), the application can send us the cursor and we'll give it everything that has changed. Checking for updates becomes a very fast, repeatable process for the application.

Challenge 2: How do we build the list of modified submissions and folders?

Challenge.. Accepted: Let's reconsider the data challenge above: 10GB of deviations = thousands of submissions = tons of data. Per user. Storing the exact state of a deviation at each step in the process would.. well, it'd be like striking the immovable object with the unstoppable force. Chuck Norris would disappear from existence. :confused:

Aiming to save ol' Chuck, we implemented a circular log table to track each user action in Sta.sh; we can store as many as one hundred and sixty thousand user actions. Anything above that wraps the table and automatically deletes old entries.

Each cursor corresponds to a specific log entry, so we can quickly compile a list of modified items since that cursor. Note that we do not record the state of the item in the log - we just record the fact that it changed in some way. This lets us fetch data for a small list on request, making the delta call cheap and fast.

Challenge 3: What happens when the circular table rolls over and old entries are lost? What if my application's last cursor becomes invalid? What if a submission is added and deleted between delta calls?

Challenge.. Accepted: The first two questions are examples of edge conditions where an incremental approach breaks down. To compensate, we have a special flag called reset that tells the application it needs to throw away its stored data and start over.

Because we only log the change in items, the list of those changes is likely to contain useless transactions like an submission that was added and deleted between delta calls. Applications don't care about this kind of entry - it won't appear in the app anywhere, doesn't exist anymore, and is simply confusing to see in the delta list. We applied an extra layer of filtering on the changelog to ensure that the application receives relevant, useful updates.

---

That's cool and all.. but where is the API for [awesome feature X]?

As kouiskas pointed out in last year's journal, adding new APIs is a time-consuming process; once we release an API, we want to support it forever. This limits our choices to APIs that are stable, scalable, and compatible with our long-term development goals. 

There have been numerous requests for great APIs over the last year; unfortunately, we can't build them all. Many would rely on infrastructure that will be refactored (e.g., Message Center) or that is in the process of being refactored (e.g., Search). 

Does this mean you should stop requesting those APIs? Not at all. Keep the requests coming! If you're an app developer and really, really want to see a specific new API call, here are some things that will help us review your request:
  1. Give us some stats. 
    If you have a successful app that is being used daily by deviants worldwide, growing in popularity and proving a benefit to the community, throw some numbers our way. Although popularity doesn't affect what is and isn't possible, it can be an important factor in deciding where to concentrate our efforts for the most benefit to most users.

  2. Show us what your app will do with the call. 
    Most of you already have very successful dA apps in the desktop and mobile world. We realize that there is a lot of DiFi hacking and page scraping necessary to make your app do what you want it to do. Show us how the new API will reduce your reliance on these methods. Include screen captures if you can, we like to look at shiny XHR logs and fail messages.

  3. Be specific and technical.
    We're developers, just like you. If you see a need for an official API, take the time to help us understand exactly what you want from the API (request parameters and result objects). This doesn't mean that we will honor your spec request exactly (we do what we can with the infrastructure we have), but it will help us understand your need more clearly.

DT 2012 Baguette meet at Breadlands

Tue Jul 17, 2012, 1:19 AM
Breadlands Logo By Randomduck-d52tawr by randomduck

Place

Our dt development team is 100%  remote. We documented our first foray in cautiously  meeting each other last summer in the blog DT 2011 Army Barracks Raccoon-Con, the event that took place in Marin Headlands near San Francisco. Or team is also fairly evenly distributed across a couple continents and several timezones, with many of the developers hailing from UK, France and other European countries. This year, those Europeans managed to coerce North America based developers to get their papers in order and tricked them into embarking on the long flight. Destination - beautiful village of Les Sauvages (which literally means “the savages”), France, countryside near Lyon and Beaujolais region. This event got named "Baguette meet" and the camp we would be staying in for the next two weeks as "Breadlands" in homage to our previous year meet at Marin Headlands.

Les Sauvages by micahgoulart

Planet Breadlands by ArtBIT

And this is our own germ city on the tennis ball!


Untitled by randomduck   Untitled by randomduck


The morning ride by samshull


Work

We did presentations, ignite talks, many pair-coding sessions encompassing work on small ideas and tech-debt. We completed two project hackathons with 19 mini project sprints. And what did not we have this year? We did not have a story of thousands of trunk commits, hundreds of deployments, rogue servers, long read-only and broken site disasters! And why? Because as first order of business during the meet was to switch our repository and deployment system from svn to git. Several of months planning went into this switch and its a subject of its own future blog post. All the work was done in private or shared feature branches, as well as code reviewed using our now standard phabricator process. Some successful bits have been merged already and the rest are to follow in coming months.


DT Discussions by micahgoulart

Untitled by randomduck  Sergey by randomduck

Untitled by randomduck  Untitled by randomduck

The morning when we found out about our remote workers' attendance practices


People

Last year, a little over 20 people converged on San Francisco for our meet. This year we had 39 people in attendance. DT has grown and in addition to usual crew, we had some new faces to meet and welcome. And also, we invited our friends and occasional nemesis from Product and Product-Marketing to join us. And on the second day we had our first infirmary patient, striken down by what later became diagnosed as a "Tahitian Plague". This a cautionary tale of the dangers of gathering so many remote developers together and exposing their untrained immune system to germs, presumably spread by office workers in Product Marketing! Also, a word of caution to others who might plan on having a meetup of large group of net addicts in the tranquil countryside. Do not count on the internet to function! Even with having top-of-the line bandwidth shaping system and after throttling every bandwidth hungry service and chasing down every rogue downloader, the internet was .. spotty at best. Complaints about reddit withdrawal suffering rolled in regularly, but what else would you expect from a group where you wont blink an eye when you see two people sitting shoulder to shoulder in an empty room, having a very lively conversation on ... Skype chat!


456342 10100887311732097 310159810 O by randomduck

pachunka insists that he is "on the mountain"


Breadlands 2012 by micahgoulart

Untitled by randomduck      Untitled by randomduck

Common scene: Product team is pacing and thinking, while DT developers are eating gravel!



Untitled by randomduck   Untitled by randomduck

Untitled by randomduck  Coding Hat By Artbit-d545fje by randomduck


Untitled by randomduck  Untitled by randomduck

Performance of a Traditional Canadian folk music band



Untitled by randomduck

Introducing Mr. June, from "Accordian Babes" pinup calendar


Da Breadlands 2012 By Knightar Web By Micahgoulart by randomduck

This is the group shot where we were told to act normal ..


Food

When we called our camp "Breadlands", we had no idea how much bread we are gonna see and eat over the next two weeks. And cheese, and sausage, and more cheese and bread. And wine, of course. But despite three healthy, regularly scheduled meals each day, the fine fast food establishments of nearby town were raided regularly with an aid of a gypsy-cab.

Untitled by randomduck    Untitled by randomduck

Here is about a three hours supply of beverages. And there is jekor wondering  how to say "omelet" in french


Untitled by randomduck     Untitled by randomduck

"I would kill for the cheeseburger"


Untitled by randomduck   Untitled by randomduck


Fire 

The tradition of very large bonfires continued. And it appears that several people have spent the offseason practicing their ax handling. We also, unlike last year, did not have any contractual obligations not to consume alcohol. Which interestingly lead to fairly mellow pace of said consumption.
 
Untitled by randomduck Untitled by randomduck


Animals

Attentive reader might remember that one of the hits of last year meetup were encounters with ravaging troops of raccoons that possessed no fear of humans. In contrast, Breadlands had an abundance of rather mellow farm animals that had no interest in stealing candy and ibuprofen.


2012-06-13 21.30.26 Hdr 2 by randomduck

Where DT sees a real cow for the first time


Untitled by randomduck  Untitled by randomduck Untitled by randomduck









Recent Journal Entries

We're Hiring Developers

We're looking for talented web developers to join our team! :la: Interested? Check out deviantart.theresumator.com/ap…

Journal Writers