4elements, Amsterdam, Holland

  1. The Beginners Guide to WooCommerce: Adding a New Order Part 3

    Managing and keeping a track of all the orders has now become quite easy with WooCommerce. I have explained in my previous articles how you can not only manage but also create a new order manually. In the previous article I discussed some of the sections which are to be configured in case you are creating the order manually. Today, I will be wrapping up the portion of Orders in WooCommerce by completely adding the manual order. 

    After dealing with the Download Product Permissions meta box, you will find some meta boxes which are displayed towards the right side of the page. These sections are for Order Actions, Order Totals, and Order Notes. Let's discuss each of these separately.

    Order Totals

    Order Totals

    I will explain order actions at the very end. Let's start with Order Totals. When I discussed the section of Order Items in my previous article I explained how this section can be used to add different products in an order, and then I explained how you can edit the various fields of Total and Tax for every added product. So if there are multiple items in an order and different tax rates are being applied, it becomes difficult to calculate the total amount which the customer will have to pay. All of this is maintained by the section of Order Totals. It not only keeps a record of the total price of the order but also calculates the total amount of applied taxes.

    There are two ways to find Order Totals:

    1. The first way is to enter all these rates manually and then click the Calculate Total and Calculate Tax buttons.
    2. The second way is to click the Calculate Total and Calculate Tax buttons directly once you enter the items. This will automatically sum all the amounts for you.

    Apart from the automatic settings there are some fields which can be edited manually. Let's look at these fields.


    Add shipping cost

    We now know that for any order there are certain shipping costs and handling costs. So if you want to apply any of these then click the option of Add shipping cost.

    Shipping Method

    Click it and a sub-section will appear from where you can configure the fields for name of shipping, shipping method and the shipping rate. You can repeat this process to add multiple shipping costs if you want to.


    Add tax row

    This section allows you to enter taxes which you want to apply on a particular order. Click Add tax row to configure all these fields.

    Taxes configuration

    Select the tax rate and fill the fields of Sales Tax and Shipping Tax.

    Order Discount

    Order Discount

    In this field you can enter the discount rate which you will offer to your customers after the applied taxes. For example, if the order total was $75 and I entered 5 in Order Discount, then the total would be $70.

    Order Total 

    Order Total

    When you click Calculate Total, this field gets filled with the total price of an order with taxes. If you want to enter a custom total amount, enter it manually in this field.

    Order Notes

    Order Notes section

    This section allows you to add notes, either for your own personal use or to send as messages to your customers. This can become a swift mode of communication between you and your customers. To add any note, simply choose the type: Customer note or Private note. Then type in the message and click the Add button.

    Order Note saying The order is completed

    All the created notes are displayed in the form of chat boxes which are purple in color. Customers can view these notes via emails, whereas online store owners can view them directly from the edit order page.

    Order Actions

    Order Actions

    Let's repeat the process before we jump into the explanation of Order Actions. When you click the Add New button to create a manual new order, first you fill out various meta boxes which are for the order's basic details, items/products and custom fields if required. Then you add relevant notes if necessary, set the order status and finally calculate the total. Once you are done with all these tasks, click the button for Save Order, which obviously saves the order, or Move to Trash if you want to discard the order.

    After this process you can choose to apply particular Order Actions which are present in the form of a dropdown menu at the top of the right side meta boxes. Whichever action you choose, it will generate an email which is sent to the customer informing him or her about the order and the amount which is due. Let's look at what these actions are:

    Order Actions dropdown menu
    • New order: Generates an email in response to an entirely new order. So when you are done creating an order, manually select the New Order option and click send (circular arrow icon) next to the dropdown.
    • Processing order: If the order status is processing then choose this action and click the send button. It will email a Thank You note, informing the customer that the order is being processed.
    • Completed order: When the order is complete and you have shipped the order, select Complete order to generate an email and click the send icon. This will send an email to the customer saying that the order has been completed. 
    • Customer invoice: This option generates an invoice of the order and sends it to the customer via an email.
    • Generate Download Permissions: This will send an email containing the downloadable link of the purchased product.  
    Apply icon for Order Actions

    To apply any order action, select the desired action and then click the send icon which is displayed right next to Actions.


    With this article ends the section of Orders in WooCommerce. I tried to explain all the tiny settings in this part of the plugin. If you have any problems or queries regarding the management and handling of orders then you may comment in the box below.



    Leave a comment › Posted in: Daily

    1. Render an SVG Globe

      Final product image
      What You'll Be Creating

      In this tutorial, I will be showing you how to take an SVG map and project it onto a globe, as a vector. To carry out the mathematical transforms needed to project the map onto a sphere, we must use Python scripting to read the map data and translate it into an image of a globe. This tutorial assumes that you are running Python 3.4, the latest available Python.

      Inkscape has some sort of Python API which can be used to do a variety of stuff. However, since we are only interested in transforming shapes, it’s easier to just write a standalone program that reads and prints SVG files on its own.

      1. Format the Map

      The type of map that we want is called an equirectangular map. In an equirectangular map, the longitude and latitude of a place corresponds to its x and y position on the map. One equirectangular world map can be found on Wikimedia Commons (here is a version with U.S. states).

      SVG coordinates can be defined in a variety of ways. For example, they can be relative to the previously defined point, or defined absolutely from the origin. To make our lives easier, we want to convert the coordinates in the map to the absolute form. Inkscape can do this. Go to Inkscape preferences (under the Edit menu) and under Input/Output > SVG Output, set Path string format to Absolute.

      Inkscape preferences

      Inkscape won’t automatically convert the coordinates; you have to perform some sort of transform on the paths to get that to happen. The easiest way to do that is just to select everything and move it up and back down with one press each of the up and down arrows. Then re-save the file.

      2. Start Your Python Script

      Create a new Python file. Import the following modules:

      You will need to install NumPy, a library that lets you do certain vector operations like dot product and cross product.

      3. The Math of Perspective Projection

      Projecting a point in three-dimensional space into a 2D image involves finding a vector from the camera to the point, and then splitting that vector into three perpendicular vectors. 

      The two partial vectors perpendicular to the camera vector (the direction the camera is facing) become the x and y coordinates of an orthogonally projected image. The partial vector parallel to the camera vector becomes something called the z distance of the point. To convert an orthogonal image into a perspective image, divide each x and y coordinate by the z distance.

      At this point, it makes sense to define certain camera parameters. First, we need to know where the camera is located in 3D space. Store its x, y, and z coordinates in a dictionary.

      The globe will be located at the origin, so it makes sense to orient the camera facing it. That means the camera direction vector will be the opposite of the camera position.

      It’s not just enough to determine which direction the camera is facing—you also need to nail down a rotation for the camera. Do that by defining a vector perpendicular to the cameraForward vector.

      1. Define Useful Vector Functions

      It will be very helpful to have certain vector functions defined in our program. Define a vector magnitude function:

      We need to be able to project one vector onto another. Because this operation involves a dot product, it’s much easier to use the NumPy library. NumPy, however, takes vectors in list form, without the explicit ‘x’, ‘y’, ‘z’ identifiers, so we need a function to convert our vectors into NumPy vectors.

      It’s nice to have a function that will give us a unit vector in the direction of a given vector:

      Finally, we need to be able to take two points and find a vector between them:

      2. Define Camera Axes

      Now we just need to finish defining the camera axes. We already have two of these axes—cameraForward and cameraPerpendicular, corresponding to the z distance and x coordinate of the camera’s image. 

      Now we just need the third axis, defined by a vector representing the y coordinate of the camera’s image. We can find this third axis by taking the cross product of those two vectors, using NumPy—np.cross(vectorToList(cameraForward), vectorToList(cameraPerpendicular)).

      The first element in the result corresponds to the x component; the second to the y component, and the third to the z component, so the vector produced is given by:

      3. Project to Orthogonal

      To find the orthogonal x, y, and z distance, we first find the vector linking the camera and the point in question, and then project it onto each of the three camera axes defined previously:

      A point being projected onto the three camera axes

      A point (dark gray) being projected onto the three camera axes (gray). x is red, y is green, and z is blue.

      4. Project to Perspective

      Perspective projection simply takes the x and y of the orthogonal projection, and divides each coordinate by the z distance. This makes it so that stuff that’s farther away looks smaller than stuff that’s closer to the camera. 

      Because dividing by z yields very small coordinates, we multiply each coordinate by a value corresponding to the focal length of the camera.

      5. Convert Spherical Coordinates to Rectangular Coordinates

      The Earth is a sphere. Thus our coordinates—latitude and longitude—are spherical coordinates. So we need to write a function that converts spherical coordinates to rectangular coordinates (as well as define a radius of the Earth and provide the π constant):

      We can achieve better performance by storing some calculations used more than once:

      We can write some composite functions that will combine all the previous steps into one function—going straight from spherical or rectangular coordinates to perspective images:

      4. Rendering to SVG

      Our script has to be able to write to an SVG file. So it should start with:

      And end with:

      Producing an empty but valid SVG file. Within that file the script has to be able to create SVG objects, so we will define two functions that will allow it to draw SVG points and polygons:

      We can test this out by rendering a spherical grid of points:

      This script, when saved and run, should produce something like this:

      A dot sphere rendered with perspective

      5. Transform the SVG Map Data

      To read an SVG file, a script needs to be able to read an XML file, since SVG is a type of XML. That’s why we imported xml.etree.ElementTree. This module allows you to load the XML/SVG into a script as a nested list:

      You can navigate to an object in the SVG through the list indexes (usually you have to take a look at the source code of the map file to understand its structure). In our case, each country is located at root[4][0][x][n], where x is the number of the country, starting with 1, and n represents the various subpaths that outline the country. The actual contours of the country are stored in the d attribute, accessible through root[4][0][x][n].attrib['d'].

      1. Construct Loops

      We can’t just iterate through this map because it contains a “dummy” element at the beginning that must be skipped. So we need to count the number of “country” objects and subtract one to get rid of the dummy. Then we loop through the remaining objects.

      Some country objects include multiple paths, which is why we then iterate through each path in each country:

      Within each path, there are disjoint contours separated by the characters ‘Z M’ in the d string, so we split the d string along that delimiter and iterate through those.

      We then split each contour by the delimiters ‘Z’, ‘L’, or ‘M’ to get the coordinate of each point in the path:

      Then we remove all non-numeric characters from the coordinates and split them in half along the commas, giving the latitudes and longitudes. If both exist, we store them in a sphereCoordinates dictionary (in the map, latitude coordinates go from 0 to 180°, but we want them to go from –90° to 90°—north and south—so we subtract 90°).

      Then if we test it out by plotting some points (svgCircle(spherePlot(sphereCoordinates, radius), 1, '#333')), we get something like this:

      A dot rendering of national and state borders

      2. Solve for Occlusion

      This does not distinguish between points on the near side of the globe and points on the far side of the globe. If we want to just print dots on the visible side of the planet, we need to be able to figure out which side of the planet a given point is on. 

      We can do this by calculating the two points on the sphere where a ray from the camera to the point would intersect with the sphere. This function implements the formula for solving the distances to those two points—dNear and dFar:

      If the actual distance to the point, d1, is less than or equal to both of these distances, then the point is on the near side of the sphere. Because of rounding errors, a little wiggle room is built into this operation:

      Using this function as a condition should restrict the rendering to near-side points:

      Dot globe only displaying points on the near side of the planet

      6. Render Solid Countries

      Of course, the dots are not true closed, filled shapes—they only give the illusion of closed shapes. Drawing actual filled countries requires a bit more sophistication. First of all, we need to print the entirety of all visible countries. 

      We can do that by creating a switch that gets activated any time a country contains a visible point, meanwhile temporarily storing the coordinates of that country. If the switch is activated, the country gets drawn, using the stored coordinates. We will also draw polygons instead of points.

      Solid rendering of the entirety of all visible countries

      It is difficult to tell, but the countries on the edge of the globe fold in on themselves, which we don’t want (take a look at Brazil).

      1. Trace the Disk of the Earth

      To make the countries render properly at the edges of the globe, we first have to trace the disk of the globe with a polygon (the disk you see from the dots is an optical illusion). The disk is outlined by the visible edge of the globe—a circle. The following operations calculate the radius and center of this circle, as well as the distance of the plane containing the circle from the camera, and the center of the globe.

      2D analogy of finding the edge of the visible disk

      The earth and camera (dark gray point) viewed from above. The pink line represents the visible edge of the earth. Only the shaded sector is visible to the camera.

      Then to graph a circle in that plane, we construct two axes parallel to that plane:

      Then we just graph on those axes by increments of 2 degrees to plot a circle in that plane with that radius and center (see this explanation for the math):

      Then we just encapsulate all of that with polygon drawing code:

      We also create a copy of that object to use later as a clipping mask for all of our countries:

      That should give you this:

      Rendering of the visible disk

      2. Clipping to the Disk

      Using the newly-calculated disk, we can modify our else statement in the country plotting code (for when coordinates are on the hidden side of the globe) to plot those points somewhere outside the disk:

      This uses a tangent curve to lift the hidden points above the surface of the Earth, giving the appearance that they are spread out around it:

      Lifted portions of countries on the far side of the globe

      This is not entirely mathematically sound (it breaks down if the camera is not roughly pointed at the center of the planet), but it’s simple and works most of the time. Then by simply adding clip-path="url(#clipglobe)" to the polygon drawing code, we can neatly clip the countries to the edge of the globe:

      Final product with all countries clipped to the visible disk

      I hope you enjoyed this tutorial! Have fun with your vector globes!

      Another globe rendering



      Leave a comment › Posted in: Daily

    1. Get Started Building Your Blog With Parse.js: Refactor

      Final product image
      What You'll Be Creating

      In the previous six sessions, you’ve built a blogging system from the ground up. Everything’s working, and that’s great! However, the code itself is quite messy—we’ve been bootstrapping things together and left a lot of repetitive code and temporary solutions behind. This session is going to focus on how you can clean things up and fix a few issues we’ve been having.

      1. Merge index.html and admin.html

      First of all, since we have a router now (if you missed that session, check out Part 5: Router), we no longer need two separate .html and .js files. Let’s merge them together.

      Step 1: Merge Files

      At this point, I would suggest merging admin.html and admin.js and renaming them as index.html and blog.js because they have more logic and code, but you can do it either way. This should be fairly simple.

      If you are renaming the files, just make sure you link to blog.js in the new index.html (previously admin.html). Also, remember to copy over #blogs-tpl from the old index.html file to the new one and copy over BlogsView from the old blog.js file to the new one.

      Now visit http://localhost/your-directory/ and you should be seeing the login screen by default (or the admin screen if you are logged in already).

      rename admin page

      Step 2: Update Router

      Then, we can add a new URL pattern in the router to match the root URL to a new function; we can call it index():

      This index() function should render what’s previously on the homepage.

      And to see it work, let’s default redirect to that URL when the router starts:

      Step 3: Update Nav

      The next thing is to update the navigation bar on the top. Let’s change those HTML files to URLs here:

      And for those to work, we need to add an event to .blog-nav-item to use blogRouter.navigate() rather than the default link event:

      And let’s add logic to toggle the .active class, too:

      Now if you click around, everything should be working!

      2. Merge Add and Edit

      Moving on, we can see AddBlogView and EditBlogView are pretty similar. So are update() and create() function in the Blog class. Let’s merge those as well.

      Step 1: Merge #add-tpl and #edit-tpl

      First, let’s merge the two templates in index.html to be #write-tpl.

      You can see that it’s basically #edit-tpl with class name changes and a dynamic form title. We will just pass "" into title and content when adding a new blog.

      Step 2: Merge update() and create() Functions

      Next, let’s merge the update() and create() functions in the Blog class. We can chain this.set().save() functions for both update() and create(). For the fields that don’t need to be touched by the update() function, we can fill with the current value:

      Step 3: Merge AddBlogView and EditBlogView

      Now, it’s time to merge the two views:

      Notice how you can use if(this.model) to pivot between add and edit functions.

      Step 4: Update Router

      Finally, let’s link to this new WriteBlogView in the router. Just change both views to WriteBlogView and it should still be working as usual.

      Notice that you should also send visitors back to the login page if they are not logged in.

      3. Add Access Control List to Blogs

      Now that we’ve taken out all the repetitive code, we can now move on to some of the features we can improve on.

      Many of you have asked how we can keep the data safe if the API is in the code. Parse.js provides both class-level and item-level Access Control Lists (ACLs) to help manage user access. We’ve talked about class-level ACLs in Part 3: User Login. Today, I will show you how to add an item-level ACL.

      As an example, let’s assume we want every blog only to be editable by its original author.

      To make that happen, we need to set the ACL field in the update() function:

      4. Root and Static URL

      Another issue that many of you may feel is that it’s quite hard to test the blog system you are creating. Every time you test, you have to go back to http://localhost/your-directory/ to trigger the router.

      Let’s solve this problem first.

      Step 1: Add a Root in BlogRouter.start()

      Parse.js makes it quite easy to do that, so let’s just change the BlogRouter.start() function to set a file root.

      Notice that we can take out the this.navigate() function now.

      Step 2: Static URL

      Another issue with the URLs we have right now is that they can’t be bookmarked or revisited. Everything you want to do, you need to start from the main URL. For example, if you visit http://localhost/blog/admin, the router is set to accept this URL pattern but the server still returns 404. That’s because when you visit /admin, your server doesn’t know it should actually go to index.html to start the router in the first place.

      One way to solve this problem is to configure your server so it redirects all the URLs to index.html. But that’s not really in the scope of this class. We are going to try the other method: add a #/ before all our URLs.

      The URL of the admin panel would look like this: http://localhost/blog/#/admin. It’s not really ideal, but it’s an easy way around. When the browser meets /#, it's not going to treat the rest of the URL as a file path; instead, it will direct the user to index.html, so our Router can pick up the rest.

      Now, let’s go ahead and change the href attribute of all the <a> tags in the index.html from something like this:

      to something like this:

      Similarly, let’s change all the BlogApp.navigate() in blog.js from something like this:

      to something like this:

      You can take out some of the events to use the <a> tag, too.

      For example, the “Add a New Blog” button used to use an event:

      We can take out those and change it to a link in index.html:

      You can also take out this function since the URLs will be working by themselves:

      Let’s also take out the active class for now, but we will add it back and make it work in later sessions in another way.

      Alright, go through your blog, test, and make sure all the links are now to http://localhost/#/... except the homepage.

      Now you have URLs that you can refresh and revisit. Hope this makes your life a lot easier!

      Bonus: Other Fixes and Improvement

      If you don’t mind the super-long tutorial and would like to make a few more improvements, here are a few other fixes and improvements you can do.

      Step 1: Sort

      One thing you might also notice is that the blogs are sorted from the earliest to the latest. Usually we would expect to see the latest blogs first. So let’s change the Blogs collection to sort them in that order:

      Step 2: Redirect to WelcomeView after update()

      Here's another thing we can improve on. Instead of popping out an alert window after updating a blog, let’s just make a redirect to the /admin page:

      Step 3: Merge AdminView in WelcomeView

      If you get into cleaning, you can also merge AdminView and WelcomeView into one—there’s no real need to have two separate views.

      Again, the HTML template first:

      Then let’s change BlogRouter.admin() to pass username to AdminView:

      And then pass down the username to be rendered in #admin-tpl:

      Step 4: $container

      Finally, we can store $('.main-container') as a variable to avoid making multiple queries.

      And just replace all the $('.main-container') with $container.


      First of all, congratulations for making it to the end! It’s been a long session, but you’ve cleaned up the whole project. In addition, you also added ACL to blogs, implemented static URLs, and made a ton of other fixes. Now it’s a really solid project.

      In the next session, we will speed things up and add three new functions: single blog view, delete a blog, and logout, because now you have a good understanding of Parse.js and can move forward much faster. I would recommend thinking about how to write those functions ahead of time so you can test your knowledge a little bit. Other than that, stay tuned!



      Leave a comment › Posted in: Daily

    1. Google I/O 2015 Through My Eyes: Part 1


      6:30 AM, 27th May 2015, Moscone Center, San Francisco

      I arrived early in the morning to find out that queue was already quite long. Most people, including me, had skipped their breakfast to get in first. Luckily I had a grey ribbon card, which meant I was eligible for the shorter queue meant only for press, Google Developer Expert (GDE) and Google Developer Group (GDG) attendees. The longer queue seemed to be growing exponentially around the venue.


      Free donuts, bananas and coffee in the queue were definitely helping. The environment was full of technical buzz, and some reporters had started interviewing people in the queue. Press holders were let in at 8:10 and taken to a press room, whereas we still had time to wait.

      8:30 AM

      We were let in to the center and greeted by the Google Security Team in pink tees. Everyone quickly moved to the keynote arena where we saw probably the widest screen ever made, which resembled a VR headset.


      The room got quickly filled with participants from all over the world. It was amazing to see so many GoPro selfies being taken. Luckily I had a reserved seat in the GDE/GDG Section, which was right beside the press seats. The front row was reserved for the Googlers.

      Soon we saw a giant ping-pong game being played on the wide screen, which was probably the widest display a gamer could ever imagine.


      The room was filled with people talking about Big Data and even the hex codes of the color on the screen. In between the games we saw a big Rube Goldberg animation with kick-#censored# music, which was followed by a whale which the crowd loved.


      09:32 AM

      Almost on time, the presentation got started with a breathtaking video, which took us from the Hubble Deep Space to the planet where Sundar Pichai greeted us to mark the starting of Google I/O.

      The Keynote was full of announcements, which included:

      • HBO on Android PlayStore
      • Android M Developer Preview
      • Project Brillo
      • Weave
      • Google Now on Tap
      • Google Photos
      • Offline YouTube
      • Offline Maps
      • Android Studio 1.3
      • Polymer 1.0
      • JUMP
      • Android Nanodegree
      • AdMob and Google Analytics Integration
      • Google Play Developer Pages
      • Cardboard SDK for iOS and Android
      • VR Expeditions for Students and Teachers
      • Improved Google Loon
      • … and much more

      After the keynote, all the attendees were given a Google Cardboard V2, which had quite a few improvements over its predecessor, like support for phablets, and a better button.

      It was noon already, but I decided to check out the stalls on the top floor before having lunch. I had my full day planned with sessions using the Official I/O Android app.

      Moving out of the arena, there was an Android Wear section on the left and Android Auto section on the right, but what caught my eye was the Google ATAP Arena. Looking like something out of fantasy, this area was full of technologies from a science fiction novel. I watched HELP, which is the first live-action Spotlight story which gave a 3D immersive experience on a mobile phone without a VR. It felt like actually being present at the site of the action. It was such an awesome experience that I recommended almost everyone during and after the I/O to try Google Stories, especially the HELP movie.


      I talked to the team there, and Brian Collins, a Google Engineer working on the project, gave me an excellent demo of the SDK which was used to create a Spotlight Story. He also told me that the Spotlight SDK might get released publicly next year.

      Next I moved to Project Jacquard, which allows you to replace buttons with a cloth surface. It was amazing to use cloth to operate a light bulb and play/pause a song on an Android phone.

      12:52 PM

      Time was passing by, and with less than 10 minutes remaining until my planned session, I quickly went to the ground floor to have lunch. After lunch I went to the “Promote your mobile apps in minutes” session, which focussed on useful insights on user acquisition, subscriber conversion and subscriber retention using Google Search, AdMob, Play, YouTube, etc.

      After the session I took a break and went back to the top floor to continue where I had left. I went to Android Play for families, which is a new section on PlayStore added in this I/O. As the name suggests, it allows us to easily find family-friendly content on PlayStore.

      After an intriguing discussion with the Google Engineers working on Android Play for families, I moved next to the Android for Work section, which solves the problems faced by many companies which use Android in their workflow. Android for Work provides granular control over what’s necessary for a business, and I intend to use it in one of my upcoming projects.

      I then decided to take on the hands-on Codelabs on how to create a gRPC Service using Node.js. It was surprising how much support I received from Google developers, who were very nice and readily offered any kind of help. I enjoyed the Codelabs, and now the whole set of Codelabs are publicly accessible so you can try them yourself.

      The day was almost over and I was so tired of walking around (yes, the center was huge, and the day involved constant walking around to different venues).


      I decided to hang out on the middle floor, which literally had swings and play tools waiting for us. With baskets full of candies, drums full of cans, lots of coffee, ice-cream and so on, it was extremely fulfilling resting in the arena. After some time I decided it was time to get back to my motel which was only two blocks away from the venue.

      6:45 PM

      The day was still not over, and the After Hours party was waiting for us at the nearby Yerba Beuna Gardens. I reached the place at around 6:45 and a long queue was waiting for me. Luckily the queue was moving quite quickly, and I was soon in.


      The party was full of drinks, food, props, live music and a huge merry-go-round karaoke setup.


      After two back-to-back live performances, we had the geekiest DJ party one could ever imagine. Lightsabers and headphones were distributed to everyone. So these headphones had two frequencies which were playing two different tunes, and another tune was being played out loud. So you could choose any of the music and party. The karaoke was also very fun and I sang for over 30 minutes while reading the lyrics, and believe me it was awesome.


      The night ended after I was tired from dancing, eating and singing, which is what one expects from a party. Everyone had a great time at the party. The next day had more surprises waiting for me. So just hang in there, because I will be back with lots of interesting buzz that happened on the second day.



      Leave a comment › Posted in: Daily

    1. Introduction to ProcessWire

      ProcessWire logo


      ProcessWire is a free open source content management system (CMS) and content management framework (CMF). It comes with all the resources needed built in and helps in saving both time and the effort required to put up a live website.

      Though there are a lot of other content management systems and content management frameworks, they usually aren’t that easy to customize. ProcessWire, on the other hand, is fairly customizable for anyone familiar with PHP.

      ProcessWire requires a lot less resources than some other CMS/CMFs, and if you want to save resources on your server or have limitations, you can use ProcessWire.

      What makes it different from other CMSs, you might ask. To put it in one word: “simplicity”. Their website boasts highly of how ProcessWire is simple and easy to use and can be tailored to one’s own needs.

      The name, ProcessWire, has a story behind its origin. You create websites for your clients and the process or workflow is the same for most of them. These processes have been continuously refined to the point where it makes sense to create a product. As such, ProcessWire is a system that keeps these processes bundled together like a wire… simple, organized, secure and fast. Based on a plugin architecture, ProcessWire’s name also reflects the wires that join together these plugins to create new processes.


      ProcessWire runs on Apache, PHP and MySQL. You can find detailed requirements on the website. If you want to set up a local server on your machine using MAMP/WAMP, you can run ProcessWire without any difficulties. You'll need:

      • A Unix or Windows-based web server running Apache
      • PHP 5.3.8 or greater
      • MySQL 5.0.15 or greater 


      If you like to code or can code, then ProcessWire would be a good choice. But if you have no coding skills but want a website, then WordPress would do you fine. WordPress has become popular because it is so well suited to those that want to grab a theme and set up their website. ProcessWire, and its lack of a mature theming model, is simply not the right choice for that use case (for now at least).

      WordPress is the first choice of anyone starting out. Why? Because it is popular and you can find support from a lot of users on support forums. Also there are a lot of users creating how-to videos and tutorials, and most of them are free.

      ProcessWire, on the other hand, is not very popular and caters to only a small community of users. A small community translates into striving for quality over quantity, and it has a different target audience. If you run into a problem, you are likely to get a complete answer from the developer or other knowledgeable users on the ProcessWire forums.

      The core advantage of using ProcessWire is its API. The API is simple, light and fast, and it makes complex tasks very easy and quick to accomplish. Though it will take you more time to program it, once it’s done, the final end product will do exactly what you want and will be easier to maintain in future.

      ProcessWire can be customized by using modules. Modules are basically plugins which will add a specific functionality to your website. 

      The ProcessWire module database can’t be compared with other giants like WordPress, Drupal or Joomla because they have a huge community of developers making plugins. This fact is both good and bad. It's good in the sense that you can always find what you are looking for, but most of the times you will find out that these plugins can break each other. Also you’ll spend some time before you actually find the one that suits your needs. Generally, we try a few plugins before settling on a particular one.

      The ProcessWire module list, on the other hand, has hundreds if not thousands, with clearly marked stable/beta categories. Sometimes you need a specific feature added to your website but that would require you to install two or more plugins to achieve that. In ProcessWire, if you need some functionality you can build it right into the templates. 

      With ProcessWire, all of your content is based on custom fields. It's in the core, the API, and the admin UI. And fields/templates are remarkably simple to set up. With this approach, many of the things you have to resort to using plugins for in WordPress are there by default in ProcessWire. 

      ProcessWire is a lot leaner and faster than WordPress and more customizable, making it the perfect environment for amateurs as well as serious designers and developers, who can use it to easily maintain and publish content.

      The update procedure in ProcessWire is a breeze. It rarely breaks anything or causes conflicts due to version mismatches. On the other hand, in WordPress, every time you update you are at risk of something breaking or causing a conflict with another plugin you have installed. And then you’ll need to either roll back or find the conflict by troubleshooting.


      When it comes to customization and flexibility, ProcessWire has a lot to offer. You can decide what should be displayed on the admin panel. The admin panel of ProcessWire is built as a subset of pages, by which you can change the look and feel easily, and you can create permissions easily for any number of different user types which can be used in the front of the site too.

      ProcessWire uses a hierarchal structure for pages and navigation. You can add as many levels as you like. This makes it easier to create and maintain complex data structures.

      The main block of the ProcessWire structure is simply a Page. There are no sidebars or widgets. Everything can be achieved with a page, as a page may contain different fields to serve a specific function. A page in ProcessWire most often represents a physical page on the web site. But it can also be just a data container for use by other pages.

      All page fields in ProcessWire can be used as custom fields. You can easily create fields as you wish and then use them and achieve the required function.

      ProcessWire is designed around custom fields. This makes it super flexible to your needs and you can create whatever you want.

      You can create templates for your website. Templates are actually PHP files, and different templates serve different purposes on your website. You can use as many templates as you'd like to use on a single page.



      You can create exactly the website you want. You can control the look and feel of your website from front end to back end. You can create the structure as you like and manage the data according to your specs.


      This feature alone is so powerful that you can forget the rest. With a simple line of code you can achieve what you want, no matter how complex the task is. It's powerful and simple.

      Admin UI:

      You can customize the look and feel of the admin panel. The WordPress admin panel looks a lot like that of a blog, whereas ProcessWire's admin UI is more suited to web sites.


      The community is very active, and you are likely to get a response to your question pretty fast.


      ProcessWire has a built in cache and is available for every template as standard. You don’t need to install any additional plugin for this to work. You can also upgrade to a more powerful caching system for a fee.


      Plugins are checked and tested, and you can install and update them without worrying about a crash. There is no destructive interaction between different modules, and you can update without breaking your website.

      Easy to Learn:

      The learning curve for creating templates is much less steep than for WordPress. You can use any of the major CSS frameworks out of the box, and can create your website.



      The community is small compared to WordPress. You can get free how-to videos and articles on nearly every subject about WordPress.


      The number of modules or plugins is small. There are not many developers working for ProcessWire.

      Skill Level:

      If your programming skills are not that great, you are going to find it difficult to go ahead with ProcessWire. You can’t really do much without coding skills.

      Small Developer Base:

      ProcessWire's developer community is small. There are very few developers who know about it. So if you are looking to make a switch, it becomes a little difficult to hire another developer who is familiar with ProcessWire.

      WordPress, on the other hand, has a large community of users and developers, and you can easily find a replacement.


      ProcessWire is a good alternative if you are serious in making a little effort and setting things straight, once and for all. You can make a website for yourself which is easier to maintain and update, and you can worry about publishing content later. A lot of the times we are doing both, troubleshooting the problems as well as pushing content onto the website.

      In this write-up, I have tried to cover its good features and also tried to shed some light upon its shortcomings. And I leave it to you to explore ProcessWire yourself and decide whether switching over to this framework suits you best.



      Leave a comment › Posted in: Daily

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