tag:blogger.com,1999:blog-75746355048570773522024-02-19T19:55:30.253+05:30Ravish Web Designerravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.comBlogger44125tag:blogger.com,1999:blog-7574635504857077352.post-87013487850340802092023-11-30T17:12:00.006+05:302023-11-30T17:12:39.894+05:30Pair check in Javascript<p> </p><pre class="prettyprint notranslate prettyprinted" style="-webkit-text-stroke-width: 0px; background: rgb(238, 238, 238) !important; border-radius: 5px; border: 1px solid rgb(136, 136, 136); box-sizing: border-box; color: black; font-family: monospace, Consolas, Courier; font-feature-settings: inherit; font-kerning: inherit; font-optical-sizing: inherit; font-size: medium; font-stretch: inherit; font-style: normal; font-variant-alternates: inherit; font-variant-caps: normal; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; font-variant-position: inherit; font-variation-settings: inherit; font-weight: 400; letter-spacing: normal; line-height: inherit; margin: 1rem 0px; orphans: 2; overflow: auto; padding: 2px; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-decoration-thickness: initial; text-indent: 0px; text-transform: none; widows: 2; width: 641.65px; word-spacing: 0px;"><span class="kwd" style="box-sizing: border-box; color: #000088; font: inherit; margin: 0px; padding: 0px;">const</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> arr </span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">=</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> </span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">[</span><span class="lit" style="box-sizing: border-box; color: #006666; font: inherit; margin: 0px; padding: 0px;">1</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">,</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> </span><span class="lit" style="box-sizing: border-box; color: #006666; font: inherit; margin: 0px; padding: 0px;">5</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">,</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> </span><span class="lit" style="box-sizing: border-box; color: #006666; font: inherit; margin: 0px; padding: 0px;">2</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">,</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> </span><span class="lit" style="box-sizing: border-box; color: #006666; font: inherit; margin: 0px; padding: 0px;">1</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">,</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> </span><span class="lit" style="box-sizing: border-box; color: #006666; font: inherit; margin: 0px; padding: 0px;">6</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">,</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> </span><span class="lit" style="box-sizing: border-box; color: #006666; font: inherit; margin: 0px; padding: 0px;">2</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">,</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> </span><span class="lit" style="box-sizing: border-box; color: #006666; font: inherit; margin: 0px; padding: 0px;">2</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">,</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> </span><span class="lit" style="box-sizing: border-box; color: #006666; font: inherit; margin: 0px; padding: 0px;">9</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">];</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">
</span><span class="kwd" style="box-sizing: border-box; color: #000088; font: inherit; margin: 0px; padding: 0px;">const</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> countPairs </span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">=</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> </span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">(</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">arr </span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">=</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> </span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">[])</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> </span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">=></span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> </span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">{</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">
</span><span class="kwd" style="box-sizing: border-box; color: #000088; font: inherit; margin: 0px; padding: 0px;">const</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> </span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">{</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> length </span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">}</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> </span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">=</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> arr</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">;</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">
</span><span class="kwd" style="box-sizing: border-box; color: #000088; font: inherit; margin: 0px; padding: 0px;">let</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> count </span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">=</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> </span><span class="lit" style="box-sizing: border-box; color: #006666; font: inherit; margin: 0px; padding: 0px;">0</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">;</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">
</span><span class="com" style="box-sizing: border-box; color: #880000; font: inherit; margin: 0px; padding: 0px;">// making a shallow copy so that the original array remains unaltered</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">
</span><span class="kwd" style="box-sizing: border-box; color: #000088; font: inherit; margin: 0px; padding: 0px;">const</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> copy </span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">=</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> arr</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">.</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">slice</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">();</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">
copy</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">.</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">sort</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">((</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">a</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">,</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> b</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">)</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> </span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">=></span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> a </span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">-</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> b</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">);</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">
</span><span class="kwd" style="box-sizing: border-box; color: #000088; font: inherit; margin: 0px; padding: 0px;">for</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">(</span><span class="kwd" style="box-sizing: border-box; color: #000088; font: inherit; margin: 0px; padding: 0px;">let</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> i </span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">=</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> </span><span class="lit" style="box-sizing: border-box; color: #006666; font: inherit; margin: 0px; padding: 0px;">0</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">;</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> i </span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;"><</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> length</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">;</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> i</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">++){</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">
</span><span class="kwd" style="box-sizing: border-box; color: #000088; font: inherit; margin: 0px; padding: 0px;">if</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">(</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">copy</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">[</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">i</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">]</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> </span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">===</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> copy</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">[</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">i </span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">+</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> </span><span class="lit" style="box-sizing: border-box; color: #006666; font: inherit; margin: 0px; padding: 0px;">1</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">]){</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">
i</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">++;</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">
count</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">++;</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">
</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">};</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">
</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">};</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">
</span><span class="kwd" style="box-sizing: border-box; color: #000088; font: inherit; margin: 0px; padding: 0px;">return</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;"> count</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">;</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">
</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">};</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">
console</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">.</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">log</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">(</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">countPairs</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">(</span><span class="pln" style="box-sizing: border-box; color: black; font: inherit; margin: 0px; padding: 0px;">arr</span><span class="pun" style="box-sizing: border-box; color: #666600; font: inherit; margin: 0px; padding: 0px;">));</span></pre>ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-89756102162214786082023-01-04T12:29:00.003+05:302023-01-06T00:00:48.898+05:30JavaScript Array cheat Sheet <p> </p><h2 style="background-color: white; box-sizing: inherit; font-family: "Segoe UI", Arial, sans-serif; font-size: 32px; font-weight: 400; margin: 10px 0px;">JavaScript Array</h2><table class="ws-table-all notranslate" style="background-color: white; border-collapse: collapse; border-spacing: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: inherit; color: black; font-family: Verdana, sans-serif; font-size: 15px; margin: 20px 0px; width: 1017.66px;"><tbody style="box-sizing: inherit;"><tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><th style="box-sizing: inherit; padding: 8px 8px 8px 16px; text-align: left; vertical-align: top;">Name</th><th style="box-sizing: inherit; padding: 8px; text-align: left; vertical-align: top;">Description</th></tr><tr style="background-color: #e7e9eb; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;"><span style="box-sizing: inherit;">concat()</span></td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Joins arrays and returns an array with the joined arrays </td></tr><tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">constructor</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Returns the function that created the Array object's prototype</td></tr><tr style="background-color: #e7e9eb; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;"><span style="box-sizing: inherit;">copyWithin()</span></td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Copies array elements within the array, to and from specified positions</td></tr><tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;"><span style="box-sizing: inherit;">entries()</span></td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Returns a key/value pair Array Iteration Object </td></tr><tr style="background-color: #e7e9eb; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">every()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Checks if every element in an array pass a test <i style="background-color: white; box-sizing: inherit; font-family: Consolas, Menlo, "courier new", monospace;">array</i><span style="background-color: white; font-family: Consolas, Menlo, "courier new", monospace;">.every(</span><em style="background-color: white; box-sizing: inherit; font-family: Consolas, Menlo, "courier new", monospace;">function(currentValue, index, arr), thisValue</em><span style="background-color: white; font-family: Consolas, Menlo, "courier new", monospace;">)</span></td></tr><tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">fill()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Fill the elements in an array with a static value <i style="box-sizing: inherit; font-family: Consolas, Menlo, "courier new", monospace;">array</i><span style="font-family: Consolas, Menlo, "courier new", monospace;">.fill(</span><em style="box-sizing: inherit; font-family: Consolas, Menlo, "courier new", monospace;">value, start, end</em><span style="font-family: Consolas, Menlo, "courier new", monospace;">)</span></td></tr><tr style="background-color: #e7e9eb; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">filter()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Creates a new array with every element in an array that pass a test <i style="background-color: white; box-sizing: inherit; font-family: Consolas, Menlo, "courier new", monospace;">array</i><span style="background-color: white; font-family: Consolas, Menlo, "courier new", monospace;">.filter(</span><em style="background-color: white; box-sizing: inherit; font-family: Consolas, Menlo, "courier new", monospace;">function(currentValue, index, arr), thisValue</em><span style="background-color: white; font-family: Consolas, Menlo, "courier new", monospace;">)</span></td></tr><tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">find()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Returns the value of the first element in an array that pass a test <i style="box-sizing: inherit; font-family: Consolas, Menlo, "courier new", monospace;">array</i><span style="font-family: Consolas, Menlo, "courier new", monospace;">.find(</span><em style="box-sizing: inherit; font-family: Consolas, Menlo, "courier new", monospace;">function(currentValue, index, arr),thisValue</em><span style="font-family: Consolas, Menlo, "courier new", monospace;">)<br /></span></td></tr><tr style="background-color: #e7e9eb; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">findIndex()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Returns the index of the first element in an array that pass a test <i style="background-color: white; box-sizing: inherit; font-family: Consolas, Menlo, "courier new", monospace;">array</i><span style="background-color: white; font-family: Consolas, Menlo, "courier new", monospace;">.findIndex(</span><em style="background-color: white; box-sizing: inherit; font-family: Consolas, Menlo, "courier new", monospace;">function(currentValue, index, arr), thisValue</em><span style="background-color: white; font-family: Consolas, Menlo, "courier new", monospace;">)<br /></span></td></tr><tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;"><span style="box-sizing: inherit;">forEach()</span></td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Calls a function for each array element</td></tr><tr style="background-color: #e7e9eb; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">from()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Creates an array from an object</td></tr><tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">includes()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Check if an array contains the specified element</td></tr><tr style="background-color: #e7e9eb; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">indexOf()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Search the array for an element and returns its position</td></tr><tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">isArray()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Checks whether an object is an array</td></tr><tr style="background-color: #e7e9eb; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">join()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Joins all elements of an array into a string</td></tr><tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">keys()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Returns a Array Iteration Object, containing the keys of the original array</td></tr><tr style="background-color: #e7e9eb; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">lastIndexOf()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Search the array for an element, starting at the end, and returns its position</td></tr><tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">length</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sets or returns the number of elements in an array</td></tr><tr style="background-color: #e7e9eb; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">map()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Creates a new array with the result of calling a function for each array element</td></tr><tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">pop()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Removes the last element of an array, and returns that element</td></tr><tr style="background-color: #e7e9eb; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">prototype</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Allows you to add properties and methods to an Array object</td></tr><tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">push()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Adds new elements to the end of an array, and returns the new length</td></tr><tr style="background-color: #e7e9eb; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">reduce()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Reduce the values of an array to a single value (going left-to-right)</td></tr><tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">reduceRight()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Reduce the values of an array to a single value (going right-to-left)</td></tr><tr style="background-color: #e7e9eb; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">reverse()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Reverses the order of the elements in an array</td></tr><tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">shift()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Removes the first element of an array, and returns that element</td></tr><tr style="background-color: #e7e9eb; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">slice()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Selects a part of an array, and returns the new array</td></tr><tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">some()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Checks if any of the elements in an array pass a test</td></tr><tr style="background-color: #e7e9eb; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">sort()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Sorts the elements of an array</td></tr><tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">splice()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Adds/Removes elements from an array</td></tr><tr style="background-color: #e7e9eb; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">toString()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Converts an array to a string, and returns the result</td></tr><tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">unshift()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Adds new elements to the beginning of an array, and returns the new length</td></tr><tr style="background-color: #e7e9eb; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">valueOf()</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Returns the primitive value of an array</td></tr></tbody></table>ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-10342331138543755222022-04-08T12:24:00.003+05:302022-05-23T00:19:16.063+05:30React- UI Architect Interview Questions<p></p><div><b><span style="font-size: medium;">Javascript</span></b></div><ol style="text-align: left;"><li><b> Difference between for each and map</b></li><li><b>Pair check with String or array like <br /></b>input = Hello and output should be {H:1, e:1, l:2, o:1}<br />OR [10, 40, 20, 40, 30, 20, 40, 10] output in pair count </li><li><b>React performance </b></li><li><b>Prev props in function component </b></li><li><b>Render Props in react </b></li><li><b>Solid Principle </b></li></ol><div><b>======================</b></div><div><b><span> Angular Architect Interview </span><br /></b></div><div><ol style="text-align: left;"><li><b>How TO create Dynamic form in Angular </b></li><li><b>Micro frontEnd in Angular </b></li><li><b>Project estimation scenario Like if you have requirements under discussion and you need to give some timeline ,</b></li><li><b>Project proposals </b></li><li><b>What All NFRS you should have for FE</b></li></ol></div><p></p>ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-11874361866915469512021-07-19T20:36:00.003+05:302022-03-28T12:03:12.404+05:30What are Jobs in ES6<p><span style="background-color: white; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em;">A new concept called the “Job Queue” was introduced in ES6. It’s a layer on top of the Event Loop queue. You are most likely to bump into it when dealing with the asynchronous behavior of Promises (we’ll talk about them too).</span></p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="1773" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">We’ll just touch on the concept now so that when we discuss async behavior with Promises, later on, you understand how those actions are being scheduled and processed.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="d32d" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">Imagine it like this: the Job Queue is a queue that’s attached to the end of every tick in the Event Loop queue. Certain async actions that may occur during a tick of the event loop will not cause a whole new event to be added to the event loop queue, but will instead add an item (aka Job) to the end of the current tick’s Job queue.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="971b" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">This means that you can add another functionality to be executed later, and you can rest assured that it will be executed right after, before anything else.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="235f" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">A Job can also cause more Jobs to be added to the end of the same queue. In theory, it’s possible for a Job “loop” (a Job that keeps adding other Jobs, etc.) to spin indefinitely, thus starving the program of the necessary resources needed to move on to the next event loop tick. Conceptually, this would be similar to just expressing a long-running or infinite loop (like <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">while (true)</code> ..) in your code.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="3e53" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">Jobs are kind of like the <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">setTimeout(callback, 0)</code> “hack” but implemented in such a way that they introduce a much more well-defined and guaranteed ordering: later, but as soon as possible.</p><h2 class="hr hs ds cd ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ep" data-selectable-paragraph="" id="5382" style="background-color: white; box-sizing: inherit; color: #292929; font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 28px; margin: 1.72em 0px -0.31em;"><span class="ax" style="box-sizing: inherit; font-weight: inherit;">Callbacks</span></h2><p class="gk gl ds gm b gn ip gp gq gr iq gt gu gv ir gx gy gz is hb hc hd it hf hg hh dk ep" data-selectable-paragraph="" id="76e2" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 0.86em 0px -0.46em; word-break: break-word;">As you already know, callbacks are by far the most common way to express and manage asynchronicity in JavaScript programs. Indeed, the callback is the most fundamental async pattern in the JavaScript language. Countless JS programs, even very sophisticated and complex ones, have been written on top of no other async foundation than the callback.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="3518" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">Except that callbacks don’t come with no shortcomings. Many developers are trying to find better async patterns. It’s impossible, however, to effectively use any abstraction if you don’t understand what’s actually under the hood.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="f5aa" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">In the following chapter, we’ll explore couple of these abstractions in-depth to show why more sophisticated async patterns (that will be discussed in subsequent posts) are necessary and even recommended.</p><h2 class="hr hs ds cd ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ep" data-selectable-paragraph="" id="1ec9" style="background-color: white; box-sizing: inherit; color: #292929; font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 28px; margin: 1.72em 0px -0.31em;">Nested Callbacks</h2><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="9f58" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">We’ve got a chain of three functions nested together, each one representing a step in an asynchronous series.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="6305" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">This kind of code is often called a “callback hell”. But the “callback hell” actually has almost nothing to do with the nesting/indentation. It’s a much deeper problem than that.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="37fe" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">First, we’re waiting for the “click” event, then we’re waiting for the timer to fire, then we’re waiting for the Ajax response to come back, at which point it might get all repeated again.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="7fb0" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">At first glance, this code may seem to map its asynchrony naturally</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="25ef" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">So, such a sequential way of expressing your async code seems a lot more natural, doesn’t it? There must be such a way, right?</p><h2 class="hr hs ds cd ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ep" data-selectable-paragraph="" id="066f" style="background-color: white; box-sizing: inherit; color: #292929; font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 28px; margin: 1.72em 0px -0.31em;">Promises</h2><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="77cd" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">It’s all very straightforward: it sums the values of <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">x</code> and <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">y</code> and prints it to the console. What if, however, the value of <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">x</code> or <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">y </code>was missing and was still to be determined? Say, we need to retrieve the values of both <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">x</code> and <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">y</code> from the server, before they can be used in the expression. Let’s imagine that we have a function <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">loadX</code> and <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">loadY</code> that respectively load the values of <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">x</code> and <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">y</code> from the server. Then, imagine that we have a function <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">sum</code> that sums the values of <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">x</code> and <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">y</code> once both of them are loaded.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="33e5" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">There is something very important here — in that snippet, we treated <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">x</code> and <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">y</code> as <span class="gm iv" style="box-sizing: inherit; font-weight: 700;">future</span> values, and we expressed an operation <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">sum(…)</code> that (from the outside) did not care whether <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">x</code> or <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">y</code> or both were or weren’t available right away.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="e237" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">Of course, this rough callbacks-based approach leaves much to be desired. It’s just a first tiny step towards understanding the benefits of reasoning about <em class="iu" style="box-sizing: inherit;">future values</em> without worrying about the time aspect of when they will be available.</p><h2 class="hr hs ds cd ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ep" data-selectable-paragraph="" id="8f53" style="background-color: white; box-sizing: inherit; color: #292929; font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 28px; margin: 1.72em 0px -0.31em;">Promise Value</h2><p class="gk gl ds gm b gn ip gp gq gr iq gt gu gv ir gx gy gz is hb hc hd it hf hg hh dk ep" data-selectable-paragraph="" id="8878" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 0.86em 0px -0.46em; word-break: break-word;">Let’s just briefly glimpse at how we can express the<code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;"> x + y</code> example with Promises:</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="410b" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">There are two layers of Promises in this snippet.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="29b5" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">fetchX()</code> and <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">fetchY()</code> are called directly, and the values they return (promises!) are passed to <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">sum(...)</code>. The underlying values these promises represent may be ready <em class="iu" style="box-sizing: inherit;">now</em> or <em class="iu" style="box-sizing: inherit;">later</em>, but each promise normalizes its behavior to be the same regardless. We reason about <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">x</code> and <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">y</code> values in a time-independent way. They are <em class="iu" style="box-sizing: inherit;">future values</em>, period.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="78f0" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">The second layer is the promise that <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">sum(...)</code> creates<br style="box-sizing: inherit;" />(via <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">Promise.all([ ... ])</code>) and returns, which we wait on by calling <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">then(...)</code>. When the <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">sum(...)</code>operation completes, our sum <em class="iu" style="box-sizing: inherit;">future value</em> is ready and we can print it out. We hide the logic for waiting on the <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">x</code> and <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">y</code> <em class="iu" style="box-sizing: inherit;">future values</em> inside of <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">sum(...)</code> .</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="98a8" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><span class="gm iv" style="box-sizing: inherit; font-weight: 700;">Note</span>: Inside <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">sum(…)</code>, the <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">Promise.all([ … ])</code> call creates a promise (which is waiting on <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">promiseX</code> and <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">promiseY</code> to resolve). The chained call to <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">.then(...) </code>creates another promise, which the return<br style="box-sizing: inherit;" /><code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">values[0] + values[1]</code> line immediately resolves (with the result of the addition). Thus, the <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">then(...)</code> call we chain off the end of the <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">sum(...)</code> call — at the end of the snippet — is actually operating on that second promise returned, rather than the first one created by <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">Promise.all([ ... ])</code>. Also, although we are not chaining off the end of that second <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">then(...)</code>, it too has created another promise, had we chosen to observe/use it. This Promise chaining stuff will be explained in much greater detail later in this chapter.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="49f5" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">With Promises, the <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">then(...)</code> call can actually take two functions, the first for fulfillment (as shown earlier), and the second for rejection:</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="6423" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">If something went wrong when getting <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">x</code> or <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">y</code>, or something somehow failed during the addition, the promise that <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">sum(...) </code>returns would be rejected, and the second callback error handler passed to <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">then(...)</code> would receive the rejection value from the promise.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="6e87" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">Because Promises encapsulate the time-dependent state — waiting on the fulfillment or rejection of the underlying value — from the outside, the Promise itself is time-independent, and thus Promises can be composed (combined) in predictable ways regardless of the timing or outcome underneath.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="2e20" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">Moreover, once a Promise is resolved, it stays that way forever — it becomes an <em class="iu" style="box-sizing: inherit;">immutable value</em> at that point — and can then be <em class="iu" style="box-sizing: inherit;">observed</em> as many times as necessary.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="706d" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">It’s really useful that you can actually chain promises:</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="8f23" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">Calling <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">delay(2000)</code> creates a promise that will fulfill in 2000ms, and then we return that from the first <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">then(...)</code> fulfillment callback, which causes the second <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">then(...)</code>'s promise to wait on that 2000ms promise.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="f92e" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><span class="gm iv" style="box-sizing: inherit; font-weight: 700;">Note</span>: Because a Promise is externally immutable once resolved, it’s now safe to pass that value around to any party, knowing that it cannot be modified accidentally or maliciously. This is especially true in relation to multiple parties observing the resolution of a Promise. It’s not possible for one party to affect another party’s ability to observe Promise resolution. Immutability may sound like an academic topic, but it’s actually one of the most fundamental and important aspects of Promise design, and shouldn’t be casually passed over.</p><h2 class="hr hs ds cd ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ep" data-selectable-paragraph="" id="918a" style="background-color: white; box-sizing: inherit; color: #292929; font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 28px; margin: 1.72em 0px -0.31em;"><span class="ax" style="box-sizing: inherit; font-weight: inherit;">To Promise or not to Promise?</span></h2><p class="gk gl ds gm b gn ip gp gq gr iq gt gu gv ir gx gy gz is hb hc hd it hf hg hh dk ep" data-selectable-paragraph="" id="4f1d" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 0.86em 0px -0.46em; word-break: break-word;">An important detail about Promises is knowing for sure if some value is an actual Promise or not. In other words, is it a value that will behave like a Promise?</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="7397" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">We know that Promises are constructed by the <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">new Promise(…)</code> syntax, and you might think that <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">p instanceof Promise</code> would be a sufficient check. Well, not quite.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="27a3" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">Mainly because you can receive a Promise value from another browser window (e.g. iframe), which would have its own Promise, different from the one in the current window or frame, and that check would fail to identify the Promise instance.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="9bbd" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">Moreover, a library or framework may choose to vend its own Promises and not use the native ES6 Promise implementation to do so. In fact, you may very well be using Promises with libraries in older browsers that have no Promise at all.</p><h2 class="hr hs ds cd ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ep" data-selectable-paragraph="" id="d75e" style="background-color: white; box-sizing: inherit; color: #292929; font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 28px; margin: 1.72em 0px -0.31em;">Swallowing exceptions</h2><p class="gk gl ds gm b gn ip gp gq gr iq gt gu gv ir gx gy gz is hb hc hd it hf hg hh dk ep" data-selectable-paragraph="" id="4ca1" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 0.86em 0px -0.46em; word-break: break-word;">If at any point in the creation of a Promise, or in the observation of its resolution, a JavaScript exception error occurs, such as a <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">TypeError</code> or <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">ReferenceError</code>, that exception will be caught, and it will force the Promise in question to become rejected.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="79e4" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><br /><span style="letter-spacing: -0.003em;">But what happens if a Promise is fulfilled yet there was a JS exception error during the observation (in a</span><span style="letter-spacing: -0.003em;"> </span><code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; letter-spacing: -0.003em; padding: 2px 4px;">then(…)</code><span style="letter-spacing: -0.003em;"> </span><span style="letter-spacing: -0.003em;">registered callback)? Even though it won’t be lost, you may find the way they’re handled a bit surprising. Until you dig a little deeper:</span></p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="c1cb" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">It looks like the exception from <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">foo.bar()</code> really did get swallowed. It wasn’t, though. There was something deeper that went wrong, however, which we failed to listen for. The <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">p.then(…)</code> call itself returns another promise, and it’s that<em class="iu" style="box-sizing: inherit;"> </em>promise that will be rejected with the <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">TypeError</code> exception.</p><h2 class="hr hs ds cd ht hu hv hw hx hy hz ia ib ic id ie if ig ih ii ij ik il im in io ep" data-selectable-paragraph="" id="bf3f" style="background-color: white; box-sizing: inherit; color: #292929; font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 22px; font-weight: 500; line-height: 28px; margin: 1.72em 0px -0.31em;"><span class="ax" style="box-sizing: inherit; font-weight: inherit;">Handling uncaught exceptions</span></h2><p class="gk gl ds gm b gn ip gp gq gr iq gt gu gv ir gx gy gz is hb hc hd it hf hg hh dk ep" data-selectable-paragraph="" id="ce62" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 0.86em 0px -0.46em; word-break: break-word;">There are other approaches which many would say are <em class="iu" style="box-sizing: inherit;">better</em>.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="a8f8" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">A common suggestion is that Promises should have a <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">done(…)</code> added to them, which essentially marks the Promise chain as “done.” <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">done(…)</code>doesn’t create and return a Promise, so the callbacks passed to <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">done(..)</code> are obviously not wired up to report problems to a chained Promise that doesn’t exist.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="cac9" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">It’s treated as you might usually expect in uncaught error conditions: any exception inside a <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">done(..)</code> rejection handler would be thrown as a global uncaught error (in the developer console, basically):</p>ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-7329692073466081172021-07-19T20:00:00.005+05:302022-03-28T12:20:51.091+05:30How JavaScript works: Event loop and the rise of Async programming<p> <span style="background-color: white; color: #292929; font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 22px;">What is the Event Loop?</span></p><p class="gk gl ds gm b gn ip gp gq gr iq gt gu gv ir gx gy gz is hb hc hd it hf hg hh dk ep" data-selectable-paragraph="" id="572e" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 0.86em 0px -0.46em; word-break: break-word;">We’ll start with a somewhat of an odd claim — despite allowing async JavaScript code (like the <code class="jk jr js jt ju b" style="background-color: #f2f2f2; box-sizing: inherit; font-family: Menlo, Monaco, "Courier New", Courier, monospace; font-size: 15.75px; padding: 2px 4px;">setTimeout</code>), until ES6, JavaScript itself has actually never had any direct notion of asynchronicity built into it. The JavaScript engine has never done anything more than executing a single chunk of your program at any given moment.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="a479" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">For more details on how JavaScript engines work (Google’s V8 specifically).</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="a479" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"></p><div class="separator" style="clear: both; text-align: center;"><a href="https://miro.medium.com/max/1400/1*iHhUyO4DliDwa6x_cO5E3A.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="422" data-original-width="800" height="422" src="https://miro.medium.com/max/1400/1*iHhUyO4DliDwa6x_cO5E3A.gif" width="800" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><br /><p></p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="9e3c" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">So, who tells the JS Engine to execute chunks of your program? In reality, the JS Engine doesn’t run in isolation — it runs inside a <em class="iu" style="box-sizing: inherit;">hosting </em>environment, which for most developers is the typical web browser or Node.js. Actually, nowadays, JavaScript gets embedded into all kinds of devices, from robots to light bulbs. Every single device represents a different type of hosting environment for the JS Engine.</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="ef5e" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;"><span class="gm iv" style="box-sizing: inherit; font-weight: 700;">The common denominator in all environments is a built-in mechanism called the event loop, which handles the execution of multiple chunks of your program over time, each time invoking the JS Engine.</span></p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="4e3d" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">This means that the JS Engine is just an on-demand execution environment for any arbitrary JS code. It’s the surrounding environment that schedules the events (the JS code executions).</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="e4f0" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">So, for example, when your JavaScript program makes an Ajax request to fetch some data from the server, you set up the “response” code in a function (the “callback”), and the JS Engine tells the hosting environment:<br style="box-sizing: inherit;" />“Hey, I’m going to suspend execution for now, but whenever you finish with that network request, and you have some data, please <em class="iu" style="box-sizing: inherit;">call</em> this function <em class="iu" style="box-sizing: inherit;">back</em>.”</p><p class="gk gl ds gm b gn go gp gq gr gs gt gu gv gw gx gy gz ha hb hc hd he hf hg hh dk ep" data-selectable-paragraph="" id="1301" style="background-color: white; box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;">The browser is then set up to listen for the response from the network, and when it has something to return to you, it will schedule the callback function to be executed by inserting it into the <em class="iu" style="box-sizing: inherit;">event loop</em>.</p>ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-28877168047941550912020-05-25T22:03:00.004+05:302020-05-25T22:03:48.185+05:30Angular component Lifecycle Hooks<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="-webkit-text-stroke-width: 0px; background: 0px 0px rgb(255, 255, 255); border: 0px; box-sizing: border-box; color: #333333; font-family: "Open Sans", Arial, sans-serif; font-size: 22px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 500; letter-spacing: normal; line-height: 1em; margin: 0px; orphans: 2; outline: 0px; padding: 0px 0px 10px; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-size-adjust: 100%; text-transform: none; vertical-align: baseline; white-space: normal; widows: 2; word-spacing: 0px;">
Lifecycle Hooks</h3>
<ol style="text-align: left;">
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">ngOnChanges()<ul style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; line-height: 26px; list-style: disc; margin: 0px; outline: 0px; padding: 2px 0px 2px 20px; text-size-adjust: 100%; vertical-align: baseline;">
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">Used in pretty much any component that has an input.</li>
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">Called whenever an input value changes</li>
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">Is called the first time before ngOnInit</li>
</ul>
</li>
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">ngOnInit()<ul style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; line-height: 26px; list-style: disc; margin: 0px; outline: 0px; padding: 2px 0px 2px 20px; text-size-adjust: 100%; vertical-align: baseline;">
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">Used to initialize data in a component.</li>
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">Called after input values are set when a component is initialized.</li>
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">Added to every component by default by the Angular CLI.</li>
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">Called only once</li>
</ul>
</li>
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">ngDoCheck()<ul style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; line-height: 26px; list-style: disc; margin: 0px; outline: 0px; padding: 2px 0px 2px 20px; text-size-adjust: 100%; vertical-align: baseline;">
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">Called during all change detection runs<ul style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; line-height: 26px; list-style: disc; margin: 0px; outline: 0px; padding: 2px 0px 2px 20px; text-size-adjust: 100%; vertical-align: baseline;">
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">A run through the view by Angular to update/detect changes</li>
</ul>
</li>
</ul>
</li>
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">ngAfterContentInit()<ul style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; line-height: 26px; list-style: disc; margin: 0px; outline: 0px; padding: 2px 0px 2px 20px; text-size-adjust: 100%; vertical-align: baseline;">
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">Called only once after first ngDoCheck()</li>
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">Called after the first run through of initializing content</li>
</ul>
</li>
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">ngAfterContentChecked()<ul style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; line-height: 26px; list-style: disc; margin: 0px; outline: 0px; padding: 2px 0px 2px 20px; text-size-adjust: 100%; vertical-align: baseline;">
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">Called after every ngDoCheck()</li>
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">Waits till after ngAfterContentInit() on first run through</li>
</ul>
</li>
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">ngAfterViewInit()<ul style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; line-height: 26px; list-style: disc; margin: 0px; outline: 0px; padding: 2px 0px 2px 20px; text-size-adjust: 100%; vertical-align: baseline;">
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">Called after Angular initializes component and child component content.</li>
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">Called only once after view is initialized</li>
</ul>
</li>
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">ngAfterViewChecked()<ul style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; line-height: 26px; list-style: disc; margin: 0px; outline: 0px; padding: 2px 0px 2px 20px; text-size-adjust: 100%; vertical-align: baseline;">
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">Called after all the content is initialized and checked. (Component and child components).</li>
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">First call is after ngAfterViewInit()</li>
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">Called after every ngAfterContentChecked() call is completed</li>
</ul>
</li>
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">ngOnDestroy()<ul style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; line-height: 26px; list-style: disc; margin: 0px; outline: 0px; padding: 2px 0px 2px 20px; text-size-adjust: 100%; vertical-align: baseline;">
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;"><code style="background: 0px 0px; border: 0px; box-sizing: border-box; font-family: "Courier New", monospace; font-size: 14px; margin: 0px 0px 10px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;"></code>Used to clean up any necessary code when a component is removed from the DOM.<ul style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; line-height: 26px; list-style: disc; margin: 0px; outline: 0px; padding: 2px 0px 2px 20px; text-size-adjust: 100%; vertical-align: baseline;">
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">Fairly often used to unsubscribe from things like services.</li>
</ul>
</li>
<li style="background: 0px 0px; border: 0px; box-sizing: border-box; font-size: 14px; margin: 0px; outline: 0px; padding: 0px; text-size-adjust: 100%; vertical-align: baseline;">Called only once just before component is removed from the DOM.</li>
</ul>
</li>
</ol>
</div>
ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-6671064310294659162019-12-19T15:16:00.002+05:302019-12-19T15:16:29.084+05:30How to apply multiple template bindings on one element in angular <div dir="ltr" style="text-align: left;" trbidi="on">
<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #242729; display: inline !important; float: none; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">Can't use two template binding on one element in Angular 2 (like *ngIf and *ngFor). </span><br />
<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #242729; display: inline !important; float: none; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">you need to create ng element over your code (td , li)</span><br />
<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #242729; display: inline !important; float: none; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><br /></span>
<br />
<pre style="-webkit-text-stroke-width: 0px; background-color: #eff0f1; border-radius: 3px; border: 0px; box-sizing: inherit; color: #242729; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-style: normal; font-variant-caps: normal; font-variant-east-asian: inherit; font-variant-ligatures: normal; font-variant-numeric: inherit; font-weight: 400; letter-spacing: normal; line-height: inherit; margin: 0px 0px 1em; max-height: 600px; orphans: 2; overflow-wrap: normal; overflow: auto; padding: 12px 8px; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; vertical-align: baseline; widows: 2; width: auto; word-spacing: 0px;"><code style="background-color: #eff0f1; border: 0px; box-sizing: inherit; font-family: Consolas, Menlo, Monaco, "Lucida Console", "Liberation Mono", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace, sans-serif; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;"><ng-container *ngIf="condition">
<li *ngFor="let item of items">
{{item}}
</li>
</ng-container></code></pre>
<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #242729; display: inline !important; float: none; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 15px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"></span><br />
Thanks<br />
<br /></div>
ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-77175272071180118192019-12-16T12:37:00.002+05:302019-12-16T12:37:36.726+05:30Change Selector prefix with Angular CLI<div dir="ltr" style="text-align: left;" trbidi="on">
Hey<br />
<br />
Use this cmd line for changing default prefix app to your company name or tag<br />
<br />
<span style="color: white;"><span style="background-color: black;"> ng new my-app --prefix compantName </span></span></div>
ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-43799448924500851732019-08-13T21:53:00.002+05:302019-08-13T21:53:47.239+05:30Dynamic set / update filter value in gridfilter extjs<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #5a6a77; display: inline !important; float: none; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">Hello,</span><br style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #5a6a77; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;" /><br style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #5a6a77; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;" /><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #5a6a77; display: inline !important; float: none; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">We have added the following functionality to the GridFilters </span><br />
<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #5a6a77; display: inline !important; float: none; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"> </span><br style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #5a6a77; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;" /><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #5a6a77; display: inline !important; float: none; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">Each filter has SetActive and SetValue methods which can be used to set filter value during AjaxEvent</span><br />
<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #5a6a77; display: inline !important; float: none; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"> </span><br style="-webkit-text-stroke-width: 0px; background-color: white; box-sizing: border-box; color: #5a6a77; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;" /><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #5a6a77; display: inline !important; float: none; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">On client side you can use the following functions to set filter</span><br />
<span style="-webkit-text-stroke-width: 0px; background-color: white; color: #5a6a77; display: inline !important; float: none; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"> </span><br />
<pre class="code-toolbar line-numbers language-csharp" style="-webkit-text-stroke-width: 0px; background: rgb(244, 247, 249); border-radius: 3px; border: 1px solid rgb(244, 247, 249); box-sizing: border-box; color: black; counter-reset: linenumber 0; display: block; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 14px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; hyphens: none; letter-spacing: normal; line-height: 1.5; margin: 0px 0px 30px; orphans: 2; overflow-wrap: normal; overflow: auto; padding: 1em 1em 1em 3.8em; position: relative; tab-size: 4; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-shadow: white 0px 1px; text-transform: none; white-space: pre; widows: 2; word-break: normal; word-spacing: 0px;"><code class=" language-csharp" style="background: none; border-radius: 0px; box-sizing: border-box; color: black; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: inherit; font-style: inherit; font-weight: inherit; hyphens: none; line-height: 1.5; margin: 0px; overflow-wrap: normal; padding: 0px; position: relative; tab-size: 4; text-align: left; text-shadow: white 0px 1px; white-space: pre; word-break: normal; word-spacing: normal;">grid<span class="token punctuation" style="box-sizing: border-box; color: #999999;"></span><span class="token punctuation" style="box-sizing: border-box; color: #999999;"></span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token function" style="box-sizing: border-box; color: #dd4a68;">clearFilters<span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span></span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">;</span>
grid<span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;"></span><span class="token function" style="box-sizing: border-box; color: #dd4a68;">getFilter<span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="box-sizing: border-box; color: #669900;">'dataindex'</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token function" style="box-sizing: border-box; color: #dd4a68;">setValue<span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="box-sizing: border-box; color: #669900;">"value"</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">;</span> <span class="token comment" spellcheck="true" style="box-sizing: border-box; color: slategrey;">//string filter
</span>grid<span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;"></span><span class="token function" style="box-sizing: border-box; color: #dd4a68;">getFilter<span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="box-sizing: border-box; color: #669900;">'dataindex'</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token function" style="box-sizing: border-box; color: #dd4a68;">setValue<span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span></span><span class="token keyword" style="box-sizing: border-box; color: #0077aa;">true</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">;</span> <span class="token comment" spellcheck="true" style="box-sizing: border-box; color: slategrey;">//bool filter
</span>grid<span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;"></span><span class="token function" style="box-sizing: border-box; color: #dd4a68;">getFilter<span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="box-sizing: border-box; color: #669900;">'dataindex'</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token function" style="box-sizing: border-box; color: #dd4a68;">setValue<span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span></span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">{</span>gt<span class="token punctuation" style="box-sizing: border-box; color: #999999;">:</span><span class="token number" style="box-sizing: border-box; color: #990055;">2</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> lt<span class="token punctuation" style="box-sizing: border-box; color: #999999;">:</span><span class="token number" style="box-sizing: border-box; color: #990055;">9</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> eq<span class="token punctuation" style="box-sizing: border-box; color: #999999;">:</span><span class="token number" style="box-sizing: border-box; color: #990055;">5</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">;</span> <span class="token comment" spellcheck="true" style="box-sizing: border-box; color: slategrey;">//numeric filter
</span>grid<span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token function" style="box-sizing: border-box; color: #dd4a68;">getFilter<span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="box-sizing: border-box; color: #669900;">'dataindex'</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token function" style="box-sizing: border-box; color: #dd4a68;">setValue<span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span></span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">{</span>before<span class="token punctuation" style="box-sizing: border-box; color: #999999;">:</span> <span class="token keyword" style="box-sizing: border-box; color: #0077aa;">new</span> <span class="token class-name" style="box-sizing: border-box;">Date</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span><span class="token number" style="box-sizing: border-box; color: #990055;">2008</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span><span class="token number" style="box-sizing: border-box; color: #990055;">0</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span><span class="token number" style="box-sizing: border-box; color: #990055;">1</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> after<span class="token punctuation" style="box-sizing: border-box; color: #999999;">:</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> on<span class="token punctuation" style="box-sizing: border-box; color: #999999;">:</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">}</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">;</span> <span class="token comment" spellcheck="true" style="box-sizing: border-box; color: slategrey;">//date filter
</span>grid<span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;"></span><span class="token function" style="box-sizing: border-box; color: #dd4a68;">getFilter<span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="box-sizing: border-box; color: #669900;">'dataindex'</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token function" style="box-sizing: border-box; color: #dd4a68;">setValue<span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span></span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">[</span><span class="token string" style="box-sizing: border-box; color: #669900;">'item1'</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">,</span> item2<span class="token punctuation" style="box-sizing: border-box; color: #999999;">]</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">;</span> <span class="token comment" spellcheck="true" style="box-sizing: border-box; color: slategrey;">//list filter
</span>
grid<span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;"></span><span class="token function" style="box-sizing: border-box; color: #dd4a68;">getFilter<span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span></span><span class="token string" style="box-sizing: border-box; color: #669900;">'dataindex'</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">.</span><span class="token function" style="box-sizing: border-box; color: #dd4a68;">setActive<span class="token punctuation" style="box-sizing: border-box; color: #999999;">(</span></span><span class="token keyword" style="box-sizing: border-box; color: #0077aa;">false</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">)</span><span class="token punctuation" style="box-sizing: border-box; color: #999999;">;</span> <span class="token comment" spellcheck="true" style="box-sizing: border-box; color: slategrey;">//turn off filter</span></code></pre>
<pre class="code-toolbar line-numbers language-csharp" style="-webkit-text-stroke-width: 0px; background: rgb(244, 247, 249); border-radius: 3px; border: 1px solid rgb(244, 247, 249); box-sizing: border-box; color: black; counter-reset: linenumber 0; display: block; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 14px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 400; hyphens: none; letter-spacing: normal; line-height: 1.5; margin: 0px 0px 30px; orphans: 2; overflow-wrap: normal; overflow: auto; padding: 1em 1em 1em 3.8em; position: relative; tab-size: 4; text-align: left; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-shadow: white 0px 1px; text-transform: none; white-space: pre; widows: 2; word-break: normal; word-spacing: 0px;"><code class=" language-csharp" style="background: none; border-radius: 0px; box-sizing: border-box; color: black; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: inherit; font-style: inherit; font-weight: inherit; hyphens: none; line-height: 1.5; margin: 0px; overflow-wrap: normal; padding: 0px; position: relative; tab-size: 4; text-align: left; text-shadow: white 0px 1px; white-space: pre; word-break: normal; word-spacing: normal;"><span class="token comment" spellcheck="true" style="box-sizing: border-box; color: slategrey;">Comments are always welcome :) </span></code></pre>
</div>
ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-19582017973201285652019-05-30T22:04:00.001+05:302019-05-30T22:05:37.035+05:30Custom Checkbox Css with and without label<div dir="ltr" style="text-align: left;" trbidi="on">
<span id="goog_1309174850"></span><span id="goog_1309174851"></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQo-3df0vDpx5dHxfjJS6KzkgO32j6z3StxpR-n427xdmV1C1nJoFueWXjjfOkhhRcMBDGrmhMJnn0i3f3n9KrUhcQIqQY073PH0RJbaCVBJovMWfia2F3QjouV6HI1Cr7QLACL7R2rTA/s1600/Custom+checkbox.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="295" data-original-width="1287" height="91" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQo-3df0vDpx5dHxfjJS6KzkgO32j6z3StxpR-n427xdmV1C1nJoFueWXjjfOkhhRcMBDGrmhMJnn0i3f3n9KrUhcQIqQY073PH0RJbaCVBJovMWfia2F3QjouV6HI1Cr7QLACL7R2rTA/s400/Custom+checkbox.png" width="400" /></a></div>
<br />
<a href="https://codepen.io/RJindia/pen/EzdqBo" target="_blank">Demo </a><br />
<br />
HTML for checkbox is<br />
<br />
<b>With Label</b><br />
<br />
<div class="boxes withlabel"><br />
<input type="checkbox" id="rj-1"><br />
<label for="rj-1">Hello World</label><br />
<br />
<input type="checkbox" id="rj-2" checked><br />
<label for="rj-2">RJ Code for every one </label><br />
<br />
<input type="checkbox" id="rj-3"><br />
<label for="rj-3">Checkbox with label</label><br />
</div><br />
<br />
<br />
<b>With out Label</b><br />
<br />
<div class="boxes without"><br />
<input type="checkbox" id="box-1"><br />
<input type="checkbox" id="box-2" checked><br />
<br />
<input type="checkbox" id="box-3"><br />
</div><br />
<br />
CSS<br />
<br />
/* With label Checkboxes styles*/<br />
<br />
.withlabel input[type="checkbox"] { display: none; }<br />
<br />
.withlabel input[type="checkbox"] + label {<br />
display: block;<br />
position: relative;<br />
padding-left: 35px;<br />
margin-bottom: 20px;<br />
font: 14px/20px 'Open Sans', Arial, sans-serif;<br />
color: #fff;<br />
cursor: pointer;<br />
-webkit-user-select: none;<br />
-moz-user-select: none;<br />
-ms-user-select: none;<br />
}<br />
<br />
.withlabel input[type="checkbox"] + label:last-child { margin-bottom: 0; }<br />
<br />
.withlabel input[type="checkbox"] + label:before {<br />
content: '';<br />
display: block;<br />
width: 20px;<br />
height: 20px;<br />
border: 2px solid #fff;<br />
position: absolute;<br />
left: 0;<br />
top: 0;<br />
opacity: .6;<br />
-webkit-transition: all .12s, border-color .08s;<br />
transition: all .12s, border-color .08s;<br />
}<br />
<br />
.withlabel input[type="checkbox"]:checked + label:before {<br />
width: 10px;<br />
top: -5px;<br />
left: 5px;<br />
border-radius: 0;<br />
opacity: 1;<br />
border-top-color: transparent;<br />
border-left-color: transparent;<br />
-webkit-transform: rotate(45deg);<br />
transform: rotate(45deg);<br />
}<br />
<br />
<br />
/* With out Checkboxes styles*/<br />
<br />
.without input[type="checkbox"] {<br />
display: block;<br />
position: relative;<br />
margin-bottom: 20px;<br />
width:0;<br />
cursor: pointer;<br />
}<br />
<br />
.without input[type="checkbox"]:last-child { margin-bottom: 0; }<br />
<br />
.without input[type="checkbox"]:before {<br />
content: '';<br />
background:#F46A4A;<br />
display: block;<br />
width: 20px;<br />
height: 20px;<br />
border: 2px solid #fff;<br />
position: absolute;<br />
left: 0;<br />
top: 0;<br />
-webkit-transition: all .12s, border-color .08s;<br />
transition: all .12s, border-color .08s;<br />
}<br />
<br />
.without input[type="checkbox"]:checked:before {<br />
width: 10px;<br />
top: -5px;<br />
left: 5px;<br />
border-radius: 0;<br />
opacity: 1;<br />
border-top-color: transparent;<br />
border-left-color: transparent;<br />
-webkit-transform: rotate(45deg);<br />
transform: rotate(45deg);<br />
}<br />
<br />
Enjoy Comments are welcome :)<br />
<br /></div>
ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-43497641274242660812019-02-21T19:43:00.004+05:302019-02-21T19:45:13.247+05:30Error in creating angular component from CLI<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: large;">Error code is:</span></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: large;"><br /></span></span>
<br />
<pre style="background-color: #eff0f1; border: 0px none; box-sizing: inherit; font-stretch: inherit; font-style: normal; font-weight: 400; letter-spacing: normal; line-height: inherit; margin: 0px 0px 1em; max-height: 600px; overflow-wrap: normal; overflow: auto; padding: 5px; text-align: left; text-indent: 0px; text-transform: none; vertical-align: baseline; width: auto; word-spacing: 0px;"><span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: large;"><span style="color: red;"><code style="background-color: #eff0f1; border: 0px none; box-sizing: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 0px; vertical-align: baseline; white-space: inherit;">More than one module matches. Use skip-import
option to skip importing the component into the
closest module.</code></span></span></span></pre>
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: large;">This Error is related to component module file When we have multiple module file
(more than one) then auto generated component is missing module path so we need to give
module path with component name like :</span></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: large;"><br /></span></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: large;"> <mark>ng g c ./feature/ComponentName --module modulePath </mark></span></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: large;"><br /></span></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: large;">For Example</span></span><br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: large;"><br /></span></span>
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: large;"><mark>ng g c ./feature/metric-detail --module app</mark> </span></span><br />
<br />
<span style="font-family: "arial" , "helvetica" , sans-serif;"><span style="font-size: large;">comments are always welcome :)
</span></span></div>
ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-13984648772828737412019-02-19T08:00:00.002+05:302019-02-19T08:07:04.528+05:30Angular CLI cheat sheet <div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="text-align: left;">
Install Globally</h3>
<div>
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="source"><span style="font-size: 12pt;">npm install -g @angular/cli</span></span></pre>
<code></code><br />
<h3 style="text-align: left;">
Install Locally</h3>
<div>
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="source"><span style="font-size: 12pt;">npm install @angular/cli</span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
</div>
<blockquote class="tr_bq" style="box-sizing: border-box; color: rgba(0, 0, 0, 0.85); margin: 0in 0in 12pt;">
<span style="font-size: x-small;"><span style="font-family: "source sans pro" , sans-serif; letter-spacing: 0.1pt;">To run a locally installed version of the angular-cli, you
can call </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: rgb(247 , 247 , 247); font-family: "consolas";">ng</span></code><span style="font-family: "source sans pro" , sans-serif; letter-spacing: 0.1pt;"> commands directly by
adding the </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: rgb(247 , 247 , 247); font-family: "consolas";">.bin</span></code><span style="font-family: "source sans pro" , sans-serif; letter-spacing: 0.1pt;"> folder within your
local </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: rgb(247 , 247 , 247); font-family: "consolas";">node_modules</span></code><span style="font-family: "source sans pro" , sans-serif; letter-spacing: 0.1pt;"> folder to
your PATH. The </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: rgb(247 , 247 , 247); font-family: "consolas";">node_modules</span></code><span style="font-family: "source sans pro" , sans-serif; letter-spacing: 0.1pt;"> and </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: rgb(247 , 247 , 247); font-family: "consolas";">.bin</span></code><span style="font-family: "source sans pro" , sans-serif; letter-spacing: 0.1pt;"> folders are created in the directory where </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: rgb(247 , 247 , 247); font-family: "consolas";">npm install
@angular/cli</span></code><span style="font-family: "source sans pro" , sans-serif; letter-spacing: 0.1pt;"> was run upon completion of the install command.<br /><o:p></o:p></span><span style="font-family: "source sans pro" , sans-serif; letter-spacing: 0.1pt;">Alternatively, you can install <a href="https://www.npmjs.com/package/npx" style="box-sizing: border-box;"><span style="color: #cb3837;">npx</span></a> and run </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: rgb(247 , 247 , 247); font-family: "consolas";">npx ng
<command></span></code><span style="font-family: "source sans pro" , sans-serif; letter-spacing: 0.1pt;"> within the local directory where </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: rgb(247 , 247 , 247); font-family: "consolas";">npm install
@angular/cli</span></code></span><span style="font-family: "source sans pro" , sans-serif; letter-spacing: 0.1pt;"><span style="font-size: x-small;"> was run, which will use the locally installed
angular-cli.</span></span></blockquote>
<h3 style="margin-bottom: 12.0pt; margin-left: 0in; margin-right: 0in; margin-top: .25in;">
<span style="color: #111111; font-family: "source sans pro" , sans-serif;">Install
Specific Version (Example: 6.1.1)</span><span style="color: #111111; font-family: "source sans pro" , sans-serif; font-size: 13.5pt; line-height: 107%;"><o:p></o:p></span></h3>
<pre style="background: #F7F7F7; border-radius: 2px; box-sizing: border-box; margin-bottom: .25in; overflow-x: auto;"><span class="source"><span style="font-size: 12pt;">npm install -g @angular/cli@6.1.1</span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<h2 style="border-bottom: rgba(0, 0, 0, 0.1); box-sizing: border-box; font-size: 1.875rem; letter-spacing: -0.05rem; margin: 0.25in 0in 12pt;">
<span style="color: #111111; font-family: "source sans pro" , sans-serif;">Usage</span><span style="color: #111111; font-family: "source sans pro" , sans-serif; font-size: 18.0pt; line-height: 107%;"><o:p></o:p></span></h2>
<pre style="background: #F7F7F7; border-radius: 2px; box-sizing: border-box; margin-bottom: .25in; overflow-x: auto;"><span class="source"><span style="font-size: 12pt;">ng </span></span><span class="support"><span style="color: #445588; font-size: 12.0pt;">help</span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<h3 style="box-sizing: border-box; font-size: 1.25rem; letter-spacing: -0.03rem; margin: 0.25in 0in 12pt; padding-bottom: 0rem;">
<span style="color: #111111; font-family: "source sans pro" , sans-serif;">Generating and serving an Angular project via a development
server</span><span style="color: #111111; font-family: "source sans pro" , sans-serif; font-size: 13.5pt; line-height: 107%;"><o:p></o:p></span></h3>
<pre style="background: #F7F7F7; border-radius: 2px; box-sizing: border-box; margin-bottom: .25in; overflow-x: auto;"><span class="source"><span style="font-size: 12pt;">ng new PROJECT-NAME</span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="support"><span style="color: #445588; font-size: 12.0pt;">cd</span></span><span class="source"><span style="font-size: 12pt;"> PROJECT-NAME</span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="source"><span style="font-size: 12pt;">ng serve</span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<div style="box-sizing: border-box; color: rgba(0, 0, 0, 0.85); margin: 0in 0in 12pt;">
<span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;">Navigate to </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: #f7f7f7; font-family: "consolas"; font-size: 10.0pt;">http://localhost:4200/</span></code><span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;">. The app will automatically reload if you change any of the source
files.<o:p></o:p></span></div>
<div style="box-sizing: border-box; color: rgba(0, 0, 0, 0.85); margin: 0in 0in 12pt;">
<span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;">You can configure the default HTTP host and port used by
the development server with two command-line options :<o:p></o:p></span></div>
<pre style="background: #F7F7F7; border-radius: 2px; box-sizing: border-box; margin-bottom: .25in; overflow-x: auto;"><span class="source"><span style="font-size: 12pt;">ng serve --host 0.0.0.0 --port 4201</span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<h3 style="box-sizing: border-box; font-size: 1.25rem; letter-spacing: -0.03rem; margin: 0.25in 0in 12pt; padding-bottom: 0rem;">
<span style="color: #111111; font-family: "source sans pro" , sans-serif;">Generating Components, Directives, Pipes and Services</span><span style="color: #111111; font-family: "source sans pro" , sans-serif; font-size: 13.5pt; line-height: 107%;"><o:p></o:p></span></h3>
<span style="color: rgba(0 , 0 , 0 , 0.85); font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;">You can use the </span><code style="border-radius: 2px; box-sizing: border-box; color: rgba(0, 0, 0, 0.85); font-variant-ligatures: none;"><span style="background: #f7f7f7; font-family: "consolas"; font-size: 10.0pt;">ng generate</span></code><span style="color: rgba(0 , 0 , 0 , 0.85); font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;"> (or just </span><code style="border-radius: 2px; box-sizing: border-box; color: rgba(0, 0, 0, 0.85); font-variant-ligatures: none;"><span style="background: #f7f7f7; font-family: "consolas"; font-size: 10.0pt;">ng g</span></code><span style="color: rgba(0 , 0 , 0 , 0.85); font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;">) command to generate Angular components:</span><br />
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="source"><span style="font-size: 12pt;">ng generate component my-new-component</span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="source"><span style="font-size: 12pt;">ng g component my-new-component <span style="fill: none; stroke-miterlimit: 10; stroke: rgb(0, 0, 0);"></span></span><span class="punctuation"><i><span style="color: #999988; font-size: 12.0pt;">#</span></i></span><span class="comment"><i><span style="color: #999988; font-size: 12.0pt;"> using the alias </span></i></span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="source"><span style="font-size: 12pt;"> </span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="punctuation"><span style="fill: none; stroke-miterlimit: 10; stroke: rgb(0, 0, 0);"><i><span style="color: #999988; font-size: 12.0pt;">#</span></i></span><span class="comment"><i><span style="color: #999988; font-size: 12.0pt;"> components support relative path generation </span></i></span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="punctuation"><span style="fill: none; stroke-miterlimit: 10; stroke: rgb(0, 0, 0);"><i><span style="color: #999988; font-size: 12.0pt;">#</span></i></span><span class="comment"><i><span style="color: #999988; font-size: 12.0pt;"> if in the directory src/app/feature/ and you run </span></i></span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="source"><span style="font-size: 12pt;">ng g component new-cmp</span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="punctuation"><span style="fill: none; stroke-miterlimit: 10; stroke: rgb(0, 0, 0);"><i><span style="color: #999988; font-size: 12.0pt;">#</span></i></span><span class="comment"><i><span style="color: #999988; font-size: 12.0pt;"> your component will be generated in src/app/feature/new-cmp </span></i></span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="punctuation"><span style="fill: none; stroke-miterlimit: 10; stroke: rgb(0, 0, 0);"><i><span style="color: #999988; font-size: 12.0pt;">#</span></i></span><span class="comment"><i><span style="color: #999988; font-size: 12.0pt;"> but if you were to run </span></i></span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="source"><span style="font-size: 12pt;">ng g component ./newer-cmp</span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="punctuation"><span style="fill: none; stroke-miterlimit: 10; stroke: rgb(0, 0, 0);"><i><span style="color: #999988; font-size: 12.0pt;">#</span></i></span><span class="comment"><i><span style="color: #999988; font-size: 12.0pt;"> your component will be generated in src/app/newer-cmp </span></i></span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="punctuation"><span style="fill: none; stroke-miterlimit: 10; stroke: rgb(0, 0, 0);"><i><span style="color: #999988; font-size: 12.0pt;">#</span></i></span><span class="comment"><i><span style="color: #999988; font-size: 12.0pt;"> if in the directory src/app you can also run </span></i></span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="source"><span style="font-size: 12pt;">ng g component feature/new-cmp</span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="punctuation"><span style="fill: none; stroke-miterlimit: 10; stroke: rgb(0, 0, 0);"><i><span style="color: #999988; font-size: 12.0pt;">#</span></i></span><span class="comment"><i><span style="color: #999988; font-size: 12.0pt;"> and your component will be generated in src/app/feature/new-cmp </span></i></span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<div style="box-sizing: border-box; color: rgba(0, 0, 0, 0.85); margin: 0in 0in 12pt;">
<span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;">You can find all possible blueprints in the table below:<o:p></o:p></span><br />
<span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;"></span><br />
<table border="1" cellpadding="0" cellspacing="0" class="MsoNormalTable" style="border-collapse: collapse; border-spacing: 0px; border: none; box-sizing: border-box; overflow-x: auto; width: 100%;"><thead>
<tr style="box-sizing: border-box; mso-yfti-firstrow: yes; mso-yfti-irow: 0;"><td style="background: white; border: 1pt solid rgb(216, 216, 216); padding: 6.75pt 9.75pt;"><div class="MsoNormal">
<b><span style="color: #333333; font-family: "source sans pro" , sans-serif; font-size: 13pt; line-height: 18.5467px;">Scaffold<o:p></o:p></span></b></div>
</td><td style="background: white; border-bottom: none; border-left: none; border-right: 1pt solid rgb(216, 216, 216); border-top: 1pt solid rgb(216, 216, 216); padding: 6.75pt 9.75pt;"><div class="MsoNormal">
<b><span style="color: #333333; font-family: "source sans pro" , sans-serif; font-size: 13pt; line-height: 18.5467px;">Usage<o:p></o:p></span></b></div>
</td></tr>
</thead><tbody>
<tr style="box-sizing: border-box; mso-yfti-irow: 1;"><td style="background: white; border: 1pt solid rgb(216, 216, 216); box-sizing: border-box; padding: 6.75pt 9.75pt;"><div class="MsoNormal">
<span style="color: #333333; font-family: "source sans pro" , sans-serif; font-size: 13pt; line-height: 18.5467px;"><a href="https://angular.io/cli/generate#component" style="box-sizing: border-box;"><span style="color: #cb3837;">Component</span></a><o:p></o:p></span></div>
</td><td style="background: white; border-bottom: none; border-left: none; border-right: 1pt solid rgb(216, 216, 216); border-top: 1pt solid rgb(216, 216, 216); box-sizing: border-box; padding: 6.75pt 9.75pt;"><div class="MsoNormal">
<code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: rgb(247 , 247 , 247); color: #333333; font-family: "consolas"; font-size: 13pt; line-height: 18.5467px;">ng g component my-new-component</span></code><span style="color: #333333; font-family: "source sans pro" , sans-serif; font-size: 13pt; line-height: 18.5467px;"><o:p></o:p></span></div>
</td></tr>
<tr style="box-sizing: border-box; mso-yfti-irow: 2;"><td style="background: rgb(244, 244, 244); border: 1pt solid rgb(216, 216, 216); box-sizing: border-box; padding: 6.75pt 9.75pt;"><div class="MsoNormal">
<span style="color: #333333; font-family: "source sans pro" , sans-serif; font-size: 13pt; line-height: 18.5467px;"><a href="https://angular.io/cli/generate#directive" style="box-sizing: border-box;"><span style="color: #cb3837;">Directive</span></a><o:p></o:p></span></div>
</td><td style="background: rgb(244, 244, 244); border-bottom: none; border-left: none; border-right: 1pt solid rgb(216, 216, 216); border-top: 1pt solid rgb(216, 216, 216); box-sizing: border-box; padding: 6.75pt 9.75pt;"><div class="MsoNormal">
<code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: rgb(247 , 247 , 247); color: #333333; font-family: "consolas"; font-size: 13pt; line-height: 18.5467px;">ng g directive my-new-directive</span></code><span style="color: #333333; font-family: "source sans pro" , sans-serif; font-size: 13pt; line-height: 18.5467px;"><o:p></o:p></span></div>
</td></tr>
<tr style="box-sizing: border-box; mso-yfti-irow: 3;"><td style="background: white; border: 1pt solid rgb(216, 216, 216); box-sizing: border-box; padding: 6.75pt 9.75pt;"><div class="MsoNormal">
<span style="color: #333333; font-family: "source sans pro" , sans-serif; font-size: 13pt; line-height: 18.5467px;"><a href="https://angular.io/cli/generate#pipe" style="box-sizing: border-box;"><span style="color: #cb3837;">Pipe</span></a><o:p></o:p></span></div>
</td><td style="background: white; border-bottom: none; border-left: none; border-right: 1pt solid rgb(216, 216, 216); border-top: 1pt solid rgb(216, 216, 216); box-sizing: border-box; padding: 6.75pt 9.75pt;"><div class="MsoNormal">
<code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: rgb(247 , 247 , 247); color: #333333; font-family: "consolas"; font-size: 13pt; line-height: 18.5467px;">ng g pipe my-new-pipe</span></code><span style="color: #333333; font-family: "source sans pro" , sans-serif; font-size: 13pt; line-height: 18.5467px;"><o:p></o:p></span></div>
</td></tr>
<tr style="box-sizing: border-box; mso-yfti-irow: 4;"><td style="background: rgb(244, 244, 244); border: 1pt solid rgb(216, 216, 216); box-sizing: border-box; padding: 6.75pt 9.75pt;"><div class="MsoNormal">
<span style="color: #333333; font-family: "source sans pro" , sans-serif; font-size: 13pt; line-height: 18.5467px;"><a href="https://angular.io/cli/generate#service" style="box-sizing: border-box;"><span style="color: #cb3837;">Service</span></a><o:p></o:p></span></div>
</td><td style="background: rgb(244, 244, 244); border-bottom: none; border-left: none; border-right: 1pt solid rgb(216, 216, 216); border-top: 1pt solid rgb(216, 216, 216); box-sizing: border-box; padding: 6.75pt 9.75pt;"><div class="MsoNormal">
<code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: rgb(247 , 247 , 247); color: #333333; font-family: "consolas"; font-size: 13pt; line-height: 18.5467px;">ng g service my-new-service</span></code><span style="color: #333333; font-family: "source sans pro" , sans-serif; font-size: 13pt; line-height: 18.5467px;"><o:p></o:p></span></div>
</td></tr>
<tr style="box-sizing: border-box; mso-yfti-irow: 5;"><td style="background: white; border: 1pt solid rgb(216, 216, 216); box-sizing: border-box; padding: 6.75pt 9.75pt;"><div class="MsoNormal">
<span style="color: #333333; font-family: "source sans pro" , sans-serif; font-size: 13pt; line-height: 18.5467px;"><a href="https://angular.io/cli/generate#class" style="box-sizing: border-box;"><span style="color: #cb3837;">Class</span></a><o:p></o:p></span></div>
</td><td style="background: white; border-bottom: none; border-left: none; border-right: 1pt solid rgb(216, 216, 216); border-top: 1pt solid rgb(216, 216, 216); box-sizing: border-box; padding: 6.75pt 9.75pt;"><div class="MsoNormal">
<code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: rgb(247 , 247 , 247); color: #333333; font-family: "consolas"; font-size: 13pt; line-height: 18.5467px;">ng g class my-new-class</span></code><span style="color: #333333; font-family: "source sans pro" , sans-serif; font-size: 13pt; line-height: 18.5467px;"><o:p></o:p></span></div>
</td></tr>
<tr style="box-sizing: border-box; mso-yfti-irow: 6;"><td style="background: rgb(244, 244, 244); border: 1pt solid rgb(216, 216, 216); box-sizing: border-box; padding: 6.75pt 9.75pt;"><div class="MsoNormal">
<span style="color: #333333; font-family: "source sans pro" , sans-serif; font-size: 13pt; line-height: 18.5467px;"><a href="https://angular.io/cli/generate#guard" style="box-sizing: border-box;"><span style="color: #cb3837;">Guard</span></a><o:p></o:p></span></div>
</td><td style="background: rgb(244, 244, 244); border-bottom: none; border-left: none; border-right: 1pt solid rgb(216, 216, 216); border-top: 1pt solid rgb(216, 216, 216); box-sizing: border-box; padding: 6.75pt 9.75pt;"><div class="MsoNormal">
<code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: rgb(247 , 247 , 247); color: #333333; font-family: "consolas"; font-size: 13pt; line-height: 18.5467px;">ng g guard my-new-guard</span></code><span style="color: #333333; font-family: "source sans pro" , sans-serif; font-size: 13pt; line-height: 18.5467px;"><o:p></o:p></span></div>
</td></tr>
<tr style="box-sizing: border-box; mso-yfti-irow: 7;"><td style="background: white; border: 1pt solid rgb(216, 216, 216); box-sizing: border-box; padding: 6.75pt 9.75pt;"><div class="MsoNormal">
<span style="color: #333333; font-family: "source sans pro" , sans-serif; font-size: 13pt; line-height: 18.5467px;"><a href="https://angular.io/cli/generate#interface" style="box-sizing: border-box;"><span style="color: #cb3837;">Interface</span></a><o:p></o:p></span></div>
</td><td style="background: white; border-bottom: none; border-left: none; border-right: 1pt solid rgb(216, 216, 216); border-top: 1pt solid rgb(216, 216, 216); box-sizing: border-box; padding: 6.75pt 9.75pt;"><div class="MsoNormal">
<code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: rgb(247 , 247 , 247); color: #333333; font-family: "consolas"; font-size: 13pt; line-height: 18.5467px;">ng g interface my-new-interface</span></code><span style="color: #333333; font-family: "source sans pro" , sans-serif; font-size: 13pt; line-height: 18.5467px;"><o:p></o:p></span></div>
</td></tr>
<tr style="box-sizing: border-box; mso-yfti-irow: 8;"><td style="background: rgb(244, 244, 244); border: 1pt solid rgb(216, 216, 216); box-sizing: border-box; padding: 6.75pt 9.75pt;"><div class="MsoNormal">
<span style="color: #333333; font-family: "source sans pro" , sans-serif; font-size: 13pt; line-height: 18.5467px;"><a href="https://angular.io/cli/generate#enum" style="box-sizing: border-box;"><span style="color: #cb3837;">Enum</span></a><o:p></o:p></span></div>
</td><td style="background: rgb(244, 244, 244); border-bottom: none; border-left: none; border-right: 1pt solid rgb(216, 216, 216); border-top: 1pt solid rgb(216, 216, 216); box-sizing: border-box; padding: 6.75pt 9.75pt;"><div class="MsoNormal">
<code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: rgb(247 , 247 , 247); color: #333333; font-family: "consolas"; font-size: 13pt; line-height: 18.5467px;">ng g enum my-new-enum</span></code><span style="color: #333333; font-family: "source sans pro" , sans-serif; font-size: 13pt; line-height: 18.5467px;"><o:p></o:p></span></div>
</td></tr>
<tr style="box-sizing: border-box; mso-yfti-irow: 9; mso-yfti-lastrow: yes;"><td style="background: white; border: 1pt solid rgb(216, 216, 216); box-sizing: border-box; padding: 6.75pt 9.75pt;"><div class="MsoNormal">
<span style="color: #333333; font-family: "source sans pro" , sans-serif; font-size: 13pt; line-height: 18.5467px;"><a href="https://angular.io/cli/generate#module" style="box-sizing: border-box;"><span style="color: #cb3837;">Module</span></a><o:p></o:p></span></div>
</td><td style="background: white; border-bottom: none; border-left: none; border-right: 1pt solid rgb(216, 216, 216); border-top: 1pt solid rgb(216, 216, 216); box-sizing: border-box; padding: 6.75pt 9.75pt;"><div class="MsoNormal">
<code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: rgb(247 , 247 , 247); color: #333333; font-family: "consolas"; font-size: 13pt; line-height: 18.5467px;">ng g module my-module</span></code></div>
</td></tr>
</tbody></table>
</div>
<div style="box-sizing: border-box; color: rgba(0, 0, 0, 0.85); margin: 0in 0in 12pt;">
<span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;"><span style="color: #333333; font-family: "source sans pro" , sans-serif; font-size: 12pt; text-indent: -0.25in;">1.<span style="font-family: "times new roman"; font-size: 7pt; font-stretch: normal; line-height: normal;">
</span></span><code style="border-radius: 2px; box-sizing: border-box; text-indent: -0.25in;"><span style="background: #f7f7f7; color: #333333; font-family: "consolas"; font-size: 12.0pt;">ng g module new-module</span></code><span style="color: #333333; font-family: "source sans pro" , sans-serif; text-indent: -0.25in;"> to create a new module</span>angular-cli will add reference to </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: #f7f7f7; font-family: "consolas"; font-size: 10.0pt;">components</span></code><span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;">, </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: #f7f7f7; font-family: "consolas"; font-size: 10.0pt;">directives</span></code><span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;"> and </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: #f7f7f7; font-family: "consolas"; font-size: 10.0pt;">pipes</span></code><span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;"> automatically in the </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: #f7f7f7; font-family: "consolas"; font-size: 10.0pt;">app.module.ts</span></code><span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;">. If you need to add this references to another custom module, follow
these steps:<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 4.5pt; margin-left: 12.0pt; mso-list: l0 level1 lfo1; mso-margin-top-alt: auto; tab-stops: list .5in; text-indent: -.25in;">
<!--[if !supportLists]--><span style="color: #333333; font-family: "source sans pro" , sans-serif; mso-bidi-font-family: "Source Sans Pro"; mso-fareast-font-family: "Source Sans Pro";">2.<span style="font-family: "times new roman"; font-size: 7pt; font-stretch: normal; line-height: normal;">
</span></span><!--[endif]--><span style="color: #333333; font-family: "source sans pro" , sans-serif;">call </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: #f7f7f7; color: #333333; font-family: "consolas"; font-size: 12.0pt;">ng g component new-module/new-component</span></code><span style="color: #333333; font-family: "source sans pro" , sans-serif;"><o:p></o:p></span></div>
<div style="box-sizing: border-box; color: rgba(0, 0, 0, 0.85); margin: 0in 0in 12pt;">
<span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;">This should add the new </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: #f7f7f7; font-family: "consolas"; font-size: 10.0pt;">component</span></code><span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;">, </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: #f7f7f7; font-family: "consolas"; font-size: 10.0pt;">directive</span></code><span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;"> or </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: #f7f7f7; font-family: "consolas"; font-size: 10.0pt;">pipe</span></code><span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;"> reference to the </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: #f7f7f7; font-family: "consolas"; font-size: 10.0pt;">new-module</span></code><span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;">you've created.<o:p></o:p></span></div>
<h3 style="box-sizing: border-box; font-size: 1.25rem; letter-spacing: -0.03rem; margin: 0.25in 0in 12pt; padding-bottom: 0rem;">
<span style="color: #111111; font-family: "source sans pro" , sans-serif;">Updating Angular CLI</span><span style="color: #111111; font-family: "source sans pro" , sans-serif; font-size: 13.5pt; line-height: 107%;"><o:p></o:p></span></h3>
<div style="box-sizing: border-box; color: rgba(0, 0, 0, 0.85); margin: 0in 0in 12pt;">
<span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;">If you're using Angular CLI </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: #f7f7f7; font-family: "consolas"; font-size: 10.0pt;">1.0.0-beta.28</span></code><span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;"> or less, you need to uninstall </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: #f7f7f7; font-family: "consolas"; font-size: 10.0pt;">angular-cli</span></code><span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;">package. It should be done due to changing of package's name and scope
from </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: #f7f7f7; font-family: "consolas"; font-size: 10.0pt;">angular-cli</span></code><span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;">to </span><code style="border-radius: 2px; box-sizing: border-box; font-variant-ligatures: none;"><span style="background: #f7f7f7; font-family: "consolas"; font-size: 10.0pt;">@angular/cli</span></code><span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;">:<o:p></o:p></span></div>
<pre style="background: #F7F7F7; border-radius: 2px; box-sizing: border-box; margin-bottom: .25in; overflow-x: auto;"><span class="source"><span style="font-size: 12pt;">npm uninstall -g angular-cli</span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="source"><span style="font-size: 12pt;">npm uninstall --save-dev angular-cli</span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<div style="box-sizing: border-box; color: rgba(0, 0, 0, 0.85); margin: 0in 0in 12pt;">
<span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;">To update Angular CLI to a new version, you must update
both the global package and your project's local package.<o:p></o:p></span></div>
<div style="box-sizing: border-box; color: rgba(0, 0, 0, 0.85); margin: 0in 0in 12pt;">
<span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;">Global package:<o:p></o:p></span></div>
<pre style="background: #F7F7F7; border-radius: 2px; box-sizing: border-box; margin-bottom: .25in; overflow-x: auto;"><span class="source"><span style="font-size: 12pt;">npm uninstall -g @angular/cli</span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="source"><span style="font-size: 12pt;">npm cache verify</span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="punctuation"><span style="fill: none; stroke-miterlimit: 10; stroke: rgb(0, 0, 0);"><i><span style="color: #999988; font-size: 12.0pt;">#</span></i></span><span class="comment"><i><span style="color: #999988; font-size: 12.0pt;"> if npm version is < 5 then use `npm cache clean` </span></i></span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="source"><span style="font-size: 12pt;">npm install -g @angular/cli@latest</span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<div style="box-sizing: border-box; color: rgba(0, 0, 0, 0.85); margin: 0in 0in 12pt;">
<span style="font-family: "source sans pro" , sans-serif; font-size: 13.5pt; letter-spacing: 0.1pt;">Local project package:<o:p></o:p></span></div>
<pre style="background: #F7F7F7; border-radius: 2px; box-sizing: border-box; margin-bottom: .25in;"><span class="source"><span style="font-size: 12pt;">rm -rf node_modules dist </span></span></pre>
<pre style="background: #F7F7F7; border-radius: 2px; box-sizing: border-box; margin-bottom: .25in;"><span class="source"><span style="font-size: 12pt;"><span style="fill: none; stroke-miterlimit: 10; stroke: rgb(0, 0, 0);"></span></span><span class="punctuation"><i><span style="color: #999988; font-size: 12.0pt;">#</span></i></span><span class="comment"><i><span style="color: #999988; font-size: 12.0pt;"> use rmdir /S/Q node_modules dist in Windows Command Prompt; </span></i></span></span></pre>
<pre style="background: #F7F7F7; border-radius: 2px; box-sizing: border-box; margin-bottom: .25in;"><span class="source"><span class="comment"><i><span style="color: #999988; font-size: 12.0pt;">use rm -r -fo node_modules,dist in Windows PowerShell </span></i></span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<pre style="background: #F7F7F7; margin-bottom: .25in;"><span class="source"><span style="font-size: 12pt;">npm install --save-dev @angular/cli@latest</span></span><span style="font-size: 12pt;"><o:p></o:p></span></pre>
<span style="font-family: "calibri" , sans-serif; font-size: 12pt;">npm install</span><br />
<span style="font-family: "calibri" , sans-serif; font-size: 12pt;"><br /></span>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 0in; margin-right: 0in; margin-top: 6.0pt;">
<span style="font-family: Georgia, serif;"><span style="font-size: 16pt; letter-spacing: -0.05pt;">Some </span><span style="font-size: 21.3333px; letter-spacing: -0.0666667px;">Useful</span><span style="font-size: 16pt; letter-spacing: -0.05pt;"> Flag for Angular CLI.</span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 0in; margin-right: 0in; margin-top: 6.0pt;">
<span style="font-family: Georgia, serif;"><span style="font-size: 16pt; letter-spacing: -0.05pt;"><br /></span></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 22.5pt; mso-list: l1 level1 lfo2; mso-margin-top-alt: auto; tab-stops: list .5in; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-family: "Georgia",serif; font-size: 16.0pt; letter-spacing: -.05pt; mso-bidi-font-family: Georgia; mso-fareast-font-family: Georgia;">1.<span style="font-family: "Times New Roman"; font-size: 7pt; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal;">
</span></span><!--[endif]--><span style="font-family: "Georgia",serif; font-size: 16.0pt; letter-spacing: -.05pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">To <b>open</b> project <b>automatically</b> in
a browser Tab<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: 12.0pt; margin-left: 0in; margin-right: 0in; margin-top: 32.25pt; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;">
<span style="font-family: "Courier New"; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><span style="background-color: #eeeeee;">ng
serve --o <br />
OR<br />
ng serve --open</span><o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 0in; margin-right: 0in; margin-top: 28.5pt;">
<span style="font-family: "Georgia",serif; font-size: 16.0pt; letter-spacing: -.05pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">2.
Create <b>project with routing file</b> by default<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 0in; margin-right: 0in; margin-top: 32.25pt; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;">
<span style="font-family: "Courier New"; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">ng
new ProjectName --routing<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 0in; margin-right: 0in; margin-top: 28.5pt;">
<span style="font-family: "Georgia",serif; font-size: 16.0pt; letter-spacing: -.05pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">3.
Run <b>project on different Port</b> (Apart from default Port 4200)<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 0in; margin-right: 0in; margin-top: 32.25pt; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;">
<span style="font-family: "Courier New"; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">ng
serve --port 4201<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 0in; margin-right: 0in; margin-top: 28.5pt;">
<span style="font-family: "Georgia",serif; font-size: 16.0pt; letter-spacing: -.05pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">4. <b>Changing</b> <b>Base
href</b> while build<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 0in; margin-right: 0in; margin-top: 32.25pt; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;">
<span style="font-family: "Courier New"; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">ng
build --base-href=yourValue<br />
OR<br />
ng build --base-href /myUrl/<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 0in; margin-right: 0in; margin-top: 28.5pt;">
<span style="font-family: "Georgia",serif; font-size: 16.0pt; letter-spacing: -.05pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">5.
For performance of your application<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 0in; margin-right: 0in; margin-top: 32.25pt; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;">
<span style="font-family: "Courier New"; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">*
ng build --prod<br />
* ng build --aot<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 0in; margin-right: 0in; margin-top: 28.5pt;">
<span style="font-family: "Georgia",serif; font-size: 16.0pt; letter-spacing: -.05pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">6.
Adding <b>custom</b> <b>prefix </b>for new project<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 0in; margin-right: 0in; margin-top: 32.25pt; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;">
<span style="font-family: "Courier New"; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">ng
new your-project <b>--prefix</b> custom<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 0in; margin-right: 0in; margin-top: 28.5pt;">
<span style="font-family: "Georgia",serif; font-size: 16.0pt; letter-spacing: -.05pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">7.
For <b>Inline Template/Style </b>of your component<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 0in; margin-right: 0in; margin-top: 32.25pt; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;">
<span style="font-family: "Courier New"; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">ng
g c button --inline-style --inline-template<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 0in; margin-right: 0in; margin-top: 28.5pt;">
<span style="font-family: "Georgia",serif; font-size: 16.0pt; letter-spacing: -.05pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">You
can anyone as per your requirements.<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 0in; margin-right: 0in; margin-top: 21.75pt;">
<span style="font-family: "Georgia",serif; font-size: 16.0pt; letter-spacing: -.05pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">8. <b>Avoid
Hashing of file names</b> while bundle your application<o:p></o:p></span></div>
<div class="MsoNormal" style="line-height: normal; margin-bottom: .0001pt; margin-bottom: 0in; margin-left: 0in; margin-right: 0in; margin-top: 32.25pt; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt;">
<span style="font-family: "inherit",serif; font-size: 12.0pt; mso-bidi-font-family: "Courier New"; mso-fareast-font-family: "Times New Roman";">ng build -prod
--output-hashing none<br />
OR<br />
ng build -prod --output-hashing=none</span></div>
<code>
</code><br />
<h3 style="text-align: left;">
</h3>
</div>
</div>
ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-40034461649265707222018-11-06T11:51:00.000+05:302018-11-09T11:43:12.159+05:30React Components in loop <div dir="ltr" style="text-align: left;" trbidi="on">
How to create dynamic react component in loop <br />
<br />
<pre>state={
Userinfo:[
{ name: 'Ravish Jha', Location: 'India'},
{ name: 'Ritika Jha', Location: 'USA'},
{ name: 'Raju Jha', Location: 'UK'}
]
} </pre>
<pre> </pre>
<div style="background-color: #1e1e1e; color: #d4d4d4; font-family: Consolas, 'Courier New', monospace; font-size: 14px; font-weight: normal; line-height: 19px; white-space: pre;">
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #dcdcaa;">render</span><span style="color: #d4d4d4;">() {</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">return</span><span style="color: #d4d4d4;"> (</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #569cd6;">div</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">className</span><span style="color: #d4d4d4;">=</span><span style="color: #ce9178;">"App"</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">{</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">this</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">state</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">Userinfo</span><span style="color: #d4d4d4;">.</span><span style="color: #dcdcaa;">map</span><span style="color: #d4d4d4;">(</span><span style="color: #9cdcfe;">info</span><span style="color: #d4d4d4;"> </span><span style="color: #569cd6;">=></span><span style="color: #d4d4d4;"> {</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: #c586c0;">return</span><span style="color: #d4d4d4;"> </span><span style="color: grey;"><</span><span style="color: #4ec9b0;">Useroutput</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;">UserName</span><span style="color: #d4d4d4;">= </span><span style="color: #569cd6;">{</span><span style="color: #9cdcfe;">info</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">name</span><span style="color: #569cd6;">}</span><span style="color: #d4d4d4;"> </span><span style="color: #9cdcfe;"><br />UserLocation</span><span style="color: #d4d4d4;">=</span><span style="color: #569cd6;">{</span><span style="color: #9cdcfe;">info</span><span style="color: #d4d4d4;">.</span><span style="color: #9cdcfe;">Location</span><span style="color: #569cd6;">}</span><span style="color: #d4d4d4;"> </span><span style="color: grey;">/></span></div>
<div>
<span style="color: #d4d4d4;"> })</span><span style="color: #569cd6;">}</span></div>
<div>
<span style="color: #d4d4d4;"> </span><span style="color: grey;"></</span><span style="color: #569cd6;">div</span><span style="color: grey;">></span></div>
<div>
<span style="color: #d4d4d4;"> </span></div>
<div>
<span style="color: #d4d4d4;"> );</span></div>
<div>
<span style="color: #d4d4d4;"> }</span></div>
</div>
<pre> </pre>
<div>
</div>
</div>
ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-3926571574325481472018-11-06T11:31:00.000+05:302018-11-06T11:31:18.681+05:30How to remove Checkout Step 2, Step 3, Step 4, Step 5 in opencart 2.3.0.2<div dir="ltr" style="text-align: left;" trbidi="on">
Dear Friends :)<br />
<br />
<b>Here is some Steps for remove Open cart checkout Steps:</b><br />
<br />
<span style="color: red;"><b>For steps 2 : { </b></span><b style="color: red;"><span style="color: red;">Billing Details }</span></b><br />
<br />
Open your checkout.tpl<br />
<span style="color: blue;">catalog\view\theme\default\template\checkout\checkout.tpl </span><br />
<span style="color: blue;"><br /></span>
<span style="color: orange;"><b>Steps: 1</b></span><br />
And find<span style="color: blue;"> </span><br />
<span style="color: blue;"><br /></span>
<br />
<pre class="lang-php prettyprint prettyprinted" style="background-color: #eeeeee; border: 0px; margin-bottom: 10px; max-height: 600px; orphans: 2; overflow: auto; padding: 5px; vertical-align: baseline; widows: 2; width: auto;"><span style="font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , serif;"><span style="font-size: 14px; line-height: 18px;">Line Number 129
$('#collapse-payment-address .panel-body').html(html);</span></span></pre>
And Replace with<br />
<br />
<pre class="lang-php prettyprint prettyprinted" style="background-color: #eeeeee; border: 0px; margin-bottom: 10px; max-height: 600px; orphans: 2; overflow: auto; padding: 5px; vertical-align: baseline; widows: 2; width: auto;"><span style="font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , serif;"><span style="font-size: 14px;">$('#collapse-payment-address .panel-body').html(html);
//Remove Billing Details
$('#collapse-payment-address #button-payment-address').trigger('click');</span></span></pre>
Enjoy Comments are welcome. <br />
<br />
<span style="color: red;"><b>For steps 3 :{ </b></span><b style="color: red;"><span style="color: red;">Delivery Details}</span></b><br />
<br />
Open your checkout.tpl<br />
<span style="color: blue;">catalog\view\theme\default\template\checkout\checkout.tpl </span><br />
And find<span style="color: blue;"> </span><br />
<span style="color: blue;"><br /></span>
<br />
<pre class="lang-php prettyprint prettyprinted" style="background-color: #eeeeee; border: 0px; margin-bottom: 10px; max-height: 600px; orphans: 2; overflow: auto; padding: 5px; vertical-align: baseline; widows: 2; width: auto;"><pre class="lang-php prettyprint prettyprinted" style="border: 0px; margin-bottom: 10px; max-height: 600px; overflow: auto; padding: 5px; vertical-align: baseline; width: auto;"><span style="font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , serif;"><span style="font-size: 14px;">Line Number 382
$('#collapse-shipping-address .panel-body').html(html);</span></span></pre>
</pre>
And Replace with<br />
<br />
<pre class="lang-php prettyprint prettyprinted" style="background-color: #eeeeee; border: 0px; margin-bottom: 10px; max-height: 600px; orphans: 2; overflow: auto; padding: 5px; vertical-align: baseline; widows: 2; width: auto;"><span style="font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , serif;"><span style="font-size: 14px;"> $('#collapse-shipping-address .panel-body').html(html);
// Remove Delivery Details
$('#collapse-shipping-address #button-shipping-address').trigger('click');</span></span></pre>
<br />
Enjoy Comments are welcome<br />
<div>
<br /></div>
<div>
<span style="color: red;"><b>For steps 4 : { </b></span><span style="color: red;"><b>Delivery Method</b></span><span style="color: red;"><b> </b></span><b style="color: red;">}</b><br />
<br />
Open your checkout.tpl<br />
<span style="color: blue;">catalog\view\theme\default\template\checkout\checkout.tpl </span><br />
<br />
And find<span style="color: blue;"> </span><br />
<span style="color: blue;"><br /></span>
<br />
<pre class="lang-php prettyprint prettyprinted" style="background-color: #eeeeee; border: 0px; margin-bottom: 10px; max-height: 600px; orphans: 2; overflow: auto; padding: 5px; vertical-align: baseline; widows: 2; width: auto;"><span style="font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , serif;"><span style="font-size: 14px; line-height: 18px;">$('#button-shipping-address').button('reset');
},
success: function(html) {
$('#collapse-shipping-method .panel-body').html(html);</span></span></pre>
And Replace with<br />
<br />
<pre class="lang-php prettyprint prettyprinted" style="background-color: #eeeeee; border: 0px; margin-bottom: 10px; max-height: 600px; orphans: 2; overflow: auto; padding: 5px; vertical-align: baseline; widows: 2; width: auto;"><span style="font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , serif;"><span style="font-size: 14px; line-height: 18px;">$('#button-shipping-address').button('reset');
},
success: function(html) {
//Ravish code
$('#collapse-shipping-method .panel-body').html(html);
$('#collapse-shipping-method #button-shipping-method').trigger('click');
</span></span></pre>
Enjoy Comments are welcome<br />
<br />
<span style="color: red;"><b>For steps 5 : { </b></span><span style="color: red;"><b>Payment Method </b></span><b style="color: red;">}</b><br />
<br />
Open your checkout.tpl<br />
<span style="color: blue;">catalog\view\theme\default\template\checkout\checkout.tpl </span><br />
<br />
And find<span style="color: blue;"> </span><br />
<span style="color: blue;"><br /></span>
<br />
<pre class="lang-php prettyprint prettyprinted" style="background-color: #eeeeee; border: 0px; margin-bottom: 10px; max-height: 600px; overflow: auto; padding: 5px; vertical-align: baseline; width: auto;"><span style="font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , serif;"><span style="font-size: 14px;"> $('#button-shipping-method').button('reset');
},
success: function(html) {
$('#collapse-payment-method .panel-body').html(html);
</span></span></pre>
And Replace with<br />
<br />
<pre class="lang-php prettyprint prettyprinted" style="background-color: #eeeeee; border: 0px; margin-bottom: 10px; max-height: 600px; overflow: auto; padding: 5px; vertical-align: baseline; width: auto;"><span style="font-family: "consolas" , "menlo" , "monaco" , "lucida console" , "liberation mono" , "dejavu sans mono" , "bitstream vera sans mono" , "courier new" , monospace , serif;"><span style="line-height: 18px;"><span style="font-size: 14px;"> $('#button-shipping-method').button('reset');
},
success: function(html) {
$('#collapse-payment-method .panel-body').html(html);
// Ravish Code
$('#collapse-payment-method #button-payment-method').trigger('click');
</span></span></span></pre>
Enjoy Comments are welcome<br />
Now You Removed all your steps if code is working fine please like and follow my page or comments on post<br />
<br />
Thanks for Visit My Blog<br />
<br /></div>
</div>
ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-61290566297403344502018-08-21T09:56:00.000+05:302018-08-21T09:56:18.016+05:30Css hack for IE11+, Edge <div dir="ltr" style="text-align: left;" trbidi="on">
<br />Hi<br />
CSS Hack for IE browser version IE 11 + and edge , window 10<br />
<br />@charset "";<br /><br />_:-ms-lang(x),<br /><br />.selector {<br /> top: 2px !important;<br /> }<br />
<br />
Let me know if code not working or facing some issue </div>
ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-89840693780906691502018-02-18T03:38:00.002+05:302018-02-18T03:38:44.720+05:30JavaScript rewrite URL <div dir="ltr" style="text-align: left;" trbidi="on">
<br />
if (document.URL == "http://www.domainName.com/") {<br />
console.log(document.URL);<br />
var restOfUrl = window.location.href.substr(11);<br />
window.location = "http://" + restOfUrl;<br />
}<br />
<br />
Comments are welcome<br />
<div>
<br /></div>
</div>
ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-56062599250327265002018-02-09T00:56:00.001+05:302018-02-09T00:56:19.220+05:30wordpress post subcategory list with count <div dir="ltr" style="text-align: left;" trbidi="on">
Hi,<br />
<br />
<div class="line number1 index0 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><span style="color: #464646; font-family: proxima-nova, Helvetica, Arial, sans-serif; font-size: 16px; white-space: normal;">When using WordPress as a CMS, or even as a blog you might want to display subcategories on category pages.</span></code></div>
<div class="line number1 index0 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><span style="color: #464646; font-family: proxima-nova, Helvetica, Arial, sans-serif; font-size: 16px; white-space: normal;"><br /></span></code></div>
<div class="line number1 index0 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><?php</code></div>
<div class="line number2 index1 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="php keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">if</code> <code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">(is_category()) {</code></div>
<div class="line number3 index2 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="php variable" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(170, 119, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$this_category</code> <code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">= get_category(</code><code class="php variable" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(170, 119, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$cat</code><code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">);</code></div>
<div class="line number4 index3 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">}</code></div>
<div class="line number5 index4 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">?></code></div>
<div class="line number6 index5 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><?php</code></div>
<div class="line number7 index6 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="php keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">if</code><code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">(</code><code class="php variable" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(170, 119, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$this_category</code><code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">->category_parent)</code></div>
<div class="line number8 index7 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="php variable" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(170, 119, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$this_category</code> <code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">= wp_list_categories('orderby=id&show_count=0</code></div>
<div class="line number9 index8 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">&title_li=&use_desc_for_title=1&child_of='.</code><code class="php variable" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(170, 119, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$this_category</code><code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">->category_parent.</code></div>
<div class="line number10 index9 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="php string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"&echo=0"</code><code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">); </code><code class="php keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">else</code></div>
<div class="line number11 index10 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="php variable" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(170, 119, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$this_category</code> <code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">= wp_list_categories('orderby=id&depth=1&show_count=0</code></div>
<div class="line number12 index11 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">&title_li=&use_desc_for_title=1&child_of='.</code><code class="php variable" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(170, 119, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$this_category</code><code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">->cat_ID.</code></div>
<div class="line number13 index12 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="php string" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: blue !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">"&echo=0"</code><code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">);</code></div>
<div class="line number14 index13 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php spaces" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"> </code><code class="php keyword" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(0, 102, 153) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; font-weight: bold !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">if</code> <code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">(</code><code class="php variable" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(170, 119, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$this_category</code><code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">) { ?> </code></div>
<div class="line number15 index14 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
</div>
<div class="line number16 index15 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><ul></code></div>
<div class="line number17 index16 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><?php </code><code class="php functions" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(255, 20, 147) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">echo</code> <code class="php variable" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: rgb(170, 119, 0) !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">$this_category</code><code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">; ?></code></div>
<div class="line number18 index17 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
</div>
<div class="line number19 index18 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"></ul></code></div>
<div class="line number20 index19 alt1" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
</div>
<div class="line number21 index20 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><?php } ?></code></div>
<div class="line number21 index20 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;"><br /></code></div>
<div class="line number21 index20 alt2" style="background: none white !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: #464646; direction: ltr !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 15px; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; white-space: pre-wrap !important; width: auto !important;">
<code class="php plain" style="background: none !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; box-shadow: none !important; box-sizing: content-box !important; color: black !important; direction: ltr !important; display: inline !important; float: none !important; font-family: Monaco, Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-size: 1em !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important;">Comments are welcome :)</code></div>
</div>
ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-91009492313062535222017-12-14T18:25:00.000+05:302018-03-29T11:58:04.728+05:30React toggle Class Name on click <div dir="ltr" style="text-align: left;" trbidi="on">
getInitialState: function() {<br />
return {<br />
myclass: "ravish"<br />
}<br />
},<br />
handleClick: function() {<br />
var temp="ravish";<br />
if( this.state.myclass=="ravish"){<br />
temp="ravish open"<br />
}<br />
this.setState({<br />
myclass: temp<br />
});<br />
<br />
<br />
<div id="change button" className={this.state.myclass} onClick={this.handleClick} ></div></div>
ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-43892396838386243882017-07-31T12:35:00.000+05:302017-07-31T12:35:10.360+05:30Fixed: input type number spinner hide<div dir="ltr" style="text-align: left;" trbidi="on">
Remove input number arrows firefox<br />
<br />
<br />
input[type=number]::-webkit-inner-spin-button,<br />
input[type=number]::-webkit-outer-spin-button {<br />
-webkit-appearance: none;<br />
margin: 0;<br />
}<br />
input[type=number] {<br />
-moz-appearance:textfield;<br />
}</div>
ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-39285989552308536942016-07-07T11:14:00.001+05:302016-07-07T11:14:05.269+05:30Widgets Admin Page Not Working<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="background-color: white; color: #333333; font-family: sans-serif; font-size: 13px; line-height: 22px;"> I needed to enable the widgets. <admin> </span><span style="background-color: white; color: #333333; font-family: sans-serif; font-size: 13px; line-height: 22px;">Widgets > Screen Options > Enable</span><br />
<span style="background-color: white; color: #333333; font-family: sans-serif; font-size: 13px; line-height: 22px;"><br /></span>
<span style="background-color: white; color: #333333; font-family: sans-serif; font-size: 13px; line-height: 22px;"><br /></span>
<span style="background-color: white; color: #333333; font-family: sans-serif; font-size: 13px; line-height: 22px;"><br /></span></div>
ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-61439590146871086372016-06-17T18:04:00.001+05:302016-06-17T18:11:07.603+05:30Gulp image sprite css gulp.spritesmith<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<pre style="background: rgb(247, 247, 247); border: 1px solid rgb(226, 226, 226); box-sizing: border-box; color: #4d4d4d; font-family: monospace, serif; font-size: 18px; line-height: 28px; overflow-x: auto; padding: 25px; white-space: pre-wrap;"><code style="box-sizing: border-box; font-family: monospace, serif; font-size: 1em; white-space: pre; word-wrap: inherit;">npm install --save-dev gulp.spritesmith</code></pre>
</div>
<div>
<br /></div>
<div>
<pre style="background: rgb(247, 247, 247); border: 1px solid rgb(226, 226, 226); box-sizing: border-box; color: #4d4d4d; font-family: monospace, serif; font-size: 18px; line-height: 28px; overflow-x: auto; padding: 25px; white-space: pre-wrap;"><code style="box-sizing: border-box; font-family: monospace, serif; font-size: 1em; white-space: pre; word-wrap: inherit;"><span class="kd" style="box-sizing: border-box; font-weight: bold;">var</span> <span class="nx" style="box-sizing: border-box;">gulp</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="nx" style="box-sizing: border-box;">require</span><span class="p" style="box-sizing: border-box;">(</span><span class="s1" style="box-sizing: border-box; color: #dd1144;">'gulp'</span><span class="p" style="box-sizing: border-box;">);</span>
<span class="kd" style="box-sizing: border-box; font-weight: bold;">var</span> <span class="nx" style="box-sizing: border-box;">spritesmith</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="nx" style="box-sizing: border-box;">require</span><span class="p" style="box-sizing: border-box;">(</span><span class="s1" style="box-sizing: border-box; color: #dd1144;">'gulp.spritesmith'</span><span class="p" style="box-sizing: border-box;">);</span></code></pre>
</div>
<div>
<br /></div>
<div>
<pre style="background: rgb(247, 247, 247); border: 1px solid rgb(226, 226, 226); box-sizing: border-box; color: #4d4d4d; font-family: monospace, serif; font-size: 18px; line-height: 28px; overflow-x: auto; padding: 25px; white-space: pre-wrap;"><code style="box-sizing: border-box; font-family: monospace, serif; font-size: 1em; white-space: pre; word-wrap: inherit;"><span class="nx" style="box-sizing: border-box;">gulp</span><span class="p" style="box-sizing: border-box;">.</span><span class="nx" style="box-sizing: border-box;">task</span><span class="p" style="box-sizing: border-box;">(</span><span class="s1" style="box-sizing: border-box; color: #dd1144;">'sprite'</span><span class="p" style="box-sizing: border-box;">,</span> <span class="kd" style="box-sizing: border-box; font-weight: bold;">function</span> <span class="p" style="box-sizing: border-box;">()</span> <span class="p" style="box-sizing: border-box;">{</span>
<span class="kd" style="box-sizing: border-box; font-weight: bold;">var</span> <span class="nx" style="box-sizing: border-box;">spriteData</span> <span class="o" style="box-sizing: border-box; font-weight: bold;">=</span> <span class="nx" style="box-sizing: border-box;">gulp</span><span class="p" style="box-sizing: border-box;">.</span><span class="nx" style="box-sizing: border-box;">src</span><span class="p" style="box-sizing: border-box;">(</span><span class="s1" style="box-sizing: border-box; color: #dd1144;">'img/sprites/*.png'</span><span class="p" style="box-sizing: border-box;">)</span>
<span class="p" style="box-sizing: border-box;">.</span><span class="nx" style="box-sizing: border-box;">pipe</span><span class="p" style="box-sizing: border-box;">(</span><span class="nx" style="box-sizing: border-box;">spritesmith</span><span class="p" style="box-sizing: border-box;">({</span>
<span class="cm" style="box-sizing: border-box; color: #999988; font-style: italic;">/* this whole image path is used in css background*/</span>
<span class="na" style="box-sizing: border-box; color: teal;">imgName</span><span class="p" style="box-sizing: border-box;">:</span> <span class="s1" style="box-sizing: border-box; color: #dd1144;">'../img/sprite.png'</span><span class="p" style="box-sizing: border-box;">,</span>
<span class="na" style="box-sizing: border-box; color: teal;">cssName</span><span class="p" style="box-sizing: border-box;">:</span> <span class="s1" style="box-sizing: border-box; color: #dd1144;">'sprite.css'</span>
<span class="p" style="box-sizing: border-box;">}));</span>
<span class="nx" style="box-sizing: border-box;">spriteData</span><span class="p" style="box-sizing: border-box;">.</span><span class="nx" style="box-sizing: border-box;">img</span><span class="p" style="box-sizing: border-box;">.</span><span class="nx" style="box-sizing: border-box;">pipe</span><span class="p" style="box-sizing: border-box;">(</span><span class="nx" style="box-sizing: border-box;">gulp</span><span class="p" style="box-sizing: border-box;">.</span><span class="nx" style="box-sizing: border-box;">dest</span><span class="p" style="box-sizing: border-box;">(</span><span class="s1" style="box-sizing: border-box; color: #dd1144;">'img'</span><span class="p" style="box-sizing: border-box;">));</span>
<span class="nx" style="box-sizing: border-box;">spriteData</span><span class="p" style="box-sizing: border-box;">.</span><span class="nx" style="box-sizing: border-box;">css</span><span class="p" style="box-sizing: border-box;">.</span><span class="nx" style="box-sizing: border-box;">pipe</span><span class="p" style="box-sizing: border-box;">(</span><span class="nx" style="box-sizing: border-box;">gulp</span><span class="p" style="box-sizing: border-box;">.</span><span class="nx" style="box-sizing: border-box;">dest</span><span class="p" style="box-sizing: border-box;">(</span><span class="s1" style="box-sizing: border-box; color: #dd1144;">'css'</span><span class="p" style="box-sizing: border-box;">));</span>
<span class="p" style="box-sizing: border-box;">});</span></code></pre>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<span style="background-color: white; color: #333333; font-family: "arial" , "tahoma" , "helvetica" , "freesans" , sans-serif; font-size: 14.85px; line-height: 20.79px;">Enjoy Comments are welcome </span></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
</div>
ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-91800382158443873632016-04-27T22:16:00.002+05:302016-04-27T22:16:32.503+05:30 CSS multiline text with ellipsis<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
HTML<br />
<br />
<h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</h2><br />
<br />
<br />
Css<br />
<br />
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);<br />
* {<br />
margin: 0;<br />
padding: 0;<br />
-moz-box-sizing: border-box;<br />
-webkit-box-sizing: border-box;<br />
box-sizing: border-box;<br />
}<br />
<br />
body {<br />
padding: 3em 2em;<br />
font-family: 'Open Sans', Arial, sans-serif;<br />
color: #cf6824;<br />
background: #f7f5eb;<br />
}<br />
h2 {<br />
display: block;<br />
/* Fallback for non-webkit */<br />
display: -webkit-box;<br />
max-width: 400px;<br />
height: 145.6px;<br />
/* Fallback for non-webkit */<br />
margin: 0 auto;<br />
font-size: 26px;<br />
line-height: 1.4;<br />
-webkit-line-clamp: 4;<br />
-webkit-box-orient: vertical;<br />
overflow: hidden;<br />
text-overflow: ellipsis;<br />
}<br />
<br /></div>
</div>
ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-84900392102913690282016-02-23T15:25:00.003+05:302016-02-23T15:26:26.969+05:30Fasttrack sunglasses on best price <div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://shopdeal.in/product/titan-eye-plus-full-rim-wayfarer-sunglasses-g209ctml9a/"><img alt=" Shopdeal.in" border="0" src="http://shopdeal.in/wp-content/uploads/2016/02/G209CTML9A.jpg" height="320" width="320" /></a></div>
<br /></div>
ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0tag:blogger.com,1999:blog-7574635504857077352.post-70570182223539149202015-09-24T13:23:00.000+05:302015-09-24T13:23:11.461+05:30WC Vendor Allow vendors to view all media<div dir="ltr" style="text-align: left;" trbidi="on">
Hi friends<br />
If you are using Wc Vendor plugin and <br />
If you want <span style="background-color: white; color: #363d40; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: -0.6px; line-height: 32px;">Allow vendors to view all media library</span><br />
<span style="color: #363d40; font-family: Open Sans, Helvetica Neue, Helvetica, sans-serif;"><span style="background-color: white; letter-spacing: -0.6px; line-height: 32px;">Step 1 </span></span><br />
<span style="color: #363d40; font-family: Open Sans, Helvetica Neue, Helvetica, sans-serif;"><span style="background-color: white; letter-spacing: -0.6px; line-height: 32px;">Please open file in editor</span></span><br />
<span style="color: #363d40; font-family: Open Sans, Helvetica Neue, Helvetica, sans-serif;"><span style="background-color: white; letter-spacing: -0.6px; line-height: 32px;">wp-content > plugins > wc-vendors > classes > admin > </span><span style="letter-spacing: -0.6px; line-height: 32px;">class-admin-users.php</span></span><br />
<span style="color: #363d40; font-family: Open Sans, Helvetica Neue, Helvetica, sans-serif;"><span style="letter-spacing: -0.6px; line-height: 32px;"><br /></span></span>
<span style="color: #363d40; font-family: Open Sans, Helvetica Neue, Helvetica, sans-serif;"><span style="letter-spacing: -0.6px; line-height: 32px;"><b>And find filter </b></span></span><br />
<span style="font-family: Open Sans, Helvetica Neue, Helvetica, sans-serif;"><span style="letter-spacing: -0.6px; line-height: 32px;"><span style="color: lime;">Filter user attachments so they only see their own attachments</span><span style="color: #363d40;"> </span></span></span><br />
<span style="font-family: Open Sans, Helvetica Neue, Helvetica, sans-serif;"><span style="letter-spacing: -0.6px; line-height: 32px;"><span style="color: #363d40;"><br /></span></span></span>
<span style="font-family: Open Sans, Helvetica Neue, Helvetica, sans-serif;"><span style="letter-spacing: -0.6px; line-height: 32px;"><span style="color: #363d40;">And remove </span></span></span><br />
<span style="font-family: Open Sans, Helvetica Neue, Helvetica, sans-serif;"><span style="letter-spacing: -0.6px; line-height: 32px;"><b><span style="color: red;">Filter Code under this filter</span></b><span style="color: #363d40;"> </span></span></span><span style="color: #363d40; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif; letter-spacing: -0.6px; line-height: 32px;"> </span><br />
<span style="color: #363d40; font-family: Open Sans, Helvetica Neue, Helvetica, sans-serif;"><span style="letter-spacing: -0.6px; line-height: 32px;"><br /></span></span></div>
ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com3tag:blogger.com,1999:blog-7574635504857077352.post-21401160290772049602015-08-25T00:23:00.003+05:302016-10-30T21:18:11.258+05:30OPENCART ADMIN BLANK PAGE<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="color: #666666; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px;">
<span style="background-color: white;">Our store uses the Script Opencart. It was showing blank page while tried to access Admin page.<br />I have pasted the following lines in Index.php of Admin directory and checked for errors.<br />ini_set(‘display_errors’, 1);<br />ini_set(‘log_errors’, 1);<br />error_reporting(E_ALL);</span></div>
<div style="color: #666666; font-family: 'Open Sans', sans-serif; font-size: 13px; line-height: 20px; margin-bottom: 10px;">
<span style="background-color: white;">After that while reloading the Admin page, I found the error was in the directory path. After renaming the correct directory name in Config.php inside Admin folder, it started working fine..<br />Finally the blank page problem solved!</span><br />
<span style="background-color: white;"><br /></span>
<span style="background-color: white;">Comments Are welcome. </span></div>
</div>
ravish webdesignerhttp://www.blogger.com/profile/01885936662173234015noreply@blogger.com0