SitePointhttps://www.sitepoint.com
Learn CSS | HTML5 | JavaScript | Wordpress | Tutorials-Web Development | Reference | Books and MoreThu, 24 May 2018 17:36:09 +0000en-UShourly1https://wordpress.org/?v=4.8.1Boosting Your Workflow with Angular 5 Snippets and VS Codehttp://feedproxy.google.com/~r/SitepointFeed/~3/OL6T-Pzf7eI/
https://www.sitepoint.com/boosting-workflow-angular-5-snippets-vs-code/#respondThu, 24 May 2018 17:36:09 +0000https://www.sitepoint.com/?p=164722<p><strong>In this article, we’ll focus on how to use Angular 5 snippets in Visual Studio Code to improve our workflow. We’ll first start with the basics of using and creating snippets. We’ll look at how we can use <a href="https://github.com/johnpapa/vscode-angular-snippets">Angular snippets for VS Code</a> in an Angular project. Then we’ll later look at how we can create our own snippets and share them with others.</strong></p>
<p>For anyone who’s become proficient in a programming language, you know how boring it is to type the same code over and over again. You eventually start copying and pasting pieces of your code to spare your fingers the agony of writing another <code>for</code> loop.</p>
<p>What if your editor could help you insert this common code for you automatically as you type? That would be awesome, right?</p>
<p>Well, you probably know them as <strong>snippets</strong>. It’s a feature that’s common in every modern IDE currently available. Even Notepad++ supports them (though not enabled by default).</p>
<h2 id="prerequisites">Prerequisites</h2>
<p>Before you start, you’ll need to have the latest version of <a href="https://code.visualstudio.com/">Visual Studio Code</a> installed on your machine. We’ll also be looking at Angular 5 snippets. So having at least a basic knowledge of Angular will be helpful, but not necessary.</p>
<p>You’ll need to use an existing or new Angular 5 project in order to experiment with snippets. I assume you have the latest version of Node.js, or at least a version that’s not older than Node.js 6. Here’s the command for installing the Angular CLI tool if you haven’t:</p>
<pre><code class="bash language-bash">npm install -g @angular/cli
# or
yarn global add @angular/cli
</code></pre>
<h2 id="snippetsexplained">Snippets Explained</h2>
<p>Snippets are templates that allow you to easily insert repetitive code. When you first install VSCode, it comes with snippets for JavaScript pre-installed. To check them out, just open an existing JavaScript file or create a new one in your workspace and try out typing these prefixes:</p>
<ul>
<li><code>log</code></li>
<li><code>if</code></li>
<li><code>ifelse</code></li>
<li><code>forof</code></li>
<li><code>settimeout</code></li>
</ul>
<p>As you type, a popup list will appear giving you options to autocomplete your code. As soon as the right snippet is highlighted, just press <kbd>enter</kbd> to insert the snippet. In some cases, such as <code>log</code> and <code>for</code>, you may need to press the down key to select the right snippet.</p>
<p>You’re probably wondering where these JavaScript snippets are coming from exactly. Well, you can find the exact definitions in these locations:</p>
<ul>
<li>Windows - <code>C:\Program Files\Microsoft VS Code\resources\app\extensions\javascript\snippets\javascript.json</code></li>
<li>Linux -<code>/usr/share/code/resources/app/extensions/javascript/snippets/javascript.json</code></li>
</ul>
<p>We’ll look into how we can create our own snippets, but first let’s explore some third-party snippets.</p>
<h2 id="howtousesnippets">How to Use Snippets</h2>
<p>At the time of writing, the <a href="https://marketplace.visualstudio.com/search?target=VSCode&#38;category=Snippets&#38;sortBy=Downloads">Visual Studio Marketplace</a> listed 934 extensions in the snippet category. You’ll find snippets for every programming language created, including Pascal! This means you probably should check out the marketplace before creating your own snippets. As mentioned earlier, we’ll be looking at Angular 5 snippets. Locate an existing Angular 5 project in your workspace or just create a new one:</p>
<pre><code class="bash language-bash">ng new snippets-demo
</code></pre>
<p>Once the project is set up, open it in VSCode. Next, click the extension icon on the activity bar to open the <em>Extensions</em> panel. Search for <code>Angular 5</code>. The search results should list several Angular extensions. Install the one that has the author <strong>‘John Papa’</strong>. After installation is done, click the reload button to restart VSCode. This Angular 5 snippets extension comes with over 50 snippets. About 70% of the snippets are written for TypeScript, and the rest are mostly for HTML. There are some Docker snippets in there too.</p>
<p><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2018/03/152165194701-install-angular-snippets.png" alt="Angular 5 Snippets" /></p>
<p>Let’s try a few of these Angular 5 snippets. Create a new file called <code>app.service.ts</code> inside the app folder. Open the file and start typing “a-service”. A pop-up list will appear as you type. Even before you finish typing, you should have the correct option highlighted. Press <kbd>enter</kbd> to insert the template. Once the snippet is entered, take note that the generated class name is highlighted for you to change.</p>
<p><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2018/03/1521721031a-service.gif" alt="angular-service" /></p>
<p>Just type “App” and the entire class name will read “AppService”. Pretty convenient, right? Let’s try something different. Delete the entire code in <code>app-service.ts</code> and type this prefix:</p>
<pre><code>a-service-httpclient
</code></pre>
<p>You should get a service class definition, including imports and <code>HttpClient</code> injection in the class constructor. Just like before, rename the class name to <code>AppService</code>.</p>
<p><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2018/03/1521722571a-service-httpclient.gif" alt="http-client-service" /></p>
<p>Next, let’s use another snippet to define an HTTP GET request. Let’s define an empty GET method. For this piece of code, you have to type; don’t copy-paste:</p>
<pre><code class="typescript language-typescript">getPosts(): Observable&#60;any[]&#62; {
}
</code></pre>
<p>As you start to type “Observable”, a snippet option for it will appear. Just press <kbd>enter</kbd> and the Observable class will be imported for you automatically.</p>
<p><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2018/03/1521723655observable.gif" alt="Observable Snippet" /></p>
<p>Next, let’s use another snippet to complete the function. Start typing this prefix: “a-httpclient-get”. Pressing <kbd>enter</kbd> will insert this snippet for you:</p>
<pre><code class="typescript language-typescript">return this.httpClient.get('url');
</code></pre>
<p>Change the URL to an imaginary path — let’s say <code>/posts</code>. Obviously our code won’t run, as we haven’t set up any APIs. Fix it by adding <code>&#60;any&#62;</code> after <code>get</code>. The complete method now looks like this.</p>
<pre><code class="typescript language-typescript">getPosts(): Observable&#60;any[]&#62; {
return this.httpClient.get&#60;any[]&#62;('/posts');
}
</code></pre>
<p>Now that we know a little bit about how to use Angular 5 snippets, let’s see how they’re created.</p>
<p><em>Continue reading %<a rel="nofollow" href="https://www.sitepoint.com/boosting-workflow-angular-5-snippets-vs-code/">Boosting Your Workflow with Angular 5 Snippets and VS Code</a>%</em></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=OL6T-Pzf7eI:vGO4qy_Fi24:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=OL6T-Pzf7eI:vGO4qy_Fi24:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=OL6T-Pzf7eI:vGO4qy_Fi24:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?i=OL6T-Pzf7eI:vGO4qy_Fi24:gIN9vFwOqvQ" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SitepointFeed/~4/OL6T-Pzf7eI" height="1" width="1" alt=""/>https://www.sitepoint.com/boosting-workflow-angular-5-snippets-vs-code/feed/0https://www.sitepoint.com/boosting-workflow-angular-5-snippets-vs-code/Boosting Website Conversions Exponentially with A/B Testinghttp://feedproxy.google.com/~r/SitepointFeed/~3/vJhROx9TTAE/
https://www.sitepoint.com/boosting-website-conversions-exponentially-with-ab-testing/#respondThu, 24 May 2018 17:00:48 +0000https://www.sitepoint.com/?p=162687<p><strong>Many designers underestimate the power of A/B testing and its ability to drive UX and boost conversions. Unfortunately, this is because most A/B tests are conducted without the forethought of a testing plan. Yes, it's easy to run an A/B test, but it's <em>not</em> as easy to do it well.</strong></p>
<p>In this article, I’m going to show you a real-life case study where we used A/B testing to boost conversions exponentially. I’ll walk you through the process that we took, mentioning any tools used, and linking to any useful tutorials along the way. I’m Jon from <a href="https://thegood.com">The Good</a>, where we turn visitors into buyers — and that’s exactly what we did for TreeRing. Read on to find out how.</p>
<h2 id="whyabtestingoftenfails">Why A/B Testing Often Fails</h2>
<p>First, let’s talk about why A/B testing often fails.</p>
<p>One of the main reasons that A/B testing fails to yield actionable results is the lack of a strategic, <a href="https://thegood.com/insights/structured-testing-process/">iterative testing plan</a>. Many companies instead approach A/B testing in a scattered, shotgun manner, trying a random test here, another there, all without a cohesive and strategic technique. This is like trying to improve on the piano by practicing different instruments every day. You may have occasional, random success, but you won’t make much substantive progress.</p>
<p>The power of A/B testing is unlocked when you develop a step-by-step, robust testing plan with each step providing more insights into what’s going wrong. In other words, the results of the first test inform how you perform the second test. When you use this method, you see compounding results, with each test achieving greater results. Slowly but surely, as they say.</p>
<h2 id="introducingtreeringandtheiruxproblems">Introducing TreeRing and Their UX Problems</h2>
<p><a href="https://www.treering.com/">TreeRing</a> helps schools create better yearbooks. Their social-first approach lets teachers, parents, and students capture memories, safely share them with the school community, and create free, personalized pages for the printed edition — all at no extra cost to the school.</p>
<p>They came to us needing help with their website, where the user experience was significantly hampering their growth. They were seeing a low lead-generation conversion rate for their free sample download. Their primary goal was to get visitors to download a free sample yearbook, and they in turn could use these leads to generate sales and retain customers. But their conversion rate was painfully low, generating much fewer leads than desired.</p>
<p>They had tried one-off conversion improvements and had only seen minimal success. They knew that a better process for A/B testing was crucial, but couldn’t figure out how to make it work, and since their organic traffic growth was slowing due to platforms like Google and Facebook shifting toward an <a href="https://moz.com/blog/google-organic-clicks-shifting-to-paid">emphasis on paid traffic</a>, they wanted to get more conversions from their existing traffic, rather than paying to acquire new traffic.</p>
<p>That being said, they also wanted us to take a detailed look at their website to determine precisely where they should focus their testing strategy. They had implemented various changes in an effort to improve conversion rates and hadn’t seen much success, because they weren't 100% on what they should be focusing on.</p>
<p>We needed to find out which areas of the UI were key, then carry out a conversion rate optimization strategy to begin test variants of these key UI elements.</p>
<h2 id="howabtestingbecamepartofthestrategy">How A/B Testing Became Part of the Strategy</h2>
<p>We began with an initial audit of their site, working to identify the biggest UX dark spots.</p>
<p>We like to approach problems with a "leaky bucket" strategy. If we can find and fix the largest holes first, we’ll see the biggest impact. Once we highlighted the primary issues (which we’ll talk more about in a moment), we began using A/B testing to solve those issues.</p>
<p><em>Continue reading %<a rel="nofollow" href="https://www.sitepoint.com/boosting-website-conversions-exponentially-with-ab-testing/">Boosting Website Conversions Exponentially with A/B Testing</a>%</em></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=vJhROx9TTAE:vhEotMylBPI:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=vJhROx9TTAE:vhEotMylBPI:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=vJhROx9TTAE:vhEotMylBPI:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?i=vJhROx9TTAE:vhEotMylBPI:gIN9vFwOqvQ" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SitepointFeed/~4/vJhROx9TTAE" height="1" width="1" alt=""/>https://www.sitepoint.com/boosting-website-conversions-exponentially-with-ab-testing/feed/0https://www.sitepoint.com/boosting-website-conversions-exponentially-with-ab-testing/Ethereum: How Transaction Costs are Calculatedhttp://feedproxy.google.com/~r/SitepointFeed/~3/i5_uzNQraQA/
https://www.sitepoint.com/ethereum-transaction-costs/#respondThu, 24 May 2018 15:00:57 +0000https://www.sitepoint.com/?p=165986<p><em>This article on Ethereum Transaction Costs was originally published at <a href="https://bitfalls.com/2017/12/05/ethereum-gas-and-transaction-fees-explained/">Bruno’s Bitfalls website</a>, and is reproduced here with permission.</em></p>
<p><strong>When sending a Bitcoin transaction, its fee is proportionate to its size. The more <a href="https://bitfalls.com/2017/10/03/read-bitcoin-blockchain-data-blockexplorer/">inputs and outputs</a>, the more expensive it is. Add to that the factor of <a href="https://blockchain.info/unconfirmed-transactions">pending transactions</a>, and transaction fees can skyrocket based on those two factors alone.</strong></p>
<hr />
<p><em>It’s recommended you read the following materials before diving into the rest of this post in order to better understand the terminology we’ll be mentioning.</em></p>
<ul>
<li><a href="https://bitfalls.com/2017/08/20/cryptocurrency/">What is cryptocurrency?</a></li>
<li><a href="https://bitfalls.com/2017/08/20/cryptocurrency/">What is the blockchain and how does it work?</a></li>
<li><a href="https://bitfalls.com/2017/09/19/what-ethereum-compare-to-bitcoin/">What is Ethereum and how is it different from Bitcoin?</a></li>
<li><a href="https://bitfalls.com/2017/10/23/whats-the-difference-between-proof-of-work-pow-proof-of-stake-pos-and-delegated-pos/">What is mining and what’s the difference between PoW and PoS mining?</a></li>
</ul>
<p><em>Basic knowledge of programming terms (variables, loops) might also come in handy.</em></p>
<hr />
<p>With Ethereum, given that we’re talking about a programming language within the protocol, it’s possible to be very computationally demanding with very little text or code (something which would be very cheap in the BTC-verse). Let’s look at this loop, for example:</p>
<pre><code class="sol language-sol">while (i++ &#60; 1000) {
j = j + i;
}
</code></pre>
<p>This loop means “for as long as <code>i</code> is smaller than 1000, increase it by 1 and then sum up <code>i</code> and <code>j</code> and write the result into <code>j</code>, then do it all again.” This loop will execute 1000 times if <code>i</code> is 0, or more if it’s a negative number.</p>
<p>To pay for this computational cost in a fair way — since it has to be executed on all miners’ machines at once and they spend their resources and time on it — the concept of <strong>gas</strong> was introduced. Gas is used to pay for the execution of these so-called smart contracts (Ethereum programs) inside the EVM. For example, <code>i</code> + <code>j</code> above is a summation operation which costs 3 gas every time it’s executed, so 3000 gas if executed 1000 times.</p>
<p>To explain <em>gas</em> properly, let’s first cover the <em>EVM</em>.</p>
<h2 id="evm">EVM</h2>
<p>EVM stands for <em>Ethereum Virtual Machine</em>. But what is a virtual machine anyway?</p>
<h3 id="virtualmachine">Virtual Machine</h3>
<p>A virtual machine is software running on a specific computer which contains another operating system completely encapsulated inside the main one. For example, a virtual machine allows you to run Windows inside Linux, Linux inside Windows, Windows on macOS like in the image below, or any other combination.</p>
<p><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2018/05/1527114522windows-macos.jpg" alt="Windows inside macOS" width="580" height="363" class="aligncenter size-full wp-image-165988" /></p>
<p>We use virtual machines to separate the environment in which we do our everyday computer use from the environment we work or program in. This lets us keep viruses at bay (they have no way of breaching the virtual machine and getting to the main operating system), helps prevent infinite loops from crashing our main operating system, and holds hard-drive corruptions like the infamous WannaCry ransomware at bay. Additionally, VMs let us use Windows games on Linux, for example, or allow us to program in different versions of the same programming language’s environment easily, without mixing them up.</p>
<h3 id="evm-1">EVM</h3>
<p>The Ethereum Virtual Machine is built into the software running on the Ethereum protocol. It executes smart contracts — Ethereum programs written in the Solidity language. The EVM is contained in the <a href="https://bitfalls.com/2017/11/26/whats-bitcoin-node-mining-vs-validation/">full nodes</a> of the Ethereum network, inside of which it executes these Ethereum-user-written programs.</p>
<p>Any <a href="https://bitfalls.com/glossary/#mining">miner</a> of Ethereum simultaneously executes smart contract code. What this means is that Ethereum programs (dapps — decentralized apps) are executed on everyone’s computer at the same time (decentralized).</p>
<p>Execution of these programs isn’t free, however. Miners spend their own electricity, time, and hardware to do this. To pay them for their effort of executing computer instructions (like “store the value 5 into the variable X”), the concept of <em>gas</em> was introduced.</p>
<p><em>Continue reading %<a rel="nofollow" href="https://www.sitepoint.com/ethereum-transaction-costs/">Ethereum: How Transaction Costs are Calculated</a>%</em></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=i5_uzNQraQA:LdfMD_9oDfE:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=i5_uzNQraQA:LdfMD_9oDfE:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=i5_uzNQraQA:LdfMD_9oDfE:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?i=i5_uzNQraQA:LdfMD_9oDfE:gIN9vFwOqvQ" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SitepointFeed/~4/i5_uzNQraQA" height="1" width="1" alt=""/>https://www.sitepoint.com/ethereum-transaction-costs/feed/0https://www.sitepoint.com/ethereum-transaction-costs/Top Angular Plugins for Sublime Texthttp://feedproxy.google.com/~r/SitepointFeed/~3/-eLsDe5gG_s/
https://www.sitepoint.com/top-angular-plugins-sublime-text/#respondWed, 23 May 2018 17:35:28 +0000https://www.sitepoint.com/?p=164730<p><strong>This article covers a number of Angular plugins for the Sublime Text text editor.</strong></p>
<p>Whether you’re new to Angular (version 2+) development, and looking to get started with it and integrate it more closely with your code editor of choice, or you’re an old hand at Angular development and you’re trying your hand with Sublime Text as a new editor, integrating the two has never been easier.</p>
<p>There are lots of options for Angular plugins that can smooth your way developing Angular apps using Sublime Text. You’ll need to set up the Sublime Text package manager (called “Package Control”) prior to getting started, and then you can take a look at the list of plugins here and see if any meet your needs!</p>
<h2 id="settinguppackagecontrol">Setting up Package Control</h2>
<p>In order to use most of the Angular plugins that will be discussed in this article, you’ll first need to set up Package Control in Sublime Text. This is a fairly painless process. The easiest way involves copy-pasting a configuration code.</p>
<ol>
<li>Use the hotkey <kbd>CTRL</kbd> + <kbd>&#96;</kbd> or use the <em>View > Show Console</em> menu to bring up the integrated Sublime Text console.</li>
<li>Paste the block of Python code into the console, which can be copied from the <a href="https://packagecontrol.io/installation">Package Control Installation page</a> and follow the instructions there.</li>
<li>Once this is done, the Package Control menus will be set up! Now, all you’ll need to do is find and install your packages.</li>
</ol>
<h3 id="installingasublimetextpackageviapackagecontrolmenus">Installing a Sublime Text Package via Package Control Menus</h3>
<p>Using Package Control is a breeze. You’ll need to open Package Control, select the <em>install</em> menu, and then choose and install a package:</p>
<ol>
<li>Use the shortcut <kbd>CMD</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> (<kbd>CTRL</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>, depending on OS) to open the command palette.</li>
<li>Type <code>install package</code> and then press <code>Enter</code>, which brings you to the list of available packages.</li>
<li>Search for the package by name, select the package, then press <kbd>Enter</kbd> to install.</li>
</ol>
<h2 id="angular2htmlpackage">Angular 2 HTML Package</h2>
<p>The <a href="https://packagecontrol.io/packages/Ngx%20HTML">Angular 2 HTML</a> plugin provides augmented HTML syntax for Sublime Text. You’ll be able to use Angular attributes without syntax highlighting being broken. Additionally, the JavaScript parts of your pages will also highlight as JavaScript. A small but incredibly useful addition for Angular developers.</p>
<h3 id="angular2htmlpackagesetup">Angular 2 HTML Package Setup</h3>
<p>At the time of this writing, this plugin was not present in Package Control, but can be installed manually via the following steps.</p>
<ol>
<li>
<p>Close Sublime Text and navigate via the Command Line to your Sublime Text 3 “Packages” folder in your application installation. In macOS, this is at <code>/Users/{user}/Library/Application Support/Sublime Text 3/Packages</code>.</p>
</li>
<li>
<p>Clone the repository into your Packages folder with the following:</p>
<pre><code>git clone https://github.com/princemaple/ngx-html-syntax
</code></pre>
</li>
<li>
<p>Re-open Sublime Text 3, and check in the <em>View > Syntax</em> menu to ensure that Ngx HTML is an option.</p>
</li>
</ol>
<p>Additionally, you can have Sublime Text automatically highlight <code>.component.html</code> files with Angular 2 HTML Syntax:</p>
<ol>
<li>
<p>Open a <code>.component.html</code> file.</p>
</li>
<li>
<p>Choose <em>View > Syntax > Ngx HTML</em>.</p>
</li>
<li>
<p>Go to <em>Preferences > Settings > Syntax Specific</em>. Because your current file is using the Ngx HTML syntax, it should open the syntax-specific settings file for Ngx HTML. If so, add an extensions entry to the settings panel on the right:</p>
<pre><code>"extensions":
[
"component.html"
]
</code></pre>
</li>
<li>
<p>Restart Sublime Text. Now, all <code>.component.html</code> files should automatically use the Ngx Syntax plugin!</p>
</li>
</ol>
<p><em>Continue reading %<a rel="nofollow" href="https://www.sitepoint.com/top-angular-plugins-sublime-text/">Top Angular Plugins for Sublime Text</a>%</em></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=-eLsDe5gG_s:y5AGUS01PDc:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=-eLsDe5gG_s:y5AGUS01PDc:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=-eLsDe5gG_s:y5AGUS01PDc:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?i=-eLsDe5gG_s:y5AGUS01PDc:gIN9vFwOqvQ" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SitepointFeed/~4/-eLsDe5gG_s" height="1" width="1" alt=""/>https://www.sitepoint.com/top-angular-plugins-sublime-text/feed/0https://www.sitepoint.com/top-angular-plugins-sublime-text/Descriptive Analytics vs Diagnostic Analyticshttp://feedproxy.google.com/~r/SitepointFeed/~3/U-2e68e7gyE/
https://www.sitepoint.com/descriptive-analytics-vs-diagnostic-analytics/#respondWed, 23 May 2018 17:00:02 +0000https://www.sitepoint.com/?p=162212<p><strong>Recently, <a href="https://www.sitepoint.com/designers-guide-kpis-vanity-metrics">David Attard wrote about analytics and KPIs</a> (key performance indicators), and how they can be used to understand our website users better --- and, in turn, to help us design better experiences for those users. He told us about the important metrics to analyze (<em>time on site, bounce rate, conversions, exit rates</em>, etc.), but also mentioned that, while these metrics help us to understand what users are doing (or not doing) on our website, the reasons <em>why</em> can still be a bit of a blur. This is because, while data is objective, the conclusions drawn from it are often <em>sub</em>jective.</strong></p>
<p>Even though KPIs <strong>describe</strong> our users' behavior, more context is needed to draw solid conclusions about the state of our UX. In order for this to happen, we have to use other techniques --- such as A/B testing and usability testing --- to <strong>diagnose</strong> the UX flaws we identify through descriptive analytics. In this article, I'm going to explain the difference between <strong>descriptive analytics</strong> and <strong>diagnostic analytics</strong>, so that you have a realistic expectation of what descriptive analytics can do, and what you'll need to gain from descriptive analytics before you begin A/B testing and usability testing.</p>
<h2 id="descriptiveanalytics">Descriptive Analytics</h2>
<p><em>Descriptive analytics in a nutshell: <strong>what has happened?</strong></em></p>
<p>When you visit a nurse or doctor, it's because you have undesirable symptoms that indicate bad health. You have trouble doing the things you need to do because of this. You don't know what's going on exactly, only that you aren't functioning at an optimal level. This is likened to analytics, where business goals can't be met because of bad user experience. Certain KPIs might indicate this, such as high bounce rate or low <em>Avg. Time on Site</em>.</p>
<p>KPIs describe the symptoms, but they don't actually diagnose what the underlying issue is, and this is why we call them descriptive analytics. However, we can <em>use</em> the symptoms to help diagnose the UX flaws.</p>
<p>We can use tools like <a href="https://www.kissmetrics.com/">Kissmetrics</a> to track and analyze KPIs, although many companies choose to use <a href="https://analytics.google.com/">Google Analytics</a> because it's rather sophisticated for a free tool. As well as the KPIs mentioned in David's article, analytics tools like Google Analytics can reliably tell us things about our users' demographic and interests (that is, <em>who they are</em> and <em>what they like</em>), and also other important tidbits of information such as what device they're using and where they're from. This kind of data, even though it can't be used to indicate website <em>performance</em>, can tell us a little more about the user intent.</p>
<p>Consider these descriptive analytics as background information that we can use to narrow down what's going wrong exactly (i.e. user research).</p>
<p><em>Continue reading %<a rel="nofollow" href="https://www.sitepoint.com/descriptive-analytics-vs-diagnostic-analytics/">Descriptive Analytics vs Diagnostic Analytics</a>%</em></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=U-2e68e7gyE:Qn-a6kF7hdY:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=U-2e68e7gyE:Qn-a6kF7hdY:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=U-2e68e7gyE:Qn-a6kF7hdY:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?i=U-2e68e7gyE:Qn-a6kF7hdY:gIN9vFwOqvQ" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SitepointFeed/~4/U-2e68e7gyE" height="1" width="1" alt=""/>https://www.sitepoint.com/descriptive-analytics-vs-diagnostic-analytics/feed/0https://www.sitepoint.com/descriptive-analytics-vs-diagnostic-analytics/Ethereum Wallets: Send and Receive Ether with MyEtherWallethttp://feedproxy.google.com/~r/SitepointFeed/~3/m09OlUFHv6I/
https://www.sitepoint.com/ethereum-wallets-myetherwallet/#respondWed, 23 May 2018 15:00:49 +0000https://www.sitepoint.com/?p=165949<p><strong>In this article, we’ll go through the process of generating your first Ethereum wallet and sending and receiving ether through the MyEtherWallet interface.</strong></p>
<p>For a better understanding of the information which follows, it’s recommended you read the following first:</p>
<ul>
<li><a href="https://www.sitepoint.com/blockchain-what-it-is-how-it-works-why-its-so-popular">What is the blockchain?</a></li>
<li><a href="https://bitfalls.com/2017/09/19/what-ethereum-compare-to-bitcoin/">What is Ethereum?</a></li>
<li><a href="https://bitfalls.com/2017/08/31/what-cryptocurrency-wallet/">What is a cryptocurrency wallet?</a></li>
</ul>
<hr />
<p>There are many ways to interact with the Ethereum blockchain. In this piece, we’ll be using <a href="https://myetherwallet.com">MyEtherWallet</a> (MEW).</p>
<p><em>Note: After opening the site, please bookmark it so you never have to paste it into your browser again. There are many bad people who want your ether, and they’ve bought domains similar to the domain of this site hoping you’ll fall into that trap by mistyping!</em></p>
<p>Immediately after loading, the page will display some warnings about them not being a bank and basically not being able to help you if you lose your funds because they don’t have access to them. The gist of it is that you’re responsible for your own funds.</p>
<p><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2018/05/1526943296MEW-initial-screen-1024x620.png" alt="MEW initial screen" width="1024" height="620" class="aligncenter size-large wp-image-165951" /></p>
<h2 id="creatingandreadinganaddress">Creating and Reading an Address</h2>
<p>The first screen of MEW is the “input password” screen. Input a password for a new wallet. (Make it something complex but easy to remember or use a password generator like LastPass.)</p>
<p><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2018/05/1526943404password-input.png" alt="Password input" width="978" height="366" class="aligncenter size-full wp-image-165953" /></p>
<p>The address is immediately generated in the background, but MEW won’t let you see it yet. For as long as you haven’t saved the Keystore file somewhere safe, you cannot proceed. Click <em>Download Keystore File (UTC / JSON)</em> and store it on a USB drive, then hide it from curious family members. The file will be called something like <code>UTC--2018-01-26T10-39-56.592Z--d877263725d9247352661e44c444b21dc5a28581</code>. The first part is the date of creation, the second is the address itself. After you’ve stored it safely, the next screen will display the <a href="https://bitfalls.com/glossary/#private-key">private key</a>.</p>
<p><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2018/05/1526943503private-key-1024x520.png" alt="Private key" width="1024" height="520" class="aligncenter size-large wp-image-165954" /></p>
<p><em><strong>Very imporant!!</strong> The private key is equivalent in access level to the file you downloaded previously. Both can be imported into wallet software and used to unlock an address to spend money on it. But there is an <strong>important difference</strong>: the private key <strong>does not require a password!</strong> If you enter a private key into another tool like <a href="https://bitfalls.com/2018/02/16/metamask-send-receive-ether/">MetaMask</a>, the address will immediately become unlocked without a password and can be used for sending Ether and tokens. If you import the previously downloaded file into any wallet software, it will require a password before letting you access it fully. Therefore, it’s safer to only keep one method around: either store the file and remember the password, or store only the private key in a very secure location. Destroy the other method. The fewer ways to access your wallet there are, the safer the money is.</em></p>
<p>You can generate a <a href="https://bitfalls.com/2017/09/08/best-ways-protect-cryptocurrency-wallet/">Paper Wallet</a> on the same screen. This will open a new tab with a neatly generated printable layout of two QR codes. One is the public key — the address to which you can send funds and tokens — and the other is the private key mentioned above.</p>
<p><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2018/05/1526943789paper-wallet-1024x620.png" alt="Paper Wallet" width="1024" height="620" class="aligncenter size-large wp-image-165955" /></p>
<p>If you’re planning to use this address for long-term holding of ether, it’s smart to print it and store it in a safe as if you had a bond or a big wad of cash.</p>
<p>After these steps have been completed, MEW lets us unlock the wallet and view its info. This can be done in two ways:</p>
<ul>
<li>Picking a Keystore/JSON file will provide you with a form through which you upload the file you downloaded previously. You’ll then be asked for a password.</li>
<li>Picking a private key lets you paste the private key directly into the field, unlocking the address for usage.</li>
</ul>
<p>Unlock your wallet and you should see something like the image below:</p>
<p><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2018/05/1526943939Unlocked-wallet-info-UI-1024x620.png" alt="Unlocked wallet info UI" width="1024" height="620" class="aligncenter size-large wp-image-165957" /></p>
<p>This interface lets you print the wallet again if you lost or destroyed the previous one, or to re-download the JSON file if you lost it and accessed the wallet with the private key. The QR code for the private key can be read by clicking the eye icon under the black rectangle in the bottom of the screen.</p>
<p><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2018/05/1526944028revealing-private-key-1024x646.png" alt="Revealing the private key" width="1024" height="646" class="aligncenter size-large wp-image-165958" /></p>
<p>On the right, you can see your account’s balance: 0 Eth. A little lower you can see the <em>Token Balances</em> frame which shows you how many of which tokens you have. Because of a large number of available tokens out there, you first need to click <em>Show all tokens</em> to load them.</p>
<p>This screen is visible because you’re on the <em>View Wallet Info</em> option to which MEW automatically redirects you after creation. When sending tokens or ether, the option to use is <em>Send Ether and Tokens</em>.</p>
<p><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2018/05/1526944154MEW-options-1024x126.png" alt="MEW UI options" width="1024" height="126" class="aligncenter size-large wp-image-165960" /></p>
<p><em>Continue reading %<a rel="nofollow" href="https://www.sitepoint.com/ethereum-wallets-myetherwallet/">Ethereum Wallets: Send and Receive Ether with MyEtherWallet</a>%</em></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=m09OlUFHv6I:tC7NJs81AuA:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=m09OlUFHv6I:tC7NJs81AuA:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=m09OlUFHv6I:tC7NJs81AuA:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?i=m09OlUFHv6I:tC7NJs81AuA:gIN9vFwOqvQ" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SitepointFeed/~4/m09OlUFHv6I" height="1" width="1" alt=""/>https://www.sitepoint.com/ethereum-wallets-myetherwallet/feed/0https://www.sitepoint.com/ethereum-wallets-myetherwallet/Developer Economics Survey: Your Chance to Win Prizes & Voice Opinionshttp://feedproxy.google.com/~r/SitepointFeed/~3/x3I_13kZgwA/
https://www.sitepoint.com/developer-economics-survey-your-chance-to-win-prizes-voice-opinions/#respondWed, 23 May 2018 04:05:06 +0000https://www.sitepoint.com/?p=165979<p class="wp-special"><em>This article was created in partnership with <a href="https://www.slashdata.co/" rel="nofollow">SlashData</a>. Thank you for supporting the partners who make SitePoint possible.</em></p>
<p>Is JavaScript giving you headaches? Do you wish other developers knew how important Swift and Rust will be in the coming years? It’s your chance to turn your opinions into a tool of change! The new Developer Economics survey is open starting from April 30, calling out all software developers to take part. <a href="http://vmob.me/DE2Q18Sitepoint?fl=en">Start right away</a>.</p>
<p>Don’t miss a chance to join over 40,000 developers from 160+ countries who take part in the Developer Economics surveys every year to tell the world where software development is going next.</p>
<h3 id="whocantakethesurvey">Who can take the survey?</h3>
<p>Pretty much everyone writing code and getting their hands on software development in Mobile, Desktop, IoT, AR/VR, Machine Learning &#38; Data Science, Web, Backend and Games. It doesn’t matter if you’re a hobbyist, a startupper or an enterprise dev - the survey is open for all real developers out there!</p>
<h3 id="whatsortofquestionsaretheyasking">What sort of questions are they asking?</h3>
<p>The survey is designed to dive into real-life developer issues, from coding skills and favorite tools to satisfaction with learning resources and communities.</p>
<p>Expect questions like:</p>
<ul>
<li>Which are your favorite tools and platforms?</li>
<li>What’s going up and what’s going down in the software industry?</li>
<li>Are you working on the projects you would like to work on?</li>
<li>Where do you think development time should be invested?</li>
</ul>
<p>There are also deep-dive questions based on your area of expertise, like Machine Learning, IoT, web development and more where you can really show you’re a pro and answer more complex questions about your favorite frameworks and vendors.</p>
<p><a href="http://vmob.me/DE2Q18Sitepoint?fl=en">Read to take the survey</a>?</p>
<h3 id="whyshouldyoutakethesurvey">Why should you take the survey?</h3>
<p>It’s fun, for starters! The survey is designed to reveal your sci-fi profile, so the more you engage, the closer you get to finding out your place in the galaxy far far away.</p>
<p>Then there’s prizes. This time, devs who take part and complete the survey can win stuff like iPhone X, Samsung S9 Plus, HTC Vive Pro, GitHub Developer Plan, Amazon vouchers and other useful things to help you test your work or just play around.</p>
<p>You can also take part in the referral program, which allows you to win up to $700 in cash by referring other developer friends to take the survey.</p>
<p>Last but not least, everyone who takes the survey will get a insights with key findings from the survey as well as free report with the highlights and up-and-coming trends.</p>
<p>If you have a few minutes to spare and want to have a quality time, then this survey is for perfect for you! You can <a href="http://vmob.me/DE2Q18Sitepoint?fl=en">start right here</a>. Extra tip: if you need to take a break, just click to save your responses and then you can come back and continue where you left off.</p>
<p>Good luck!</p>
<p><a href="http://vmob.me/DE2Q18Sitepoint?fl=en">Take the survey now</a>!</p>
<p><em>Continue reading %<a rel="nofollow" href="https://www.sitepoint.com/developer-economics-survey-your-chance-to-win-prizes-voice-opinions/">Developer Economics Survey: Your Chance to Win Prizes &#038; Voice Opinions</a>%</em></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=x3I_13kZgwA:2lR2ZGagi_I:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=x3I_13kZgwA:2lR2ZGagi_I:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=x3I_13kZgwA:2lR2ZGagi_I:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?i=x3I_13kZgwA:2lR2ZGagi_I:gIN9vFwOqvQ" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SitepointFeed/~4/x3I_13kZgwA" height="1" width="1" alt=""/>https://www.sitepoint.com/developer-economics-survey-your-chance-to-win-prizes-voice-opinions/feed/0https://www.sitepoint.com/developer-economics-survey-your-chance-to-win-prizes-voice-opinions/Authenticating Firebase and Angular with Auth0: Part 2http://feedproxy.google.com/~r/SitepointFeed/~3/zuJ0CYI67-I/
https://www.sitepoint.com/authenticating-firebase-angular-auth0-2/#respondTue, 22 May 2018 17:33:37 +0000https://www.sitepoint.com/?p=164644<p><em>This article was originally published on the <a href="https://auth0.com/blog/how-to-authenticate-firebase-and-angular-with-auth0-part-2/">Auth0.com blog</a>, and is republished here with permission.</em></p>
<p><strong>In this two-part tutorial series, we’ll learn how to build an application that secures a Node back end and an Angular front end with <a href="https://auth0.com">Auth0</a> authentication. Our server and app will also authenticate a <a href="https://firebase.google.com">Firebase</a> <a href="https://firebase.google.com/docs/firestore/">Cloud Firestore database</a> with custom tokens so that users can leave realtime comments in a secure manner after logging in with Auth0. The Angular application code can be found at the <a href="https://github.com/auth0-blog/angular-firebase">angular-firebase GitHub repo</a> and the Node API can be found in the <a href="https://github.com/auth0-blog/firebase-auth0-nodeserver">firebase-auth0-nodeserver repo</a>.</strong></p>
<p>The first part of our tutorial, <a href="https://www.sitepoint.com/authenticating-firebase-angular-auth0-1">Authenticating Firebase and Angular with Auth0: Part 1</a>, covered:</p>
<ul>
<li>intro and setup for Auth0 and Firebase</li>
<li>implementing a secure Node API that mints custom Firebase tokens and provides data for our app</li>
<li>Angular application architecture with modules and lazy loading</li>
<li>Angular authentication with Auth0 with service and route guard</li>
<li>shared Angular components and API service.</li>
</ul>
<h2 id="authenticatingfirebaseandangularwithauth0part2">Authenticating Firebase and Angular with Auth0: Part 2</h2>
<p>Part 2 of our tutorial will cover:</p>
<ol>
<li><a href="#displayingdogsasyncandngifelse">Displaying Dogs: Async and NgIfElse</a></li>
<li><a href="#dogdetailswithrouteparameters">Dog Details with Route Parameters</a></li>
<li><a href="#commentmodelclass">Comment Model Class</a></li>
<li><a href="#firebasecloudfirestoreandrules">Firebase Cloud Firestore and Rules</a></li>
<li><a href="#commentscomponent">Comments Component</a></li>
<li><a href="#commentformcomponent">Comment Form Component</a></li>
<li><a href="#realtimecomments">Realtime Comments</a></li>
<li><a href="#conclusion">Conclusion</a></li>
</ol>
<p>Our completed app will look something like this:</p>
<p><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2018/03/1522282040dogs-537x1024.jpg" alt="Angular Firebase app with Auth0 custom tokens" /></p>
<p>Let’s pick up right where we left off at the end of <a href="https://www.sitepoint.com/authenticating-firebase-angular-auth0-1">Authenticating Firebase and Angular with Auth0: Part 1</a>.</p>
<h2 id="displayingdogsasyncandngifelse">Displaying Dogs: Async and NgIfElse</h2>
<p>Let’s implement the home page of our app — the dogs listing. We created the scaffolding for this component when we set up our Angular app’s architecture.</p>
<p><em>Important Note: Make sure your Node.js API is running. If you need a refresher on the API, refer to <a href="https://auth0.com/blog/how-to-authenticate-firebase-and-angular-with-auth0-part-1#node-api">How to Authenticate Firebase and Angular with Auth0: Part 1 - Node API</a>.</em></p>
<h3 id="dogscomponentclass">Dogs Component Class</h3>
<p>Open the <code>dogs.component.ts</code> class file now and implement this code:</p>
<pre><code class="typescript language-typescript">// src/app/dogs/dogs/dogs.component.ts
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { ApiService } from '../../core/api.service';
import { Dog } from './../../core/dog';
import { Observable } from 'rxjs/Observable';
import { tap, catchError } from 'rxjs/operators';
@Component({
selector: 'app-dogs',
templateUrl: './dogs.component.html'
})
export class DogsComponent implements OnInit {
pageTitle = 'Popular Dogs';
dogsList$: Observable&#60;Dog[]&#62;;
loading = true;
error: boolean;
constructor(
private title: Title,
private api: ApiService
) {
this.dogsList$ = api.getDogs$().pipe(
tap(val =&#62; this._onNext(val)),
catchError((err, caught) =&#62; this._onError(err, caught))
);
}
ngOnInit() {
this.title.setTitle(this.pageTitle);
}
private _onNext(val: Dog[]) {
this.loading = false;
}
private _onError(err, caught): Observable&#60;any&#62; {
this.loading = false;
this.error = true;
return Observable.throw('An error occurred fetching dogs data.');
}
}
</code></pre>
<p>After our imports, we’ll set up some local properties:</p>
<ul>
<li><code>pageTitle</code>: to set our page’s <code>&#60;h1&#62;</code> and <code>&#60;title&#62;</code></li>
<li><code>dogsList$</code>: the observable returned by our API HTTP request to fetch the dogs listing data</li>
<li><code>loading</code>: to show a loading icon while the API request is being made</li>
<li><code>error</code>: to display an error if something goes wrong fetching data from the API.</li>
</ul>
<p>We’re going to be using the declarative <a href="https://angular.io/api/common/AsyncPipe">async pipe</a> to respond to the <code>dogsList$</code> observable returned by our API <code>GET</code> request. With the async pipe, we don’t need to subscribe or unsubscribe in our <code>DogsComponent</code> class: the subscription process will be managed automatically! We just need to set up our observable.</p>
<p>We’ll make <code>Title</code> and <code>ApiService</code> available to our class by passing them to the constructor, and then set up our <code>dogsList$</code> observable. We’ll use RxJS operators <code>tap</code> (previously known as the <code>do</code> operator) and <code>catchError</code> to call handler functions. The <code>tap</code> operator executes side effects but does not affect the emitted data, so it’s ideal for setting other properties. The <code>_onNext()</code> function will set <code>loading</code> to <code>false</code> (since data has been successfully emitted). The <code>_onError()</code> function will set <code>loading</code> and <code>error</code> appropriately and throw an error. As mentioned before, we don’t need to <em>subscribe</em> or <em>unsubscribe</em> from the <code>dogsList$</code> observable because the async pipe (which we’ll add in the template) will handle that for us.</p>
<p>On initialization of our component, we’ll use <a href="https://angular.io/guide/lifecycle-hooks#oninit"><code>ngOnInit()</code> to spy on the OnInit lifecycle hook</a> to <a href="https://angular.io/guide/set-document-title">set the document <code>&#60;title&#62;</code></a>.</p>
<p>That’s it for our Dogs component class!</p>
<h3 id="dogscomponenttemplate">Dogs Component Template</h3>
<p>Let’s move on to the template at <code>dogs.component.html</code>:</p>
<pre><code class="markup language-markup">&#60;!-- src/app/dogs/dogs/dogs.component.html --&#62;
&#60;h1 class="text-center"&#62;{{ pageTitle }}&#60;/h1&#62;
&#60;ng-template #noDogs&#62;
&#60;app-loading *ngIf="loading"&#62;&#60;/app-loading&#62;
&#60;app-error *ngIf="error"&#62;&#60;/app-error&#62;
&#60;/ng-template&#62;
&#60;div *ngIf="dogsList$ &#124; async as dogsList; else noDogs"&#62;
&#60;p class="lead"&#62;
These were the top &#60;a href="http://www.akc.org/content/news/articles/the-labrador-retriever-wins-top-breed-for-the-26th-year-in-a-row/"&#62;10 most popular dog breeds in the United States in 2016&#60;/a&#62;, ranked by the American Kennel Club (AKC).
&#60;/p&#62;
&#60;div class="row mb-3"&#62;
&#60;div *ngFor="let dog of dogsList" class="col-xs-12 col-sm-6 col-md-4"&#62;
&#60;div class="card my-2"&#62;
&#60;img class="card-img-top" [src]="dog.image" [alt]="dog.breed"&#62;
&#60;div class="card-body"&#62;
&#60;h5 class="card-title"&#62;#{{ dog.rank }}: {{ dog.breed }}&#60;/h5&#62;
&#60;p class="text-right mb-0"&#62;
&#60;a class="btn btn-primary" [routerLink]="['/dog', dog.rank]"&#62;Learn more&#60;/a&#62;
&#60;/p&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;/div&#62;
&#60;app-comments&#62;&#60;/app-comments&#62;
</code></pre>
<p>There are a couple things in this template that we’ll take a closer look at:</p>
<pre><code class="markup language-markup">...
&#60;ng-template #noDogs&#62;
&#60;app-loading *ngIf="loading"&#62;&#60;/app-loading&#62;
&#60;app-error *ngIf="error"&#62;&#60;/app-error&#62;
&#60;/ng-template&#62;
&#60;div *ngIf="dogsList$ &#124; async as dogsList; else noDogs"&#62;
...
&#60;div *ngFor="let dog of dogsList" ...&#62;
...
</code></pre>
<p>This code does some very useful things declaratively. Let’s explore.</p>
<p>First we have an <a href="https://angular.io/guide/structural-directives#the-ng-template"><code>&#60;ng-template&#62;</code> element</a> with a <a href="https://angular.io/guide/template-syntax#template-reference-variables--var-">template reference variable</a> (<code>#noDogs</code>). The <code>&#60;ng-template&#62;</code> element is never rendered directly. It’s intended to be used with structural directives (such as NgIf). In this case, we’ve created an embedded view with <code>&#60;ng-template #noDogs&#62;</code> which contains both the loading and error components. Each of these components will render based on a condition. The <code>noDogs</code> embedded view itself will not render unless instructed to.</p>
<p>So how (and when) do we tell this view to render?</p>
<p>The next <code>&#60;div *ngIf="...</code> is actually an <a href="https://angular.io/api/common/NgIf">NgIfElse</a> using the <a href="https://angular.io/guide/structural-directives#the-asterisk--prefix">asterisk prefix as syntactic sugar</a>. We’re also using the async pipe with our <code>dogsList$</code> observable and setting a variable so we can reference the stream’s emitted values in our template (<code>as dogsList</code>). If something goes wrong with the <code>dogsList$</code> observable, we have an <code>else noDogs</code> statement that tells the template to render the <code>&#60;ng-template #noDogs&#62;</code> view. This would be true before the data has been successfully fetched from the API, or if an error was thrown by the observable.</p>
<p>If <code>dogsList$ &#124; async</code> has successfully emitted a value, the div will render and we can iterate over our <code>dogsList</code> value (which is expected to be an array of <code>Dog</code>s, as specified in our component class) using the <a href="https://angular.io/api/common/NgForOf">NgForOf (<code>*ngFor</code>) structural directive</a> to display each dog’s information.</p>
<p>As you can see in the remaining HTML, each dog will be displayed with a picture, rank, breed, and a link to their individual detail page, which we’ll create next.</p>
<p>View the Dogs component in the browser by navigating to your app’s homepage at <a href="http://localhost:4200">http://localhost:4200</a>. The Angular app should make a request to the API to fetch the list of dogs and display them!</p>
<p><em>Note: We’ve also included the <code>&#60;app-comments&#62;</code> component. Since we’ve generated this component but haven’t implemented its functionality yet, it should show up in the UI as text that says “Comments works!”</em></p>
<p>To test error handling, you can stop the API server (<code>Ctrl+c</code> in the server’s command prompt or terminal). Then try reloading the page. The error component should display since the API cannot be reached, and we should see the appropriate errors in the browser console:</p>
<p><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2018/03/1522282286dogs-error-1024x380.jpg" alt="Angular app with Node.js API showing data error" /></p>
<p><em>Continue reading %<a rel="nofollow" href="https://www.sitepoint.com/authenticating-firebase-angular-auth0-2/">Authenticating Firebase and Angular with Auth0: Part 2</a>%</em></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=zuJ0CYI67-I:jofE0hRfGsE:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=zuJ0CYI67-I:jofE0hRfGsE:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=zuJ0CYI67-I:jofE0hRfGsE:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?i=zuJ0CYI67-I:jofE0hRfGsE:gIN9vFwOqvQ" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SitepointFeed/~4/zuJ0CYI67-I" height="1" width="1" alt=""/>https://www.sitepoint.com/authenticating-firebase-angular-auth0-2/feed/0https://www.sitepoint.com/authenticating-firebase-angular-auth0-2/A Designer’s Guide to KPIs and Vanity Metricshttp://feedproxy.google.com/~r/SitepointFeed/~3/l0KXpl3vUDU/
https://www.sitepoint.com/designers-guide-kpis-vanity-metrics/#respondTue, 22 May 2018 17:00:06 +0000https://www.sitepoint.com/?p=162188<p><strong>Recently we’ve been discussing <a href="https://www.sitepoint.com/ux-analytics-what-they-are-why-they-matter">how analytics can be used to drive UX design</a>. By learning about our users’ demographics and gaining valuable insights into our users’ behavior, we can use data to inform our design decisions.</strong></p>
<p><em>You can check out all the articles in this UX Analytics series <a href="https://www.sitepoint.com/tag/analytics-hub/">here</a>.</em></p>
<p>Analytics helps us to guide our users towards specific actions that meet our business objectives --- such as signing up to our websites or subscribing to our services. As you probably know, we call these <strong>conversions</strong>.</p>
<p>In this article, I'm going to talk about the <strong>KPIs</strong> (key performance indicators) that designers should track to gain insights for improving UX.</p>
<p>Also, if you’ve dipped into analytics before and have been amazed by the amount of visitors you’re getting but dismayed at how many are converting, then you might be interested to know that, regarding to UX, there are a number vanity metrics that should be taken with a pinch of salt. In this article, I’ll explain what those metrics are, and why you should be skeptical about them.</p>
<p>Let’s dive in.</p>
<h2 id="firstlywhatarekpis">Firstly, What Are KPIs?</h2>
<p><a href="https://en.wikipedia.org/wiki/Performance_indicator">Wikipedia</a> explains KPIs like this:</p>
<blockquote>
<p>KPIs evaluate the success of a particular activity (such as projects, programs, products and other initiatives) in which it engages.</p>
</blockquote>
<p>A KPI is a metric you can measure to determine the improvement or degradation of something (which, in our case, is user experience).</p>
<p>KPIs can tell you whether the website you’ve designed is achieving its business objectives or not. Some KPIs are outright useless for making these determinations, and others are dangerous if you analyze them in the wrong way.</p>
<p>Which brings me to vanity metrics.</p>
<h3 id="whatarevanitymetrics">What are vanity metrics?</h3>
<p><strong>Vanity metrics</strong> are metrics that seem useful in theory, but don’t actually describe our users or UX in any way. If a metric isn’t offering us any insights about our users, and is a metric that we can’t directly influence through design, then it’s not worth our time to track that metric and try to improve it.</p>
<p>Consider “Number of Visitors”, for example. As designers, we can’t influence this metric. Also, the number of visitors is useless if none of them are converting, hence there are other metrics that can be a better indicator.</p>
<h3 id="sowhatkpisshoulditrack">So, what KPIs should I track?</h3>
<p>Before deciding what KPIs to track, you should first determine what your business goals are. This is the number one mistake that businesses make when using analytics to inform design decisions. Is it more signups? More subscribers? Are you looking to guide users towards a contact form or checkout?</p>
<p>Once your goals are mapped out, you can then determine which KPIs will help you to monitor those goals. If your website is for a local service, I’d say that the ultimate goal is a call or enquiry. If your website is an ecommerce shop, the primary goal would number of sales. If you run a <abbr title="software and a service">SaaS</abbr> company, the goal which matters to you should be number of active subscriptions.</p>
<p>Let’s take a look at the main KPIs to keep an eye on.</p>
<h3 id="1sessiondurationaveragetimeonpage">1. Session Duration/Average Time on Page</h3>
<p><em>Session Duration</em>/<em>Session Time</em>/<em>Time on Site</em>/<em>Avg. Time on Page</em> (different analytics tools will use different terms) can be a relative measure of interest in your website. Consider this: a user lands on your website, spends only 5 seconds on it, then bounces off. You could assume that they were much less interested than the user who spent a few minutes on the website.</p>
<p><img src="https://dab1nmslvvntp.cloudfront.net/wp-content/uploads/2017/12/1512957218image1.png" alt="Page views, unique page views, and average time on page" width="295" height="554" class="aligncenter size-full wp-image-162192" /></p>
<p>However, you should also consider that the user <em>might</em> have been looking for something very specific, and your web page delivered it instantly and flawlessly, causing the visitor to leave perfectly satisfied. This is common with web pages that are informational in nature: a user has a search intent, they find it on your website, and have no other need or desire to stick around.</p>
<p>At this stage we don’t really know much about the user intent, but we could use other KPIs and metrics to reveal the other half of the story:</p>
<ul>
<li>Where did the user come from? Google? Another website?</li>
<li>What device are they using? Maybe there’s a mobile-only issue?</li>
<li>More importantly, did the visitor actually convert?</li>
</ul>
<p>One metric doesn’t hold all the answers. Keep asking questions.</p>
<h4 id="sessiondurationasavanitymetric">Session Duration as a vanity metric</h4>
<p>As you can see, Session Duration can be dangerous if you make assumptions and don’t cross-reference it with any other metrics. Visitors that spend a lot of time on a website might be desperately trying to figure out how to do something, and visitors that spent only a few seconds might have received exactly the answer they were looking for. Context matters, so do a little investigating before you start bragging about your <em>Avg. Time on Site</em> metrics.</p>
<p>You also need to be aware of a particular “flaw” with the tracking of time with certain analytics tools, especially Google Analytics. Google Analytics determines how long a user spends on a specific web page by the moment they navigate to a different page. Therefore, if a visitor only visits one web page before bouncing off, no time will be recorded (even if there was time).</p>
<p><em>Continue reading %<a rel="nofollow" href="https://www.sitepoint.com/designers-guide-kpis-vanity-metrics/">A Designer&#8217;s Guide to KPIs and Vanity Metrics</a>%</em></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=l0KXpl3vUDU:LdJhuZZ2tHI:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=l0KXpl3vUDU:LdJhuZZ2tHI:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=l0KXpl3vUDU:LdJhuZZ2tHI:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?i=l0KXpl3vUDU:LdJhuZZ2tHI:gIN9vFwOqvQ" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SitepointFeed/~4/l0KXpl3vUDU" height="1" width="1" alt=""/>https://www.sitepoint.com/designers-guide-kpis-vanity-metrics/feed/0https://www.sitepoint.com/designers-guide-kpis-vanity-metrics/Compiling and Smart Contracts: ABI Explainedhttp://feedproxy.google.com/~r/SitepointFeed/~3/OtoADtRgYEU/
https://www.sitepoint.com/compiling-smart-contracts-abi/#respondTue, 22 May 2018 15:00:30 +0000https://www.sitepoint.com/?p=165943<p><strong>Most smart contracts are developed in a high-level programming language. The most popular currently is <a style="font-weight:bold" href="https://solidity.readthedocs.io/en/v0.4.24/">Solidity</a>, with <a style="font-weight:bold" href="https://github.com/ethereum/vyper">Vyper</a> hoping to take the throne in the near future.</strong></p>
<p>However, the mechanism driving Ethereum can’t understand the high-level languages, but instead talks in a much lower-level language.</p>
<h2 id="theethereumvirtualmachineevm">The Ethereum Virtual Machine (EVM)</h2>
<p>Ethereum smart contracts are sets of programming instructions being run on all the nodes running a full Ethereum client. The part of Ethereum that runs the smart contract instructions is called the EVM. It’s a virtual machine not unlike Java’s JVM. The EVM reads a low-level representation of smart contracts called the <strong>Ethereum bytecode</strong>.</p>
<p>The Ethereum bytecode is an assembly language made up of multiple <strong><a href="https://github.com/trailofbits/evm-opcodes">opcodes</a></strong>. Each opcode performs a certain action on the Ethereum blockchain.</p>
<p>The question is: how do we go from this:</p>
<pre><code class="solidity language-solidity">pragma solidity 0.4.24;
contract Greeter {
function greet() public constant returns (string) {
return "Hello";
}
}
</code></pre>
<p>to this:</p>
<pre><code class="bytecode language-bytecode">PUSH1 0x80 PUSH1 0x40 MSTORE PUSH1 0x4 CALLDATASIZE LT PUSH2 0x41 JUMPI PUSH1 0x0 CALLDATALOAD PUSH29 0x100000000000000000000000000000000000000000000000000000000 SWAP1 DIV PUSH4 0xFFFFFFFF AND DUP1 PUSH4 0xCFAE3217 EQ PUSH2 0x46 JUMPI JUMPDEST PUSH1 0x0 DUP1 REVERT JUMPDEST CALLVALUE DUP1 ISZERO PUSH2 0x52 JUMPI PUSH1 0x0 DUP1 REVERT JUMPDEST POP PUSH2 0x5B PUSH2 0xD6 JUMP JUMPDEST PUSH1 0x40 MLOAD DUP1 DUP1 PUSH1 0x20 ADD DUP3 DUP2 SUB DUP3 MSTORE DUP4 DUP2 DUP2 MLOAD DUP2 MSTORE PUSH1 0x20 ADD SWAP2 POP DUP1 MLOAD SWAP1 PUSH1 0x20 ADD SWAP1 DUP1 DUP4 DUP4 PUSH1 0x0 JUMPDEST DUP4 DUP2 LT ISZERO PUSH2 0x9B JUMPI DUP1 DUP3 ADD MLOAD DUP2 DUP5 ADD MSTORE PUSH1 0x20 DUP2 ADD SWAP1 POP PUSH2 0x80 JUMP JUMPDEST POP POP POP POP SWAP1 POP SWAP1 DUP2 ADD SWAP1 PUSH1 0x1F AND DUP1 ISZERO PUSH2 0xC8 JUMPI DUP1 DUP3 SUB DUP1 MLOAD PUSH1 0x1 DUP4 PUSH1 0x20 SUB PUSH2 0x100 EXP SUB NOT AND DUP2 MSTORE PUSH1 0x20 ADD SWAP2 POP JUMPDEST POP SWAP3 POP POP POP PUSH1 0x40 MLOAD DUP1 SWAP2 SUB SWAP1 RETURN JUMPDEST PUSH1 0x60 PUSH1 0x40 DUP1 MLOAD SWAP1 DUP2 ADD PUSH1 0x40 MSTORE DUP1 PUSH1 0x5 DUP2 MSTORE PUSH1 0x20 ADD PUSH32 0x48656C6C6F000000000000000000000000000000000000000000000000000000 DUP2 MSTORE POP SWAP1 POP SWAP1 JUMP STOP LOG1 PUSH6 0x627A7A723058 KECCAK256 SLT 0xec 0xe 0xf5 0xf8 SLT 0xc7 0x2d STATICCALL ADDRESS SHR 0xdb COINBASE 0xb1 BALANCE 0xe8 0xf8 DUP14 0xda 0xad DUP13 LOG1 0x4c 0xb4 0x26 0xc2 DELEGATECALL PUSH7 0x8994D3E002900
</code></pre>
<h2 id="soliditycompiler">Solidity Compiler</h2>
<p>For now, we’ll be focusing on the Solidity compiler, but the same principles apply for Vyper or any other high-level language for the EVM.</p>
<p>First things first: install <a href="https://nodejs.org/en/">Node.js</a>.</p>
<p>After you’ve done this, go to your terminal and run this:</p>
<pre><code class="bash language-bash">npm install -g solc
</code></pre>
<p>This will install <code>solc</code> — the Solidity compiler. Now make an empty directory. In that directory create a file called <code>SimpleToken.sol</code> and put the following code:</p>
<pre><code class="solidity language-solidity">pragma solidity ^0.4.24;
contract SimpleToken {
mapping(address =&#62; uint) private _balances;
constructor() public {
_balances[msg.sender] = 1000000;
}
function getBalance(address account) public constant returns (uint) {
return _balances[account];
}
function transfer(address to, uint amount) public {
require(_balances[msg.sender] &#62;= amount);
_balances[msg.sender] -= amount;
_balances[to] += amount;
}
}
</code></pre>
<p>This is the simplest token smart contract, but it has several important features that will be useful for this tutorial. They are:</p>
<ul>
<li>public functions</li>
<li>private functions</li>
<li>properties</li>
</ul>
<p>After you’ve done this, run the newly installed <code>solc</code> on your file. You do this by running the following:</p>
<pre><code class="bash language-bash">solcjs SimpleToken.sol
</code></pre>
<p>You should get an output similar to this:</p>
<pre><code class="bash language-bash">Invalid option selected, must specify either --bin or --abi
</code></pre>
<p>And your compilation should fail.</p>
<p>What just happened? What is <code>bin</code> and what is <code>abi</code>?</p>
<p><code>bin</code> is simply a compact binary representation of the compiled bytecode. The opcodes aren’t referenced by <code>PUSH</code>, <code>PULL</code> or <code>DELEGATECALL</code>, but their binary representations, which look like random numbers when read by a text editor.</p>
<p><em>Continue reading %<a rel="nofollow" href="https://www.sitepoint.com/compiling-smart-contracts-abi/">Compiling and Smart Contracts: ABI Explained</a>%</em></p><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=OtoADtRgYEU:BIvm-7FYXMQ:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=OtoADtRgYEU:BIvm-7FYXMQ:qj6IDK7rITs"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?d=qj6IDK7rITs" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/SitepointFeed?a=OtoADtRgYEU:BIvm-7FYXMQ:gIN9vFwOqvQ"><img src="http://feeds.feedburner.com/~ff/SitepointFeed?i=OtoADtRgYEU:BIvm-7FYXMQ:gIN9vFwOqvQ" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/SitepointFeed/~4/OtoADtRgYEU" height="1" width="1" alt=""/>https://www.sitepoint.com/compiling-smart-contracts-abi/feed/0https://www.sitepoint.com/compiling-smart-contracts-abi/