Congratulations!

[Valid RSS] This is a valid RSS feed.

Recommendations

This feed is valid, but interoperability with the widest range of feed readers could be improved by implementing the following recommendations.

Source: http://keithstric.me/feed/rss

  1. <?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
  2. xmlns:content="http://purl.org/rss/1.0/modules/content/"
  3. xmlns:wfw="http://wellformedweb.org/CommentAPI/"
  4. xmlns:dc="http://purl.org/dc/elements/1.1/"
  5. xmlns:atom="http://www.w3.org/2005/Atom"
  6. xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
  7. xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
  8. >
  9.  
  10. <channel>
  11. <title>Keith Strickland</title>
  12. <atom:link href="http://keithstric.me/feed/" rel="self" type="application/rss+xml" />
  13. <link>http://keithstric.me</link>
  14. <description>Looking for New &#38; Exciting Technologies</description>
  15. <lastBuildDate>Tue, 17 Jan 2017 17:22:05 +0000</lastBuildDate>
  16. <language>en-US</language>
  17. <sy:updatePeriod>hourly</sy:updatePeriod>
  18. <sy:updateFrequency>1</sy:updateFrequency>
  19. <generator>https://wordpress.org/?v=4.7.3</generator>
  20.  
  21. <image>
  22. <url>http://keithstric.me/wp-content/uploads/2016/06/gravatar.jpg</url>
  23. <title>Keith Strickland</title>
  24. <link>http://keithstric.me</link>
  25. <width>32</width>
  26. <height>32</height>
  27. </image>
  28. <item>
  29. <title>Goodbye Evernote</title>
  30. <link>http://keithstric.me/2017/01/17/goodbye-evernote/</link>
  31. <comments>http://keithstric.me/2017/01/17/goodbye-evernote/#comments</comments>
  32. <pubDate>Tue, 17 Jan 2017 17:22:05 +0000</pubDate>
  33. <dc:creator><![CDATA[Keith Strickland]]></dc:creator>
  34. <category><![CDATA[Misc]]></category>
  35. <category><![CDATA[Technology]]></category>
  36.  
  37. <guid isPermaLink="false">http://keithstric.me/?p=798</guid>
  38. <description><![CDATA[I&#8217;ve been using Evernote for a few years now and have enjoyed it&#8217;s feature set and the ability to plan and document a complex project (namely home/shop projects) with shopping lists, ideas, etc. But recently every time I attempt to use Evernote to create a quick note or maybe just jot something down, I&#8217;m presented with a request to upgrade to a pay plan, or to update or just general advertising. I can no longer just open it and create a note. Because of this, I have now backed up anything I need and uninstalled Evernote from all my devices. I guess I&#8217;ll have to use Google&#8217;s Keep or Microsoft&#8217;s One Note.]]></description>
  39. <content:encoded><![CDATA[<p>I&#8217;ve been using Evernote for a few years now and have enjoyed it&#8217;s feature set and the ability to plan and document a complex project (namely home/shop projects) with shopping lists, ideas, etc. But recently every time I attempt to use Evernote to create a quick note or maybe just jot something down, I&#8217;m presented with a request to upgrade to a pay plan, or to update or just general advertising. I can no longer just open it and create a note. Because of this, I have now backed up anything I <em>need</em> and uninstalled Evernote from all my devices.</p>
  40. <p>I guess I&#8217;ll have to use Google&#8217;s Keep or Microsoft&#8217;s One Note. I haven&#8217;t decided which one I&#8217;ll be using yet.</p>
  41. <p>Until next time&#8230;. Happy Coding.</p>
  42.  
  43. <style>
  44. .huge-it-share-buttons {
  45. border:0px solid #0FB5D6;
  46. border-radius:5px;
  47. background:#3BD8FF;
  48. text-align:right; }
  49.  
  50. #huge-it-share-buttons-top {margin-bottom:0px;}
  51. #huge-it-share-buttons-bottom {margin-top:0px;}
  52.  
  53. .huge-it-share-buttons h3 {
  54. font-size:25px ;
  55. font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
  56. color:#666666;
  57.  
  58. display:block; line-height:25px ;
  59.  
  60. text-align:right; }
  61.  
  62. .huge-it-share-buttons ul {
  63. float:right; }
  64.  
  65. .huge-it-share-buttons ul li {
  66. margin-left:3px;
  67. margin-right:3px;
  68. padding:0px;
  69. border:0px ridge #E6354C;
  70. border-radius:11px;
  71. background-color:#14CC9B;
  72. }
  73.  
  74. .huge-it-share-buttons ul li #backforunical798 {
  75. border-bottom: 0;
  76. background-image:url('http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/buttons.30.png');
  77. width:30px;
  78. height:30px;
  79. }
  80.  
  81. .front-shares-count {
  82. position: absolute;
  83. text-align: center;
  84. display: block;
  85. }
  86.  
  87. .shares_size20 .front-shares-count {
  88. font-size: 10px;
  89. top: 10px;
  90. width: 20px;
  91. }
  92.  
  93. .shares_size30 .front-shares-count {
  94. font-size: 11px;
  95. top: 15px;
  96. width: 30px;
  97. }
  98.  
  99. .shares_size40 .front-shares-count {
  100. font-size: 12px;
  101. top: 21px;
  102. width: 40px;
  103. }
  104. </style>
  105. <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
  106. <h3>Share This:</h3>
  107. <ul class="huge-it-share-buttons-list ">
  108. <li class="nobackground " >
  109.  
  110. <a id="backforunical798" href="https://www.facebook.com/sharer/sharer.php?u=keithstric.me/feed/"  onclick="javascript:void window.open('https://www.facebook.com/sharer/sharer.php?u=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -0px -120px "></a>
  111. </li>
  112. <li class="nobackground " >
  113.  
  114. <a id="backforunical798" href="https://twitter.com/share?status=keithstric.me/feed/&text=Goodbye Evernote"  onclick="javascript:void window.open('https://twitter.com/share?status=keithstric.me/feed/&text=Goodbye Evernote','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -30px -120px "></a>
  115. </li>
  116. <li class="none nobackground " >
  117.  
  118. <a id="backforunical798" href="http://www.pinterest.com/pin/create/button/?url=keithstric.me/feed/&media=http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/noimage.png&description=Goodbye Evernote"  onclick="javascript:void window.open('http://www.pinterest.com/pin/create/button/?url=keithstric.me/feed/&media=http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/noimage.png&description=Goodbye Evernote','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -60px -120px "></a>
  119. </li>
  120. <li class="nobackground " >
  121.  
  122. <a id="backforunical798" href="https://plus.google.com/share?url=keithstric.me/feed/"  onclick="javascript:void window.open('https://plus.google.com/share?url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -90px -120px "></a>
  123. </li>
  124. <li class="nobackground " >
  125.  
  126. <a id="backforunical798" href="https://www.linkedin.com/shareArticle?title=Goodbye Evernote&mini=true&url=keithstric.me/feed/"  onclick="javascript:void window.open('https://www.linkedin.com/shareArticle?title=Goodbye Evernote&mini=true&url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -120px -120px "></a>
  127. </li>
  128. <li class="nobackground " >
  129.  
  130. <a id="backforunical798" href="https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Goodbye Evernote"  onclick="javascript:void window.open('https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Goodbye Evernote','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -150px -120px "></a>
  131. </li>
  132. <li class="nobackground " >
  133.  
  134. <a id="backforunical798" href="http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Goodbye Evernote"  onclick="javascript:void window.open('http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Goodbye Evernote','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -180px -120px "></a>
  135. </li>
  136. <li class="nobackground " >
  137.  
  138. <a id="backforunical798" href="http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Goodbye Evernote"  onclick="javascript:void window.open('http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Goodbye Evernote','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -210px -120px "></a>
  139. </li>
  140. <li class="none nobackground " >
  141.  
  142. <a id="backforunical798" href="https://myspace.com/post?l=3&u=keithstric.me/feed/"  onclick="javascript:void window.open('https://myspace.com/post?l=3&u=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -240px -120px "></a>
  143. </li>
  144. <li class="none nobackground " >
  145.  
  146. <a id="backforunical798" href="http://vk.com/share.php?url=keithstric.me/feed/&title=Goodbye Evernote"  onclick="javascript:void window.open('http://vk.com/share.php?url=keithstric.me/feed/&title=Goodbye Evernote','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -270px -120px "></a>
  147. </li>
  148. <li class="none nobackground " >
  149.  
  150. <a id="backforunical798" href="http://www.reddit.com/submit?url=keithstric.me/feed/&title=Goodbye Evernote"  onclick="javascript:void window.open('http://www.reddit.com/submit?url=keithstric.me/feed/&title=Goodbye Evernote','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -300px -120px "></a>
  151. </li>
  152. <li class="none nobackground " >
  153.  
  154. <a id="backforunical798" href="http://www.bebo.com/c/share?Url=keithstric.me/feed/"  onclick="javascript:void window.open('http://www.bebo.com/c/share?Url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -330px -120px "></a>
  155. </li>
  156. <li class="none nobackground " >
  157.  
  158. <a id="backforunical798" href="https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Goodbye Evernote"  onclick="javascript:void window.open('https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Goodbye Evernote','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -360px -120px "></a>
  159. </li>
  160. <li class="none nobackground " >
  161.  
  162. <a id="backforunical798" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=2&st.noresize=on&st._surl=keithstric.me/feed/"  onclick="javascript:void window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=2&st.noresize=on&st._surl=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -390px -120px "></a>
  163. </li>
  164. <li class="none nobackground " >
  165.  
  166. <a id="backforunical798" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Goodbye Evernote"  onclick="javascript:void window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Goodbye Evernote','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -420px -120px "></a>
  167. </li>
  168. <li class="none nobackground " >
  169.  
  170. <a id="backforunical798" href="http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Goodbye Evernote&pic=&ralateUid=&"  onclick="javascript:void window.open('http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Goodbye Evernote&pic=&ralateUid=&','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -450px -120px "></a>
  171. </li>
  172. <li class="none nobackground " >
  173.  
  174. <a id="backforunical798" href="http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Goodbye Evernote"  onclick="javascript:void window.open('http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Goodbye Evernote','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -480px -120px "></a>
  175. </li>
  176. <li class="none nobackground " >
  177.  
  178. <a id="backforunical798" href="http://n4g.com/tips?url=keithstric.me/feed/&title=Goodbye Evernote"  onclick="javascript:void window.open('http://n4g.com/tips?url=keithstric.me/feed/&title=Goodbye Evernote','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -510px -120px "></a>
  179. </li>
  180. </ul>
  181. <div class="clear"></div>
  182. </div>
  183. ]]></content:encoded>
  184. <wfw:commentRss>http://keithstric.me/2017/01/17/goodbye-evernote/feed/</wfw:commentRss>
  185. <slash:comments>2</slash:comments>
  186. </item>
  187. <item>
  188. <title>Merry Christmas!</title>
  189. <link>http://keithstric.me/2016/12/25/merry-christmas-2/</link>
  190. <pubDate>Sun, 25 Dec 2016 22:57:53 +0000</pubDate>
  191. <dc:creator><![CDATA[Keith Strickland]]></dc:creator>
  192. <category><![CDATA[Family]]></category>
  193. <category><![CDATA[Misc]]></category>
  194. <category><![CDATA[Rambling]]></category>
  195. <category><![CDATA[Technology]]></category>
  196.  
  197. <guid isPermaLink="false">http://keithstric.me/?p=795</guid>
  198. <description><![CDATA[Merry Christmas!! I hope everyone is having a great holiday. I thought now might be a good time to look back over the year and review some of the technology I&#8217;ve dealt with. Surface Pro 4: Last year I got a Surface Pro 4 tablet. I started the process of switching to it instead of my aging MacBook Pro. While I REALLY like the hardware and how everything works there were just a few issues which got on my nerves so bad I couldn&#8217;t ever completely make the switch. As far as performance, I experienced about the same performance as my MacBook. It performed very well and was a solid machine,]]></description>
  199. <content:encoded><![CDATA[<p>Merry Christmas!! I hope everyone is having a great holiday. I thought now might be a good time to look back over the year and review some of the technology I&#8217;ve dealt with.</p>
  200. <p>Surface Pro 4: Last year I got a Surface Pro 4 tablet. I started the process of switching to it instead of my aging MacBook Pro. While I REALLY like the hardware and how everything works there were just a few issues which got on my nerves so bad I couldn&#8217;t ever completely make the switch. As far as performance, I experienced about the same performance as my MacBook. It performed very well and was a solid machine, just some hardware issues (i.e. Bluetooth issues, Wifi issues, etc.). I still use the Surface Pro quite a bit, to markup designs, use as a whiteboard, light gaming and a few other things all of pretty much use the pen. I still take notes with it as I like writing with the pen.</p>
  201. <p>Polymer: At Red Pill we&#8217;ve totally made the switch to using Web Components for everything with great success. Our customers love the applications we&#8217;re delivering. They look nice, perform well and are infinitely upgradable. Next in that progression is to figure out a continuous integration solution for delivering applications to a domino server. Which in my mind, shouldn&#8217;t be too complex with most of the work needed on the server side so that the Domino html directory is available via scp or something similar. The difficult part will be the backend plugins.</p>
  202. <p>Design First Methodology: Another initiative we&#8217;ve undertaken is a change in how we develop applications. We&#8217;ve moved to a design first methodology which is now starting to show it&#8217;s potential. A designer gathers the requirements, designs a solution and is available during the development process for any tweaks or changes to the workflow or layout or even individual components. This is producing much nicer applications that are simple and takes a lot off the developer&#8217;s plate in terms of deciding how things look and work.</p>
  203. <p>JavaScript Workflow: Our JavaScript workflow still consists of bower, npm and gulp. This stack is proving to be quite powerful and provides the ability to run a local server for development. We&#8217;ve got developers spread out across the world and these tools are working surprisingly well. Everyone is using their own editors but the workflow remains the same. I did a session at Engage that outlined this process. While it was a bit hurried and we had drama leading up to that session everything seemed to go off without a hitch. I&#8217;m also aware that it is a boring topic I think it was well received.</p>
  204. <p>Switch from Full Stack developer to JavaScript Developer: I&#8217;ve pretty much left Java behind me and now concentrate solely on JavaScript and Web Components. This transition hasn&#8217;t been too painful for the most part and I think for me personally has been a much more fulfilling path.</p>
  205. <p>Red Pill: Over the past year, Red Pill has started picking up quite a bit of business. Our team grew from 3 developers and a designer to a team of 6 developers, a project manager and a designer with Peter being a full time CEO handling customers and some of our project management requirements. We&#8217;ve all got more work than we can do and things are going well and should continue to do so.</p>
  206. <p>Personal Life: This past year saw the birth of my 3rd Grandchild, Olivia Rae. She is now walking and talking. She started walking at 7mos and has been non-stop go go go.</p>
  207. <p>Looking Forward: This next year will be a busy year I think. We&#8217;re expecting to have to grow Red Pill again (which is good) and we plan on delivering DIG (our portal solution) to a production environment. Polymer 2.0 and the Web Component 1.0 spec are set to come out with better TypeScript support. I&#8217;m pretty sure I&#8217;ll still have more work than I can do next year (which is good, kinda). I&#8217;ll probably start moving farther away from delivering solutions onto Domino and probably start delivering to some other solution (iis, apache, node.js, who knows what).</p>
  208. <p>So, until next time&#8230;. Happy Coding.</p>
  209. <p>&nbsp;</p>
  210. <p>&nbsp;</p>
  211.  
  212. <style>
  213. .huge-it-share-buttons {
  214. border:0px solid #0FB5D6;
  215. border-radius:5px;
  216. background:#3BD8FF;
  217. text-align:right; }
  218.  
  219. #huge-it-share-buttons-top {margin-bottom:0px;}
  220. #huge-it-share-buttons-bottom {margin-top:0px;}
  221.  
  222. .huge-it-share-buttons h3 {
  223. font-size:25px ;
  224. font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
  225. color:#666666;
  226.  
  227. display:block; line-height:25px ;
  228.  
  229. text-align:right; }
  230.  
  231. .huge-it-share-buttons ul {
  232. float:right; }
  233.  
  234. .huge-it-share-buttons ul li {
  235. margin-left:3px;
  236. margin-right:3px;
  237. padding:0px;
  238. border:0px ridge #E6354C;
  239. border-radius:11px;
  240. background-color:#14CC9B;
  241. }
  242.  
  243. .huge-it-share-buttons ul li #backforunical795 {
  244. border-bottom: 0;
  245. background-image:url('http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/buttons.30.png');
  246. width:30px;
  247. height:30px;
  248. }
  249.  
  250. .front-shares-count {
  251. position: absolute;
  252. text-align: center;
  253. display: block;
  254. }
  255.  
  256. .shares_size20 .front-shares-count {
  257. font-size: 10px;
  258. top: 10px;
  259. width: 20px;
  260. }
  261.  
  262. .shares_size30 .front-shares-count {
  263. font-size: 11px;
  264. top: 15px;
  265. width: 30px;
  266. }
  267.  
  268. .shares_size40 .front-shares-count {
  269. font-size: 12px;
  270. top: 21px;
  271. width: 40px;
  272. }
  273. </style>
  274. <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
  275. <h3>Share This:</h3>
  276. <ul class="huge-it-share-buttons-list ">
  277. <li class="nobackground " >
  278.  
  279. <a id="backforunical795" href="https://www.facebook.com/sharer/sharer.php?u=keithstric.me/feed/"  onclick="javascript:void window.open('https://www.facebook.com/sharer/sharer.php?u=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -0px -120px "></a>
  280. </li>
  281. <li class="nobackground " >
  282.  
  283. <a id="backforunical795" href="https://twitter.com/share?status=keithstric.me/feed/&text=Merry Christmas!"  onclick="javascript:void window.open('https://twitter.com/share?status=keithstric.me/feed/&text=Merry Christmas!','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -30px -120px "></a>
  284. </li>
  285. <li class="none nobackground " >
  286.  
  287. <a id="backforunical795" href="http://www.pinterest.com/pin/create/button/?url=keithstric.me/feed/&media=http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/noimage.png&description=Merry Christmas!"  onclick="javascript:void window.open('http://www.pinterest.com/pin/create/button/?url=keithstric.me/feed/&media=http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/noimage.png&description=Merry Christmas!','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -60px -120px "></a>
  288. </li>
  289. <li class="nobackground " >
  290.  
  291. <a id="backforunical795" href="https://plus.google.com/share?url=keithstric.me/feed/"  onclick="javascript:void window.open('https://plus.google.com/share?url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -90px -120px "></a>
  292. </li>
  293. <li class="nobackground " >
  294.  
  295. <a id="backforunical795" href="https://www.linkedin.com/shareArticle?title=Merry Christmas!&mini=true&url=keithstric.me/feed/"  onclick="javascript:void window.open('https://www.linkedin.com/shareArticle?title=Merry Christmas!&mini=true&url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -120px -120px "></a>
  296. </li>
  297. <li class="nobackground " >
  298.  
  299. <a id="backforunical795" href="https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Merry Christmas!"  onclick="javascript:void window.open('https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Merry Christmas!','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -150px -120px "></a>
  300. </li>
  301. <li class="nobackground " >
  302.  
  303. <a id="backforunical795" href="http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Merry Christmas!"  onclick="javascript:void window.open('http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Merry Christmas!','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -180px -120px "></a>
  304. </li>
  305. <li class="nobackground " >
  306.  
  307. <a id="backforunical795" href="http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Merry Christmas!"  onclick="javascript:void window.open('http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Merry Christmas!','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -210px -120px "></a>
  308. </li>
  309. <li class="none nobackground " >
  310.  
  311. <a id="backforunical795" href="https://myspace.com/post?l=3&u=keithstric.me/feed/"  onclick="javascript:void window.open('https://myspace.com/post?l=3&u=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -240px -120px "></a>
  312. </li>
  313. <li class="none nobackground " >
  314.  
  315. <a id="backforunical795" href="http://vk.com/share.php?url=keithstric.me/feed/&title=Merry Christmas!"  onclick="javascript:void window.open('http://vk.com/share.php?url=keithstric.me/feed/&title=Merry Christmas!','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -270px -120px "></a>
  316. </li>
  317. <li class="none nobackground " >
  318.  
  319. <a id="backforunical795" href="http://www.reddit.com/submit?url=keithstric.me/feed/&title=Merry Christmas!"  onclick="javascript:void window.open('http://www.reddit.com/submit?url=keithstric.me/feed/&title=Merry Christmas!','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -300px -120px "></a>
  320. </li>
  321. <li class="none nobackground " >
  322.  
  323. <a id="backforunical795" href="http://www.bebo.com/c/share?Url=keithstric.me/feed/"  onclick="javascript:void window.open('http://www.bebo.com/c/share?Url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -330px -120px "></a>
  324. </li>
  325. <li class="none nobackground " >
  326.  
  327. <a id="backforunical795" href="https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Merry Christmas!"  onclick="javascript:void window.open('https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Merry Christmas!','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -360px -120px "></a>
  328. </li>
  329. <li class="none nobackground " >
  330.  
  331. <a id="backforunical795" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=2&st.noresize=on&st._surl=keithstric.me/feed/"  onclick="javascript:void window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=2&st.noresize=on&st._surl=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -390px -120px "></a>
  332. </li>
  333. <li class="none nobackground " >
  334.  
  335. <a id="backforunical795" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Merry Christmas!"  onclick="javascript:void window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Merry Christmas!','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -420px -120px "></a>
  336. </li>
  337. <li class="none nobackground " >
  338.  
  339. <a id="backforunical795" href="http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Merry Christmas!&pic=&ralateUid=&"  onclick="javascript:void window.open('http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Merry Christmas!&pic=&ralateUid=&','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -450px -120px "></a>
  340. </li>
  341. <li class="none nobackground " >
  342.  
  343. <a id="backforunical795" href="http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Merry Christmas!"  onclick="javascript:void window.open('http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Merry Christmas!','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -480px -120px "></a>
  344. </li>
  345. <li class="none nobackground " >
  346.  
  347. <a id="backforunical795" href="http://n4g.com/tips?url=keithstric.me/feed/&title=Merry Christmas!"  onclick="javascript:void window.open('http://n4g.com/tips?url=keithstric.me/feed/&title=Merry Christmas!','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -510px -120px "></a>
  348. </li>
  349. </ul>
  350. <div class="clear"></div>
  351. </div>
  352. ]]></content:encoded>
  353. </item>
  354. <item>
  355. <title>Visual Studio Code Editor</title>
  356. <link>http://keithstric.me/2016/11/11/visual-studio-code-editor/</link>
  357. <comments>http://keithstric.me/2016/11/11/visual-studio-code-editor/#comments</comments>
  358. <pubDate>Fri, 11 Nov 2016 15:42:04 +0000</pubDate>
  359. <dc:creator><![CDATA[Keith Strickland]]></dc:creator>
  360. <category><![CDATA[Microsoft]]></category>
  361. <category><![CDATA[Technology]]></category>
  362.  
  363. <guid isPermaLink="false">http://keithstric.me/?p=789</guid>
  364. <description><![CDATA[I&#8217;ve been using the Visual Studio Code editor for the last couple of weeks and thought I would share my experience. I&#8217;ve mainly used this in a plain &#8216;ole polymer application which consists of html files. Using the editor this way has shown some of it&#8217;s shortcomings. Don&#8217;t get me wrong, I think it&#8217;s a fine editor and has a lot of features I really like. However with CSS, HTML and JavaScript all residing in the same file, a lot of the typeahead features just don&#8217;t work, which is my biggest complaint. So onto my review, I&#8217;ll first start with my dislikes: JavaScript intellisense doesn&#8217;t work with JavaScript embedded in an]]></description>
  365. <content:encoded><![CDATA[<p>I&#8217;ve been using the <a href="http://code.visualstudio.com/B?utm_expid=101350005-31.YsqwCVJESWmc4UCMDLsNRw.1" target="_blank">Visual Studio Code</a> editor for the last couple of weeks and thought I would share my experience. I&#8217;ve mainly used this in a plain &#8216;ole polymer application which consists of html files. Using the editor this way has shown some of it&#8217;s shortcomings. Don&#8217;t get me wrong, I think it&#8217;s a fine editor and has a lot of features I really like. However with CSS, HTML and JavaScript all residing in the same file, a lot of the typeahead features just don&#8217;t work, which is my biggest complaint.</p>
  366. <p>So onto my review, I&#8217;ll first start with my dislikes:</p>
  367. <ul>
  368. <li>JavaScript intellisense doesn&#8217;t work with JavaScript embedded in an html file</li>
  369. <li>HTML tags don&#8217;t auto close. In <a href="https://www.sublimetext.com/" target="_blank">Sublime Text</a>, when you type &lt;div&gt; and press enter, you get the corresponding &lt;/div&gt;, this just doesn&#8217;t happen with Visual Studio Code. Likewise when starting a function or css definition.</li>
  370. <li>I couldn&#8217;t figure out how to do block comments via a keyboard command (i.e. Highlight a block of code and press the correct key combination and it comments out that block). I found the keyboard command and even defined a custom one for this operation, but never could get it to work.</li>
  371. <li>When you install any extension, you have to restart the editor</li>
  372. <li>Doesn&#8217;t highlight corresponding opening/closing things (i.e. tags, code blocks, etc.)</li>
  373. <li>All of the jsDoc functionality and extensions just don&#8217;t work when your JavaScript resides inside an html file</li>
  374. <li>Missing color highlighting extensions. For example, type a color in css (i.e. red, #FF0000, rgb(255,0,0), etc) in sublime, that text is highlighted the color you typed when selected and has an underline of the color when not selected</li>
  375. </ul>
  376. <p>That&#8217;s not a very big list of dislikes honestly, especially for something I spend all day in. So now for my likes:</p>
  377. <ul>
  378. <li>It&#8217;s very configurable with a lot of extensions</li>
  379. <li>Use in a TypeScript project and you get the same type of smarts you&#8217;ll find in most Java editors with great intellisense. Same if your JavaScript resides in a .js file. Great intellisense</li>
  380. <li>Easy to navigate around your project without having to use the mouse</li>
  381. <li>Built-In GIT client that&#8217;s easy to use, I actually haven&#8217;t opened sourcetree in a week, which is usually something that&#8217;s open most of the time on my machine</li>
  382. <li>A very clean interface, it&#8217;s nice to look at. To me, Sublime Text looks&#8230; I don&#8217;t know, dated</li>
  383. <li>While I didn&#8217;t try it, it has built-in debugger that connects to your browser</li>
  384. <li>It&#8217;s actively being developed. <a href="http://code.visualstudio.com/updates" target="_blank">Seems a new version is coming out monthly</a>.</li>
  385. <li>All kinds of linters built in</li>
  386. <li><a href="http://jscs.info/" target="_blank">JSCS</a> functionality built in</li>
  387. <li>Love the integrated Terminal</li>
  388. <li>Built in <a href="http://emmet.io/" target="_blank">Emmet</a> support, if you&#8217;ve ever used Emmet, you know how awesome it is</li>
  389. </ul>
  390. <p>I think that about covers it. I really like this editor, and it&#8217;s easy to use, intuitive and nice to look at. Just some of the things I use every day are missing so I&#8217;ll probably try something else. While <a href="http://redpillnow.com" target="_blank">Red Pill</a> is starting to use TypeScript in all of our projects, this particular project will take a couple of weeks to convert to TypeScript. So that&#8217;s really not an option at the moment. But, if you&#8217;re using TypeScript or are working on a large JavaScript project, this is a great editor for those scenarios. Once this particular project I&#8217;m working on is converted to use TypeScript, I&#8217;ll probably revisit this editor.</p>
  391. <p>Until next time, Happy Coding!</p>
  392.  
  393. <style>
  394. .huge-it-share-buttons {
  395. border:0px solid #0FB5D6;
  396. border-radius:5px;
  397. background:#3BD8FF;
  398. text-align:right; }
  399.  
  400. #huge-it-share-buttons-top {margin-bottom:0px;}
  401. #huge-it-share-buttons-bottom {margin-top:0px;}
  402.  
  403. .huge-it-share-buttons h3 {
  404. font-size:25px ;
  405. font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
  406. color:#666666;
  407.  
  408. display:block; line-height:25px ;
  409.  
  410. text-align:right; }
  411.  
  412. .huge-it-share-buttons ul {
  413. float:right; }
  414.  
  415. .huge-it-share-buttons ul li {
  416. margin-left:3px;
  417. margin-right:3px;
  418. padding:0px;
  419. border:0px ridge #E6354C;
  420. border-radius:11px;
  421. background-color:#14CC9B;
  422. }
  423.  
  424. .huge-it-share-buttons ul li #backforunical789 {
  425. border-bottom: 0;
  426. background-image:url('http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/buttons.30.png');
  427. width:30px;
  428. height:30px;
  429. }
  430.  
  431. .front-shares-count {
  432. position: absolute;
  433. text-align: center;
  434. display: block;
  435. }
  436.  
  437. .shares_size20 .front-shares-count {
  438. font-size: 10px;
  439. top: 10px;
  440. width: 20px;
  441. }
  442.  
  443. .shares_size30 .front-shares-count {
  444. font-size: 11px;
  445. top: 15px;
  446. width: 30px;
  447. }
  448.  
  449. .shares_size40 .front-shares-count {
  450. font-size: 12px;
  451. top: 21px;
  452. width: 40px;
  453. }
  454. </style>
  455. <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
  456. <h3>Share This:</h3>
  457. <ul class="huge-it-share-buttons-list ">
  458. <li class="nobackground " >
  459.  
  460. <a id="backforunical789" href="https://www.facebook.com/sharer/sharer.php?u=keithstric.me/feed/"  onclick="javascript:void window.open('https://www.facebook.com/sharer/sharer.php?u=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -0px -120px "></a>
  461. </li>
  462. <li class="nobackground " >
  463.  
  464. <a id="backforunical789" href="https://twitter.com/share?status=keithstric.me/feed/&text=Visual Studio Code Editor"  onclick="javascript:void window.open('https://twitter.com/share?status=keithstric.me/feed/&text=Visual Studio Code Editor','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -30px -120px "></a>
  465. </li>
  466. <li class="none nobackground " >
  467.  
  468. <a id="backforunical789" href="http://www.pinterest.com/pin/create/button/?url=keithstric.me/feed/&media=http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/noimage.png&description=Visual Studio Code Editor"  onclick="javascript:void window.open('http://www.pinterest.com/pin/create/button/?url=keithstric.me/feed/&media=http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/noimage.png&description=Visual Studio Code Editor','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -60px -120px "></a>
  469. </li>
  470. <li class="nobackground " >
  471.  
  472. <a id="backforunical789" href="https://plus.google.com/share?url=keithstric.me/feed/"  onclick="javascript:void window.open('https://plus.google.com/share?url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -90px -120px "></a>
  473. </li>
  474. <li class="nobackground " >
  475.  
  476. <a id="backforunical789" href="https://www.linkedin.com/shareArticle?title=Visual Studio Code Editor&mini=true&url=keithstric.me/feed/"  onclick="javascript:void window.open('https://www.linkedin.com/shareArticle?title=Visual Studio Code Editor&mini=true&url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -120px -120px "></a>
  477. </li>
  478. <li class="nobackground " >
  479.  
  480. <a id="backforunical789" href="https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Visual Studio Code Editor"  onclick="javascript:void window.open('https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Visual Studio Code Editor','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -150px -120px "></a>
  481. </li>
  482. <li class="nobackground " >
  483.  
  484. <a id="backforunical789" href="http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Visual Studio Code Editor"  onclick="javascript:void window.open('http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Visual Studio Code Editor','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -180px -120px "></a>
  485. </li>
  486. <li class="nobackground " >
  487.  
  488. <a id="backforunical789" href="http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Visual Studio Code Editor"  onclick="javascript:void window.open('http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Visual Studio Code Editor','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -210px -120px "></a>
  489. </li>
  490. <li class="none nobackground " >
  491.  
  492. <a id="backforunical789" href="https://myspace.com/post?l=3&u=keithstric.me/feed/"  onclick="javascript:void window.open('https://myspace.com/post?l=3&u=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -240px -120px "></a>
  493. </li>
  494. <li class="none nobackground " >
  495.  
  496. <a id="backforunical789" href="http://vk.com/share.php?url=keithstric.me/feed/&title=Visual Studio Code Editor"  onclick="javascript:void window.open('http://vk.com/share.php?url=keithstric.me/feed/&title=Visual Studio Code Editor','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -270px -120px "></a>
  497. </li>
  498. <li class="none nobackground " >
  499.  
  500. <a id="backforunical789" href="http://www.reddit.com/submit?url=keithstric.me/feed/&title=Visual Studio Code Editor"  onclick="javascript:void window.open('http://www.reddit.com/submit?url=keithstric.me/feed/&title=Visual Studio Code Editor','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -300px -120px "></a>
  501. </li>
  502. <li class="none nobackground " >
  503.  
  504. <a id="backforunical789" href="http://www.bebo.com/c/share?Url=keithstric.me/feed/"  onclick="javascript:void window.open('http://www.bebo.com/c/share?Url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -330px -120px "></a>
  505. </li>
  506. <li class="none nobackground " >
  507.  
  508. <a id="backforunical789" href="https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Visual Studio Code Editor"  onclick="javascript:void window.open('https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Visual Studio Code Editor','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -360px -120px "></a>
  509. </li>
  510. <li class="none nobackground " >
  511.  
  512. <a id="backforunical789" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=2&st.noresize=on&st._surl=keithstric.me/feed/"  onclick="javascript:void window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=2&st.noresize=on&st._surl=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -390px -120px "></a>
  513. </li>
  514. <li class="none nobackground " >
  515.  
  516. <a id="backforunical789" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Visual Studio Code Editor"  onclick="javascript:void window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Visual Studio Code Editor','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -420px -120px "></a>
  517. </li>
  518. <li class="none nobackground " >
  519.  
  520. <a id="backforunical789" href="http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Visual Studio Code Editor&pic=&ralateUid=&"  onclick="javascript:void window.open('http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Visual Studio Code Editor&pic=&ralateUid=&','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -450px -120px "></a>
  521. </li>
  522. <li class="none nobackground " >
  523.  
  524. <a id="backforunical789" href="http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Visual Studio Code Editor"  onclick="javascript:void window.open('http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Visual Studio Code Editor','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -480px -120px "></a>
  525. </li>
  526. <li class="none nobackground " >
  527.  
  528. <a id="backforunical789" href="http://n4g.com/tips?url=keithstric.me/feed/&title=Visual Studio Code Editor"  onclick="javascript:void window.open('http://n4g.com/tips?url=keithstric.me/feed/&title=Visual Studio Code Editor','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -510px -120px "></a>
  529. </li>
  530. </ul>
  531. <div class="clear"></div>
  532. </div>
  533. ]]></content:encoded>
  534. <wfw:commentRss>http://keithstric.me/2016/11/11/visual-studio-code-editor/feed/</wfw:commentRss>
  535. <slash:comments>1</slash:comments>
  536. </item>
  537. <item>
  538. <title>Work with Rich Text from DDS</title>
  539. <link>http://keithstric.me/2016/10/21/work-with-rich-text-from-dds/</link>
  540. <comments>http://keithstric.me/2016/10/21/work-with-rich-text-from-dds/#comments</comments>
  541. <pubDate>Fri, 21 Oct 2016 21:33:29 +0000</pubDate>
  542. <dc:creator><![CDATA[Keith Strickland]]></dc:creator>
  543. <category><![CDATA[DDS]]></category>
  544. <category><![CDATA[Polymer]]></category>
  545. <category><![CDATA[Rich Text]]></category>
  546. <category><![CDATA[Uncategorized]]></category>
  547.  
  548. <guid isPermaLink="false">http://keithstric.me/?p=778</guid>
  549. <description><![CDATA[So you&#8217;ve created your shiny new web application using DDS and everything is really cool, except for the display of rich text. You&#8217;ve figured out that there is a multipart MIME object in the JSON delivered by DDS, and it has the HTML in that, but it still looks crappy. It has tags littered throughout and just doesn&#8217;t look good. Well, I think I&#8217;ve got the solution for you. If you look at that multipart MIME Object and find the &#8216;text/html&#8217; entry you&#8217;ll notice a &#8216;contentTransferEncoding&#8217; property that equals &#8216;quoted-printable&#8217; or maybe &#8216;base64&#8217;.  There&#8217;s the cause of your html display issue. You need a decoder for those 2 encoding types. Now, let&#8217;s]]></description>
  550. <content:encoded><![CDATA[<p>So you&#8217;ve created your shiny new web application using DDS and everything is really cool, except for the display of rich text. You&#8217;ve figured out that there is a multipart MIME object in the JSON delivered by DDS, and it has the HTML in that, but it still looks crappy. It has tags littered throughout and just doesn&#8217;t look good.</p>
  551. <p>Well, I think I&#8217;ve got the solution for you. If you look at that multipart MIME Object and find the &#8216;text/html&#8217; entry you&#8217;ll notice a &#8216;contentTransferEncoding&#8217; property that equals &#8216;quoted-printable&#8217; or maybe &#8216;base64&#8217;.  There&#8217;s the cause of your html display issue. You need a decoder for those 2 encoding types.</p>
  552. <p>Now, let&#8217;s take a look at the now-richtext element.</p>
  553. <pre class="EnlighterJSRAW" data-enlighter-highlight="4,35,37,39-42">&lt;link rel="import" href="../polymer/polymer.html"&gt;
  554.  
  555. &lt;link rel="import" href="../marked-element/marked-element.html"&gt;
  556. &lt;link rel="import" href="quoted-printable.html"&gt;
  557.  
  558. &lt;dom-module id="now-richtext"&gt;
  559.  &lt;template&gt;
  560.    &lt;style&gt;
  561.      :host {
  562.        display: block;
  563.      }
  564.    &lt;/style&gt;
  565.    &lt;marked-element markdown="{{htmlContent}}"&gt;
  566.      &lt;div class="markdown-html"&gt;&lt;/div&gt;
  567.    &lt;/marked-element&gt;
  568.  &lt;/template&gt;
  569.  &lt;script&gt;
  570.  Polymer({
  571.    is: 'now-richtext',
  572.    properties: {
  573.      htmlContent: String,
  574.      richTextObj: {
  575.        type: Object,
  576.        observer: '_onRichText'
  577.      }
  578.    },
  579.    _onRichText: function(newVal, oldVal) {
  580.      if (newVal) {
  581.        var textObj = newVal.content;
  582.        for (var i = 0; i &lt; textObj.length; i++) {
  583.          var mimeObj = textObj[i];
  584.          if (mimeObj.contentType.indexOf('text/html') &gt; -1) {
  585.            var html = mimeObj.data;
  586.            if (mimeObj.contentTransferEncoding === 'base64') {
  587.              html = atob(mimeObj.data);
  588.            }else if (mimeObj.contentTransferEncoding === 'quoted-printable') {
  589.              html = quotedPrintable.decode(mimeObj.data);
  590.            }
  591.            var removeText = ['&lt;html&gt;','&lt;/html&gt;','&lt;body&gt;','&lt;/body&gt;','&lt;head&gt;','&lt;/head&gt;'];
  592.            for (var j = 0; j &lt; removeText.length; j++) {
  593.              html = html.replace(removeText[j],'');
  594.            }
  595.            this.set('htmlContent', html);
  596.          }
  597.        }
  598.        // Gotta wait for the DOM to be built
  599.        this.async(function() {
  600.          this._updateImages(textObj);
  601.        }.bind(this), 200);
  602.      }
  603.    },
  604.    _updateImages: function(mimeObjContent) {
  605.      for (var j = 0; j &lt; mimeObjContent.length; j++) {
  606.        var mimeObj = mimeObjContent[j];
  607.        if (mimeObj.contentType.indexOf('image/') &gt; -1) {
  608.          var contentDispo = mimeObj.contentDisposition;
  609.          var isInline = contentDispo.indexOf('inline') &gt; -1;
  610.          var elem = null;
  611.          var srcAttrStr = null;
  612.          if (isInline) {
  613.            var imageBase64 = mimeObj.data;
  614.            var imgElemName = 'cid:' + mimeObj.contentID.substring(1, mimeObj.contentID.length - 1);
  615.            var contentType = mimeObj.contentType.split(';')[0];
  616.            elem = this.querySelector('[src="' + imgElemName + '"]');
  617.            if (elem) {
  618.              srcAttrStr = 'data:' + contentType + ';base64,' + imageBase64;
  619.              elem.setAttribute('src', srcAttrStr);
  620.            }
  621.          }else { // Gotta create an img tag for attachments
  622.            var elemArr = this.querySelectorAll('i');
  623.            for (var k = 0; k &lt; elemArr.length; k++) {
  624.              elem = elemArr[k];
  625.              var dispoArr = mimeObj.contentDisposition.split(';');
  626.              var fileNamePart = dispoArr[1].substring(dispoArr[1].indexOf('="') + 2, dispoArr[1].lastIndexOf('"'));
  627.              if (elem.innerHTML.indexOf(fileNamePart) &gt; -1) {
  628.                var parent = elem.parentNode;
  629.                var img = document.createElement('img');
  630.                var contentTypeArr = mimeObj.contentType.split(';');
  631.                srcAttrStr = 'data:' + contentTypeArr[0] + ';base64,' + mimeObj.data;
  632.                img.setAttribute('src', srcAttrStr);
  633.                parent.replaceChild(img, elem);
  634.              }
  635.            }
  636.          }
  637.        }
  638.      }
  639.    }
  640.  });
  641.  &lt;/script&gt;
  642. &lt;/dom-module&gt;
  643. </pre>
  644. <p>This is a really simple element, the things of note here (highlighted lines above):</p>
  645. <ul>
  646. <li>Let&#8217;s start with line 4: This is the import of <a href="https://github.com/mathiasbynens/quoted-printable" target="_blank">quoted-printable</a>. This is a library by <a href="https://github.com/mathiasbynens" target="_blank">Mathias Bynens</a> that provides a quoted-printable decoder.</li>
  647. <li>Next up is line 35: This will decode a &#8216;base64&#8217; string. This will be placed in the &#8216;src&#8217; attribute of an image tag.</li>
  648. <li>Next is line 37: This will decode a &#8216;quoted-printable&#8217; string. This is what we&#8217;ll hand to the marked-element for display.</li>
  649. <li>Lastly is lines 39-42: This will remove the html, body and head tags from the markup (doesn&#8217;t really hurt to leave them there tho).</li>
  650. </ul>
  651. <p>Let&#8217;s take a look how we&#8217;re dealing with images. Look at the &#8216;_updateImages&#8217; function. We hand this function the content property of the multipart MIME object. It will then loop through all the parts looking for images. Once it finds an image, it&#8217;ll find the corresponding DOM element. If the image is an inline image, there will be an img tag present with a src attribute of something like &#8216;cid:[email protected]&#8217;. That&#8217;s the same name that is in the mimePart so we use that to find the proper img tag. Once we get the proper img tag, we replace it&#8217;s src attribute with the base64 from the mimePart&#8217;s data property.</p>
  652. <p>If the image is an attachment we need to take a different route tho. Instead of an img tag, an &#8216;i&#8217; tag will be created with something like &#8216;<i class="style-scope now-richtext">(See attached file: RPN_Logo_Stacked-Preferred.png)</i>&#8216; as it&#8217;s innerHTML. We then get the file name from the mimePart and get all the &#8216;i&#8217; tags and loop through those until we find the proper one. We then create an img element and replace the &#8216;i&#8217; tag with the new &#8216;img&#8217; tag whose &#8216;src&#8217; attribute has been set to the base64 from the mimePart.</p>
  653. <p>To use this element here&#8217;s the demo code:</p>
  654. <pre class="EnlighterJSRAW" data-enlighter-language="html">&lt;link rel="import" href="../../polymer/polymer.html"&gt;
  655. &lt;link rel="import" href="../../iron-ajax/iron-ajax.html"&gt;
  656. &lt;link rel="import" href="../now-richtext.html"&gt;
  657.  
  658. &lt;dom-module id="doc-wrapper"&gt;
  659.  &lt;template&gt;
  660.    &lt;style&gt;
  661.      :host {
  662.        display: block;
  663.        box-sizing: border-box;
  664.      }
  665.    &lt;/style&gt;
  666.    &lt;iron-ajax
  667.      url="doc.json"
  668.      handle-as="json"
  669.      last-response="{{doc}}"
  670.      auto&gt;
  671.    &lt;/iron-ajax&gt;
  672.    &lt;now-richtext rich-text-obj="{{doc.BulletinText}}"&gt;&lt;/now-richtext&gt;
  673.  &lt;/template&gt;
  674.  &lt;script&gt;
  675. Polymer({
  676.  is: 'doc-wrapper',
  677.  properties: {
  678.    doc: Object
  679.  }
  680. });
  681.  &lt;/script&gt;
  682. &lt;/dom-module&gt;</pre>
  683. <p>This element is purely for the demo included with the now-richtext component. But, this will give us something like this:</p>
  684. <p><img class="aligncenter wp-image-785 size-full" src="http://keithstric.me/wp-content/uploads/2016/10/Screen-Shot-2016-10-21-at-4.27.01-PM.png" alt="screen-shot-2016-10-21-at-4-27-01-pm" width="423" height="647" srcset="http://keithstric.me/wp-content/uploads/2016/10/Screen-Shot-2016-10-21-at-4.27.01-PM.png 423w, http://keithstric.me/wp-content/uploads/2016/10/Screen-Shot-2016-10-21-at-4.27.01-PM-196x300.png 196w" sizes="(max-width: 423px) 100vw, 423px" /></p>
  685. <p>This is just the rich text field of a document and is meant to only demo the rich text field. But if you would like to check out the <a href="http://keithstric.github.io/now-richtext/demo/index.html" target="_blank">demo, here&#8217;s a link</a> to the github page and <a href="https://github.com/keithstric/now-richtext" target="_blank">here&#8217;s the repo</a>.</p>
  686. <p>Until next time&#8230; Happy Coding!</p>
  687.  
  688. <style>
  689. .huge-it-share-buttons {
  690. border:0px solid #0FB5D6;
  691. border-radius:5px;
  692. background:#3BD8FF;
  693. text-align:right; }
  694.  
  695. #huge-it-share-buttons-top {margin-bottom:0px;}
  696. #huge-it-share-buttons-bottom {margin-top:0px;}
  697.  
  698. .huge-it-share-buttons h3 {
  699. font-size:25px ;
  700. font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
  701. color:#666666;
  702.  
  703. display:block; line-height:25px ;
  704.  
  705. text-align:right; }
  706.  
  707. .huge-it-share-buttons ul {
  708. float:right; }
  709.  
  710. .huge-it-share-buttons ul li {
  711. margin-left:3px;
  712. margin-right:3px;
  713. padding:0px;
  714. border:0px ridge #E6354C;
  715. border-radius:11px;
  716. background-color:#14CC9B;
  717. }
  718.  
  719. .huge-it-share-buttons ul li #backforunical778 {
  720. border-bottom: 0;
  721. background-image:url('http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/buttons.30.png');
  722. width:30px;
  723. height:30px;
  724. }
  725.  
  726. .front-shares-count {
  727. position: absolute;
  728. text-align: center;
  729. display: block;
  730. }
  731.  
  732. .shares_size20 .front-shares-count {
  733. font-size: 10px;
  734. top: 10px;
  735. width: 20px;
  736. }
  737.  
  738. .shares_size30 .front-shares-count {
  739. font-size: 11px;
  740. top: 15px;
  741. width: 30px;
  742. }
  743.  
  744. .shares_size40 .front-shares-count {
  745. font-size: 12px;
  746. top: 21px;
  747. width: 40px;
  748. }
  749. </style>
  750. <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
  751. <h3>Share This:</h3>
  752. <ul class="huge-it-share-buttons-list ">
  753. <li class="nobackground " >
  754.  
  755. <a id="backforunical778" href="https://www.facebook.com/sharer/sharer.php?u=keithstric.me/feed/"  onclick="javascript:void window.open('https://www.facebook.com/sharer/sharer.php?u=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -0px -120px "></a>
  756. </li>
  757. <li class="nobackground " >
  758.  
  759. <a id="backforunical778" href="https://twitter.com/share?status=keithstric.me/feed/&text=Work with Rich Text from DDS"  onclick="javascript:void window.open('https://twitter.com/share?status=keithstric.me/feed/&text=Work with Rich Text from DDS','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -30px -120px "></a>
  760. </li>
  761. <li class="none nobackground " >
  762.  
  763. <a id="backforunical778" href="http://www.pinterest.com/pin/create/button/?url=keithstric.me/feed/&media=http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/noimage.png&description=Work with Rich Text from DDS"  onclick="javascript:void window.open('http://www.pinterest.com/pin/create/button/?url=keithstric.me/feed/&media=http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/noimage.png&description=Work with Rich Text from DDS','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -60px -120px "></a>
  764. </li>
  765. <li class="nobackground " >
  766.  
  767. <a id="backforunical778" href="https://plus.google.com/share?url=keithstric.me/feed/"  onclick="javascript:void window.open('https://plus.google.com/share?url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -90px -120px "></a>
  768. </li>
  769. <li class="nobackground " >
  770.  
  771. <a id="backforunical778" href="https://www.linkedin.com/shareArticle?title=Work with Rich Text from DDS&mini=true&url=keithstric.me/feed/"  onclick="javascript:void window.open('https://www.linkedin.com/shareArticle?title=Work with Rich Text from DDS&mini=true&url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -120px -120px "></a>
  772. </li>
  773. <li class="nobackground " >
  774.  
  775. <a id="backforunical778" href="https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Work with Rich Text from DDS"  onclick="javascript:void window.open('https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Work with Rich Text from DDS','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -150px -120px "></a>
  776. </li>
  777. <li class="nobackground " >
  778.  
  779. <a id="backforunical778" href="http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Work with Rich Text from DDS"  onclick="javascript:void window.open('http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Work with Rich Text from DDS','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -180px -120px "></a>
  780. </li>
  781. <li class="nobackground " >
  782.  
  783. <a id="backforunical778" href="http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Work with Rich Text from DDS"  onclick="javascript:void window.open('http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Work with Rich Text from DDS','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -210px -120px "></a>
  784. </li>
  785. <li class="none nobackground " >
  786.  
  787. <a id="backforunical778" href="https://myspace.com/post?l=3&u=keithstric.me/feed/"  onclick="javascript:void window.open('https://myspace.com/post?l=3&u=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -240px -120px "></a>
  788. </li>
  789. <li class="none nobackground " >
  790.  
  791. <a id="backforunical778" href="http://vk.com/share.php?url=keithstric.me/feed/&title=Work with Rich Text from DDS"  onclick="javascript:void window.open('http://vk.com/share.php?url=keithstric.me/feed/&title=Work with Rich Text from DDS','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -270px -120px "></a>
  792. </li>
  793. <li class="none nobackground " >
  794.  
  795. <a id="backforunical778" href="http://www.reddit.com/submit?url=keithstric.me/feed/&title=Work with Rich Text from DDS"  onclick="javascript:void window.open('http://www.reddit.com/submit?url=keithstric.me/feed/&title=Work with Rich Text from DDS','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -300px -120px "></a>
  796. </li>
  797. <li class="none nobackground " >
  798.  
  799. <a id="backforunical778" href="http://www.bebo.com/c/share?Url=keithstric.me/feed/"  onclick="javascript:void window.open('http://www.bebo.com/c/share?Url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -330px -120px "></a>
  800. </li>
  801. <li class="none nobackground " >
  802.  
  803. <a id="backforunical778" href="https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Work with Rich Text from DDS"  onclick="javascript:void window.open('https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Work with Rich Text from DDS','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -360px -120px "></a>
  804. </li>
  805. <li class="none nobackground " >
  806.  
  807. <a id="backforunical778" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=2&st.noresize=on&st._surl=keithstric.me/feed/"  onclick="javascript:void window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=2&st.noresize=on&st._surl=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -390px -120px "></a>
  808. </li>
  809. <li class="none nobackground " >
  810.  
  811. <a id="backforunical778" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Work with Rich Text from DDS"  onclick="javascript:void window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Work with Rich Text from DDS','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -420px -120px "></a>
  812. </li>
  813. <li class="none nobackground " >
  814.  
  815. <a id="backforunical778" href="http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Work with Rich Text from DDS&pic=&ralateUid=&"  onclick="javascript:void window.open('http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Work with Rich Text from DDS&pic=&ralateUid=&','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -450px -120px "></a>
  816. </li>
  817. <li class="none nobackground " >
  818.  
  819. <a id="backforunical778" href="http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Work with Rich Text from DDS"  onclick="javascript:void window.open('http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Work with Rich Text from DDS','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -480px -120px "></a>
  820. </li>
  821. <li class="none nobackground " >
  822.  
  823. <a id="backforunical778" href="http://n4g.com/tips?url=keithstric.me/feed/&title=Work with Rich Text from DDS"  onclick="javascript:void window.open('http://n4g.com/tips?url=keithstric.me/feed/&title=Work with Rich Text from DDS','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -510px -120px "></a>
  824. </li>
  825. </ul>
  826. <div class="clear"></div>
  827. </div>
  828. ]]></content:encoded>
  829. <wfw:commentRss>http://keithstric.me/2016/10/21/work-with-rich-text-from-dds/feed/</wfw:commentRss>
  830. <slash:comments>2</slash:comments>
  831. </item>
  832. <item>
  833. <title>A Polymer Avatar component</title>
  834. <link>http://keithstric.me/2016/10/12/a-polymer-avatar-component/</link>
  835. <pubDate>Wed, 12 Oct 2016 20:50:15 +0000</pubDate>
  836. <dc:creator><![CDATA[Keith Strickland]]></dc:creator>
  837. <category><![CDATA[Polymer]]></category>
  838.  
  839. <guid isPermaLink="false">http://keithstric.me/?p=767</guid>
  840. <description><![CDATA[At MWLUG a lot of people seemed surprised that I would create a component just for an avatar. My response to that is why wouldn&#8217;t you build an avatar component? So, in this post I&#8217;m going to show you how to build one for your applications. Let&#8217;s start out with the use case. We want to show an avatar for a person in various locations throughout our application. This avatar should do a few different things: Should show a picture of a person if one is attached to their person document If no picture is available and the person is in the domino directory should show the first letter of their first name]]></description>
  841. <content:encoded><![CDATA[<p>At MWLUG a lot of people seemed surprised that I would create a component just for an avatar. My response to that is why wouldn&#8217;t you build an avatar component? So, in this post I&#8217;m going to show you how to build one for your applications.</p>
  842. <p>Let&#8217;s start out with the use case. We want to show an avatar for a person in various locations throughout our application. This avatar should do a few different things:</p>
  843. <ul>
  844. <li>Should show a picture of a person if one is attached to their person document</li>
  845. <li>If no picture is available and the person is in the domino directory should show the first letter of their first name and have a background color that is the same throughout the system</li>
  846. <li>If the person is not in the domino directory just show a person icon</li>
  847. <li>Should be able to click the avatar and it should do something (i.e. navigate to a person profile or somewhere else)</li>
  848. <li>We&#8217;ll want to hand this component a canonical name and tell it how to get to our person document</li>
  849. <li>We don&#8217;t want to have to install anything so we should use DDS</li>
  850. </ul>
  851. <p>I&#8217;ll post the code here but I&#8217;m not going to explain everything, just the interesting bits.</p>
  852. <pre class="EnlighterJSRAW" data-enlighter-language="html">&lt;link rel="import" href="../polymer/polymer.html"&gt;
  853.  
  854. &lt;link rel="import" href="../iron-ajax/iron-ajax.html"&gt;
  855. &lt;link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html"&gt;
  856. &lt;link rel="import" href="../iron-icons/social-icons.html"&gt;
  857. &lt;link rel="import" href="../iron-image/iron-image.html"&gt;
  858.  
  859. &lt;link rel="import" href="tinycolor.html"&gt;
  860.  
  861.  
  862. &lt;dom-module id="now-avatar"&gt;
  863.  &lt;template&gt;
  864.    &lt;style is="custom-style" include="iron-flex iron-flex-alignment"&gt;
  865.      :host {
  866.        display: inline-block;
  867.        position: relative;
  868.        width: var(--now-avatar-height-width, 40px);
  869.        height: var(--now-avatar-height-width, 40px);
  870.        border: var(--now-avatar-border-size, 1px) solid var(--now-avatar-border-color, #afafaf);
  871.        border-radius: 50%;
  872.        @apply(--now-avatar);
  873.      }
  874.      :host:hover {
  875.        cursor: pointer;
  876.        @apply(--now-avatar-hover);
  877.      }
  878.      .avatarContainer {
  879.        height: 100%;
  880.        width: 100%;
  881.      }
  882.      .avatarImageContainer {
  883.        height: inherit;
  884.        width: inherit;
  885.      }
  886.      .avatarImage {
  887.        border-radius: 50%;
  888.        height: inherit;
  889.        width: inherit;
  890.        line-height: var(--now-avatar-height-width, 40px);
  891.      }
  892.      .avatarIcon {
  893.        display: inline;
  894.        line-height: var(--now-avatar-height-width, 40px);
  895.      }
  896.      .avatarLetterContainer {
  897.        width: inherit;
  898.        text-align: center;
  899.      }
  900.      .avatarLetter {
  901.        line-height: var(--now-avatar-height-width, 40px);
  902.      }
  903.    &lt;/style&gt;
  904.    &lt;!-- Lookup the user name in the ($Users) view of the domino directory --&gt;
  905.    &lt;iron-ajax
  906.      id="viewPeopleAjax"
  907.      url="{{ddsViewUrl}}"
  908.      handle-as="json"
  909.      last-response="{{_viewPerson}}"
  910.      last-error="{{_fetchViewPersonError}}"
  911.      verbose&gt;
  912.    &lt;/iron-ajax&gt;
  913.    &lt;!-- Fetch the user once they are found in the ($Users) view --&gt;
  914.    &lt;iron-ajax
  915.      id="personAjax"
  916.      url="{{ddsPersonUrl}}"
  917.      handle-as="json"
  918.      on-response="_onPersonChange"
  919.      last-error="{{_fetchPersonError}}"
  920.      verbose&gt;
  921.    &lt;/iron-ajax&gt;
  922.    &lt;div id="avatarContainer" class="avatarContainer layout horizontal"&gt;
  923.      &lt;!-- The letter --&gt;
  924.      &lt;span
  925.        class="self-center avatarLetterContainer"
  926.        hidden$="{{_hideLetter}}"&gt;
  927.        &lt;span id="avatarLetter" class="avatarLetter center"&gt;{{avatarLetter}}&lt;/span&gt;
  928.      &lt;/span&gt;
  929.      &lt;!-- The icon --&gt;
  930.      &lt;span
  931.        class="self-center avatarIconContainer"
  932.        hidden$="{{_hideIcon}}"&gt;
  933.        &lt;iron-icon id="avatarIcon" class="avatarIcon" icon="social:person"&gt;&lt;/iron-icon&gt;
  934.      &lt;/span&gt;
  935.      &lt;!-- The image --&gt;
  936.      &lt;span
  937.        class="self-center avatarImageContainer"
  938.        hidden$="{{_hideImage}}"&gt;
  939.        &lt;iron-image
  940.          sizing="cover"
  941.          src="{{_photoUrl}}"
  942.          hidden$="{{_hideImage}}"
  943.          class="avatarImage fit"
  944.          error="{{_fetchImageError}}"
  945.          fade&gt;
  946.        &lt;/iron-image&gt;
  947.      &lt;/span&gt;
  948.    &lt;/div&gt;
  949.  &lt;/template&gt;
  950.  &lt;script&gt;
  951. Polymer({
  952.  is: 'now-avatar',
  953.  properties: {
  954.    /**
  955.     * The person's canonical name. Not needed if you provide a photoUrl
  956.     * @type {String}
  957.     */
  958.    name: {
  959.      type: String,
  960.      observer: '_onNameChange'
  961.    },
  962.    /**
  963.     * The person document retrieved from the domino directory
  964.     * @type {Object}
  965.     */
  966.    person: {
  967.      type: Object
  968.    },
  969.    /**
  970.     * Person retrieved from the view query
  971.     * @type {Array}
  972.     */
  973.    _viewPerson: {
  974.      type: Array,
  975.      observer: '_onViewPersonChange'
  976.    },
  977.    /**
  978.     * The DDS URL to the '($Users)' view in the domino directory formatted like:
  979.     * 'http://domino.server/names.nsf/api/data/collections/unid/&lt;ViewUNID&gt;'
  980.     * NOTE: With this one we need to include the protocol and host name
  981.     * @type {String}
  982.     */
  983.    ddsViewUrl: {
  984.      type: String,
  985.      observer: '_onDdsViewUrlChange'
  986.    },
  987.    /**
  988.     * The DDS Url for documents in the database. Should be formatted like:
  989.     * '/names.nsf/api/data/documents/unid/&lt;PersonDocUNID&gt;'
  990.     * NOTE: DO NOT include the protocol and host name
  991.     * @type {String}
  992.     */
  993.    ddsPersonUrl: String,
  994.    /**
  995.     * The url to navigate to when the avatar is clicked. Will open a new tab
  996.     * @type {String}
  997.     */
  998.    clickUrl: String,
  999.    /**
  1000.     * The protocol and host name to the DDS Url formatted like:
  1001.     * 'http://domino.server.name'
  1002.     * @type {String}
  1003.     */
  1004.    ddsHostName: String,
  1005.    /**
  1006.     * The name of the field in the Domino Directory person document where user photos are uploaded
  1007.     * @type {String}
  1008.     */
  1009.    photoField: String,
  1010.    /**
  1011.     * The name of the field in the Domino Directory person document where a photo url is stored
  1012.     * @type {String}
  1013.     */
  1014.    photoUrlField: String,
  1015.    /**
  1016.     * A url where a photo can be used. If you use this, you don't need to specify a name or DDS Urls
  1017.     * @type {String}
  1018.     */
  1019.    photoUrl: {
  1020.      type: String,
  1021.      observer: '_onPhotoUrlChange'
  1022.    },
  1023.    /**
  1024.     * This is the property that iron-image will use to fetch the image
  1025.     * @type {String}
  1026.     */
  1027.    _photoUrl: String,
  1028.    /**
  1029.     * The First letter of the user's common name
  1030.     * @type {String}
  1031.     */
  1032.    avatarLetter: String,
  1033.    /**
  1034.     * True if the letter should be hidden
  1035.     * @type {Boolean}
  1036.     */
  1037.    _hideLetter: {
  1038.      type: Boolean,
  1039.      value: true
  1040.    },
  1041.    /**
  1042.     * True if the icon should be hidden
  1043.     * @type {Boolean}
  1044.     */
  1045.    _hideIcon: {
  1046.      type: Boolean,
  1047.      value: false
  1048.    },
  1049.    /**
  1050.     * True if the image should be hidden
  1051.     * @type {Boolean}
  1052.     */
  1053.    _hideImage: {
  1054.      type: Boolean,
  1055.      value: true
  1056.    },
  1057.    /**
  1058.     * Object when an error occurs fetching a person
  1059.     * @type {Object}
  1060.     */
  1061.    _fetchPersonError: {
  1062.      type: Object,
  1063.      observer: '_onFetchPersonError'
  1064.    },
  1065.    /**
  1066.     * Object when an error occurs fetching the view entries
  1067.     * @type {Object}
  1068.     */
  1069.    _fetchViewPersonError: {
  1070.      type: Object,
  1071.      observer: '_onFetchViewPersonError'
  1072.    },
  1073.    /**
  1074.     * Object when an error occurs fetching an image
  1075.     * @type {Object}
  1076.     */
  1077.    _fetchImageError: {
  1078.      type: Object,
  1079.      observer: '_onFetchImageError'
  1080.    }
  1081.  },
  1082.  listeners: {
  1083.    'tap': '_onTap'
  1084.  },
  1085.  /**
  1086.   * Produce an event when an error occurs fetching the image
  1087.   * @param  {Object} newVal The error
  1088.   * @param  {Object} oldVal The old error
  1089.   * @event now-avatar-image-error
  1090.   */
  1091.  _onFetchImageError: function(newVal, oldVal) {
  1092.    this.fire('now-avatar-image-error', newVal);
  1093.  },
  1094.  /**
  1095.   * Produce an event when an error occurs fetching the a person from the view
  1096.   * @param  {Object} newVal The error
  1097.   * @param  {Object} oldVal The old error
  1098.   * @event now-avatar-view-person-error
  1099.   */
  1100.  _onFetchViewPersonError: function(newVal, oldVal) {
  1101.    this.fire('now-avatar-view-person-error', newVal);
  1102.  },
  1103.  /**
  1104.   * Produce an event when an error occurs fetching a person document
  1105.   * @param  {Object} newVal The error
  1106.   * @param  {Object} oldVal The old error
  1107.   * @event now-avatar-person-error
  1108.   */
  1109.  _onFetchPersonError: function(newVal, oldVal) {
  1110.    this.fire('now-avatar-person-error', newVal);
  1111.  },
  1112.  /**
  1113.   * Sets which items are hidden and shown
  1114.   * @param {Boolean} hideIcon   True to hide the icon
  1115.   * @param {Boolean} hideLetter True to hide the letter
  1116.   * @param {Boolean} hideImage  True to hide the image
  1117.   */
  1118.  _setHiddenContent: function(hideIcon, hideLetter, hideImage) {
  1119.    this._hideIcon = hideIcon;
  1120.    this._hideLetter = hideLetter;
  1121.    this._hideImage = hideImage;
  1122.    this._setStyles();
  1123.  },
  1124.  /**
  1125.   * Fired when the name changes, sets the letter and and styles
  1126.   * @param {String} newVal The new value for the name
  1127.   */
  1128.  _onNameChange: function(newVal) {
  1129.    this.avatarLetter = this.name ? this.name.substring(4, 3).toUpperCase() : null;
  1130.    if (newVal) {
  1131.      this._setHiddenContent(true, false, true);
  1132.    }else {
  1133.      this._setHiddenContent(false, true, true);
  1134.    }
  1135.  },
  1136.  /**
  1137.   * Fires when the ddsViewUrl changes
  1138.   * @param  {String} newVal The new name
  1139.   * @param  {String} oldVal The old name
  1140.   */
  1141.  _onDdsViewUrlChange: function(newVal) {
  1142.    if (this.name &amp;&amp; this.ddsViewUrl &amp;&amp; this.ddsViewUrl !== '') {
  1143.      this._setHiddenContent(true, false, true);
  1144.      var ajax = this.$.viewPeopleAjax;
  1145.      ajax.params = {
  1146.        sortcolumn: 'FullName',
  1147.        keys: this.name
  1148.      };
  1149.      ajax.generateRequest();
  1150.    }else if (this.name &amp;&amp; !this.ddsViewUrl) {
  1151.      this._setHiddenContent(true, false, true);
  1152.    }
  1153.  },
  1154.  /**
  1155.   * Fired when the person changes
  1156.   * @param  {Object} newVal The new person
  1157.   * @param  {Object} oldVal The old person
  1158.   */
  1159.  _onPersonChange: function(evt, detail) {
  1160.    //console.log(this.is, '_onPersonChange', arguments);
  1161.    var person = detail.response;
  1162.    this.person = person;
  1163.    if (person) {
  1164.      if (this.photoUrl) {
  1165.        this._photoUrl = this.photoUrl;
  1166.        this._setHiddenContent(true, true, false);
  1167.      }else if (this.photoField) {
  1168.        var mime = person[this.photoField];
  1169.        if (person[this.photoField]) {
  1170.          var content = person[this.photoField].content;
  1171.          for (var key in content) {
  1172.            var contentType = content[key].contentType;
  1173.            if (contentType.indexOf('image') &gt; -1) {
  1174.              var contentTypeArr = contentType.split('"');
  1175.              var fileName = contentTypeArr[1];
  1176.              this._photoUrl = this.ddsHostName + '/names.nsf/0/' + person[[email protected]'] + '/$File/' + fileName;
  1177.              this._setHiddenContent(true, true, false);
  1178.              break;
  1179.            }
  1180.          }
  1181.        }
  1182.      }else {
  1183.        this._setHiddenContent(true, false, true);
  1184.      }
  1185.    }else {
  1186.      this._setHiddenContent(false, true, true);
  1187.    }
  1188.    if (this._hideIcon &amp;&amp; !this._hideLetter &amp;&amp; this._hideImage &amp;&amp; this.name) {
  1189.      this._setHiddenContent(true, false, true);
  1190.    }
  1191.  },
  1192.  /**
  1193.   * Sets the background color, text color and line height
  1194.   */
  1195.  _setStyles: function() {
  1196.    if (this.name) {
  1197.      var bgColor = this.getBackgroundColor();
  1198.      var contrastColor = this.getContrastingColor(bgColor);
  1199.      this.style.background = bgColor;
  1200.      this.style.color = contrastColor;
  1201.    }
  1202.  },
  1203.  /**
  1204.   * Fires when the viewPerson property changes. Fetches the person
  1205.   * @param  {Array} newVal The new array from the query of the view
  1206.   * @param  {Array} oldVal The old array
  1207.   */
  1208.  _onViewPersonChange: function(newVal, oldVal) {
  1209.    //console.log(this.is, '_onViewPersonChange', arguments);
  1210.    if (newVal &amp;&amp; newVal.length &gt; 0) {
  1211.      var personEntry = newVal[0];
  1212.      this.ddsPersonUrl = this.ddsHostName + personEntry[[email protected]'].href;
  1213.      var ajax = this.$.personAjax;
  1214.      ajax.generateRequest();
  1215.    }else {
  1216.      this._setHiddenContent(false, true, true);
  1217.    }
  1218.  },
  1219.  /**
  1220.   * Fired when the avatar is tapped. Provides a detail object with
  1221.   * person, this element and name
  1222.   * @param  {Event} evt The event object
  1223.   * @event now-avatar-tapped
  1224.   */
  1225.  _onTap: function(evt) {
  1226.    //console.log(this.is, '_onTap', arguments);
  1227.    if (this.clickUrl) {
  1228.      window.open(this.clickUrl, '_blank');
  1229.    }
  1230.    var detailObj = {
  1231.      person: this.person,
  1232.      elem: this,
  1233.      name: this.name
  1234.    };
  1235.    this.fire('now-avatar-tapped', detailObj);
  1236.  },
  1237.  /**
  1238.   * Get an avatar background color based on the canonical name
  1239.   * @return {String}      Hex color
  1240.   */
  1241.  getBackgroundColor: function() {
  1242.    var hash = 0;
  1243.    if (this.name) {
  1244.      var name = this.name;
  1245.      for (var i = 0; i &lt; name.length; i++) {
  1246.        hash = name.charCodeAt(i) + ((hash &lt;&lt; 5) - hash);
  1247.      }
  1248.    }
  1249.    var colour = '#';
  1250.    for (var j = 0; j &lt; 3; j++) {
  1251.      var value = (hash &gt;&gt; (j * 8)) &amp; 0xFF;
  1252.      var valueStr = value.toString(16);
  1253.      var hexColor = ('00' + valueStr).substr(-2);
  1254.      colour += hexColor;
  1255.    }
  1256.    return colour;
  1257.  },
  1258.  /**
  1259.   * Get a contrasting color that will show up on the avatar
  1260.   * @param  {String} colour The color to find the contrasint color from
  1261.   * @return {String}        css 'color' property value
  1262.   */
  1263.  getContrastingColor: function(colour) {
  1264.    return tinycolor(colour).isDark() ? 'white' : 'black';
  1265.  },
  1266.  /**
  1267.   * Fired when the photoUrl changes
  1268.   * @param  {String} newVal The photo url
  1269.   * @param  {String} oldVal The old photo url
  1270.   */
  1271.  _onPhotoUrlChange: function(newVal, oldVal) {
  1272.    if (newVal) {
  1273.      this._photoUrl = newVal;
  1274.      this._setHiddenContent(true,true,false);
  1275.    }
  1276.  }
  1277. });
  1278.  &lt;/script&gt;
  1279. &lt;/dom-module&gt;
  1280. </pre>
  1281. <p>Quite a bit going on here. The gist of this thing is to check what properties we have defined and make decisions based on those properties so we know what to show (i.e. A letter, icon or image). Also, perform any requests to the server we may need to determine what to show. So the flow through this is as follows:</p>
  1282. <ol>
  1283. <li>Look at the properties provided</li>
  1284. <li>If no properties defined, just show an icon</li>
  1285. <li>If only a name is provided
  1286. <ol>
  1287. <li>display the avatar with a background color unique to that name along with the first letter of the common name</li>
  1288. </ol>
  1289. </li>
  1290. <li>If a name and DDS url information is provided
  1291. <ol>
  1292. <li>Make a request to the server using the URL provided. We use the ($Users) view so we have to pass the name as the key in order to just return that entry</li>
  1293. <li>Once we get that view entry, get the UNID of the document
  1294. <ol>
  1295. <li>If we don&#8217;t find the person, show an icon</li>
  1296. </ol>
  1297. </li>
  1298. <li>Make another request to get the person document using the UNID from the view entry</li>
  1299. <li>Set the &#8220;person&#8221; property to the response we got back from the server
  1300. <ol>
  1301. <li>If the photoField property was defined, get the image from that field</li>
  1302. <li>If the photoUrl property was defined, get the image from that url</li>
  1303. <li>Show the relevant image in the avatar</li>
  1304. </ol>
  1305. </li>
  1306. </ol>
  1307. </li>
  1308. <li>If no name is defined and only the photoUrl property is defined, show the photo from the url</li>
  1309. </ol>
  1310. <p>The only really interesting bits here are the observers which fire when a value changes. In all my previous component examples I did not show an observer. This functionality is very powerful and allows you to make decisions when a value changes based on the actual value.</p>
  1311. <p>The other interesting bit is how the background color is determined. We make a hash from the name (that way it&#8217;s the same every time) and then we create a hexadecimal color string based on the hash. This ensures we get the same color for the same name every time, and in theory every name will be it&#8217;s own unique color. The biggest problem with this though is how do you select the color of text or of the icon so it&#8217;s visible on the auto-generated background color? I elected to use <a href="https://github.com/bgrins/TinyColor" target="_blank">TinyColor</a>. This is a small javascript library for working with colors that seems to be pretty performant.</p>
  1312. <p>Now to use this component we just define it in HTML.</p>
  1313. <pre class="EnlighterJSRAW" data-enlighter-language="html">&lt;now-avatar
  1314.  dds-host-name="http:\/\/10.211.55.9"
  1315.  dds-view-url="http://10.211.55.9/names.nsf/api/data/collections/unid/912366901F00A457852561C20069B844"
  1316.  name="CN=Keith Strickland/O=REDPILL"
  1317.  photo-field="UserPhoto"&gt;
  1318. &lt;/now-avatar&gt;
  1319.  
  1320. &lt;now-avatar
  1321.  class="styledNowAvatar"
  1322.  name="CN=Keith Strickland/O=REDPILL"&gt;
  1323. &lt;/now-avatar&gt;
  1324.  
  1325. &lt;now-avatar
  1326.  photo-url="http://www.gravatar.com/avatar/2b14efcb21ba7256e13a981392832c84?d=404"&gt;
  1327. &lt;/now-avatar&gt;
  1328.  
  1329. &lt;now-avatar
  1330.  click-url="http://redpillnow.com"&gt;
  1331. &lt;/now-avatar&gt;</pre>
  1332. <p>There you have it, a rather robust avatar component with some smarts built into it so it know what to do with the information provided. If you wish to use this component visit it&#8217;s <a href="https://github.com/keithstric/now-avatar" target="_blank">repository on GitHub</a> and to see the docs and demo, visit my <a href="http://keithstric.github.io/now-avatar/index.html" target="_blank">github host account</a>. Now on the demo page, you&#8217;ll probably see failed requests because it can&#8217;t get to my domino directory, but I hope you&#8217;ll get the idea.</p>
  1333. <p>Until next time&#8230; Happy Coding!</p>
  1334. <p>&nbsp;</p>
  1335. <p>&nbsp;</p>
  1336.  
  1337. <style>
  1338. .huge-it-share-buttons {
  1339. border:0px solid #0FB5D6;
  1340. border-radius:5px;
  1341. background:#3BD8FF;
  1342. text-align:right; }
  1343.  
  1344. #huge-it-share-buttons-top {margin-bottom:0px;}
  1345. #huge-it-share-buttons-bottom {margin-top:0px;}
  1346.  
  1347. .huge-it-share-buttons h3 {
  1348. font-size:25px ;
  1349. font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
  1350. color:#666666;
  1351.  
  1352. display:block; line-height:25px ;
  1353.  
  1354. text-align:right; }
  1355.  
  1356. .huge-it-share-buttons ul {
  1357. float:right; }
  1358.  
  1359. .huge-it-share-buttons ul li {
  1360. margin-left:3px;
  1361. margin-right:3px;
  1362. padding:0px;
  1363. border:0px ridge #E6354C;
  1364. border-radius:11px;
  1365. background-color:#14CC9B;
  1366. }
  1367.  
  1368. .huge-it-share-buttons ul li #backforunical767 {
  1369. border-bottom: 0;
  1370. background-image:url('http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/buttons.30.png');
  1371. width:30px;
  1372. height:30px;
  1373. }
  1374.  
  1375. .front-shares-count {
  1376. position: absolute;
  1377. text-align: center;
  1378. display: block;
  1379. }
  1380.  
  1381. .shares_size20 .front-shares-count {
  1382. font-size: 10px;
  1383. top: 10px;
  1384. width: 20px;
  1385. }
  1386.  
  1387. .shares_size30 .front-shares-count {
  1388. font-size: 11px;
  1389. top: 15px;
  1390. width: 30px;
  1391. }
  1392.  
  1393. .shares_size40 .front-shares-count {
  1394. font-size: 12px;
  1395. top: 21px;
  1396. width: 40px;
  1397. }
  1398. </style>
  1399. <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
  1400. <h3>Share This:</h3>
  1401. <ul class="huge-it-share-buttons-list ">
  1402. <li class="nobackground " >
  1403.  
  1404. <a id="backforunical767" href="https://www.facebook.com/sharer/sharer.php?u=keithstric.me/feed/"  onclick="javascript:void window.open('https://www.facebook.com/sharer/sharer.php?u=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -0px -120px "></a>
  1405. </li>
  1406. <li class="nobackground " >
  1407.  
  1408. <a id="backforunical767" href="https://twitter.com/share?status=keithstric.me/feed/&text=A Polymer Avatar component"  onclick="javascript:void window.open('https://twitter.com/share?status=keithstric.me/feed/&text=A Polymer Avatar component','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -30px -120px "></a>
  1409. </li>
  1410. <li class="none nobackground " >
  1411.  
  1412. <a id="backforunical767" href="http://www.pinterest.com/pin/create/button/?url=keithstric.me/feed/&media=http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/noimage.png&description=A Polymer Avatar component"  onclick="javascript:void window.open('http://www.pinterest.com/pin/create/button/?url=keithstric.me/feed/&media=http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/noimage.png&description=A Polymer Avatar component','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -60px -120px "></a>
  1413. </li>
  1414. <li class="nobackground " >
  1415.  
  1416. <a id="backforunical767" href="https://plus.google.com/share?url=keithstric.me/feed/"  onclick="javascript:void window.open('https://plus.google.com/share?url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -90px -120px "></a>
  1417. </li>
  1418. <li class="nobackground " >
  1419.  
  1420. <a id="backforunical767" href="https://www.linkedin.com/shareArticle?title=A Polymer Avatar component&mini=true&url=keithstric.me/feed/"  onclick="javascript:void window.open('https://www.linkedin.com/shareArticle?title=A Polymer Avatar component&mini=true&url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -120px -120px "></a>
  1421. </li>
  1422. <li class="nobackground " >
  1423.  
  1424. <a id="backforunical767" href="https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=A Polymer Avatar component"  onclick="javascript:void window.open('https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=A Polymer Avatar component','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -150px -120px "></a>
  1425. </li>
  1426. <li class="nobackground " >
  1427.  
  1428. <a id="backforunical767" href="http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=A Polymer Avatar component"  onclick="javascript:void window.open('http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=A Polymer Avatar component','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -180px -120px "></a>
  1429. </li>
  1430. <li class="nobackground " >
  1431.  
  1432. <a id="backforunical767" href="http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=A Polymer Avatar component"  onclick="javascript:void window.open('http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=A Polymer Avatar component','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -210px -120px "></a>
  1433. </li>
  1434. <li class="none nobackground " >
  1435.  
  1436. <a id="backforunical767" href="https://myspace.com/post?l=3&u=keithstric.me/feed/"  onclick="javascript:void window.open('https://myspace.com/post?l=3&u=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -240px -120px "></a>
  1437. </li>
  1438. <li class="none nobackground " >
  1439.  
  1440. <a id="backforunical767" href="http://vk.com/share.php?url=keithstric.me/feed/&title=A Polymer Avatar component"  onclick="javascript:void window.open('http://vk.com/share.php?url=keithstric.me/feed/&title=A Polymer Avatar component','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -270px -120px "></a>
  1441. </li>
  1442. <li class="none nobackground " >
  1443.  
  1444. <a id="backforunical767" href="http://www.reddit.com/submit?url=keithstric.me/feed/&title=A Polymer Avatar component"  onclick="javascript:void window.open('http://www.reddit.com/submit?url=keithstric.me/feed/&title=A Polymer Avatar component','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -300px -120px "></a>
  1445. </li>
  1446. <li class="none nobackground " >
  1447.  
  1448. <a id="backforunical767" href="http://www.bebo.com/c/share?Url=keithstric.me/feed/"  onclick="javascript:void window.open('http://www.bebo.com/c/share?Url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -330px -120px "></a>
  1449. </li>
  1450. <li class="none nobackground " >
  1451.  
  1452. <a id="backforunical767" href="https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=A Polymer Avatar component"  onclick="javascript:void window.open('https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=A Polymer Avatar component','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -360px -120px "></a>
  1453. </li>
  1454. <li class="none nobackground " >
  1455.  
  1456. <a id="backforunical767" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=2&st.noresize=on&st._surl=keithstric.me/feed/"  onclick="javascript:void window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=2&st.noresize=on&st._surl=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -390px -120px "></a>
  1457. </li>
  1458. <li class="none nobackground " >
  1459.  
  1460. <a id="backforunical767" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=A Polymer Avatar component"  onclick="javascript:void window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=A Polymer Avatar component','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -420px -120px "></a>
  1461. </li>
  1462. <li class="none nobackground " >
  1463.  
  1464. <a id="backforunical767" href="http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=A Polymer Avatar component&pic=&ralateUid=&"  onclick="javascript:void window.open('http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=A Polymer Avatar component&pic=&ralateUid=&','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -450px -120px "></a>
  1465. </li>
  1466. <li class="none nobackground " >
  1467.  
  1468. <a id="backforunical767" href="http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=A Polymer Avatar component"  onclick="javascript:void window.open('http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=A Polymer Avatar component','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -480px -120px "></a>
  1469. </li>
  1470. <li class="none nobackground " >
  1471.  
  1472. <a id="backforunical767" href="http://n4g.com/tips?url=keithstric.me/feed/&title=A Polymer Avatar component"  onclick="javascript:void window.open('http://n4g.com/tips?url=keithstric.me/feed/&title=A Polymer Avatar component','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -510px -120px "></a>
  1473. </li>
  1474. </ul>
  1475. <div class="clear"></div>
  1476. </div>
  1477. ]]></content:encoded>
  1478. </item>
  1479. <item>
  1480. <title>MWLUG Recap</title>
  1481. <link>http://keithstric.me/2016/08/20/mwlug-recap/</link>
  1482. <pubDate>Sun, 21 Aug 2016 03:27:33 +0000</pubDate>
  1483. <dc:creator><![CDATA[Keith Strickland]]></dc:creator>
  1484. <category><![CDATA[Fun]]></category>
  1485. <category><![CDATA[IBM]]></category>
  1486. <category><![CDATA[Lotus Software]]></category>
  1487.  
  1488. <guid isPermaLink="false">http://keithstric.me/?p=762</guid>
  1489. <description><![CDATA[I had a great time at MWLUG this year. It was great to see so many familiar faces and friends, most of which I only see at the user groups. But, I just got home and thought I would share some of my thoughts and observations about the event and my take away about the state of our beloved Notes. As usual Richard Moy put together a great conference, so many thanks to him for making that event possible. The tone of the event was that most everyone is starting to realize that the Notes client is quickly dying. Domino and the NSF probably have a few more years left in them yet. I]]></description>
  1490. <content:encoded><![CDATA[<p>I had a great time at MWLUG this year. It was great to see so many familiar faces and friends, most of which I only see at the user groups. But, I just got home and thought I would share some of my thoughts and observations about the event and my take away about the state of our beloved Notes. As usual Richard Moy put together a great conference, so many thanks to him for making that event possible.</p>
  1491. <p>The tone of the event was that most everyone is starting to realize that the Notes client is quickly dying. Domino and the NSF probably have a few more years left in them yet. I sat in on <a href="http://redpillnow.com/mwlug-recap/" target="_blank">Peter Presnell</a>&#8216;s and <a href="http://salvationarmysouth.org/" target="_blank">The Salvation Army Southern Territory</a> CIO Clarence White&#8217;s session which was excellent. Clarence outlined from a CIO&#8217;s perspective what he thinks the future of Notes is, and it wasn&#8217;t very good. I&#8217;ve been working with Clarence now for about 18 months and I learned a few things about him I didn&#8217;t know. It also seemed a lot of people came to this conference looking for an alternative to Notes and answers about where we go from here.</p>
  1492. <p>My 2 sessions (Design Matters 2.0 and An Introduction to Web Components) went well with good attendance. I think it was a nice surprise for our Design Matters audience to be joined by the audience from the Rethinking Notes session. That turned into a Red Pill Now Q/A session about how we work together and discussion about some of the different technologies we use.</p>
  1493. <p>During &#8216;An Introduction to Web Components&#8217; session I introduced Kito Mann to the community. Kito joined our team about 7 months ago after I met him during a Web Components workshop here in Atlanta. He has been been an invaluable asset to our team and helped bring search to life within the DIG Portal. I would like to say Thank You to Kito and the community for welcoming him (which I don&#8217;t know why I would doubt this community). Quite a few people approached him and from my understanding some good conversations came from the interactions. It seems there was already some interest in web components within the community. We even had 1 person that had already started playing with <a href="https://www.polymer-project.org/1.0/" target="_blank">Polymer</a> come by our booth and ask Kito for some help with one of his components which was really cool.</p>
  1494. <p><a href="http://redpillnow.com" target="_blank">Red Pill Now</a> debuted our DIG portal that we&#8217;re developing for The Salvation Army and it was well received. We showed the search capabilities of the project which wowed quite a few and I heard quite a few &#8220;that&#8217;s cool&#8221;, &#8220;you&#8217;ve got to be kidding me&#8221; and other very nice compliments. A lot of people also commented on the design and how nice the app looked, which was very nice to hear.</p>
  1495. <p>Thursday night we ate at <a href="http://www.eddiev.com/locations/tx/austin/5th-street-austin/8501?cmpid=br:EV_ag:ogv_ch:ppc_ca:EV_5th-SteetAustin-TX_BR_dt:04-06-2015_gt:EV---Austin-5th-St_sn:goo_kw:eddie-v-austin_ct:text" target="_blank">Eddie V&#8217;s</a> restaurant and I must say that was probably one of the best meals I&#8217;ve ever eaten. It was a little on the pricey side, but I think worth every penny. As for the hotel, the service and facilities were excellent, however the food prices were a little exorbitant ($35 for a club sandwich via room service). The city of Austin seemed quite nice and was easy to get around except for the lack of Uber and other similar options.</p>
  1496. <p>All in all I would say MWLUG was a great conference. If you ever have a chance to attend one of these events don&#8217;t miss out. Next year it&#8217;ll be in Washington D.C. Until next time&#8230;. Happy Coding.</p>
  1497.  
  1498. <style>
  1499. .huge-it-share-buttons {
  1500. border:0px solid #0FB5D6;
  1501. border-radius:5px;
  1502. background:#3BD8FF;
  1503. text-align:right; }
  1504.  
  1505. #huge-it-share-buttons-top {margin-bottom:0px;}
  1506. #huge-it-share-buttons-bottom {margin-top:0px;}
  1507.  
  1508. .huge-it-share-buttons h3 {
  1509. font-size:25px ;
  1510. font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
  1511. color:#666666;
  1512.  
  1513. display:block; line-height:25px ;
  1514.  
  1515. text-align:right; }
  1516.  
  1517. .huge-it-share-buttons ul {
  1518. float:right; }
  1519.  
  1520. .huge-it-share-buttons ul li {
  1521. margin-left:3px;
  1522. margin-right:3px;
  1523. padding:0px;
  1524. border:0px ridge #E6354C;
  1525. border-radius:11px;
  1526. background-color:#14CC9B;
  1527. }
  1528.  
  1529. .huge-it-share-buttons ul li #backforunical762 {
  1530. border-bottom: 0;
  1531. background-image:url('http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/buttons.30.png');
  1532. width:30px;
  1533. height:30px;
  1534. }
  1535.  
  1536. .front-shares-count {
  1537. position: absolute;
  1538. text-align: center;
  1539. display: block;
  1540. }
  1541.  
  1542. .shares_size20 .front-shares-count {
  1543. font-size: 10px;
  1544. top: 10px;
  1545. width: 20px;
  1546. }
  1547.  
  1548. .shares_size30 .front-shares-count {
  1549. font-size: 11px;
  1550. top: 15px;
  1551. width: 30px;
  1552. }
  1553.  
  1554. .shares_size40 .front-shares-count {
  1555. font-size: 12px;
  1556. top: 21px;
  1557. width: 40px;
  1558. }
  1559. </style>
  1560. <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
  1561. <h3>Share This:</h3>
  1562. <ul class="huge-it-share-buttons-list ">
  1563. <li class="nobackground " >
  1564.  
  1565. <a id="backforunical762" href="https://www.facebook.com/sharer/sharer.php?u=keithstric.me/feed/"  onclick="javascript:void window.open('https://www.facebook.com/sharer/sharer.php?u=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -0px -120px "></a>
  1566. </li>
  1567. <li class="nobackground " >
  1568.  
  1569. <a id="backforunical762" href="https://twitter.com/share?status=keithstric.me/feed/&text=MWLUG Recap"  onclick="javascript:void window.open('https://twitter.com/share?status=keithstric.me/feed/&text=MWLUG Recap','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -30px -120px "></a>
  1570. </li>
  1571. <li class="none nobackground " >
  1572.  
  1573. <a id="backforunical762" href="http://www.pinterest.com/pin/create/button/?url=keithstric.me/feed/&media=http://keithstric.me/wp-content/uploads/2016/08/banner.jpg&description=MWLUG Recap"  onclick="javascript:void window.open('http://www.pinterest.com/pin/create/button/?url=keithstric.me/feed/&media=http://keithstric.me/wp-content/uploads/2016/08/banner.jpg&description=MWLUG Recap','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -60px -120px "></a>
  1574. </li>
  1575. <li class="nobackground " >
  1576.  
  1577. <a id="backforunical762" href="https://plus.google.com/share?url=keithstric.me/feed/"  onclick="javascript:void window.open('https://plus.google.com/share?url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -90px -120px "></a>
  1578. </li>
  1579. <li class="nobackground " >
  1580.  
  1581. <a id="backforunical762" href="https://www.linkedin.com/shareArticle?title=MWLUG Recap&mini=true&url=keithstric.me/feed/"  onclick="javascript:void window.open('https://www.linkedin.com/shareArticle?title=MWLUG Recap&mini=true&url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -120px -120px "></a>
  1582. </li>
  1583. <li class="nobackground " >
  1584.  
  1585. <a id="backforunical762" href="https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=MWLUG Recap"  onclick="javascript:void window.open('https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=MWLUG Recap','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -150px -120px "></a>
  1586. </li>
  1587. <li class="nobackground " >
  1588.  
  1589. <a id="backforunical762" href="http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=MWLUG Recap"  onclick="javascript:void window.open('http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=MWLUG Recap','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -180px -120px "></a>
  1590. </li>
  1591. <li class="nobackground " >
  1592.  
  1593. <a id="backforunical762" href="http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=MWLUG Recap"  onclick="javascript:void window.open('http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=MWLUG Recap','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -210px -120px "></a>
  1594. </li>
  1595. <li class="none nobackground " >
  1596.  
  1597. <a id="backforunical762" href="https://myspace.com/post?l=3&u=keithstric.me/feed/"  onclick="javascript:void window.open('https://myspace.com/post?l=3&u=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -240px -120px "></a>
  1598. </li>
  1599. <li class="none nobackground " >
  1600.  
  1601. <a id="backforunical762" href="http://vk.com/share.php?url=keithstric.me/feed/&title=MWLUG Recap"  onclick="javascript:void window.open('http://vk.com/share.php?url=keithstric.me/feed/&title=MWLUG Recap','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -270px -120px "></a>
  1602. </li>
  1603. <li class="none nobackground " >
  1604.  
  1605. <a id="backforunical762" href="http://www.reddit.com/submit?url=keithstric.me/feed/&title=MWLUG Recap"  onclick="javascript:void window.open('http://www.reddit.com/submit?url=keithstric.me/feed/&title=MWLUG Recap','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -300px -120px "></a>
  1606. </li>
  1607. <li class="none nobackground " >
  1608.  
  1609. <a id="backforunical762" href="http://www.bebo.com/c/share?Url=keithstric.me/feed/"  onclick="javascript:void window.open('http://www.bebo.com/c/share?Url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -330px -120px "></a>
  1610. </li>
  1611. <li class="none nobackground " >
  1612.  
  1613. <a id="backforunical762" href="https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=MWLUG Recap"  onclick="javascript:void window.open('https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=MWLUG Recap','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -360px -120px "></a>
  1614. </li>
  1615. <li class="none nobackground " >
  1616.  
  1617. <a id="backforunical762" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=2&st.noresize=on&st._surl=keithstric.me/feed/"  onclick="javascript:void window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=2&st.noresize=on&st._surl=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -390px -120px "></a>
  1618. </li>
  1619. <li class="none nobackground " >
  1620.  
  1621. <a id="backforunical762" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=MWLUG Recap"  onclick="javascript:void window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=MWLUG Recap','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -420px -120px "></a>
  1622. </li>
  1623. <li class="none nobackground " >
  1624.  
  1625. <a id="backforunical762" href="http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=MWLUG Recap&pic=&ralateUid=&"  onclick="javascript:void window.open('http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=MWLUG Recap&pic=&ralateUid=&','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -450px -120px "></a>
  1626. </li>
  1627. <li class="none nobackground " >
  1628.  
  1629. <a id="backforunical762" href="http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=MWLUG Recap"  onclick="javascript:void window.open('http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=MWLUG Recap','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -480px -120px "></a>
  1630. </li>
  1631. <li class="none nobackground " >
  1632.  
  1633. <a id="backforunical762" href="http://n4g.com/tips?url=keithstric.me/feed/&title=MWLUG Recap"  onclick="javascript:void window.open('http://n4g.com/tips?url=keithstric.me/feed/&title=MWLUG Recap','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -510px -120px "></a>
  1634. </li>
  1635. </ul>
  1636. <div class="clear"></div>
  1637. </div>
  1638. ]]></content:encoded>
  1639. </item>
  1640. <item>
  1641. <title>Red Pill is the MWLUG Sponsor of the Week</title>
  1642. <link>http://keithstric.me/2016/08/12/red-pill-is-the-mwlug-sponsor-of-the-week/</link>
  1643. <pubDate>Fri, 12 Aug 2016 16:21:27 +0000</pubDate>
  1644. <dc:creator><![CDATA[Keith Strickland]]></dc:creator>
  1645. <category><![CDATA[Red Pill]]></category>
  1646.  
  1647. <guid isPermaLink="false">http://keithstric.me/?p=759</guid>
  1648. <description><![CDATA[Red Pill Now is the Sponsor of the Week for MWLUG. Check out our video in the top right corner of the site. Share This:]]></description>
  1649. <content:encoded><![CDATA[<p>Red Pill Now is the Sponsor of the Week for <a href="http://www.mwlug.com" target="_blank">MWLUG</a>. Check out our <a href="https://www.youtube.com/watch?v=EJ4cdyV8iP0" target="_blank">video</a> in the top right corner of the site.</p>
  1650.  
  1651. <style>
  1652. .huge-it-share-buttons {
  1653. border:0px solid #0FB5D6;
  1654. border-radius:5px;
  1655. background:#3BD8FF;
  1656. text-align:right; }
  1657.  
  1658. #huge-it-share-buttons-top {margin-bottom:0px;}
  1659. #huge-it-share-buttons-bottom {margin-top:0px;}
  1660.  
  1661. .huge-it-share-buttons h3 {
  1662. font-size:25px ;
  1663. font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
  1664. color:#666666;
  1665.  
  1666. display:block; line-height:25px ;
  1667.  
  1668. text-align:right; }
  1669.  
  1670. .huge-it-share-buttons ul {
  1671. float:right; }
  1672.  
  1673. .huge-it-share-buttons ul li {
  1674. margin-left:3px;
  1675. margin-right:3px;
  1676. padding:0px;
  1677. border:0px ridge #E6354C;
  1678. border-radius:11px;
  1679. background-color:#14CC9B;
  1680. }
  1681.  
  1682. .huge-it-share-buttons ul li #backforunical759 {
  1683. border-bottom: 0;
  1684. background-image:url('http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/buttons.30.png');
  1685. width:30px;
  1686. height:30px;
  1687. }
  1688.  
  1689. .front-shares-count {
  1690. position: absolute;
  1691. text-align: center;
  1692. display: block;
  1693. }
  1694.  
  1695. .shares_size20 .front-shares-count {
  1696. font-size: 10px;
  1697. top: 10px;
  1698. width: 20px;
  1699. }
  1700.  
  1701. .shares_size30 .front-shares-count {
  1702. font-size: 11px;
  1703. top: 15px;
  1704. width: 30px;
  1705. }
  1706.  
  1707. .shares_size40 .front-shares-count {
  1708. font-size: 12px;
  1709. top: 21px;
  1710. width: 40px;
  1711. }
  1712. </style>
  1713. <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
  1714. <h3>Share This:</h3>
  1715. <ul class="huge-it-share-buttons-list ">
  1716. <li class="nobackground " >
  1717.  
  1718. <a id="backforunical759" href="https://www.facebook.com/sharer/sharer.php?u=keithstric.me/feed/"  onclick="javascript:void window.open('https://www.facebook.com/sharer/sharer.php?u=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -0px -120px "></a>
  1719. </li>
  1720. <li class="nobackground " >
  1721.  
  1722. <a id="backforunical759" href="https://twitter.com/share?status=keithstric.me/feed/&text=Red Pill is the MWLUG Sponsor of the Week"  onclick="javascript:void window.open('https://twitter.com/share?status=keithstric.me/feed/&text=Red Pill is the MWLUG Sponsor of the Week','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -30px -120px "></a>
  1723. </li>
  1724. <li class="none nobackground " >
  1725.  
  1726. <a id="backforunical759" href="http://www.pinterest.com/pin/create/button/?url=keithstric.me/feed/&media=http://keithstric.me/wp-content/uploads/2016/08/RPN_Logo_Stacked-Preferred.png&description=Red Pill is the MWLUG Sponsor of the Week"  onclick="javascript:void window.open('http://www.pinterest.com/pin/create/button/?url=keithstric.me/feed/&media=http://keithstric.me/wp-content/uploads/2016/08/RPN_Logo_Stacked-Preferred.png&description=Red Pill is the MWLUG Sponsor of the Week','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -60px -120px "></a>
  1727. </li>
  1728. <li class="nobackground " >
  1729.  
  1730. <a id="backforunical759" href="https://plus.google.com/share?url=keithstric.me/feed/"  onclick="javascript:void window.open('https://plus.google.com/share?url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -90px -120px "></a>
  1731. </li>
  1732. <li class="nobackground " >
  1733.  
  1734. <a id="backforunical759" href="https://www.linkedin.com/shareArticle?title=Red Pill is the MWLUG Sponsor of the Week&mini=true&url=keithstric.me/feed/"  onclick="javascript:void window.open('https://www.linkedin.com/shareArticle?title=Red Pill is the MWLUG Sponsor of the Week&mini=true&url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -120px -120px "></a>
  1735. </li>
  1736. <li class="nobackground " >
  1737.  
  1738. <a id="backforunical759" href="https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Red Pill is the MWLUG Sponsor of the Week"  onclick="javascript:void window.open('https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Red Pill is the MWLUG Sponsor of the Week','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -150px -120px "></a>
  1739. </li>
  1740. <li class="nobackground " >
  1741.  
  1742. <a id="backforunical759" href="http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Red Pill is the MWLUG Sponsor of the Week"  onclick="javascript:void window.open('http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Red Pill is the MWLUG Sponsor of the Week','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -180px -120px "></a>
  1743. </li>
  1744. <li class="nobackground " >
  1745.  
  1746. <a id="backforunical759" href="http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Red Pill is the MWLUG Sponsor of the Week"  onclick="javascript:void window.open('http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Red Pill is the MWLUG Sponsor of the Week','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -210px -120px "></a>
  1747. </li>
  1748. <li class="none nobackground " >
  1749.  
  1750. <a id="backforunical759" href="https://myspace.com/post?l=3&u=keithstric.me/feed/"  onclick="javascript:void window.open('https://myspace.com/post?l=3&u=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -240px -120px "></a>
  1751. </li>
  1752. <li class="none nobackground " >
  1753.  
  1754. <a id="backforunical759" href="http://vk.com/share.php?url=keithstric.me/feed/&title=Red Pill is the MWLUG Sponsor of the Week"  onclick="javascript:void window.open('http://vk.com/share.php?url=keithstric.me/feed/&title=Red Pill is the MWLUG Sponsor of the Week','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -270px -120px "></a>
  1755. </li>
  1756. <li class="none nobackground " >
  1757.  
  1758. <a id="backforunical759" href="http://www.reddit.com/submit?url=keithstric.me/feed/&title=Red Pill is the MWLUG Sponsor of the Week"  onclick="javascript:void window.open('http://www.reddit.com/submit?url=keithstric.me/feed/&title=Red Pill is the MWLUG Sponsor of the Week','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -300px -120px "></a>
  1759. </li>
  1760. <li class="none nobackground " >
  1761.  
  1762. <a id="backforunical759" href="http://www.bebo.com/c/share?Url=keithstric.me/feed/"  onclick="javascript:void window.open('http://www.bebo.com/c/share?Url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -330px -120px "></a>
  1763. </li>
  1764. <li class="none nobackground " >
  1765.  
  1766. <a id="backforunical759" href="https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Red Pill is the MWLUG Sponsor of the Week"  onclick="javascript:void window.open('https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Red Pill is the MWLUG Sponsor of the Week','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -360px -120px "></a>
  1767. </li>
  1768. <li class="none nobackground " >
  1769.  
  1770. <a id="backforunical759" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=2&st.noresize=on&st._surl=keithstric.me/feed/"  onclick="javascript:void window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=2&st.noresize=on&st._surl=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -390px -120px "></a>
  1771. </li>
  1772. <li class="none nobackground " >
  1773.  
  1774. <a id="backforunical759" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Red Pill is the MWLUG Sponsor of the Week"  onclick="javascript:void window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Red Pill is the MWLUG Sponsor of the Week','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -420px -120px "></a>
  1775. </li>
  1776. <li class="none nobackground " >
  1777.  
  1778. <a id="backforunical759" href="http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Red Pill is the MWLUG Sponsor of the Week&pic=&ralateUid=&"  onclick="javascript:void window.open('http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Red Pill is the MWLUG Sponsor of the Week&pic=&ralateUid=&','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -450px -120px "></a>
  1779. </li>
  1780. <li class="none nobackground " >
  1781.  
  1782. <a id="backforunical759" href="http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Red Pill is the MWLUG Sponsor of the Week"  onclick="javascript:void window.open('http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Red Pill is the MWLUG Sponsor of the Week','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -480px -120px "></a>
  1783. </li>
  1784. <li class="none nobackground " >
  1785.  
  1786. <a id="backforunical759" href="http://n4g.com/tips?url=keithstric.me/feed/&title=Red Pill is the MWLUG Sponsor of the Week"  onclick="javascript:void window.open('http://n4g.com/tips?url=keithstric.me/feed/&title=Red Pill is the MWLUG Sponsor of the Week','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -510px -120px "></a>
  1787. </li>
  1788. </ul>
  1789. <div class="clear"></div>
  1790. </div>
  1791. ]]></content:encoded>
  1792. </item>
  1793. <item>
  1794. <title>Domino svg support</title>
  1795. <link>http://keithstric.me/2016/08/12/domino-svg-support/</link>
  1796. <pubDate>Fri, 12 Aug 2016 15:09:36 +0000</pubDate>
  1797. <dc:creator><![CDATA[Keith Strickland]]></dc:creator>
  1798. <category><![CDATA[Domino]]></category>
  1799.  
  1800. <guid isPermaLink="false">http://keithstric.me/?p=753</guid>
  1801. <description><![CDATA[I&#8217;ve been messing with the Polymer vaadin-grid. If you enable hidable columns, a little graphic svg icon shows in the top right hand corner of the grid that produces a drop down menu of all the columns in the grid. You click one and it&#8217;ll hide that column. This was working great when running from my local gulp server. However when I put it on Domino, the little icon wasn&#8217;t showing, but the button was there (you couldn&#8217;t see it tho) and the menu worked when clicked. I did some research and the only thing I could find on the issue was a Stack Overflow question that kind-of pointed me in the right]]></description>
  1802. <content:encoded><![CDATA[<p>I&#8217;ve been messing with the <a href="https://vaadin.com/elements/-/element/vaadin-grid" target="_blank">Polymer vaadin-grid</a>. If you enable hidable columns, a little graphic svg icon shows in the top right hand corner of the grid that produces a drop down menu of all the columns in the grid. You click one and it&#8217;ll hide that column.</p>
  1803. <p><img class="aligncenter wp-image-756 size-full" src="http://keithstric.me/wp-content/uploads/2016/08/Screen-Shot-2016-08-12-at-11.04.43-AM.png" alt="Screen Shot 2016-08-12 at 11.04.43 AM" width="626" height="170" srcset="http://keithstric.me/wp-content/uploads/2016/08/Screen-Shot-2016-08-12-at-11.04.43-AM.png 626w, http://keithstric.me/wp-content/uploads/2016/08/Screen-Shot-2016-08-12-at-11.04.43-AM-300x81.png 300w" sizes="(max-width: 626px) 100vw, 626px" /></p>
  1804. <p>This was working great when running from my local gulp server. However when I put it on Domino, the little icon wasn&#8217;t showing, but the button was there (you couldn&#8217;t see it tho) and the menu worked when clicked. I did some research and the only thing I could find on the issue was a <a href="http://stackoverflow.com/questions/23980402/domino-server-delivering-svg-files-with-mime-type-application-octet-stream" target="_blank">Stack Overflow question</a> that kind-of pointed me in the right direction but didn&#8217;t document the entire solution.</p>
  1805. <p>The problem is domino delivered the svg with a content-type of application/octet-stream. It should have delivered the svg with a content-type of image/svg+xml. To fix this issue find the httpd.cnf file in the domino data directory and edit that file. Find the images section and add this line:</p>
  1806. <pre class="EnlighterJSRAW" data-enlighter-language="ini">AddType  .svg   image/svg+xml # SVG Image format</pre>
  1807. <p>Once I restarted http the icon for hiding the columns appeared. Hopefully this helps anyone encountering this same issue. Until next time, Happy Coding.</p>
  1808.  
  1809. <style>
  1810. .huge-it-share-buttons {
  1811. border:0px solid #0FB5D6;
  1812. border-radius:5px;
  1813. background:#3BD8FF;
  1814. text-align:right; }
  1815.  
  1816. #huge-it-share-buttons-top {margin-bottom:0px;}
  1817. #huge-it-share-buttons-bottom {margin-top:0px;}
  1818.  
  1819. .huge-it-share-buttons h3 {
  1820. font-size:25px ;
  1821. font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
  1822. color:#666666;
  1823.  
  1824. display:block; line-height:25px ;
  1825.  
  1826. text-align:right; }
  1827.  
  1828. .huge-it-share-buttons ul {
  1829. float:right; }
  1830.  
  1831. .huge-it-share-buttons ul li {
  1832. margin-left:3px;
  1833. margin-right:3px;
  1834. padding:0px;
  1835. border:0px ridge #E6354C;
  1836. border-radius:11px;
  1837. background-color:#14CC9B;
  1838. }
  1839.  
  1840. .huge-it-share-buttons ul li #backforunical753 {
  1841. border-bottom: 0;
  1842. background-image:url('http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/buttons.30.png');
  1843. width:30px;
  1844. height:30px;
  1845. }
  1846.  
  1847. .front-shares-count {
  1848. position: absolute;
  1849. text-align: center;
  1850. display: block;
  1851. }
  1852.  
  1853. .shares_size20 .front-shares-count {
  1854. font-size: 10px;
  1855. top: 10px;
  1856. width: 20px;
  1857. }
  1858.  
  1859. .shares_size30 .front-shares-count {
  1860. font-size: 11px;
  1861. top: 15px;
  1862. width: 30px;
  1863. }
  1864.  
  1865. .shares_size40 .front-shares-count {
  1866. font-size: 12px;
  1867. top: 21px;
  1868. width: 40px;
  1869. }
  1870. </style>
  1871. <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
  1872. <h3>Share This:</h3>
  1873. <ul class="huge-it-share-buttons-list ">
  1874. <li class="nobackground " >
  1875.  
  1876. <a id="backforunical753" href="https://www.facebook.com/sharer/sharer.php?u=keithstric.me/feed/"  onclick="javascript:void window.open('https://www.facebook.com/sharer/sharer.php?u=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -0px -120px "></a>
  1877. </li>
  1878. <li class="nobackground " >
  1879.  
  1880. <a id="backforunical753" href="https://twitter.com/share?status=keithstric.me/feed/&text=Domino svg support"  onclick="javascript:void window.open('https://twitter.com/share?status=keithstric.me/feed/&text=Domino svg support','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -30px -120px "></a>
  1881. </li>
  1882. <li class="none nobackground " >
  1883.  
  1884. <a id="backforunical753" href="http://www.pinterest.com/pin/create/button/?url=keithstric.me/feed/&media=http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/noimage.png&description=Domino svg support"  onclick="javascript:void window.open('http://www.pinterest.com/pin/create/button/?url=keithstric.me/feed/&media=http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/noimage.png&description=Domino svg support','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -60px -120px "></a>
  1885. </li>
  1886. <li class="nobackground " >
  1887.  
  1888. <a id="backforunical753" href="https://plus.google.com/share?url=keithstric.me/feed/"  onclick="javascript:void window.open('https://plus.google.com/share?url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -90px -120px "></a>
  1889. </li>
  1890. <li class="nobackground " >
  1891.  
  1892. <a id="backforunical753" href="https://www.linkedin.com/shareArticle?title=Domino svg support&mini=true&url=keithstric.me/feed/"  onclick="javascript:void window.open('https://www.linkedin.com/shareArticle?title=Domino svg support&mini=true&url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -120px -120px "></a>
  1893. </li>
  1894. <li class="nobackground " >
  1895.  
  1896. <a id="backforunical753" href="https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Domino svg support"  onclick="javascript:void window.open('https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Domino svg support','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -150px -120px "></a>
  1897. </li>
  1898. <li class="nobackground " >
  1899.  
  1900. <a id="backforunical753" href="http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Domino svg support"  onclick="javascript:void window.open('http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Domino svg support','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -180px -120px "></a>
  1901. </li>
  1902. <li class="nobackground " >
  1903.  
  1904. <a id="backforunical753" href="http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Domino svg support"  onclick="javascript:void window.open('http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Domino svg support','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -210px -120px "></a>
  1905. </li>
  1906. <li class="none nobackground " >
  1907.  
  1908. <a id="backforunical753" href="https://myspace.com/post?l=3&u=keithstric.me/feed/"  onclick="javascript:void window.open('https://myspace.com/post?l=3&u=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -240px -120px "></a>
  1909. </li>
  1910. <li class="none nobackground " >
  1911.  
  1912. <a id="backforunical753" href="http://vk.com/share.php?url=keithstric.me/feed/&title=Domino svg support"  onclick="javascript:void window.open('http://vk.com/share.php?url=keithstric.me/feed/&title=Domino svg support','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -270px -120px "></a>
  1913. </li>
  1914. <li class="none nobackground " >
  1915.  
  1916. <a id="backforunical753" href="http://www.reddit.com/submit?url=keithstric.me/feed/&title=Domino svg support"  onclick="javascript:void window.open('http://www.reddit.com/submit?url=keithstric.me/feed/&title=Domino svg support','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -300px -120px "></a>
  1917. </li>
  1918. <li class="none nobackground " >
  1919.  
  1920. <a id="backforunical753" href="http://www.bebo.com/c/share?Url=keithstric.me/feed/"  onclick="javascript:void window.open('http://www.bebo.com/c/share?Url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -330px -120px "></a>
  1921. </li>
  1922. <li class="none nobackground " >
  1923.  
  1924. <a id="backforunical753" href="https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Domino svg support"  onclick="javascript:void window.open('https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Domino svg support','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -360px -120px "></a>
  1925. </li>
  1926. <li class="none nobackground " >
  1927.  
  1928. <a id="backforunical753" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=2&st.noresize=on&st._surl=keithstric.me/feed/"  onclick="javascript:void window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=2&st.noresize=on&st._surl=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -390px -120px "></a>
  1929. </li>
  1930. <li class="none nobackground " >
  1931.  
  1932. <a id="backforunical753" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Domino svg support"  onclick="javascript:void window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Domino svg support','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -420px -120px "></a>
  1933. </li>
  1934. <li class="none nobackground " >
  1935.  
  1936. <a id="backforunical753" href="http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Domino svg support&pic=&ralateUid=&"  onclick="javascript:void window.open('http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Domino svg support&pic=&ralateUid=&','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -450px -120px "></a>
  1937. </li>
  1938. <li class="none nobackground " >
  1939.  
  1940. <a id="backforunical753" href="http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Domino svg support"  onclick="javascript:void window.open('http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Domino svg support','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -480px -120px "></a>
  1941. </li>
  1942. <li class="none nobackground " >
  1943.  
  1944. <a id="backforunical753" href="http://n4g.com/tips?url=keithstric.me/feed/&title=Domino svg support"  onclick="javascript:void window.open('http://n4g.com/tips?url=keithstric.me/feed/&title=Domino svg support','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -510px -120px "></a>
  1945. </li>
  1946. </ul>
  1947. <div class="clear"></div>
  1948. </div>
  1949. ]]></content:encoded>
  1950. </item>
  1951. <item>
  1952. <title>Setting up a Polymer development environment</title>
  1953. <link>http://keithstric.me/2016/07/29/setting-up-a-polymer-development-environment/</link>
  1954. <pubDate>Fri, 29 Jul 2016 15:35:02 +0000</pubDate>
  1955. <dc:creator><![CDATA[Keith Strickland]]></dc:creator>
  1956. <category><![CDATA[Polymer]]></category>
  1957.  
  1958. <guid isPermaLink="false">http://keithstric.me/?p=740</guid>
  1959. <description><![CDATA[When working with Polymer you&#8217;ll need a development environment. Google has created some great tools for doing this, mainly the Polymer-CLI. This is a command line interface for creating elements, applications, building applications (though I prefer a Gulp build system), a web server and some other misc. tools. This should be your starting point for setting up your development environment. To setup the polymer-cli you&#8217;ll need a few dependencies: Git Node.js (4.x) Bower Once those are installed you can just use npm to install the polymer-cli: npm install -g polymer-cli Now to use the polymer-cli, create a directory for your project. If you&#8217;re creating a custom element I&#8217;ve found it best]]></description>
  1960. <content:encoded><![CDATA[<p>When working with Polymer you&#8217;ll need a development environment. Google has created some great tools for doing this, mainly the <a href="https://www.polymer-project.org/1.0/docs/tools/polymer-cli" target="_blank">Polymer-CLI</a>. This is a command line interface for creating elements, applications, building applications (though I prefer a Gulp build system), a web server and some other misc. tools. This should be your starting point for setting up your development environment.</p>
  1961. <p>To setup the polymer-cli you&#8217;ll need a few dependencies:</p>
  1962. <ul>
  1963. <li><a href="https://git-scm.com/downloads" target="_blank">Git</a></li>
  1964. <li><a href="https://nodejs.org/en/download/" target="_blank">Node.js</a> (4.x)</li>
  1965. <li><a href="https://bower.io/" target="_blank">Bower</a></li>
  1966. </ul>
  1967. <p>Once those are installed you can just use npm to install the polymer-cli:</p>
  1968. <pre class="EnlighterJSRAW" data-enlighter-language="shell">npm install -g polymer-cli</pre>
  1969. <p>Now to use the polymer-cli, create a directory for your project. If you&#8217;re creating a custom element I&#8217;ve found it best to name the directory the same as your element name. This is because the polymer-cli will use the directory name as the default name for your element. Once you do that move to that directory in the command line and type:</p>
  1970. <pre class="EnlighterJSRAW" data-enlighter-language="shell">polymer init</pre>
  1971. <p>That will present you with the following:</p>
  1972. <p><img class="aligncenter wp-image-741 size-full" src="http://keithstric.me/wp-content/uploads/2016/07/Screen-Shot-2016-07-29-at-11.17.01-AM.png" alt="Screen Shot 2016-07-29 at 11.17.01 AM" width="648" height="196" srcset="http://keithstric.me/wp-content/uploads/2016/07/Screen-Shot-2016-07-29-at-11.17.01-AM.png 648w, http://keithstric.me/wp-content/uploads/2016/07/Screen-Shot-2016-07-29-at-11.17.01-AM-300x91.png 300w" sizes="(max-width: 648px) 100vw, 648px" /></p>
  1973. <p>Use your arrow keys to select the option you want. In our case we want to create an element so we&#8217;ll just leave it at &#8216;element&#8217; and press enter. Then just follow the prompts and answer a couple of questions. Namely the name of your element (it&#8217;ll default to the directory name) and a description of the element. Once you press enter for the last question it&#8217;ll generate the boilerplate for a new element and run bower install.</p>
  1974. <p><img class="aligncenter wp-image-742 size-full" src="http://keithstric.me/wp-content/uploads/2016/07/Screen-Shot-2016-07-29-at-11.21.22-AM.png" alt="Screen Shot 2016-07-29 at 11.21.22 AM" width="650" height="385" srcset="http://keithstric.me/wp-content/uploads/2016/07/Screen-Shot-2016-07-29-at-11.21.22-AM.png 650w, http://keithstric.me/wp-content/uploads/2016/07/Screen-Shot-2016-07-29-at-11.21.22-AM-300x178.png 300w" sizes="(max-width: 650px) 100vw, 650px" /></p>
  1975. <p>This will generate the following directory tree:</p>
  1976. <p><img class="aligncenter wp-image-743" src="http://keithstric.me/wp-content/uploads/2016/07/Screen-Shot-2016-07-29-at-11.23.11-AM.png" alt="Screen Shot 2016-07-29 at 11.23.11 AM" width="650" height="233" srcset="http://keithstric.me/wp-content/uploads/2016/07/Screen-Shot-2016-07-29-at-11.23.11-AM.png 892w, http://keithstric.me/wp-content/uploads/2016/07/Screen-Shot-2016-07-29-at-11.23.11-AM-300x108.png 300w, http://keithstric.me/wp-content/uploads/2016/07/Screen-Shot-2016-07-29-at-11.23.11-AM-768x276.png 768w" sizes="(max-width: 650px) 100vw, 650px" /></p>
  1977. <p>Now you&#8217;re all set to start writing code. When you&#8217;re ready to test your element just fire up the server:</p>
  1978. <pre class="EnlighterJSRAW" data-enlighter-language="shell">polymer serve</pre>
  1979. <p><img class="aligncenter wp-image-744 size-full" src="http://keithstric.me/wp-content/uploads/2016/07/Screen-Shot-2016-07-29-at-11.25.36-AM.png" alt="Screen Shot 2016-07-29 at 11.25.36 AM" width="648" height="203" srcset="http://keithstric.me/wp-content/uploads/2016/07/Screen-Shot-2016-07-29-at-11.25.36-AM.png 648w, http://keithstric.me/wp-content/uploads/2016/07/Screen-Shot-2016-07-29-at-11.25.36-AM-300x94.png 300w" sizes="(max-width: 648px) 100vw, 648px" /></p>
  1980. <p>Then navigate your browser to the advertised url:</p>
  1981. <p><img class="aligncenter wp-image-745 size-full" src="http://keithstric.me/wp-content/uploads/2016/07/Screen-Shot-2016-07-29-at-11.26.36-AM.png" alt="Screen Shot 2016-07-29 at 11.26.36 AM" width="603" height="340" srcset="http://keithstric.me/wp-content/uploads/2016/07/Screen-Shot-2016-07-29-at-11.26.36-AM.png 603w, http://keithstric.me/wp-content/uploads/2016/07/Screen-Shot-2016-07-29-at-11.26.36-AM-300x169.png 300w" sizes="(max-width: 603px) 100vw, 603px" /></p>
  1982. <p>And voila, you&#8217;re all set to develop your first element. If you would like to learn more about the polymer-cli there is a <a href="https://www.youtube.com/watch?v=pj2lmXVa84U" target="_blank">PolyCast</a> out that describes it use.</p>
  1983. <p>Another tool I&#8217;ve found useful working with Polymer are mainly a chrome extension called <a href="https://chrome.google.com/webstore/detail/polysearch/gchibjlnlbpgcfjpbebnlecbbjndiidj" target="_blank">PolySearch</a>. With this tool you can search the <a href="https://elements.polymer-project.org/" target="_blank">polymer element catalog</a> right from your browser url bar. Type (without quotes): poly&lt;space&gt;&lt;Element Name&gt;. That will give you something like this:</p>
  1984. <p><img class="aligncenter wp-image-749 size-medium" src="http://keithstric.me/wp-content/uploads/2016/07/Screen-Shot-2016-07-29-at-11.40.12-AM-300x32.png" alt="Screen Shot 2016-07-29 at 11.40.12 AM" width="300" height="32" srcset="http://keithstric.me/wp-content/uploads/2016/07/Screen-Shot-2016-07-29-at-11.40.12-AM-300x32.png 300w, http://keithstric.me/wp-content/uploads/2016/07/Screen-Shot-2016-07-29-at-11.40.12-AM.png 359w" sizes="(max-width: 300px) 100vw, 300px" /></p>
  1985. <p>Once you press enter, you&#8217;ll be taken to the Polymer Element Catalog with that search term and all the elements that match the search term will be listed. Very handy and I use it every day.</p>
  1986. <p>Hope you find this useful and until next time&#8230; Happy Coding!</p>
  1987.  
  1988. <style>
  1989. .huge-it-share-buttons {
  1990. border:0px solid #0FB5D6;
  1991. border-radius:5px;
  1992. background:#3BD8FF;
  1993. text-align:right; }
  1994.  
  1995. #huge-it-share-buttons-top {margin-bottom:0px;}
  1996. #huge-it-share-buttons-bottom {margin-top:0px;}
  1997.  
  1998. .huge-it-share-buttons h3 {
  1999. font-size:25px ;
  2000. font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
  2001. color:#666666;
  2002.  
  2003. display:block; line-height:25px ;
  2004.  
  2005. text-align:right; }
  2006.  
  2007. .huge-it-share-buttons ul {
  2008. float:right; }
  2009.  
  2010. .huge-it-share-buttons ul li {
  2011. margin-left:3px;
  2012. margin-right:3px;
  2013. padding:0px;
  2014. border:0px ridge #E6354C;
  2015. border-radius:11px;
  2016. background-color:#14CC9B;
  2017. }
  2018.  
  2019. .huge-it-share-buttons ul li #backforunical740 {
  2020. border-bottom: 0;
  2021. background-image:url('http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/buttons.30.png');
  2022. width:30px;
  2023. height:30px;
  2024. }
  2025.  
  2026. .front-shares-count {
  2027. position: absolute;
  2028. text-align: center;
  2029. display: block;
  2030. }
  2031.  
  2032. .shares_size20 .front-shares-count {
  2033. font-size: 10px;
  2034. top: 10px;
  2035. width: 20px;
  2036. }
  2037.  
  2038. .shares_size30 .front-shares-count {
  2039. font-size: 11px;
  2040. top: 15px;
  2041. width: 30px;
  2042. }
  2043.  
  2044. .shares_size40 .front-shares-count {
  2045. font-size: 12px;
  2046. top: 21px;
  2047. width: 40px;
  2048. }
  2049. </style>
  2050. <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
  2051. <h3>Share This:</h3>
  2052. <ul class="huge-it-share-buttons-list ">
  2053. <li class="nobackground " >
  2054.  
  2055. <a id="backforunical740" href="https://www.facebook.com/sharer/sharer.php?u=keithstric.me/feed/"  onclick="javascript:void window.open('https://www.facebook.com/sharer/sharer.php?u=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -0px -120px "></a>
  2056. </li>
  2057. <li class="nobackground " >
  2058.  
  2059. <a id="backforunical740" href="https://twitter.com/share?status=keithstric.me/feed/&text=Setting up a Polymer development environment"  onclick="javascript:void window.open('https://twitter.com/share?status=keithstric.me/feed/&text=Setting up a Polymer development environment','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -30px -120px "></a>
  2060. </li>
  2061. <li class="none nobackground " >
  2062.  
  2063. <a id="backforunical740" href="http://www.pinterest.com/pin/create/button/?url=keithstric.me/feed/&media=http://keithstric.me/wp-content/uploads/2016/05/Polymer-logo-featured.png&description=Setting up a Polymer development environment"  onclick="javascript:void window.open('http://www.pinterest.com/pin/create/button/?url=keithstric.me/feed/&media=http://keithstric.me/wp-content/uploads/2016/05/Polymer-logo-featured.png&description=Setting up a Polymer development environment','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -60px -120px "></a>
  2064. </li>
  2065. <li class="nobackground " >
  2066.  
  2067. <a id="backforunical740" href="https://plus.google.com/share?url=keithstric.me/feed/"  onclick="javascript:void window.open('https://plus.google.com/share?url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -90px -120px "></a>
  2068. </li>
  2069. <li class="nobackground " >
  2070.  
  2071. <a id="backforunical740" href="https://www.linkedin.com/shareArticle?title=Setting up a Polymer development environment&mini=true&url=keithstric.me/feed/"  onclick="javascript:void window.open('https://www.linkedin.com/shareArticle?title=Setting up a Polymer development environment&mini=true&url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -120px -120px "></a>
  2072. </li>
  2073. <li class="nobackground " >
  2074.  
  2075. <a id="backforunical740" href="https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Setting up a Polymer development environment"  onclick="javascript:void window.open('https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Setting up a Polymer development environment','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -150px -120px "></a>
  2076. </li>
  2077. <li class="nobackground " >
  2078.  
  2079. <a id="backforunical740" href="http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Setting up a Polymer development environment"  onclick="javascript:void window.open('http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Setting up a Polymer development environment','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -180px -120px "></a>
  2080. </li>
  2081. <li class="nobackground " >
  2082.  
  2083. <a id="backforunical740" href="http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Setting up a Polymer development environment"  onclick="javascript:void window.open('http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Setting up a Polymer development environment','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -210px -120px "></a>
  2084. </li>
  2085. <li class="none nobackground " >
  2086.  
  2087. <a id="backforunical740" href="https://myspace.com/post?l=3&u=keithstric.me/feed/"  onclick="javascript:void window.open('https://myspace.com/post?l=3&u=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -240px -120px "></a>
  2088. </li>
  2089. <li class="none nobackground " >
  2090.  
  2091. <a id="backforunical740" href="http://vk.com/share.php?url=keithstric.me/feed/&title=Setting up a Polymer development environment"  onclick="javascript:void window.open('http://vk.com/share.php?url=keithstric.me/feed/&title=Setting up a Polymer development environment','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -270px -120px "></a>
  2092. </li>
  2093. <li class="none nobackground " >
  2094.  
  2095. <a id="backforunical740" href="http://www.reddit.com/submit?url=keithstric.me/feed/&title=Setting up a Polymer development environment"  onclick="javascript:void window.open('http://www.reddit.com/submit?url=keithstric.me/feed/&title=Setting up a Polymer development environment','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -300px -120px "></a>
  2096. </li>
  2097. <li class="none nobackground " >
  2098.  
  2099. <a id="backforunical740" href="http://www.bebo.com/c/share?Url=keithstric.me/feed/"  onclick="javascript:void window.open('http://www.bebo.com/c/share?Url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -330px -120px "></a>
  2100. </li>
  2101. <li class="none nobackground " >
  2102.  
  2103. <a id="backforunical740" href="https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Setting up a Polymer development environment"  onclick="javascript:void window.open('https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Setting up a Polymer development environment','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -360px -120px "></a>
  2104. </li>
  2105. <li class="none nobackground " >
  2106.  
  2107. <a id="backforunical740" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=2&st.noresize=on&st._surl=keithstric.me/feed/"  onclick="javascript:void window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=2&st.noresize=on&st._surl=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -390px -120px "></a>
  2108. </li>
  2109. <li class="none nobackground " >
  2110.  
  2111. <a id="backforunical740" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Setting up a Polymer development environment"  onclick="javascript:void window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Setting up a Polymer development environment','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -420px -120px "></a>
  2112. </li>
  2113. <li class="none nobackground " >
  2114.  
  2115. <a id="backforunical740" href="http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Setting up a Polymer development environment&pic=&ralateUid=&"  onclick="javascript:void window.open('http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Setting up a Polymer development environment&pic=&ralateUid=&','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -450px -120px "></a>
  2116. </li>
  2117. <li class="none nobackground " >
  2118.  
  2119. <a id="backforunical740" href="http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Setting up a Polymer development environment"  onclick="javascript:void window.open('http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Setting up a Polymer development environment','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -480px -120px "></a>
  2120. </li>
  2121. <li class="none nobackground " >
  2122.  
  2123. <a id="backforunical740" href="http://n4g.com/tips?url=keithstric.me/feed/&title=Setting up a Polymer development environment"  onclick="javascript:void window.open('http://n4g.com/tips?url=keithstric.me/feed/&title=Setting up a Polymer development environment','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -510px -120px "></a>
  2124. </li>
  2125. </ul>
  2126. <div class="clear"></div>
  2127. </div>
  2128. ]]></content:encoded>
  2129. </item>
  2130. <item>
  2131. <title>sortablejs &#8211; Drag-n-Drop without jQuery UI</title>
  2132. <link>http://keithstric.me/2016/07/21/sortablejs-drag-n-drop-without-jquery-ui/</link>
  2133. <comments>http://keithstric.me/2016/07/21/sortablejs-drag-n-drop-without-jquery-ui/#comments</comments>
  2134. <pubDate>Thu, 21 Jul 2016 19:59:40 +0000</pubDate>
  2135. <dc:creator><![CDATA[Keith Strickland]]></dc:creator>
  2136. <category><![CDATA[JavaScript]]></category>
  2137. <category><![CDATA[Polymer]]></category>
  2138.  
  2139. <guid isPermaLink="false">http://keithstric.me/?p=735</guid>
  2140. <description><![CDATA[I had a need to enable drag-n-drop for a particular part of our portal. In the past I&#8217;ve always used jQuery-UI as it&#8217;s quite easy to enable drag-n-drop. Doing some research I came across a StackOverflow question about enabling drag-n-drop with Polymer. One of the answers mentioned sortablejs. This is a very minimalist library to enable drag-n-drop. Best part about this library is that it has a port for Polymer. BONUS! But there are several ports available: Angular, Knockout, Meteor, etc. So implementation is super easy: bower install --save polymer-sortablejs Then where you want to use it: &#60;sortable-js draggable="div" group="divs"&#62; &#60;template is="dom-repeat" items="{{repeatableItems}}"&#62; &#60;div&#62;{{item}}&#60;/div&#62; &#60;/template&#62; &#60;/sortable-js&#62; This will enable all the]]></description>
  2141. <content:encoded><![CDATA[<p>I had a need to enable drag-n-drop for a particular part of our portal. In the past I&#8217;ve always used jQuery-UI as it&#8217;s quite easy to enable drag-n-drop. Doing some research I came across a StackOverflow question about enabling drag-n-drop with Polymer. One of the answers mentioned <a href="https://github.com/RubaXa/Sortable" target="_blank">sortablejs</a>. This is a very minimalist library to enable drag-n-drop. Best part about this library is that it has a <a href="https://github.com/SortableJS/polymer-sortablejs" target="_blank">port for Polymer</a>. BONUS! But there are several ports available: Angular, Knockout, Meteor, etc.</p>
  2142. <p>So implementation is super easy:</p>
  2143. <pre class="EnlighterJSRAW" data-enlighter-language="shell">bower install --save polymer-sortablejs</pre>
  2144. <p>Then where you want to use it:</p>
  2145. <pre class="EnlighterJSRAW" data-enlighter-language="html">&lt;sortable-js draggable="div" group="divs"&gt;
  2146.    &lt;template is="dom-repeat" items="{{repeatableItems}}"&gt;
  2147.        &lt;div&gt;{{item}}&lt;/div&gt;
  2148.    &lt;/template&gt;
  2149. &lt;/sortable-js&gt;</pre>
  2150. <p>This will enable all the divs in the repeat to be draggable within the same list, or any other list which has the same group name. Very cool. The options are the same as if you were using just the plain old javascript library. You also get all the same events fired.</p>
  2151. <p>So if you&#8217;re looking to enable drag-n-drop in your project, take a look at <a href="https://github.com/RubaXa/Sortable" target="_blank">sortablejs</a>.</p>
  2152.  
  2153. <style>
  2154. .huge-it-share-buttons {
  2155. border:0px solid #0FB5D6;
  2156. border-radius:5px;
  2157. background:#3BD8FF;
  2158. text-align:right; }
  2159.  
  2160. #huge-it-share-buttons-top {margin-bottom:0px;}
  2161. #huge-it-share-buttons-bottom {margin-top:0px;}
  2162.  
  2163. .huge-it-share-buttons h3 {
  2164. font-size:25px ;
  2165. font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
  2166. color:#666666;
  2167.  
  2168. display:block; line-height:25px ;
  2169.  
  2170. text-align:right; }
  2171.  
  2172. .huge-it-share-buttons ul {
  2173. float:right; }
  2174.  
  2175. .huge-it-share-buttons ul li {
  2176. margin-left:3px;
  2177. margin-right:3px;
  2178. padding:0px;
  2179. border:0px ridge #E6354C;
  2180. border-radius:11px;
  2181. background-color:#14CC9B;
  2182. }
  2183.  
  2184. .huge-it-share-buttons ul li #backforunical735 {
  2185. border-bottom: 0;
  2186. background-image:url('http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/buttons.30.png');
  2187. width:30px;
  2188. height:30px;
  2189. }
  2190.  
  2191. .front-shares-count {
  2192. position: absolute;
  2193. text-align: center;
  2194. display: block;
  2195. }
  2196.  
  2197. .shares_size20 .front-shares-count {
  2198. font-size: 10px;
  2199. top: 10px;
  2200. width: 20px;
  2201. }
  2202.  
  2203. .shares_size30 .front-shares-count {
  2204. font-size: 11px;
  2205. top: 15px;
  2206. width: 30px;
  2207. }
  2208.  
  2209. .shares_size40 .front-shares-count {
  2210. font-size: 12px;
  2211. top: 21px;
  2212. width: 40px;
  2213. }
  2214. </style>
  2215. <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
  2216. <h3>Share This:</h3>
  2217. <ul class="huge-it-share-buttons-list ">
  2218. <li class="nobackground " >
  2219.  
  2220. <a id="backforunical735" href="https://www.facebook.com/sharer/sharer.php?u=keithstric.me/feed/"  onclick="javascript:void window.open('https://www.facebook.com/sharer/sharer.php?u=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -0px -120px "></a>
  2221. </li>
  2222. <li class="nobackground " >
  2223.  
  2224. <a id="backforunical735" href="https://twitter.com/share?status=keithstric.me/feed/&text=sortablejs &#8211; Drag-n-Drop without jQuery UI"  onclick="javascript:void window.open('https://twitter.com/share?status=keithstric.me/feed/&text=sortablejs &#8211; Drag-n-Drop without jQuery UI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -30px -120px "></a>
  2225. </li>
  2226. <li class="none nobackground " >
  2227.  
  2228. <a id="backforunical735" href="http://www.pinterest.com/pin/create/button/?url=keithstric.me/feed/&media=http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/noimage.png&description=sortablejs &#8211; Drag-n-Drop without jQuery UI"  onclick="javascript:void window.open('http://www.pinterest.com/pin/create/button/?url=keithstric.me/feed/&media=http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/noimage.png&description=sortablejs &#8211; Drag-n-Drop without jQuery UI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -60px -120px "></a>
  2229. </li>
  2230. <li class="nobackground " >
  2231.  
  2232. <a id="backforunical735" href="https://plus.google.com/share?url=keithstric.me/feed/"  onclick="javascript:void window.open('https://plus.google.com/share?url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -90px -120px "></a>
  2233. </li>
  2234. <li class="nobackground " >
  2235.  
  2236. <a id="backforunical735" href="https://www.linkedin.com/shareArticle?title=sortablejs &#8211; Drag-n-Drop without jQuery UI&mini=true&url=keithstric.me/feed/"  onclick="javascript:void window.open('https://www.linkedin.com/shareArticle?title=sortablejs &#8211; Drag-n-Drop without jQuery UI&mini=true&url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -120px -120px "></a>
  2237. </li>
  2238. <li class="nobackground " >
  2239.  
  2240. <a id="backforunical735" href="https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=sortablejs &#8211; Drag-n-Drop without jQuery UI"  onclick="javascript:void window.open('https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=sortablejs &#8211; Drag-n-Drop without jQuery UI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -150px -120px "></a>
  2241. </li>
  2242. <li class="nobackground " >
  2243.  
  2244. <a id="backforunical735" href="http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=sortablejs &#8211; Drag-n-Drop without jQuery UI"  onclick="javascript:void window.open('http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=sortablejs &#8211; Drag-n-Drop without jQuery UI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -180px -120px "></a>
  2245. </li>
  2246. <li class="nobackground " >
  2247.  
  2248. <a id="backforunical735" href="http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=sortablejs &#8211; Drag-n-Drop without jQuery UI"  onclick="javascript:void window.open('http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=sortablejs &#8211; Drag-n-Drop without jQuery UI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -210px -120px "></a>
  2249. </li>
  2250. <li class="none nobackground " >
  2251.  
  2252. <a id="backforunical735" href="https://myspace.com/post?l=3&u=keithstric.me/feed/"  onclick="javascript:void window.open('https://myspace.com/post?l=3&u=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -240px -120px "></a>
  2253. </li>
  2254. <li class="none nobackground " >
  2255.  
  2256. <a id="backforunical735" href="http://vk.com/share.php?url=keithstric.me/feed/&title=sortablejs &#8211; Drag-n-Drop without jQuery UI"  onclick="javascript:void window.open('http://vk.com/share.php?url=keithstric.me/feed/&title=sortablejs &#8211; Drag-n-Drop without jQuery UI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -270px -120px "></a>
  2257. </li>
  2258. <li class="none nobackground " >
  2259.  
  2260. <a id="backforunical735" href="http://www.reddit.com/submit?url=keithstric.me/feed/&title=sortablejs &#8211; Drag-n-Drop without jQuery UI"  onclick="javascript:void window.open('http://www.reddit.com/submit?url=keithstric.me/feed/&title=sortablejs &#8211; Drag-n-Drop without jQuery UI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -300px -120px "></a>
  2261. </li>
  2262. <li class="none nobackground " >
  2263.  
  2264. <a id="backforunical735" href="http://www.bebo.com/c/share?Url=keithstric.me/feed/"  onclick="javascript:void window.open('http://www.bebo.com/c/share?Url=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -330px -120px "></a>
  2265. </li>
  2266. <li class="none nobackground " >
  2267.  
  2268. <a id="backforunical735" href="https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=sortablejs &#8211; Drag-n-Drop without jQuery UI"  onclick="javascript:void window.open('https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=sortablejs &#8211; Drag-n-Drop without jQuery UI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -360px -120px "></a>
  2269. </li>
  2270. <li class="none nobackground " >
  2271.  
  2272. <a id="backforunical735" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=2&st.noresize=on&st._surl=keithstric.me/feed/"  onclick="javascript:void window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=2&st.noresize=on&st._surl=keithstric.me/feed/','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -390px -120px "></a>
  2273. </li>
  2274. <li class="none nobackground " >
  2275.  
  2276. <a id="backforunical735" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=sortablejs &#8211; Drag-n-Drop without jQuery UI"  onclick="javascript:void window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=sortablejs &#8211; Drag-n-Drop without jQuery UI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -420px -120px "></a>
  2277. </li>
  2278. <li class="none nobackground " >
  2279.  
  2280. <a id="backforunical735" href="http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=sortablejs &#8211; Drag-n-Drop without jQuery UI&pic=&ralateUid=&"  onclick="javascript:void window.open('http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=sortablejs &#8211; Drag-n-Drop without jQuery UI&pic=&ralateUid=&','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -450px -120px "></a>
  2281. </li>
  2282. <li class="none nobackground " >
  2283.  
  2284. <a id="backforunical735" href="http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=sortablejs &#8211; Drag-n-Drop without jQuery UI"  onclick="javascript:void window.open('http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=sortablejs &#8211; Drag-n-Drop without jQuery UI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -480px -120px "></a>
  2285. </li>
  2286. <li class="none nobackground " >
  2287.  
  2288. <a id="backforunical735" href="http://n4g.com/tips?url=keithstric.me/feed/&title=sortablejs &#8211; Drag-n-Drop without jQuery UI"  onclick="javascript:void window.open('http://n4g.com/tips?url=keithstric.me/feed/&title=sortablejs &#8211; Drag-n-Drop without jQuery UI','1410949501326','width=700,height=500,toolbar=0,menubar=0,location=0,status=1,scrollbars=1,resizable=1,left=0,top=0');return false;" style="background-position: -510px -120px "></a>
  2289. </li>
  2290. </ul>
  2291. <div class="clear"></div>
  2292. </div>
  2293. ]]></content:encoded>
  2294. <wfw:commentRss>http://keithstric.me/2016/07/21/sortablejs-drag-n-drop-without-jquery-ui/feed/</wfw:commentRss>
  2295. <slash:comments>2</slash:comments>
  2296. </item>
  2297. </channel>
  2298. </rss>
  2299.  

If you would like to create a banner that links to this page (i.e. this validation result), do the following:

  1. Download the "valid RSS" banner.

  2. Upload the image to your own server. (This step is important. Please do not link directly to the image on this server.)

  3. Add this HTML to your page (change the image src attribute if necessary):

If you would like to create a text link instead, here is the URL you can use:

http://www.feedvalidator.org/check.cgi?url=http%3A//keithstric.me/feed/rss

Copyright © 2002-9 Sam Ruby, Mark Pilgrim, Joseph Walton, and Phil Ringnalda