tag:blogger.com,1999:blog-53667673586530009932024-03-11T00:33:57.381-07:00The Web Stopincredibleopinionshttp://www.blogger.com/profile/13158742285797662777noreply@blogger.comBlogger13125tag:blogger.com,1999:blog-5366767358653000993.post-48198019006022329412020-04-17T14:50:00.001-07:002020-04-17T16:15:20.024-07:00Authorization Terms You Hear A Lot<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN5otbcvt6P_Wagg9e1WRCKfCRAkqu4fvUCnaIyAcfly3-NE3B1M9xUyptTKlZm3nHhwPfs03TEMAMbSvghJOncM5Ow91II2twk4BoI2maOBZ9k-YTguTHlvX-mbWcbaegLD0EV_B84qE/s1600/authorization-terms.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN5otbcvt6P_Wagg9e1WRCKfCRAkqu4fvUCnaIyAcfly3-NE3B1M9xUyptTKlZm3nHhwPfs03TEMAMbSvghJOncM5Ow91II2twk4BoI2maOBZ9k-YTguTHlvX-mbWcbaegLD0EV_B84qE/s320/authorization-terms.png" width="640" /></a></div>
<br />
If you are a developer or not, you might come across some scaring abbreviations when signing your email or social media accounts like SSO, OAuth etc. Ever wondered what service in the background passes your gmail credentials to login into third-party applications?
<br />
<br />
Let's see what some of these terms mean:
</div>
<ul style="text-align: left;">
<li><b>SSO - </b>Single Sign-On (SSO) is a session and user authentication service that permits a user to use one set of login credentials (e.g., name and password) to access multiple applications. <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr2P830DjRnf4ACvHP6TeFnX-G1kTRP-yvCFHga3hcPLWn4pBkgbcBTLZ2Qpa812q35TZBg5L3MvlB1wpwFOxVP9K8gg3I1MwJZYrtxE_bykW5CAxsoALF7XhgLfvRzjCwJ1UDxMwxIa8/s1600/SSO+%25281%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr2P830DjRnf4ACvHP6TeFnX-G1kTRP-yvCFHga3hcPLWn4pBkgbcBTLZ2Qpa812q35TZBg5L3MvlB1wpwFOxVP9K8gg3I1MwJZYrtxE_bykW5CAxsoALF7XhgLfvRzjCwJ1UDxMwxIa8/s1600/SSO+%25281%2529.png" /></a></div>
</li>
<li><b>SAML -</b>
SAML (Security Assertion Markup Language) is an umbrella standard that encompasses profiles, bindings and constructs to achieve Single Sign On (SSO), Federation and Identity Management. OAuth (Open Authorization) is a standard for authorization of resources. It does not deal with authentication.<br /><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiyYzVWyfX8BzyfV6g_8wCsBkgCnzzhTgiQ63qRmyAfdQnjPxBCDAyWRp1hS3Y8qoxZza5PO-R17EiXjg1psV-KogEqfV7PnzXKxUISaPZ9BRQWw5E48SEzDmJ3jU5qjvVDR0P6Xa3m_U/s1600/SAML+%25281%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiyYzVWyfX8BzyfV6g_8wCsBkgCnzzhTgiQ63qRmyAfdQnjPxBCDAyWRp1hS3Y8qoxZza5PO-R17EiXjg1psV-KogEqfV7PnzXKxUISaPZ9BRQWw5E48SEzDmJ3jU5qjvVDR0P6Xa3m_U/s1600/SAML+%25281%2529.png" /></a></div>
<b>SAML SSO </b>works by transferring the user's identity from one place (the identity provider) to another (the service provider). This is done through an exchange of digitally signed XML documents. The user wants to log in to a remote application, such as a support or accounting application (the service provider).</li>
<li><b>OAuth -</b>
OAuth is an open standard for authorization, commonly used as a way for Internet users to log into third party websites using their Microsoft, Google, Facebook or Twitter accounts without exposing their password.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK1ewhYN1pdrZQIH2Jj9PrxeShAP-jC9NIzkJ8qdJG2ligosOyiM3V_VDxphPMpWYxYGOxEf74_Q3fPXoPnNAqm3w8hK56J97_0jVMjFLHsT9olR5JmxxWxpmdm9twBKXuePDAlj_6v4o/s1600/OAuth.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="OAUTH - The Web Stop" border="0" data-original-height="768" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK1ewhYN1pdrZQIH2Jj9PrxeShAP-jC9NIzkJ8qdJG2ligosOyiM3V_VDxphPMpWYxYGOxEf74_Q3fPXoPnNAqm3w8hK56J97_0jVMjFLHsT9olR5JmxxWxpmdm9twBKXuePDAlj_6v4o/s1600/OAuth.png" title="OAUTH - The Web Stop" /></a></div>
<br />
To Start, OAuth is not the same thing as Single Sign On (SSO). While they have some similarities — they are very different. OAuth is an authorization protocol. SSO is a high-level term used to describe a scenario in which a user uses the same credentials to access multiple domains.</li>
<!-- in post ad -- >
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- the web stop in post -->
<ins class="adsbygoogle hidead" data-ad-client="ca-pub-8470413584014564" data-ad-format="auto" data-ad-slot="4606458736" style="display: block;"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<li><b>Auth0 -</b>
Auth0 provides authentication and authorization as a service. It gives developers and companies the building blocks they need in order to secure their applications, without having to become security experts.</li>
<li><b>JWT -</b> A JSON Web Token (JWT) is a means of representing claims to be transferred between two parties. The claims in a JWT are encoded as a JSON object that is digitally signed using JSON Web Signature (JWS) and/or encrypted using JSON Web Encryption (JWE).
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJoIEofpH3hV9BLh4hEqboLCwc6s5_TwX4EqXKp4NKLRLZ_ik8JHD1EKD9uJJ520UvA-1drrBTcfLIkIxW1CkJRHJA_jluVjHWVXoXE_-ROc7VM7G1b7bfye9a_sVgr2_eGonFfYE51oQ/s1600/JWT.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="JWT - The Web Stop" border="0" data-original-height="768" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJoIEofpH3hV9BLh4hEqboLCwc6s5_TwX4EqXKp4NKLRLZ_ik8JHD1EKD9uJJ520UvA-1drrBTcfLIkIxW1CkJRHJA_jluVjHWVXoXE_-ROc7VM7G1b7bfye9a_sVgr2_eGonFfYE51oQ/s1600/JWT.png" title="JWT - The Web Stop" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFi_hblGSOY3BC8z3UfIESQS0D-q3aMh9vaCREPDcX6HrMzC6yBGFfDImFrI6NsPqJxtimL-ltIYJvgOVRue1nzODF8P0dRFF_lPn5hQThNfKxs8Pr6dwR_IZvS0lO2UhPX8fAV5zqoY4/s1600/JWT+TOKEN.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="JWT Token - The Web Stop" border="0" data-original-height="768" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFi_hblGSOY3BC8z3UfIESQS0D-q3aMh9vaCREPDcX6HrMzC6yBGFfDImFrI6NsPqJxtimL-ltIYJvgOVRue1nzODF8P0dRFF_lPn5hQThNfKxs8Pr6dwR_IZvS0lO2UhPX8fAV5zqoY4/s1600/JWT+TOKEN.png" title="JWT Token - The Web Stop" /></a></div>
<br /><br />
In other words, JWT is a JSON object as a safe way to represent a set of information between two parties. The token is composed of a header, a payload, and a signature. The authentication server then creates the JWT and sends it to the user.</li>
<li><b>PCI - </b>The Payment Card Industry Data Security Standard (PCI DSS) applies to companies of any size that accept credit card payments. If your company intends to accept card payment, and store, process and transmit cardholder data, you need to host your data securely with a PCI compliant hosting provider.</li>
</ul>
</div>
incredibleopinionshttp://www.blogger.com/profile/13158742285797662777noreply@blogger.com0tag:blogger.com,1999:blog-5366767358653000993.post-56049220701324058532018-02-04T19:20:00.004-08:002018-02-04T19:20:59.002-08:00Flexbox Responsive Grid System<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP1XtafKqnrlemkGPsxpoY9XOBSalpe-62yp6AtoKhaB8YCaW_MSnMtbFv8Iz4EgVhZLRnxqAKKdbhfhitSHYLikjSFTPHTF2iC7yrawYKPBjg7UkE83y6KDvRHLZWfL0HRQkEn8gStrQ/s1600/FLEXBOX.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The Web Stop - Flexbox grid system" border="0" data-original-height="768" data-original-width="1024" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP1XtafKqnrlemkGPsxpoY9XOBSalpe-62yp6AtoKhaB8YCaW_MSnMtbFv8Iz4EgVhZLRnxqAKKdbhfhitSHYLikjSFTPHTF2iC7yrawYKPBjg7UkE83y6KDvRHLZWfL0HRQkEn8gStrQ/s400/FLEXBOX.png" title="The Web Stop - Flexbox grid system" width="400" /></a></div>
<br />
<br />
<h2 style="text-align: left;">
Why Flexbox?</h2>
<div>
Most of the modern responsive grid systems lack the flexibility to support the functionality of shrinking, stretching, reordering etc. Also, when the size of the items are dynamically provided (not known), there is no efficient way of aligning them in a container to maintain responsiveness effectively. Flexbox was introduced to solve this problem in small and large-scale applications.</div>
<br />
<br />
<h2>
How Flexbox Works And Its Properties</h2>
<div>
<br /></div>
<div>
To start using flexbox properties on a container and its flex items, use this on a parent container:</div>
<br />
<pre><code>
display: flex; //or
display: inline-flex;
</code>
</pre>
<br />
<pre><code>
flex-direction: row;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;
</code>
</pre>
Based on our choice if we want our flex items to be aligned in horizontal or vertical manner, we can choose the flex-direction as row or column respectively. In addition to the row or column properties, flexbox also provides the flexibility of <code>row-reverse</code> and <code>column-reverse</code> option.
<br />
<br />
When we choose <code>flex-direction:row;</code>, the x-axis becomes the main axis and the y-axis becomes the cross-axis whereas in <code>flex-direction: column;</code> option, x-axis works as a cross-axis and y-axis works as main-axis.
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcqlSuKQJxRfUQsoodwbcmcN9SUxIjr_QTU1BzDZ_2T9clFNo9Ca3-9ciTxmFJAlYfWvRRff_566-TZeuzFzJbGS64_YBC72osVJquxfCzz2dUTd6iYfBTmCbxoY_whSEh_CX5aiVVUtE/s1600/flex-direction+%25281%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="flexbox" border="0" data-original-height="768" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcqlSuKQJxRfUQsoodwbcmcN9SUxIjr_QTU1BzDZ_2T9clFNo9Ca3-9ciTxmFJAlYfWvRRff_566-TZeuzFzJbGS64_YBC72osVJquxfCzz2dUTd6iYfBTmCbxoY_whSEh_CX5aiVVUtE/s1600/flex-direction+%25281%2529.png" title="flexbox" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="clear: both; text-align: center;">
Different properties of Flexbox</h3>
<div>
<h4 style="text-align: left;">
1<i>. justify-content</i></h4>
This property will arrange the flex items on the main-axis in one of the following arrangements:
<br />
<pre><code>
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-around;
justify-content: space-between;
</code>
</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrYjXVfwfcyfuWO_MzC87d6Q7K4aZJZkzrkLvziBzXOTXZmh_5UJxU3FHyGJglvMBhAjY767yBDPsaNURpJNmgjRLg880cUzS3_ktHRyJvAjNCFVUuM8puFlLPYojQE7-ciwn3Ca2V3YI/s1600/justify-content.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="justify-content" border="0" data-original-height="768" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrYjXVfwfcyfuWO_MzC87d6Q7K4aZJZkzrkLvziBzXOTXZmh_5UJxU3FHyGJglvMBhAjY767yBDPsaNURpJNmgjRLg880cUzS3_ktHRyJvAjNCFVUuM8puFlLPYojQE7-ciwn3Ca2V3YI/s1600/justify-content.png" title="justify-content" /></a></div>
<br />
<br />
<h4 style="text-align: left;">
2<i>. align-items</i></h4>
This property will arrange the flex items on the cross-axis in one of the following arrangements:<br />
<pre><code>
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: stretch;
align-items: baseline;
</code>
</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGWSmqK8jMxLSvvMvfXWnJYlnepM6o19iI7mWZkDez9lgzTUh8kSmd3Qq7sLU5JJx6JfCOCXmhMngWZQW3OyYRiu-tMvosqu5bqTjVTo69yV7H1999NGoHwmcGNGvS_iu6_Le81N_Dt_c/s1600/align-items.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="align-items" border="0" data-original-height="768" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGWSmqK8jMxLSvvMvfXWnJYlnepM6o19iI7mWZkDez9lgzTUh8kSmd3Qq7sLU5JJx6JfCOCXmhMngWZQW3OyYRiu-tMvosqu5bqTjVTo69yV7H1999NGoHwmcGNGvS_iu6_Le81N_Dt_c/s1600/align-items.png" title="align-items" /></a></div>
<br />
In the <code>align-items: baseline;</code> flex items are aligned based on their baseline. The baseline is the line where most of the letters sit. <a href="https://en.wikipedia.org/wiki/Baseline_(typography)">Read more about the baseline</a>.
<br />
<br />
The tallest flex item in the row defines the baseline and all the other flex items are aligned based on the same baseline. In this example, number 4 is the tallest and all the other flex items are aligned based on number 4's baseline.
<br />
<br />
<h4 style="text-align: left;">
3<i>. flex-wrap</i></h4>
This property determines if the flex items should be arranged in the same line or wrapped onto multiple lines in the same flex-container.
<br />
<pre><code>
flex-wrap: no-wrap;
flex-wrap: wrap;
flex-wrap: wrap-reverse;
</code>
</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi01NAljkY02uVqHKbuY9_u6YiYJXk6977Gi-oV7pRVwQ3_9qk1fPuNu5buL_E5-FyPMbtTQxBcCYwL_Qx1sjDZwHTBcpN1sSwXOsk964yOwGPgDb5Jj8t-Q-IVqkMzqFeqVt6O-3X-H2U/s1600/flex-wrap.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="flex-wrap" border="0" data-original-height="768" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi01NAljkY02uVqHKbuY9_u6YiYJXk6977Gi-oV7pRVwQ3_9qk1fPuNu5buL_E5-FyPMbtTQxBcCYwL_Qx1sjDZwHTBcpN1sSwXOsk964yOwGPgDb5Jj8t-Q-IVqkMzqFeqVt6O-3X-H2U/s1600/flex-wrap.png" title="flex-wrap" /></a></div>
<br />
<br />
<h4 style="text-align: left;">
4<i>. align-content</i></h4>
This property just like <code>justify-content</code> determines the arrangement of the flex items but in cross-axis when there is an extra line. This property does not produce any result if there is only one line of flex items.<br />
<pre><code>
align-content: flex-start;
align-content: flex-end;
align-content: center;
align-content: space-around;
align-content: space-between;
</code>
</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8kTx8mlq2rYKiWJZeiik1Za8wfN-Ps1NZx8qtV8EMnwPQmrD8L2CI7HZzHZ2NVkwPy7IA7NKjdCI3Kh6lVpPDQRZ2s0WLM-nc5IIPFgq1fyFov7ga5XkQz8xLBOt_UkAOwNx0g2xo3Jk/s1600/align-content.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="align-content" border="0" data-original-height="768" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8kTx8mlq2rYKiWJZeiik1Za8wfN-Ps1NZx8qtV8EMnwPQmrD8L2CI7HZzHZ2NVkwPy7IA7NKjdCI3Kh6lVpPDQRZ2s0WLM-nc5IIPFgq1fyFov7ga5XkQz8xLBOt_UkAOwNx0g2xo3Jk/s1600/align-content.png" title="align-content" /></a></div>
<br />
<br />
<h4 style="text-align: left;">
5<i>. order</i></h4>
This property defines the order in which the flex items should be displayed either in row or column flexbox layout. By default, 0 is the order.<br />
<pre><code>
order: {order-number};
</code>
</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrxxFm4HOXHSF_YOqj9c2iXVzPhaktTFmiHkCxZll7UyKvtLw5_bbofUZZOfWBzM7C8sWqB3UfrnWoHqAemOzmnqbuGG5-UUhoQuf32Z5YAlk1KVuNhNRzTYbXJnUvDm7Mydv2XJ0aAR4/s1600/order.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="order" border="0" data-original-height="768" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrxxFm4HOXHSF_YOqj9c2iXVzPhaktTFmiHkCxZll7UyKvtLw5_bbofUZZOfWBzM7C8sWqB3UfrnWoHqAemOzmnqbuGG5-UUhoQuf32Z5YAlk1KVuNhNRzTYbXJnUvDm7Mydv2XJ0aAR4/s1600/order.png" title="order" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<h4 style="text-align: left;">
6<i>. align-self</i></h4>
This property defines the alignment of the selected flex item inside the flex container. This property overrides the settings of <code>align-items</code> property.<br />
<pre><code>
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: stretch;
align-self: baseline;
</code>
</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif2hEEVJqnJzUiXuW9-8nex9_vJi55s5PymEXtT3bs9nWkJx-vLiv2rpfD9OCSGu9qxRJCbb4jT564fvAlECaykGGsI2Bhgc0VTGpmUTCC4FGr2VhNbqT6WYxMt7wJ1EcRUc0ZZlRIWas/s1600/ailgn-self.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="align-self" border="0" data-original-height="768" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif2hEEVJqnJzUiXuW9-8nex9_vJi55s5PymEXtT3bs9nWkJx-vLiv2rpfD9OCSGu9qxRJCbb4jT564fvAlECaykGGsI2Bhgc0VTGpmUTCC4FGr2VhNbqT6WYxMt7wJ1EcRUc0ZZlRIWas/s1600/ailgn-self.png" title="align-self" /></a></div>
<br />
<br />
<h4 style="text-align: left;">
7<i>. flex-grow</i></h4>
This property defines the growth of the selected flex-item relative to the other flex items in the flex container. 0 is the default value for this property.<br />
<pre><code>
flex-grow: {number};
</code>
</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnllXV9ASVMEArzyRhTIGuk-duE8_0_RVmPvAFCQjOxfV7IxfocyxJSwXjsMer8TCnJiScI86ao9uLw3eP3kwSSINPg3usLlO329Dlu-A52KH5cwVByL2GH7C-PZOMOCRhPGw4Lt8NmUU/s1600/flex-grow.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="flex-grow" border="0" data-original-height="768" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnllXV9ASVMEArzyRhTIGuk-duE8_0_RVmPvAFCQjOxfV7IxfocyxJSwXjsMer8TCnJiScI86ao9uLw3eP3kwSSINPg3usLlO329Dlu-A52KH5cwVByL2GH7C-PZOMOCRhPGw4Lt8NmUU/s1600/flex-grow.png" title="flex-grow" /></a>
</div>
<br />
<br />
<h4 style="text-align: left;">
8<i>. flex-shrink</i></h4>
This property defines the shrink factor of the selected flex-item relative to the other flex items in the flex container. 1 is the default value for this property.<br />
<pre><code>
flex-shrink: {number};
</code>
</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0WgJ9L8i7OCHfNOwBvkWXVf-SZ7MhiEmCwV9W_zTII7-YDTNizGMNZsIKGACyc9N0wIhefG2_bbKtVL-PIJgkIvzAefh39UqeEl2fflhrrHjTIMniyHHnns2pPa8n0BT3mCKejDInG2U/s1600/flex-shrink.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="flex-shrink" border="0" data-original-height="768" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0WgJ9L8i7OCHfNOwBvkWXVf-SZ7MhiEmCwV9W_zTII7-YDTNizGMNZsIKGACyc9N0wIhefG2_bbKtVL-PIJgkIvzAefh39UqeEl2fflhrrHjTIMniyHHnns2pPa8n0BT3mCKejDInG2U/s1600/flex-shrink.png" title="flex-shrink" /></a></div>
<br />
<br />
<h4 style="text-align: left;">
9<i>. flex-basis</i></h4>
This property defines the initial width of the flex item on the main-axis. <code>auto</code> is the default value of this property.<br />
<pre><code>
flex-shrink: {number};
</code>
</pre>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFfz_8i5mLKwyumJez-hYTVOn-rUyP5LOmbIPv3UyznUeUTflZG0wkrVbRkQKFNqXcoiNWefrc5HAko_GXClwnleEbXzVy6_sbcUcejVGVbQHFlyWfb5f1Ns-thySbypy8Q2VwMH8QWi4/s1600/flex-basis.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="flex-basis" border="0" data-original-height="768" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFfz_8i5mLKwyumJez-hYTVOn-rUyP5LOmbIPv3UyznUeUTflZG0wkrVbRkQKFNqXcoiNWefrc5HAko_GXClwnleEbXzVy6_sbcUcejVGVbQHFlyWfb5f1Ns-thySbypy8Q2VwMH8QWi4/s1600/flex-basis.png" title="flex-basis" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<h4 style="text-align: left;">
10<i>. flex</i></h4>
This property combines the properties of flex-grow, flex-shrink and flex-shrink together. Instead of defining them separately, we can use them in this shorthand property of <code>flex</code>.
<br />
<pre><code>
flex-shrink: flex-grow flex-shrink flex-basis;
</code>
</pre>
<br /></div>
</div>
incredibleopinionshttp://www.blogger.com/profile/13158742285797662777noreply@blogger.com0tag:blogger.com,1999:blog-5366767358653000993.post-11560655903580400372017-09-03T14:36:00.002-07:002017-09-03T16:15:01.256-07:00Why NodeJS is asynchronous?<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0zHLCbUKVGWlCpy3UbsBxRUK2cJdAe_5QeA5NjzW8U9xD5jFaSaHDicJhZoH_JfRy-FobrRzjeXb4ezEZgVUV-yV1vx1wsSytcNKNuCknQic2yotFwczgE-K5m8KMorcruYYEEaFrW3E/s1600/NODEJS+ASYNC+%25281%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="why nodejs is asynchronous? - the web stop" border="0" data-original-height="768" data-original-width="1024" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0zHLCbUKVGWlCpy3UbsBxRUK2cJdAe_5QeA5NjzW8U9xD5jFaSaHDicJhZoH_JfRy-FobrRzjeXb4ezEZgVUV-yV1vx1wsSytcNKNuCknQic2yotFwczgE-K5m8KMorcruYYEEaFrW3E/s640/NODEJS+ASYNC+%25281%2529.png" title="why nodejs is asynchronous? - the web stop" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
There are 2 ways of handling requests and executing them in programming:<br />
<br />
<h4 style="text-align: left;">
Synchronous</h4>
<div style="text-align: left;">
<span style="font-weight: normal;"> It waits for one operation to be completed before it handles and executes the second operation.</span></div>
<div style="text-align: left;">
<span style="font-weight: normal;"><br /></span></div>
<h4>
Asynchronous </h4>
<div style="text-align: left;">
<span style="font-weight: normal;">It does not wait for one operation to be completed, rather it executes all the operations in the one go.</span></div>
<br />
<br />
JavaScript runs on the V8 engine and both JavaScript and V8 follow the synchronous way of handling operations. That's why NodeJS is here which follows the asynchronous way, eliminating the waiting time for the previous operation to be completed. For the same reason, it is also tagged as "<b>Event Driven Non-Blocking I/O in V8 JavaScript</b>". The <i style="font-weight: bold;">Non-Blocking </i>term is associated with NodeJS for its async behavior which does not block any other operations to happen. For the <b><i>Event Driven</i></b> part, let's dig a little deeper!<br />
<br />
<ins class="adsbygoogle hidead" data-ad-client="ca-pub-8470413584014564" data-ad-format="auto" data-ad-slot="4606458736" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
<div>
<br /></div>
<h3 style="text-align: left;">
NodeJS</h3>
<div>
NodeJS is simply JavaScript written in C++. It runs on the V8 engine as JavaScript does but uses asynchronous programming.</div>
<br />
<h3 style="text-align: left;">
What makes NodeJS asynchronous?</h3>
<div>
The first question which comes to the mind is how NodeJS is asynchronous when V8 and JavaScript follow a synchronous way of handling operations.</div>
<div>
<br /></div>
<div>
The answer is - <b>Event Loop</b>!</div>
<ins class="adsbygoogle hidead" data-ad-client="ca-pub-8470413584014564" data-ad-format="auto" data-ad-slot="4606458736" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
<div>
NodeJS has libUV which runs event loop periodically to check if there are events in the queue to be processed.</div>
<div>
<br />
When a request has been sent to the OS (file opening, downloading a file etc.), it returns as an event to libUV. The event loop in libUV keeps checking the queue inside the libUV if something has happened. Whatever happens, it gets placed in the queue as an event. When an event finishes, libUV processes it and sends it to V8 as a callback.<br />
<br />
At the same time, V8 is already running and is processing a code. Since it is synchronous in nature, it will let the current code finish executing first and then handles the callback.<br />
<br />
Since the whole process of <i>events coming from the OS, event loop in libUV checking the queue if an event is happening or done processing, V8 running the code synchronously and receiving the callback from libUV when an event is done processing</i> happens inside NodeJS at the same time, it makes NodeJS asynchronous in nature.</div>
<div>
<br />
This explains the <b><i>Event-Driven</i></b> programming in NodeJS. It simply means the programming which acts on events and whole paradigm of NodeJS is based on events.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVW0dAbb-vQR5bHgwbLk88pduMi6aB-jflf5n8t4zzGKoNAMmUNq-r09diqyHEqRqu_yfPVEqoYKq0rlm70Clc3xoyzjheO_Hoh36zC6G5jdjdNHvXYssSzyp9L3t7rV3oNPucgU-w2OE/s1600/blog+nodejs.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"> <img alt="the event loop in nodejs - the web stop" border="0" class="img-fluid" data-original-height="512" data-original-width="1024" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVW0dAbb-vQR5bHgwbLk88pduMi6aB-jflf5n8t4zzGKoNAMmUNq-r09diqyHEqRqu_yfPVEqoYKq0rlm70Clc3xoyzjheO_Hoh36zC6G5jdjdNHvXYssSzyp9L3t7rV3oNPucgU-w2OE/s1600/blog+nodejs.png" title="the event loop in nodejs - the web stop" /></a></div>
</div>
incredibleopinionshttp://www.blogger.com/profile/13158742285797662777noreply@blogger.com4tag:blogger.com,1999:blog-5366767358653000993.post-82223648637378604232017-07-29T22:53:00.001-07:002017-07-31T06:37:56.724-07:00Learning the basics - ReactJS and Redux<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn3O8stcscOjBvGb7mR9JoEg9H5553g0BzIk4pK2UWvAsIdYJ_c_Xw5a4UN4hUWlDKJTX-KXTiKmS_y6eGuecBp7l0wbDiZQnM6DjN5jj1TJYtejJD6ndFQqwmebo43XE6QU2GCpoDMr0/s1600/learning+the+basics+%25283%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Learning the basics - React and Redux" border="0" data-original-height="768" data-original-width="1024" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn3O8stcscOjBvGb7mR9JoEg9H5553g0BzIk4pK2UWvAsIdYJ_c_Xw5a4UN4hUWlDKJTX-KXTiKmS_y6eGuecBp7l0wbDiZQnM6DjN5jj1TJYtejJD6ndFQqwmebo43XE6QU2GCpoDMr0/s640/learning+the+basics+%25283%2529.png" title="Learning the basics - React and Redux" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<h2 style="text-align: left;">
REACTJS</h2>
<div>
A JavaScript library built by <a href="https://code.facebook.com/">Facebook</a> for building user interfaces. It is currently one of the most popular JavaScript libraries and is used in creating interactive reusable UI components. ReactJS has an advantage over other libraries, that it can run not only on client side and server side but also in mobile apps using <a href="https://facebook.github.io/react-native/">React Native</a>.</div>
<div>
<br /></div>
<div>
ReactJS works on the concept of virtual DOM instead of direct DOM manipulation.</div>
<div>
<br /></div>
<h4 style="text-align: left;">
Virtual DOM</h4>
<div>
Most modern and interactive applications are based on DOM manipulations. Let's say you have a list of 20 items and you made changes to the first item only. Most of the JavaScript frameworks will rebuild the entire list rendering all the 20 items again. The other 19 items didn't need to update. This may not seem a big problem for any browser to update but websites may have huge amount of DOM manipulations to do which slow down the process. This inefficient updating of DOM led to the creation of Virtual DOM in ReactJS.</div>
<!-- in post ad -- >
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- the web stop in post -->
<br />
<div>
<br /></div>
<div>
Virtual DOM is just a representation of an actual DOM. In ReactJS, every DOM object has its own corresponding "virtual DOM object". Virtual DOM is like a blue print of actual DOM. </div>
<div>
<br /></div>
<div>
When we render an element with a change in the DOM, the virtual DOM gets updated. React then compares the new updated virtual DOM with the previous snapshot of virtual DOM. It checks for the updates as which virtual DOM object is updated. This process is called "<b><i>diffing</i></b>". After this check, React updates only and only those objects on the real DOM which involved the change instead of the whole DOM.</div>
<div>
<br /></div>
<div>
So, if we have updated only one item in the list of 20 items then virtual DOM will push the update to the DOM with only one item change instead of rebuilding the whole list of 20 items again.</div>
<div>
<br /></div>
<h4 style="text-align: left;">
Component</h4>
<div>
An individual component in ReactJS can be considered as a UI component in an app. React components associate cleanly to UI components and are self-contained. A component has its own markup, logic and style(sometimes) contained in itself which makes it reusable in React.</div>
<div>
<br /></div>
<h4 style="text-align: left;">
JSX</h4>
<div>
JSX(JavaScript eXtension syntax) is a syntax extension for JavaScript built by Facebook. JSX lets us write the markup for component in an HTML like syntax. This JSX code then compiles to vanilla JavaScript.<br />
<br />
<br />
<h4 style="text-align: left;">
ReactJS basic example</h4>
<pre style="text-align: left;"><code>
class MyFirstProject extends React.Component { //using ES6 class method
render() { //render() is the only required method for a react component
return( //JSX syntax
<div className="container">
Hello World!
</div>
);
}
}
</code>
</pre>
<pre style="text-align: left;"></pre>
<h4 style="text-align: left;">
Important Points</h4>
</div>
<div>
<ul style="text-align: left;">
<li>In JSX, braces<code>{}</code> are a delimiter which signals to JSX that what resides in-between <code>{}</code> is a JavaScript expression.</li>
<li>React follows a uni-directional pattern of data flow which means data flows only in one direction i.e from parent to children through props.</li>
<li>Event flows from children to parent through functions.</li>
<li>A child component does not own its own props. Parent component owns the props and passes down the props to the child component.</li>
<li>Props are immutable. Thus, they cannot be modified.</li>
<li>State is owned by the component itself.</li>
<li>When the state or props of a component update, the component will re-render itself.</li>
</ul>
<div>
<br /></div>
</div>
<h2 style="text-align: left;">
REDUX</h2>
<div>
Redux is “<i><b>predictable state container for JavaScript apps.</b></i>” In other words, it is an application data-flow structure architecture unlike other traditional libraries or frameworks like Angular.js or Underscore.js. It is based on flux implementation but not entirely.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSz5O_eFMRHwvQuCs8EoNvkoZylZEzSoWVnvNTDedo5jbfm8Ao5B51xG6zoL0xNNIUnFdeX1brOKyo1OmyqV3AdICgLiX4rpgAxwaqVBoscvRqyp-7Fzoc2qbvI4dlBxbqNdr5OcKFLX8/s1600/Actions+%25283%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Redux data flow" border="0" class="img-fluid" data-original-height="768" data-original-width="1024" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSz5O_eFMRHwvQuCs8EoNvkoZylZEzSoWVnvNTDedo5jbfm8Ao5B51xG6zoL0xNNIUnFdeX1brOKyo1OmyqV3AdICgLiX4rpgAxwaqVBoscvRqyp-7Fzoc2qbvI4dlBxbqNdr5OcKFLX8/s640/Actions+%25283%2529.png" title="Redux data flow" width="640" /></a></div>
<div>
<ul style="text-align: left;">
<li><b>Actions:</b> Any change made to the app state. When we need to trigger an action on a component, we call action with required data passed as an argument.<br /><b><i>
Action Creator</i></b> is a function returning call back for dispatching an action.</li>
<li><b>Reducers:</b> Reducer is a function which takes the current state and returns the new function based on the action. Redux puts the new state to the component and re-renders the view.<br /><b><i>
Reducer</i></b> accepts the current state and returns the new state based on the action.</li>
<li><b>Store: </b>It is just one big JavaScript object which creates the whole state tree of app. It stores all your application’s state/data. There should only be single store in your app.</li>
<li><b>Provider: </b>Provider is responsible for connecting all of its containers with the actual store.</li>
<li><b>Containers: </b>Containers fetch state data and use it to render (display) components. When app’s state changes, components are re-rendered. Its main purpose is to connect directly to the global store so you can avoid having to manually manage state and props.</li>
</ul>
</div>
<h4 style="text-align: left;">
Why Redux?</h4>
<div>
Imagine you have an arrangement of squares and a circle and you want to swap the positions of the second square and the circle.</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy60sya7WNP3jjvi9YM0QkHf3K61U_LKUmR-VCwG9l7fhgXLBpXj8w1Ydoq_IQwox-kaQADuno_emKuM22rRTgYo3NNYT-qOZSAIlYQgJIAPtY6XMXShf3e6rj8rBnTp_x4aUSgeBb-yI/s1600/Initial+State+%25285%2529.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Why Redux?" border="0" class="img-fluid" data-original-height="200" data-original-width="400" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy60sya7WNP3jjvi9YM0QkHf3K61U_LKUmR-VCwG9l7fhgXLBpXj8w1Ydoq_IQwox-kaQADuno_emKuM22rRTgYo3NNYT-qOZSAIlYQgJIAPtY6XMXShf3e6rj8rBnTp_x4aUSgeBb-yI/s320/Initial+State+%25285%2529.png" title="Why Redux?" width="320" /></a></div>
</div>
Let’s try 2 different approaches to achieve the desired result.<br />
<div>
<br />
<b>Approach 1:</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://lh4.googleusercontent.com/rsVcmyEq9p0IOOpwc1RjIcowcX3-pJ8wwiVMl9YhuWwTmNbLvAQXf2DEbX1xUXyhqMDsXGt5SsSGRiqcYhj6MokAnd3MJGAnUR7YZmtFGEEmpHSb--_cao7KGhvKdl0aDwdBF_nLMy8" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="approach_a" border="0" class="img-fluid" height="160" src="https://lh4.googleusercontent.com/rsVcmyEq9p0IOOpwc1RjIcowcX3-pJ8wwiVMl9YhuWwTmNbLvAQXf2DEbX1xUXyhqMDsXGt5SsSGRiqcYhj6MokAnd3MJGAnUR7YZmtFGEEmpHSb--_cao7KGhvKdl0aDwdBF_nLMy8" title="approach_a" width="320" /></a></div>
In order to achieve this desired state of squares and circle, we’ll have to drag the circle down, drag the square to the top-right and nudge the circle a little to its right (as illustrated in the picture):
<br />
<div class="separator" style="clear: both; text-align: center;">
<span id="docs-internal-guid-b8f265a1-91e6-ac77-5aa7-98775eeb5688" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></span></div>
<div>
<br />
<b>Approach 2:</b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://lh4.googleusercontent.com/arP06Fu_n6fWvh8HGP7xj_LrslXiKLqysN0A4B-72JKP-MKWRV3I9-eOLomaz3kQhncb1oBQSbeXB2FI0hL75NRWqzT38FSYUXIPmNeWMOhm6jkA7nd1-okTv29fYosrl2lYHe5qnVY" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="approach_b" border="0" class="img-fluid" height="160" src="https://lh4.googleusercontent.com/arP06Fu_n6fWvh8HGP7xj_LrslXiKLqysN0A4B-72JKP-MKWRV3I9-eOLomaz3kQhncb1oBQSbeXB2FI0hL75NRWqzT38FSYUXIPmNeWMOhm6jkA7nd1-okTv29fYosrl2lYHe5qnVY" title="approach_b" width="320" /></a></div>
Let’s create another setting B which is an another instance of A (the initial state) but with the desired set up. We don’t need to go to setting A to make the changes, instead we are going to make changes in the setting B which is a new and unique setting. If somehow, we didn’t like the new set up, we can always switch back to setting A in no time without changing the whole set up again into initial state.
<br />
<br />
<h6>
Q - Which approach was faster and better?</h6>
<h6>
A - Approach 2 </h6>
<b>Reason:</b> Creating new and unique setting B might took time but it didn’t take more time in switching states than “dragging the circle down, dragging the square to the top-right corner and then nudging the circle to its right” approach. <br />
There is a flexibility to time-travel between different app’s states as we saw in approach 2.<br />
This is exactly - what <b><i>Redux</i></b> does to our app.
<br />
<br />
Consider this as your application state with child nodes:<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="initial state of app containing children nodes" class="img-fluid" height="239" src="https://lh5.googleusercontent.com/8iNXvvKpev6Cd_9nuy8i9DNJjY-g4TN351p3hCP7JdFTdX5Hy8molsWjdb0KBNC2SwKY5yVLA153W5cJNXmyp_RakrvkqXMJ1p6NP0b3j7g6d2XOJW5jIKN1Ib7wybTzQv1Y40yBMP4" style="margin-left: auto; margin-right: auto;" title="initial state of app containing children nodes" width="320" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Initial State</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<span id="docs-internal-guid-b8f265e4-91ee-450a-6256-b2b8d81e14e2" style="margin-left: 1em; margin-right: 1em;"></span></div>
<h6>
Q - How would you make changes to the children nodes?</h6>
<h6>
A - No, you can't because the application state is immutable.</h6>
<h6>
How does Redux help ?</h6>
With redux, you can make the duplicate of the children nodes you want to adapt the changes. Therefore, the original children nodes will stay put and they won’t be re-rendered. The new and unique children nodes will show the new state changes. It is also easy to switch between the original children nodes and the new children nodes back and forth which comes handy while debugging.
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="new state of app containing children nodes" class="img-fluid" height="240" src="https://lh5.googleusercontent.com/YD1yEl6w03mPL9jHY4EvKWNMN8yNDKbSHJ0IHHbrTaNBvZgWKKRJYkNr254GHBvQXyi9pztZ3tRls0fyMEPX_L0FsH-fRjQ4fgi9VYQDgz_UGzKxSy2opwd-R1OgHH2yrw3SYA0h1Ks" style="margin-left: auto; margin-right: auto;" title="new state of app containing children nodes" width="320" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">New State</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<span id="docs-internal-guid-b8f2663c-91f1-e22b-9ae5-549ce15aacdd" style="margin-left: 1em; margin-right: 1em;"></span></div>
<br />
<h2 style="text-align: left;">
REACT + REDUX</h2>
<br />
React is a view library which manages state as well but we need Redux to manage persistent change of state.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHFn7fkFl31LMCF6AJRln2UwNgfGa8GHnzAm7xCxbozQ11yvy9p60dbG1uVL8o9jyI71Qzo75q9D7Loh-QGJvhz1vdGPz9ul8y4kwPqgeulRtSAxzwsfsvTRFELgW6WsYths8Gc8J5DvY/s1600/UI+State+vs+App+State.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="difference between react and redux use" border="0" class="img-fluid" data-original-height="768" data-original-width="1024" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHFn7fkFl31LMCF6AJRln2UwNgfGa8GHnzAm7xCxbozQ11yvy9p60dbG1uVL8o9jyI71Qzo75q9D7Loh-QGJvhz1vdGPz9ul8y4kwPqgeulRtSAxzwsfsvTRFELgW6WsYths8Gc8J5DvY/s640/UI+State+vs+App+State.png" title="difference between react and redux use" width="640" /></a></div>
<br /></div>
</div>
</div>
incredibleopinionshttp://www.blogger.com/profile/13158742285797662777noreply@blogger.com8tag:blogger.com,1999:blog-5366767358653000993.post-88177226809691563132017-06-26T22:03:00.001-07:002017-06-30T12:58:19.027-07:00Fat Arrow in JavaScript<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMPE2pcVBpXLHLzTt0lYPXpUzC3xI-pxOBHDigYMNrq3k0FY8V559kWDUEuwVXzsDT-ugiDNpyuH67pwuc0IAWfi3e22WI7LNb9LNzb2GistxIC-2ZmQLzg4g53sXGOI8s8Jpagyo280g/s1600/fat+arrow.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="768" data-original-width="1024" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMPE2pcVBpXLHLzTt0lYPXpUzC3xI-pxOBHDigYMNrq3k0FY8V559kWDUEuwVXzsDT-ugiDNpyuH67pwuc0IAWfi3e22WI7LNb9LNzb2GistxIC-2ZmQLzg4g53sXGOI8s8Jpagyo280g/s640/fat+arrow.png" width="640" /></a></div>
<br />
One of the most popular ES6 features - <b>Fat Arrow Functions</b>!<br />
<br />
Arrow function (or Fat Arrow function) expression is just a sugary syntax for defining a function expression in ES6. It uses <code>=></code> while defining a function expression by eliminating the use of <code>function</code>, <code>{}</code> brackets and <code>return</code> keywords and it does not bind its own <code>this</code>.<br />
<br />
ES5 way:
<br />
<pre><code>
function sum(a,b) {
return a + b;
}
</code></pre>
<br />
<br />
ES6 way using fat arrow:
<br />
<pre><code>
const sum = (a,b) => a + b;
const squareRoot = a => Math.sqrt(a); // no need of parentheses when there is only one parameter
const test = () => console.log(1);
</code></pre>
<br />
As we noticed so far, <code>fat arrow function</code> is there to write the code in a more condensed way but it offers more than that.
<br />
<br />
<ins class="adsbygoogle hidead" data-ad-client="ca-pub-8470413584014564" data-ad-format="auto" data-ad-slot="4606458736" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
<h4 style="text-align: left;">
<code>this</code> in Arrow Function</h4>
The most important keyword in JS - <code><a href="http://thewebstop.blogspot.com/2017/01/whats-this-in-js.html">this</a></code>. (<a href="http://thewebstop.blogspot.com/2017/01/whats-this-in-js.html">What's this in JS?</a>)<br />
<br />
In ES6, the fat arrow function use lexical scoping for binding this to the enclosing function."Lexical scoping" simply means the value of <code>this</code> is determined by the surrounded code.<br />
<br />
In global code, it will be set to the global context.
<br />
<br />
Consider the following example:
<br />
<pre><code>
this.greeting = "Hello world!";
const foo = {
greeting: "Hi"
};
foo.bar = () => {
console.log(this.greeting);
};
foo.bar(); // Hello world!
</code></pre>
<br />
In this case, the result is not what we expected. It should be <code>"Hi"</code>. The reason we are having the global <code>"Hello world!"</code> is because arrow function looked for the value of <code>this</code> in the surrounding code and it didn't exist there. That means the value of <code>this</code> is taken from the globally defined <code>this.greeting</code>. Even if we use <code>bind</code> method to bind the value of <code>this</code> to the object, arrow function will always take precedence and will always override any previously bound or dynamically determined value of <code>this</code>.
<br />
<br />
Basically, <code>arrow function</code> overrules <code>call(), apply()</code> and <code>bind()</code> methods to determine the value of <code>this</code>. The only solution is to go ES5 way and use <code>function</code> expression if you want <code>this</code> to be bound to a different value.
<br />
<br />
<br />
<div class="alert alert-info" role="alert">
<i aria-hidden="true" class="fa fa-lightbulb-o"></i> <strong>Tip:</strong> <br />
<span style="font-size: x-small;">(<a href="https://stackoverflow.com/questions/22939130/when-should-i-use-arrow-functions-in-ecmascript-6">source</a>)</span><br />
<ol style="text-align: left;">
<li>Use <code>function</code> in the global scope and for <code>Object.prototype</code> properties.</li>
<li>Use <code>class</code> for object constructors.</li>
<li>Use <code>=></code> everywhere else.</li>
</ol>
</div>
</div>
incredibleopinionshttp://www.blogger.com/profile/13158742285797662777noreply@blogger.com2tag:blogger.com,1999:blog-5366767358653000993.post-9260562077529749372017-03-05T22:20:00.000-08:002017-03-06T16:36:14.520-08:00Git Basic Commands<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYK_xIFypRVzga0_MWXt-dBAhJLpRlRfnfVR7qmKCUtRD05y6Wn7J3I_ncEczbxUc5zZ_kAlJ3jgkED-m-HM-6CiUDcsCP_qUtANWLlwMQOp6Pz1v_26JjhbZPropuQ87i0SuAIC_KkuI/s1600/iI..png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Git basic commands - the web stop" border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYK_xIFypRVzga0_MWXt-dBAhJLpRlRfnfVR7qmKCUtRD05y6Wn7J3I_ncEczbxUc5zZ_kAlJ3jgkED-m-HM-6CiUDcsCP_qUtANWLlwMQOp6Pz1v_26JjhbZPropuQ87i0SuAIC_KkuI/s640/iI..png" title="Git basic commands - the web stop" width="640" /></a>
</div>
<br />
Git is the most widely used version control system in the world. It is free and open source project which tracks changes in the working files of a user and coordinate changes in those working files amongst multiple users.<br />
<br />
<!-- in post ad -- >
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- the web stop in post -->
<br />
<ins class="adsbygoogle hidead" data-ad-client="ca-pub-8470413584014564" data-ad-format="auto" data-ad-slot="4606458736" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
The most important and basic commands for Git are:<br />
<br />
<h3 style="text-align: left;">
Set up and initialization</h3>
<pre><code>
git init</code></pre>
initialize an existing directory as a Git repository/create a new git repository.<br />
<br />
<pre><code>
git clone [url]</code></pre>
creates a working copy of an existing repo.
<br />
<br />
<!-- in post ad -- >
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- the web stop in post -->
<br />
<ins class="adsbygoogle hidead" data-ad-client="ca-pub-8470413584014564" data-ad-format="auto" data-ad-slot="4606458736" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<hr/>
<br/>
<h3 style="text-align: left;">
Staging and Snapshot</h3>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjakHm0sI8jrlw8cLErg-ny_0tZSW_30h25PDGgAhiFuV6oyRplqnDjb-RZyggZcVQx96OGoBV-MfD4WkiAAG8S5JzHEgObgmQO9YcCZAHd9_FlolOXR4-kmnH3wy9dmC1EHNQ3Uz16SEM/s1600/git_workflow.png" imageanchor="1" style="margin-bottom: 1em; margin-right: 1em; width: 100%;"><img alt="git workflow - the web stop" border="0" class="img-fluid" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjakHm0sI8jrlw8cLErg-ny_0tZSW_30h25PDGgAhiFuV6oyRplqnDjb-RZyggZcVQx96OGoBV-MfD4WkiAAG8S5JzHEgObgmQO9YcCZAHd9_FlolOXR4-kmnH3wy9dmC1EHNQ3Uz16SEM/s1600/git_workflow.png" title="git workflow - the web stop" /></a></div>
<br />
<br />
<pre><code>
git status</code></pre>
displays the state of the working directory staged for your next commit.<br />
<br />
<pre><code>
git add [filename]</code></pre>
moves the changes from the actual directory to the staging area.<br />
<br />
<pre><code>
git reset [filename]</code></pre>
removes the specified file from the staging area but leaves the working directory unchanged.<br />
<br />
<pre><code>
git diff [filename]</code></pre>
difference of what is changed but not staged.<br />
<br />
<pre><code>
git diff --staged</code></pre>
difference of what is staged but not committed.<br />
<br />
<pre><code>
git commit -m "commit message"</code></pre>
takes the staged snapshot and commits it to the HEAD.<br />
<br />
<pre><code>
git commit --amend</code></pre>
lets you amend the most recent commit.<br />
<br />
<br />
<hr/>
<br/>
<h3 style="text-align: left;">
Branching and Merging</h3>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVsirC1iUZWOmt8Fo-pAdgGX94rhiycaZMw05FURMvYE9VrlSWhtV1xq6OotVOcc-2mYGcHEL1iJYrUr1FsbySHIpkVH_SkQF9I3-Bbbjap0p-8EnBTNKcfQbTMaLhVFui7JxeiO4trI0/s1600/git_branching_simple.png" imageanchor="1" style="margin-bottom: 1em; margin-right: 1em; width: 100%;"><img alt="git branching - the web stop" border="0" class="img-fluid" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVsirC1iUZWOmt8Fo-pAdgGX94rhiycaZMw05FURMvYE9VrlSWhtV1xq6OotVOcc-2mYGcHEL1iJYrUr1FsbySHIpkVH_SkQF9I3-Bbbjap0p-8EnBTNKcfQbTMaLhVFui7JxeiO4trI0/s1600/git_branching_simple.png" title="git branching - the web stop" /></a></div>
<br />
<br />
<pre><code>
git branch</code></pre>
lists all your branches. A (*) will appear next to the name of your currently active branch.<br />
<br />
<pre><code>
git checkout [branch-name]</code></pre>
navigates to the specified branch and updates the working directory to match.
<br />
<br />
<pre><code>
git branch [new-branch-name]
git checkout [new-branch-name]
</code></pre>
creates a new branch and switch to it at the same time.<br />
<br />
or short hand for above code is:
<br />
<br />
<pre><code>
git checkout -b [new-branch-name]</code></pre>
creates a new branch and switch to it at the same time.<br />
<br />
<pre><code>
git branch -d [branch-name]</code></pre>
deletes the specified branch. It is a safer option in which Git prevents you from deleting the branch if it has unmerged changes.<br />
<br />
<pre><code>
git branch -D [branch-name]</code></pre>
force deletes the specified branch even if it has unmerged changes.<br />
<br />
<pre><code>
git branch -m [new-branch-name]</code></pre>
renames the current branch to the new specified name.<br />
<br />
<pre><code>
git merge [branch]</code></pre>
merges the specified branch's history into the currently active branch.<br />
<br />
<pre><code>
git log</code></pre>
shows all the commits in the current branch's history. <br />
<br />
<pre><code>
git log [branch-b]..[branch-a]</code></pre>
shows the commits on branch-a that are not on branch-b.<br />
<br />
<pre><code>
git diff [branch-b]...[branch-a]</code></pre>
shows the difference of what is in branch-a that is not in branch-b<br />
<br />
<hr/>
<br/>
<h3 style="text-align: left;">
Sharing and updating</h3>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOBxO5ZiapXvTVn2jQM5hqE73yoj9EjSNn3QVELjgi11S6jfaoUJ9RemdKmdwAjPgPMKi7kv70_nzWFgPPvYxUovl5hHXnp9b_7xpy81TBiUxl4pzWdvqJd_VHHip2SyNcfVyR9UtisK8/s1600/master_and_origin_master.gif" imageanchor="1" style="margin-bottom: 1em; margin-right: 1em;width:100%;"><img alt="master vs origin/master - the web stop" border="0" class="img-fluid" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOBxO5ZiapXvTVn2jQM5hqE73yoj9EjSNn3QVELjgi11S6jfaoUJ9RemdKmdwAjPgPMKi7kv70_nzWFgPPvYxUovl5hHXnp9b_7xpy81TBiUxl4pzWdvqJd_VHHip2SyNcfVyR9UtisK8/s1600/master_and_origin_master.gif" title="master vs origin/master - the web stop" /></a>
</div>
<br />
<br />
<pre><code>
git push origin [branch]</code></pre>
makes your branch available to others by pushing your branch to remote repository.<br />
<br />
<pre><code>
git pull</code></pre>
fetches and merges any commits from the tracking remote branch.<br />
<br />
<pre><code>
git fetch</code></pre>
fetches any commits from the tracking remote branch but does not automatically merge them. So, the local stays the same.<br />
<br />
<pre><code>
git reset --hard [commit]</code></pre>
clears the staging area, rewrite working tree from the specified commit.<br />
<br />
<pre><code>
git reflog show</code></pre>
shows a record of your references. It displays each position of HEAD in the last 30 days(by default).<br />
<br />
<hr/>
<br/>
<h3 style="text-align: left;">
Stashing - Temporary Commits</h3>
<pre><code>
git stash</code></pre>
takes your uncommitted changes (both staged and unstaged), saves them away for later use, and then reverts them from your working copy.<br />
<br />
<pre><code>
git stash list</code></pre>
lists stack-order of stashed file changes.<br />
<br />
<pre><code>
git stash pop</code></pre>
writes working from top of stash stack.<br />
<br />
<pre><code>
git stash drop</code></pre>
discards the changes from top of stash stack.<br />
<br />
<pre><code>
git stash apply</code></pre>
applies the changes from the top of stash stack.<br />
<br /></div>
incredibleopinionshttp://www.blogger.com/profile/13158742285797662777noreply@blogger.com3tag:blogger.com,1999:blog-5366767358653000993.post-47353777508111335402017-02-18T18:39:00.001-08:002017-03-01T20:29:07.680-08:00Backticks in JavaScript<div dir="ltr" style="text-align: left;" trbidi="on">
<h3 style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMZqVdtT5ON28iGfWjPzJgVoOD7oFtqoG9gOnBoNDZo_3dgC1M2CcLjqCU5h121ZMoAt1bvK1pOIjQL-3J5uQ8ZlBDe7XFwU7q0p3uVafIIpxQnpgL9E9DJ7gEzgX4PgV5qX6kaVbe4YA/s1600/backticks+in+javascript.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMZqVdtT5ON28iGfWjPzJgVoOD7oFtqoG9gOnBoNDZo_3dgC1M2CcLjqCU5h121ZMoAt1bvK1pOIjQL-3J5uQ8ZlBDe7XFwU7q0p3uVafIIpxQnpgL9E9DJ7gEzgX4PgV5qX6kaVbe4YA/s640/backticks+in+javascript.png" width="640" /></a></h3>
You must be familiar with <code>"..."</code> and <code>'...'</code> for declaring string literals. However, string literals with these delimiters can't parse and evaluate the content.<br />
<br />
<pre><code>
var name = "Jill";
var intro = "Hi, My name is " + name + ".";
console.log(intro); //Hi, My name is Jill.
</code>
</pre>
ES6 has come up with a new string literal being declared by <code>`...`</code> (Backticks) delimiter, the key below the Esc key on your keyboard. It is different than <code>"..."</code> and <code>'...'</code> in a way that it allows the string expression to be embedded which is automatically parsed and evaluated. It is just like an <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFE</a> which is embedded and evaluated inline. <br />
<!-- in post ad -- >
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- the web stop in post -->
<br />
<ins class="adsbygoogle hidead" data-ad-client="ca-pub-8470413584014564" data-ad-format="auto" data-ad-slot="4606458736" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
<strong>The above code in ES6 way using template literal:</strong>
<br />
<br />
<pre><code>
var name = "Jill";
var intro = `Hi, my name is ${name}.`;
console.log(intro); //Hi, my name is Jill.
</code>
</pre>
As you can see, the string literal has parsed and evaluated the string expression inline when string literal is declared using <code>`...`</code> delimiter. This is called <strong>Interpolation</strong>.<br />
<br />
These string literals allowing embedded expressions are called <b>Template Literals</b>.<br />
<div>
<br /></div>
The evaluated string literal is always a string.<br />
<br />
<pre><code>
var name = "Jill";
var intro = `Hi, my name is ${name}.`;
console.log(intro); //Hi, my name is Jill.
console.log(typeof intro); //string</code></pre>
<br />
<!-- in post ad -- >
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- the web stop in post -->
<br />
<ins class="adsbygoogle hidead" data-ad-client="ca-pub-8470413584014564" data-ad-format="auto" data-ad-slot="4606458736" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
<h4 style="text-align: left;">
Multi-line strings:</h4>
In a pre-ES6 environment, for multi-line strings we would have written something like this:<br />
<br />
<pre><code>
var text = "string text line 1.\n" + "string text line 2.\n" + "string text line 3.";
console.log(text); //string text line 1.
//string text line 2.
//string text line 3.</code></pre>
<br />
<strong>In ES6 way using template literal:</strong>
<br />
<br />
<pre><code>
var text = `string text line 1.
string text line 2.
string text line 3.`;
console.log(text); //string text line 1.
//string text line 2.
//string text line 3.</code></pre>
<br />
<br />
<h4 style="text-align: left;">
Interpolated Expressions:</h4>
In an interpolated string literal, any valid expression can appear including functions and even other string interpolated string literals.<br />
<br />
<pre><code>
function upperCase(str) {
return str.toUpperCase();
}
var text = "Hi, My name is " + upperCase("Jill") + ".";
console.log(text);//My name is JILL.
</code></pre>
<br />
<strong>In ES6 way using template literal:</strong>
<br />
<br />
<pre><code>
function upperCase(str) {
return str.toUpperCase();
}
var text = `Hi, My name is ${upperCase("Jill")}.`;
console.log(text); //My name is JILL.
</code></pre>
<br />
<br />
<h4 style="text-align: left;">
Tagged Template Literal</h4>
One another cool feature of template literals is <b>Tagged string literals</b>. Consider the following piece of code:<br />
<br />
<pre><code>
function tag(strings, values) {
console.log(strings);
console.log(values);
}
var a = 10;
var b = 20;
tag`The sum of 10+20 is ${a + b}`; //[ 'The sum of 10+20 is ', '' ]
//30
</code></pre>
<br />
From the above code, you can interpret that <code>tag</code> is a special kind of function which does not require <code>tag(...)</code> to evaluate the function value. Instead, <code>tag`....`</code> is an expression which results in a function.<br />
<br />
<h4 style="text-align: left;">
Raw Strings</h4>
We can get the raw unprocessed version of the string from <code>String.raw</code> property.<br />
<br />
<pre><code>
console.log("This is a string \n This is not a raw string"); //This is a string
//This is not a raw string
console.log(String.raw`This is a string \n This is a raw string`); //This is a string \n This is a raw string
</code></pre>
<br />
The raw version of the string displays the <code>\n</code> sequence whereas the processed version considers it a single newline character.
</div>
incredibleopinionshttp://www.blogger.com/profile/13158742285797662777noreply@blogger.com1tag:blogger.com,1999:blog-5366767358653000993.post-39509440987058172872017-01-28T12:23:00.000-08:002017-02-06T19:16:19.797-08:00How to start a blog for free?<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIfDGZxFJG6FAgyKa5BYFmrM9AZFbNcDQzfYvnG4fEBY_qmL8ZvWPbjWGujD06uc9kFPKMiBHrd07xiP4QKlHnZg7VO7SY7PjkJ8pysZ4YLOim3dxOhCFWBSYkAJakV4TLAufIRnky_LA/s1600/how+to+start+a+blog+for+free+-+the+web+stop.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img alt="how to start a blog for free - the web stop" style="display:none;" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIfDGZxFJG6FAgyKa5BYFmrM9AZFbNcDQzfYvnG4fEBY_qmL8ZvWPbjWGujD06uc9kFPKMiBHrd07xiP4QKlHnZg7VO7SY7PjkJ8pysZ4YLOim3dxOhCFWBSYkAJakV4TLAufIRnky_LA/s320/how+to+start+a+blog+for+free+-+the+web+stop.png" title="how to start a blog for free - the web stop" width="320" /></a></div>
<br />
Are you planning to put <a href="http://thewebstop.blogspot.com/2016/12/common-mistakes-bloggers-make.html">blogger</a> shoes on but you don't know how to start a blog? Then, you must read this post as I'll be discussing how to start a blog for "free". Yes, you don't need to spend any money on hosting service and buying domain name for your blog. <br />
<br />
The free blogging platform I choose is "<b>Blogger</b>". It is a free blogging platform owned by <a href="http://google.com/">Google</a>. If you have a Google account, you can login to blogger using your Google credentials at <a href="http://www.blogger.com/">www.blogger.com</a>. If you don't have one, sign up for blogger account. It is absolutely free.<br />
<!-- in post ad -- >
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- the web stop in post -->
<ins class="adsbygoogle hidead" data-ad-client="ca-pub-8470413584014564" data-ad-format="auto" data-ad-slot="4606458736" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
Once you have your account set up with blogger, login to your blogger account and follow the following steps:
<br />
<br />
<ol>
<li>Logging into your blogger account for the first time, you'll see the following screen.
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitAudfBI5rXVb8tmycwmMLYF1d2bgfRml8bIr3AwELp0OQia5ZBQK0ywYMvVka1l7v-T4RAIKZW6sIn_O8mM7ZBDgxjbBTwXR4CA4lJSnw_tm2KJkfXKSzDJCS157zL0jGZWPhPbtV_rM/s1600/blogger1.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Blogger profile options - the web stop" border="0" class="img-fluid" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitAudfBI5rXVb8tmycwmMLYF1d2bgfRml8bIr3AwELp0OQia5ZBQK0ywYMvVka1l7v-T4RAIKZW6sIn_O8mM7ZBDgxjbBTwXR4CA4lJSnw_tm2KJkfXKSzDJCS157zL0jGZWPhPbtV_rM/s1600/blogger1.png" title="Blogger profile options - the web stop" /></a></div>
<br />
<br />
The blogger welcome screen gives you two options to make a profile at blogger. If you want to create a new blogger profile using a <a href="https://plus.google.com/">Google+</a> profile, you can choose the option 1 and if you don't want to connect to Google+ for your blog, go ahead with option 2. Also, you can also choose the language option as highlighted in option 3. After choosing the desired options on this screen, continue to the next screen.</li>
<li>On the next screen, you'll be given a text box to enter your display name for Blogger profile. It can be anything you want either related to your blog or not. In case, you want more than one blog under your blogger profile, your display name will be same for all as it is common for all of the blogs. Please note that this is your display name for blogger profile and not your blog name so choose it appropriately. Hit the "Continue to Blogger" button once you have entered the appropriate display name.
<br /><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCtZCgTo8iaS_mQm1PyTAtU5DHBhcsQDl-tLidAO0drPI8Qmb1YmFOVvQdQPvUHog1q5_KtrXQz9L3hnl3wccQ6v8A_MwOLoG0dPJFah1054a5K64aIn3n6EDIQPAN6b8c5uwZIE9896w/s1600/Screen+Shot+2017-01-27+at+10.21.54+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger profile display options - the web stop" border="0" class="img-fluid" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCtZCgTo8iaS_mQm1PyTAtU5DHBhcsQDl-tLidAO0drPI8Qmb1YmFOVvQdQPvUHog1q5_KtrXQz9L3hnl3wccQ6v8A_MwOLoG0dPJFah1054a5K64aIn3n6EDIQPAN6b8c5uwZIE9896w/s1600/Screen+Shot+2017-01-27+at+10.21.54+PM.png" title="Blogger profile display options - the web stop" /></a></div>
<br />
</li>
<li>
Blogger then presents the dashboard screen but it does not have the blog settings for you to start writing your first post yet. Hit the "CREATE NEW BLOG" button to start your first blog. You can alternatively select the "New Blog" dropdown on the top-left corner of dashboard.<br /><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0plSv4lKq2227tzsMN4EJs3DfcFrjnVtLBeOVVMHEseyG5QipZ50k-o3_rXQFnmq6D6kUuZcKYAZqBFrcYGKGWO2bE91EOok9XqqobT2NYAdAoVzIBKJxxiwo6NjQf628OEwc3xkiUDo/s1600/Screen+Shot+2017-01-27+at+10.23.11+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Welcome options - the web stop" border="0" class="img-fluid" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0plSv4lKq2227tzsMN4EJs3DfcFrjnVtLBeOVVMHEseyG5QipZ50k-o3_rXQFnmq6D6kUuZcKYAZqBFrcYGKGWO2bE91EOok9XqqobT2NYAdAoVzIBKJxxiwo6NjQf628OEwc3xkiUDo/s1600/Screen+Shot+2017-01-27+at+10.23.11+PM.png" title="Blogger Welcome options - the web stop" /></a></div>
</li>
<li>
There will be a pop-up screen which asks for a suitable <b>title</b>, <b>address</b> and a <b>template</b> for your new blog. <br /><br />
<div class="separator" style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTQW4v-lTQ8EAeL-BnmKgFKRBICJTkQyj5JEINkHqWxljoh1je__C-h177gep9qDPHZPPN3n-5AVBc35Qru-JwWrZB2pc73UGlu77vtWfi9EGkOwINI7thf3jAGQ4QOswKvPOIVKRAUeY/s1600/Screen+Shot+2017-01-27+at+10.23.49+PM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger title and address options - the web stop" border="0" class="img-fluid" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTQW4v-lTQ8EAeL-BnmKgFKRBICJTkQyj5JEINkHqWxljoh1je__C-h177gep9qDPHZPPN3n-5AVBc35Qru-JwWrZB2pc73UGlu77vtWfi9EGkOwINI7thf3jAGQ4QOswKvPOIVKRAUeY/s1600/Screen+Shot+2017-01-27+at+10.23.49+PM.png" title="Blogger title and address options - the web stop" /></a></div>
<br /><br />
The <b>Title</b> of the blog should be relevant to your blog category. Although it is not mandatory to follow strict guidelines while choosing a title, it is a good practice and makes it easier for you to distinguish between your blogs if you have more than one blog. <br /><br />
The <b>Address</b> of the blog should be in the format of <b>mynewblogaddress.blogspot.com</b> as it is given in the input box placeholder. It should also be unique. If the blog address you are choosing is already taken by someone, it will prompt a warning message - "The blog address is invalid or not supported." and if it is unique, it will be displayed as "available". <br />
<!-- in post ad -- >
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- the web stop in post -->
<br />
<ins class="adsbygoogle hidead" data-ad-client="ca-pub-8470413584014564" data-ad-format="auto" data-ad-slot="4606458736" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
The <b>Template</b> option lets you choose the style of the blog i.e., how your blog will look like. Blogger offers 7 different styles of templates which you can choose from. These style templates are - Simple, Dynamic Views, Picture Window, Awesome Inc., Watermark, Ethereal and Travel. By default, Blogger has "Simple" template selected. You can always choose the third party templates from vendors which offer great styling and customization options.
<br /><br />
Once you've chosen a suitable title, address and a template, hit "Create Blog!".
</li>
<li>
Since we have created our first blog now with a title and an address, we now can see a full dashboard with all the available options for the blog. The display name you chose in step 2 is displayed at top-centre of the dashboard. The left hand side of the dashboard represents all the settings and options available for the customization and monetization of the blog. Hit "New Post" button on the top-centre of dashboard to write your first post of your blog. <br /><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRlL4sUiWI2oWmjeMjjEGdAHRYatAsXi4OiLgN3FFl4mSQUUee1ZgFeq4eNA6cIlJFrjYSsJzaJRfH2S7De2g-RSEzNhJQmybj5jPifwISLi4d_NCB8CDz-BrsM3kXtRyp8t0dHlp2KNM/s1600/blog.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Blogger welcome screen options - the web stop" border="0" class="img-fluid" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRlL4sUiWI2oWmjeMjjEGdAHRYatAsXi4OiLgN3FFl4mSQUUee1ZgFeq4eNA6cIlJFrjYSsJzaJRfH2S7De2g-RSEzNhJQmybj5jPifwISLi4d_NCB8CDz-BrsM3kXtRyp8t0dHlp2KNM/s1600/blog.png" title="Blogger welcome screen options - the web stop" /></a></div>
<br /><br />
</li>
<li>You'll see the following screen after hitting "New Post" button. It has a similar view of a basic word processing tool.
<br /><br />
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMYZgxsD6TMtM8PdQ0UOeOc1205EjcTzGRz4Wdz_b1XZdXVglPeEerJZ74AhyUf1rdrOsH_bHvf0WAamk7pWhzWo0HncdGIl8yLp2-gAkiitLzuRZb61Jb2uzzw01BAdC_l7rrbIAwdYE/s1600/blogger-final.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Blogger create post options - the web stop" border="0" class="img-fluid" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMYZgxsD6TMtM8PdQ0UOeOc1205EjcTzGRz4Wdz_b1XZdXVglPeEerJZ74AhyUf1rdrOsH_bHvf0WAamk7pWhzWo0HncdGIl8yLp2-gAkiitLzuRZb61Jb2uzzw01BAdC_l7rrbIAwdYE/s1600/blogger-final.png" title="Blogger create post options - the web stop" /></a></div>
<br /><br />
Let's have a look at each of the buttons and links on this post creation view.
<ol>
<li><b>Post</b>: It represents the title of your blog post. For example, the title of my blog post you are currently reading is "How to start a blog for free?"</li>
<li><b>Compose</b>: This option is selected by default. It means you can write your blog in a word processing format with all the tools available in the toolbar. It will be automatically formatted for the web as you type.</li>
<li><b>HTML</b>: You can toggle to HTML view for HTML formatting options and can have better control of your text, images and any element you want to insert in your post. </li>
<li><b>Text Area</b>: Just like any word processing tool, you'll be typing your text and inserting any image, quote, video etc. here.</li>
<li><b>Close</b>: This button closes your window. If you have unsaved work, make sure that it is saved.</li>
<li><b>Preview</b>: This option lets you view how your blog post will display on web. You can edit your work based on any discrepancy you see in the preview. </li>
<li><b>Save</b>: As it is apparent from the name, it saves your post.</li>
<li><b>Publish</b>: Hitting this button will publish your post and make it public. It is recommended that you <a href="http://thewebstop.blogspot.com/2016/12/common-mistakes-bloggers-make.html">proof read</a> your post before hitting this button. Although you can edit your work even after publishing, it is not one of the good practices to keep editing your post once it is published.</li>
<li><b>Labels</b>: Labels are basically "tags". These are the keywords with which a reader can search for your post. You can set multiple keywords separated by commas. </li>
<li><b>Schedule</b>: You can use this option if you want to publish your post on a particular date and time. You can choose 'Set date and time' and it will be published automatically. You don't need to login to your blogger and hit 'Publish' button manually. By default, it is set to 'Automatic' which means you need to hit the 'Publish' button manually to publish your post. </li>
<li><b>Permalink</b>: This option lets you choose the link URL for your post. It is set to 'Automatic Permalink' by default. If you want to customize it, choose 'Custom Permalink'. </li>
<li><b>Location</b>: You can select your location if you want your readers to know where you are located.</li>
<li><b>Options</b>: These are some setting options which you can set for each individual post. You can customize settings for reader comments, compose mode and line breaks in this 'Options' tab.</li>
</ol>
</li>
</ol>
Once you hit the "<b>Publish</b>" button, you have successfully published your first blog post!!! <br />
<br />
<br />
<h4 style="text-align: left;">
Blog Settings</h4>
The settings on the left of the dashboard will let you customize your blog settings in general.<br />
<br />
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12" left="" text-align:="">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7B12gZVTLVws30167lPrZYj3cbmzra14-KeXPoyfZuA-xv5QlG9kN_IVpItwJAvbxysyNBvibqUdeaSF6IfIbOT0cldLBwIpuRjcq9d0Isl2hfuWzWM99onHZyxgRKQv5pXx4O2uqLMk/s1600/blogger-dashboard-settings.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Blogger dashboard options - the web stop" border="0" class="img-fluid" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7B12gZVTLVws30167lPrZYj3cbmzra14-KeXPoyfZuA-xv5QlG9kN_IVpItwJAvbxysyNBvibqUdeaSF6IfIbOT0cldLBwIpuRjcq9d0Isl2hfuWzWM99onHZyxgRKQv5pXx4O2uqLMk/s1600/blogger-dashboard-settings.png" title="Blogger dashboard options - the web stop" /></a></div>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12" left="" text-align:="">
<ol>
<li><b>Posts</b>: It shows all the posts you have written so far with the options to edit, preview and delete them. It also gives the snippet of number of comments, views and date of publishing.</li>
<li><b>Stats</b>: The Stats link shows the statistics of pageviews your posts have. You can view which post is doing better in terms of drawing traffic, which sources are bringing traffic to your blog and in which part of the world your posts are viewed the most. </li>
<li><b>Comments</b>: You can view all the comments readers have left on your posts. You can delete or mark them spam.</li>
<li><b>Earnings</b>: If you have <a href="https://www.google.com/adsense/">Google Adsense</a> account set up for your blog post, you can view your earnings in this tab.
</li>
<li><b>Campaigns</b>: If you have <a href="https://www.google.ca/adwords/">Google Adwords</a> account set up for your blog, you can view the statistics and performance of your ads in this tab.
</li>
<li><b>Pages</b>: You can create more pages in your blog using this tab.</li>
<li><b>Layout</b>: You can view the layout of your blog using this tab. It is customizable and you can add more gadgets based on your preferences and delete the unwanted ones if your template permits it. Preview the arrangement before saving.</li>
<li><b>Template</b>: If you want to make any changes in the blog style (in terms of background, layout, colors, fonts etc.) by editing the HTML version of the blog, hit <b>EDIT HTML</b> button in the Template. You can alternatively click <b>Customize</b> to make changes in view mode. <b>Template</b> settings also lets you view your blog in Desktop and mobile version. You can choose mobile template or desktop template for mobile devices.</li>
<li><b>Settings</b>: The <b>Settings</b> tab lets you set all the major options for your blog. You can edit the Title, Description, Privacy settings and Blog address for your blog. You can also set permissions for other people to write posts on your blog. Other settings like number of posts to be shown on the main page, comments settings, language settings, Google Analytics settings and user settings - can all be done from this tab.</li>
<li><b>Reading List</b>: You can add your favourite blogs from other bloggers to your Reading List whose posts will be shown in your Reading List. You can read your favourite posts and write your posts all at one place - Blogger.</li>
<li><b>Help</b>: As the name suggests, it offers help regarding various blogger and blog queries. You can also visit Help Forum where you can share your queries and help other bloggers who have similar questions and interests.</li>
</ol>
</div>
</div>
incredibleopinionshttp://www.blogger.com/profile/13158742285797662777noreply@blogger.com33tag:blogger.com,1999:blog-5366767358653000993.post-41770340896517153412017-01-17T21:53:00.000-08:002017-03-01T20:29:19.917-08:00What's this in JS?<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW-sd7YnN0eV1rWfWaRKvVlnSHAmvGKTFafDazUybjl2gV8az5KETPIDhLjItu_Z8o80JEGSceoE8t5VpqwPx0FztGye2ukq9j4wT9CbKD1hzwyVEtXIDeNTT_S0Fuc_8z0-wPgaGnNns/s1600/What-is-this-in-Javascript.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="What's this in JavaScript - the web stop" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW-sd7YnN0eV1rWfWaRKvVlnSHAmvGKTFafDazUybjl2gV8az5KETPIDhLjItu_Z8o80JEGSceoE8t5VpqwPx0FztGye2ukq9j4wT9CbKD1hzwyVEtXIDeNTT_S0Fuc_8z0-wPgaGnNns/s320/What-is-this-in-Javascript.png" title="What's this in JavaScript - the web stop" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
If you work in JavaScript or any other programming language, you may have used <code>this</code>. However, <code>this</code> in JavaScript works differently than in other languages. There have been so many misconceptions about the use of <code>this</code> leading to its improper use and thus, causing errors. In this post, we'll try to understand the better use of <code>this</code>.<br />
<br />
<b>Jim likes coffee. Jim likes tea as well. </b><i>// </i><i>Without the use of "Pronoun"</i><br />
<b>Jim likes coffee. He likes tea as well. </b><i>// </i><i>With the use of "Pronoun"</i><br />
<b><br /></b> As in the second sentence, the introduction of "He" as a pronoun makes the sentence look better than the first one, <code>this</code> keyword is also used in writing neat and elegant code.<br />
<!-- in post ad -- >
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- the web stop in post -->
<br />
<ins class="adsbygoogle hidead" data-ad-client="ca-pub-8470413584014564" data-ad-format="auto" data-ad-slot="4606458736" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
Consider the following code:<br />
<br />
<pre><code>
function username(person) {
return person.name.toUpperCase();
}
function greeting(person) {
var salutation = "Hello" + " " + username(person);
console.log(salutation);
}
var jack = {
name : "Jack"
}
var jill = {
name : "Jill"
}
greeting(jack); //Hello JACK
greeting(jill); //Hello JILL
</code>
</pre>
<br />
and now the following code using <code>this</code> keyword instead of passing <code>person</code> object to both <code>username</code> and <code>greeting</code> functions.<br />
<br />
<pre><code>
function username() {
return this.name.toUpperCase();
}
function greeting() {
var salutation = "Hello" + " " + username.call(this);
console.log(salutation);
}
var jack = {
name : "Jack"
}
var jill = {
name : "Jill"
}
greeting.call(jack); //Hello JACK
greeting.call(jill); //Hello JILL
</code>
</pre>
The difference between the above two code snippets is that <code>this</code> has allowed both <code>username</code> and <code>greeting</code> functions to reuse the person object without creating a separate function for each object. We didn't define <code>person</code> object separately for <code>username</code> and <code>greeting</code> functions. Thus, <code>this</code> keyword has made our code cleaner and easier to re-use by indirectly passing along object reference.<br />
<br />
<h2>
What matters for <code>this</code> ?</h2>
The only thing matters for <code>this</code> binding is where the function is invoked instead of where and how it is declared. The appropriate use of <code>this</code> can be determined by nature of invoking a function while it is being executed.<br />
<br />
<div class="alert alert-danger" role="alert">
<i aria-hidden="true" class="fa fa-exclamation-circle"></i> <code>this</code> does not refer to the function itself.</div>
<br />
This is the most common misconception about <code>this</code> in JavaScript. We'll look into some scenarios where the value of <code>this</code> is determined by how the function is called.<br />
<!-- in post ad -- >
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- the web stop in post -->
<br />
<ins class="adsbygoogle hidead" data-ad-client="ca-pub-8470413584014564" data-ad-format="auto" data-ad-slot="4606458736" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
<h3 style="text-align: left;">
Global Context</h3>
<pre><code>function username() {
console.log(this.name);
}
var name = "Jill";
username(); //Jill
</code></pre>
<br />
In the above snippet of code, function <code>username</code> is invoked in an ordinary manner which is a standalone function invocation. By default, <code>this</code> binding will point to the global object which in this case is globally defined <code>name</code>. Hence, <code>this</code> is bound to <code>name</code>.<br />
<br />
<h3 style="text-align: left;">
Object method</h3>
<pre><code>
function username() {
console.log(this.name);
}
var person = {
name : "Jill",
username : username
}
person.username(); //Jill
</code></pre>
<br />
Again, it is all about how the function is invoked. This time, it is invoked using Object reference. <code>username</code> is defined twice but it is not relevant when choosing how to bind <code>this</code>. <i>( <i aria-hidden="true" class="fa fa-lightbulb-o"></i>: It's not about how the function is declared, it is about how it is called)</i>.<br />
<br />
However, <code> person </code> object "owns" the <code>username</code> function reference at the time the function is called. In this scenario, object should be used for the function call's <code>this</code> binding. Hence, <code>this.name</code> is bound to <code>person.name</code>
<br />
<br />
<h3 style="text-align: left;">
Without reference in an object</h3>
In the above example, we saw that function was declared inside an object as well. Hence, the function reference was called using object. What if in a typical scenario, we don't have a function reference on an object but we still want to force a function call using that object for <code>this</code> binding?<br />
<br />
Here come to play <code>call</code>, <code>apply</code> and <code>bind</code>
<br />
<br />
<h4>
<strong><span style="color: #666666;">call</span></strong></h4>
<pre><code>
function username() {
console.log(this.name);
}
var person = {
name : "Jill",
}
username.call(person); //Jill
</code></pre>
<br />
<code>username.call()</code> forces <code>this</code> to be <code>person</code> explicitly without having <code>username</code> function reference on <code>person</code>object.<br />
<br />
<h4>
<strong><span style="color: #666666;">apply</span></strong></h4>
<pre><code>
function person(name, age) {
console.log("Our first User is " + name + ", a " + this.gender + " of " + age + " years old");
}
var firstUser = {
gender : "female",
}
person.apply(firstUser, ["Jill", 25]); //Our first User is Jill, a female of 25 years old
</code></pre>
<br />
<code>person.apply</code> works the same way as <code>person.call</code> does. Both differ in number of arguments each can supply.The main difference is that <code>apply</code> lets you invoke the function with arguments as an array; <code>call</code> requires the parameters be listed explicitly using commas.<br />
<br />
Their syntaxes differ as in :<br />
<pre><code>
function.apply(valueOfThis, arrayOfArgs);
person.apply(firstUser, [Jill, 25]);
function.call(valueOfThis, arg1, arg2, ...);
username.call(person);
</code></pre>
<br />
<br />
<div class="alert alert-info" role="alert">
<i aria-hidden="true" class="fa fa-lightbulb-o"></i> <strong>Tip:</strong> a for arrays in apply and c for commas (separated list) in call.</div>
<br />
<h4>
<span style="color: #666666;">bind</span></h4>
bind() creates a new function and in the new function <code>this</code> is permanently bound to the first argument of the <code>bind</code> function. Unlike <code>call()</code> and <code>apply()</code>, <code>bind()</code> is not invoked immediately and rather creates a new function with a given <code>this</code> value and returns that function without executing it.<br />
<br />
<pre><code>
function add(a) {
console.log(this.b, a);
return this.b + a;
}
var myNumber = {
b : 4
}
var something = add.bind(myNumber);
var myValue = something(3); //4 3
console.log(myValue); // 7
</code></pre>
<br />
<br />
<h2>
<code>this</code> lexically</h2>
In ES6, the fat arrow functions (using fat arrow operator =>) use lexical scoping for binding <code>this</code> to the enclosing function.In global code, it will be set to the global context.<br />
<br />
<pre><code>
function name(){
return (firstName) => {
console.log(this.firstName);
};
}
var person1 = {
firstName : "Jill"
}
var person2 = {
firstName : "Jack"
}
var personName = name.call(person1);
personName.call(person2); //Jill
</code></pre>
<br />
In the above code snippet, the fat arrow operator in the function <code>name</code> captures <code>this</code> at the time function is invoked. Since <code>name</code> has <code>this</code> bound to <code>person1</code>, so <code>personName</code> will also be bound to <code>person1</code>. It is important to remember that lexical binding of fat arrow function cannot be overridden. It is a replacement of <code>var self = this;</code> from ES versions existings before ES6.<br />
<br />
<br />
<h2>
TL;DR</h2>
<div>
<ul style="text-align: left;">
<li><code>this</code> keyword is used to make code look cleaner, elegant and easier to reuse.</li>
<li><code>this</code> is a binding whose reference depends entirely on where the function is invoked rather than where it is declared.</li>
<li>call() is used when a function is invoked with its first argument being the value of <code>this</code> and other arguments can be comma separated list.</li>
<li>apply() is used when a function is invoked with its first argument being the value of <code>this</code> and other arguments as an array.</li>
<li>bind() creates another function with its first argument being the value of <code>this</code> and returns the function without executing it.</li>
<li>Fat arrow functions introduced in ES6 replaced <code>var self = this;</code> and use lexical scoping for <code>this</code> binding.</li>
</ul>
</div>
</div>
incredibleopinionshttp://www.blogger.com/profile/13158742285797662777noreply@blogger.com0tag:blogger.com,1999:blog-5366767358653000993.post-48745891358478916302017-01-02T19:51:00.000-08:002017-01-16T19:46:01.226-08:00Host Objects and Native Objects<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN5SEV498d1bJQRnadk1z60hWn-TG6HUSQpu9PeEfIofNll9UEjmi6_QSq7Zj_xFlvHhJHBFKYjTXJ6K6unBPX6Ccv9hTXKIWoz0KOHEOlfvt4bdcc_VA3hPn0mPIJXrFuRlBFduAPeG0/s1600/native-vs-host-objects-thewebstop-final.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN5SEV498d1bJQRnadk1z60hWn-TG6HUSQpu9PeEfIofNll9UEjmi6_QSq7Zj_xFlvHhJHBFKYjTXJ6K6unBPX6Ccv9hTXKIWoz0KOHEOlfvt4bdcc_VA3hPn0mPIJXrFuRlBFduAPeG0/s320/native-vs-host-objects-thewebstop-final.png" width="320" /></a></div>
<br />
<h2 style="text-align: left;">
Native Objects</h2>
<div>
Native objects are built-in objects in JavaScript. They are pre-defined and are always available to us as long as we are using JavaScipt irrespective of the environment the JavaScript code is running. Some commonly used Native Objects in JavaScript are:</div>
<ul style="text-align: left;">
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String()</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number()</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean()</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array()</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object()</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp">RegExp()</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">Error()</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image">Image()</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbol()</a></li>
</ul>
<i>Click on each of the above native objects to know more about it.</i><br />
<br />
<!-- in post ad -- >
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- the web stop in post -->
<ins class="adsbygoogle hidead" data-ad-client="ca-pub-8470413584014564" data-ad-format="auto" data-ad-slot="4606458736" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> Have a look at the following example:<br />
<br />
<pre><code class="javascript">
// Using string native object
var s = new String ("I am a string literal wrapped by an object wrapper");
console.log(typeof s); //object
//converting string object to string literal
s = s.toString();
console.log(typeof s); //string
//an example of string literal
var str = "I am a string literal";
console.log(typeof str); //string
</code>
</pre>
In the above code snippet, the result of the constructor form of value creation <code>new String("I am a string literal wrapped by an object wrapper")</code> is an object wrapper around the <code>string</code> literal* <code>"I am a string literal wrapped by an object wrapper"</code> value.<br />
<br />
<i><b>*String literal</b> - string denoted by single or double quotes, also known as primitive string. It is different than <code>string</code> object. </i>
<br />
<br />
This is also true for <code>number</code> and <code>boolean</code> objects because <code>number</code> and <code>boolean</code> objects are also denoted by <code>new</code> keyword and can be used as native constructors unlike their primitive counterparts.<br />
<br />
<h2 style="text-align: left;">
Host Objects</h2>
<div>
Host objects are the objects which are created and provided to JavaScript by the environment (host) which hosts the code. Be it in Node environment or in browser, the JavaScript code will behave differently when executed in different JavaScript engines. Since JavaScript always works in the context of the hosting environment, the result of executed code may differ depending on the current host.<br />
<br /></div>
One famous host object which developers interact regularly is - <code>console</code> object. It has several methods like <code>.log()</code>, <code>.error()</code>, <code>.table()</code>, <code>dir()</code>, <code>info()</code>, <code>profile()</code> etc. <code>console</code> object is provided by hosting environment so that JavaScript code can interact with the host for development related job. It may perform differently depending on the hosting environment which supplies the <code>console</code> object.<br />
<br />
<!-- in post ad --> <script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- the web stop in post -->
<br />
<ins class="adsbygoogle hidead" data-ad-client="ca-pub-8470413584014564" data-ad-format="auto" data-ad-slot="4606458736" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script> Consider the following code snippet:<br />
<br />
<pre><code>
bar();
var a = true;
if (a) {
function bar(){console.log("print a");}
} else {
function bar(){console.log("print b");}
}
</code>
</pre>
We get the following output if we run this above piece of code in :<br />
<br />
<b>Chrome browser</b>
<br />
<div class="alert alert-danger">
Uncaught TypeError: bar is not a function</div>
<b>node.js</b>
<br />
<div class="alert alert-success">
print b</div>
The above code has executed differently in Chrome and node.js because in Chrome, <code>console</code> connects to the developer tools’ console display, whereas in node.js and other server-side JavaScript environments, <code>console</code> as a global instance is configured to write to the standard-output (stdout) and standard-error (stderr) streams of the JavaScript environment.</div>
incredibleopinionshttp://www.blogger.com/profile/13158742285797662777noreply@blogger.com1tag:blogger.com,1999:blog-5366767358653000993.post-66184109457914284942016-12-21T12:44:00.001-08:002017-03-01T20:29:41.583-08:00What's new and different in Bootstrap 4?<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcK9KZLP77Bmh6Z1x3H8EeLD89YQMQJ_5dizb8ufaeQs2zJRXteRnV-xsJ8ORcoE2S56znCCv76mBWNEg57mZHzTKns1wQKvAR4Z9ZD5YaVjUXpgUeJMrlxSAezvghJwBepgsh0T4-a18/s1600/bootstrap-3-4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcK9KZLP77Bmh6Z1x3H8EeLD89YQMQJ_5dizb8ufaeQs2zJRXteRnV-xsJ8ORcoE2S56znCCv76mBWNEg57mZHzTKns1wQKvAR4Z9ZD5YaVjUXpgUeJMrlxSAezvghJwBepgsh0T4-a18/s320/bootstrap-3-4.png" style="display: none;" width="320" /></a></div>
<br />
Bootstrap, so far, has been the most popular HTML, CSS and JS framework for creating responsive, mobile-first websites. With more than 100,000 stars and 45,000 forks, Bootstrap is the second most-starred project on <a href="http://github.com/">GitHub</a>. Bootstrap (currently v3.3.7) is available to download and use. Mark Otto and Jacob Thornton, the authors of Bootstrap, have announced that Bootstrap 4 is under development and as of now, Bootstrap 4 alpha 6 has been deployed (January 6, 2017).<br />
<br />
<!-- in post ad -- >
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- the web stop in post -->
<ins class="adsbygoogle hidead"
style="display:block"
data-ad-client="ca-pub-8470413584014564"
data-ad-slot="4606458736"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Bootstrap 4 has come up with a few notable changes from Bootstrap 3 version. If you are thinking of migrating from Bootstrap 3 to Bootstrap 4, keep the following changes in consideration:<br />
<br />
<b><i>Since Bootstrap 4 has been released under beta version, it may be subjected to change. Therefore, the following list can be changed.</i></b><br />
<br />
<br />
<h2>
1. Browser Support</h2>
<table class="table table-striped table-responsive">
<thead class="thead-inverse">
<tr>
<th scope="col" width="33.33%"><b>Component</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 3</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 4</b></th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">Browser support</td>
<td>supports IE8 and iOS 6</td>
<td>does not support IE8 & IE9 and iOS 6. It is supporting only IE10-11/Microsoft Edge and iOS 7+</td>
</tr>
</tbody>
</table>
<br />
<br />
<h2>
2. Global Changes</h2>
<table class="table table-striped table-responsive">
<thead class="thead-inverse">
<tr>
<th scope="col" width="33.33%"><b>Component</b></th>
<th width="33.33%"><b>Bootstrap 3</b></th>
<th width="33.33%"><b>Bootstrap 4</b></th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">Preprocessor for source CSS files</td>
<td>LESS</td>
<td>SASS</td>
</tr>
<tr>
<td scope="row">Primary CSS unit</td>
<td><code>px</code></td>
<td><code>rem</code><br />
<br />
<code>px</code> will still be used in Bootstrap 4 for media queries, grid breakpoints and container widths as viewports are not affected by font-sizes</td>
</tr>
<tr>
<td scope="row">Global font-size</td>
<td>14px</td>
<td>16px<br />
<br />
Since the primary CSS unit is <code>rem</code> and global font-size is 16px,<br />
16px -> 1rem<br />
15px -> 0.9375rem<br />
14px -> 0.875rem<br />
13px -> 0.8125rem<br />
12px -> 0.75rem<br />
11px -> 0.6875rem<br />
10px -> 0.625rem</td>
</tr>
</tbody>
</table>
<br />
<br />
<h2>
3. Grid system</h2>
<table class="table table-responsive" style="display: table;">
<thead class="thead-inverse">
<tr>
<th scope="col" width="33.33%"><b>Component</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 3</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 4</b></th>
</tr>
</thead>
<tbody>
<tr style="background-color: #f9f9f9;">
<td scope="row"><h5>
Extra small</h5>
</td>
<td></td>
<td></td>
</tr>
<tr style="background-color: #f9f9f9;">
<td scope="row">Size</td>
<td>< 768px</td>
<td>< 576px</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td scope="row">max container width</td>
<td>none (auto)</td>
<td>none (auto)</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td scope="row">class prefix</td>
<td><code>.col-xs-</code></td>
<td><code>.col-xs-</code></td>
</tr>
<tr></tr>
<tr>
<td scope="row"><h5>
Small</h5>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td scope="row">size</td>
<td>≥ 768px</td>
<td>≥ 576px</td>
</tr>
<tr>
<td scope="row">max container width</td>
<td>750px</td>
<td>540px</td>
</tr>
<tr>
<td scope="row">class prefix</td>
<td><code>.col-sm-</code></td>
<td><code>.col-sm-</code></td>
</tr>
<tr style="background-color: #f9f9f9;">
<td scope="row"><h5>
Medium</h5>
</td>
<td></td>
<td></td>
</tr>
<tr style="background-color: #f9f9f9;">
<td scope="row">size</td>
<td>≥ 992px</td>
<td>≥ 768px</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td scope="row">max container width</td>
<td>970px</td>
<td>720px</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td scope="row">class prefix</td>
<td><code>.col-md-</code></td>
<td><code>.col-md-</code></td>
</tr>
<tr>
<td scope="row"><h5>
Large</h5>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td scope="row">size</td>
<td>≥ 1200px</td>
<td>≥ 992px</td>
</tr>
<tr>
<td scope="row">max container width</td>
<td>1170px</td>
<td>960px</td>
</tr>
<tr>
<td scope="row">class prefix</td>
<td><code>.col-lg-</code></td>
<td><code>.col-lg-</code></td>
</tr>
<tr style="background-color: #f9f9f9;">
<td scope="row"><h5>
Extra large</h5>
</td>
<td></td>
<td></td>
</tr>
<tr style="background-color: #f9f9f9;">
<td scope="row">size</td>
<td>-</td>
<td>≥ 1200px</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td scope="row">max container width</td>
<td>-</td>
<td>1140px</td>
</tr>
<tr style="background-color: #f9f9f9;">
<td scope="row">class prefix</td>
<td>-</td>
<td><code>.col-xl-</code></td>
</tr>
</tbody>
</table>
<br />
<br />
<h2>
4. Typography</h2>
<table class="table table-striped table-responsive">
<thead class="thead-inverse">
<tr>
<th scope="col" width="33.33%"><b>Component</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 3</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 4</b></th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">Blockquote</td>
<td>custom <code><blockquote></code> for quoting content</td>
<td>Wrap <code><blockquote class="blockquote"></code> around any HTML as the quote. Similarly, use <code>.blockquote-reverse</code> class for a blockquote with right-aligned content</td>
</tr>
<tr>
<td scope="row">Description list</td>
<td><code>.dl-horizontal</code> for horizontal description list, makes terms and descriptions side by side<br />
<pre><code class="html">
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
</code>
</pre>
</td>
<td scope="row">Dropped <code>.dl-horizontal</code>. Use <code>.row</code> on <code><dl></code> and use grid column classes on its <code><dt></code> and <code><dd></code> children<br />
<pre><code class="html">
<dl class="row">
<dt class="col-sm-3">Description lists</dt>
<dd class="col-sm-9">A description list is perfect for defining terms.</dd>
</dl>
</code>
</pre>
</td>
</tr>
<tr>
<td scope="row">Inline list</td>
<td><pre><code class="html">
<ul class="list-inline">
<li>....</li>
</ul>
</code>
</pre>
</td>
<td scope="row"><pre><code class="html">
<ul class="list-inline">
<li class="list-inline-item">....</li>
</ul>
</code>
</pre>
added <code>.list-inline-item</code> to the children <code><li></code> item</td>
</tr>
</tbody>
</table>
<br />
<br />
<h2>
5. Tables</h2>
<table class="table table-striped table-responsive">
<thead class="thead-inverse">
<tr>
<th scope="col" width="33.33%"><b>Component</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 3</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 4</b></th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">Responsive table</td>
<td>wrapping parent element must have <code>.table-responsive</code> class</td>
<td><code><table></code> element can have it instead of parent element</td>
</tr>
<tr>
<td scope="row">Inverted table</td>
<td>not supported</td>
<td>colors can be inverted - light text on dark background with <code>.table-inverse</code> class</td>
</tr>
<tr>
<td scope="row">Small table</td>
<td><code>.table-condensed</code></td>
<td><code>.table-sm</code></td>
</tr>
<tr>
<td scope="row">Table head modifiers</td>
<td>not supported</td>
<td>added table head modifiers using <code>.thead-default</code> and <code>.thead-inverse</code> classes</td>
</tr>
<tr>
<td scope="row">Contextual classes</td>
<td><code>.active</code>, <code>.success</code>, <code>.warning</code>, <code>.danger</code> and <code>.info</code> </td>
<td><code>.table-active</code>, <code>.table-success</code>, <code>.table-warning</code>, <code>.table-danger</code> and <code>.table-info</code>.</td>
</tr>
<tr>
<td scope="row">Reflow table</td>
<td>not supported</td>
<td>the table header becomes the first column of the table, the first row within the table body becomes the second column, the second row becomes the third column, etc. by using the class <code>.table-reflow</code> on <code><table></code></td>
</tr>
</tbody>
</table>
<br />
<br />
<h2>
6. Images</h2>
<table class="table table-striped table-responsive">
<thead class="thead-inverse">
<tr>
<th scope="col" width="33.33%"><b>Component</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 3</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 4</b></th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">Responsive images</td>
<td><code>.img-responsive</code> <br />
<pre><code class="html">
<img src="..." class="img-responsive" alt="abc" />
</code>
</pre>
</td>
<td><code>.img-fluid</code><br />
<pre><code class="html">
<img src="..." class="img-fluid" alt="abc" />
</code>
</pre>
</td>
</tr>
<tr>
<td scope="row">Rounded Images</td>
<td><code>.img-rounded</code> <br />
<pre><code class="html">
<img src="..." class="img-rounded" alt="abc" />
</code>
</pre>
</td>
<td><code>.rounded</code><br />
<pre><code class="html">
<img src="..." class="rounded" alt="abc" />
</code>
</pre>
</td>
</tr>
<tr>
<td scope="row">Image Circle</td>
<td><code>.img-circle</code> <br />
<pre><code class="html">
<img src="..." class="img-circle" alt="abc" />
</code>
</pre>
</td>
<td><code>.rounded-circle</code><br />
<pre><code class="html">
<img src="..." class="rounded-circle" alt="abc" />
</code>
</pre>
</td>
</tr>
</tbody>
</table>
<br />
<br />
<h2>
7. Forms</h2>
<table class="table table-striped table-responsive">
<thead class="thead-inverse">
<tr>
<th scope="col" width="33.33%"><b>Component</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 3</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 4</b></th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">Control labels</td>
<td><code>.control-label</code></td>
<td><code>.form-control-label</code></td>
</tr>
<tr>
<td scope="row">Form control size</td>
<td><code>.input-lg</code> and <code>.input-sm</code></td>
<td><code>.form-control-lg</code> and <code>.form-control-sm</code></td>
</tr>
<tr>
<td scope="row">Form group size</td>
<td><code>.form-group-*</code> <br />
*(lg, md, sm or xs)</td>
<td><code>.form-control-*</code><br />
*(lg, md, sm or xs)</td>
</tr>
<tr>
<td scope="row">Horizontal forms</td>
<td><code>.form-horizontal</code></td>
<td>No longer need the <code>.form-horizontal</code> class</td>
</tr>
</tbody>
</table>
<br />
<br />
<h2>
8. Buttons</h2>
<table class="table table-striped table-responsive">
<thead class="thead-inverse">
<tr>
<th scope="col" width="33.33%"><b>Component</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 3</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 4</b></th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">Button styles</td>
<td><code>.btn-default</code></td>
<td><code>.btn-secondary</code></td>
</tr>
<tr>
<td scope="row">Button size</td>
<td><code>.btn-xs</code></td>
<td>No longer available. Only <code>.btn-lg</code> and <code>.btn-sm</code> are available</td>
</tr>
<tr>
<td scope="row">Button group</td>
<td><code>.btn-group-xs</code></td>
<td>No longer available because of the removal of <code>.btn-xs</code></td>
</tr>
</tbody>
</table>
<br />
<br />
<h2>
9. Dropdowns</h2>
<table class="table table-striped table-responsive">
<thead class="thead-inverse">
<tr>
<th scope="col" width="33.33%"><b>Component</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 3</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 4</b></th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">Build</td>
<td>dropdowns applied to <code><li></code> using <code><ul></code></td>
<td>dropdowns can be built with <code><div></code> or <code><ul></code> now </td>
</tr>
<tr>
<td scope="row">Divider</td>
<td><code>.divider</code></td>
<td><code>.dropdown-divider</code></td>
</tr>
<tr>
<td scope="row">Dropdown item</td>
<td><pre><code class="html">
<ul class="dropdown-menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</code>
</pre>
dropdown items <code><li></code> don't require any class</td>
<td><pre><code class="html">
<div class="dropdown-menu">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
</div>
</code>
</pre>
Support dropdown items as <code><a></code> and <code><button></code>. The dropdown items require <code>.dropdown-item</code></td>
</tr>
<tr>
<td scope="row">Caret symbol</td>
<td>dropdown toggle must have explicit <code><span class="caret"></span></code> for caret symbol</td>
<td>no longer required. It is provided automatically via CSS's <code>::after</code> on <code>.dropdown-toggle</code></td>
</tr>
</tbody>
</table>
<h2>
10. Media queries</h2>
<table class="table table-striped table-responsive">
<tbody>
<tr>
<td width="30%"><b>Bootstrap 3</b></td>
<td width="70%"><pre><code>
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
</code>
</pre>
<br />
<br />
<h4>
Max and min widths</h4>
<pre><code>
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
</code>
</pre>
Not available via LESS mixins</td>
</tr>
<tr>
<td width="20%"><b>Bootstrap 4</b></td>
<td><pre><code>
/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }
</code>
</pre>
<br />
<br />
Available via SASS mixins:<br />
<pre><code>
@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }
</code>
</pre>
<br />
<br />
<h4>
Max and min widths</h4>
<pre><code>
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) { ... }
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) { ... }
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) { ... }
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) { ... }
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }
</code></pre>
</td></tr>
</tbody></table>
</div>
</div>
<br />
<br />
Also available via SASS mixins:<br />
<pre><code>
@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }
</code>
</pre>
<br />
<br />
<h2>
11. Flexbox</h2>
<table class="table table-striped table-responsive">
<thead class="thead-inverse">
<tr>
<th scope="col" width="20%"><b>Component</b></th>
<th scope="col" width="40%"><b>Bootstrap 3</b></th>
<th scope="col" width="40%"><b>Bootstrap 4</b></th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">flexbox support</td>
<td>flexbox is not enabled</td>
<td>Bootstrap 4 is now flexbox by default. It has included flexbox grid system which will keep the floats away.
<br />
<pre><code>
<div class="d-flex flex-row">
<div class="p-2">Item 1</div>
<div class="p-2">Item 2</div>
<div class="p-2">Item 3</div>
</div>
</code></pre>
</td>
</tr>
</tbody>
</table>
<br />
<br />
<h2>
12. Utilities</h2>
<table class="table table-striped table-responsive">
<thead class="thead-inverse">
<tr>
<th scope="col" width="33.33%"><b>Component</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 3</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 4</b></th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">Quick floats</td>
<td><code>.pull-left</code>, <code>.pull-right</code></td>
<td><code>.float-{xs,sm,md,lg,xl}-{left,right,none}</code> and removed <code>.pull-left</code> and <code>.pull-right</code> since they are redundant to <code>.float-xs-left</code> and <code>.float-xs-right</code></td>
</tr>
<tr>
<td scope="row">Text alignment</td>
<td><code>.text-{left,center,right}</code></td>
<td><code>.text-{xs,sm,md,lg,xl}-{left,center,right}</code></td>
</tr>
<tr>
<td scope="row">Center content blocks</td>
<td><code>.center-block</code></td>
<td><code>.mx-auto</code></td>
</tr>
</tbody>
</table>
<br />
<br />
<h2>
13. Responsive utilities</h2>
<table class="table table-striped table-responsive">
<thead class="thead-inverse">
<tr>
<th scope="col" width="33.33%"><b>Component</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 3</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 4</b></th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">Show/hide content</td>
<td><code>.show</code>, <code>.hidden</code> <br />
<br />
<code>.invisible</code> can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document</td>
<td>the <code>.hidden</code> and <code>.show</code> classes have been removed because they conflicted with jQuery’s <code>$(...).hide()</code> and <code>$(...).show()</code> methods. Toggling the <code>[hidden]</code> attribute, using inline styles like <code>style="display: none;"</code> and <code>style="display: block;"</code>, or toggling the <code>.invisible</code> class can show or hide the content</td></tr>
<tr>
<td scope="row">Toggling content across viewport breakpoints</td>
<td><code>.hidden-{xs,sm,md,lg,xl}</code><br />
<code>.visible-{xs,sm,md,lg,xl}-block</code><br />
<code>.visible-{xs,sm,md,lg,xl}-inline</code>
</td>
<td><code>.hidden-{xs,sm,md,lg}-up</code> and <code>.hidden-{xs,sm,md,lg}-down</code> <br />
<br />
<code>.hidden-*-up</code> classes hide the element when the viewport is at the given breakpoint or larger<br />
e.g. <code>.hidden-sm-up</code> hides an element on small, medium, large and extra-large devices<br />
<br />
<code>.hidden-*-down</code> classes hide the element when the viewport is at the given breakpoint or smaller.<br />
e.g. <code>.hidden-sm-down</code> hides an element on small, extra-small devices<br />
<br />
In order to achieve the results for <code>.visible-*</code>, we can make an element visible at that screen size by not hiding it and using combined classes <code>.hidden-*-up</code> and <code>.hidden-*-down</code>.<br />
e.g. <code>.hidden-md-down .hidden-xl-up</code> will automatically make the element show up on large devices</td>
</tr>
</tbody>
</table>
<br />
<br />
<h2>
14. Labels and badges</h2>
<table class="table table-striped table-responsive">
<thead class="thead-inverse">
<tr>
<th scope="col" width="33.33%"><b>Component</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 3</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 4</b></th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">Label</td>
<td><code>.label</code>
</td>
<td><code>.tag</code><br />
<br />
Labels in Bootstrap are used to provide additional information about something and they are different than <code><label></code> element<br />
<br />
This is the primary reason for <code>.label</code> to be renamed as <code>.tag</code> in Bootstrap 4 to disambiguate it from <code><label></code></td>
</tr>
<tr>
<td scope="row">Badge</td>
<td><code>.badge</code></td>
<td>encourages to use <code>.tag-pill</code> and <code>.tag</code> together to achieve the rounded look</td>
</tr>
</tbody>
</table>
<br />
<br />
<h2>
15. Non-responsive layout</h2>
<table class="table table-striped table-responsive">
<thead class="thead-inverse">
<tr>
<th scope="col" width="33.33%"><b>Component</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 3</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 4</b></th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">Non-responsiveness</td>
<td>Supported. The responsiveness of Bootstrap can be disabled by fixing the width of the container and using the first grid system tier</td>
<td>Not supported</td>
</tr>
</tbody>
</table>
<br />
<br />
<h2>
16. Glyphicons</h2>
<table class="table table-striped table-responsive">
<thead class="thead-inverse">
<tr>
<th scope="col" width="33.33%"><b>Component</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 3</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 4</b></th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">Glyphicons</td>
<td>Supported</td>
<td>Not supported. Instead, the upstream version of <a href="https://glyphicons.com/">Glyphicons</a>, <a href="https://octicons.github.com/">Octicons</a> or <a href="http://fontawesome.io/">Font Awesome</a> can be used</td>
</tr>
</tbody>
</table>
<br />
<br />
<h2>
17. Panels,Thumbnails and Wells</h2>
<table class="table table-striped table-responsive" style="display: table;">
<thead class="thead-inverse">
<tr>
<th scope="col" width="33.33%"><b>Component</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 3</b></th>
<th scope="col" width="33.33%"><b>Bootstrap 4</b></th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">panels</td>
<td><code>.panel</code></td>
<td>Not supported, replaced by <code>.card</code></td>
</tr>
<tr>
<td scope="row">thumbnails</td>
<td><code>.thumbnail</code></td>
<td>Not supported, replaced by <code>.card</code></td>
</tr>
<tr>
<td scope="row">wells</td>
<td><code>.well</code></td>
<td>Not supported, replaced by <code>.card</code></td>
</tr>
</tbody>
</table>
<h2>
18. Navigation bars</h2>
<table class="table table-striped table-responsive" style="display: table;">
<thead class="thead-inverse">
<tr>
<th scope="col" width="20%"><b>Component</b></th>
<th scope="col" width="40%"><b>Bootstrap 3</b></th>
<th scope="col" width="40%"><b>Bootstrap 4</b></th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">navbar default</td>
<td><code>.navbar-default</code> <br />
<pre><code>
<nav class="navbar navbar-default">
</nav>
</code>
</pre>
</td>
<td><code>.navbar-light</code> <br />
<pre><code>
<nav class="navbar navbar-light">
</nav>
</code>
</pre>
</td>
</tr>
<tr>
<td scope="row">navbar with flexbox</td>
<td>not enabled</td>
<td>navbar has been entirely written in flexbox and can use flexbox utilities</td>
</tr>
<tr>
<td scope="row">navbar toggle</td>
<td><code>.navbar-toggle</code></td>
<td><code>.navbar-toggler</code></td>
</tr>
<tr>
<td scope="row">navbar forms</td>
<td><code>.navbar-form</code> <br />
<pre><code>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</code></pre>
</td>
<td>Use <code>.form-inline</code> instead <br />
<pre><code>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</code></pre>
</td>
</tr>
<tr>
<td scope="row">nav base</td>
<td>requires <code>.nav</code> base class
<br />
<pre><code>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
</ul>
</code>
</pre>
</td>
<td><code>.nav</code> base class is not required.
<br />
<pre><code>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>
</code>
</pre>
</td>
</tr>
</tbody>
</table>
</div>
incredibleopinionshttp://www.blogger.com/profile/13158742285797662777noreply@blogger.com3tag:blogger.com,1999:blog-5366767358653000993.post-72507838697778257392016-12-10T18:18:00.002-08:002017-01-10T17:50:36.771-08:00Redirect Loop on Chrome<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH7P_sWjGAgYI8j45HgwNybkKOPF7b8bwloduEOH_xUS17lqD2dP355hVpUby-4cXzrmYfuOkjOLxwsWbLlPhiO1IFIZ9VuvjpfQu4dyMjCu_D78Smhqi11n_7AiHD609I79v0pvIgdLQ/s1600/chrome-redirect-loop.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH7P_sWjGAgYI8j45HgwNybkKOPF7b8bwloduEOH_xUS17lqD2dP355hVpUby-4cXzrmYfuOkjOLxwsWbLlPhiO1IFIZ9VuvjpfQu4dyMjCu_D78Smhqi11n_7AiHD609I79v0pvIgdLQ/s640/chrome-redirect-loop.png" style="display: none;" width="640" /></a></div>
<div style="text-align: center;">
Have you ever encountered such a situation when you have seen the following screen on your browser google chrome?</div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVmdamiq3JWrI6UBrAFgz3Jjgr8rNMNzrYyHCIyGFwYJnJnNtHUg92qrS4RJnzmg073gl2wTBxAX_-hvK3u5YLo-xgxFedLS7rSrusgrYvSExaQRUFdxytPEzFDoTEKtqLnTH0Y8pAKCs/s1600/redirect-chrome-screenshot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="572" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVmdamiq3JWrI6UBrAFgz3Jjgr8rNMNzrYyHCIyGFwYJnJnNtHUg92qrS4RJnzmg073gl2wTBxAX_-hvK3u5YLo-xgxFedLS7rSrusgrYvSExaQRUFdxytPEzFDoTEKtqLnTH0Y8pAKCs/s640/redirect-chrome-screenshot.png" width="640" class="img-fluid" /></a></div>
<!-- in post ad -- >
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- the web stop in post -->
<ins class="adsbygoogle hidead" data-ad-client="ca-pub-8470413584014564" data-ad-format="auto" data-ad-slot="4606458736" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
<h3 style="text-align: left;">
Error 310: ERR_TOO_MANY_REDIRECTS</h3>
<ol style="text-align: left;">
<li>Go to settings in Chrome browser and click Clear browsing data. <br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPVPoZqfcjEs3kXuBuEECW08vKWalnyYkxttiZf1kICaCg4s0c_Mr7JzWtGv4x3anmX9eP2Oxk_03DrhJBO8bWEy-4cGb-hNBe89bqfryzvKtF-XOO5XxmXlltsUqQWW2j_CofaNocU40/s1600/clear-browsing-data.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="577" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPVPoZqfcjEs3kXuBuEECW08vKWalnyYkxttiZf1kICaCg4s0c_Mr7JzWtGv4x3anmX9eP2Oxk_03DrhJBO8bWEy-4cGb-hNBe89bqfryzvKtF-XOO5XxmXlltsUqQWW2j_CofaNocU40/s640/clear-browsing-data.png" width="640" class="img-fluid" /></a>
</li>
<li>Clear Cookies and other site and plug-in data. </li>
<li>Refresh the webpage and it will be working.</li>
</ol>
Alternatively, if you do not want to clear cookies, you can always open the webpage in incognito window. The webpage won’t throw redirect loop error in incognito window.<br />
<!-- in post ad -- >
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- the web stop in post -->
<ins class="adsbygoogle hidead" data-ad-client="ca-pub-8470413584014564" data-ad-format="auto" data-ad-slot="4606458736" style="display: block;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br />
However, if the error persists, then it is a server configuration issue. You have to look into your redirect file, it may have not been configured properly.<br />
<br />
Also, if you have a wordpress blog which is giving you this error, you’d have to look into .htaccess file. The .htaccess file may have so many complicated redirect links which have caused a loop and consequently producing this error page. There can possibly be other redirect links in the file which are not related to the current redirect link you just added and adding a new redirect link has just complicated the redirection file causing Chrome to throw an error.<br />
<br />
<b>Tip:</b> You should also consider keeping .htaccess file less complicated and possibly clean with lesser redirects so as not to break the website.</div>
incredibleopinionshttp://www.blogger.com/profile/13158742285797662777noreply@blogger.com3tag:blogger.com,1999:blog-5366767358653000993.post-36476039298194201192016-12-10T17:33:00.003-08:002017-01-09T21:22:38.612-08:00Common Mistakes Bloggers Make<div dir="ltr" style="text-align: left;" trbidi="on">
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBLcAsY2QjCAOqH2CG3et1HrN8RhLjNzjT4QtUYQoHTNbm-6GMMOcGSiKNSKBkvtNE_M0u3XZ_TVIC-CFQIo9mB6hy1qfVkqHHqOVWaBhxli658UT9ul2tnfeDwAEaCX7bunWAQ1Goa4o/s1600/What+istechnology-.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBLcAsY2QjCAOqH2CG3et1HrN8RhLjNzjT4QtUYQoHTNbm-6GMMOcGSiKNSKBkvtNE_M0u3XZ_TVIC-CFQIo9mB6hy1qfVkqHHqOVWaBhxli658UT9ul2tnfeDwAEaCX7bunWAQ1Goa4o/s640/What+istechnology-.png" style="display: none;" width="640" /></a></div>
<br />
If you are a new blogger who just stepped into blogging shoes and wondering why there is no traffic to your blog, there is a strong possibility that you are also committing one of the common mistakes bloggers make.</div>
<div style="text-align: left;">
</div>
<ol style="text-align: left;">
<li><b>Not focusing on Comment Section : </b>Most newbie bloggers underestimate the power of comments on their blog which is a huge mistake. Never, ever ignore your audience. If they have taken time to come to your blog and commented on your blog post, you should respond to them. They can be your potential admirer. Responding to your audience and participating in dialogue shows your expertise on the subject. <br />
<br />It is always beneficial when someone comments on your blog even if they don’t agree with your viewpoint, this always give you a chance to prove your point of view and you always have a win-win situation. Don’t forget to filter the spam comments which puts the credibility of your blog at risk. Responding to comments also leads to potential ideas and contacts.</li>
<li><b>Focusing on advertising and not writing : </b>When you start a blog, don’t think of making money out of it right away. Your blog is not going to make you a millionaire overnight. Focus more on the content than advertising. Keep writing more meaningful content than to focus on the placements of ads. Too much sidebar clutter can make your audience ignore your blog posts and ultimately giving you a higher bounce rate.<br />
<br />Having more ads on your blog may give a cheap feel to its appearance. Your audience may have ad blockers installed which means that you are missing out important spaces for your content to be displayed. Google adsense does not allow more than 3 ads to be placed on one page but it does not mean that you have to place all the 3 ads on your page. Your content on the page needs to be compelling and engaging rather than number of ads.</li>
<li><b>Posting daily but not regular : </b>If you are bombarding your blog with new posts everyday, you are annoying the subscribers who subscribed your posts in their emails. They will be getting emails about your new posts everyday which may be annoying and you are again on the losing edge. Ultimately, you may get unsubscribed from them. Take time to post your blogs on regular basis. If you follow the regular pattern of once a week then stick to it. Most of the successful bloggers don’t post daily. Blogging 5-6 times a month is considered one of the genuine times to blog which never annoys your subscribers. <br /><br />Plan your posts and if you come up with ideas about your new post in the blog, draft it and spend some quality time on it rather than publishing it. In the end, content is the king. It does not really matter how many posts you write, all that matters is how better you write and how much traffic you drive.</li>
<li><b>Not using real keywords : </b>Are you using “Click here” or “more” as keywords in your links? You are again making one of the common mistakes bloggers make.<br /><br />There are many reasons why “Click here” should not be used as text for the links. Firstly, to have good user experience, a visitor on the website needs to know the context of the link, instead of reading the context backwards. Also, if you have multiple links on the page/post, how will you distinguish between each link? This leads to bad user experience. Secondly, search engines like Google, don’t consider the links to be optimized if they don’t have context to the actual content. The text for the links are considered one of the best ways to establish the context what the page, post or the website is about. If you miss on those, you are definitely losing it to be on the good books of Google.</li>
<!-- in post ad -- >
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- the web stop in post -->
<ins class="adsbygoogle hidead"
style="display:block"
data-ad-client="ca-pub-8470413584014564"
data-ad-slot="4606458736"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<li>
<b>Inappropriate SEO :</b> There is a strong possibility that if you have inappropriate SEO for your website, it is going to affect your ranking on search engines.<br /><br />Stuffing keywords to let them appear on the page more than once, broken links, poor content or copied content, not optimizing images (improper names and not providing “Alt” text), avoiding 404s – these all lead up to a bad SEO strategy and your website will fail badly at search engine rankings. In order to have engaged audience and better search engine rankings, monitor your website more often keeping the content updated.</li>
<li>
<b>Overly complicated :</b> If your posts have too many complex words to sound more professional, this won’t let you connect to your audience. Write as you are speaking with them in a more conversational manner rather than delivering lectures. Using simple language will connect your audience with you and they will read your post till the end. <br /><br />Avoid using vague language, complex vocabulary and ineffective analogies. The content which is well-written with simplicity is easy to understand and easy to remember. You can retain your audience if they are engaged to the content provided to them in a way they effortlessly understand.</li>
<li>
<b>Not an effective About page :</b> If you are keeping your identity ambiguous, you are not connecting with your audience. How can you expect them to trust your expertise when you are not trusting them and not telling them about you. As I said before, you need to make a contact with them so that they know whom they are investing their trust in. <br /><br />Tell people who you are, why you are here and why they should read what you posted. Making them believe in your beliefs is only possible if they know the real you.</li>
<li><b>Indulged in copyright issues : </b>Sometimes, unknowingly, bloggers are indulged in copyright issues. Copying images from google or any other search engine and not citing the source lands them to the copyright infringement issues. Also, writing blog content from someone’s post is not a good idea either as long as you mention their information on it. <br /><br />Basically, everything on the web is subjected to copyright. In short, some people do not care when their content or images are copied but some people take it very seriously. In order to prevent yourself from any such legal issues, you can label it clearly and cite the resource. Using a royalty-free image won’t land you in trouble at all. So if you are doubtful about the copyright, I would encourage you to use royalty-free images only. Alternatively, you can use “Creative Common Images” on Flickr where you can copy, distribute, display, modify somebody’s images – only if you give credit to them. <a href="https://www.flickr.com/creativecommons/">More information about Creative Commons on Flickr.</a></li>
<li>
<b>Not proofreading :</b> Not giving enough time to proofread your posts may land your posts published with grammar mistakes or typos. Once you finished writing your post, don’t make haste to publish and let it go live. <br /><br />You may be too excited in posting your blog but not your audience. They are not expecting their inboxes to be crowded with some posts which have typos, grammatical errors or unfinished sentences. Get familiar with the frequent errors you make. Some words like there, their and they’re, your and you’re should not be mixed. It is quite probable that when you write your post, ideas keep flowing in and you don’t pay attention towards spellings or any other grammatical errors. That is why we need proofreading! Give some time to proofreading before publishing your piece of work. Again, not proofreading your work may affect your credibility and your connection with your audience adversely.</li>
<!-- in post ad -- >
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- The webstop 350 in post ad -->
<ins class="adsbygoogle hidead"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-8470413584014564"
data-ad-slot="2990124734"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<li>
<b>Forcing keywords :</b> When writing a post, do not force keywords to make SEO work for your blog. Forced keywords can be clearly noticed when the sentences don’t make sense and ultimately, it lowers the quality of your content. Search engines have so many people working for them and they are paid hefty amount of salaries to figure out who is genuinely writing a post or forcing keywords in them. Nobody likes to be blacklisted and penalized by Google, right? <br /><br />Keywords can be placed appropriately in the title of the post, first paragraph of your post, meta description tag, alternate text of the images in the post or page title. If you overdo in stuffing keywords, they are likely to be noticed. It is advisable to focus on your content and not to worry about keywords. Let them flow naturally in your content.</li>
</ol>
</div>
incredibleopinionshttp://www.blogger.com/profile/13158742285797662777noreply@blogger.com2