<?xml version="1.0" encoding="UTF-8"?>
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/"
    xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
    <channel>
        
        <title>
            <![CDATA[ Nikita Savchenko - freeCodeCamp.org ]]>
        </title>
        <description>
            <![CDATA[ Browse thousands of programming tutorials written by experts. Learn Web Development, Data Science, DevOps, Security, and get developer career advice. ]]>
        </description>
        <link>https://www.freecodecamp.org/news/</link>
        <image>
            <url>https://cdn.freecodecamp.org/universal/favicons/favicon.png</url>
            <title>
                <![CDATA[ Nikita Savchenko - freeCodeCamp.org ]]>
            </title>
            <link>https://www.freecodecamp.org/news/</link>
        </image>
        <generator>Eleventy</generator>
        <lastBuildDate>Fri, 15 May 2026 09:48:04 +0000</lastBuildDate>
        <atom:link href="https://www.freecodecamp.org/news/author/nikitaeverywhere/rss.xml" rel="self" type="application/rss+xml" />
        <ttl>60</ttl>
        
            <item>
                <title>
                    <![CDATA[ Universal Ethereum Delegated Transactions: No More Transaction Fees ]]>
                </title>
                <description>
                    <![CDATA[ TL;DR Check this back end and front end solutions for delegated transactions. It is universal for any token which supports the delegation of its functions. Read more below. This mostly technical article provides a universal framework and a working s... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/universal-ethereum-delegated-transactions-no-more-ethereum-fees/</link>
                <guid isPermaLink="false">66b99b7c3cd81de09c96b2bc</guid>
                
                    <category>
                        <![CDATA[ Blockchain ]]>
                    </category>
                
                    <category>
                        <![CDATA[ crypto ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Cryptocurrency ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Ethereum ]]>
                    </category>
                
                    <category>
                        <![CDATA[ ethereum blockchain ]]>
                    </category>
                
                    <category>
                        <![CDATA[ token economy ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Tokenization ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Nikita Savchenko ]]>
                </dc:creator>
                <pubDate>Mon, 30 Sep 2019 15:53:22 +0000</pubDate>
                <media:content url="https://www.freecodecamp.org/news/content/images/2019/09/you-need-some-ether-1.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <blockquote>
<p>TL;DR Check this <a target="_blank" href="https://github.com/ZitRos/ethereum-delegated-tx-service">back end</a> and <a target="_blank" href="https://zitros.github.io/ethereum-delegated-tx-widget/">front end</a> solutions for delegated transactions. It is universal for any token which supports the delegation of its functions. Read more below.</p>
</blockquote>
<p>This mostly technical article provides a <strong>universal framework</strong> and a <strong>working solution</strong> for Ethereum tokens and applications that eliminates the need to pay fees in Ether, a problem that is practically killing the user experience of many blockchain applications.</p>
<blockquote>
<p><em>Imagine spending dollars and then being asked to also hand over some</em> <a target="_blank" href="https://en.wikipedia.org/wiki/Ukrainian_hryvnia"><em>Hryvnias</em></a> <em>as a transaction fee. That's how Ethereum tokens work so far.</em></p>
</blockquote>
<p>In other words, for example, to transfer any Ethereum token (like <a target="_blank" href="https://coinmarketcap.com/currencies/tether/">Tether</a>, <a target="_blank" href="https://coinmarketcap.com/currencies/dai/">DAI</a>, <a target="_blank" href="https://coinmarketcap.com/currencies/basic-attention-token/">BAT</a>, <a target="_blank" href="https://token.dreamteam.gg/">DREAM</a>, etc.), the user has to also spend some <a target="_blank" href="http://ethereum.org/use/#_2-what-is-eth-and-how-do-i-get-it">Ether</a> (internal Ethereum platform currency). This introduces a big inconvenience that prevents the mass adoption of DApps: users have to purchase multiple currencies instead of just one to interact with the blockchain network.</p>
<h1 id="heading-the-problem">The Problem</h1>
<p>Tokens, as we imagine them today are just fuel for applications and services on top of blockchain networks. Organizations create their own tokens (using ICOs, IEOs, etc) and run services/applications that utilize them, introducing their own micro-economy (widely known as a <a target="_blank" href="https://medium.com/@pentremont/token-economy-101-or-why-blockchain-powered-decentralized-networks-are-important-310de1cc8bac">token economy</a>). But almost every token turns out to be quite a complex currency itself. By design of how blockchain networks work, in order to do something with your tokens, you also need another currency — often Ether (for Ethereum) to be able to transfer tokens.</p>
<p>To illustrate the problem, let's look into how users come to use different blockchain-powered services and applications like:</p>
<ul>
<li><a target="_blank" href="https://trickle.gg/">Trickle</a> - where you create secure, hourly-based contracts with an untrusted party in any token</li>
<li><a target="_blank" href="https://loomx.io/">Loom</a> - where you use Loom tokens to create sidechains in Loom Network</li>
<li><a target="_blank" href="https://www.cryptokitties.co/">Cryptokitties.co</a> - where you breed, trade and transfer kitties (ERC721 tokens)</li>
<li><a target="_blank" href="https://www.stateofthedapps.com/">Others</a> (there are a lot!)</li>
</ul>
<p>All these applications use tokens, as well as they require you to purchase Ether. The complexity of using crypto tokens as we know them today is one of the biggest reasons why 99% of crypto startups fail (or avoid adopting real crypto, for example, by replacing it with virtual coins).</p>
<p>As you may already know, the harder it is to use the application, the fewer users it will get right from the beginning. This is something known as <a target="_blank" href="https://www.appcues.com/blog/user-onboarding-funnel-amplitude">The User Onboarding Funnel</a>, which is still a big pain for blockchain-powered applications and services:</p>
<p><img src="https://lh3.googleusercontent.com/XJyaZoGARI3TF4DOjODJerEUNwn3qFm2D8WSZBrxwYE81oSHaw5h3MOweymV5VV9Jby-2OBUE7o1FGkVqZxWvONW0GLuoezAKqt8HmB-N-vPwHL_ouohPO2whDyS1jiXHLIQv9am" alt="Image" width="1275" height="359" loading="lazy">
<em>The typical user onboarding funnel of a decentralized, blockchain-based application</em></p>
<p>To understand why I put 0.001% of users prior to the service use, let's see what exactly purchasing some Ether means:</p>
<ul>
<li>Creating a crypto wallet</li>
<li>Registering on Exchange (and learning all the exchange rules, including country policies!)</li>
<li>Passing KYC (though it's getting easier, still, many countries have limited access to exchanges)</li>
<li>Purchasing a minimum allowed amount of Ether (usually, it's <a target="_blank" href="https://changelly.com/widget-settings">whopping $50</a> while you need just nearly $0.05 to perform one or two transactions)</li>
<li>Withdrawing Ether to your wallet</li>
<li>Not to mention reading lengthy guides on how to perform all these steps properly</li>
</ul>
<p>Instead of just:</p>
<ul>
<li>Creating a crypto wallet</li>
</ul>
<p>Of course, it highly depends on how the application or service is made. But, so far, there was no better simplification of the onboarding flow as just cutting crypto tokens from there, or making them fake, "virtual" currency with deposit and withdrawal function. Unfortunately, the latter approach is now the common one across all startups and companies adopting crypto, for many good reasons. Another reason could be a monetization strategy, but this is another big story worth a dedicated article (Interested? Comment out!).</p>
<p>Getting back to the transaction fees problem, we can state the following, which is hard to argue with.</p>
<blockquote>
<p><em>It is natural for the user to purchase <strong>only</strong> the cryptocurrency they really need (for instance, tokens:</em> <a target="_blank" href="https://coinmarketcap.com/currencies/tether/"><em>Tether</em></a><em>,</em> <a target="_blank" href="https://coinmarketcap.com/currencies/dai/"><em>DAI</em></a><em>,</em> <a target="_blank" href="https://coinmarketcap.com/currencies/basic-attention-token/"><em>BAT</em></a><em>,</em> <a target="_blank" href="https://token.dreamteam.gg/"><em>DREAM</em></a><em>, etc.), and they would normally expect to pay any transaction fees <strong>in this cryptocurrency</strong>.</em></p>
</blockquote>
<p>So why not just allow them to do so? Because it's quite complex indeed. Let's see why, and how this has just got easier with our open-sourced solution (at least for Ethereum).</p>
<h1 id="heading-existing-approaches">Existing Approaches</h1>
<p>From the very beginning of blockchain existence, there were a couple of solutions that could simplify the user onboarding flow to the flow depicted below, avoiding the step of purchasing an intermediate currency like Ether. Still, creating a blockchain wallet is not an easy step, but some users who do understand the value of the application/service go through this step quite well.</p>
<p><img src="https://lh3.googleusercontent.com/B_D585TaVcYR9qXA-0q3MfvAv1DjGzAulIup0XT1X8Va3eeekX32jAtayKbFCmKoISotoBk_WOyq9jGAdqJzfAnz5q61foOPjgxeVbcfq8bXlA9X25iqzKczy6qmjPvZJgBYsRrL" alt="Image" width="1275" height="359" loading="lazy">
<em>The user onboarding funnel with delegated transactions</em></p>
<p>The solution which allows to avoid using intermediate currencies (Ether for Ethereum) is called "delegated transactions", or "meta transactions". </p>
<blockquote>
<p><em>In short, delegated transaction, or "meta transaction" in blockchain is the type of transaction which performs an intended action on one account's behalf, while it is conducted (published) by another account (delegate), who actually pays fees for the transaction.</em></p>
</blockquote>
<p>There are <a target="_blank" href="https://medium.com/@austin_48503/ethereum-meta-transactions-90ccf0859e84">multiple</a> <a target="_blank" href="https://fravoll.github.io/solidity-patterns/proxy_delegate.html">approaches</a> <a target="_blank" href="https://medium.com/@e2toe4/ethereum-meta-transactions-36f10448619">around</a> <a target="_blank" href="https://github.com/ethereum/EIPs/issues/1035">the</a> <a target="_blank" href="https://github.com/ethereum/EIPs/issues/1228">internet</a> of the generalized concept of delegated transactions I am presenting in this article. But it seems that none of them are still widely adopted, as these approaches are quite complex by its nature, very specific as for the implementation, as well as some of them are <strong>quite complex to standardize</strong>. To be more constructive, existing approaches can be divided into 3-4 groups: those which use proxy smart contracts, those which embed delegation into a smart contract itself and, theoretically, there is an opportunity for the blockchain-native implementation (say, Ethereum 2.0).</p>
<h2 id="heading-1-delegated-transactions-approaches-which-use-proxy-contracts">1. Delegated transactions approaches which use proxy-contracts</h2>
<p>Proxy contracts, or, in this context, identity contracts are tiny contracts deployed to replace the user account which wants to avoid paying fees. This smart contract is programmed to act as a wallet, as well as a "caller" (sender) of other smart contract's functions. The key is that it is a delegate account that triggers all the actions, while the true "owner" of this smart contract is another user. The user just generates correct signatures in order to control their funds stored on a smart contract address (= in their wallet).</p>
<p><img src="https://lh3.googleusercontent.com/BqoXbK-n6UmpKY-nu8_GuibFbfA3a2Lrghc_fHSoJOzMqv_MYL2BNzIUzyZPgT1aSM00WC0fJoyErLQKc0Dtu3D92NRdYB3Cm4bJ8vZAnbfHVaSe4pCxrEsI8rvEiNCbQriStqfx" alt="Image" width="1025" height="471" loading="lazy">
<em>A visualization of how identity contracts look like</em></p>
<p><strong>Pros of this approach:</strong></p>
<ul>
<li>It works with any tokens and contracts which are already deployed to the network</li>
</ul>
<p><strong>Cons of this approach:</strong></p>
<ul>
<li>Users don't see tokens in their wallet, because they are physically on an identity smart contract</li>
<li>As a result, a need to develop custom UIs and custom tools/wallets</li>
<li>Identity smart contract deployment and assignment initial fees, as opposed to no fees at all</li>
<li>Requires a comprehensive standard to be widely adopted</li>
</ul>
<h2 id="heading-2-semi-delegated-transactions-via-operator-pattern-erc777httpseipsethereumorgeipseip-777">2. Semi-delegated transactions via "Operator" pattern (<a target="_blank" href="https://eips.ethereum.org/EIPS/eip-777">ERC777</a>)</h2>
<p>There is a token standard that describes this approach — <a target="_blank" href="https://eips.ethereum.org/EIPS/eip-777">ERC777</a>. In short, any token holder can authorize any other account to freely manage their tokens. I won't call it delegated transactions but nevertheless, I need to mention that, as here we somewhat delegate control over your tokens to other accounts.</p>
<p><img src="https://lh6.googleusercontent.com/Sf3WEbL4fRfefAZLZIBzxD8nAhLnFt75uIZUSO0SjifRwqbiIwSOUnWf4QkN6v6kmWXBazs05bGnG6w1AOTNZIEXwuVUf6GIPdBNtD60mAwiU5r7Oe4MMlNEGLy5htCrk51zsfwi" alt="Image" width="1025" height="471" loading="lazy">
<em>A visualization of ERC777 standard's "operator" pattern</em></p>
<p><strong>Pros of this approach:</strong></p>
<ul>
<li>Standardized</li>
</ul>
<p><strong>Cons of this approach:</strong></p>
<ul>
<li>Highly centralized around the "operator" accounts</li>
<li>Weak security due to operators have 100% control over your tokens</li>
<li>Initial fees for approval transaction</li>
<li>Requires additional UIs/tools development</li>
</ul>
<h2 id="heading-3-delegated-transactions-embedded-directly-into-a-token-smart-contract">3. Delegated transactions embedded directly into a (token) smart contract</h2>
<p>Just the same as it is possible to implement custom fees in a proxy smart contract, paying fees in tokens can be implemented directly in a token smart contract. For example, using the approach I described in <a target="_blank" href="https://hackernoon.com/you-dont-need-ether-to-transfer-tokens-f3ae373606e1">my previous article</a>, it is possible to implement a function in a smart contract, which will transfer tokens accepting the user's signature, instead of requiring the user to call this function directly. We have implemented this approach in our <a target="_blank" href="https://token.dreamteam.gg/">DREAM Token</a>, which is used on our <a target="_blank" href="https://dreamteam.gg/">dreamteam.gg</a> platform.</p>
<p><img src="https://lh3.googleusercontent.com/NTd44yatekkdfGEOfSDdsXi1S8cmtRdkQLXmUKSIm-nFzMMQdOM1Rox1nML6Y2Z8gYh9t_sMIsPvr7L7AHxTPlYXp0ENnVWQBLf5g85Cue-CiR2zb1Xw4Ym4G407MQOhCUUnSrrQ" alt="Image" width="1025" height="471" loading="lazy">
<em>A visualization of how embedding delegation into the token contract looks like</em></p>
<p>As you may notice, in contrast to the previous approach there is no identity contract anymore, and there is an optional way to call other smart contracts directly from the token contract.</p>
<p><strong>Pros of this approach:</strong></p>
<ul>
<li>Users see their tokens as usual on their wallet's balance</li>
<li>No initial fees for account initialization</li>
<li>May not even require a standard (continue reading)</li>
</ul>
<p><strong>Cons of this approach:</strong></p>
<ul>
<li>If you have a (token) smart contract that is already deployed to the network, you cannot apply this approach to it directly. While you can always deploy a new token and, for example, a "migration" utility, which will allow other users to swap tokens (burn the old token and mint a new one)</li>
<li>Because a standard for this approach is yet not well-defined, implementation can drastically vary</li>
<li>A need to develop custom UI/tools for delegated transactions (continue reading — solved!)</li>
</ul>
<h2 id="heading-4-delegated-transactions-on-the-blockchain-platform-level">4. Delegated transactions on the (blockchain) platform level</h2>
<p>This is far the best one of all the described approaches above but also the one <strong>which is not implemented anywhere yet</strong> (by anywhere I mean the most popular blockchain platforms). There is a hope that its support comes with Ethereum 2.0 release, or at least I've heard from Vitalik that they are in progress with something cool there.</p>
<p>Theoretically, we can imagine this approach as being able to make an "offline" signature of two transactions at a time: one which does something useful for the signing account which wants to avoid paying fees (for example, transferring tokens) and another one which does something useful for the delegate (for example, paying fee in tokens to the account which executes these two transactions).</p>
<p><img src="https://lh5.googleusercontent.com/R1S5_YVazRlh2mfzuMLaKAnix8GmXJy4swBQyxzWFzhIZhE5nDTZ4gfOLp9G51dx-ydW7sLQCsWkic6k_nVj_1CD8JkHjGjRYSMwt17wGSLAG58Vs2ve02KS3L5m5L2oTCMWfxlG" alt="Image" width="1142" height="505" loading="lazy">
<em>A visualization of how platform-native delegated transactions could look like</em></p>
<p>But the problem is, regarding Ethereum 2.0, this feature has a chance to land only in 2022 or even later. I also suppose that this feature will still require a dedicated back end (similar to the one which is introduced within this article), as it is hard to imagine how miners will accept fees in tokens. Simply put, if some of them refuse to accept fees in tokens than it makes little sense to do it on a "mining" level at all, not to mention how much would it take to track all token prices and volumes across exchanges, in a decentralized manner.</p>
<p><strong>Pros of this approach:</strong></p>
<ul>
<li>No need to change smart contracts that were already deployed</li>
<li>No initial fees for account initialization</li>
<li>May not even require a custom UI/tools if standardized</li>
</ul>
<p><strong>Cons of this approach:</strong></p>
<ul>
<li>Most likely, will still require a centralized back end (the "delegate")</li>
<li>Not yet implemented on a platform level (as of 2019)</li>
</ul>
<h1 id="heading-the-solution">The Solution</h1>
<p>From the four approaches above, except for the platform-level approach which is yet to be implemented and standardized in 2022+, the most appealing one is <strong>the third approach</strong>, where we embed delegated functions directly to the token smart contract. Thus, we save the standard token paradigm allowing wallets to normally work with the smart contract and have no need to wait until delegated transactions will land natively in one of the top blockchain platforms. We will stick to this approach and make it <strong>universal</strong> just below.</p>
<p>Delegated transactions support programmed right in the token smart contract is awesome. But how to deal with its cons? In fact, the only problem which is tough to deal with (as you cannot modify existing smart contracts), <strong>you will need to deploy a new token smart contract if you have already deployed it without delegated functions</strong> (for instance, standard ERC20 or ERC721 tokens). The next step, in this case, would be adding a way to migrate tokens from one smart contract to another. For example, you can decide to implement one more function in the new smart contract that will allow token holders to migrate their assets from the old smart contract.</p>
<p>Token migration function implementation can vary, starting from implementing <em>receiveApproval</em> in the new token, if the previous token supports <em>approveAndCall</em>, or ending with utilizing <em>approve</em> + <em>transferFrom</em> framework if you have just a bare minimal ERC20 (the user _approve_s tokens to the new token contract address and then calls a function in the new contract which burns old tokens and mints new ones — but this requires a standard fee for the user for the approval transaction). Actually, there is more: you can decide not to burn old tokens but to "lock" them on a new token smart contract, minting new tokens — this opens an opportunity to implement <strong>two-sided token migration</strong>, which is awesome — <strong>you won't need to list the "new" token on the exchange</strong>, while the users will still be able to send the old token to exchanges without fees in Ether! If you are interested, please fill the issue <a target="_blank" href="https://github.com/ZitRos/ethereum-delegated-tx-service/issues">here</a> if you want to know more details on how to do it, because this approach is worth a whole new article.</p>
<p>In my <a target="_blank" href="https://hackernoon.com/you-dont-need-ether-to-transfer-tokens-f3ae373606e1">previous article</a>, I provided an example of the token smart contract which supports delegation of such functions like <em>transfer</em>, <em>transferFrom</em>, <em>approve</em> and <em>approveAndCall</em>. Exactly these "delegated" functions allow users to pay fees in tokens, instead of Ether.</p>
<p><img src="https://lh6.googleusercontent.com/K95psDr4YlNLWPFIByI6HmE5DOz-uIGmD9xfNODmhfj6oRfkIlGJwkZLPYBEVof4MwitQe5Li6SbUNptplVKL2MfERLbVHLJru5jJkTpCVDnDaQbpMd24wtbWOTp81hX7CHtiRtR" alt="Image" width="1568" height="609" loading="lazy">
<em>How delegation works in Ethereum, in short. Read more in <a target="_blank" href="https://hackernoon.com/you-dont-need-ether-to-transfer-tokens-f3ae373606e1">this article</a>.</em></p>
<p>But that wasn't enough to start the mass adoption. In this article, I am providing a complete <a target="_blank" href="https://github.com/ZitRos/ethereum-delegated-tx-service">universal back end solution</a> (Transaction Publisher in the picture above), as well as a <a target="_blank" href="https://github.com/ZitRos/ethereum-delegated-tx-widget">configurable widget</a> (<a target="_blank" href="https://zitros.github.io/ethereum-delegated-tx-widget/">check it here</a>), which allows you to replace Ether fees for token fees today.</p>
<p>Some key points before we dive in:</p>
<ul>
<li>This delegated transactions back end is made to be universal, or <strong>standard-free</strong>, meaning that you can have <strong>any implementation</strong> of delegated functions and <strong>use any signature standard(s)</strong> in your token. From the back end standpoint, you just need to write a manifest file for your token, describing its usage.</li>
<li>Currently, converting collected fees in tokens back to Ether is a manual action on exchanges. But it could be a potential improvement for automation in the future (if needed).</li>
</ul>
<h1 id="heading-the-concept-behind-the-universal-solution">The Concept Behind the Universal Solution</h1>
<p>What does it mean that the token supports delegated transactions? Let's look at it using the ERC20 standard token as an example.</p>
<h2 id="heading-smart-contract">Smart Contract</h2>
<p>As for the token smart contract, the approach is quite straightforward. In addition to every method like <strong>transfer(to, value)</strong> which we want to be "delegatable", we add a companion function which, instead of inspecting <strong>msg.sender</strong>, accepts the signature of a user and does the same what the original function meant to do by validating this signature inside the smart contract. Thus, for example, for <strong>transfer(to, value)</strong> function we can add <strong>transferViaSignature(to, value, ...aditionalParams)</strong> function. As you know from <a target="_blank" href="https://en.wikipedia.org/wiki/Public-key_cryptography">public-key cryptography</a>, no one can create a valid signature except private key owner, so that's why this approach is as secure as Ethereum itself.</p>
<p>And the coolest part is that the delegated function implementation, as well as its signature doesn't matter much, from the delegate back end standpoint. You can even decide to implement one "call by signature" function for all other functions that the smart contract supports. Delegate back end just need to know <strong>how</strong> to call this function, which is solved by providing an off-chain contract manifest for the delegate back end. For example, the argument <em>additionalParams</em> in <strong>transferViaSignature</strong> can vary and can include anything from this list, if not more: fee, fee recipient address, expiration timestamp, a signature standard used, a signature itself, nonce number or any other unique delegated transaction ID and so on. Regarding the smart contract design, in order to understand why exactly these arguments, read my <a target="_blank" href="https://hackernoon.com/you-dont-need-ether-to-transfer-tokens-f3ae373606e1">previous article</a>.</p>
<p>We also want to allow "delegates" to earn something in order to cover their Ether spending, as well as to be profitable. Thus, we have to add a fee, but a much more natural fee than Ether: a fee in the token itself. So that, for example, if you need to transfer 100 tokens, you pay 3 more tokens to the delegate depending on its price and network conditions to perform a transfer, and this should be preserved in a smart contract logic.</p>
<h2 id="heading-back-end">Back End</h2>
<p>All right, now we have a token that allows transferring someone else's tokens by using their signature. Now, the crucial part is to automate the process of requesting and publishing such transactions. And here where our open-sourced <a target="_blank" href="https://github.com/dreamteam-gg/ethereum-delegated-tx-service">back end</a> (and a <a target="_blank" href="https://github.com/dreamteam-gg/ethereum-delegated-tx-widget">front end</a>) kicks in.</p>
<p>Below is the sequence diagram describing how front end (client) communicates with the back end from the delegated transaction request to its publishing to the network:</p>
<ol>
<li>(hidden on the diagram) The client requests information from the delegated back end to understand which contracts does it support, as well as which functions can it delegate.</li>
<li>The client requests a particular smart contract's function to be delegated. Most importantly, the back end returns the fees it charges and a data to be signed by the client.</li>
<li>The client signs the data in their wallet. Signing is a free operation, unlike publishing transaction to the network.</li>
<li>The client sends their signature back, thus confirming their intent to perform this particular delegated transaction. The back end validates this transaction against the current network.</li>
<li>Finally, the back end publishes a transaction to the network.</li>
<li>(hidden on the diagram) The client constantly polls the back end for the delegated request status until it receives a mined status. Note: it is important to poll the back end instead of using a transaction hash to understand when the transaction is mined. It is a very common case when the gas price suddenly increases, and, in order for the transaction to be mined quickly, the back end may republish it with a higher gas price. Though it is currently not implemented, it is very likely to be implemented soon.</li>
</ol>
<p><img src="https://lh5.googleusercontent.com/X2SADmcB2aMcJoUgN291XXPdk73sVNi4ebruRwN6TCcDgVWi7ILZs02Mlz0WSR4ufOnzXqxrHIdTSJyijeSKsTw1Z89vB0zjwD8dvQ3Jop6Z4xPKET1TWBnNDBad5QDlD8y0jptG" alt="Image" width="1600" height="1190" loading="lazy">
<em>Sequence diagram representing the simplified flow of how delegated transaction is delivered to the network</em></p>
<p>This approach is universal, and only requires the manifest file for the back end to understand how to calculate fees and which signature standard to use on the client side. Here is another visualization of the components of the system and their interaction sequence:</p>
<p><img src="https://lh4.googleusercontent.com/EmfRndRu7BJyU9UTYVGt_rKlQIE83v21s7UywoeTeZQ3Y832Z85KgYRQgmB4o9bqUS7OExMGy2ace6kc3v7QEL-t0bcsvsg9xu9zqLdKDUrzHWXrhHnwoOQWUkd8GBAOWwLww5e8" alt="Image" width="1459" height="934" loading="lazy">
<em>Component diagram</em></p>
<p>We've provided a comprehensive <a target="_blank" href="https://github.com/dreamteam-gg/ethereum-delegated-tx-service#delegated-transactions-concept">documentation</a> for this solution. You can check how the back end <a target="_blank" href="https://github.com/dreamteam-gg/ethereum-delegated-tx-service#api">API is structured</a>, as well as find the token <a target="_blank" href="https://github.com/dreamteam-gg/ethereum-delegated-tx-service/blob/master/config/contracts/mainnet/0x82f4ded9cec9b5750fbff5c2185aee35afc16587/manifest.js">manifest file</a> which describes how to work with a <a target="_blank" href="https://etherscan.io/address/0x82f4ded9cec9b5750fbff5c2185aee35afc16587#code">particular token contract</a>. We encourage you to contribute your own tokens there!</p>
<p>And you don't need much setup: it's already there with the universal front end!</p>
<h2 id="heading-front-end">Front End</h2>
<p><a target="_blank" href="https://github.com/dreamteam-gg/ethereum-delegated-tx-widget">Open-sourced front end part</a> of the delegated transactions is the user interface which is <strong>set up for every token</strong>: just run your delegated transactions back end and you are ready to go!</p>
<p><img src="https://lh4.googleusercontent.com/8TagMGFbuyXbiIEe8_x7cmBycjrAxcpE8zyURXmDIF1cQET-K64NchEmK0lWfNpwR5mzcJIQ5YLp--hLSCksLlMflOAPBbDCf2frPrF4xm6cEZ92GNXH-QDA3MBKpokX4O2tZoUq" alt="Image" width="689" height="908" loading="lazy">
<em>What <a target="_blank" href="https://send-token.dreamteam.gg">it</a> looks like</em></p>
<p>It is made to be an embeddable widget, which will guide the user through the procedure of sending tokens. You can plug any back end, token or call any token function with it by utilizing <a target="_blank" href="https://github.com/dreamteam-gg/ethereum-delegated-tx-widget#embedding">additional URL parameters</a> you can specify.</p>
<p>Using this widget, and by implementing something similar to widely used, but not standardized <em><strong>approveAndCall</strong></em> function in your token smart contract, you will be able to call other smart contracts with arbitrary data by paying fees in tokens!</p>
<p>Here is a quick guide for you if you want to play with this UI yourself:</p>
<ol>
<li>Access the widget via <a target="_blank" href="https://zitros.github.io/ethereum-delegated-tx-widget/?contractAddress=0xcc7e25e30b065ea61814bec6ecdb17edb0f891aa">this link</a>.</li>
<li>It will ask you to switch to the Kovan test network.</li>
<li>Get some test Ether using <a target="_blank" href="https://www.google.com/search?q=ethereum+kovan+faucet">any available Kovan faucet</a>.</li>
<li>Use test Ether to mint some <a target="_blank" href="https://kovan.etherscan.io/address/0xcc7e25e30b065ea61814bec6ecdb17edb0f891aa#writeContract">test tokens</a>: call <a target="_blank" href="https://kovan.etherscan.io/dapp/0xcc7e25e30b065ea61814bec6ecdb17edb0f891aa#writeContract">mintTokens</a> function in a token smart contract which will give you 10 test tokens.</li>
<li>Now, get back to <a target="_blank" href="https://zitros.github.io/ethereum-delegated-tx-widget/?contractAddress=0xcc7e25e30b065ea61814bec6ecdb17edb0f891aa">the widget</a> and try to transfer these tokens!</li>
</ol>
<p>If you open up the browser's developer tools, you may notice that there are a couple of back ends connected by default — they provide the front end with all required information to make a delegated request according to given widget URL parameters. All backends are requested during the widget load and, if any of them can provide a delegation for a particular contract's function, then the widget requests additional information: fees, supported signatures, etc. If there are multiple back ends which can delegate the same contract function, all of them are requested and the back end which provides the best fee will be used for the transaction.</p>
<p>Transaction mining time is seemingly fixed, but it can vary because of the network conditions. The back end uses an actual network fee when calculating the token fee, however, it may change before the user decides to execute the transaction. Thus, the "underpriced" transaction is submitted to the network and can be pending for a while. While the back end is currently not programmed to deal with this case, it might be implemented in future — transactions will be republished with higher gas fees in case of the network fee increases. But, we will also need to count this into the token fee.</p>
<h2 id="heading-signature-standards">Signature Standards</h2>
<p>The last question which you may be wondering is — which signature standard to use for your token. There are several available: _eth<em>sign</em> (deprecated), _eth<em>personalSign</em> (note that old <a target="_blank" href="https://trezor.io/">Trezor</a> and <a target="_blank" href="https://www.ledger.com/">Ledger</a> produce a different signatures because of ambiguity in a standard, so you may want to include both), _eth<em>signTypedData</em> (deprecated), <a target="_blank" href="https://medium.com/metamask/eip712-is-coming-what-to-expect-and-how-to-use-it-bb92fd1a7a26">_eth_signTypedData<em>v3</em></a> and so on. I would recommend supporting at least two: ageless _eth<em>personalSign</em> and new <a target="_blank" href="https://medium.com/metamask/eip712-is-coming-what-to-expect-and-how-to-use-it-bb92fd1a7a26">_eth_signTypedData<em>v3</em></a> (as of 2019).</p>
<p><img src="https://lh3.googleusercontent.com/TZhSpdfJF_035M1uCARZVYixZC4W8hsiG1jbs2zTyYZQC5fpwJUR3W7x14WaLofyklmEaR9O4Cgt7EkKb7MCb1RHK6geJfxKb-oGVVxlOXBOu6dh5c6nRtNwblF5B0sZ07Gf6mV7" alt="Image" width="1408" height="1279" loading="lazy">
<em>Signature standards comparison — what the user sees</em></p>
<p>The front end is programmed to always prefer the user-readable standard like <a target="_blank" href="https://medium.com/metamask/eip712-is-coming-what-to-expect-and-how-to-use-it-bb92fd1a7a26">eth_signTypedData_v3</a> to any others eth_personalSign. So if your token supports many signature standards, and you added all of them to the <a target="_blank" href="https://github.com/dreamteam-gg/ethereum-delegated-tx-service/blob/master/config/contracts/mainnet/0x82f4ded9cec9b5750fbff5c2185aee35afc16587/manifest.js">manifest file</a> of your token, it will display <a target="_blank" href="https://medium.com/metamask/eip712-is-coming-what-to-expect-and-how-to-use-it-bb92fd1a7a26">eth_signTypedData_v3</a> prompt first.</p>
<h1 id="heading-conclusion">Conclusion</h1>
<p>Delegated transactions are great: they solve one of the biggest problems of blockchain application adoption, which eases the mass adoption of crypto overall. I will put a couple of thesis in a Q&amp;A format here for you to answer the last questions that you may still have after reading this article:</p>
<ul>
<li>Our open-source solution is free to use and production-ready, feel free to apply it to your applications or tokens!</li>
<li>The described approach does not compromise security nor centralization. Think this way: the centralized back end is only a helper for someone who wants to transfer tokens without fee in Ether. If the back end is hacked, or it is just unavailable, there's no problem to interact with the network just as it was before, by paying fees in Ether. As well as the back end cannot harm or trick the user to steal their tokens when a proper signature standard is used (it's up to your token implementation).</li>
<li>There is a way to support delegated transactions for existing, already-deployed tokens. However, it requires the additional Ether-consuming step to migrate existing tokens to a new token contract. And, by programming a new token contract properly, as well as designing your application to work with both tokens you can even avoid a need to list a new token on exchanges.</li>
<li>By using the <a target="_blank" href="https://github.com/zitros/ethereum-delegated-tx-service/blob/master/config/contracts/mainnet/0x82f4ded9cec9b5750fbff5c2185aee35afc16587/manifest.js">existing tokens as an example</a>, which is available in delegated transactions <a target="_blank" href="https://github.com/zitros/ethereum-delegated-tx-service">back end</a> and <a target="_blank" href="https://github.com/zitros/ethereum-delegated-tx-widget">front end</a> repositories, you can produce your own manifest for your own token.</li>
<li><a target="_blank" href="https://github.com/zitros/ethereum-delegated-tx-service#setup">Read the instructions</a> on how to set up your own back end for a token, and then add it to the URL of your widget (or commit to the open-source repository).</li>
<li>Have a token which already supports delegated transactions? Plug it into <a target="_blank" href="https://zitros.github.io/ethereum-delegated-tx-widget">our UI</a> with these three quite simple steps: (1) create a manifest for your token and put your token abi file while setting up the delegate back end, (2) run this back end, exposing a public API URL and (3) use URL parameters in a widget to reference your back end or commit it directly to our open-source repository. Read more about it in GitHub's readme file.</li>
</ul>
<p>I hope that was a really helpful piece of information for all the searchers of incredible. Feel free to contact <a target="_blank" href="https://nikita.tk/">me</a> or fill the issue <a target="_blank" href="https://github.com/ZitRos/ethereum-delegated-tx-service/issues">here</a> if I missed something. Have fun, let the token economy be simple!</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Decentralized Applications Architecture: Back End, Security and Design Patterns ]]>
                </title>
                <description>
                    <![CDATA[ Decentralized applications, or ÐApps, require a special system design to achieve high security and reliability. In this article I am going to cover several main principles of how to properly design and implement back end and smart contracts for decen... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/how-to-design-a-secure-backend-for-your-decentralized-application-9541b5d8bddb/</link>
                <guid isPermaLink="false">66b99b76c39234149cf0113c</guid>
                
                    <category>
                        <![CDATA[ Blockchain ]]>
                    </category>
                
                    <category>
                        <![CDATA[ crypto ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Ethereum ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Security ]]>
                    </category>
                
                    <category>
                        <![CDATA[ tech  ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Nikita Savchenko ]]>
                </dc:creator>
                <pubDate>Tue, 02 Apr 2019 15:51:44 +0000</pubDate>
                <media:content url="https://cdn-media-1.freecodecamp.org/images/1*sd62aH6GGS1RoCR9t4QNyQ.png" medium="image" />
                <content:encoded>
                    <![CDATA[ <p><a target="_blank" href="https://en.wikipedia.org/wiki/Decentralized_application">Decentralized applications</a>, or ÐApps, require a special system design to achieve high security and reliability. In this article I am going to cover several main principles of how to properly design and implement back end and smart contracts for decentralized applications, taking <a target="_blank" href="https://www.ethereum.org/">Ethereum</a> as a primary example, though much of it would apply to <a target="_blank" href="https://eos.io/">EOS</a>, <a target="_blank" href="https://tron.network/">Tron</a> and other decentralized data platforms.</p>
<p><strong>Article Highlights</strong>:</p>
<ul>
<li>How to store private keys on the back end without security concerns</li>
<li>How to properly design smart contracts and what to “decentralize”</li>
<li>Decentralized and semi-centralized applications architecture examples</li>
<li>How to deal with low-level stuff like network load and failures</li>
</ul>
<p>It’s going to be big, let’s do it!</p>
<h3 id="heading-decentralized-programs-and-blockchain">Decentralized Programs and Blockchain</h3>
<p>Despite the fact that blockchain is facing a lot of adoption and regulation difficulties today, it’s a kind of technology which is here to stay, whether it’s blockchain, <a target="_blank" href="https://en.wikipedia.org/wiki/Hashgraph">hashgraph</a>, <a target="_blank" href="https://www.radixdlt.com/">tempo</a> or any other distributed ledger technology still to come, regardless of the algorithm.</p>
<blockquote>
<p>The main value that blockchain and other similar technologies bring can be generalized as follows: they allow people to write and run programs which, practically, cannot be changed after creation nor tampered with during execution. In other words, these programs always run as designed, and no single party can influence their behavior.</p>
</blockquote>
<p>This definition is valid for <em>many</em> cryptocurrencies that exist today if we consider them as programs that define how coins can be transferred back and forth. This also explains why cryptocurrencies and many kinds of tokens have real value: they cannot be generated out of thin air, by their defined “underlying programs”.</p>
<p>Ethereum/EOS/Tron/… platforms, in contrast to Bitcoin, implement a more complex program layer, which in turn implements the execution environment allowing anyone to write their own decentralized programs on top of the platform. This user-defined programs always run as designed, without any exceptions, and their security is guaranteed by the platform.</p>
<h3 id="heading-decentralized-applications">Decentralized Applications</h3>
<p>These secure and unchangeable programs running on a decentralized network in combination with traditional front-end and back-end technologies are what we call <strong>decentralized applications</strong> (ÐApps) today. Through some of them can be semi-centralized, a major part of activities in the truly decentralized application should happen out of a central party’s control.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/a0d9mC2p5qPHjMfIXw8Oq0XHCy9CQdLOAWmG" alt="Image" width="800" height="682" loading="lazy">
<em>If someone asked me to draw how DApps work today, I would probably have drawn this</em></p>
<p>To imagine what we call decentralized applications today, take any existing centralized web resource like <a target="_blank" href="https://www.youtube.com/c/NikitaSavchenko"><em>YouTube</em></a> or <a target="_blank" href="https://instagram.com/nikitaeverywhere/"><em>Instagram</em></a> as an example and imagine that instead of a password-protected centralized account you have your “<strong>crypto identity</strong>” bound to the web/mobile resource.</p>
<p>That’s what <a target="_blank" href="https://metamask.io/">Wallet Software</a> provides you. The <a target="_blank" href="https://en.wikipedia.org/wiki/Public-key_cryptography">private key</a> from this identity (a secret, having which, you can act on behalf of this identity) is stored on your local device and never goes online, making no one able to control this identity but you. With this identity, you can perform different actions in both <em>centralized</em> (web resource controlled by a central authority) and <em>decentralized</em> (which is a different network from the traditional www, the goal of which is to eliminate the central authority) <em>networks</em>, using the website as an access point and/or as a graphical user interface. The whole point of this “crypto identity” is that your actions are cryptographically secured, and no one is able to change what have you signed nor your signature.</p>
<p>Today, the computational and storage capabilities of fault-tolerant decentralized networks like <a target="_blank" href="https://www.ethereum.org/">Ethereum</a>, <a target="_blank" href="https://eos.io/">EOS</a> or <a target="_blank" href="https://tron.network/">Tron</a> are limited. If they were scalable, we could use decentralized networks to store the whole decentralized application, including its graphical user interface, data and business logic. In this case, we would call these applications truly decentralized/distributed.</p>
<p>However, because those networks are not scalable today, we combine different approaches to achieve the maximum decentralization level for our applications. The “traditional” back end as we know it isn’t going anywhere. For instance:</p>
<ul>
<li>We use back end to host front end for a decentralized application.</li>
<li>We use back end for integrations with any other existing technologies and services. Real, world-class applications cannot live in an isolated environment.</li>
<li>We use back end to store and process anything big enough for a decentralized network (blockchain in particular). Practically, the whole application and its business logic are stored somewhere in the world, excluding the blockchain part only. Not to mention, <a target="_blank" href="https://ipfs.io/">IPFS</a> and similar storage layers <a target="_blank" href="https://github.com/ipfs/faq/issues/93">cannot guarantee</a> the accessibility of files, hence we cannot rely on them without hosting the files ourselves either. In other words, there’s always a need for a dedicated running server.</li>
</ul>
<p>There’s no way of building a secure and partially decentralized application without using a solid back end as of today, and the whole point of this article is to explain how to do this right.</p>
<h3 id="heading-decentralization-and-tokens">(De)centralization and Tokens</h3>
<p>It so happens that almost all decentralized applications today are built around so-called <a target="_blank" href="https://coinmarketcap.com/tokens/">tokens</a> — custom-built (or just simply cloned) cryptocurrencies that drive a particular decentralized application. Tokens are simply a programmable currency or assets, that’s it.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/b-Ok08iucXB0n6VwiLcPzbW8BAWfTe7YRBxD" alt="Image" width="800" height="589" loading="lazy">
<em>While token smart contracts determine how users can transfer tokens, application smart contracts can extend everything missing in token smart contracts. Both smart contracts run on top of decentralized networks</em></p>
<p>Usually, a token is a “smart contract” (a custom program) written on top of the decentralized platform like Ethereum. By owning some tokens you are basically able to get different services on a web resource or mobile app, and trade this token for something else. The key point here is that the token lives on its own and it is not controlled by a central authority.</p>
<blockquote>
<p>There are many examples of applications that are build around tokens: from numerous collectible games like <a target="_blank" href="https://www.cryptokitties.co/">CryptoKitties</a> (ERC721 tokens) to more service-oriented apps like <a target="_blank" href="https://loomx.io/purchase/">LOOM Network</a>, or even browsers like <a target="_blank" href="https://brave.com/download">Brave</a> and gaming platforms like <a target="_blank" href="https://dreamteam.gg/">DreamTeam</a> (ERC20-compatible tokens).</p>
</blockquote>
<p>Developers themselves determine and decide how much control they will (or won’t) have over their applications. They can build the whole application’s business logic on top of smart contracts (like <a target="_blank" href="https://www.cryptokitties.co/">CryptoKitties</a> did), or, they can make no use of smart contracts at all, centralizing everything on their servers. However, the best approach is somewhere in the middle.</p>
<h3 id="heading-back-end-for-decentralized-networks">Back End for Decentralized Networks</h3>
<p>From a technical point of view, there has to be a bridge that connects tokens and other smart contracts with the web/mobile application.</p>
<p>In today’s fully decentralized applications, where clients interact with smart contracts directly, this bridge is narrowed down to a <a target="_blank" href="https://github.com/ethereum/wiki/wiki/JSON-RPC">JSON RPC API</a> capabilities of <a target="_blank" href="https://infura.io">public APIs or node pools like Infura</a>, which in turn are forced to exist because of the fact that not every device can run and support its individual network node. However, this API provides an only basic and very narrow set of functions, which barely allow making simple queries nor efficiently aggregate data. Because of this, eventually, custom back end kicks in, making the application semi-centralized.</p>
<p>The whole interaction with the decentralized network can be narrowed down to just one or two points, depending on the application needs:</p>
<ol>
<li><strong>Listening to the network events</strong> (like token transfers) / <strong>reading the network state</strong>.</li>
<li><strong>Publishing transactions</strong> (invoking state-changing smart contract functions like token transfer).</li>
</ol>
<p>Implementing both of these points is quite tricky, especially if we want to build a secure and reliable back-end solution. Here are the main points which we are going to break down below:</p>
<ul>
<li>First of all, in Ethereum, events retrieval is not production-ready out of the box. Because of multiple reasons: network nodes can fail while fetching a large number of events, events can disappear or change because of network forks, etc. We have to build an abstraction layer to sync events from the network and guarantee their reliable delivery.</li>
<li>The same for transaction publishing, we have to abstract Ethereum’s low-level stuff like nonce counters and gas estimations, as well as transaction republishing, providing a reliable and stable interface. Moreover, transaction publishing implies using private keys, which requires advanced back-end security.</li>
<li>Security. We are going to take it seriously and face that it’s impossible to guarantee that private keys won’t ever be compromised on a back end. Luckily, there is an approach to designing a decentralized application without even <strong>a need</strong> for back-end accounts to be highly secured.</li>
</ul>
<p>In our practice, all of this made <a target="_blank" href="https://dreamteam.gg/">us</a> create a robust back-end solution for Ethereum which we name <strong>Ethereum Gateway</strong>. It abstracts other microservices from Ethereum’s fun and provides a reliable API to work with it.</p>
<p>As a <a target="_blank" href="https://dreamteam.gg/">fast-growing startup</a>, we cannot disclose the complete solution (just yet) for obvious reasons, but I am going to share everything that you need to know to make your decentralized application work flawlessly. However, if you have any specific questions or inquiries, feel free to contact <a target="_blank" href="https://nikita.tk/">me</a>. Comments to this article are much appreciated as well!</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/aR03aGoFHc3EZ5ZCBVBPn6gqQEYYWFArNVy0" alt="Image" width="800" height="519" loading="lazy">
_Back End Monitoring for Ethereum. The monitor demonstrates activities mainly regarding our [recurring billing feature](https://github.com/dreamteam-gg/smart-contracts/blob/master/contracts/token/TokenRecurringBilling.md" rel="noopener" target="<em>blank" title=") (though you can see peaks happening each hour).</em></p>
<h3 id="heading-decentralized-applications-architecture">Decentralized Applications Architecture</h3>
<p>This part of the article highly depends on the needs of a particular decentralized application, but we will try to sort out some basic interaction patterns on top of which these applications are built (ÐPlatform = Decentralized Platform = Ethereum/EOS/Tron/Whatever):</p>
<h4 id="heading-client-dplatform-fully-decentralized-applications"><strong>Client ⬌ ÐPlatform</strong>: <strong><em>fully decentralized applications</em></strong>.</h4>
<p>The client (browser or mobile application) talks to the decentralized platform directly with the help of Ethereum “wallet” software like <a target="_blank" href="https://metamask.io">Metamask</a>, <a target="_blank" href="https://trustwallet.com/">Trust</a> or hardware wallets like <a target="_blank" href="https://trezor.io/">Trezor</a> or <a target="_blank" href="https://www.ledger.com/">Ledger</a>. Examples of DApps build in such manner are <a target="_blank" href="https://www.cryptokitties.co/">CryptoKitties</a>, <a target="_blank" href="https://loomx.io/">Loom’s</a> <a target="_blank" href="https://delegatecall.com/">Delegated Call</a>, crypto wallets themselves (<a target="_blank" href="https://metamask.io/">Metamask</a>, <a target="_blank" href="https://trustwallet.com/">Trust</a>, <a target="_blank" href="https://tron.network/wallet?lng=en">Tron Wallet</a>, others), decentralized crypto exchanges like <a target="_blank" href="http://etherdelta.com">Etherdelta</a> and so on.</p>
<h4 id="heading-dplatform-client-back-end-dplatform-centralized-or-semi-centralized-applications"><strong>ÐPlatform</strong> ⬌ <strong>Client</strong> ⬌ <strong>Back End</strong> ⬌ <strong>ÐPlatform</strong>: <strong><em>centralized or semi-centralized applications</em></strong>.</h4>
<p>The client interaction with the decentralized platform and the server has little in common. The good example of this is any (<strong><em>centralized</em></strong>) crypto exchange today, like <a target="_blank" href="https://www.bitfinex.com/">BitFinex</a> or <a target="_blank" href="https://poloniex.com">Poloniex</a>: the currencies you trade on exchanges are simply recorded in the traditional database. You can “top up” your database balance by sending assets to a specific address (ÐPlatform ⬌ Client) and then withdraw assets after some actions in the app (Back End ⬌ ÐPlatform), however, everything you do in terms of a “ÐApp” itself (Client ⬌ Back End) does not imply your direct interaction with the ÐPlatform.</p>
<p>Another example is <a target="_blank" href="https://etherscan.io/">Etherscan.io</a>, which uses <strong><em>semi-centralized</em></strong> approach: you can do all useful decentralized actions there, but the application itself just doesn’t make sense without their comprehensive back end (Etherscan continuously syncs transactions, parses data and stores it, ultimately providing a comprehensive API/UI).</p>
<h4 id="heading-something-in-between-still-centralized-or-semi-centralized-applications"><strong>Something in between: <em>still,</em> <em>centralized or semi-centralized applications</em>.</strong></h4>
<p>The above approaches combined. For example, we can have an application which provides various services in exchange for crypto, allowing you to log in and sign information with your crypto identity.</p>
<p>Hopefully, the interaction pattern of fully decentralized applications (Client ⬌ ÐPlatform) does not raise any questions. By relying on such amazing services like <a target="_blank" href="https://infura.io/">Infura</a> or <a target="_blank" href="https://www.trongrid.io/">Trongrid</a> one can simply build an application which doesn’t require a server at all. Almost all client-side libraries like <a target="_blank" href="https://github.com/ethers-io/ethers.js/">Ethers.js</a> for Ethereum or <a target="_blank" href="https://github.com/tronprotocol/tron-web">Tron-Web</a> for Tron can connect to these public services and communicate with the network. However, for more complex queries and tasks, you may need to allocate your own server anyway.</p>
<p>The rest of the interaction patterns which involve back end make things more interesting and complex. To put all these in a picture, let’s imagine a case where our back end reacts to some event in the network. For example, the user publishes an allowance transaction which gives us permission to charge them. To make a charge, we have to publish the charge transaction in response to the emitted allowance event:</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/86mjnQ0gwUrAbrBL4t8LFCXbC4HyckEsmFYQ" alt="Image" width="800" height="612" loading="lazy">
<em>An example flow of server’s reaction to the user’s action in the decentralized network</em></p>
<p>From the back end point of view here’s what happens:</p>
<ol>
<li>We listen to a particular network event by continuously polling the network.</li>
<li>Once we get an event, we perform some business logic and then decide to publish a transaction in response.</li>
<li>Prior to publishing the transaction, we want to ensure that it will likely be mined (in Ethereum, the successful transaction gas estimation means there are no errors against the <em>current network state</em>). However, we can’t guarantee that the transaction will be mined <em>successfully</em>.</li>
<li>Using a private key, we sign and publish the transaction. In Ethereum we also have to determine the gas price and gas limit of the transaction.</li>
<li>After publishing the transaction, we continuously poll the network for its status.</li>
<li>If it takes too long and we can’t get the status of the transaction, we have to re-publish it or trigger a “fail scenario”. Transactions can be lost for various reasons: network congestion, dropping peers, network load increase, etc. In Ethereum, you can also consider re-signing a transaction with a different (actual) gas price.</li>
<li>After we finally get our transaction mined, we can perform more business logic if needed. For example, we can notify other back end services about the fact of the transaction being completed. Also, consider waiting for a couple of confirmations prior to making final decisions regarding the transaction: the network is distributed and hence the result can change in a matter of seconds.</li>
</ol>
<p>As you can see, there’s a lot going on! However, your application may not require some of these steps, depending on what you are trying to achieve. But, building a robust and stable back end requires having a solution for all the problems mentioned above. Let’s break this down.</p>
<h3 id="heading-decentralized-applications-back-end">Decentralized Applications Back End</h3>
<p>Here I want to highlight some of the points which arise most of the questions, namely:</p>
<ul>
<li>Listening to network events and reading data from the network</li>
<li>Publishing transactions &amp; how to do it securely</li>
</ul>
<h4 id="heading-listening-to-network-events">Listening to Network Events</h4>
<p>In Ethereum, as well as in other decentralized networks, a concept of smart contract <a target="_blank" href="https://media.consensys.net/technical-introduction-to-events-and-logs-in-ethereum-a074d65dd61e">events (or event logs, or just logs)</a> allows off-chain applications to be aware of what is happening in the blockchain. These events can be created by smart contract developers at any point of the smart contract code.</p>
<p>For example, within the well-known <a target="_blank" href="https://en.wikipedia.org/wiki/ERC-20">ERC20</a> token standard each token transfer <a target="_blank" href="https://etherscan.io/tx/0xe7186ec76b164e44212dda60fdace62bef67cf7dc017d2e6318d517daa9b01c9#eventlog">has to log the Transfer event</a>, thus letting off-chain applications know that there is a token transfer happened. By “listening” to these events we can perform any (re)actions. For instance, some mobile crypto-wallets send you a push/email notification when tokens are transferred to your address.</p>
<p>In fact, there’s no reliable solution for listening to network events out of the box. Different libraries allow you to track/listen to events, however, there are many cases when something can go wrong, resulting in lost or unprocessed events. To avoid losing events, we have to build a custom back end, which will maintain the events sync process.</p>
<p>Depending on your needs, the implementation can vary. But to put you in a picture here is one of the options of how can you build reliable Ethereum events delivery in terms of microservice architecture:</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/1I5pP5C6HTNGeXpSNO1TpQeFDvxRZnDzZDnt" alt="Image" width="800" height="366" loading="lazy">
<em>Reliable delivery of Ethereum events to all back end services</em></p>
<p>These components work in the following way:</p>
<ol>
<li>Events sync back end service constantly polls the network, trying to retrieve new events. Once there are some new events available, it sends these events to the message bus. Upon successful event submission to the message bus, as for blockchain, we can save the last event’s block in order to request new events from this block next time. Keep in mind that retrieving too many events at once may result in always failing requests, so you have to limit the number of events/blocks you request from the network.</li>
<li>The message bus (for example, <a target="_blank" href="https://www.rabbitmq.com/">Rabbit MQ</a>) routes the event to every queue which was set up individually for each back end service. Prior to event publishing, events sync back end service specifies the routing key (for example, a smart contract address + event <a target="_blank" href="https://codeburst.io/deep-dive-into-ethereum-logs-a8d2047c7371">topic</a>), while consumers (other back end services) create queues which are subscribed for particular events only.</li>
</ol>
<p>As a result, each back end service gets only those events it needs. Moreover, the message bus guarantees the delivery of all events once they are published to it.</p>
<p>Of course, you can use something else instead of the message bus: HTTP callbacks, sockets, etc. In this case, you’ll need to figure out how to guarantee callbacks delivery yourself: manage exponential/custom callback retries, implement custom monitoring and so on.</p>
<h4 id="heading-publishing-transactions"><strong>Publishing Transactions</strong></h4>
<p>There are a couple of steps we have to perform in order to publish a transaction to the decentralized network:</p>
<ol>
<li>Preparing the transaction. Along with transaction data, this step implies requesting the network state in order to find out whether this transaction is valid and is going to be mined (gas estimation in Ethereum) and the transaction’s sequential number (nonce in Ethereum). Some of the libraries <a target="_blank" href="https://github.com/ethers-io/ethers.js/issues/331">try to do this under the hood</a>, however, these steps are important.</li>
<li>Signing the transaction. This step implies the usage of the private key. Most likely, here you’ll want to embed the custom private key assembly solution (<a target="_blank" href="https://github.com/immutability-io/vault-ethereum">for instance</a>).</li>
<li>Publishing and <em>republishing</em> the transaction. One of the key points here is that your published transaction always has a chance to get lost or dropped from the decentralized network. For example, in Ethereum, the published transaction can be dropped if the network’s <a target="_blank" href="https://ethgasstation.info/">gas price</a> suddenly increases. In this case, you have to republish the transaction. Moreover, you may want to republish the transaction with other parameters (at least with higher gas price) in order to get it mined as soon as possible. Thus, republishing the transaction can imply re-signing it, if the replacement transaction wasn’t pre-signed before (with different parameters).</li>
</ol>
<p><img src="https://cdn-media-1.freecodecamp.org/images/ZFZYOVlaW-CDPFpzwutxZTCVdeM4ifLqpsK8" alt="Image" width="800" height="532" loading="lazy">
<em>The above points regarding Ethereum transaction publishing visualized</em></p>
<p>By utilizing the above approaches you can end up building something similar to the thing which is presented in the sequence diagram below. On this particular sequence diagram, I demonstrate (in general!) how the <a target="_blank" href="https://hackernoon.com/payments-of-tomorrow-decentralized-recurring-billing-47d126d895fd">blockchain recurring billing</a> works (there’s more in a linked article):</p>
<ol>
<li>The user executes a function in a smart contract, which ultimately allows the back end to perform a successful charge transaction.</li>
<li>A back end service responsible for a particular task listens to the event of charge allowance and publishes a charge transaction.</li>
<li>Once the charge transaction is mined, this back end service responsible for a particular task receives an event from the Ethereum network and performs some logic (including setting the next charge date).</li>
</ol>
<p><img src="https://cdn-media-1.freecodecamp.org/images/oNsxhuB9bVacGDh7pJyMjjk25gyipzS70lJg" alt="Image" width="800" height="564" loading="lazy">
_The general sequence diagram of how [blockchain recurring billing](https://hackernoon.com/payments-of-tomorrow-decentralized-recurring-billing-47d126d895fd" rel="noopener" target="<em>blank" title=") works, demonstrating the interaction between back-end services and Ethereum network</em></p>
<h3 id="heading-back-end-security-amp-smart-contracts">Back End Security &amp; Smart Contracts</h3>
<p>Transaction publishing always involves using a <strong>private key</strong>. You may be wondering if it is possible to keep private keys secure. Well, yes and no. <a target="_blank" href="https://en.wikipedia.org/wiki/Threshold_cryptosystem">There are</a> <a target="_blank" href="https://medium.com/gemini/cold-storage-keys-crypto-how-gemini-keeps-assets-safe-a732addcd13b">numerous</a> <a target="_blank" href="https://www.coinbase.com/security">complex</a> <a target="_blank" href="https://github.com/immutability-io/vault-ethereum">strategies</a> and <a target="_blank" href="https://www.vaultproject.io/">different types of software</a> which allow storing private keys on the back end quite securely. Some private key storage solutions use geo-distributed databases, while others even suggest the use of special hardware. However, in any case, the most vulnerable point of a semi-centralized application is where the private key is assembled and used to sign a transaction (or, in case of special hardware, a point of triggering a transaction signing procedure). Hence, theoretically, there’s no 100% reliable solution which will enable bullet-proof protection from compromising stored private keys.</p>
<p>Now think this way. In many cases, you don’t even need to secure private keys on the back end that often. Instead, <strong>you can design smart contracts and the whole application in such a manner that a private key leak won’t affect their usual behavior</strong>. With this approach, it doesn’t matter how authorized accounts interact with the smart contract. They’re just “triggering” a smart contract to do its usual job, and the smart contract itself performs any required validation. I call it the “operational accounts pattern”.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/Vl3V0DAGGdqi07BnffXkqRsl-0YROdAkgCG6" alt="Image" width="800" height="366" loading="lazy">
<em>Operational accounts pattern for decentralized applications, where you don’t need military-grade security for your back-end accounts</em></p>
<p>This way, in case of emergency:</p>
<ul>
<li>The only thing the attacker can steal is a tiny amount of Ether (as of Ethereum) deposited to the operational accounts for transaction publishing</li>
<li>The attacker won’t be able to harm the smart contract logic nor anyone who is involved in the process</li>
<li>Compromised operational accounts can be quickly replaced with other ones, however, this requires either the manual replacement (generating new accounts, and reauthorizing accounts in all smart contracts) or developing an additional solution which will do all the magic with a single transaction from a super-secure (hardware or <a target="_blank" href="https://medium.com/@yenthanh/list-of-multisig-wallet-smart-contracts-on-ethereum-3824d528b95e">multi-sig</a>) master account.</li>
</ul>
<p>For instance, in our <a target="_blank" href="https://hackernoon.com/payments-of-tomorrow-decentralized-recurring-billing-47d126d895fd">recurring billing for Ethereum</a> solution, no matter what happens on a back end, the recurring billing smart contract is designed in such a manner that we have a whole month of time for replacing the compromised accounts if any of them are compromised.</p>
<p>But still, if you want to get your back end private key storage as secure as possible, you can try using <a target="_blank" href="https://www.vaultproject.io/">Vault</a> with a <a target="_blank" href="https://github.com/dreamteam-gg">great plugin for Ethereum</a> which stores and manages Ethereum accounts (also, keep an eye on our <a target="_blank" href="https://github.com/dreamteam-gg">open-source modules</a> — we are about to release something similar soon). I am not going to dive deep into the details here, though you can visit the linked projects and learn from there yourself.</p>
<p>This isn’t even all I have to say. However, this article turned out to be much longer than I expected so I have to stop. Subscribe to my <a target="_blank" href="https://medium.com/@zitro">Medium</a> / <a target="_blank" href="https://nikita.tk/">other networks</a> if you’re interested in software, crypto, <a target="_blank" href="https://instagram.com/nikitaeverywhere/">travel tips</a> or just want to follow something interesting. Hope I’ve provided a big valuable piece of information and you’ll find it useful. Feel free to comment and spread this article!</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ Harness the full power of email with these simple hacks ]]>
                </title>
                <description>
                    <![CDATA[ Let’s talk about some email features that are surprisingly under-used, and that can really benefit you — if you know how to use them. This article is suitable for both users and developers who want to become email Jedi. Hack #1: Multiple email addres... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/harness-the-full-power-of-email-with-these-simple-hacks-5dc240dba152/</link>
                <guid isPermaLink="false">66b99b71b0933e3341151c63</guid>
                
                    <category>
                        <![CDATA[ development ]]>
                    </category>
                
                    <category>
                        <![CDATA[ email ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Productivity ]]>
                    </category>
                
                    <category>
                        <![CDATA[ self-improvement  ]]>
                    </category>
                
                    <category>
                        <![CDATA[ tech  ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Nikita Savchenko ]]>
                </dc:creator>
                <pubDate>Mon, 28 Aug 2017 13:09:39 +0000</pubDate>
                <media:content url="https://cdn-media-1.freecodecamp.org/images/1*2czgFeeJ6ftdfDf90XO7dg.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <p>Let’s talk about some email features that are surprisingly under-used, and that can really benefit you — if you know how to use them. This article is suitable for both users and developers who want to become email Jedi.</p>
<h3 id="heading-hack-1-multiple-email-addresses-within-a-single-account">Hack #1: Multiple email addresses within a single account</h3>
<p>Have you ever wanted to register multiple times on a website, but still keep the same inbox for all the accounts? This simple trick works with about 95% of websites and services across the world. Even on Twitter and Instagram.</p>
<p>Some email providers, like gmail.com or live.com, allow you to put an extra dot between the letters of the email address. This changes nothing but the look of the address.</p>
<p>For example, say you own <strong>letgrandmaseat@gmail.com.</strong> You also own <strong>let.grandma.seat@gmail.com</strong>, <strong>let.grandmas.eat@gmail.com</strong>, <strong>l.e.t.g.r.a.n.d.m.a.s.e.a.t@gmail.com,</strong> and so on. All the emails sent to these addresses will appear in the same inbox. You can send emails back using any of these addresses as well — it just needs <a target="_blank" href="https://support.google.com/a/answer/22370">a bit of configuration</a>.</p>
<p>This allows you to change the look of an email address, and use any of the iterations as a “new,” valid email. For example:</p>
<ul>
<li>You can register on websites multiple times using the same email account</li>
<li>You can share different forms of your email address with different people. This way, when receiving emails from unknowns, you can find out how senders learned about your email address.</li>
</ul>
<p>In addition, some email providers allow you to add a plus sign to your address followed by any arbitrary string:</p>
<ul>
<li><strong>let.grandmas.eat+your.soup@gmail.com</strong></li>
<li><strong>let.grandma.seat+a.baby@gmail.com</strong></li>
</ul>
<p>This increases the number of possible email address variations almost to infinity.</p>
<p>This can be extremely useful for grouping your incoming emails. You can <a target="_blank" href="https://support.google.com/inbox/answer/6067566">set up a rule</a> to group emails differently according to the address they come from. For example, you can register on some minor websites using the <strong>letgrandmaseat+trash@gmail.com</strong> address. Then, you can set up an inbox rule to move all those incoming emails to the “Low Priority” box.</p>
<p>Many services offering a trial version of their products accept different forms of the same email account. This means that you can register again and again, when each trial ends, to get a new trial — all with the same email account. Developers can’t do much to restrict this. Continue reading to figure out why.</p>
<h3 id="heading-hack-2-many-domains-can-refer-to-the-same-account">Hack# 2: Many domains can refer to the same account</h3>
<p>If you own any <strong>@gmail.com</strong> address, you can also use any <strong>@googlemail.com</strong> address for sending or receiving emails. Most websites and web services treat these email addresses as different. This allows you to register multiple accounts using both forms of a single email address.</p>
<h3 id="heading-hack-3-email-addresses-can-be-case-sensitive">Hack #3: Email addresses can be case-sensitive</h3>
<p>Many people know that it doesn’t typically matter whether you write to <strong>letgrandmaseat@gmail.com or LetGrandmasEat@gmail.com.</strong></p>
<p>But it turns out that the part before the @ can be case-sensitive. This is because it is entirely under the control of the host system. According to RFC 5321, section 2.3.11:</p>
<blockquote>
<p>“The standard mailbox naming convention is defined to be “local-part@domain;” contemporary usage permits a much broader set of applications than simple “user names.” Consequently, and due to a long history of problems when intermediate hosts have attempted to optimize transport by modifying them, the local-part MUST be interpreted and assigned semantics only by the host specified in the domain part of the address.”</p>
</blockquote>
<p>So, if you use a luxury domain instead of a well-known one (like gmail.com), it’s best to keep the address in its original case. But if you accidentally mistyped and the resulting address does not exist, you will likely receive an email telling you that your message was not delivered.</p>
<p>These naming conventions completely depend on the host systems. Technically, anyone who can create email servers can set up any naming rules they want. They can use different domains they own for the same mailbox, allow or deny any of the <a target="_blank" href="https://en.wikipedia.org/wiki/Email_address#Local-part">valid characters</a> in the email addresses, and so on.</p>
<h3 id="heading-hack-4-disposable-email-services">Hack #4: “Disposable email” services</h3>
<p>There are a couple of services which allow you to create a temporary, <a target="_blank" href="https://en.wikipedia.org/wiki/Disposable_email_address">disposable email address</a> for free. These exist to allow you to access information when you don’t want to register because of privacy concerns or other issues.</p>
<p>And these services are used by many people. Just check how often <a target="_blank" href="https://www.mailinator.com/v2/inbox.jsp?zone=public&amp;query=test">test@mailinator.com receives emails</a>, and how much uninteresting junk there is.</p>
<p>To prevent the use of fake emails, some services use different <a target="_blank" href="https://www.accuwebhosting.com/blog/top-10-bulk-email-list-verification-validation-services-compared/">email validation solutions</a>. And yes, they help in some cases. It becomes more difficult to create a bunch of email addresses which will bypass validity checks. Lots of robots and spamming programs will die here, which is why these services exist.</p>
<p>Do email validation services sound like the solution to fraud or spam problems? In most cases — yes. But not for all possible problems, as you’ll read next.</p>
<h3 id="heading-hack-5-you-can-create-almost-any-email-address-for-free">Hack #5: You Can Create Almost Any Email Address For Free</h3>
<p>When you own a domain, you can set up an email service for it. There are <a target="_blank" href="https://www.google.com/search?q=free+email+for+domain">a couple services</a> which let you do this for free. And there are <a target="_blank" href="https://www.google.com/search?q=free+domain">a couple providers</a> which provide free domain names for everyone.</p>
<p>If you can follow instructions to set up a domain and an email on it, you can create <strong><em>any.name@any.domain.XY</em></strong> email address for free. The detailed instructions to set up such an email are beyond of the scope of this article. But in short, the procedure looks like this:</p>
<ol>
<li>Register a <a target="_blank" href="https://www.google.com/search?q=free+domain">free</a> or paid domain by filling out a typical registration form.</li>
<li>Select one of the “email for domain” providers (for example, <a target="_blank" href="https://www.zoho.com/mail/">Zoho</a>), and follow <a target="_blank" href="https://www.zoho.eu/mail/help/adminconsole/email-hosting-setup.html">the instructions</a> to create an email account for your domain.</li>
</ol>
<p>Yes, it’s that easy.</p>
<h3 id="heading-the-implications-for-email-users">The implications for email users</h3>
<p>By adding special symbols like dots or plus signs to your email address (for some email providers) you can get the most of it. You can manage incoming group emails and register multiple times on some sites. And it lets you put different forms of your address on your business card so you know the source of incoming emails.</p>
<p><a target="_blank" href="https://www.google.com/search?q=Disposable+email">Disposable emails</a>, as well as <a target="_blank" href="https://www.google.com/search?q=temporary+phone+number">temporary phone number services</a>, can protect your privacy when you need to register on an unwanted website for any reason.</p>
<p>And finally, nowadays anyone can register a free domain name and set up an email on it. This gives you a unique, personalized, and valid email address.</p>
<h3 id="heading-the-implications-for-developers">The implications for developers</h3>
<p>In short, there is no way to be completely sure that we can trust a given email. But these are some practices that can reduce abnormal use of an email address:</p>
<p><strong>1.</strong> Do you store emails as primary IDs in the database, but want to disallow users from registering on your service multiple times? If so, you can use <a target="_blank" href="https://www.npmjs.com/package/normalize-email">a library like this</a> to normalize email addresses before storing them as IDs. <a target="_blank" href="https://www.npmjs.com/package/normalize-email">This library</a> removes dots and plus-sign endings according to different well-known email providers, changes the address to lowercase, and fixes domain names to a single form (googlemail.com → gmail.com).</p>
<p><strong>2.</strong> If you use libraries that normalize email addresses, let users keep their email address in the form it was originally entered. For example, if a user registers on your service with <strong>username+bank@googlemail.com</strong>, make sure that all the emails are sent only to that address. Don’t send to the “normalized” <strong>username@gmail.com</strong> address.</p>
<p><strong>3.</strong> To detect disposable email addresses, you can use open-source libraries like <a target="_blank" href="https://www.npmjs.com/package/disposable-email">this</a>. You can also rely on the services which provide APIs to validate email addresses. There are <a target="_blank" href="https://github.com/ivolo/disposable-email-domains/blob/master/index.json">more than 2,000 domains</a> in the list!</p>
<p>I hope you learned something new by reading this article. If you like it, let it spread over Medium by pressing on the “clap” button as many times as you will ? .</p>
<p>Thank you for reading!</p>
 ]]>
                </content:encoded>
            </item>
        
            <item>
                <title>
                    <![CDATA[ How to prevent your analytics data from being blocked by ad blockers ]]>
                </title>
                <description>
                    <![CDATA[ TL;DR (updated 2021) You can now use dataunlocker.com service, which is a fully managed solution for fixing ad blockers' impact on the client-side analytics tools such as Google Analytics. Log in to DataUnlocker Admin to complete the quick 3-step set... ]]>
                </description>
                <link>https://www.freecodecamp.org/news/save-your-analytics-from-content-blockers-7ee08c6ec7ee/</link>
                <guid isPermaLink="false">66b99b799bb332ccb182f7f1</guid>
                
                    <category>
                        <![CDATA[ analytics ]]>
                    </category>
                
                    <category>
                        <![CDATA[ big data ]]>
                    </category>
                
                    <category>
                        <![CDATA[ JavaScript ]]>
                    </category>
                
                    <category>
                        <![CDATA[ startup ]]>
                    </category>
                
                    <category>
                        <![CDATA[ Web Development ]]>
                    </category>
                
                <dc:creator>
                    <![CDATA[ Nikita Savchenko ]]>
                </dc:creator>
                <pubDate>Fri, 28 Apr 2017 22:45:56 +0000</pubDate>
                <media:content url="https://cdn-media-1.freecodecamp.org/images/1*ZKUrBpg1NORp8sGn7OrIjw.jpeg" medium="image" />
                <content:encoded>
                    <![CDATA[ <blockquote>
<p>TL;DR (updated 2021) You can now use <a target="_blank" href="https://dataunlocker.com/">dataunlocker.com</a> service, which is a fully managed solution for fixing ad blockers' impact on the client-side analytics tools such as Google Analytics. Log in to <a target="_blank" href="https://admin.dataunlocker.com/">DataUnlocker Admin</a> to complete the quick 3-step setup of your web application or website.</p>
<p>The article below from 2017 explains some principles used behind the <a target="_blank" href="https://github.com/dataunlocker/save-analytics-from-content-blockers">solution</a>, as well as it is described in the solution's <a target="_blank" href="https://github.com/dataunlocker/save-analytics-from-content-blockers#readme">readme</a>.</p>
</blockquote>
<p>When your product is just getting started out, every single user matters. So does the data about how they interact with your product.</p>
<p>If you’ve tried using analytics solutions like <a target="_blank" href="https://www.google.com/analytics/">Google Analytics</a>, you may have faced an issue where your analytics collection was blocked by ad blockers.</p>
<p>According to <a target="_blank" href="https://pagefair.com/">PageFair</a>, <a target="_blank" href="https://pagefair.com/blog/2017/adblockreport/">up to 30%</a> of Internet users use ad blockers in 2017, and this number is constantly growing.</p>
<p>This article will explain some technical approaches you can take to prevent ad blockers from also blocking your analytics. We’ll use <a target="_blank" href="https://www.google.com/analytics/">Google Analytics</a> in this article, though much of this could be applied to other analytics tools.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/bqQCPzK4HaXeuneWOAyXPSaN9iLBFPq6cVJ8" alt="Image" width="600" height="400" loading="lazy"></p>
<h3 id="heading-some-ways-you-can-bypass-ad-blockers">Some ways you can bypass ad blockers</h3>
<p>Almost all ad blockers work through the same methods: they disallow some http(s) browser requests for content at URLs that match a certain mask from their filtering base.</p>
<p>Most ad blockers blacklist <a target="_blank" href="http://www.google-analytics.com">www.google-analytics.com</a> by default, and block any attempts by the <a target="_blank" href="https://developers.google.com/analytics/devguides/collection/analyticsjs/">Google Analytics JavaScript library</a> to send or retrieve the data from its analytics servers.</p>
<p>Luckily for developers, ad blockers don’t block requests to <em>our own domain names</em> by default, because doing this may hurt the web application’s functionality. This gap reveals a way to avoid analytics blocking until your web service become well-known enough for some of its URLs appear in ad blocker filters.</p>
<p>In fact, even after some URLs appear in the content filtering base, you can start playing with ad blockers by inventing terrible things, such as hourly changing analytics URLs (though this is beyond the scope of this article). Some of these approaches are applied by services like <a target="_blank" href="https://dataunlocker.com/">DataUnlocker.com</a> and <a target="_blank" href="https://adtoniq.io/">Adtoniq</a>, which offer users adblocker-free experience even when ad blockers are turned on.</p>
<h3 id="heading-a-high-level-explanation-of-what-were-going-to-do">A high-level explanation of what we’re going to do</h3>
<p>In this article, we’ll assume that we have no permission restrictions on the server side. We will write the demo solution (a few lines of code) for the Node.js platform. Once you understand how this works, you should be able to port this solution to any programming language or platform.</p>
<p>The solution I’ll describe is pretty minimal, and if you’re an experienced web developer, it may only take you a few minutes to put it in place.</p>
<p>We’re going to use a simple proxying approach without the need to diving into the <a target="_blank" href="https://developers.google.com/analytics/devguides/collection/protocol/v1/">Google Analytics measurement protocol</a>. In short, the solution looks as following:</p>
<ol>
<li>First, <a target="_blank" href="https://www.google-analytics.com/analytics.js">download</a> the Google Analytics JavaScript library itself and host it on your server.</li>
<li>Then alter the code in the downloaded library to change the target host from <em>www.google-analytics.com</em> to your own domain name using find-replace.</li>
<li>Replace the link from the default Google Analytics script in your codebase to modified one.</li>
<li>Create a <a target="_blank" href="https://en.wikipedia.org/wiki/Proxy_server">proxy</a> endpoint to Google Analytics servers on your back end. One important step here is to additionally detect the client’s IP address and write it explicitly in requests to Google Analytics servers to preserve correct location detection.</li>
<li>Test the results. You’re done!</li>
</ol>
<h3 id="heading-the-full-technical-implementation-walkthrough">The full technical implementation walkthrough</h3>
<p>All the code and described steps below are available <a target="_blank" href="https://github.com/dataunlocker/save-analytics-from-content-blockers">on GitHub</a>. The description below explains the method basics, and of course the suggested approach can be improved to be even more “anti-blocking.”</p>
<p>In Google Analytics, you start by <a target="_blank" href="https://support.google.com/analytics/answer/1042508?hl=en">acquiring a unique tracking ID</a> for your property (web service). We will use <em>UA-98253329–1 tracking ID</em> in this article for the demonstration. Don’t forget to replace the tracking code to your one.</p>
<p>Google suggests adding this minified code to your web services to enable analytics:</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">i,s,o,g,r,a,m</span>)</span>{i[<span class="hljs-string">'GoogleAnalyticsObject'</span>]=r;i[r]=i[r]||<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  (i[r].q=i[r].q||[]).push(<span class="hljs-built_in">arguments</span>)},i[r].l=<span class="hljs-number">1</span>*<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>();a=s.createElement(o),m=s.getElementsByTagName(o)[<span class="hljs-number">0</span>];a.async=<span class="hljs-number">1</span>;a.src=g;m.parentNode.insertBefore(a,m)
  })(<span class="hljs-built_in">window</span>,<span class="hljs-built_in">document</span>,<span class="hljs-string">'script'</span>,
<span class="hljs-string">'https://www.google-analytics.com/analytics.js'</span>,<span class="hljs-string">'ga'</span>);
  ga(<span class="hljs-string">'create'</span>, <span class="hljs-string">'UA-98253329-1'</span>, <span class="hljs-string">'auto'</span>);
  ga(<span class="hljs-string">'send'</span>, <span class="hljs-string">'pageview'</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p>In a few words, this code loads the Google Analytics JavaScript library if it wasn’t loaded before by inserting the script tag to the document. This library includes all the logic of analytics collection, and it is the only thing we need to proceed.</p>
<h4 id="heading-step-1-download-and-patch-googles-analytics-library"><strong>Step 1: Download and patch Google’s analytics library</strong></h4>
<p>Download the script directly from <a target="_blank" href="https://www.google-analytics.com/analytics.js','ga'"><em>https://www.google-analytics.com/analytics.js</em></a>, open it with any text editor and replace all occurrences of:</p>
<pre><code>www.google-analytics.com
</code></pre><p>with this exact string:</p>
<pre><code><span class="hljs-string">"+location.host+"</span>/analytics
</code></pre><p>By patching the analytics library in this way, it will start making requests to the local host (<em>my.domain.com/analytics)</em> endpoints instead of <em>www.google-analytics.com</em>. Place this patched <em>analytics.js</em> file on your server after the replacement.</p>
<h4 id="heading-step-2-replace-the-analytics-script-with-the-patched-one"><strong>Step 2: Replace the analytics script with the patched one</strong></h4>
<p>Let’s modify the Google Analytics embedding code in that way so it use our patched library instead of default one:</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">
(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">i,s,o,r</span>)</span>{i[<span class="hljs-string">'GoogleAnalyticsObject'</span>]=r;i[r]=i[r]||<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{
  (i[r].q=i[r].q||[]).push(<span class="hljs-built_in">arguments</span>)},i[r].l=<span class="hljs-number">1</span>*<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>()})(<span class="hljs-built_in">window</span>,<span class="hljs-built_in">document</span>,<span class="hljs-string">'script'</span>,<span class="hljs-string">'ga'</span>);
  ga(<span class="hljs-string">'create'</span>, <span class="hljs-string">'UA-98253329-1'</span>, <span class="hljs-string">'auto'</span>);
  ga(<span class="hljs-string">'send'</span>, <span class="hljs-string">'pageview'</span>);
</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/analytics.js"</span> <span class="hljs-attr">async</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p>Note that here browser will search for the patched analytics script in the document root of your server, in this case, <em>my.domain.com/analytics.js.</em> Check whether you put the script in the document root or changed the path in script tag above. You can also check the results by running a test on your local server (see the <a target="_blank" href="https://github.com/dataunlocker/save-analytics-from-content-blockers#readme">readme</a> for how to run the GitHub example).</p>
<p>You should see something like this <a target="_blank" href="https://developer.chrome.com/devtools">in browser’s developer tools</a>:</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/sgV8TCIqobvskrBN7-fGxVHn3T5z8NPWRtip" alt="Image" width="600" height="400" loading="lazy"></p>
<p>Ultimately we want the act of downloading your patched <em>analytics.js</em> to return a successful response — a 200 (OK) or a 304 (not modified) status. But at this point, the request to <em>my.domain.com/analytics/collect</em> should respond with 404 status, since we haven’t implemented the proxy server yet.</p>
<h4 id="heading-step-3-implementing-the-simplest-proxy-server"><strong>Step 3: Implementing the Simplest Proxy Server</strong></h4>
<p>Now we’re going to code a bit. Our goal is to implement <a target="_blank" href="https://en.wikipedia.org/wiki/Proxy_server">the proxy server</a>, which will transport our analytics requests from our server to the real Google Analytics server. We can do this in many ways, but as an example, let’s use <a target="_blank" href="http://nodejs.org">Node.js</a> and <a target="_blank" href="http://expressjs.com">Express.js</a> with the <a target="_blank" href="https://www.npmjs.com/package/express-http-proxy">express-http-proxy</a> package.</p>
<p>Gathering all the files in the example together (<a target="_blank" href="https://github.com/dataunlocker/save-analytics-from-content-blockers">see GitHub</a>), we should end up with the following JavaScript server code:</p>
<pre><code class="lang-js"><span class="hljs-keyword">var</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">"express"</span>), 
    proxy = <span class="hljs-built_in">require</span>(<span class="hljs-string">"express-http-proxy"</span>), app = express();

app.use(express.static(__dirname)); <span class="hljs-comment">// serve static files from cwd</span>

<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">getIpFromReq</span> (<span class="hljs-params">req</span>) </span>{ <span class="hljs-comment">// get the client's IP address</span>
    <span class="hljs-keyword">var</span> bareIP = <span class="hljs-string">":"</span> + ((req.connection.socket &amp;&amp; req.connection.socket.remoteAddress)
        || req.headers[<span class="hljs-string">"x-forwarded-for"</span>] || req.connection.remoteAddress || <span class="hljs-string">""</span>);
    <span class="hljs-keyword">return</span> (bareIP.match(<span class="hljs-regexp">/:([^:]+)$/</span>) || [])[<span class="hljs-number">1</span>] || <span class="hljs-string">"127.0.0.1"</span>;
}

<span class="hljs-comment">// proxying requests from /analytics to www.google-analytics.com.</span>
app.use(<span class="hljs-string">"/analytics"</span>, proxy(<span class="hljs-string">"www.google-analytics.com"</span>, {
    <span class="hljs-attr">proxyReqPathResolver</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">req</span>) </span>{
        <span class="hljs-keyword">return</span> req.url + (req.url.indexOf(<span class="hljs-string">"?"</span>) === <span class="hljs-number">-1</span> ? <span class="hljs-string">"?"</span> : <span class="hljs-string">"&amp;"</span>)
            + <span class="hljs-string">"uip="</span> + <span class="hljs-built_in">encodeURIComponent</span>(getIpFromReq(req));
    }
}));

app.listen(<span class="hljs-number">1280</span>);
<span class="hljs-built_in">console</span>.log(<span class="hljs-string">"Web application ready on http://localhost:1280"</span>);
</code></pre>
<p>A few last lines here do the proxying. The only trick we do here is instead of just proxying, we detect and append the client’s IP address explicitly in a form of a <a target="_blank" href="https://developers.google.com/analytics/devguides/collection/protocol/v1/parameters#uip">measurement protocol URL parameter</a>. This is required to collect precise location data, because all the requests to Google Analytic originally come from our server’s IP address, which remains constant.</p>
<p>After setting up our server proxy, we can check whether the request to our <em>/collect</em> endpoint now successfully returns a 200 OK HTTP status:</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/rudi5M1aU7DuAx7O4BCM5MQvo7Nt4H4R8pBH" alt="Image" width="600" height="400" loading="lazy"></p>
<p>We can use, for example, an anonymous connection to verify that location is also picked up correctly.</p>
<p><img src="https://cdn-media-1.freecodecamp.org/images/rovmpfmeku6ZNYnxY6-wJkvqaq9aQejAl3GG" alt="Image" width="600" height="400" loading="lazy"></p>
<p>This “proxy server” approach is a fast workaround for analytics that enables your services to avoid ad blockers. But this method relies on the browser side, and if the browser script for some reason does not send analytics information to our servers, we get nothing.</p>
<p>The last possible step if you want to implement a solid solution is to send analytics directly from the server by using server-side libraries available for different languages (<a target="_blank" href="http://github.com/peaksandpies/universal-analytics">NodeJS</a>, <a target="_blank" href="http://github.com/mirumee/google-measurement-protocol">Python</a>, <a target="_blank" href="https://github.com/tpitale/staccato">Ruby</a>, <a target="_blank" href="https://github.com/theiconic/php-ga-measurement-protocol">PHP</a>). This approach will definitely avoid any content blockers, as every request to analytics servers comes directly from our servers.</p>
<p>Again, the demo application is available <a target="_blank" href="https://github.com/dataunlocker/save-analytics-from-content-blockers">on GitHub</a>, feel free to test it! Let me know if you have any feedback or interesting experiences using this approach.</p>
<p>Thanks for reading!</p>
 ]]>
                </content:encoded>
            </item>
        
    </channel>
</rss>
