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. An Introduction to WebDriver Using the JavaScript Bindings

      In this tutorial, we'll take a look at WebDriverJs which is a tool used for browser automation. Chrome will be used throughout however modern browsers tend to have available drivers for use with WebDriver (even mobile) so do check them out if you wish to automate other browsers.

      While unit tests are certainly valuable for modern web applications, at some point, as your application grows, you'll find bugs crop up which weren't caught by a unit test but would have theoretically been caught by an integration/acceptance test. 

      Should you wish to follow a testing strategy which involves browser testing, this guide will give you an initial introduction to testing with WebDriverJs so you're equipped with enough knowledge to get started.

      This tutorial assumes you're familiar with JavaScript and can run JavaScript code using node.js.


      If you'd like to follow along, feel free to checkout this sample project which contains a few WebDriver examples for you to run. You'll also need to install Chromedriver and have it available in your path.

      Selenium WebDriver typically has a server and a client. Apart from WebDriver contributors, most people will only be interested in the client API which allows them to control a browser through their script. To get started, install the JavaScript bindings for WebDriver:

      npm install selenium-webdriver

      Once you've installed that module via NPM, you can require the module in your node code like this:


      Alternatively, if you check out the sample project, you can simply run an npm install inside the folder as the WebDriverJs module is listed as a dependancy in the package.json file.

      While you can browse the official documentation, my personal favourite is the source itself. This webdriver.js file lists many WebDriver methods, e.g. you'll notice a getAttribute and a getText. Here are some methods which may be of interest:

      • get - Navigate the browser to a URL.
      • findElements - Similar to document.querySelectorAll in the browser.
      • executeScript - Execute raw JavaScript onto the current page.
      • getText - Get the text content of an element including its children.
      • isDisplayed - Find out if an element is displayed on the page.


      One factor about the JavaScript bindings for WebDriver in particular is that almost every method is asynchronous. It means the following code doesn't actually get the title of the web page:

      var title = browser.getTitle();
      //logs { then: [Function: then],  cancel: [Function: cancel], isPending: [Function: isPending] }

      Instead what you need to do, is this:

      var promise = browser.getTitle();
      promise.then(function(title) {

      This is because WebDriverJs uses promises in order to make dealing with async code a bit more pleasant. Note that the promise implementation as part of WebDriverJs does not conform exactly to the Promises/A+ standard.

      The key thing to take away here is that most WebDriver methods will return a then method which accepts two optional (function) arguments. The first argument is a callback which may receive a value. 

      In the above example, we asked for a title, therefore our callback will receive that title as its first argument. The second optional function argument we can pass to the then method allows us to catch errors, if at all.


      Let's recap on where we are so far:

      1. We installed the Chromedriver binary.
      2. We installed WebDriverJs via NPM.
      3. With the understanding that almost everything is async, we know how to use promises to retrieve the values we want.

      Have a look at this code example:

      var webdriver = require('selenium-webdriver');
      var browser = new webdriver.Builder().usingServer().withCapabilities({'browserName': 'chrome' }).build();
          console.log('Found', links.length, 'Wiki links.' )

      Run the Wiki example like this:

      $ node Wiki.js
      Found 367 Wiki links.

      In the code example, the first few lines are essentially boilerplate. It initialises the browser object and specifies some initial configuration, like what browser to actually use. Starting with the call to browser.get, we have the code we really care about.

      1. First we navigate to a Wikipedia page.
      2. We construct a CSS selector which matches elements that have an attribute of href and a value starting with /wiki/ (e.g. internal Wiki links).
      3. Still on the same line as step #2, we pass the CSS selector into the findElements method which will go ahead and asynchronously evaluate the selector expression.
      4. To observe updates to the Promise, we pass a callback function to the then method.
      5. The first argument to the callback is an array of matched elements, so we retrieve that and log the length.
      6. Finally, we quit the browser.

      Finding elements on the page is one piece of the puzzle, let's take a look at another example which demonstrates carrying out a Google search and clicking on the result we expect to be on the page.

      * Carry out a Google Search
      "use strict";
      var webdriver = require('selenium-webdriver');
      var browser = new webdriver.Builder().usingServer().withCapabilities({'browserName': 'chrome' }).build();
      function logTitle() {
          browser.getTitle().then(function(title) {
              console.log('Current Page Title: ' + title);
      function clickLink(link) {
      function handleFailure(err) {
          console.error('Something went wrong\n', err.stack, '\n');
      function findTutsPlusLink() {
          return browser.findElements(webdriver.By.css('[href="http://code.tutsplus.com/"]')).then(function(result) {
              return result[0];
      function closeBrowser() {
      browser.findElement(webdriver.By.name('q')).sendKeys('tuts+ code');
      browser.wait(findTutsPlusLink, 2000).then(clickLink).then(logTitle).then(closeBrowser, handleFailure);

      Running the above code:

      $ node GoogleSearch.js
      Current Page Title: Tuts+ Code Tutorials

      A few interesting snippets are shown here. First, we can get a feel for what it's like to use function declarations - instead of anonymous function callbacks (that are passed to then), the result is something like a fluent API (see the last line). Also, since we have the ability to create custom promises (deferreds), we can be as fluent as we desire! 

      Note that we attach an error callback in the last call to then, even if an error occurs earlier on, it'll still propagate up.

      We navigate to the Google home page and search for 'tuts+ code'. Since we're operating on the browser object, WebDriver's internal Control Flow mechanism knows to schedule each command to happen one after the other, this saves us the hassle of having to chain everything together and also explains why there are two calls to findElement, one after the other, without having to be chained to each other.


      When we carry out the Google search from the homepage, no page reload occurs, therefore WebDriver will immediately try and find the elements we've instructed it to on the search results page. Knowing when to wait for elements is a critical part of browser automation. 

      The old and naughty way of doing things was to use a sleep. Since the point at which an element appears can heavily depend on external factors (e.g. network connection speed), developers can sometimes instruct WebDriver to wait for a fixed period of time before continuing. This, of course, is riddled with problems. 

      Fortunately, the wait method makes automating modern web pages a lot nicer. You call wait with two arguments, the first is a function which needs to evaluate to true by a time period defined as the second argument to wait. WebDriver regularly calls your callback until either it returns true, or time has run out in which case an error is thrown.

      Modifying the Browser

      While there are many methods to call on the context of DOM elements, you can also call methods on the browser itself to give you more control over the browser state. Here are a few simple examples to give you a better idea:

      Set the dimensions of the browser window

      browser.manage().window().setSize(1280, 720)

      Connect the browser to a proxy:

      var proxy = require('selenium-webdriver/proxy');
      browser = new webdriver.Builder()
      .withCapabilities({'browserName': 'chrome' })
          http: ''

      You can also read, write, and delete cookies, take a screenshot of the window, set some individual browser settings, and more.

      Alternative Options

      There are a number of options available when wanting to control a browser programatically. First of all, we took a look at the JavaScript bindings for WebDriver however there are some others:

      WebDriverJs, e.g. the version we installed using npm install selenium-webdriver is just one version of a WebDriver Client API written in JavaScript. If you're keen to programatically control browsers via JavaScript, there are also other options:

      • WD.js - Fluent API using promises + chaining.
      • Leadfoot - Now used by the latest version of Intern.
      • WebDriver.io - Has a bunch of documentation for use with BDD/TDD frameworks.
      • Testium - Has clear documentation on exactly what is supported.
      • DalekJS - A fun looking website with pretty feedback when executing tests. A lot of DalekJS has been split out into modules which can be found on Github.
      • Nightwatch - Another tool with pretty looking feedback and a fluent API.
      • Webdriver-sync - Synchronous version of interacting with WebDriver.

      Using something like WD.js or Nightwatch can mean a number of things:

      • Different API to interact with. If the official JavaScript selenium-webdriver bindings has an API you're not used to, check out the alternative options above.
      • Alternative feedback - this can be on the reporter level, but also simply what you see in the terminal after a test has failed locally.


      If you wish to start using WebDriver for the sake of testing, then that's great. You should also keep in mind that browser automation doesn't have to stop at testing, how about just automating a repetitive task? 

      For example, check out this article on Getting to Philosophy,  it essentially explains how continuously clicking on the first link in Wiki articles will eventually land you on the Philosophy article! 

      This makes for a fun task to automate! Checkout out this animated gif or the source to see it in action.  



      Leave a comment › Posted in: Daily

    1. Adding a Custom Product Type in Magento

      Sometimes the available product types just aren’t enough. Magento has the different types pretty well covered, but there’s just situations where it simply makes more sense to have a separate product type. 

      For me, one of those situations was when I needed to create a custom product module that would handle generating a customized PDF based on the options of the product that was purchased.

      Additionally, this is not a solution if you need to create a product with a specific attribute since Magento already provides these features. Instead, you should find this guide handy for when (or if) you need to be able to identify a specific type of product anywhere in the system. 

      For example, like when hooking observers into it.

      Set Up the Module

      This guide is going to assume you have some basic knowledge of the inner workings of a Magento module. Building a good module is a bit of an art on its own and it's the subject matter of a post all its own. With that said, we're going to take a look at how to set up the module for it.

      Now, on to the main point of discussion.

      Like everything in Magento, our work here too starts in the configuration files. We want to create a separate module for this because in Magento, we want separate modules for everything. Keeping things separate and modular in Magento keeps us happy. I ended up with Robogento Printable, Robogento being my company and Printable the module name.

      To add a product type, we have to tell Magento about it and define it. These are the applicable parts of the config.xml file we’re going to need, you will need to fill in the blanks yourself, of course:

                <printable translate="label" module="printable">
                  <label>Printable Product</label>

      There we go. 

      As you can see, my module is defined as “printable”, the label is for the benefit of filtering in the grids that show the product in the backend and when creating a new product. The model and price model are where the fun begins. Every product needs a type, this can be pretty straight forward.

      Extending Magento

      Extend the base system by creating the Type model. Watch the file path based on the class definition:

      class Robogento_Printable_Model_Product_Type
          extends Mage_Catalog_Model_Product_Type_Simple { }

      And there we go. 

      Suddenly our printable product is now a clone of the Simple Product Magento is already aware of. What’s actually happening here is that by extending from the Simple Type, we’re reusing all of the features that product type has. The added benefit is we can very simply override the existing features with our own if we’re so inclined.

      There was one other thing I showed you for our config.xml file. The product type’s price model. Very much the same thing applies here:

      class Robogento_Printable_Model_Product_Price
          extends Mage_Catalog_Model_Product_Type_Price { }

      As you can see, we’re simply extending from Magento’s existing system again. Magento has flaws enough, but the simple and virtual product types were among the better thought out parts of it and it’s always a good idea to reuse existing code when you can.

      Normally, I'd say there's more to it, but in the case of Magento, this is really all there is to it. We’ve now essentially created an alias of the Simple Product system and named it Printable. 

      The printable product will use all of the features and definitions as they are set up for the simple products. So two addresses, inventory settings, you name it If you only need an invoice address, extend from the Virtual product instead. If you want to provide downloadable products, but with a slightly different set of features, extend from the Downloadable system.

      What to Keep in Mind

      Like I said at the start, this is not to create a T-Shirt type in your new Magento store. In that case, you’re most probably looking for the attribute sets in the backend.

      Using this, you'll be able to quickly filter out specific products, be it in the backend or when using other Magento features like observers or collections.



      Leave a comment › Posted in: Daily

    1. Call for Authors: Write For Tuts+!

      We're currently looking for more authors to join our team! Specifically, we're looking for those who have strong web development skills - both front-end and back-end. 

      Of course, this raises the question: what all does this entail when it comes to write for an established, respected, and educational network?

      Depending on on your level of experience, it could mean a variety of different things.

      The Skills We're Looking For

      We aim to publish content on Tuts+ Code that focuses specifically on web development technology. A broad topic, right?

      This includes anything and everything from PHP, Ruby, server-side JavaScript, HTML5, CSS3, document-based database systems, and everything in between. No matter what you're familiar with be it in your day-to-day, your hobby work, or both, we're likely looking to run it.

      After all, our ultimate goal is to help others earn and learn.

      Of course, what's the bottom line for you guys and girls who are interested in writing for us? Take a look at some of the benefits.

      Becoming a Tuts+ Author

      Some of the benefits include:

      • Writing about a topic and educating others about a topic that you're specifically interested in not only furthering your skills, but also in teaching others.
      • Getting your name out into the community especially if you're starting your freelance career.
      • You're an established developer or consultant and are looking to diversify your platform while expanding your writing skills.
      • Establish yourself as an expert in your given field.
      • Collaborate with other authors on topics, projects, and more!

      There are many more benefits that come with this position some of which have kept a number of our authors around for quite some time, and that have lead them into other opportunities, as well!

      Let's Talk Money!

      Down to brass tacks, one of the biggest questions that people have is "How much will I get paid?" Some of our regular authors bill us for $700 USD+ per month for publishing high quality tutorials, several times per month.

      Our rates start at $100 USD per quick tip tutorial and $250 USD per regular tutorial (that is, per article per tutorial). We are willing to discuss rates for higher profile authors and educators, as well.

      If you're a regular author who is consistently hitting deadlines, providing quality content and engaging with readers, you can expect raises and to bill more as you continue to work with us. Earn money from home teaching topics that you love working with a distributed team. Not bad, huh?

      Pitch a Tutorial!

      We'll need the following information from you:

      • Name.
      • A brief paragraph about your background and why you're a good fit.
      • A link to an article that you've written, helped create, or like.
      • Two ideas for tutorials that you'd like to write for us.
      • Examples of your work, either attached images or a link to your portfolio.

      E-mails with just a couple of sentences will be discarded... we want passionate people teaching our passionate readers! Send the above using this form.

      I look forward to hearing from you and can't wait to see what you bring to the table, to work with you, and for helping us to further educate our readers!



      Leave a comment › Posted in: Daily

    1. Unleashing the Power of Magento Newsletters

      Perhaps one of the most overlooked functionality of Magento is its Newsletter feature. Magento is one of very few CMSs which offers built-in user subscription, management and newsletter sending functionality. Properly using these features can save lot of time and money, which would otherwise be spent on integrating third-party applications for these features. 

      Store owners can ask store visitors to subscribe to their newsletter and send them latest and special offers, discount coupons which could result in repeating sales and minimizing marketing cost per sale.

      Effective placement of the user subscription form in the website is the linchpin of any successful email marketing strategy. Some commonly used places for placing subscription form are sidebar and the footer. Some store owners also place this subscription form on prominent places of home page, some even place it in a lightbox. Mentioning some attractive offer for your newsletter subscribers can substantially increase subscribers’ opt-in rate. 

      Creating a Newsletter Template

      Once you have some subscribers in your list, its time to start exploring Magento newsletter feature by first creating a Newsletter template. To create a new template go to Magento admin panel, and from the upper menu hover over ‘Newsletter’ option, from the dropdown, click on ‘Newsletter Templates.’

      On the next page you’ll see all the available templates created so far, and the link to create a new template. As we haven’t created any templates yet, that’s why it is showing ‘No record found’ in the given screenshot. Click on the ‘Add New Template’ link to start creating a new template.

      On the next page you’ll see a detailed form showing various fields to create a new template, as shown in screenshot below.

      • Template Name: In the template name field, enter the name for this template. This name will not be visible anywhere in the emails; so name it the way you want.
      • Template Subject: This will be the default subject of the emails sent using this template. You can edit this subject at the time of sending emails.
      • Sender Name: This name will be shown to users as the sender of the email.
      • Template Content: This is the most important part of the template. You can insert template content here. You can either insert your own HTML here if you have some proficiency in HTML, otherwise you can use WYSIWYG editor to create a simple template for yourself. If you want to create some fancy looking template, I would recommend using either paid newsletter templates from Themeforest, or free templates from Zurb.

      However, if you plan to create your own template, remember to use the best practices of creating email width under 600px, also it should be table-based HTML with inline CSS not because tables are the best elements, but because they transfer best across all clients. 

      Also, while creating your own template, leave the default code shown in content field at the bottom of the email. It’ll generate dynamic unsubscribe link, which is necessary to abide by spam rules.

      • Template Styles: The last field is for inserting template CSS. Though, as mentioned above the best practice is to use inline CSS while creating email templates, however if you want to insert any CSS style separately, this is the place to put it.

      Once you are all done creating this template, make sure to preview your template by using the ‘Preview Template button’ in the upper right corner. Once you are sure you are all set, hit the ‘Save Template’ button.

      Now go back to Newsletter template page, and here you’ll see the template we have just created.

      In the last column of the newsletter template, you’ll see a drop-down to select action for this template. Select ‘Queue Newsletter’ from this drop down.

      Upon selecting ‘Queue Newsletter’ option, a new page will load, similar to template creation page, this time it’ll have two new fields there. One is a select form, where you can select the subscribers from different stores.

      The other option is that of selecting date and time to start the queue.

      The Subject, Sender Name, Sender Email, Message and Styles field will be pre-populated with the template content we just created. You can edit the content here, and click on ‘Save Newsletter’ in upper right corner. Do not forget to preview the email, before saving this newsletter. Once you save this newsletter, it'll be scheduled, you can edit/delete it before scheduled sending time, if needed.

      You can view the queued emails by clicking on ‘Newsletter’ ->‘Newsletter Queue’ from the top menu.

      Here you’ll see all the queued emails.

      At the queue start time, Magento will start sending emails in batches of 15-20. If anything goes wrong while sending these emails, they’ll be reported in Newsletter->Newsletter Problem Reports.

      This was a quick overview of utilizing this built-in feature of Magento. There are plenty of extensions available at Magento connect, which’ll further enhance Newsletter functionality. Some top rated extensions in this regard are Advanced Newsletter by aheadWorks and Advanced Subscribers by apptha

      You can use different extensions to integrate Magento with other newsletter sending applications like MailChimp, and transactional email services like Sendgrid etc.


      On parting thoughts, I would say that coupling this useful feature of Magento with some good extensions can fulfill almost all your Newsletter needs. So, do give Magento Newsletter feature and related extensions a careful look, before you embark on buying some 3rd party Newsletter sending and management application.



      Leave a comment › Posted in: Daily

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