Shadow Master: Shadow DOM

I have had many sleepless nights trying to deal with CSS bleeds and clashing element id attributes. You have to expect this when you are working on a code base that is accessible to a lot of developers especially in an enterprise setting.

Good thing that I am not the only one encountering this problem and the new w3c specification hopefully would address this problem. (http://www.w3.org/TR/shadow-dom/#dfn-functional-encapsulation)

The SHADOW DOM

As defined in the specification this addresses the functional encapsulation of element in the DOM tree.
What does this mean? Well first you can now have chunks of html elements with styling that will not affect the rest of the DOM tree. Why would you want to have chunks of html elements? Of course to create widgets. This is the reason why the Shadow DOM is an important part of building web components.
Once you created a chunk of html (like a widget) you can now re-use this widget all over the place without the fear of having it’s style messing up the rest of your page and you might even want to provide that widget to other developers to use, without them messing the styling of what they are working on. The Shadow DOM is an essential specification to bring forth more complicated and sophisticated web applications because it gives web developers the tools to create complicated widgets that can be re-used with little effort and integration issues.

Here is a great link on how you can use a template and use the shadow DOM

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/

Comments

Post a Comment

Popular posts from this blog

OAuth 1.0a Request Signing and Verification - HMAC-SHA1 - HMAC-SHA256

Image
This is a security project that I did this Fall semester. I was interested in why the OAuth1.0a specification did not require you to sign a request using RSA-SHA1 or any RSA algorithm. The first issue that I found is where would you store your private keys in a javascript client? - as a javascript encrypted file ? from the browser ?  - that will be a security hole if you allow javascript to get private keys. These are some of the questions that got me asking and which I cannot find answers to for now. OAuth 1.0a Signature Signing and Verification using JavaScript Implementation Background The OAuth specification tries to define an API authentication method that allows consumer websites or applications to access protected API Resources from a Service provider. The advantage that OAuth provides is that the user of the website or application is not required to disclose their credentials to their service provider. Another advantage of using OAuth to authenticate is that it does not
Read more

Spark DataFrame - Array[ByteBuffer] - IllegalAurmentException

IllegalArgumentException - ByteBuffer - Spark DataFrame I was processing a several million documents (~ 20 million) in which we need to extract the NLP features using NLP4J, OpenNLP, and WordNet. The combination of the three NL features blows up each record to 11 times its original size. We are using all three because we do not know yet what feature sets will be helpful to us. The original dataset is in parquet files in HDFS (16 partitions). I thought that was convenient just use withColumn and pass a UDF (User Defined Function) on the column where it needs those features. withColumn adds the calculated column back to the DataFrame. So I created the spark job (I am on Spark 1.5.2-cdh5.5.2)for the above, and things started to get nasty. I am blowing up the ByteBuffer array on the in-memory columnar storage. This is the exception that I am getting. There seems to be no reference in my code in this stack trace. java.lang.IllegalArgumentException at java.nio.ByteB
Read more

Gensim Doc2Vec on Spark - a quest to get the right Vector

Ever since I joined the R & D group we have been doing a lot of cool things, like trying IBM Watson (see previous blog entry). Now we are doing a lot of Natural language processing.  We wanted to compare the similarity of two documents. There is this excellent project Gensim ( doc2vec ) that easily allow to you to translate large blocks of text to a fixed length feature vector to make comparisons. Here is the link to the  original paper  from some people from Google that explains the approach. In essence, they wanted to find a representation that will overcome the weaknesses of the bag of words model. The doc2vec approach proves to be a reliable approach to comparing similarities of documents because it takes into consideration the semantics and the order of the word in context. So with that, we wanted to use it for a corpus of 26 million documents. Calculating the doc2vec for 26 million documents is not a small task, so we need to process it in Spark. The problem is that there
Read more