4elements, Amsterdam, Holland

  1. Website Launch Announcement

    DesignScan, Get insight in your website launches their site www.designscan.me

    After 3 years of development, in spare time, DesignScan is excited to announce the launch of their new service and website. The website goes live today, on Monday, June 2, 2014, and is located at: www.designscan.me

    It is time to retake control of your own website. At the newly launched DesignScan.me, instead of endlessly browsing or talking with web design agencies, owners get insight in their own website (Design age, flaws, Usability and others). DesignScan.me features cutting-edge, in-house developed, software that analyses your website design and reports back to the owner in human understandable language.

    DesignScan.me is on a mission to deliver perfect, readable, insights for website owners and to bring the two worlds together, website owners and web- designers, developers. By doing so we pave the way where we provide website owners with the tools and knowhow, and provide the designers and developers with potential new business, clients.


    Our website is divided into three main sections: MADE SCANS, DASHBOARD (after login) and SUPPORT. By moving to a more client-centric layout, we allow visitors to access information based on their own choice rather than sift through everything to decide what is of interest to them.

    In de MADE SCANS section our current and new members will find detailed information about the companies we made designscans for, this is also the place where you can start earning credits by participating in our “Vote & Earn” program. The DASHBOARD area is specially designed for our registered members. A place where your designscan results are shown and explained, in a human understandable language.

    The website will feature new types of rich content, inspired by our experience, gathered materials and a great team of people working for DesignScan.me. You will find this content in the SUPPORT section in the form of articles, case studies, videos, presentations, interactive forum and live email (Free, for members, one-on-one email help).

    We will update our website on a regular basis, with news, events, product launches and new content. We encourage our visitors to visit our website and sign up for our newsletter, the first issue of which will be released at the end of July. As this functionality shall be available within the next two weeks, please keep visiting our website: www.designscan.me.

    If you experience any problems using our website or if you have any suggestions, please contact us at marketing@designscan.me



    Leave a comment › Posted in: Daily Sneak Peak

    1. Securing Your Server Login

      Final product image
      What You'll Be Creating

      Thanks to the growing abundance of useful self-hosted apps such as WordPress and the affordable growth of cloud hosting providers, running your own server is becoming increasingly compelling to a broader audience. But securing these servers properly requires a fairly broad knowledge of Linux system administration; this task is not always suitable for newbies. 

      When you sign up for the typical cloud hosting account, you'll receive an email with a root account, password, and IP address, and instructions to sign in via SSH on port 22. But it's important to take several additional steps beyond the basic access configurations. That first root password below is actually just the starting point for security. There's much more to do.

      Typical new Linux credentials with root login and password

      This tutorial will provide an overview of common incremental approaches to secure your typical Linux server.

      Approaches to Server Security

      For purposes of this tutorial, I'm using a new Ubuntu 14.04 droplet from Digital Ocean with the LAMP configuration; if you wish to follow along with the same configuration, example configuration steps are explained here

      Once you map your chosen domain name, you're ready to begin. I'm using http://secure.lookahead.io for my example.

      You can log in to your server with SSH: ssh root@secure.lookahead.io. The server should require you to change your password during the first login attempt:

      Change your password at first unix login

      Now, the rest is up to you. Here are a handful of common approaches to improving your server's login security:

      1. Update Your System Components

      Firstly, it's important to regularly update your Linux system components. Typically, when you log in, Ubuntu will tell you how many packages you have that need to be updated. The commands to update your packages are:

      sudo apt-get update
      sudo apt-get dist-upgrade

      The recent Shellshock security vulnerability revealed in Bash is a perfect example of the need to regularly update your system files.

      Each time you log in, Ubuntu will tell you if there are packages and security updates that can be updated.

      If you wish, you can activate unattended upgrades:

      sudo apt-get install unattended-upgrades
      sudo dpkg-reconfigure unattended-upgrades

      2. Change Your SSH Port From the Default

      Leaving SSH access on port 22 makes it faster and easier for hackers to target your servers. Let's change the default SSH port to something more obscure.

      Edit the SSH configuration file:

      sudo nano /etc/ssh/sshd_config

      Change to a different port number, e.g.:

      # What ports, IPs and protocols we listen for
      Port 33322

      Restart SSH:

      sudo service ssh restart

      Then, log out and try to log in again. You should see this error message:

      ssh root@secure.lookahead.io
      ssh: connect to host secure.lookahead.io port 22: Connection refused

      This time, use the following SSH command, changing the port to 33322: ssh -p 33322 root@secure.lookahead.io. You should be able to log in successfully.

      3. Activate a Firewall

      Using a firewall can help block access to ports left unnecessarily open and close attack vectors; it can also help with logging attempted intrusions.

      If you happen to be using Amazon AWS cloud services, there's a nice web user interface for its firewall called security groups. The console for AWS security groups makes it easy to turn off access to all ports except your new chosen SSH port and port 80 for web browsing; you can see a visual example of this here:

      Amazon AWS Security Group Inbound Rules

      If you wish to implement Linux-based firewalls, you can study ufw and iptables. While it's beyond the scope of this tutorial, I will give a brief example of using ufw, the "uncomplicated firewall". 

      First, we'll enable ufw and then allow access for our SSH port 33322 as well as all http traffic, on port 80. Then, we'll deny access on the standard SSH port 22.

      sudo ufw enable
      sudo ufw allow 33322
      sudo ufw allow http
      sudo ufw deny 22
      sudo ufw status

      Be careful configuring ufw, as you can lock yourself out of an existing console session and your entire server.

      If you wish to go deeper, port knocking provides a way to more fully obscure your SSH access port. There is a detailed tutorial for advanced users by Justin Ellingwood: How to Use Port Knocking to Hide Your SSH Daemon from Attackers.

      4. Change Your Root Login Name

      Now, let's eliminate the root login user (or ubuntu on some systems) and customize the administrator's login.

      We'll add a user named "hal". Replace "hal" with your preferred username in the examples below:

      sudo adduser hal

      Add your new user to the sudo group for administrators:

      sudo adduser hal sudo

      Add your new user to the sudoers group. Edit the sudoers file:

      sudo nano /etc/sudoers

      Add this line to the sudoers file, in the user privileges section:


      Edit the SSH configuration file again:

      sudo nano /etc/ssh/sshd_config

      Remove the root or ubuntu account from the AllowUsers field. You may also need to add this line if it's not in your configuration file:

      AllowUsers hal

      Make sure PermitRootLogin is off:

      PermitRootLogin no

      Restart the service:

      sudo service ssh restart

      Log out and try to sign in again as root. You shouldn't be able to. Then, try to log in as Hal: ssh -p 33322 hal@secure.lookahead.io. That should work just fine.

      Note that some users may wish to restart SSH, log out, and verify that you can log in as Hal before turning off root login.

      5. Activate Google Two-Factor Authentication

      Now, we're going to add two-factor authentication to your server login; in other words, when we try to log in to the server, we will be required to provide a time-sensitive code from an app on our phone. 

      For this example, we'll use Google Authenticator. Be sure to download Google Authenticator from the iTunes app store or Play store.

      Then, from your server console, install the Google Authenticator package:

      sudo apt-get install libpam-google-authenticator

      Then we'll edit the Pluggable Authentication Module (PAM) for SSH to require two-factor authentication from Google:

      nano /etc/pam.d/sshd

      Add the following line at the top:

      auth required pam_google_authenticator.so

      Then, return to editing the SSH configuration file again:

      sudo nano /etc/ssh/sshd_config

      Change the ChallengeResponseAuthentication to yes:

      # Change to yes to enable challenge-response passwords (beware issues with
      # some PAM modules and threads)
      ChallengeResponseAuthentication yes

      Save the change and activate the authenticator:


      In addition to seeing a large QR code (as shown at the top of this tutorial), you'll also see a set of secret login keys and be asked some questions to customize your configuration:

      Google Authenticator Emergency Scratch Codes

      Using the Google Authenticator app on your phone, choose the edit pen icon in the upper right and add a new entry using the button at the bottom. You can either scan the QR code with your camera or enter the secret key. Once completed, Google Authenticator will be ready to provide codes to you for your next login.

      Print a copy of these emergency scratch codes and save them in a secure location, in case you ever need to recover your login without two-factor authentication.

      Restart the SSH service again and log out:

      sudo service ssh restart

      Log in again, and this time you'll be asked for a verification code before your password. Type in the six-digit verification code from Google Authenticator on your phone:

      Google Authenticator Verification Code Request

      The addition of two-factor authentication adds a strong layer of secondary security to your server. Still, there is more we can do.

      6. Switch to Using SSH Keys for Login

      It's wise to turn off your server's password-based login in favor of security keys; keys are far more resistant to attack. Passwords are short and subject to dictionary attacks; keys are longer and for the most part can only be compromised by government agency supercomputers.

      To create your SSH key, follow these instructions. Change to the home directory for your new user:

      cd /home/hal

      Make an SSH directory and set permissions:

      mkdir .ssh
      chmod 700 .ssh

      Generate a new key pair. When prompted, it's up to you whether to add a password to the key:

      cd .ssh
      ssh-keygen -b 1024 -f id_hal -t dsa

      Add the public key to the authorized_keys file:

      cat ~/.ssh/id_hal.pub > ~/.ssh/authorized_keys

      Set the permissions for the key file:

      chmod 600 ~/.ssh/*

      Move the private key to a temp folder for download to your local computer:

      cp ~/.ssh/* /tmp
      chmod 644 /tmp/*

      Download the new private key to your computer using your Ubuntu account. On your computer, use Terminal:

      scp -P 33322 -i ~/.ssh/id_hal hal@secure.lookahead.io:/tmp/* ~/.ssh

      Set permissions and test:

      cd ~/.ssh
      chmod 400 id_hal
      ssh -p 33322 -i ~/.ssh/id_hal hal@secure.lookahead.io

      If you run into any errors, you can try looking at the log on the AWS server while you attempt to login:

      tail -f /var/log/auth.log

      Remove the temporary key files from the server's tmp directory:

      rm -rf /tmp/*

      Edit the SSH configuration file again:

      sudo nano /etc/ssh/sshd_config

      Turn off Password Authentication:

      PasswordAuthentication no

      Restart the SSH service again:

      sudo service ssh restart

      Now, nobody will be able to log in to your server without your private key. To log in to your server, use the following command:

      ssh -p 33322 -i ~/.ssh/id_hal hal@secure.lookahead.io

      Make sure you secure the computer you're using with the private key on it; it's also wise to store a copy of your private key on a flash drive somewhere physically secure.

      Note that Google Authenticator two-factor authentication is bypassed when using SSH key security.

      Also, if you ever do get locked out of your server during these configurations, DigitalOcean provides a web console that acts as if a keyboard was plugged into your server. For other hosts, you may need to get help from their support team.

      7. Manage Your Application Security

      While the login portal of your server is a serious vulnerability, honestly, the applications you choose to install are likely to pose even bigger risks. For example, recently I read that using improperly secured regular expressions in your PHP app can open your server to ReDoS attacks.

      But a more commonplace example is the recent WordPress plugin vulnerability with Slider Revolution. A theme I had installed actually bundled this plugin, so I had to update the theme to fix the bug.

      Application vulnerabilities can be difficult to keep up on. It can make returning to managed hosting seem attractive again; don't give up! Be careful of apps you install, stay on mailing lists for your code providers and keep everything regularly up-to-date.

      Be proactive, and do what you can to protect your apps. For example, look at how I describe adding Apache user security to the installation of popular web app, PHPMyAdmin, which is used for simplifying MySQL database access and administration. Because only administrators need access to PHPMyAdmin and the consequences of it being hacked are high, adding an additional layer of password security is quite appropriate for this particular app.

      Security is a huge concern and a big area with which to grapple. I hope you've found this tutorial useful. Please feel free to post your own ideas, corrections, questions and comments below. I'd be especially interested in alternate and extended approaches. You can also reach me on Twitter @reifman or email me directly.



      Leave a comment › Posted in: Daily

    1. Factors to Consider in WordPress eCommerce Plugins

      Setting up an online shop has never been easier, with so many options available, one can easily get lost in the maze of plugins that developers launch every single day. 

      So what WordPress options do you have? What should you look out for when setting up a WordPress eCommerce website? Below I have reviewed some of the possible solutions and particular features that make them stand out from the rest.

      WordPress eCommerce Solutions


      First, we have the WooCommerce plugin developed by the WooThemes team. It’s no doubt it is the most popular plugin to date with over 3 million downloads.  The open source plugin provides users with an extensive array of features that make it easy for eCommerce startups to set up online shops with ease and with little to no cost at all.  

      The most unique feature of the plugin is the flexibility it gives to its users: Without having any prior knowledge of the technicalities of setting up an eCommerce website, you can easily do so using this plugin. Through its WordPress-centric user interface, you can easily configure many aspects regarding an eCommerce business including pricing, currency, shipping, emails, and even tax options. 

      The dashboard provides a wide variety of options that deals with all various types of business, leaving you to choose what options that best works for your type of business. 

      Possibly one of the best things from a developer’s perspective would be its vast customizations options: You can select from the various free themes available at the developer’s website and tweak the preset CSS to fit your precise taste and liking. Possessing a vast following of users, independent WordPress theme developers also work on themes that incorporate this plugin as basic core functionality, giving end users a huge variety of themes to select from. 

      You can also extend the functionality of the plugin by purchasing third party extensions that make the plugin even better. Visit the official website for more details about WooCommerce.

      Easy Digital Downloads

      With slightly over 300k downloads and a user star rating of 4.8/5, Easy Digital Downloads is an eCommerce plugin that caters to a specific niche in the market. The plugin is built to cater to an eCommerce site that is focused towards selling digital products. 

      The developer, rather than deciding to include all the features under the sun for a complete eCommerce plugin, opted to deliver specific features that will make selling of digital products much easier.

      Key features include:

      • a cart system for purchasing multiple downloads
      • multiple files per downloadable products
      • complete promotional code system
      • bundled products on one sale
      • complete earnings and sales chart report for your sites
      • ...and many more

      The plugin is open source and one can download it directly via the WordPress plugin repository or the official developer website. Just like most open source plugins in order to realize all the possible functionality, you can purchase all the extensions at a fee. 

      Get Shopped

      Get Shopped is among the first WordPress eCommerce plugins to be released. The plugin has over 2.7 million user downloads to date.  Even though the plugin has faced a number of challenges as user complaints continue to swell by the day with a user star rating 2.8/5, it boasts of having a number of features and tools that an eCommerce website would require.  

      Being in the market for quite a long time it has over time proven its maturity as a WordPress eCommerce platform over other new plugins rocking the market. Some of its features include:

      • Marketing: You can come up with pricing and discount rules and put some particular products you're selling on offer.
      • Shipping: The plugin has integrated UPS, UPPS, and Australia post for real time shipping rates, in case you want to use FedEx you have to buy a premium extension.
      • Managing Orders: You can configure the plugin to generate electronic mail notifications when specific orders are raised by customers, plus receive all the reports about your store in a CSV format.
      • Payment Options: With the free download one can get a PayPal (standard, pro, and express) and Google checkout as the standard payment gateway. You can get additional payment gateways by purchasing extensions .
      • Check out: Get Shopped allows guest checkout, giving customers' option of not registering on the site to buy a product, it also provides the choice of creating an account at the beginning of checkout. Clients are entirely required to check out on one page where it also includes shipping and taxation options.

      There so many WordPress eCommerce plugins out there, looking at them one-by-one in depth may take more than one article, but there some that particularly stand out from the rest. 

      For example: 

      Before I wrap up this particular article, it's important I mention some few key things one should consider when choosing an eCommerce plugin for a WordPress website:

      • What is the type of product you're planning to sell? If, for example, you're just planning to deal with digital downloads or credit deposits, it will be wise you choose a solution that specifically caters for that niche as it may provide better options, and make it easier to quickly set up. 
      • What is your level of technical knowledge? With plugins like WP-eCommerce created with WordPress technical development in mind, this particular solution will best be tweaked by someone with more than just the business knowledge. WooCommerce, on the other hand, comes from a background of those with WordPress themes s a user with basic WordPress knowledge may find his way around. Evaluate your skills and what you need before choosing a specific plugin.
      • How much does it cost? It's important you look at how much you’re willing to spend on a solution, a plugin that will require you spend a lot on extensions and add-ons may prove to be expensive and even difficult to put together. Evaluate and anticipate what you exactly need when your shop is up and running and choose a solution that covers the majority of your needs from just the basic set up.
      • Support, User Reviews, and Updates. A solution that has a good support base will help you tackle difficulties that arise when setting up your shop. From the user reviews one can tell the kind of support he will expect when he uses a certain solution, for example, WooCommerce has been acclaimed as a solution that has an incredible support base from the developers themselves. Updates are key for your site scalability, so find out when the last update was done and how frequent the developer does it before choosing a plugin 


      Its evident that WordPress platform has a lot to offer in the world of eCommerce, some of the plugins are more popular than others, but really it boils down to client preference. Share some of your experiences with this or other plugins. 

      In the next article, we will look at some of the challenges that we face when using WordPress as an eCommerce solutions and how we can over come them.



      Leave a comment › Posted in: Daily

    1. Using Pull Requests as Code Reviews

      When developing software, source control makes our lives so much easier. From tracking our changes to introducing code collaboration, it helps increase our productivity. Furthermore, the fact that there are a number of different tools available - Subversion, Perforce, Mercurial, and so on - make it even better by providing us options from which to choose.

      In this series, we’re looking specifically at Git and using Bitbucket and how they can help us in our day-to-day work. In this article, we’re going to be specifically focused on using Bitbucket for feature discussion, bug tracking, release tagging, and more.

      One of the major features of Git - and, thus, Bitbucket - is the idea of pull requests. In this article, we’re going to be looking at pull requests and how they not only benefit us from a source control standpoint, but from a peer review standpoint, as well.

      A Pull Request Primer

      When someone issues a pull request into your project, it means that they are asking to have their code merged into the codebase. That is, they are requesting that you pull their code into the project.

      But we, as maintainers, have the ability to review, to test, and to merge the changes introduced by the request. Make no mistake: We play a very important role in deciding if the particular request meets both the standards and goals of our software.

      If a discrepancy is found, we can ask the contributor to update the pull request by either cleaning up the code, resolving any outstanding issues, or improving the general quality of the code. On the other hand, we may also reject the pull request if we decide it doesn’t meet whatever criteria we deem necessary for the project.

      In order to issue a pull request, a person must first fork the codebase of the initial project. This means that they take a snapshot of the codebase in its current state, create a set of changes, and then commit the changes to their personal copy of the code. From there, the developer then requests that the change be pulled into the initial repository.

      As previously mentioned, pull requests can consist of any number of things:

      • Bug fixes
      • Translations
      • Feature additions
      • Addition or modification to documentation
      • ...and so on

      Used by teams of all sizes - both in-house and distributed - source control management is a valuable part of developing software. The thing is, when it comes to working with source control systems, users have varying roles of permissions.

      That is to say when it comes to maintaining a repository, some developers will have read-only access while others have both read and write access. And those with write access are the ones who are responsible for maintaining pull requests.

      Bitbucket and Pull Requests

      In this series of articles, we’re taking a look at how Bitbucket can enhance your team’s workflow when it comes to developing software. Just as we’ve previously discussed, Bitbucket allows people to participate in the project both by committing code to it, by reviewing pull requests, and conducting merges of said requests.

      One of the nicest features of Bitbucket is that it allows you to add multiple reviewers to a single pull request who can then approve (or reject) the request. This, in turn, gives those who maintain the repository the ability to review the quality of the code that’s specified in the pull request.

      Perhaps they will welcome the additions to the project, perhaps not. Whatever the case may be, Bitbucket gives maintainers the tools necessary to give feedback on any given pull request.

      Finally, Bitbucket supports inline commenting on each pull request which makes it much easier to discuss a specific line, block, or module of code.

      All in all, this approach makes it much easier to determine whether or not a pull request should be merged, if it should be rejected, or what areas of the could should be changed prior to merging the request.

      Learn by Example

      Fork a Repository

      To get started, visit a project’s dashboard in your web browser, and then click on Fork to fork the repository.

      Next, you will be presented with a form that allows you to specify a custom name and custom description. You also have the ability to set the repository’s visibility and permissions among other features.

      If you’re responsible for the code that’s going to be written and want access to additional tools to make it easier to work with a team around the codebase, then select the Project Management option from the corresponding interface element.

      After clicking on the Fork repository button, you will grab the latest version of the codebase of the project and have it available in a repository that’s all your own. In order to check out the code to your local machine, you can use a Git client such as SourceTree, or you can do so from the command line by issuing the following commands in the local directory where your project is stored:

      $ git clone https://yourusername@bitbucket.org/yourusername/reponame.git

      Notice that the URL that we’ve specified above is visible in the dashboard of your repository in Bitbucket’s dashboard.

      After checking out the code, you can begin working on the project on your local machine. As you introduce changes, you will want to commit this to the repository. To do this, you first stage your work and then you commit your work to the repository.

      Make Your Changes

      At this point, we’re ready to actually get to work. What this means will vary depending on the nature of your project: Perhaps you’re working to close a bug, perhaps you’re refactoring a function, or maybe you’re adding a feature.

      Whatever the case, once the changes have been made, you can issue a commit to the repository. This means that you’re taking the files on which you’ve worked and are combining them into a single collection of changes which is called a changeset. Changesets are normally accompanied by a short message that explains what was changed and why.

      When you commit code, at least at first, you’re not actually pushing anything to the repository. In other words, if this is your first commit, then your code isn’t actually stored online in Bitbucket. Instead, the changes only exist on your local machine. Once you’ve performed your initial push, the code then exists in the repository.

      Ultimately, source control gives a way to maintain a clean history of your changes, as well as an easy way to rollback to a certain point in time.

      Issue a Pull Request

      Once you’ve pushed a change to the remote repository (either via a client or via the command line), you’re ready to initialize a pull request. This means that you’re ready to take code that you’ve pushed into your fork of the codebase and ask the original maintainers if they’ll merge the code into their project.

      Doing this within the Bitbucket application is easy. Simply go to the dashboard of the forked repository, and then click on Create pull request.

      Next, you will be presented with an interface that will allow you to create your pull request. The request will include your repository, the original repository, and a title and description.

      From here, you select your repository as the source repository and the original codebase’s repository as the target repository. You may need to change these within the dashboard depending on your requirements.

      For example, if you’ve named your copy of the code “develop” when issuing the “git add remote” command earlier, but the original codebase uses the word “master,” then you will need to make sure that you’ve selected the proper values.

      Finally, this is where Bitbucket allows you to add reviewers to a pull request. As previously mentioned, this makes it much easier to attract the attention of project maintainers so that they can review your work, offer up any comments that they may have, and merge (or reject) your request.

      Following Up With the Pull Request

      Bitbucket automatically updates your pull request when you push code to the source directory so the project reviewer always gets to see the latest code that they can pull. 

      When the reviewer asks for a specific change, s/he can simply push the requested changes in your copy of the repository - that is, the forked repository.

      Managing Pull Requests

      If you maintain a repository that receives pull requests from others, then you are likely to notice that your repository will receive both a notification in the Bitbucket application dashboard, as well as in your email.

      Additionally, if you’re a reviewer, you will also receive a notification and an email. To manage all incoming pull requests, click on the “Pull requests” link and select the pull request with which you want to work.

      As you can see, Bitbucket provides a clean interface where you can discuss and review pull requests. Both maintainers and viewers can reject, merge, or ask for additional work to be done on a given pull request.

      Assuming that you have a request that’s ready to be merged, then you click on the specific option for doing exactly that. If you happen to work with multiple reviewers, then Bitbucket also makes it clear as to who approved the request by applying a check mark on their avatar. Obviously, the more checks that appear across the reviewers, the more likely the request is ready for merging.

      But what happens if merging the pull request fails? At this point, a manual merge must be done (which is a common part of source code management, though outside the scope of this article), after which the code will be committed to the repository.


      Clearly, source control offers a lot of advantages for teams; however, pull requests are a powerful feature that make it easy to contribute to a project and to have others peer review your code, comment on it, and improve it before merging it into the codebase.

      This alone can help one become a much better developer as you’re learning from the experience of other developers who are maintaining the larger project. If you’re not already, try using pull requests in your workflow to help improve your code, and gather feedback from others.

      Please leave any questions, comments, or other feedback in the comment area below.



      Leave a comment › Posted in: Daily

    1. How to Make Email a Powerful Part of Your Web Application

      My favorite popular productivity tools, iDoneThis and TeamSnippets, give me a simple way to record and share the tasks that I have completed each day with my teammates. Each day, the services send me an email asking me what I completed today. From my email account, I can easily reply with my completed tasks without having to log into the website. Remarkably, a majority of my teammates complete most of their website updates through email replying. 

      You can also create the same powerful functionality with commenting, receiving content via email, and enabling replies to create, continue, and resolve support tickets. With the Inbound Parse Webhook, from SendGrid’s SMTP Service, you can make your applications interactive by inviting replies and responding to users via their email. 

      The SendGrid Parse Webhook lets you parse email contents and attachments from any incoming emails and post the data via JSON to your application. The capability allows you to accomplish the following, from email replies to your website application:

      • Post blog entries
      • Use email replies to update your mailing list or database
      • Upload photos and videos
      • Start and resolve support ticket requests

      Getting Started

      The instructions below are for getting the Inbound Parse Webhook up and running locally. Start by cloning this GitHub repository and cd into its directory:

      $ git clone https://github.com/scottmotte/sendgrid-parse-api-example.git
      $ cd sendgrid-parse-api-example

      Set Up Your Credentials

      $ mv .env.example .env 

      Change the Contents of .env to Your SendGrid Username and Password

      SENDGRID_USERNAME = your_sendgrid_username
      SENDGRID_PASSWORD = your_sendgrid_password 

      Run the Application

      $ npm install 
      $ node app.js 

      If npm install doesn’t work for you, you can try installing through MacPorts

      $ sudo port npm install

      If you are receiving errors that suggest you’re missing a module, this means that you should install it. For example, I received an error that app.js is not able to instantiate the dotenv variable, and after installing dotenv, it resolved the issue altogether.

      $ npm install dotenv

      Setup a Tunnel

      Use a local tunnel like ngrok to test locally and quickly, rather than deploying code to a live server. 

      Ngrok allows you to securely expose a local web server to the web and capture traffic for detailed inspection and replay. Download, unzip, and start the ngrok process. After you start the process, ngrok will give you a unique URL for you to inspect locally on. 

      The instructions below are for getting ngrok to work locally on a Mac. Visit ngrok.com to install a local setup for other operating systems. 

      $ wget https://dl.ngrok.com/darwin_amd64/ngrok.zip
      $ unzip ngrok.zip –d /usr/local/bin
      $ ngrok 3000

      Set Up SendGrid and MX Records

      Note that this can take up to 48 hours. 

      Once your MX records have fully propagated, you can send emails on production in up to 48 hours. 

      First, after your SendGrid account is provisioned, you can set up your SendGrid Parsing Incoming Emails setting. Click on the “Developers” tab for the “Parsing Incoming Emails” link. In the Hostname field, specify your hostname (i.e. yourdomain.com) that you would like. In the URL field, input the unique URL that ngrok gives you. 

      Configure an MX record on the hostname you set above to point to mx.sendgrid.net. It should look something like the following. 

      Now, in two days, your MX records will completely propagate. 

      Send an Email From Your Personal Email Account

      If you send an email to inbound@the-hostname-you-setup.com, in a few minutes, the app you have running will parse and deliver the contents to you in JSON format. 

      Test and Play With the API

      Congratulations, you have set up a simple way to parse your emails efficiently! Now, you are ready to explore and make calls to the API. 

      Inspecting Payload Contents

      If you just need a quick way to inspect the payload contents of the Parse Webhook, you can use RequestBin, a free tool, after setting up your MX records.

      Posting From The Command-Line

      If you’d like to get your hands dirty from the command line, you can try SendGrid’s free webhook debugger tool, which is a fast way to start seeing how events appear. 

      At the heart of the tool is a URL that you can set as your Parse Webhook endpoint. Each time you load the URL, you will get a unique ID within the URL. 

      Below are two examples to get started with your webhook. The GET example will begin listening for new data. From your command-line terminal, paste in the following GET example: 

      $ curl –X GET \ http://hookdebug.sendgrid.com/v1/events/e6a20fffc9c1968dd64684f0b11b9c29 

      To paste in whether your Parse Webhook is receiving data, type in the curl command from the POST example into a second terminal screen:

      $ curl –X POST \
        -d “foo=bar” \
        -d “alice=bob” \ 

      The response on your terminal window should now have new content:

        “event_id”: “e6a20fffc9c1968dd64684f0b11b9c29”

      Next, send an email to the domain or sub-domain that you are using for inbound parsing. Within a few minutes, you should see the parsed email as JSON in your terminal window. 

      Customize Your Parser

      As you can see, the details of email data separation and routing of an incoming message to the SendGrid script are done behind the scenes for you. Starting from scratch, you can use the Parse Webhook in many creative ways. You’re now ready to place some real email data through that webhook! 

      To custom-parse your emails, you can start to customize the code in routes/inbound.js.

      For example, you can rewrite the inbound.js file to store attachments in a way that would suit your application and database or even complete an action if the email contents contain a word. 


      For use cases, case studies and examples, download the Parse Webhook Guide or check out the Parse Webhook API library

      When looking at the Parse Webhook examples, you will notice that the two most common ways it is used are: interacting with your users and collecting data within your applications via email.

      With the webhook, you can develop features that make frequent tasks more productive for your users without having them leave their email inbox. Collecting insights and making your emails interactive have never been easier. 



      Leave a comment › Posted in: Daily

  • Page 1 of 31 pages  1 2 3 >  Last ›
  • Browse the Blog