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>Mon, 16 Apr 2018 17:05:55 +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.9.5</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>I&#8217;ll be Speaking at Engage</title>
  30. <link>http://keithstric.me/2018/04/09/ill-be-speaking-at-engage/</link>
  31. <comments>http://keithstric.me/2018/04/09/ill-be-speaking-at-engage/#respond</comments>
  32. <pubDate>Mon, 09 Apr 2018 15:44:22 +0000</pubDate>
  33. <dc:creator><![CDATA[Keith Strickland]]></dc:creator>
  34. <category><![CDATA[Red Pill]]></category>
  35. <category><![CDATA[Speaking]]></category>
  36.  
  37. <guid isPermaLink="false">http://keithstric.me/?p=972</guid>
  38. <description><![CDATA[<p>I am honored to announce I will be presenting along with the <a href="https://www.redpillnow.com/blog" target="_blank" rel="noopener">Red Pill Now</a> team at <a href="https://engage.ug" target="_blank" rel="noopener">Engage in Rotterdam</a>. My session will be:</p>
  39. <p>&#160;</p>
  40. <p>Dev06. Reusability is the goal!<br />
  41. Wednesday, May 23 &#124; 11:30 &#8211; 12:30 &#124; E. Sky Room</p>
  42. <p>Starting a new JavaScript project can be complicated. There are many questions that need to be answered before you write<br />
  43. a single line of code.</p> <a href="http://keithstric.me/2018/04/09/ill-be-speaking-at-engage/" class="more-link pull-right" rel="bookmark">Continue Reading</a>]]></description>
  44. <content:encoded><![CDATA[<p>I am honored to announce I will be presenting along with the <a href="https://www.redpillnow.com/blog" target="_blank" rel="noopener">Red Pill Now</a> team at <a href="https://engage.ug" target="_blank" rel="noopener">Engage in Rotterdam</a>. My session will be:</p>
  45. <blockquote><p>&nbsp;</p>
  46. <p>Dev06. Reusability is the goal!<br />
  47. Wednesday, May 23 | 11:30 &#8211; 12:30 | E. Sky Room</p>
  48. <p>Starting a new JavaScript project can be complicated. There are many questions that need to be answered before you write<br />
  49. a single line of code. What framework do you use? How will you compile the app? Should you use TypeScript or not? How<br />
  50. will users authenticate? These are just a few of the time-consuming issues that need to be addressed with each new project<br />
  51. you undertake. In this session, Red Pill Now co-founder, Keith Strickland will explore how Red Pill Now has decreased<br />
  52. project startup time from about a week, to just a few minutes, by creating reusable project elements. You will learn the<br />
  53. tools, processes and elements needed to accomplish this task, leaving you with new ideas on how to shorten your startup<br />
  54. time, and reduce the amount of boilerplate required to implement your own solutions.</p>
  55. <p>&nbsp;</p></blockquote>
  56. <p>I think this will be a great conference as <a href="https://twitter.com/theoheselmans" target="_blank" rel="noopener">Theo</a> always puts on a great event. I also think the news on Domino from HCL and IBM will be very interesting to hear about as I&#8217;m excited about quite a few of the talking points I&#8217;ve heard/read from various outlets.</p>
  57. <p>I am greatly looking forward to the conference and I hope to see you there. Stop by the Red Pill Now booth and say hello. Until then&#8230;. Happy Coding!</p>
  58.  
  59. <style>
  60. .huge-it-share-buttons {
  61. border:0px solid #0FB5D6;
  62. border-radius:5px;
  63. background:#3BD8FF;
  64. text-align:right; }
  65.  
  66. #huge-it-share-buttons-top {margin-bottom:0px;}
  67. #huge-it-share-buttons-bottom {margin-top:0px;}
  68.  
  69. .huge-it-share-buttons h3 {
  70. font-size:25px ;
  71. font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
  72. color:#666666;
  73.  
  74. display:block; line-height:25px ;
  75.  
  76. text-align:right; }
  77.  
  78. .huge-it-share-buttons ul {
  79. float:right; }
  80.  
  81. .huge-it-share-buttons ul li {
  82. margin-left:3px;
  83. margin-right:3px;
  84. padding:0px;
  85. border:0px ridge #E6354C;
  86. border-radius:11px;
  87. background-color:#14CC9B;
  88. }
  89.  
  90. .huge-it-share-buttons ul li #backforunical972 {
  91. border-bottom: 0;
  92. background-image:url('http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/buttons.20.png');
  93. width:20px;
  94. height:20px;
  95. }
  96.  
  97. .front-shares-count {
  98. position: absolute;
  99. text-align: center;
  100. display: block;
  101. }
  102.  
  103. .shares_size20 .front-shares-count {
  104. font-size: 10px;
  105. top: 10px;
  106. width: 20px;
  107. }
  108.  
  109. .shares_size30 .front-shares-count {
  110. font-size: 11px;
  111. top: 15px;
  112. width: 30px;
  113. }
  114.  
  115. .shares_size40 .front-shares-count {
  116. font-size: 12px;
  117. top: 21px;
  118. width: 40px;
  119. }
  120. </style>
  121. <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
  122. <h3>Share This:</h3>
  123. <ul class="huge-it-share-buttons-list ">
  124. <li class="nobackground " >
  125.  
  126. <a id="backforunical972" 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 -80px "></a>
  127. </li>
  128. <li class="nobackground " >
  129.  
  130. <a id="backforunical972" href="https://twitter.com/share?status=keithstric.me/feed/&text=I&#8217;ll be Speaking at Engage"  onclick="javascript:void window.open('https://twitter.com/share?status=keithstric.me/feed/&text=I&#8217;ll be Speaking at Engage','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: -20px -80px "></a>
  131. </li>
  132. <li class="none nobackground " >
  133.  
  134. <a id="backforunical972" 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=I&#8217;ll be Speaking at Engage"  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=I&#8217;ll be Speaking at Engage','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: -40px -80px "></a>
  135. </li>
  136. <li class="nobackground " >
  137.  
  138. <a id="backforunical972" 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: -60px -80px "></a>
  139. </li>
  140. <li class="nobackground " >
  141.  
  142. <a id="backforunical972" href="https://www.linkedin.com/shareArticle?title=I&#8217;ll be Speaking at Engage&mini=true&url=http://keithstric.me/feed/"  onclick="javascript:void window.open('https://www.linkedin.com/shareArticle?title=I&#8217;ll be Speaking at Engage&mini=true&url=http://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: -80px -80px "></a>
  143. </li>
  144. <li class="nobackground " >
  145.  
  146. <a id="backforunical972" href="https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=I&#8217;ll be Speaking at Engage"  onclick="javascript:void window.open('https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=I&#8217;ll be Speaking at Engage','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: -100px -80px "></a>
  147. </li>
  148. <li class="nobackground " >
  149.  
  150. <a id="backforunical972" href="http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=I&#8217;ll be Speaking at Engage"  onclick="javascript:void window.open('http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=I&#8217;ll be Speaking at Engage','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 -80px "></a>
  151. </li>
  152. <li class="nobackground " >
  153.  
  154. <a id="backforunical972" href="http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=I&#8217;ll be Speaking at Engage"  onclick="javascript:void window.open('http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=I&#8217;ll be Speaking at Engage','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: -140px -80px "></a>
  155. </li>
  156. <li class="none nobackground " >
  157.  
  158. <a id="backforunical972" 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: -160px -80px "></a>
  159. </li>
  160. <li class="none nobackground " >
  161.  
  162. <a id="backforunical972" href="http://vk.com/share.php?url=keithstric.me/feed/&title=I&#8217;ll be Speaking at Engage"  onclick="javascript:void window.open('http://vk.com/share.php?url=keithstric.me/feed/&title=I&#8217;ll be Speaking at Engage','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 -80px "></a>
  163. </li>
  164. <li class="none nobackground " >
  165.  
  166. <a id="backforunical972" href="http://www.reddit.com/submit?url=keithstric.me/feed/&title=I&#8217;ll be Speaking at Engage"  onclick="javascript:void window.open('http://www.reddit.com/submit?url=keithstric.me/feed/&title=I&#8217;ll be Speaking at Engage','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: -200px -80px "></a>
  167. </li>
  168. <li class="none nobackground " >
  169.  
  170. <a id="backforunical972" 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: -220px -80px "></a>
  171. </li>
  172. <li class="none nobackground " >
  173.  
  174. <a id="backforunical972" href="https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=I&#8217;ll be Speaking at Engage"  onclick="javascript:void window.open('https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=I&#8217;ll be Speaking at Engage','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 -80px "></a>
  175. </li>
  176. <li class="none nobackground " >
  177.  
  178. <a id="backforunical972" 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: -260px -80px "></a>
  179. </li>
  180. <li class="none nobackground " >
  181.  
  182. <a id="backforunical972" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=I&#8217;ll be Speaking at Engage"  onclick="javascript:void window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=I&#8217;ll be Speaking at Engage','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: -280px -80px "></a>
  183. </li>
  184. <li class="none nobackground " >
  185.  
  186. <a id="backforunical972" href="http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=I&#8217;ll be Speaking at Engage&pic=&ralateUid=&"  onclick="javascript:void window.open('http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=I&#8217;ll be Speaking at Engage&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: -300px -80px "></a>
  187. </li>
  188. <li class="none nobackground " >
  189.  
  190. <a id="backforunical972" href="http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=I&#8217;ll be Speaking at Engage"  onclick="javascript:void window.open('http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=I&#8217;ll be Speaking at Engage','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: -320px -80px "></a>
  191. </li>
  192. <li class="none nobackground " >
  193.  
  194. <a id="backforunical972" href="http://n4g.com/tips?url=keithstric.me/feed/&title=I&#8217;ll be Speaking at Engage"  onclick="javascript:void window.open('http://n4g.com/tips?url=keithstric.me/feed/&title=I&#8217;ll be Speaking at Engage','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: -340px -80px "></a>
  195. </li>
  196. </ul>
  197. <div class="clear"></div>
  198. </div>
  199. ]]></content:encoded>
  200. <wfw:commentRss>http://keithstric.me/2018/04/09/ill-be-speaking-at-engage/feed/</wfw:commentRss>
  201. <slash:comments>0</slash:comments>
  202. </item>
  203. <item>
  204. <title>JavaScript: The Strange and Wonderful</title>
  205. <link>http://keithstric.me/2018/02/06/javascript-the-strange-and-wonderful/</link>
  206. <comments>http://keithstric.me/2018/02/06/javascript-the-strange-and-wonderful/#respond</comments>
  207. <pubDate>Tue, 06 Feb 2018 17:49:17 +0000</pubDate>
  208. <dc:creator><![CDATA[Keith Strickland]]></dc:creator>
  209. <category><![CDATA[JavaScript]]></category>
  210.  
  211. <guid isPermaLink="false">http://keithstric.me/?p=953</guid>
  212. <description><![CDATA[<p>I&#8217;ve been thinking about this post for quite some time. I just haven&#8217;t had the time to write it. But, JavaScript is both a weird and wonderful programming language. It has some features which are totally NOT the norm but make it cool and interesting to work with. While there are many flavors of JavaScript out there in the wild (ES1 -&#62; ES6, TypeScript, CoffeeScript, etc.) the weirdness remains no matter how your JavaScript is written.</p> <a href="http://keithstric.me/2018/02/06/javascript-the-strange-and-wonderful/" class="more-link pull-right" rel="bookmark">Continue Reading</a>]]></description>
  213. <content:encoded><![CDATA[<p>I&#8217;ve been thinking about this post for quite some time. I just haven&#8217;t had the time to write it. But, JavaScript is both a weird and wonderful programming language. It has some features which are totally NOT the norm but make it cool and interesting to work with. While there are many flavors of JavaScript out there in the wild (ES1 -&gt; ES6, TypeScript, CoffeeScript, etc.) the weirdness remains no matter how your JavaScript is written.</p>
  214. <p>So, what prey-tell am I speaking about? Well, let&#8217;s take a look at some the weird wonderfulness:<br />
  215. <span style="color: #666699;"><span style="color: #000000;"><strong>TIP</strong></span>: You can copy/paste the below examples into the developer tools console</span></p>
  216. <h3>Loose Equality</h3>
  217. <p>Can this statement ever evaluate to true?<br />
  218. <code class="EnlighterJSRAW" data-enlighter-language="js">(a == 2 &amp;&amp; a == 3 &amp;&amp; a == 4)</code></p>
  219. <p>Well, yes&#8230; yes it can. Let&#8217;s take a look: (taken from <a href="https://codeburst.io/javascript-can-a-1-a-2-a-3-ever-evaluate-to-true-aca13ff4462d" target="_blank" rel="noopener">this article</a>)</p>
  220. <pre class="EnlighterJSRAW" data-enlighter-language="js">const a = {
  221.  num: 0,
  222.  valueOf: function() {
  223.    return this.num += 1;
  224.  }
  225. };
  226. const equality = (a==1 &amp;&amp; a==2 &amp;&amp; a==3);
  227. console.log(equality); // true</pre>
  228. <p>We just replace the built in <code>valueOf</code> function available on any object. Which is one of the wonderful and weird features of JavaScript.</p>
  229. <p>What about this one? Again, yes and it&#8217;s because of the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness" target="_blank" rel="noopener">loose equality</a> of JavaScript objects.</p>
  230. <pre class="EnlighterJSRAW" data-enlighter-language="js">let a = 2;
  231. let b = "2";
  232. console.log((a == b)); // true</pre>
  233. <p>We can go on and on with examples of loose equality.</p>
  234. <h3>Function Declarations, Manipulations and Miscellany</h3>
  235. <p>A JavaScript function can be declared many ways. You can create an anonymous function, a declared function or use the Function constructor.  Here&#8217;s an example of each:</p>
  236. <pre class="EnlighterJSRAW" data-enlighter-language="js">// Declared function
  237. function foo(a, b) {
  238.  return a * b;
  239. }
  240.  
  241. // Anonymous function
  242. let foo = function(a, b) {
  243.  return a * b;
  244. }
  245.  
  246. // Function constructor
  247. let foo = new Function('a', 'b', 'return a * b;')</pre>
  248. <p>That&#8217;s cool, but you can also pass that function around just like a variable:</p>
  249. <pre class="EnlighterJSRAW" data-enlighter-language="js">// Pass a declared function around like a variable
  250. function foo(a, b) {
  251.  return a*b;
  252. }
  253. let myFunc = foo;
  254. console.log(myFunc(2, 3));</pre>
  255. <p>So, what if you want to &#8220;override&#8221; a method on an object, is that possible? Again, the answer is yes. Let&#8217;s take a look at overriding the <code>XMLHttpRequest.open</code> function:</p>
  256. <pre class="EnlighterJSRAW" data-enlighter-language="js">let _origOpen = XMLHttpRequest.prototype.open;
  257. XMLHttpRequest.prototype.open = function() {
  258.  // Do Stuff....
  259. }
  260. _origOpen.apply(this, arguments);</pre>
  261. <p>Something else I don&#8217;t think is available in other programming languages is the presence of an <code>arguments</code> object inside a function. <code>arguments</code> is not really an array, but an &#8220;array like&#8221; object. It contains a length property and indices.</p>
  262. <pre class="EnlighterJSRAW" data-enlighter-language="js">function foo(a, b) {
  263.  for (let i = 0; i &lt; arguments.length; i++) {
  264.    console.log(arguments[i]);
  265.  }
  266. }
  267. foo(2, 3);
  268. // 2
  269. // 3</pre>
  270. <p>A self calling function? While I haven&#8217;t seen this in other programming languages it is widely used in JavaScript and can be useful. Just be aware that you won&#8217;t be able to call that function</p>
  271. <pre class="EnlighterJSRAW" data-enlighter-language="null">// This function will run when the script is invoked
  272. (function foo() {
  273.  console.log('in foo');
  274. }()); // in foo
  275.  
  276. // Can't call it tho
  277. foo(); // Uncaught ReferenceError: foo is not defined
  278.  
  279. (function bar() {
  280.  console.log('in bar');
  281. })(); // in bar
  282.  
  283. // Still can't call it
  284. bar(); // Uncaught ReferenceError: bar is not defined
  285.  
  286. let baz = function() {
  287.  console.log('in baz');
  288. }(); // in baz
  289.  
  290. // Can't call this one either
  291. baz(); // Uncaught TypeError: baz is not a function</pre>
  292. <h3>Truthy/Falsey</h3>
  293. <p>What&#8217;s this nonsense? It&#8217;s a comparison &#8220;idea&#8221; really. Here&#8217;s an example, but first you need to know what equates to falsey:</p>
  294. <ul>
  295. <li>null</li>
  296. <li>undefined</li>
  297. <li>&#8220;&#8221; // Empty String</li>
  298. <li>0</li>
  299. <li>false</li>
  300. </ul>
  301. <p>With the above information let&#8217;s take a look:</p>
  302. <pre class="EnlighterJSRAW" data-enlighter-language="js">let emptyStr = "";
  303. let num = 0;
  304. let someObj = {
  305.  a: null
  306. };
  307. if (emptyStr) {
  308.  console.log("emptyStr is Truthy", emptyStr);
  309. }else {
  310.  console.log("emptyStr is Falsey", emptyStr);
  311. }
  312. if (num) {
  313.  console.log("num is Truthy", num);
  314. }else {
  315.  console.log("num is Falsey", num);
  316. }
  317. if (someObj) {
  318.  console.log("someObj is Truthy", someObj);
  319.  if (someObj.a) {
  320.    console.log("someObj.a is Truthy", someObj.a);
  321.  }else {
  322.    console.log("someObj.a is Falsey", someObj.a);
  323.  }
  324.  
  325.  if (someObj.unknownProp) {
  326.    console.log("someObj.unknownProp is Truthy", someObj.unknownProp);
  327.  }else {
  328.    console.log("someObj.unknownProp is Falsey", someObj.unknownProp);
  329.  }
  330. }else {
  331.  console.log("someObj is Falsey");
  332. }
  333.  
  334. // OUTPUT
  335. // emptyStr is Falsey
  336. // num is Falsey 0
  337. // someObj is Truthy {a: null}
  338. // someObj.a is Falsey null
  339. // someObj.unknownProp is Falsey undefined</pre>
  340. <p>This functionality allows you to assign default values like:</p>
  341. <pre class="EnlighterJSRAW" data-enlighter-language="js">function foo(a, b) {
  342.  a = a || 10;
  343.  b = b || 10;
  344.  return a * b;
  345. }
  346. console.log(foo()); // 100
  347. // Careful with using numbers where the actual value may be 0. Line 2 and 3 would change 0 to 10.
  348. console.log(foo(0,5)); // 50
  349. // Here's some weirdness,this returns 0 is because we passed string 0 which evaluated to true but was then converted to a number in the return statement
  350. console.log(foo('0',5)); // 0
  351.  
  352. function bar(options) {
  353.  options = options || {};
  354.  return options;
  355. }
  356. console.log(bar({foo: 'bar'})); // {foo: 'bar'}
  357. console.log(bar()); // {}</pre>
  358. <p>So what about even more weirdness with Truthy/Falsey? (Actually a lot of the below examples are the way they are because of loose equality checking).</p>
  359. <p><span style="color: #666699;"><span style="color: #000000;"><strong>TIP</strong></span>: Always use <code>===</code> to avoid hard to find bugs. <code>===</code> checks type AND value. <code>==</code> attempts to convert the 2 values to the same type</span></p>
  360. <pre class="EnlighterJSRAW" data-enlighter-language="js">'' == false; // true
  361. null == false; // false
  362. undefined == false; // false
  363. 0 == false; // true
  364. 0 == '0'; // true
  365. null == undefined; // true
  366.  
  367. // use === instead
  368. '' === false: // false
  369. 0 === false; // false
  370. 0 === '0'; // false
  371. null === undefined; // false</pre>
  372. <h3>Declaring Variables</h3>
  373. <p>There are many ways to declare a variable. You can use <code>var</code>, <code>let</code> or <code>const</code>. Let&#8217;s take a look at each:</p>
  374. <h4>var</h4>
  375. <p>When declaring a variable using <code>var</code> that variable is always hoisted to the top of the current scope. This means you can use a variable before it is defined (please oh please don&#8217;t do this tho). It also means that variable is available to any other blocks of code within the scope.</p>
  376. <pre class="EnlighterJSRAW" data-enlighter-language="js">// Using var, the variable declaration is always hoisted to the top of the current scope
  377. function foo() {
  378.  console.log(bar);
  379.  var bar = 'baz';
  380.  console.log(bar);
  381. }
  382. foo();
  383. // OUTPUT
  384. // undefined
  385. // baz
  386.  
  387. // The JavaScript engine converts this to the following at run time
  388. function foo() {
  389.  var bar;
  390.  console.log(bar);
  391.  bar = 'baz';
  392.  console.log(bar);
  393. }
  394. // OUTPUT
  395. // undefined
  396. // baz</pre>
  397. <h4>let</h4>
  398. <p>When declaring a variable using <code>let</code> that variable is only available to the block it is declared in. You can not use a variable defined with <code>let</code> before it is defined.</p>
  399. <pre class="EnlighterJSRAW" data-enlighter-language="js">let a = 1;
  400. if (a === 1) {
  401.  let a = 2;
  402.  console.log('a inside if=', a); // a inside if= 2
  403. }
  404. console.log('a outside if=', a); // a outside if= 1</pre>
  405. <h4>const</h4>
  406. <p>When you declare a variable with <code>const</code> that variable is not allowed to be changed. I&#8217;ve started using <code>const</code> in my code more and more but mainly as a visual indicator that the value never changes. However, as with most things JavaScript there are things you can change about a variable defined with <code>const</code>:</p>
  407. <pre class="EnlighterJSRAW" data-enlighter-language="js">const a = 2;
  408. const b = {
  409.    num: 2
  410. };
  411. b.num = 3;
  412. try {
  413.  a = 3;
  414. }catch (e) {
  415.  console.log(e.name, ':', e.message);
  416. }
  417. console.log('a=', a, 'b=', b);
  418. // OUTPUT
  419. // TypeError: Assignment to constant variable
  420. // a= 2 b= {num: 3}</pre>
  421. <h3>Conclusion</h3>
  422. <p>This is by no means a complete list. There are a lot of strange and unique things going on with JavaScript. If you want a lot of weirdness, investigate the rules and implementations of <code>this</code>. So while JavaScript can have a lot of weirdness I think because of it&#8217;s weirdness it&#8217;s become one of the most popular programming languages on the web. It&#8217;s everywhere nowadays and is only growing.</p>
  423. <p>Until next time&#8230;. Happy Coding.</p>
  424.  
  425. <style>
  426. .huge-it-share-buttons {
  427. border:0px solid #0FB5D6;
  428. border-radius:5px;
  429. background:#3BD8FF;
  430. text-align:right; }
  431.  
  432. #huge-it-share-buttons-top {margin-bottom:0px;}
  433. #huge-it-share-buttons-bottom {margin-top:0px;}
  434.  
  435. .huge-it-share-buttons h3 {
  436. font-size:25px ;
  437. font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
  438. color:#666666;
  439.  
  440. display:block; line-height:25px ;
  441.  
  442. text-align:right; }
  443.  
  444. .huge-it-share-buttons ul {
  445. float:right; }
  446.  
  447. .huge-it-share-buttons ul li {
  448. margin-left:3px;
  449. margin-right:3px;
  450. padding:0px;
  451. border:0px ridge #E6354C;
  452. border-radius:11px;
  453. background-color:#14CC9B;
  454. }
  455.  
  456. .huge-it-share-buttons ul li #backforunical953 {
  457. border-bottom: 0;
  458. background-image:url('http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/buttons.20.png');
  459. width:20px;
  460. height:20px;
  461. }
  462.  
  463. .front-shares-count {
  464. position: absolute;
  465. text-align: center;
  466. display: block;
  467. }
  468.  
  469. .shares_size20 .front-shares-count {
  470. font-size: 10px;
  471. top: 10px;
  472. width: 20px;
  473. }
  474.  
  475. .shares_size30 .front-shares-count {
  476. font-size: 11px;
  477. top: 15px;
  478. width: 30px;
  479. }
  480.  
  481. .shares_size40 .front-shares-count {
  482. font-size: 12px;
  483. top: 21px;
  484. width: 40px;
  485. }
  486. </style>
  487. <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
  488. <h3>Share This:</h3>
  489. <ul class="huge-it-share-buttons-list ">
  490. <li class="nobackground " >
  491.  
  492. <a id="backforunical953" 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 -80px "></a>
  493. </li>
  494. <li class="nobackground " >
  495.  
  496. <a id="backforunical953" href="https://twitter.com/share?status=keithstric.me/feed/&text=JavaScript: The Strange and Wonderful"  onclick="javascript:void window.open('https://twitter.com/share?status=keithstric.me/feed/&text=JavaScript: The Strange and Wonderful','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: -20px -80px "></a>
  497. </li>
  498. <li class="none nobackground " >
  499.  
  500. <a id="backforunical953" 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=JavaScript: The Strange and Wonderful"  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=JavaScript: The Strange and Wonderful','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: -40px -80px "></a>
  501. </li>
  502. <li class="nobackground " >
  503.  
  504. <a id="backforunical953" 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: -60px -80px "></a>
  505. </li>
  506. <li class="nobackground " >
  507.  
  508. <a id="backforunical953" href="https://www.linkedin.com/shareArticle?title=JavaScript: The Strange and Wonderful&mini=true&url=http://keithstric.me/feed/"  onclick="javascript:void window.open('https://www.linkedin.com/shareArticle?title=JavaScript: The Strange and Wonderful&mini=true&url=http://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: -80px -80px "></a>
  509. </li>
  510. <li class="nobackground " >
  511.  
  512. <a id="backforunical953" href="https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=JavaScript: The Strange and Wonderful"  onclick="javascript:void window.open('https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=JavaScript: The Strange and Wonderful','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: -100px -80px "></a>
  513. </li>
  514. <li class="nobackground " >
  515.  
  516. <a id="backforunical953" href="http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=JavaScript: The Strange and Wonderful"  onclick="javascript:void window.open('http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=JavaScript: The Strange and Wonderful','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 -80px "></a>
  517. </li>
  518. <li class="nobackground " >
  519.  
  520. <a id="backforunical953" href="http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=JavaScript: The Strange and Wonderful"  onclick="javascript:void window.open('http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=JavaScript: The Strange and Wonderful','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: -140px -80px "></a>
  521. </li>
  522. <li class="none nobackground " >
  523.  
  524. <a id="backforunical953" 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: -160px -80px "></a>
  525. </li>
  526. <li class="none nobackground " >
  527.  
  528. <a id="backforunical953" href="http://vk.com/share.php?url=keithstric.me/feed/&title=JavaScript: The Strange and Wonderful"  onclick="javascript:void window.open('http://vk.com/share.php?url=keithstric.me/feed/&title=JavaScript: The Strange and Wonderful','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 -80px "></a>
  529. </li>
  530. <li class="none nobackground " >
  531.  
  532. <a id="backforunical953" href="http://www.reddit.com/submit?url=keithstric.me/feed/&title=JavaScript: The Strange and Wonderful"  onclick="javascript:void window.open('http://www.reddit.com/submit?url=keithstric.me/feed/&title=JavaScript: The Strange and Wonderful','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: -200px -80px "></a>
  533. </li>
  534. <li class="none nobackground " >
  535.  
  536. <a id="backforunical953" 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: -220px -80px "></a>
  537. </li>
  538. <li class="none nobackground " >
  539.  
  540. <a id="backforunical953" href="https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=JavaScript: The Strange and Wonderful"  onclick="javascript:void window.open('https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=JavaScript: The Strange and Wonderful','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 -80px "></a>
  541. </li>
  542. <li class="none nobackground " >
  543.  
  544. <a id="backforunical953" 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: -260px -80px "></a>
  545. </li>
  546. <li class="none nobackground " >
  547.  
  548. <a id="backforunical953" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=JavaScript: The Strange and Wonderful"  onclick="javascript:void window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=JavaScript: The Strange and Wonderful','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: -280px -80px "></a>
  549. </li>
  550. <li class="none nobackground " >
  551.  
  552. <a id="backforunical953" href="http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=JavaScript: The Strange and Wonderful&pic=&ralateUid=&"  onclick="javascript:void window.open('http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=JavaScript: The Strange and Wonderful&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: -300px -80px "></a>
  553. </li>
  554. <li class="none nobackground " >
  555.  
  556. <a id="backforunical953" href="http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=JavaScript: The Strange and Wonderful"  onclick="javascript:void window.open('http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=JavaScript: The Strange and Wonderful','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: -320px -80px "></a>
  557. </li>
  558. <li class="none nobackground " >
  559.  
  560. <a id="backforunical953" href="http://n4g.com/tips?url=keithstric.me/feed/&title=JavaScript: The Strange and Wonderful"  onclick="javascript:void window.open('http://n4g.com/tips?url=keithstric.me/feed/&title=JavaScript: The Strange and Wonderful','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: -340px -80px "></a>
  561. </li>
  562. </ul>
  563. <div class="clear"></div>
  564. </div>
  565. ]]></content:encoded>
  566. <wfw:commentRss>http://keithstric.me/2018/02/06/javascript-the-strange-and-wonderful/feed/</wfw:commentRss>
  567. <slash:comments>0</slash:comments>
  568. </item>
  569. <item>
  570. <title>now-confirm-dialog an OpenSource element</title>
  571. <link>http://keithstric.me/2018/02/01/now-confirm-dialog-an-opensource-element/</link>
  572. <comments>http://keithstric.me/2018/02/01/now-confirm-dialog-an-opensource-element/#respond</comments>
  573. <pubDate>Thu, 01 Feb 2018 17:27:35 +0000</pubDate>
  574. <dc:creator><![CDATA[Keith Strickland]]></dc:creator>
  575. <category><![CDATA[OpenSource]]></category>
  576. <category><![CDATA[Polymer]]></category>
  577. <category><![CDATA[Red Pill]]></category>
  578.  
  579. <guid isPermaLink="false">http://keithstric.me/?p=943</guid>
  580. <description><![CDATA[<p>We needed a means to produce a &#8220;<em>pretty</em>&#8221; confirm dialog instead of the old and busted default JavaScript confirm dialog. While the JavaScript confirm dialog is functional and probably provides more functionality than this one, we&#8217;ve found this meets our needs quite nicely. For reference, here is a default JavaScript confirm dialog. This shows up centered right under the address bar:</p>
  581. <p><img class="size-medium wp-image-946 aligncenter" src="http://keithstric.me/wp-content/uploads/2018/02/Screen-Shot-2018-02-01-at-12.06.13-PM-300x85.png" alt="" width="300" height="85" srcset="http://keithstric.me/wp-content/uploads/2018/02/Screen-Shot-2018-02-01-at-12.06.13-PM-300x85.png 300w, http://keithstric.me/wp-content/uploads/2018/02/Screen-Shot-2018-02-01-at-12.06.13-PM-768x217.png 768w, http://keithstric.me/wp-content/uploads/2018/02/Screen-Shot-2018-02-01-at-12.06.13-PM.png 1000w" sizes="(max-width: 300px) 100vw, 300px" /></p>
  582. <p>Here is our our now-confirm-dialog which shows up in the center of the screen:</p>
  583. <p><img class="size-medium wp-image-947 aligncenter" src="http://keithstric.me/wp-content/uploads/2018/02/Screen-Shot-2018-02-01-at-12.15.21-PM-300x174.png" alt="" width="300" height="174" srcset="http://keithstric.me/wp-content/uploads/2018/02/Screen-Shot-2018-02-01-at-12.15.21-PM-300x174.png 300w, http://keithstric.me/wp-content/uploads/2018/02/Screen-Shot-2018-02-01-at-12.15.21-PM.png 554w" sizes="(max-width: 300px) 100vw, 300px" /></p>
  584. <p>The goal of this element is to provide a simple confirmation dialog and then have the ability to do something based on which button the user clicked.</p> <a href="http://keithstric.me/2018/02/01/now-confirm-dialog-an-opensource-element/" class="more-link pull-right" rel="bookmark">Continue Reading</a>]]></description>
  585. <content:encoded><![CDATA[<p>We needed a means to produce a &#8220;<em>pretty</em>&#8221; confirm dialog instead of the old and busted default JavaScript confirm dialog. While the JavaScript confirm dialog is functional and probably provides more functionality than this one, we&#8217;ve found this meets our needs quite nicely. For reference, here is a default JavaScript confirm dialog. This shows up centered right under the address bar:</p>
  586. <p><img class="size-medium wp-image-946 aligncenter" src="http://keithstric.me/wp-content/uploads/2018/02/Screen-Shot-2018-02-01-at-12.06.13-PM-300x85.png" alt="" width="300" height="85" srcset="http://keithstric.me/wp-content/uploads/2018/02/Screen-Shot-2018-02-01-at-12.06.13-PM-300x85.png 300w, http://keithstric.me/wp-content/uploads/2018/02/Screen-Shot-2018-02-01-at-12.06.13-PM-768x217.png 768w, http://keithstric.me/wp-content/uploads/2018/02/Screen-Shot-2018-02-01-at-12.06.13-PM.png 1000w" sizes="(max-width: 300px) 100vw, 300px" /></p>
  587. <p>Here is our our now-confirm-dialog which shows up in the center of the screen:</p>
  588. <p><img class="size-medium wp-image-947 aligncenter" src="http://keithstric.me/wp-content/uploads/2018/02/Screen-Shot-2018-02-01-at-12.15.21-PM-300x174.png" alt="" width="300" height="174" srcset="http://keithstric.me/wp-content/uploads/2018/02/Screen-Shot-2018-02-01-at-12.15.21-PM-300x174.png 300w, http://keithstric.me/wp-content/uploads/2018/02/Screen-Shot-2018-02-01-at-12.15.21-PM.png 554w" sizes="(max-width: 300px) 100vw, 300px" /></p>
  589. <p>The goal of this element is to provide a simple confirmation dialog and then have the ability to do something based on which button the user clicked. It also needs to use Polymer 2.x.x in order to be used within the <code>redpill-zion</code> project. Pretty simple eh. So, lets dive right in.</p>
  590. <p>First off we&#8217;ve got the HTML. We use the <code>paper-dialog</code> to drive this which has ok support. The biggest issue with paper-dialog is that it has problems determining it&#8217;s stacking order for a modal dialog. If you use the <code>app-layout</code> elements sometimes the dialog will appear underneath it&#8217;s mask. To me, this is kind-of unacceptable that you need to hack this to get it to work. But the solution is a problem that XPage developers should be familiar with. You need to move the dialog outside of the app-layout elements, usually as a child of the body tag (dojo used to do this with it&#8217;s dialogs). Also, it still depends on <code>neon-animations</code> which were deprecated in Polymer 2.x.x. This problem doesn&#8217;t affect the functionality of the dialog but does produce errors in the console.</p>
  591. <pre class="EnlighterJSRAW" data-enlighter-highlight="34-45,61,64,69,77" data-enlighter-language="html">&lt;link rel="import" href="../polymer/polymer-element.html"&gt;
  592.  
  593. &lt;link rel="import" href="../paper-button/paper-button.html"&gt;
  594. &lt;link rel="import" href="../paper-dialog/paper-dialog.html"&gt;
  595. &lt;!--
  596.  neon-animations have been deprecated. However they are still present as a dependency of
  597.  paper-dialog. If you define animation properties (i.e. entry-animation, exit-animation)
  598.  then an error is thrown when an animation is attempted to be played. There doesn't currently
  599.  seem to be a workaround (1/15/2018).
  600. &lt;link rel="import" href="../neon-animation/animations/scale-up-animation.html"&gt;
  601. &lt;link rel="import" href="../neon-animation/animations/fade-out-animation.html"&gt;
  602. --&gt;
  603.  
  604. &lt;!--
  605. `now-confirm-dialog`
  606.  
  607. Confirmation dialog for use in Red Pill Now applications
  608.  
  609. @author Keith Strickland
  610. @demo demo/index.html
  611. --&gt;
  612. &lt;dom-module id="now-confirm-dialog"&gt;
  613.  &lt;template&gt;
  614.    &lt;style&gt;
  615.      :host {
  616.        display: block;
  617.        box-sizing: border-box;
  618.        max-width: 450px;
  619.  
  620.        --paper-dialog: {
  621.          max-width: 450px;
  622.        };
  623.  
  624.        @apply --now-confirm-dialog;
  625.      }
  626.      h2 {
  627.        @apply --now-confirm-dialog-header;
  628.      }
  629.      .cancelButton {
  630.        background: var(--now-confirm-dialog-cancel-button-background, #c12e2a);
  631.        color: var(--now-confirm-dialog-cancel-button-color, white);
  632.      }
  633.      .confirmButton {
  634.        background: var(--now-confirm-dialog-confirm-button-background, #419641);
  635.        color: var(--now-confirm-dialog-confirm-button-color, white);
  636.      }
  637.      .dialogText {
  638.        padding: 15px;
  639.        margin-top: 0;
  640.      }
  641.      .dialogText.preText {
  642.        white-space: pre;
  643.      }
  644.    &lt;/style&gt;
  645.  
  646.    &lt;paper-dialog
  647.      id="dialog"
  648.      entry-animation="scale-up-animation"
  649.      exit-animation="fade-out-animation"
  650.      modal&gt;
  651.      &lt;h2&gt;{{dialogTitle}}&lt;/h2&gt;
  652.      &lt;!-- Whitespace is rendered which is why the dialogText is not indented --&gt;
  653.      &lt;div id="dialogText" class="dialogText"&gt;
  654. {{dialogText}}
  655.      &lt;/div&gt;
  656.      &lt;div class="buttons"&gt;
  657.        &lt;paper-button
  658.          class="cancelButton"
  659.          hidden$="{{noCancelButton}}"
  660.          dialog-dismiss&gt;
  661.          {{cancelButtonText}}
  662.        &lt;/paper-button&gt;
  663.        &lt;paper-button
  664.          class="confirmButton"
  665.          dialog-confirm
  666.          autofocus&gt;
  667.          {{confirmButtonText}}
  668.        &lt;/paper-button&gt;
  669.      &lt;/div&gt;
  670.    &lt;/paper-dialog&gt;
  671.  
  672.  &lt;/template&gt;
  673.  &lt;script type="text/javascript" src="now-confirm-dialog.js"&gt;&lt;/script&gt;
  674. &lt;/dom-module&gt;</pre>
  675. <p>Really the there are only a few things of interest here and that&#8217;s the dialogTitle property (line 61), the dialogText property (line 64), the cancelButtonText property (line 69) and the confirmButtonText (line 71). These properties allow us to configure exactly what will be displayed in the dialog. Also, lines 34-45 I&#8217;ve defined some custom style properties so we can style this dialog to meet our branding needs.</p>
  676. <p>Next up is the code for this element. We&#8217;ll start with the properties:</p>
  677. <pre class="EnlighterJSRAW" data-enlighter-language="js">static get properties() {
  678.  return {
  679.    dialogTitle: String,
  680.    dialogText: {
  681.      type: String,
  682.      observer: '_onDialogTextChange'
  683.    },
  684.    confirmButtonText: {
  685.      type: String,
  686.      value: 'OK'
  687.    },
  688.    cancelButtonText: {
  689.      type: String,
  690.      value: 'Cancel'
  691.    },
  692.    confirmButtonBackground: {
  693.      type: String,
  694.      observer: '_onConfirmBackgroundChange'
  695.    },
  696.    confirmButtonColor: {
  697.      type: String,
  698.      observer: '_onConfirmColorChange'
  699.    },
  700.    cancelButtonBackground: {
  701.      type: String,
  702.      observer: '_onCancelBackgroundChange'
  703.    },
  704.    cancelButtonColor: {
  705.      type: String,
  706.      observer: '_onCancelColorChange'
  707.    },
  708.    noCancelButton: {
  709.      type: Boolean,
  710.      value: false,
  711.      reflectToAttribute: true
  712.    },
  713.    _cancelCallback: Function,
  714.    _confirmCallback: Function,
  715.    targetMoveCssSelector: String,
  716.  };
  717. }
  718.  
  719. _closeDialogListener: any;
  720. connectedCallback() {
  721.  super.connectedCallback();
  722.  this._closeDialogListener = this._onDialogClosed.bind(this);
  723.  this.$.dialog.addEventListener('iron-overlay-closed', this._closeDialogListener);
  724. }
  725. disconnectedCallback() {
  726.  this.$.dialog.removeEventListener('iron-overlay-closed', this._closeDialogListener);
  727. }
  728. /**
  729. * Fired when the dialog closes. Fires dig-confirm-canceled and dig-confirm-confirmed. Also
  730. * runs any cancelCallback or confirmCallback methods
  731. * @param  {Event} evt    The event object
  732. * @param  {Object} detail The detail object
  733. * @listens #dialog.iron-overlay-closed
  734. */
  735. private _onDialogClosed(evt: CustomEvent) {
  736.  let detail = evt.detail;
  737.  if (!detail.confirmed) {
  738.    if (this.get('_cancelCallback')) {
  739.      this.get('_cancelCallback').call(this);
  740.    }
  741.    let evt = new CustomEvent('now-confirm-canceled');
  742.    this.dispatchEvent(evt);
  743.  }else if (detail.confirmed) {
  744.    if (this.get('_confirmCallback')) {
  745.      this.get('_confirmCallback').call(this);
  746.    }
  747.    let evt = new CustomEvent('now-confirm-confirmed');
  748.    this.dispatchEvent(evt);
  749.  }
  750. }
  751. /**
  752. * Opens the dialog and sets the cancel and confirm callbacks
  753. * @param  {Function} confirmCallback Function to run when the dialog is confirmed
  754. * @param  {Function} cancelCallback  Function to run when the dialog is cancelled
  755. */
  756. open(confirmCallback, cancelCallback) {
  757.  // WARNING!!! TODO:
  758.  // Moving this as a child of a top level element, outside of the app-*-layout element
  759.  // is to fix this bug https://github.com/PolymerElements/paper-dialog/issues/7
  760.  // which is kind of ridiculus for a production ready platform.
  761.  // Luckily there really is no data binding with this component or that too
  762.  // would be broken.
  763.  if (this.get('targetMoveCssSelector')) {
  764.    let elem = document.querySelector(this.get('targetMoveCssSelector'));
  765.    if (elem) {
  766.      elem.appendChild(this);
  767.    }
  768.  }
  769.  (&lt;any&gt;this.$.dialog).open();
  770.  this.set('_cancelCallback', cancelCallback);
  771.  this.set('_confirmCallback', confirmCallback);
  772. }
  773. /**
  774. * Closes the dialog. Will cause the cancel callback to be run
  775. * in the iron-overlay-closed event handler
  776. */
  777. close() {
  778.  (&lt;any&gt;this.$.dialog).close();
  779.  if (this.get('targetMoveCssSelector')) {
  780.    let movedDialog = document.querySelector(this.get('targetMoveCssSelector') + ' &gt; now-confirm-dialog');
  781.    if (movedDialog) {
  782.      movedDialog.parentNode.removeChild(movedDialog);
  783.    }
  784.  }
  785. }</pre>
  786. <p>The code above isn&#8217;t complete, but does contain all the relevant parts of this dialog. But notice we have pretty much all of the properties identified above including the custom styles for button background and text colors. The things of interest here are the <code>_cancelCallback</code> and <code>_confirmCallback</code> properties. One of the cool features of JavaScript is the ability to pass around a function as a variable. So here we&#8217;re taking advantage of that and these properties will hold the callback functions that will be ran when the confirm or cancel button is clicked.</p>
  787. <p>Other things of interest here is the connectedCallback where we setup a listener (<code>_onDialogClosed</code>) for the <code>iron-overlay-closed</code> event which is a CustomEvent (contains a detail property). This event is fired when the paper-dialog closes. In the detail of that event is a boolean property called <code>confirmed</code>. This will be true if the confirm button is clicked and false if the cancel button is clicked. This allows us to determine which callback to run in the <code>_onDialogClosed</code> function. If confirmed is true, run the <code>_confirmCallback</code> function, if confirmed is false, run the <code>_cancelCallback</code> function.</p>
  788. <p>Also above, is the <code>open</code> and <code>close</code> functions. These are called programmatically and start off the process. The open function accepts 2 parameters, our _confirmCallback and _cancelCallback. Calling open will move the now-confirm-dialog to a higher level element (preferably outside the app-layout element), open the <code>paper-dialog</code> and set the <code>_confirmCallback</code> and <code>_cancelCallback</code> properties.</p>
  789. <p>The close function will close the <code>paper-dialog</code> which in turn causes the <code>iron-overlay-closed</code> event to fire with the confirmed property set to false.</p>
  790. <p>And that&#8217;s it really. If you&#8217;re interested you can find the code on <a href="https://github.com/RedPillNow/now-confirm-dialog" target="_blank" rel="noopener">GitHub</a> in <a href="https://github.com/RedPillNow" target="_blank" rel="noopener">Red Pill Now</a>&#8216;s repository space. Until next time&#8230;. happy coding.</p>
  791.  
  792. <style>
  793. .huge-it-share-buttons {
  794. border:0px solid #0FB5D6;
  795. border-radius:5px;
  796. background:#3BD8FF;
  797. text-align:right; }
  798.  
  799. #huge-it-share-buttons-top {margin-bottom:0px;}
  800. #huge-it-share-buttons-bottom {margin-top:0px;}
  801.  
  802. .huge-it-share-buttons h3 {
  803. font-size:25px ;
  804. font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
  805. color:#666666;
  806.  
  807. display:block; line-height:25px ;
  808.  
  809. text-align:right; }
  810.  
  811. .huge-it-share-buttons ul {
  812. float:right; }
  813.  
  814. .huge-it-share-buttons ul li {
  815. margin-left:3px;
  816. margin-right:3px;
  817. padding:0px;
  818. border:0px ridge #E6354C;
  819. border-radius:11px;
  820. background-color:#14CC9B;
  821. }
  822.  
  823. .huge-it-share-buttons ul li #backforunical943 {
  824. border-bottom: 0;
  825. background-image:url('http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/buttons.20.png');
  826. width:20px;
  827. height:20px;
  828. }
  829.  
  830. .front-shares-count {
  831. position: absolute;
  832. text-align: center;
  833. display: block;
  834. }
  835.  
  836. .shares_size20 .front-shares-count {
  837. font-size: 10px;
  838. top: 10px;
  839. width: 20px;
  840. }
  841.  
  842. .shares_size30 .front-shares-count {
  843. font-size: 11px;
  844. top: 15px;
  845. width: 30px;
  846. }
  847.  
  848. .shares_size40 .front-shares-count {
  849. font-size: 12px;
  850. top: 21px;
  851. width: 40px;
  852. }
  853. </style>
  854. <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
  855. <h3>Share This:</h3>
  856. <ul class="huge-it-share-buttons-list ">
  857. <li class="nobackground " >
  858.  
  859. <a id="backforunical943" 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 -80px "></a>
  860. </li>
  861. <li class="nobackground " >
  862.  
  863. <a id="backforunical943" href="https://twitter.com/share?status=keithstric.me/feed/&text=now-confirm-dialog an OpenSource element"  onclick="javascript:void window.open('https://twitter.com/share?status=keithstric.me/feed/&text=now-confirm-dialog an OpenSource element','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: -20px -80px "></a>
  864. </li>
  865. <li class="none nobackground " >
  866.  
  867. <a id="backforunical943" 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=now-confirm-dialog an OpenSource element"  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=now-confirm-dialog an OpenSource element','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: -40px -80px "></a>
  868. </li>
  869. <li class="nobackground " >
  870.  
  871. <a id="backforunical943" 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: -60px -80px "></a>
  872. </li>
  873. <li class="nobackground " >
  874.  
  875. <a id="backforunical943" href="https://www.linkedin.com/shareArticle?title=now-confirm-dialog an OpenSource element&mini=true&url=http://keithstric.me/feed/"  onclick="javascript:void window.open('https://www.linkedin.com/shareArticle?title=now-confirm-dialog an OpenSource element&mini=true&url=http://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: -80px -80px "></a>
  876. </li>
  877. <li class="nobackground " >
  878.  
  879. <a id="backforunical943" href="https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=now-confirm-dialog an OpenSource element"  onclick="javascript:void window.open('https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=now-confirm-dialog an OpenSource element','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: -100px -80px "></a>
  880. </li>
  881. <li class="nobackground " >
  882.  
  883. <a id="backforunical943" href="http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=now-confirm-dialog an OpenSource element"  onclick="javascript:void window.open('http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=now-confirm-dialog an OpenSource element','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 -80px "></a>
  884. </li>
  885. <li class="nobackground " >
  886.  
  887. <a id="backforunical943" href="http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=now-confirm-dialog an OpenSource element"  onclick="javascript:void window.open('http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=now-confirm-dialog an OpenSource element','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: -140px -80px "></a>
  888. </li>
  889. <li class="none nobackground " >
  890.  
  891. <a id="backforunical943" 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: -160px -80px "></a>
  892. </li>
  893. <li class="none nobackground " >
  894.  
  895. <a id="backforunical943" href="http://vk.com/share.php?url=keithstric.me/feed/&title=now-confirm-dialog an OpenSource element"  onclick="javascript:void window.open('http://vk.com/share.php?url=keithstric.me/feed/&title=now-confirm-dialog an OpenSource element','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 -80px "></a>
  896. </li>
  897. <li class="none nobackground " >
  898.  
  899. <a id="backforunical943" href="http://www.reddit.com/submit?url=keithstric.me/feed/&title=now-confirm-dialog an OpenSource element"  onclick="javascript:void window.open('http://www.reddit.com/submit?url=keithstric.me/feed/&title=now-confirm-dialog an OpenSource element','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: -200px -80px "></a>
  900. </li>
  901. <li class="none nobackground " >
  902.  
  903. <a id="backforunical943" 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: -220px -80px "></a>
  904. </li>
  905. <li class="none nobackground " >
  906.  
  907. <a id="backforunical943" href="https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=now-confirm-dialog an OpenSource element"  onclick="javascript:void window.open('https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=now-confirm-dialog an OpenSource element','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 -80px "></a>
  908. </li>
  909. <li class="none nobackground " >
  910.  
  911. <a id="backforunical943" 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: -260px -80px "></a>
  912. </li>
  913. <li class="none nobackground " >
  914.  
  915. <a id="backforunical943" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=now-confirm-dialog an OpenSource element"  onclick="javascript:void window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=now-confirm-dialog an OpenSource element','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: -280px -80px "></a>
  916. </li>
  917. <li class="none nobackground " >
  918.  
  919. <a id="backforunical943" href="http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=now-confirm-dialog an OpenSource element&pic=&ralateUid=&"  onclick="javascript:void window.open('http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=now-confirm-dialog an OpenSource element&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: -300px -80px "></a>
  920. </li>
  921. <li class="none nobackground " >
  922.  
  923. <a id="backforunical943" href="http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=now-confirm-dialog an OpenSource element"  onclick="javascript:void window.open('http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=now-confirm-dialog an OpenSource element','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: -320px -80px "></a>
  924. </li>
  925. <li class="none nobackground " >
  926.  
  927. <a id="backforunical943" href="http://n4g.com/tips?url=keithstric.me/feed/&title=now-confirm-dialog an OpenSource element"  onclick="javascript:void window.open('http://n4g.com/tips?url=keithstric.me/feed/&title=now-confirm-dialog an OpenSource element','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: -340px -80px "></a>
  928. </li>
  929. </ul>
  930. <div class="clear"></div>
  931. </div>
  932. ]]></content:encoded>
  933. <wfw:commentRss>http://keithstric.me/2018/02/01/now-confirm-dialog-an-opensource-element/feed/</wfw:commentRss>
  934. <slash:comments>0</slash:comments>
  935. </item>
  936. <item>
  937. <title>Adventures in tooling</title>
  938. <link>http://keithstric.me/2018/01/23/adventures-in-tooling/</link>
  939. <pubDate>Tue, 23 Jan 2018 17:51:00 +0000</pubDate>
  940. <dc:creator><![CDATA[Keith Strickland]]></dc:creator>
  941. <category><![CDATA[JavaScript]]></category>
  942. <category><![CDATA[node.js]]></category>
  943. <category><![CDATA[OpenSource]]></category>
  944. <category><![CDATA[Red Pill]]></category>
  945.  
  946. <guid isPermaLink="false">http://keithstric.me/?p=937</guid>
  947. <description><![CDATA[<p>Here lately I&#8217;ve been writing a lot of tooling in preparation for upcoming projects. This tooling is meant to lessen the amount of work to start up a new project. A while back I watched <a href="https://www.youtube.com/watch?v=L-fx2xXSVso" target="_blank" rel="noopener">this video</a>. That video inspired me to come up with a repository in which a front-end developer could clone, run a couple of commands and be ready to write code for the new project. Going down this route has been quite the eye opener to the complexity of what a modern progressive web app is today.</p> <a href="http://keithstric.me/2018/01/23/adventures-in-tooling/" class="more-link pull-right" rel="bookmark">Continue Reading</a>]]></description>
  948. <content:encoded><![CDATA[<p>Here lately I&#8217;ve been writing a lot of tooling in preparation for upcoming projects. This tooling is meant to lessen the amount of work to start up a new project. A while back I watched <a href="https://www.youtube.com/watch?v=L-fx2xXSVso" target="_blank" rel="noopener">this video</a>. That video inspired me to come up with a repository in which a front-end developer could clone, run a couple of commands and be ready to write code for the new project. Going down this route has been quite the eye opener to the complexity of what a modern progressive web app is today. So, here are the requirements for this project:</p>
  949. <ul>
  950. <li>Provides a Polymer 2.0 progressive web app shell which follows the PRPL pattern and has the following features:
  951. <ul>
  952. <li>Offline Support</li>
  953. <li>Internationalization Support</li>
  954. <li>Authentication to various systems (AD, Domino, etc.)</li>
  955. <li>Routing</li>
  956. <li>Lazy-Loading resources</li>
  957. <li>Inclusion of our base custom elements (now-core, <a href="https://github.com/RedPillNow/now-context" target="_blank" rel="noopener">now-context</a>, now-domino-auth, etc)</li>
  958. <li>Customizable theme which starts with the Red Pill colors, images and branding</li>
  959. <li>Should utilize TypeScript</li>
  960. <li>Most important: Should implement Red Pill Now&#8217;s opinions, requirements and &#8220;Best Practice&#8221; techniques for developing a web app</li>
  961. </ul>
  962. </li>
  963. <li>A testing system
  964. <ul>
  965. <li>Should be setup to utilize TypeScript</li>
  966. <li>Should include complete, passing tests for the base web app</li>
  967. </ul>
  968. </li>
  969. <li>A build system should be included that performs the following
  970. <ul>
  971. <li>Configurable via polymer.json and sw-precache-config.js</li>
  972. <li>Should minify all css, html, js, json and image files</li>
  973. <li>Should bundle application views appropriately</li>
  974. <li>Should generate a service worker</li>
  975. <li>Should allow customization of tasks to run before/after the build step</li>
  976. <li>Should provide Source Maps for easier troubleshooting of production code</li>
  977. </ul>
  978. </li>
  979. <li>Include a demo site built using the tooling project
  980. <ul>
  981. <li>Documents Red Pill Now&#8217;s code style guidelines</li>
  982. <li>Gives examples of using the now-* elements included with the project</li>
  983. <li>Should be removable</li>
  984. </ul>
  985. </li>
  986. <li>Provides local development environment tools
  987. <ul>
  988. <li>Local web server configurations for serving files from the src, dist, demo and test directories</li>
  989. <li>Watching the appropriate files for change and reloading the browser</li>
  990. <li>Misc. tools for cleaning up the dev environment</li>
  991. <li>Typescript compiler</li>
  992. <li>Version bumping (major, minor, patch)</li>
  993. </ul>
  994. </li>
  995. </ul>
  996. <p>Now, implementing all of those requirements has been quite the undertaking. It&#8217;s taken right at a month (started right before Christmas) to implement all of the above features. One of the things to come out of this is 5 open source projects (<a href="https://github.com/RedPillNow/now-context" target="_blank" rel="noopener">now-context</a>, <a href="https://github.com/RedPillNow/polymerts-doc-generator" target="_blank" rel="noopener">polymerts-doc-generator</a>, <a href="https://github.com/RedPillNow/now-richtext" target="_blank" rel="noopener">now-richtext</a>, <a href="https://github.com/RedPillNow/now-avatar" target="_blank" rel="noopener">now-avatar</a> and <a href="https://github.com/RedPillNow/now-standalone-picker" target="_blank" rel="noopener">now-standalone-picker</a>). These are mostly Polymer elements with one <a href="https://nodejs.org/en/" target="_blank" rel="noopener">node.js</a> project in there. Also I got to learn about node.js. This being my first <em>real</em> undertaking with node it of course came with it&#8217;s own learning curve.</p>
  997. <p>The biggest piece of creating this project was to understand how to use the node Readable/Writable streams. It&#8217;s a difficult thing to understand if you&#8217;ve never worked with streams before (which I haven&#8217;t) but they are very cool to work with and powerful. Also included in that learning curve is that everything <em>should</em> be asynchronous as it runs, so all of your tools should be returning Promises just to ensure everything is processing exactly what it should be processing.</p>
  998. <p>So, what was the outcome of all this work? Well, a project that will cut Red Pill Now&#8217;s new front-end project start-up time from about 1 to 2 weeks down to a few minutes. Those 1 to 2 weeks would would have been spent writing the elements to come up with an application shell, defining the theme, setting up offline configurations, writing a build system (this could easily consume a week), ensuring the TypeScript compilation was working, setting up internationalization support, implementing authentication, implementing a pub-sub system, etc.</p>
  999. <p>So what&#8217;s the process now?</p>
  1000. <ul>
  1001. <li>You start with cloning the redpill-zion project to your local machine.</li>
  1002. <li>Jump out to a command line and run: <code>npm run start</code>:
  1003. <ul>
  1004. <li>this runs <code>npm install</code> and <code>bower install</code></li>
  1005. <li>asks a series of questions to which the developer provides answers</li>
  1006. <li>configures the local server options</li>
  1007. <li>configures package.json, manifest.json, tsconfig.json, polymer.json, manifest.json</li>
  1008. <li>and does some other misc work based on answers given to questions asked</li>
  1009. </ul>
  1010. </li>
  1011. <li>Once setup has finished the developer will run <code>npm run start</code>:
  1012. <ul>
  1013. <li>this will start a local server serving files from the <code>src</code> directory which includes a watch of all the .ts, .html, .css and .json files. Once any of those types of files change, compilation of TypeScript will occur (if needed) and the server will reload.</li>
  1014. </ul>
  1015. </li>
  1016. <li>The developer is ready to start writing code</li>
  1017. <li>Once a build is required, the developer will run <code>npm run build</code> and the application will be optimized, minified and dumped into the <code>dist</code> directory ready for distribution</li>
  1018. <li>Once the build is complete, run <code>npm run dist</code> and a local server serving files from the <code>dist</code> directory will be started in order to do manual testing</li>
  1019. <li>To run automated tests, run <code>npm run tests</code> and a local server serving files from the <code>test</code> directory will be started with the same watch criteria as the src server</li>
  1020. </ul>
  1021. <p>And that&#8217;s it. Everything a developer might need to work on/develop a project is included. The most important part of this whole thing is that the provided code matches Red Pill Now&#8217;s coding guidelines, includes all of the tools we recommend a front-end developer use, creates a web app that follows Red Pill Now&#8217;s opinions on what should be included in every application and provides a standard interface for all Red Pill Now projects.</p>
  1022. <p>The redpill-zion project I think should radically improve the productivity of our dev team and keep things very consistent. It should also save our customers money (and who doesn&#8217;t like to save money?). Not to mention it takes out the need to go through all the questions required to start a new project (what framework? what build tools? what compilation tools? Use TypeScript or not? etc, and on and on). In the future more tools and functionality should be able to easily be implemented which, everyone likes.</p>
  1023. <p>I hope this article has inspired you to seek your own solution to this problem. Until next time&#8230;. Happy Coding.</p>
  1024.  
  1025. <style>
  1026. .huge-it-share-buttons {
  1027. border:0px solid #0FB5D6;
  1028. border-radius:5px;
  1029. background:#3BD8FF;
  1030. text-align:right; }
  1031.  
  1032. #huge-it-share-buttons-top {margin-bottom:0px;}
  1033. #huge-it-share-buttons-bottom {margin-top:0px;}
  1034.  
  1035. .huge-it-share-buttons h3 {
  1036. font-size:25px ;
  1037. font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
  1038. color:#666666;
  1039.  
  1040. display:block; line-height:25px ;
  1041.  
  1042. text-align:right; }
  1043.  
  1044. .huge-it-share-buttons ul {
  1045. float:right; }
  1046.  
  1047. .huge-it-share-buttons ul li {
  1048. margin-left:3px;
  1049. margin-right:3px;
  1050. padding:0px;
  1051. border:0px ridge #E6354C;
  1052. border-radius:11px;
  1053. background-color:#14CC9B;
  1054. }
  1055.  
  1056. .huge-it-share-buttons ul li #backforunical937 {
  1057. border-bottom: 0;
  1058. background-image:url('http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/buttons.20.png');
  1059. width:20px;
  1060. height:20px;
  1061. }
  1062.  
  1063. .front-shares-count {
  1064. position: absolute;
  1065. text-align: center;
  1066. display: block;
  1067. }
  1068.  
  1069. .shares_size20 .front-shares-count {
  1070. font-size: 10px;
  1071. top: 10px;
  1072. width: 20px;
  1073. }
  1074.  
  1075. .shares_size30 .front-shares-count {
  1076. font-size: 11px;
  1077. top: 15px;
  1078. width: 30px;
  1079. }
  1080.  
  1081. .shares_size40 .front-shares-count {
  1082. font-size: 12px;
  1083. top: 21px;
  1084. width: 40px;
  1085. }
  1086. </style>
  1087. <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
  1088. <h3>Share This:</h3>
  1089. <ul class="huge-it-share-buttons-list ">
  1090. <li class="nobackground " >
  1091.  
  1092. <a id="backforunical937" 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 -80px "></a>
  1093. </li>
  1094. <li class="nobackground " >
  1095.  
  1096. <a id="backforunical937" href="https://twitter.com/share?status=keithstric.me/feed/&text=Adventures in tooling"  onclick="javascript:void window.open('https://twitter.com/share?status=keithstric.me/feed/&text=Adventures in tooling','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: -20px -80px "></a>
  1097. </li>
  1098. <li class="none nobackground " >
  1099.  
  1100. <a id="backforunical937" 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=Adventures in tooling"  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=Adventures in tooling','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: -40px -80px "></a>
  1101. </li>
  1102. <li class="nobackground " >
  1103.  
  1104. <a id="backforunical937" 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: -60px -80px "></a>
  1105. </li>
  1106. <li class="nobackground " >
  1107.  
  1108. <a id="backforunical937" href="https://www.linkedin.com/shareArticle?title=Adventures in tooling&mini=true&url=http://keithstric.me/feed/"  onclick="javascript:void window.open('https://www.linkedin.com/shareArticle?title=Adventures in tooling&mini=true&url=http://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: -80px -80px "></a>
  1109. </li>
  1110. <li class="nobackground " >
  1111.  
  1112. <a id="backforunical937" href="https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Adventures in tooling"  onclick="javascript:void window.open('https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Adventures in tooling','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: -100px -80px "></a>
  1113. </li>
  1114. <li class="nobackground " >
  1115.  
  1116. <a id="backforunical937" href="http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Adventures in tooling"  onclick="javascript:void window.open('http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Adventures in tooling','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 -80px "></a>
  1117. </li>
  1118. <li class="nobackground " >
  1119.  
  1120. <a id="backforunical937" href="http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Adventures in tooling"  onclick="javascript:void window.open('http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Adventures in tooling','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: -140px -80px "></a>
  1121. </li>
  1122. <li class="none nobackground " >
  1123.  
  1124. <a id="backforunical937" 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: -160px -80px "></a>
  1125. </li>
  1126. <li class="none nobackground " >
  1127.  
  1128. <a id="backforunical937" href="http://vk.com/share.php?url=keithstric.me/feed/&title=Adventures in tooling"  onclick="javascript:void window.open('http://vk.com/share.php?url=keithstric.me/feed/&title=Adventures in tooling','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 -80px "></a>
  1129. </li>
  1130. <li class="none nobackground " >
  1131.  
  1132. <a id="backforunical937" href="http://www.reddit.com/submit?url=keithstric.me/feed/&title=Adventures in tooling"  onclick="javascript:void window.open('http://www.reddit.com/submit?url=keithstric.me/feed/&title=Adventures in tooling','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: -200px -80px "></a>
  1133. </li>
  1134. <li class="none nobackground " >
  1135.  
  1136. <a id="backforunical937" 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: -220px -80px "></a>
  1137. </li>
  1138. <li class="none nobackground " >
  1139.  
  1140. <a id="backforunical937" href="https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Adventures in tooling"  onclick="javascript:void window.open('https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Adventures in tooling','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 -80px "></a>
  1141. </li>
  1142. <li class="none nobackground " >
  1143.  
  1144. <a id="backforunical937" 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: -260px -80px "></a>
  1145. </li>
  1146. <li class="none nobackground " >
  1147.  
  1148. <a id="backforunical937" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Adventures in tooling"  onclick="javascript:void window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Adventures in tooling','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: -280px -80px "></a>
  1149. </li>
  1150. <li class="none nobackground " >
  1151.  
  1152. <a id="backforunical937" href="http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Adventures in tooling&pic=&ralateUid=&"  onclick="javascript:void window.open('http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Adventures in tooling&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: -300px -80px "></a>
  1153. </li>
  1154. <li class="none nobackground " >
  1155.  
  1156. <a id="backforunical937" href="http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Adventures in tooling"  onclick="javascript:void window.open('http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Adventures in tooling','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: -320px -80px "></a>
  1157. </li>
  1158. <li class="none nobackground " >
  1159.  
  1160. <a id="backforunical937" href="http://n4g.com/tips?url=keithstric.me/feed/&title=Adventures in tooling"  onclick="javascript:void window.open('http://n4g.com/tips?url=keithstric.me/feed/&title=Adventures in tooling','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: -340px -80px "></a>
  1161. </li>
  1162. </ul>
  1163. <div class="clear"></div>
  1164. </div>
  1165. ]]></content:encoded>
  1166. </item>
  1167. <item>
  1168. <title>Sucky docs are just frustrating</title>
  1169. <link>http://keithstric.me/2018/01/17/sucky-docs-are-just-frustrating/</link>
  1170. <comments>http://keithstric.me/2018/01/17/sucky-docs-are-just-frustrating/#comments</comments>
  1171. <pubDate>Wed, 17 Jan 2018 18:39:07 +0000</pubDate>
  1172. <dc:creator><![CDATA[Keith Strickland]]></dc:creator>
  1173. <category><![CDATA[JavaScript]]></category>
  1174. <category><![CDATA[Misc]]></category>
  1175. <category><![CDATA[OpenSource]]></category>
  1176. <category><![CDATA[Rambling]]></category>
  1177.  
  1178. <guid isPermaLink="false">http://keithstric.me/?p=934</guid>
  1179. <description><![CDATA[<p>Since my move to OpenSource JavaScript frameworks, libraries, modules, etc. I spend a lot of time looking at the documentation for whatever it is I&#8217;m working on. Some docs are really good. They give a description, example, what something returns, what it expects as parameters, etc. However some are really bad. They define the name of the function/property/whatever but they don&#8217;t say what the hell it does. Take this example from the nodejs documentation for the &#8216;</p> <a href="http://keithstric.me/2018/01/17/sucky-docs-are-just-frustrating/" class="more-link pull-right" rel="bookmark">Continue Reading</a>]]></description>
  1180. <content:encoded><![CDATA[<p>Since my move to OpenSource JavaScript frameworks, libraries, modules, etc. I spend a lot of time looking at the documentation for whatever it is I&#8217;m working on. Some docs are really good. They give a description, example, what something returns, what it expects as parameters, etc. However some are really bad. They define the name of the function/property/whatever but they don&#8217;t say what the hell it does. Take this example from the nodejs documentation for the &#8216;<a href="https://nodejs.org/api/fs.html" target="_blank" rel="noopener">fs</a>&#8216; module:</p>
  1181. <p><a href="http://keithstric.me/wp-content/uploads/2018/01/Screen-Shot-2018-01-17-at-1.33.11-PM.png"><img class="aligncenter wp-image-935 size-medium" src="http://keithstric.me/wp-content/uploads/2018/01/Screen-Shot-2018-01-17-at-1.33.11-PM-300x162.png" alt="" width="300" height="162" srcset="http://keithstric.me/wp-content/uploads/2018/01/Screen-Shot-2018-01-17-at-1.33.11-PM-300x162.png 300w, http://keithstric.me/wp-content/uploads/2018/01/Screen-Shot-2018-01-17-at-1.33.11-PM-768x415.png 768w, http://keithstric.me/wp-content/uploads/2018/01/Screen-Shot-2018-01-17-at-1.33.11-PM.png 841w" sizes="(max-width: 300px) 100vw, 300px" /></a></p>
  1182. <p>&lt;rant&gt;</p>
  1183. <p>So&#8230; looking at the above screen shot, what does fs.unlink and fs.unlinkSync do? I know that it will delete the path provided just from reading how to do things elsewhere, but if I didn&#8217;t know that, how would I discover what it does? This is a prime example of how NOT to document an API.</p>
  1184. <p>&lt;/rant&gt;</p>
  1185. <p>So, if you&#8217;re creating documentation for your project, please for the love of god document it well. Until next time&#8230;. Happy Coding.</p>
  1186.  
  1187. <style>
  1188. .huge-it-share-buttons {
  1189. border:0px solid #0FB5D6;
  1190. border-radius:5px;
  1191. background:#3BD8FF;
  1192. text-align:right; }
  1193.  
  1194. #huge-it-share-buttons-top {margin-bottom:0px;}
  1195. #huge-it-share-buttons-bottom {margin-top:0px;}
  1196.  
  1197. .huge-it-share-buttons h3 {
  1198. font-size:25px ;
  1199. font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
  1200. color:#666666;
  1201.  
  1202. display:block; line-height:25px ;
  1203.  
  1204. text-align:right; }
  1205.  
  1206. .huge-it-share-buttons ul {
  1207. float:right; }
  1208.  
  1209. .huge-it-share-buttons ul li {
  1210. margin-left:3px;
  1211. margin-right:3px;
  1212. padding:0px;
  1213. border:0px ridge #E6354C;
  1214. border-radius:11px;
  1215. background-color:#14CC9B;
  1216. }
  1217.  
  1218. .huge-it-share-buttons ul li #backforunical934 {
  1219. border-bottom: 0;
  1220. background-image:url('http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/buttons.20.png');
  1221. width:20px;
  1222. height:20px;
  1223. }
  1224.  
  1225. .front-shares-count {
  1226. position: absolute;
  1227. text-align: center;
  1228. display: block;
  1229. }
  1230.  
  1231. .shares_size20 .front-shares-count {
  1232. font-size: 10px;
  1233. top: 10px;
  1234. width: 20px;
  1235. }
  1236.  
  1237. .shares_size30 .front-shares-count {
  1238. font-size: 11px;
  1239. top: 15px;
  1240. width: 30px;
  1241. }
  1242.  
  1243. .shares_size40 .front-shares-count {
  1244. font-size: 12px;
  1245. top: 21px;
  1246. width: 40px;
  1247. }
  1248. </style>
  1249. <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
  1250. <h3>Share This:</h3>
  1251. <ul class="huge-it-share-buttons-list ">
  1252. <li class="nobackground " >
  1253.  
  1254. <a id="backforunical934" 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 -80px "></a>
  1255. </li>
  1256. <li class="nobackground " >
  1257.  
  1258. <a id="backforunical934" href="https://twitter.com/share?status=keithstric.me/feed/&text=Sucky docs are just frustrating"  onclick="javascript:void window.open('https://twitter.com/share?status=keithstric.me/feed/&text=Sucky docs are just frustrating','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: -20px -80px "></a>
  1259. </li>
  1260. <li class="none nobackground " >
  1261.  
  1262. <a id="backforunical934" 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=Sucky docs are just frustrating"  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=Sucky docs are just frustrating','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: -40px -80px "></a>
  1263. </li>
  1264. <li class="nobackground " >
  1265.  
  1266. <a id="backforunical934" 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: -60px -80px "></a>
  1267. </li>
  1268. <li class="nobackground " >
  1269.  
  1270. <a id="backforunical934" href="https://www.linkedin.com/shareArticle?title=Sucky docs are just frustrating&mini=true&url=http://keithstric.me/feed/"  onclick="javascript:void window.open('https://www.linkedin.com/shareArticle?title=Sucky docs are just frustrating&mini=true&url=http://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: -80px -80px "></a>
  1271. </li>
  1272. <li class="nobackground " >
  1273.  
  1274. <a id="backforunical934" href="https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Sucky docs are just frustrating"  onclick="javascript:void window.open('https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Sucky docs are just frustrating','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: -100px -80px "></a>
  1275. </li>
  1276. <li class="nobackground " >
  1277.  
  1278. <a id="backforunical934" href="http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Sucky docs are just frustrating"  onclick="javascript:void window.open('http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Sucky docs are just frustrating','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 -80px "></a>
  1279. </li>
  1280. <li class="nobackground " >
  1281.  
  1282. <a id="backforunical934" href="http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Sucky docs are just frustrating"  onclick="javascript:void window.open('http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Sucky docs are just frustrating','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: -140px -80px "></a>
  1283. </li>
  1284. <li class="none nobackground " >
  1285.  
  1286. <a id="backforunical934" 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: -160px -80px "></a>
  1287. </li>
  1288. <li class="none nobackground " >
  1289.  
  1290. <a id="backforunical934" href="http://vk.com/share.php?url=keithstric.me/feed/&title=Sucky docs are just frustrating"  onclick="javascript:void window.open('http://vk.com/share.php?url=keithstric.me/feed/&title=Sucky docs are just frustrating','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 -80px "></a>
  1291. </li>
  1292. <li class="none nobackground " >
  1293.  
  1294. <a id="backforunical934" href="http://www.reddit.com/submit?url=keithstric.me/feed/&title=Sucky docs are just frustrating"  onclick="javascript:void window.open('http://www.reddit.com/submit?url=keithstric.me/feed/&title=Sucky docs are just frustrating','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: -200px -80px "></a>
  1295. </li>
  1296. <li class="none nobackground " >
  1297.  
  1298. <a id="backforunical934" 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: -220px -80px "></a>
  1299. </li>
  1300. <li class="none nobackground " >
  1301.  
  1302. <a id="backforunical934" href="https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Sucky docs are just frustrating"  onclick="javascript:void window.open('https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Sucky docs are just frustrating','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 -80px "></a>
  1303. </li>
  1304. <li class="none nobackground " >
  1305.  
  1306. <a id="backforunical934" 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: -260px -80px "></a>
  1307. </li>
  1308. <li class="none nobackground " >
  1309.  
  1310. <a id="backforunical934" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Sucky docs are just frustrating"  onclick="javascript:void window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Sucky docs are just frustrating','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: -280px -80px "></a>
  1311. </li>
  1312. <li class="none nobackground " >
  1313.  
  1314. <a id="backforunical934" href="http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Sucky docs are just frustrating&pic=&ralateUid=&"  onclick="javascript:void window.open('http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Sucky docs are just frustrating&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: -300px -80px "></a>
  1315. </li>
  1316. <li class="none nobackground " >
  1317.  
  1318. <a id="backforunical934" href="http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Sucky docs are just frustrating"  onclick="javascript:void window.open('http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Sucky docs are just frustrating','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: -320px -80px "></a>
  1319. </li>
  1320. <li class="none nobackground " >
  1321.  
  1322. <a id="backforunical934" href="http://n4g.com/tips?url=keithstric.me/feed/&title=Sucky docs are just frustrating"  onclick="javascript:void window.open('http://n4g.com/tips?url=keithstric.me/feed/&title=Sucky docs are just frustrating','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: -340px -80px "></a>
  1323. </li>
  1324. </ul>
  1325. <div class="clear"></div>
  1326. </div>
  1327. ]]></content:encoded>
  1328. <wfw:commentRss>http://keithstric.me/2018/01/17/sucky-docs-are-just-frustrating/feed/</wfw:commentRss>
  1329. <slash:comments>1</slash:comments>
  1330. </item>
  1331. <item>
  1332. <title>Troubleshooting Web Applications</title>
  1333. <link>http://keithstric.me/2018/01/10/troubleshooting-web-applications/</link>
  1334. <pubDate>Wed, 10 Jan 2018 19:30:12 +0000</pubDate>
  1335. <dc:creator><![CDATA[Keith Strickland]]></dc:creator>
  1336. <category><![CDATA[Chrome]]></category>
  1337. <category><![CDATA[Google]]></category>
  1338. <category><![CDATA[JavaScript]]></category>
  1339.  
  1340. <guid isPermaLink="false">http://keithstric.me/?p=820</guid>
  1341. <description><![CDATA[<p>As web developers the ability to troubleshoot a web application is a very important part of the development process. To be able to see what&#8217;s happening and understand what may be causing a certain behavior is key and should be employed during the entire development process, not only when something is broken. In this series I will outline my process of troubleshooting web applications.</p>
  1342. <p>First off the tools. While there used to be a hand full of tools you might use now you only need one,</p> <a href="http://keithstric.me/2018/01/10/troubleshooting-web-applications/" class="more-link pull-right" rel="bookmark">Continue Reading</a>]]></description>
  1343. <content:encoded><![CDATA[<p>As web developers the ability to troubleshoot a web application is a very important part of the development process. To be able to see what&#8217;s happening and understand what may be causing a certain behavior is key and should be employed during the entire development process, not only when something is broken. In this series I will outline my process of troubleshooting web applications.</p>
  1344. <p>First off the tools. While there used to be a hand full of tools you might use now you only need one, and that&#8217;s Google Chrome Developer Tools. This will show you everything you need to know about your web app, except what&#8217;s happening on the backend. However we can see what the backend is sending the frontend which also helps the development/troubleshooting cycle, I&#8217;ll get to that in a minute. Let&#8217;s get started.</p>
  1345. <div class="gridable gridable--row" >
  1346. <div class="gridable--col col-6" >
  1347. <h3>Elements Tab</h3>
  1348. <p>This tab is extremely handy. Let&#8217;s go through the parts here. There are more than I list here but these are the ones I use the most. The numbers below correspond to the numbers in the screen shot to the right.</p>
  1349. <ol>
  1350. <li>This is a handy button. Click the button, and then on the left hover over an element in your app it&#8217;ll turn blue. Then click the element and it&#8217;ll select it in the elements panel. This functionality is extremely useful when something is buried deep in the DOM</li>
  1351. <li>Here you can navigate the DOM and select an element. Once selected the representative element on the left will turn blue and then you can do all sorts of cool things with it.
  1352. <ol>
  1353. <li>You can drag/drop it into a different location.</li>
  1354. <li>Double-Click an attribute and edit that attribute. Also add and remove attributes.</li>
  1355. <li>Add, Remove and Edit the styles in the right side panel.</li>
  1356. <li>Also, an extremely useful feature is once an element is selected, you can open the JavaScript console and access the JavaScript properties of the selected element. Just type $0.[propertyName] to see a single property, or just $0 to see all the properties.</li>
  1357. </ol>
  1358. </li>
  1359. <li>The Styles tab is another really useful tool. It allows you to change the style rules of the selected element. If for example you have an element that don&#8217;t look quite right and it needs some tweaking. You can fix the display here in the tools and once you get it looking the way you want, just copy/paste the styles into your editor&#8217;s stylesheet. If you&#8217;ve setup a workspace for your app and did a little configuration (beyond the scope of this article) your changes will even persist in your project, way cool.</li>
  1360. <li>This little widget shows the CSS Box Model. You can see the margin, border and padding sizes and also the size of the element. This comes in handy when something is taking up space and you can&#8217;t figure out why.</li>
  1361. <li>Use the console to execute JavaScript against the selected element. I&#8217;ll cover the console more in depth in a moment.</li>
  1362. <li>Here you can see the styles that are actually being used for the selected element, however, you can&#8217;t edit the values in this panel. Let&#8217;s say you&#8217;ve applied a width of 10px to an element. However that element is the entire width of the screen. Here you can see what value is applied to the width and it even shows where that width is coming from.</li>
  1363. <li>Another handy button, click this button and the display of your app on the left will change to that of a mobile device. Once in that view you can pick from a few different devices or define your own. This is great for checking out the display on the different devices.</li>
  1364. </ol> </div>
  1365. <div class="gridable--col col-6" >
  1366. <p><a href="http://keithstric.me/wp-content/uploads/2017/10/2017-10-17_11-03-32.png"><img class="alignnone wp-image-830 size-large" src="http://keithstric.me/wp-content/uploads/2017/10/2017-10-17_11-03-32-1024x693.png" alt="Gallery" width="1000" height="677" srcset="http://keithstric.me/wp-content/uploads/2017/10/2017-10-17_11-03-32-1024x693.png 1024w, http://keithstric.me/wp-content/uploads/2017/10/2017-10-17_11-03-32-300x203.png 300w, http://keithstric.me/wp-content/uploads/2017/10/2017-10-17_11-03-32-768x520.png 768w, http://keithstric.me/wp-content/uploads/2017/10/2017-10-17_11-03-32.png 1325w" sizes="(max-width: 1000px) 100vw, 1000px" /></a></p>
  1367. <p><a href="http://keithstric.me/wp-content/uploads/2017/10/2017-10-17_10-44-18.png"><img class="alignnone wp-image-824 size-large" src="http://keithstric.me/wp-content/uploads/2017/10/2017-10-17_10-44-18-1024x750.png" alt="" width="1000" height="732" srcset="http://keithstric.me/wp-content/uploads/2017/10/2017-10-17_10-44-18-1024x750.png 1024w, http://keithstric.me/wp-content/uploads/2017/10/2017-10-17_10-44-18-300x220.png 300w, http://keithstric.me/wp-content/uploads/2017/10/2017-10-17_10-44-18-768x563.png 768w, http://keithstric.me/wp-content/uploads/2017/10/2017-10-17_10-44-18.png 1325w" sizes="(max-width: 1000px) 100vw, 1000px" /></a></p> </div>
  1368. </div>
  1369.  
  1370. <hr />
  1371. <div class="gridable gridable--row" >
  1372. <div class="gridable--col col-6" >
  1373. <h3>Network Tab</h3>
  1374. <p>This tab also has a lot of useful features. Use this to see the network requests your app is making and the responses you get back from the server. When working with a custom REST api, this tool is invaluable.</p>
  1375. <ol>
  1376. <li>Here you can disable your cache so you always see your latest changes during the development process</li>
  1377. <li>Filter the requests to only show you requests coming from your app via AJAX/XHR requests. You can also select All, JS, CSS, Img, Media Font, Doc, WS, Manifest, Other. This makes it easier for you to find what you may be looking for. Me personally, I leave mine on &#8220;XHR&#8221; so I see what my app is requesting.</li>
  1378. <li>You can also simulate an offline condition. This is useful if you&#8217;re using a service worker to provide offline access</li>
  1379. <li>Here we have each network request. If something you need isn&#8217;t listed in this view you can right-click the column headers and add a column with what you need. For example, Method isn&#8217;t there by default, so I added it. But this shows you the name of the file or the URL of the request, the method used (GET, PUT, POST, etc.), the status of the request and the file which made the request, how big the response was and how long it took the request to complete. You can double-click the request and see the headers, the response and a preview of the response with JSON being &#8220;prettified&#8221; in the preview.</li>
  1380. </ol> </div>
  1381. <div class="gridable--col col-6" >
  1382. <p><a href="http://keithstric.me/wp-content/uploads/2017/10/2017-10-17_11-03-32.png"><img class="alignnone wp-image-830 size-full" src="http://keithstric.me/wp-content/uploads/2017/10/2017-10-17_11-03-32.png" alt="" width="1325" height="897" srcset="http://keithstric.me/wp-content/uploads/2017/10/2017-10-17_11-03-32.png 1325w, http://keithstric.me/wp-content/uploads/2017/10/2017-10-17_11-03-32-300x203.png 300w, http://keithstric.me/wp-content/uploads/2017/10/2017-10-17_11-03-32-768x520.png 768w, http://keithstric.me/wp-content/uploads/2017/10/2017-10-17_11-03-32-1024x693.png 1024w" sizes="(max-width: 1325px) 100vw, 1325px" /></a></p> </div>
  1383. </div>
  1384.  
  1385. <hr />
  1386. <div class="gridable gridable--row" >
  1387. <div class="gridable--col col-6" >
  1388. <h3>Console Tab</h3>
  1389. <p>This tab provides a JavaScript console for experimenting with JavaScript in the context of your application. Any console logging you included in your application will show up here as will any errors and warnings.</p>
  1390. <ol>
  1391. <li>Filter the output of the console to certain levels. This is handy if you have a very busy console log</li>
  1392. <li>Click this button to clear the content of the console</li>
  1393. <li>You can configure the console so that it behaves a certain way. The two I use the most are:
  1394. <ol>
  1395. <li>Enable &#8220;Preserve log&#8221;. This is really handy if you&#8217;re in a loop that keeps refreshing the page or a redirection loop or something of that nature. You can include logging in your code and see exactly what is going on and it won&#8217;t get cleared every time a redirect/refresh happens.</li>
  1396. <li>You can log the XMLHttpRequests to see which order things happen in. If you do this, it&#8217;ll provide a link to that request in the network panel</li>
  1397. </ol>
  1398. </li>
  1399. <li>As stated earlier, you can select an element in the Elements tab and the use of &#8220;$0&#8221; will give you access to that element&#8217;s API</li>
  1400. <li>You can also just type JavaScript here to come up with a solution just for testing an idea. This is very handy to figure something out or just try an idea.</li>
  1401. </ol> </div>
  1402. <div class="gridable--col col-6" >
  1403. <p><a href="http://keithstric.me/wp-content/uploads/2018/01/2018-01-10_13-27-54.png"><img class="alignnone wp-image-927 size-large" src="http://keithstric.me/wp-content/uploads/2018/01/2018-01-10_13-27-54-1024x638.png" alt="" width="1000" height="623" srcset="http://keithstric.me/wp-content/uploads/2018/01/2018-01-10_13-27-54-1024x638.png 1024w, http://keithstric.me/wp-content/uploads/2018/01/2018-01-10_13-27-54-300x187.png 300w, http://keithstric.me/wp-content/uploads/2018/01/2018-01-10_13-27-54-768x478.png 768w, http://keithstric.me/wp-content/uploads/2018/01/2018-01-10_13-27-54.png 1326w" sizes="(max-width: 1000px) 100vw, 1000px" /></a></p> </div>
  1404. </div>
  1405.  
  1406. <hr />
  1407. <div class="gridable gridable--row" >
  1408. <div class="gridable--col col-6" >
  1409. <h3>Sources Tab</h3>
  1410. <p>This tab provides a LOT of functionality here that is WAY beyond the scope of this article. But just to highlight a few things that I use but there is a lot more. To delve deeper into this tab I recommend to find a tutorial somewhere on YouTube or something.</p>
  1411. <ol>
  1412. <li>This lists the files the browser knows about. If the file hasn&#8217;t been loaded yet it will not be listed. You can also link this to your local file system and then any changes you make will be persisted to disk which is really handy.</li>
  1413. <li>This is the code for the selected file. Again, if you&#8217;ve linked this to your local file system, you can make changes to the code here and it will be persisted to disk. Click the line number to add a break point to use the debugger</li>
  1414. <li>Here you can see any web/service workers under &#8220;Threads&#8221;. You can also see the call stack if you&#8217;ve placed a breakpoint. A lot of other data is also listed here which is beyond the scope of this article.</li>
  1415. </ol> </div>
  1416. <div class="gridable--col col-6" >
  1417. <p><a href="http://keithstric.me/wp-content/uploads/2018/01/2018-01-10_13-50-48.png"><img class="alignnone wp-image-928 size-large" src="http://keithstric.me/wp-content/uploads/2018/01/2018-01-10_13-50-48-1024x581.png" alt="" width="1000" height="567" srcset="http://keithstric.me/wp-content/uploads/2018/01/2018-01-10_13-50-48-1024x581.png 1024w, http://keithstric.me/wp-content/uploads/2018/01/2018-01-10_13-50-48-300x170.png 300w, http://keithstric.me/wp-content/uploads/2018/01/2018-01-10_13-50-48-768x436.png 768w, http://keithstric.me/wp-content/uploads/2018/01/2018-01-10_13-50-48.png 1456w" sizes="(max-width: 1000px) 100vw, 1000px" /></a></p> </div>
  1418. </div>
  1419.  
  1420. <hr />
  1421. <div class="gridable gridable--row" >
  1422. <div class="gridable--col col-6" >
  1423. <h3>Application Tab</h3>
  1424. <p>This tab contains items for the Application itself. Service Worker(s), manifest.json, local and session storage, cache, etc. This tab is used mostly once an application is ready for production or in a production environment.</p>
  1425. <ol>
  1426. <li>This is the menu to see various items. The main things here are the cache, clear storage (removes cached files and images and the application cache)</li>
  1427. <li>Here you can interact with the Service Worker for your application if you have one. It allows you to test sending notifications, sync requests, updating,  stopping and unregistering the Service Worker</li>
  1428. <li>Visit this area to clear the application cache, local files and images and restart the Service Worker</li>
  1429. <li>This shows the application cache. If your manifest.json is properly configured and your application has a Service Worker this allows you to see what is pre-cached when the application is first loaded by the browser and then the other items fetched from the server</li>
  1430. <li>The manifest shows you the status of your manifest.json file. It also allows you to test adding the app to your homescreen.</li>
  1431. </ol> </div>
  1432. <div class="gridable--col col-6" >
  1433. <p><a href="http://keithstric.me/wp-content/uploads/2018/01/2018-01-10_13-54-43.png"><img class="alignnone wp-image-929 size-large" src="http://keithstric.me/wp-content/uploads/2018/01/2018-01-10_13-54-43-1024x581.png" alt="" width="1000" height="567" srcset="http://keithstric.me/wp-content/uploads/2018/01/2018-01-10_13-54-43-1024x581.png 1024w, http://keithstric.me/wp-content/uploads/2018/01/2018-01-10_13-54-43-300x170.png 300w, http://keithstric.me/wp-content/uploads/2018/01/2018-01-10_13-54-43-768x436.png 768w, http://keithstric.me/wp-content/uploads/2018/01/2018-01-10_13-54-43.png 1456w" sizes="(max-width: 1000px) 100vw, 1000px" /></a></p> </div>
  1434. </div>
  1435.  
  1436. <p>&nbsp;</p>
  1437. <p>There is a whole lot more out there for troubleshooting web applications so this article barely scratches the surface. If you really want to dig in and understand what your app is doing learn about the Performance tab. Here you can see how much time it takes for certain tasks to run, all the way down to function calls. Me personally, while I&#8217;ve tried to learn this I&#8217;ve never really had the time to actually sit down and learn about using that tab.</p>
  1438. <p>Another tab which I&#8217;ve started using is the Audits tab, here is where the LightHouse tool is now built into the browser. This will test about 4 different aspects of your application (Progressive Web App, Performance, Accessibility and Best Practices) and provide a very detailed report. Definitely a tab to spend some time on. Just be aware you may get your feelings hurt on the performance and best practices audits.</p>
  1439. <p>So, until next time&#8230;. Happy Coding!</p>
  1440. <hr />
  1441.  
  1442. <style>
  1443. .huge-it-share-buttons {
  1444. border:0px solid #0FB5D6;
  1445. border-radius:5px;
  1446. background:#3BD8FF;
  1447. text-align:right; }
  1448.  
  1449. #huge-it-share-buttons-top {margin-bottom:0px;}
  1450. #huge-it-share-buttons-bottom {margin-top:0px;}
  1451.  
  1452. .huge-it-share-buttons h3 {
  1453. font-size:25px ;
  1454. font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
  1455. color:#666666;
  1456.  
  1457. display:block; line-height:25px ;
  1458.  
  1459. text-align:right; }
  1460.  
  1461. .huge-it-share-buttons ul {
  1462. float:right; }
  1463.  
  1464. .huge-it-share-buttons ul li {
  1465. margin-left:3px;
  1466. margin-right:3px;
  1467. padding:0px;
  1468. border:0px ridge #E6354C;
  1469. border-radius:11px;
  1470. background-color:#14CC9B;
  1471. }
  1472.  
  1473. .huge-it-share-buttons ul li #backforunical820 {
  1474. border-bottom: 0;
  1475. background-image:url('http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/buttons.20.png');
  1476. width:20px;
  1477. height:20px;
  1478. }
  1479.  
  1480. .front-shares-count {
  1481. position: absolute;
  1482. text-align: center;
  1483. display: block;
  1484. }
  1485.  
  1486. .shares_size20 .front-shares-count {
  1487. font-size: 10px;
  1488. top: 10px;
  1489. width: 20px;
  1490. }
  1491.  
  1492. .shares_size30 .front-shares-count {
  1493. font-size: 11px;
  1494. top: 15px;
  1495. width: 30px;
  1496. }
  1497.  
  1498. .shares_size40 .front-shares-count {
  1499. font-size: 12px;
  1500. top: 21px;
  1501. width: 40px;
  1502. }
  1503. </style>
  1504. <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
  1505. <h3>Share This:</h3>
  1506. <ul class="huge-it-share-buttons-list ">
  1507. <li class="nobackground " >
  1508.  
  1509. <a id="backforunical820" 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 -80px "></a>
  1510. </li>
  1511. <li class="nobackground " >
  1512.  
  1513. <a id="backforunical820" href="https://twitter.com/share?status=keithstric.me/feed/&text=Troubleshooting Web Applications"  onclick="javascript:void window.open('https://twitter.com/share?status=keithstric.me/feed/&text=Troubleshooting Web Applications','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: -20px -80px "></a>
  1514. </li>
  1515. <li class="none nobackground " >
  1516.  
  1517. <a id="backforunical820" 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=Troubleshooting Web Applications"  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=Troubleshooting Web Applications','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: -40px -80px "></a>
  1518. </li>
  1519. <li class="nobackground " >
  1520.  
  1521. <a id="backforunical820" 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: -60px -80px "></a>
  1522. </li>
  1523. <li class="nobackground " >
  1524.  
  1525. <a id="backforunical820" href="https://www.linkedin.com/shareArticle?title=Troubleshooting Web Applications&mini=true&url=http://keithstric.me/feed/"  onclick="javascript:void window.open('https://www.linkedin.com/shareArticle?title=Troubleshooting Web Applications&mini=true&url=http://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: -80px -80px "></a>
  1526. </li>
  1527. <li class="nobackground " >
  1528.  
  1529. <a id="backforunical820" href="https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Troubleshooting Web Applications"  onclick="javascript:void window.open('https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Troubleshooting Web Applications','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: -100px -80px "></a>
  1530. </li>
  1531. <li class="nobackground " >
  1532.  
  1533. <a id="backforunical820" href="http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Troubleshooting Web Applications"  onclick="javascript:void window.open('http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Troubleshooting Web Applications','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 -80px "></a>
  1534. </li>
  1535. <li class="nobackground " >
  1536.  
  1537. <a id="backforunical820" href="http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Troubleshooting Web Applications"  onclick="javascript:void window.open('http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Troubleshooting Web Applications','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: -140px -80px "></a>
  1538. </li>
  1539. <li class="none nobackground " >
  1540.  
  1541. <a id="backforunical820" 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: -160px -80px "></a>
  1542. </li>
  1543. <li class="none nobackground " >
  1544.  
  1545. <a id="backforunical820" href="http://vk.com/share.php?url=keithstric.me/feed/&title=Troubleshooting Web Applications"  onclick="javascript:void window.open('http://vk.com/share.php?url=keithstric.me/feed/&title=Troubleshooting Web Applications','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 -80px "></a>
  1546. </li>
  1547. <li class="none nobackground " >
  1548.  
  1549. <a id="backforunical820" href="http://www.reddit.com/submit?url=keithstric.me/feed/&title=Troubleshooting Web Applications"  onclick="javascript:void window.open('http://www.reddit.com/submit?url=keithstric.me/feed/&title=Troubleshooting Web Applications','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: -200px -80px "></a>
  1550. </li>
  1551. <li class="none nobackground " >
  1552.  
  1553. <a id="backforunical820" 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: -220px -80px "></a>
  1554. </li>
  1555. <li class="none nobackground " >
  1556.  
  1557. <a id="backforunical820" href="https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Troubleshooting Web Applications"  onclick="javascript:void window.open('https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Troubleshooting Web Applications','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 -80px "></a>
  1558. </li>
  1559. <li class="none nobackground " >
  1560.  
  1561. <a id="backforunical820" 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: -260px -80px "></a>
  1562. </li>
  1563. <li class="none nobackground " >
  1564.  
  1565. <a id="backforunical820" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Troubleshooting Web Applications"  onclick="javascript:void window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Troubleshooting Web Applications','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: -280px -80px "></a>
  1566. </li>
  1567. <li class="none nobackground " >
  1568.  
  1569. <a id="backforunical820" href="http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Troubleshooting Web Applications&pic=&ralateUid=&"  onclick="javascript:void window.open('http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Troubleshooting Web Applications&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: -300px -80px "></a>
  1570. </li>
  1571. <li class="none nobackground " >
  1572.  
  1573. <a id="backforunical820" href="http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Troubleshooting Web Applications"  onclick="javascript:void window.open('http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Troubleshooting Web Applications','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: -320px -80px "></a>
  1574. </li>
  1575. <li class="none nobackground " >
  1576.  
  1577. <a id="backforunical820" href="http://n4g.com/tips?url=keithstric.me/feed/&title=Troubleshooting Web Applications"  onclick="javascript:void window.open('http://n4g.com/tips?url=keithstric.me/feed/&title=Troubleshooting Web Applications','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: -340px -80px "></a>
  1578. </li>
  1579. </ul>
  1580. <div class="clear"></div>
  1581. </div>
  1582. ]]></content:encoded>
  1583. </item>
  1584. <item>
  1585. <title>keithstric.me Theme died&#8230;</title>
  1586. <link>http://keithstric.me/2018/01/09/keithstric-me-theme-died/</link>
  1587. <pubDate>Tue, 09 Jan 2018 22:20:03 +0000</pubDate>
  1588. <dc:creator><![CDATA[Keith Strickland]]></dc:creator>
  1589. <category><![CDATA[Website]]></category>
  1590.  
  1591. <guid isPermaLink="false">http://keithstric.me/?p=914</guid>
  1592. <description><![CDATA[<p>So adding today&#8217;s post about the now-context element I encountered a lot of weirdness. I&#8217;ve got this blog set to autoupdate the software and plugins. Well today&#8217;s update actually broke my previous theme and caused a lot of weirdness. So, I had to go hunting for a new theme. I came across the current theme and kind-of liked how it looks so opted for this one. So&#8230;. if you run into any issues please let me know.</p> <a href="http://keithstric.me/2018/01/09/keithstric-me-theme-died/" class="more-link pull-right" rel="bookmark">Continue Reading</a>]]></description>
  1593. <content:encoded><![CDATA[<p>So adding today&#8217;s post about the now-context element I encountered a lot of weirdness. I&#8217;ve got this blog set to autoupdate the software and plugins. Well today&#8217;s update actually broke my previous theme and caused a lot of weirdness. So, I had to go hunting for a new theme. I came across the current theme and kind-of liked how it looks so opted for this one. So&#8230;. if you run into any issues please let me know.</p>
  1594. <p>Thanks and Happy Coding!</p>
  1595.  
  1596. <style>
  1597. .huge-it-share-buttons {
  1598. border:0px solid #0FB5D6;
  1599. border-radius:5px;
  1600. background:#3BD8FF;
  1601. text-align:right; }
  1602.  
  1603. #huge-it-share-buttons-top {margin-bottom:0px;}
  1604. #huge-it-share-buttons-bottom {margin-top:0px;}
  1605.  
  1606. .huge-it-share-buttons h3 {
  1607. font-size:25px ;
  1608. font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
  1609. color:#666666;
  1610.  
  1611. display:block; line-height:25px ;
  1612.  
  1613. text-align:right; }
  1614.  
  1615. .huge-it-share-buttons ul {
  1616. float:right; }
  1617.  
  1618. .huge-it-share-buttons ul li {
  1619. margin-left:3px;
  1620. margin-right:3px;
  1621. padding:0px;
  1622. border:0px ridge #E6354C;
  1623. border-radius:11px;
  1624. background-color:#14CC9B;
  1625. }
  1626.  
  1627. .huge-it-share-buttons ul li #backforunical914 {
  1628. border-bottom: 0;
  1629. background-image:url('http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/buttons.20.png');
  1630. width:20px;
  1631. height:20px;
  1632. }
  1633.  
  1634. .front-shares-count {
  1635. position: absolute;
  1636. text-align: center;
  1637. display: block;
  1638. }
  1639.  
  1640. .shares_size20 .front-shares-count {
  1641. font-size: 10px;
  1642. top: 10px;
  1643. width: 20px;
  1644. }
  1645.  
  1646. .shares_size30 .front-shares-count {
  1647. font-size: 11px;
  1648. top: 15px;
  1649. width: 30px;
  1650. }
  1651.  
  1652. .shares_size40 .front-shares-count {
  1653. font-size: 12px;
  1654. top: 21px;
  1655. width: 40px;
  1656. }
  1657. </style>
  1658. <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
  1659. <h3>Share This:</h3>
  1660. <ul class="huge-it-share-buttons-list ">
  1661. <li class="nobackground " >
  1662.  
  1663. <a id="backforunical914" 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 -80px "></a>
  1664. </li>
  1665. <li class="nobackground " >
  1666.  
  1667. <a id="backforunical914" href="https://twitter.com/share?status=keithstric.me/feed/&text=keithstric.me Theme died&#8230;"  onclick="javascript:void window.open('https://twitter.com/share?status=keithstric.me/feed/&text=keithstric.me Theme died&#8230;','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: -20px -80px "></a>
  1668. </li>
  1669. <li class="none nobackground " >
  1670.  
  1671. <a id="backforunical914" 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=keithstric.me Theme died&#8230;"  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=keithstric.me Theme died&#8230;','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: -40px -80px "></a>
  1672. </li>
  1673. <li class="nobackground " >
  1674.  
  1675. <a id="backforunical914" 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: -60px -80px "></a>
  1676. </li>
  1677. <li class="nobackground " >
  1678.  
  1679. <a id="backforunical914" href="https://www.linkedin.com/shareArticle?title=keithstric.me Theme died&#8230;&mini=true&url=http://keithstric.me/feed/"  onclick="javascript:void window.open('https://www.linkedin.com/shareArticle?title=keithstric.me Theme died&#8230;&mini=true&url=http://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: -80px -80px "></a>
  1680. </li>
  1681. <li class="nobackground " >
  1682.  
  1683. <a id="backforunical914" href="https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=keithstric.me Theme died&#8230;"  onclick="javascript:void window.open('https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=keithstric.me Theme died&#8230;','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: -100px -80px "></a>
  1684. </li>
  1685. <li class="nobackground " >
  1686.  
  1687. <a id="backforunical914" href="http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=keithstric.me Theme died&#8230;"  onclick="javascript:void window.open('http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=keithstric.me Theme died&#8230;','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 -80px "></a>
  1688. </li>
  1689. <li class="nobackground " >
  1690.  
  1691. <a id="backforunical914" href="http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=keithstric.me Theme died&#8230;"  onclick="javascript:void window.open('http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=keithstric.me Theme died&#8230;','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: -140px -80px "></a>
  1692. </li>
  1693. <li class="none nobackground " >
  1694.  
  1695. <a id="backforunical914" 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: -160px -80px "></a>
  1696. </li>
  1697. <li class="none nobackground " >
  1698.  
  1699. <a id="backforunical914" href="http://vk.com/share.php?url=keithstric.me/feed/&title=keithstric.me Theme died&#8230;"  onclick="javascript:void window.open('http://vk.com/share.php?url=keithstric.me/feed/&title=keithstric.me Theme died&#8230;','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 -80px "></a>
  1700. </li>
  1701. <li class="none nobackground " >
  1702.  
  1703. <a id="backforunical914" href="http://www.reddit.com/submit?url=keithstric.me/feed/&title=keithstric.me Theme died&#8230;"  onclick="javascript:void window.open('http://www.reddit.com/submit?url=keithstric.me/feed/&title=keithstric.me Theme died&#8230;','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: -200px -80px "></a>
  1704. </li>
  1705. <li class="none nobackground " >
  1706.  
  1707. <a id="backforunical914" 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: -220px -80px "></a>
  1708. </li>
  1709. <li class="none nobackground " >
  1710.  
  1711. <a id="backforunical914" href="https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=keithstric.me Theme died&#8230;"  onclick="javascript:void window.open('https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=keithstric.me Theme died&#8230;','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 -80px "></a>
  1712. </li>
  1713. <li class="none nobackground " >
  1714.  
  1715. <a id="backforunical914" 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: -260px -80px "></a>
  1716. </li>
  1717. <li class="none nobackground " >
  1718.  
  1719. <a id="backforunical914" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=keithstric.me Theme died&#8230;"  onclick="javascript:void window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=keithstric.me Theme died&#8230;','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: -280px -80px "></a>
  1720. </li>
  1721. <li class="none nobackground " >
  1722.  
  1723. <a id="backforunical914" href="http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=keithstric.me Theme died&#8230;&pic=&ralateUid=&"  onclick="javascript:void window.open('http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=keithstric.me Theme died&#8230;&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: -300px -80px "></a>
  1724. </li>
  1725. <li class="none nobackground " >
  1726.  
  1727. <a id="backforunical914" href="http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=keithstric.me Theme died&#8230;"  onclick="javascript:void window.open('http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=keithstric.me Theme died&#8230;','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: -320px -80px "></a>
  1728. </li>
  1729. <li class="none nobackground " >
  1730.  
  1731. <a id="backforunical914" href="http://n4g.com/tips?url=keithstric.me/feed/&title=keithstric.me Theme died&#8230;"  onclick="javascript:void window.open('http://n4g.com/tips?url=keithstric.me/feed/&title=keithstric.me Theme died&#8230;','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: -340px -80px "></a>
  1732. </li>
  1733. </ul>
  1734. <div class="clear"></div>
  1735. </div>
  1736. ]]></content:encoded>
  1737. </item>
  1738. <item>
  1739. <title>now-context: Opensource Project</title>
  1740. <link>http://keithstric.me/2018/01/09/now-context-opensource-project/</link>
  1741. <pubDate>Tue, 09 Jan 2018 20:32:15 +0000</pubDate>
  1742. <dc:creator><![CDATA[Keith Strickland]]></dc:creator>
  1743. <category><![CDATA[JavaScript]]></category>
  1744. <category><![CDATA[OpenSource]]></category>
  1745. <category><![CDATA[Polymer]]></category>
  1746.  
  1747. <guid isPermaLink="false">http://keithstric.me/?p=844</guid>
  1748. <description><![CDATA[<p>Happy New Year! Lately I&#8217;ve been working on ways to simplify and enhance the way in which we develop applications. I watched this video: <a href="https://youtu.be/L-fx2xXSVso" target="_blank" rel="noopener">The Reusable JavaScript Revolution</a> which really got my brain working and trying to come up with a solution for <a href="http://redpillnow.com" target="_blank" rel="noopener">Red Pill Now</a>. One of the pieces of the application part of that project is a context element (<a href="https://github.com/RedPillNow/now-context" target="_blank" rel="noopener">now-context</a>) that provides a few different features:</p>
  1749. <ul>
  1750. <li>Performs and records all AJAX requests</li>
  1751. <li>Provides a basic PubSub system</li>
  1752. <li>Provides a basic Request/Response service</li>
  1753. <li>Provides a global variable to interact with the context</li>
  1754. </ul>
  1755. <p>The entire idea here is to provide a communication channel similar to that found in Backbone/Backbone Marionette for application specific communication.</p> <a href="http://keithstric.me/2018/01/09/now-context-opensource-project/" class="more-link pull-right" rel="bookmark">Continue Reading</a>]]></description>
  1756. <content:encoded><![CDATA[<p>Happy New Year! Lately I&#8217;ve been working on ways to simplify and enhance the way in which we develop applications. I watched this video: <a href="https://youtu.be/L-fx2xXSVso" target="_blank" rel="noopener">The Reusable JavaScript Revolution</a> which really got my brain working and trying to come up with a solution for <a href="http://redpillnow.com" target="_blank" rel="noopener">Red Pill Now</a>. One of the pieces of the application part of that project is a context element (<a href="https://github.com/RedPillNow/now-context" target="_blank" rel="noopener">now-context</a>) that provides a few different features:</p>
  1757. <ul>
  1758. <li>Performs and records all AJAX requests</li>
  1759. <li>Provides a basic PubSub system</li>
  1760. <li>Provides a basic Request/Response service</li>
  1761. <li>Provides a global variable to interact with the context</li>
  1762. </ul>
  1763. <p>The entire idea here is to provide a communication channel similar to that found in Backbone/Backbone Marionette for application specific communication. Sure, we could use native events, however you would have to build a lot of scaffolding around that.</p>
  1764. <h3>PubSub</h3>
  1765. <p>This feature ends up supplying a solution (not sure yet if it&#8217;s a good solution) to the problem that <a href="https://www.polymer-project.org/" target="_blank" rel="noopener">Polymer</a> has no PubSub system. Everything is done with native events and data-binding. While this is workable it can sometimes be a pain and prone to having memory leaks because you didn&#8217;t remove an event listener(s). We want to alleviate this pain and have an application specific communication channel.</p>
  1766. <p>So the basic idea here is, you subscribe to an event and provide it a callback function. Then anytime that event occurs your callback will be executed. For example, you have a list of ToDos and anytime a ToDo is created or deleted you want to increment a counter in some other element. You could do this via data-binding, but maybe the counter and ToDo list are siblings, which means now you have to implement a parent element to control all of that data. OR, you could just publish an event when a ToDo is created/deleted and subscribe to that event. That gets rid of having an empty element whose sole purpose is to shuffle data back and forth. The code for this would look something like this:</p>
  1767. <p>Setup the listener, we use a setTimeout mainly to allow time for NowContext to be initialized:</p>
  1768. <pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-highlight="5">connectedCallback() {
  1769.  super.connectedCallback();
  1770.  // Wait for now-context to be initialized
  1771.  setTimeout(() =&gt; {
  1772.    NowContext.listenEvt('nowContextItemUpdated', this.onContextItemUpdated);
  1773.  }, 1000);
  1774. }
  1775.  
  1776. onContextItemUpdated(data) {
  1777.  // Do Stuff...
  1778. }</pre>
  1779. <p>Setup the trigger:</p>
  1780. <pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-highlight="5">let data = {
  1781.  foo: 'bar',
  1782.  bar: 'baz'
  1783. };
  1784. NowContext.triggerEvt('nowContextItemUpdated', data)</pre>
  1785. <p>Anytime the &#8216;nowContextItemUpdated&#8217; event is fired, it will run all of it&#8217;s subscribed listeners. This can be very handy if something is changing a lot.</p>
  1786. <h3>ReqRes Service</h3>
  1787. <p>This feature provides a means to request something and then provide a response to that request. The request could be for anything: something from the server, something from an element or just some property somewhere. This is very similar to the PubSub event listener and trigger, however the publisher of whatever you might be requesting subscribes to the event and that listener MUST return a Promise. Then whichever element is requesting that information triggers the event.</p>
  1788. <pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-title="ReqRes Event Listener" data-enlighter-highlight="3-7">// The element which has access the data var below would be the element that subscribed to the event
  1789. let data = {foo: 'bar', bar: 'baz'};
  1790. NowContext.listenEvt('someEvt', () =&gt; {
  1791.    return new Promise((resolve, reject) =&gt; {
  1792.        resolve(data);
  1793.    });
  1794. }, null);</pre>
  1795. <p>We pass along the event name and a handler/callback for that event. The callback MUST return a Promise.</p>
  1796. <p>And then to request that data:</p>
  1797. <pre class="EnlighterJSRAW" data-enlighter-language="js" data-enlighter-title="ReqRes Trigger" data-enlighter-highlight="1-5">NowContext.triggerEvt('someEvt')
  1798.  .then((data) =&gt; {
  1799.    console.log('data=', data);
  1800.    // Do Stuff...
  1801.  });</pre>
  1802. <p>Making a request from the server follows a similar pattern:</p>
  1803. <pre class="EnlighterJSRAW" data-enlighter-language="js">NowContext.reqres({
  1804.  ajax: {
  1805.    method: 'GET',
  1806.    url: 'https://jsonplaceholder.typicode.com/post/20'
  1807.  },
  1808.  idKey: 'id'
  1809. })
  1810.  .then((ajaxRequest) =&gt; {
  1811.    console.log('ajaxRequest=', ajaxRequest);
  1812.    // Do Stuff with the response....
  1813.  });</pre>
  1814. <p>What&#8217;s happening behind the scenes above is:</p>
  1815. <ul>
  1816. <li>We call the reqres function which returns a Promise (line 1)
  1817. <ul>
  1818. <li>That function is passed an object that has an ajax property and that object needs to contain everything needed to make an AJAX request. (lines 1-7)</li>
  1819. </ul>
  1820. </li>
  1821. <li>The AJAX information is passed to a call to the web worker to do the request</li>
  1822. <li>The web worker makes the request and then passes the response back to now-context</li>
  1823. <li>now-context updates it&#8217;s context property, fires the &#8216;nowContextItemUpdated&#8217; or &#8216;nowContextItemAdded&#8217; event and resolves the Promise passing the AjaxRequest object back to the caller (line 8)</li>
  1824. <li>The .then part of the Promise then runs and can utilize the ajaxRequest (lines 9, 10)</li>
  1825. </ul>
  1826. <p>We can even combine the ReqRes event and Server request. Here is the subscriber/listener for the event:</p>
  1827. <pre class="EnlighterJSRAW" data-enlighter-language="js">let data = {foo: 'bar', bar: 'baz'};
  1828. NowContext.listenEvt('someEvt', () =&gt; {
  1829.  return new Promise((resolve, reject) =&gt; {
  1830.    NowContext.reqres({ ajax: { url: 'https://jsonplaceholder.typicode.com/posts/20', method: 'GET' }, idKey: 'id' })
  1831.      .then((ajaxReq) =&gt; {
  1832.        resolve(ajaxReq);
  1833.      });
  1834.  });
  1835. });</pre>
  1836. <p>And then the publisher of the event will actually trigger the event:</p>
  1837. <pre class="EnlighterJSRAW" data-enlighter-language="null">NowContext.triggerEvt('someEvt')
  1838.  .then((ajaxReq) =&gt; {
  1839.    console.log(ajaxReq);
  1840.    // Do Stuff...
  1841.  });</pre>
  1842. <p>I realize some of the names of things here are quite confusing, I am working on making this a little more friendly, so if you use this project, don&#8217;t get too comfy with the function names.</p>
  1843. <h3>Context</h3>
  1844. <p>The context is a place to store things (again, I know the naming here sucks). Currently, anytime the reqres function is called and a response provided, we add the response to the context. We have also been discussing the ability to add random items to the context. If a request is made for an item already in the context, we update that item. There are 2 events here that get fired:</p>
  1845. <ul>
  1846. <li>nowContextItemUpdated &#8211; Fired when a context item is updated</li>
  1847. <li>nowContextItemAdded &#8211; Fired when a context item is added</li>
  1848. </ul>
  1849. <p>So it wouldn&#8217;t be much of a context if you couldn&#8217;t get things from it. Since the context is nothing but an Object we can just access it directly:</p>
  1850. <pre class="EnlighterJSRAW" data-enlighter-language="js">NowContext.context['someId']</pre>
  1851. <p>In theory you could add stuff to the context here, I don&#8217;t prevent it. However, in the future I do want to limit that and provide an authorized process to add/remove things to the context.</p>
  1852. <p>You can find the <a href="https://github.com/RedPillNow/now-context" target="_blank" rel="noopener">now-context element</a> on GitHub.</p>
  1853. <p>I hope you find this element useful or at least is a source of ideas to create your own solution. Until next time&#8230; Happy Coding!</p>
  1854.  
  1855. <style>
  1856. .huge-it-share-buttons {
  1857. border:0px solid #0FB5D6;
  1858. border-radius:5px;
  1859. background:#3BD8FF;
  1860. text-align:right; }
  1861.  
  1862. #huge-it-share-buttons-top {margin-bottom:0px;}
  1863. #huge-it-share-buttons-bottom {margin-top:0px;}
  1864.  
  1865. .huge-it-share-buttons h3 {
  1866. font-size:25px ;
  1867. font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
  1868. color:#666666;
  1869.  
  1870. display:block; line-height:25px ;
  1871.  
  1872. text-align:right; }
  1873.  
  1874. .huge-it-share-buttons ul {
  1875. float:right; }
  1876.  
  1877. .huge-it-share-buttons ul li {
  1878. margin-left:3px;
  1879. margin-right:3px;
  1880. padding:0px;
  1881. border:0px ridge #E6354C;
  1882. border-radius:11px;
  1883. background-color:#14CC9B;
  1884. }
  1885.  
  1886. .huge-it-share-buttons ul li #backforunical844 {
  1887. border-bottom: 0;
  1888. background-image:url('http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/buttons.20.png');
  1889. width:20px;
  1890. height:20px;
  1891. }
  1892.  
  1893. .front-shares-count {
  1894. position: absolute;
  1895. text-align: center;
  1896. display: block;
  1897. }
  1898.  
  1899. .shares_size20 .front-shares-count {
  1900. font-size: 10px;
  1901. top: 10px;
  1902. width: 20px;
  1903. }
  1904.  
  1905. .shares_size30 .front-shares-count {
  1906. font-size: 11px;
  1907. top: 15px;
  1908. width: 30px;
  1909. }
  1910.  
  1911. .shares_size40 .front-shares-count {
  1912. font-size: 12px;
  1913. top: 21px;
  1914. width: 40px;
  1915. }
  1916. </style>
  1917. <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
  1918. <h3>Share This:</h3>
  1919. <ul class="huge-it-share-buttons-list ">
  1920. <li class="nobackground " >
  1921.  
  1922. <a id="backforunical844" 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 -80px "></a>
  1923. </li>
  1924. <li class="nobackground " >
  1925.  
  1926. <a id="backforunical844" href="https://twitter.com/share?status=keithstric.me/feed/&text=now-context: Opensource Project"  onclick="javascript:void window.open('https://twitter.com/share?status=keithstric.me/feed/&text=now-context: Opensource Project','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: -20px -80px "></a>
  1927. </li>
  1928. <li class="none nobackground " >
  1929.  
  1930. <a id="backforunical844" 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=now-context: Opensource Project"  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=now-context: Opensource Project','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: -40px -80px "></a>
  1931. </li>
  1932. <li class="nobackground " >
  1933.  
  1934. <a id="backforunical844" 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: -60px -80px "></a>
  1935. </li>
  1936. <li class="nobackground " >
  1937.  
  1938. <a id="backforunical844" href="https://www.linkedin.com/shareArticle?title=now-context: Opensource Project&mini=true&url=http://keithstric.me/feed/"  onclick="javascript:void window.open('https://www.linkedin.com/shareArticle?title=now-context: Opensource Project&mini=true&url=http://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: -80px -80px "></a>
  1939. </li>
  1940. <li class="nobackground " >
  1941.  
  1942. <a id="backforunical844" href="https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=now-context: Opensource Project"  onclick="javascript:void window.open('https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=now-context: Opensource Project','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: -100px -80px "></a>
  1943. </li>
  1944. <li class="nobackground " >
  1945.  
  1946. <a id="backforunical844" href="http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=now-context: Opensource Project"  onclick="javascript:void window.open('http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=now-context: Opensource Project','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 -80px "></a>
  1947. </li>
  1948. <li class="nobackground " >
  1949.  
  1950. <a id="backforunical844" href="http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=now-context: Opensource Project"  onclick="javascript:void window.open('http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=now-context: Opensource Project','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: -140px -80px "></a>
  1951. </li>
  1952. <li class="none nobackground " >
  1953.  
  1954. <a id="backforunical844" 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: -160px -80px "></a>
  1955. </li>
  1956. <li class="none nobackground " >
  1957.  
  1958. <a id="backforunical844" href="http://vk.com/share.php?url=keithstric.me/feed/&title=now-context: Opensource Project"  onclick="javascript:void window.open('http://vk.com/share.php?url=keithstric.me/feed/&title=now-context: Opensource Project','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 -80px "></a>
  1959. </li>
  1960. <li class="none nobackground " >
  1961.  
  1962. <a id="backforunical844" href="http://www.reddit.com/submit?url=keithstric.me/feed/&title=now-context: Opensource Project"  onclick="javascript:void window.open('http://www.reddit.com/submit?url=keithstric.me/feed/&title=now-context: Opensource Project','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: -200px -80px "></a>
  1963. </li>
  1964. <li class="none nobackground " >
  1965.  
  1966. <a id="backforunical844" 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: -220px -80px "></a>
  1967. </li>
  1968. <li class="none nobackground " >
  1969.  
  1970. <a id="backforunical844" href="https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=now-context: Opensource Project"  onclick="javascript:void window.open('https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=now-context: Opensource Project','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 -80px "></a>
  1971. </li>
  1972. <li class="none nobackground " >
  1973.  
  1974. <a id="backforunical844" 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: -260px -80px "></a>
  1975. </li>
  1976. <li class="none nobackground " >
  1977.  
  1978. <a id="backforunical844" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=now-context: Opensource Project"  onclick="javascript:void window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=now-context: Opensource Project','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: -280px -80px "></a>
  1979. </li>
  1980. <li class="none nobackground " >
  1981.  
  1982. <a id="backforunical844" href="http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=now-context: Opensource Project&pic=&ralateUid=&"  onclick="javascript:void window.open('http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=now-context: Opensource Project&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: -300px -80px "></a>
  1983. </li>
  1984. <li class="none nobackground " >
  1985.  
  1986. <a id="backforunical844" href="http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=now-context: Opensource Project"  onclick="javascript:void window.open('http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=now-context: Opensource Project','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: -320px -80px "></a>
  1987. </li>
  1988. <li class="none nobackground " >
  1989.  
  1990. <a id="backforunical844" href="http://n4g.com/tips?url=keithstric.me/feed/&title=now-context: Opensource Project"  onclick="javascript:void window.open('http://n4g.com/tips?url=keithstric.me/feed/&title=now-context: Opensource Project','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: -340px -80px "></a>
  1991. </li>
  1992. </ul>
  1993. <div class="clear"></div>
  1994. </div>
  1995. ]]></content:encoded>
  1996. </item>
  1997. <item>
  1998. <title>Thoughts on TypeScript</title>
  1999. <link>http://keithstric.me/2017/09/06/thoughts-on-typescript/</link>
  2000. <pubDate>Wed, 06 Sep 2017 21:25:51 +0000</pubDate>
  2001. <dc:creator><![CDATA[Keith Strickland]]></dc:creator>
  2002. <category><![CDATA[JavaScript]]></category>
  2003. <category><![CDATA[Technology]]></category>
  2004. <category><![CDATA[TypeScript]]></category>
  2005.  
  2006. <guid isPermaLink="false">http://keithstric.me/?p=805</guid>
  2007. <description><![CDATA[<p>Over the past few months I&#8217;ve started working pretty extensively with TypeScript. For those of you who don&#8217;t know what TypeScript is:</p>
  2008. <p>TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.</p>
  2009. <p>It provides strong types to JavaScript. It allows for the creation of classes and enforces those classes in your code. If you define a Redpill.Widget class, you can then use that class in your code and the editor enforces the rules you define within that class.</p> <a href="http://keithstric.me/2017/09/06/thoughts-on-typescript/" class="more-link pull-right" rel="bookmark">Continue Reading</a>]]></description>
  2010. <content:encoded><![CDATA[<p>Over the past few months I&#8217;ve started working pretty extensively with TypeScript. For those of you who don&#8217;t know what TypeScript is:</p>
  2011. <blockquote><p>TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.</p></blockquote>
  2012. <p>It provides strong types to JavaScript. It allows for the creation of classes and enforces those classes in your code. If you define a Redpill.Widget class, you can then use that class in your code and the editor enforces the rules you define within that class. For example, if you define a findFoo method that accepts a string. If you attempt to pass a number to findFoo your editor will complain about it.</p>
  2013. <p>To me, TypeScript feels a lot like Java. There are a lot of the same paradigms and ideas around the things you can create (Enum, Interface, Map, Class, etc). The use of TypeScript doesn&#8217;t mean you&#8217;ve wasted your time learning JavaScript. On the contrary, your time learning JavaScript has been leading you to TypeScript. Everything you&#8217;ve learned about JavaScript translates to TypeScript, because at the end of the day, TypeScript IS JavaScript, just with a lot of structure around it.</p>
  2014. <p>One of the benefits of using TypeScript is you can now get rid of your linters. Yes linters have their place, however since we&#8217;re not more strongly typing our JavaScript and TypeScript provides more editor niceties, we really no longer need a linter. I would say the only linter you really need once you move to TypeScript is a JSCS configuration to enforce your coding styles.</p>
  2015. <p>With the tight editor integration you also get really smart typeahead support. This makes writing code much easier and also provides your editor a means of navigating to class, method and property definitions with a click of the mouse, even if they reside in other files. You also get your linting done <em>as you write your code</em>. Almost all of the current text editors have a TypeScript plugin to provide this sort of support.</p>
  2016. <p>My experience so far is that I like it, a lot. I can now create model classes that deal with a single thing. I can also define interfaces and have proper class extension. My editor then informs me of the properties and methods of that class or interface as I&#8217;m using it, which is a really big deal in my eyes. Yes, I could create a model class with JavaScript, but it really isn&#8217;t extendable. I can extend my model classes or create abstract classes and interfaces, which I really couldn&#8217;t do with JavaScript (at least not at my current skill level). TypeScript is highly scalable and is intended for large projects where JavaScript really was never intended for really large projects as it&#8217;s a scripting language.</p>
  2017. <p>If you have the time and are wanting to learn something new, take a look at TypeScript. I think you&#8217;ll find it easy to transition to in place of JavaScript (well it is JavaScript). The features you get while writing code are just excellent and quite a pleasure to work with.</p>
  2018. <p>Until next time&#8230;. Happy Coding</p>
  2019. <p>Here&#8217;s an introductory video <a href="https://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript" target="_blank" rel="noopener">https://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript</a></p>
  2020.  
  2021. <style>
  2022. .huge-it-share-buttons {
  2023. border:0px solid #0FB5D6;
  2024. border-radius:5px;
  2025. background:#3BD8FF;
  2026. text-align:right; }
  2027.  
  2028. #huge-it-share-buttons-top {margin-bottom:0px;}
  2029. #huge-it-share-buttons-bottom {margin-top:0px;}
  2030.  
  2031. .huge-it-share-buttons h3 {
  2032. font-size:25px ;
  2033. font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
  2034. color:#666666;
  2035.  
  2036. display:block; line-height:25px ;
  2037.  
  2038. text-align:right; }
  2039.  
  2040. .huge-it-share-buttons ul {
  2041. float:right; }
  2042.  
  2043. .huge-it-share-buttons ul li {
  2044. margin-left:3px;
  2045. margin-right:3px;
  2046. padding:0px;
  2047. border:0px ridge #E6354C;
  2048. border-radius:11px;
  2049. background-color:#14CC9B;
  2050. }
  2051.  
  2052. .huge-it-share-buttons ul li #backforunical805 {
  2053. border-bottom: 0;
  2054. background-image:url('http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/buttons.20.png');
  2055. width:20px;
  2056. height:20px;
  2057. }
  2058.  
  2059. .front-shares-count {
  2060. position: absolute;
  2061. text-align: center;
  2062. display: block;
  2063. }
  2064.  
  2065. .shares_size20 .front-shares-count {
  2066. font-size: 10px;
  2067. top: 10px;
  2068. width: 20px;
  2069. }
  2070.  
  2071. .shares_size30 .front-shares-count {
  2072. font-size: 11px;
  2073. top: 15px;
  2074. width: 30px;
  2075. }
  2076.  
  2077. .shares_size40 .front-shares-count {
  2078. font-size: 12px;
  2079. top: 21px;
  2080. width: 40px;
  2081. }
  2082. </style>
  2083. <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
  2084. <h3>Share This:</h3>
  2085. <ul class="huge-it-share-buttons-list ">
  2086. <li class="nobackground " >
  2087.  
  2088. <a id="backforunical805" 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 -80px "></a>
  2089. </li>
  2090. <li class="nobackground " >
  2091.  
  2092. <a id="backforunical805" href="https://twitter.com/share?status=keithstric.me/feed/&text=Thoughts on TypeScript"  onclick="javascript:void window.open('https://twitter.com/share?status=keithstric.me/feed/&text=Thoughts on TypeScript','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: -20px -80px "></a>
  2093. </li>
  2094. <li class="none nobackground " >
  2095.  
  2096. <a id="backforunical805" 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=Thoughts on TypeScript"  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=Thoughts on TypeScript','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: -40px -80px "></a>
  2097. </li>
  2098. <li class="nobackground " >
  2099.  
  2100. <a id="backforunical805" 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: -60px -80px "></a>
  2101. </li>
  2102. <li class="nobackground " >
  2103.  
  2104. <a id="backforunical805" href="https://www.linkedin.com/shareArticle?title=Thoughts on TypeScript&mini=true&url=http://keithstric.me/feed/"  onclick="javascript:void window.open('https://www.linkedin.com/shareArticle?title=Thoughts on TypeScript&mini=true&url=http://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: -80px -80px "></a>
  2105. </li>
  2106. <li class="nobackground " >
  2107.  
  2108. <a id="backforunical805" href="https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Thoughts on TypeScript"  onclick="javascript:void window.open('https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Thoughts on TypeScript','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: -100px -80px "></a>
  2109. </li>
  2110. <li class="nobackground " >
  2111.  
  2112. <a id="backforunical805" href="http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Thoughts on TypeScript"  onclick="javascript:void window.open('http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Thoughts on TypeScript','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 -80px "></a>
  2113. </li>
  2114. <li class="nobackground " >
  2115.  
  2116. <a id="backforunical805" href="http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Thoughts on TypeScript"  onclick="javascript:void window.open('http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Thoughts on TypeScript','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: -140px -80px "></a>
  2117. </li>
  2118. <li class="none nobackground " >
  2119.  
  2120. <a id="backforunical805" 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: -160px -80px "></a>
  2121. </li>
  2122. <li class="none nobackground " >
  2123.  
  2124. <a id="backforunical805" href="http://vk.com/share.php?url=keithstric.me/feed/&title=Thoughts on TypeScript"  onclick="javascript:void window.open('http://vk.com/share.php?url=keithstric.me/feed/&title=Thoughts on TypeScript','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 -80px "></a>
  2125. </li>
  2126. <li class="none nobackground " >
  2127.  
  2128. <a id="backforunical805" href="http://www.reddit.com/submit?url=keithstric.me/feed/&title=Thoughts on TypeScript"  onclick="javascript:void window.open('http://www.reddit.com/submit?url=keithstric.me/feed/&title=Thoughts on TypeScript','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: -200px -80px "></a>
  2129. </li>
  2130. <li class="none nobackground " >
  2131.  
  2132. <a id="backforunical805" 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: -220px -80px "></a>
  2133. </li>
  2134. <li class="none nobackground " >
  2135.  
  2136. <a id="backforunical805" href="https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Thoughts on TypeScript"  onclick="javascript:void window.open('https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Thoughts on TypeScript','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 -80px "></a>
  2137. </li>
  2138. <li class="none nobackground " >
  2139.  
  2140. <a id="backforunical805" 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: -260px -80px "></a>
  2141. </li>
  2142. <li class="none nobackground " >
  2143.  
  2144. <a id="backforunical805" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Thoughts on TypeScript"  onclick="javascript:void window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Thoughts on TypeScript','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: -280px -80px "></a>
  2145. </li>
  2146. <li class="none nobackground " >
  2147.  
  2148. <a id="backforunical805" href="http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Thoughts on TypeScript&pic=&ralateUid=&"  onclick="javascript:void window.open('http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Thoughts on TypeScript&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: -300px -80px "></a>
  2149. </li>
  2150. <li class="none nobackground " >
  2151.  
  2152. <a id="backforunical805" href="http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Thoughts on TypeScript"  onclick="javascript:void window.open('http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Thoughts on TypeScript','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: -320px -80px "></a>
  2153. </li>
  2154. <li class="none nobackground " >
  2155.  
  2156. <a id="backforunical805" href="http://n4g.com/tips?url=keithstric.me/feed/&title=Thoughts on TypeScript"  onclick="javascript:void window.open('http://n4g.com/tips?url=keithstric.me/feed/&title=Thoughts on TypeScript','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: -340px -80px "></a>
  2157. </li>
  2158. </ul>
  2159. <div class="clear"></div>
  2160. </div>
  2161. ]]></content:encoded>
  2162. </item>
  2163. <item>
  2164. <title>Replacing Lotus is&#8230;. complex</title>
  2165. <link>http://keithstric.me/2017/09/01/replacing-lotus-is-complex/</link>
  2166. <pubDate>Fri, 01 Sep 2017 21:44:47 +0000</pubDate>
  2167. <dc:creator><![CDATA[Keith Strickland]]></dc:creator>
  2168. <category><![CDATA[Domino]]></category>
  2169. <category><![CDATA[Java]]></category>
  2170. <category><![CDATA[JavaScript]]></category>
  2171. <category><![CDATA[Modernization]]></category>
  2172. <category><![CDATA[Red Pill]]></category>
  2173.  
  2174. <guid isPermaLink="false">http://keithstric.me/?p=815</guid>
  2175. <description><![CDATA[<p>If you followed Peter&#8217;s series on replacing Lotus he outlined some of the pitfalls, processes and decision points to undertake for success. I wanted to point out the technical side to a lot of those decisions. The short answer is that you need a tool to surface your domino data en-masse until such a time when decisions are made on each application. I have been working on that solution for quite some time now and I have to say,</p> <a href="http://keithstric.me/2017/09/01/replacing-lotus-is-complex/" class="more-link pull-right" rel="bookmark">Continue Reading</a>]]></description>
  2176. <content:encoded><![CDATA[<p>If you followed Peter&#8217;s series on replacing Lotus he outlined some of the pitfalls, processes and decision points to undertake for success. I wanted to point out the technical side to a lot of those decisions. The short answer is that you need a tool to surface your domino data en-masse until such a time when decisions are made on each application. I have been working on that solution for quite some time now and I have to say, it&#8217;s complex.</p>
  2177. <p>First you need to make a fundamental decision. Are you going to do this yourself or hire someone? Next question&#8230;Are you going to provide fidelity to the original Notes apps or not? If so, your life just got much more difficult, stressful and confusing (and/or expensive). Also, what logic can be saved from each application if any? Making that determination in itself can be complicated because you need a way to tell if code is being used or not. How common is the code? Is it being used all over the place or just in one application? Can it be ported to Java? If it&#8217;s already in Java you&#8217;re a step ahead. So, you need some type of forensics tool.</p>
  2178. <p>Now that you&#8217;ve made a few key decisions, next up you need a REST service to surface your domino data. All modern JavaScript frameworks rely on REST services (unless you go down the server side rendering path, but that too has it&#8217;s complications and needs). Unless you&#8217;re going to modify the design of all these apps to fit whatever solution you put in place, you&#8217;ll need a structure for storing/producing rendering information. This is information that client side JavaScript reads and then builds a dynamic UI based on that rendering information. With that, you&#8217;ll also need a tool to produce, configure and maintain that rendering information. Oh, and almost forgot, your forensics tool should also produce a &#8220;base level&#8221; of rendering information informed from the design of the applications encountered. The level of effort and commitment at this point is already very high and you aren&#8217;t even close to rendering anything for a user yet. But you have a butt load of data about your infrastructure.</p>
  2179. <p>Once you have a REST service and a place to store rendering information and a tool to produce, configure and maintain that rendering information you can start writing the code to render data from domino. This probably will need the consultation of a good Designer. Let&#8217;s face it, we&#8217;re good at writing code, but not very good at producing UIs which are intuitive, functional, maintainable and pretty. A Designer will help you immensely with this piece. The upside here is that you can develop pieces of this app that will be reused everywhere, because pretty much all domino apps have the same characteristics (i.e. Views, Forms and Documents). So you develop a &#8220;View&#8221; component, &#8220;Document&#8221; component and you modify the form with the tool you produced to maintain rendering information.</p>
  2180. <p>Now that we&#8217;re able to start rendering data from our domino apps, you need to answer some very fundamental questions about which views you&#8217;re gonna surface and what exactly are you going to allow users to do. Oh yeah, and you&#8217;ll need a tool so that someone can maintain this configuration. But other decisions to be made: Will they have permission to edit documents? If so, what about workflow? Since you&#8217;re now moving from the realm of Notes/Domino and into the Web Realm, what are you going to do about the fields presented for editing that data? Do you want/need name pickers, value pickers, multi-value fields, date pickers, time pickers, etc.? All of these affect the complexity. If you&#8217;re not going to enable editing, your life just got somewhat simpler, but not a whole lot. But let&#8217;s assume you decided to enable editing (you&#8217;re gonna need a bigger can for those worms).</p>
  2181. <p>With the decision that you will allow editing of documents, now you need another tool for configuring fields. This field configuration tool needs to allow you to see and change field types (i.e. Text, Number, Telephone, Url, Email, Name, etc.), since now we&#8217;re on the web it&#8217;s important. This alone is complex enough because in a Domino app you can put a string in a date field, you can put a date in a text field, you can have empty values and all kinds of nonsense. Field typing in Notes was not enforced. So, a lot of thought needs to go into how your fields are rendered and if there are any fields which are linked or dependent on another field (i.e. comboboxes whose keywords change based on the value of other fields). So your field configuration tool needs to be aware of a lot of different things and be able to maintain that rendering information.</p>
  2182. <p>Once you can configure the fields found on a form/document we&#8217;re now ready to start creating or stealing and modifying all the different pickers we&#8217;re gonna need. We also need to take into consideration field value validation. Also, do we save changed documents every time you edit a field or when a save or submit button is clicked? There are several valid arguments to either paradigm. Once we have all of our field types in place, we need to be able to logically determine what type of field we render for each item on a document. This alone is complex and you need to be extremely mindful of performance here because following the path of least resistance will probably mean you have a butt ton of code to run and performance can suffer tremendously. I&#8217;ve only mentioned some of the hurdles you&#8217;ll need to overcome to render a document, but as you can see, it&#8217;s complex and we haven&#8217;t even thought about workflow yet or rich text (I&#8217;m gonna skip rich text all together, it&#8217;s complex).</p>
  2183. <p>So, what about workflow, what choices do we have? Well, there are a couple: 1) We can move ALL of the code found in our original app into agents that can be run from the web and execute workflow that way. We just need to take into account document changes and UI operations. 2) We can port this code to Java and make it possible to tie into our REST service, which is probably the easiest solution here. Why would I say that? Because it is the easiest solution. When we move all that existing code into agents, now we have a lot of references that will need to be hard coded in order to call those agents. Hard coding things makes it almost impossible to make it dynamic in the future, so by doing the porting to Java now, you&#8217;re actually saving yourself time in the future. Not to mention you&#8217;re moving your code to a language that has a future and can move to another platform for the most part.</p>
  2184. <p>I&#8217;ve left a lot out a lot of the decisions you need to make if you&#8217;re going to replace Lotus with something else. Peter&#8217;s series covers these in quite some detail, but I wanted to point out the technical complexities of the task. I also wanted to re-iterate that there is no magic button, nor will there ever be one. The problems are too complex to solve easily. We can create tools that address 80% of your application portfolio, but the other 20% is complex.</p>
  2185. <p>Until next time&#8230;. Happy Coding</p>
  2186.  
  2187. <style>
  2188. .huge-it-share-buttons {
  2189. border:0px solid #0FB5D6;
  2190. border-radius:5px;
  2191. background:#3BD8FF;
  2192. text-align:right; }
  2193.  
  2194. #huge-it-share-buttons-top {margin-bottom:0px;}
  2195. #huge-it-share-buttons-bottom {margin-top:0px;}
  2196.  
  2197. .huge-it-share-buttons h3 {
  2198. font-size:25px ;
  2199. font-family:Arial,Helvetica Neue,Helvetica,sans-serif;
  2200. color:#666666;
  2201.  
  2202. display:block; line-height:25px ;
  2203.  
  2204. text-align:right; }
  2205.  
  2206. .huge-it-share-buttons ul {
  2207. float:right; }
  2208.  
  2209. .huge-it-share-buttons ul li {
  2210. margin-left:3px;
  2211. margin-right:3px;
  2212. padding:0px;
  2213. border:0px ridge #E6354C;
  2214. border-radius:11px;
  2215. background-color:#14CC9B;
  2216. }
  2217.  
  2218. .huge-it-share-buttons ul li #backforunical815 {
  2219. border-bottom: 0;
  2220. background-image:url('http://keithstric.me/wp-content/plugins/wp-share-buttons/Front_end/../images/buttons.20.png');
  2221. width:20px;
  2222. height:20px;
  2223. }
  2224.  
  2225. .front-shares-count {
  2226. position: absolute;
  2227. text-align: center;
  2228. display: block;
  2229. }
  2230.  
  2231. .shares_size20 .front-shares-count {
  2232. font-size: 10px;
  2233. top: 10px;
  2234. width: 20px;
  2235. }
  2236.  
  2237. .shares_size30 .front-shares-count {
  2238. font-size: 11px;
  2239. top: 15px;
  2240. width: 30px;
  2241. }
  2242.  
  2243. .shares_size40 .front-shares-count {
  2244. font-size: 12px;
  2245. top: 21px;
  2246. width: 40px;
  2247. }
  2248. </style>
  2249. <div id="huge-it-share-buttons-top" class="huge-it-share-buttons nobackground">
  2250. <h3>Share This:</h3>
  2251. <ul class="huge-it-share-buttons-list ">
  2252. <li class="nobackground " >
  2253.  
  2254. <a id="backforunical815" 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 -80px "></a>
  2255. </li>
  2256. <li class="nobackground " >
  2257.  
  2258. <a id="backforunical815" href="https://twitter.com/share?status=keithstric.me/feed/&text=Replacing Lotus is&#8230;. complex"  onclick="javascript:void window.open('https://twitter.com/share?status=keithstric.me/feed/&text=Replacing Lotus is&#8230;. complex','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: -20px -80px "></a>
  2259. </li>
  2260. <li class="none nobackground " >
  2261.  
  2262. <a id="backforunical815" 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=Replacing Lotus is&#8230;. complex"  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=Replacing Lotus is&#8230;. complex','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: -40px -80px "></a>
  2263. </li>
  2264. <li class="nobackground " >
  2265.  
  2266. <a id="backforunical815" 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: -60px -80px "></a>
  2267. </li>
  2268. <li class="nobackground " >
  2269.  
  2270. <a id="backforunical815" href="https://www.linkedin.com/shareArticle?title=Replacing Lotus is&#8230;. complex&mini=true&url=http://keithstric.me/feed/"  onclick="javascript:void window.open('https://www.linkedin.com/shareArticle?title=Replacing Lotus is&#8230;. complex&mini=true&url=http://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: -80px -80px "></a>
  2271. </li>
  2272. <li class="nobackground " >
  2273.  
  2274. <a id="backforunical815" href="https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Replacing Lotus is&#8230;. complex"  onclick="javascript:void window.open('https://www.tumblr.com/share/link?url=keithstric.me/feed/&name=Replacing Lotus is&#8230;. complex','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: -100px -80px "></a>
  2275. </li>
  2276. <li class="nobackground " >
  2277.  
  2278. <a id="backforunical815" href="http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Replacing Lotus is&#8230;. complex"  onclick="javascript:void window.open('http://digg.com/submit?phase=2&url=keithstric.me/feed/&title=Replacing Lotus is&#8230;. complex','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 -80px "></a>
  2279. </li>
  2280. <li class="nobackground " >
  2281.  
  2282. <a id="backforunical815" href="http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Replacing Lotus is&#8230;. complex"  onclick="javascript:void window.open('http://www.stumbleupon.com/submit?url=keithstric.me/feed/&title=Replacing Lotus is&#8230;. complex','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: -140px -80px "></a>
  2283. </li>
  2284. <li class="none nobackground " >
  2285.  
  2286. <a id="backforunical815" 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: -160px -80px "></a>
  2287. </li>
  2288. <li class="none nobackground " >
  2289.  
  2290. <a id="backforunical815" href="http://vk.com/share.php?url=keithstric.me/feed/&title=Replacing Lotus is&#8230;. complex"  onclick="javascript:void window.open('http://vk.com/share.php?url=keithstric.me/feed/&title=Replacing Lotus is&#8230;. complex','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 -80px "></a>
  2291. </li>
  2292. <li class="none nobackground " >
  2293.  
  2294. <a id="backforunical815" href="http://www.reddit.com/submit?url=keithstric.me/feed/&title=Replacing Lotus is&#8230;. complex"  onclick="javascript:void window.open('http://www.reddit.com/submit?url=keithstric.me/feed/&title=Replacing Lotus is&#8230;. complex','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: -200px -80px "></a>
  2295. </li>
  2296. <li class="none nobackground " >
  2297.  
  2298. <a id="backforunical815" 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: -220px -80px "></a>
  2299. </li>
  2300. <li class="none nobackground " >
  2301.  
  2302. <a id="backforunical815" href="https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Replacing Lotus is&#8230;. complex"  onclick="javascript:void window.open('https://delicious.com/save?v=5&noui&jump=close&url=keithstric.me/feed/&title=Replacing Lotus is&#8230;. complex','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 -80px "></a>
  2303. </li>
  2304. <li class="none nobackground " >
  2305.  
  2306. <a id="backforunical815" 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: -260px -80px "></a>
  2307. </li>
  2308. <li class="none nobackground " >
  2309.  
  2310. <a id="backforunical815" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Replacing Lotus is&#8230;. complex"  onclick="javascript:void window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=keithstric.me/feed/&title=Replacing Lotus is&#8230;. complex','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: -280px -80px "></a>
  2311. </li>
  2312. <li class="none nobackground " >
  2313.  
  2314. <a id="backforunical815" href="http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Replacing Lotus is&#8230;. complex&pic=&ralateUid=&"  onclick="javascript:void window.open('http://service.weibo.com/share/share.php?url=keithstric.me/feed/&appkey=&title=Replacing Lotus is&#8230;. complex&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: -300px -80px "></a>
  2315. </li>
  2316. <li class="none nobackground " >
  2317.  
  2318. <a id="backforunical815" href="http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Replacing Lotus is&#8230;. complex"  onclick="javascript:void window.open('http://widget.renren.com/dialog/share?resourceUrl=keithstric.me/feed/&srcUrl=keithstric.me/feed/&title=Replacing Lotus is&#8230;. complex','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: -320px -80px "></a>
  2319. </li>
  2320. <li class="none nobackground " >
  2321.  
  2322. <a id="backforunical815" href="http://n4g.com/tips?url=keithstric.me/feed/&title=Replacing Lotus is&#8230;. complex"  onclick="javascript:void window.open('http://n4g.com/tips?url=keithstric.me/feed/&title=Replacing Lotus is&#8230;. complex','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: -340px -80px "></a>
  2323. </li>
  2324. </ul>
  2325. <div class="clear"></div>
  2326. </div>
  2327. ]]></content:encoded>
  2328. </item>
  2329. </channel>
  2330. </rss>
  2331.  

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