Growth hacking made easy with exclusive SumoMe offer

Growth hacking is one of those phrases that feels like an annoying buzzword – until you take advantage of its power and become a full-strength convert. We’ve discovered the secret of easy growth hacking thanks to our friends at SumoMe. They know how to turn a website into something epic. Over 200,000 websites use their […]

Continue reading %Growth hacking made easy with exclusive SumoMe offer%


Source: Sitepoint

Monitor and Control Applications Using Supervisor: Part 2

In the first part of this two-part tutorial series, we saw to set up and control Supervisor to work with our web applications. In this part, we will see how we can programmatically control Supervisor processes remotely via the XML-RPC API.

Getting Started

In the previous part, we saw that Supervisor provides a web-based GUI which allows us to remotely control the processes with the help of a few clicks. Below is a screenshot of this GUI for the application we created in the previous part:

Supervisor

A question immediately starts ringing in the brain. What if it were possible to control the Supervisor processes programmatically? This would open up a lot of possibilities where processes can be started or stopped conditionally rather than having them run indefinitely or controlling them manually by clicking buttons or running terminal commands. This is very much possible using the XML-RPC API provided by Supervisor.

The XML-RPC API

The API itself is pretty straightforward and easy to use. We saw that the HTTP server for Supervisor runs on port 9001 by default. The same can be used to connect using any XML-RPC library. In the case of Python, we can simply use the built-in xmlrpclib. Assuming that the Supervisor server runs on http://localhost:9001/:

To check the current state of the Supervisor server, run:

The server daemon can be restarted and stopped by:

Similarly, the list of all available methods can be fetched by:

The API reference provided in the Supervisor documentation is pretty clean and self-explanatory. Going ahead in this tutorial, I will cover an example of how to control the processes based on a condition, and also how we can extend this API in order to implement our own methods.

Controlling Processes Using the API

Lets say we want a start a new process to send an email every time an action is performed by some user. (There are many ways of doing this, and maybe this is not the best one, but I am just using it as an example to demonstrate this). Let’s say the name of this process as defined in supervisord.conf is send_mail.

Similarly, we can also trigger automatic restarting of the supervisord server daemon in case we have a code change in our application.

This API can similarly be applied to countless such instances. 

Extending the XML-RPC API

We can not only use the standard API methods provided by Supervisor but also write our own methods, extending the API by using the XML-RPC interface factories. This can simply be done by adding a new [rpcinterface:x] section in supervisord.conf.

Now I will create a small custom interface for the same in a file named my_interface.py.

Above, I have created a method which when called will retry the process three times in case of failure to start.

Conclusion

In this tutorial series, we learnt how to use Supervisor to monitor and control our applications. We also saw how we can use the Web UI and XML-RPC Interface for the same. Finally, the XML-RPC interface is extended in order to leverage the power of Supervisor to our benefit.


Source: Nettuts Web Development

Stripe vs Braintree: the Ultimate Guide

Stripe vs Braintree

If you’re developing an app that needs to accept payments, you will likely consider Stripe and Braintree as payment providers.

They’re a new breed of full-stack payment companies that are friendly to both businesses and developers. They take care of the nitty gritty like merchant accounts and PCI compliance, and are fairly straightforward to integrate.

An unscientific review hints that Stripe is more popular among developers, with 99 StackOverflow questions in the past month, versus Braintree’s 34. Authorize.net, an older provider, had only 10, illustrating the shift toward new payment companies.

This article compares Stripe and Braintree in depth, to help developers and businesses make an informed decision. I’ve used both providers in production.

PayPal

PayPal acquired Braintree in 2013. Since then, Braintree has made it easier than ever to accept PayPal in a modern web application.

If you use Braintree to accept credit cards, there’s no additional work required to accept PayPal. It’s just another payment method, like Visa or MasterCard. Braintree handles all of the nuances, whether for one-time transactions or subscription payments.

Is accepting PayPal important to your business? If so, there’s a strong case for Braintree.

Stripe currently has no PayPal integration.

Winner: Braintree. It provides the smoothest PayPal integration available for most sites.

Braintree PayPal formBraintree PayPal form

Payment Forms, Front-end

Stripe and Braintree offer pre-built payment forms that you can bring onto your site:

Braintree Drop-in UI is my personal preference. It appears in-line, blending in with your UI. It can also include a PayPal button, allowing the customer to log in to PayPal without leaving your site.

In addition to pre-built forms, both Stripe and Braintree allow you to create your own.

Braintree requires your server to retrieve a one-time client token from Braintree’s API before displaying a payment form, whether using its Drop-in UI or hosted fields (its custom form solution). Stripe doesn’t require your server to retrieve a one-time token before the client renders the payment form, saving a step and likely cutting load time by 1–2 seconds.

Winner: Tie. Braintree provides a better universal payment UI but requires an additional server request that can delay loading by 1–2 seconds.

Braintree vs Stripe formsBraintree form vs Stripe form

Continue reading %Stripe vs Braintree: the Ultimate Guide%


Source: Sitepoint

Build and Publish Your Own Grunt Plugin

Grunt is a widespread and popular task runner for JavaScript. Its architecture is based on plugins that you can combine and configure to create a powerful build system for your web applications. The Grunt ecosystem is huge and offers hundreds of plugins to help you with tedious and repetitive tasks, such as linting, testing, minification, image processing, and so on.

I had a blast building and publishing my Grunt plugin and I’m keen to share with you the experience I’ve gained along the way. I’ll show you how to build your own little Grunt plugin and publish it via the npm package manager.

The plugin we will build in this article will serve as a remedy for so-called typographic orphans — single words on the last line of a paragraph or block element — by replacing the last space with a non-breakable space. This is a quite easy task, but while implementing it, we’ll touch all the relevant subjects, such as setup, best practices, configuration, testing, and publishing.

If you want to get an in-depth knowledge of Grunt’s mechanics or wish to contribute to an existing plugin this article is for you. Before starting, I suggest you to take some time to have a look at the official Getting Started guide and at Etienne Margraff’s article titled How to Grunt and Gulp Your Way to Workflow Automation.

The plugin that we’ll build in this article is available on GitHub. For your benefit, I added tags (called step01step04) to the repository. If you want to follow along with the code at hand just check out the respective tag. For example the command git checkout tags/step02 mirrors the state of the code after section 2.

Continue reading %Build and Publish Your Own Grunt Plugin%


Source: Sitepoint

How to Build Responsive Images with srcset

In this connected world where people have a variety of devices,ensuring your website works seamlessly across all of them is a need, not an option. Your website views won’t come from a single resolution device, or a single form-factor. To cater to all of them, your website needs to be responsive.

If you’re familiar with responsive web design (RWD), you probably know the intricacies that come with a responsive design (and how Bootstrap solves a lot of them!). An important part of a responsive website are responsive images. In this article, we’ll learn more about responsive images on the web and see how to build them.

What is a Responsive Image?

In simple terms, a responsive image is, depending on the device your website is being viewed, an image on that webpagedisplayed in its best form. The term ‘best form’ could mean multiple things:

  • You want to show a separate image asset based on the user’s physical screen size. For example: you want to show a separate image asset on a 13.5 inch laptop and a 5 inch mobile phone (on a maximized browser).
  • You want to show a separate image based on the resolution of the device (or, the device-pixel ratio, which is the ratio of device pixel and CSS pixel).
  • You want to show an image in a specified image format (JPEG XR, for example) if the browser supports it, probably because of the higher compression that format supports.

The building blocks for responsive are included in most modern browser including Microsoft Edge (starting Windows Insider Build 10547). You can view the Web Platform status of features like srcset here.

How to Enable Responsive Images

There are a number of ways to enable responsive behavior of images. One of the older methods (not recommended) is by simple scripting, but this leads to a couple of problems. One, if a script determines which image to download, but the script itself is loaded after the images specified in the HTML have been downloaded, you may potentially end up with two downloaded images. Two, if you don’t specify any image in HTML and want to load only the image as defined by the script, you’ll end up with no image at all for the browsers which have scripting disabled.

Hence, we need a better way to deal with responsive images. And thankfully, there is! The recommended way is to use:

  1. srcset attribute
  2. sizes attribute
  3. picture element

Let’s delve a little deeper.

Continue reading %How to Build Responsive Images with srcset%


Source: Sitepoint

Randomness in PHP – Do You Feel Lucky?

Cryptography Randomness in PHP

This article analyzes problems related to random number generation used for cryptography purposes. PHP 5 does not provide an easy mechanism for generating cryptographically strong random numbers, while PHP 7 solves this by introducing a couple of CSPRNG functions.

What is a CSPRNG?

Quoting Wikipedia, a Cryptographically Secure Pseudorandom Number Generator (CSPRNG) is a pseudo-random number generator (PRNG) with properties that make it suitable for use in cryptography.

A CSPRNG could be mainly useful for:

  • Key generation (e.g. generation of complicated keys)
  • Creating random passwords for new user accounts
  • Encryption systems

A central aspect to keeping a high security level is the high quality of randomness.

CSPRNG in PHP 7

PHP 7 introduces two new functions that can be used for CSPRNG: random_bytes and random_int.

The random_bytes function returns a string and accepts as input an int representing the length in bytes to be returned.

Continue reading %Randomness in PHP – Do You Feel Lucky?%


Source: Sitepoint

Watch: Logo Design Rules of Thumb You Shouldn’t Forget

Coming up with logos can be an exhausting process sometimes.

Should you get paper and pencil ready or dive directly into Illustrator? Before going neck deep into your logo project, check out following thumb rules to keep in mind when working on your logo. You will be learning about basic color theory, cliches and metaphors specifically guiding you in your logo endeavours. Some of these tips can be generally applied to most logo projects, while some others might suit the needs of different logos.

Loading the player…

jwplayer(“video-5824”).setup({
image: “https://d3rj1gznkm47xj.cloudfront.net/de831a64-10d7-43fa-951f-53a8c044954d.png”,
sources: [
{
file: “https://d3rj1gznkm47xj.cloudfront.net/a75ff8e1af2e8256fda1fa5d677314f8.mp4”,
label: “SD”
},
{
file: “https://d3rj1gznkm47xj.cloudfront.net/f79eec43ab3702c0e1889028b430bc0f.mp4”,
label: “HD”
},
],
tracks: [
{
file: “http://djdvv9xnh2mt5.cloudfront.net/1305a320-a964-49bc-8518-7b2f34a8c8ae.srt”,
“default”: true
}
],
aspectratio: “16:9”,
width: “100%”,
height: “480px”,
fallback: true,
primary: “flash”,
streaming: false,
analytics: {
enabled: false,
cookies: false
},
captions: {
back: false,
fontsize: 12
},
advertising: {
client: “googima”,
schedule: {
“myAds”: {
“offset”: “pre”,
“tag”: “https://pubads.g.doubleclick.net/gampad/ads?sz=855x483u0026iu=/7448792/Videou0026cust_params=[post_id]%3Dstaging%26channel%3D[channel]u0026impl=su0026gdfp_req=1u0026env=vpu0026output=xml_vast2u0026unviewed_position_start=1u0026url=[url]/u0026description_url=[description_url]u0026correlator=[timestamp]”
}
}
}
});

Continue reading %Watch: Logo Design Rules of Thumb You Shouldn’t Forget%


Source: Sitepoint

Watch: Logo Design Rules of Thumb You Shouldn’t Forget

Coming up with logos can be an exhausting process sometimes.

Should you get paper and pencil ready or dive directly into Illustrator? Before going neck deep into your logo project, check out following thumb rules to keep in mind when working on your logo. You will be learning about basic color theory, cliches and metaphors specifically guiding you in your logo endeavours. Some of these tips can be generally applied to most logo projects, while some others might suit the needs of different logos.

Loading the player…

jwplayer(“video-5824”).setup({
image: “https://d3rj1gznkm47xj.cloudfront.net/de831a64-10d7-43fa-951f-53a8c044954d.png”,
sources: [
{
file: “https://d3rj1gznkm47xj.cloudfront.net/a75ff8e1af2e8256fda1fa5d677314f8.mp4”,
label: “SD”
},
{
file: “https://d3rj1gznkm47xj.cloudfront.net/f79eec43ab3702c0e1889028b430bc0f.mp4”,
label: “HD”
},
],
tracks: [
{
file: “http://djdvv9xnh2mt5.cloudfront.net/1305a320-a964-49bc-8518-7b2f34a8c8ae.srt”,
“default”: true
}
],
aspectratio: “16:9”,
width: “100%”,
height: “480px”,
fallback: true,
primary: “flash”,
streaming: false,
analytics: {
enabled: false,
cookies: false
},
captions: {
back: false,
fontsize: 12
},
advertising: {
client: “googima”,
schedule: {
“myAds”: {
“offset”: “pre”,
“tag”: “https://pubads.g.doubleclick.net/gampad/ads?sz=855x483u0026iu=/7448792/Videou0026cust_params=[post_id]%3Dstaging%26channel%3D[channel]u0026impl=su0026gdfp_req=1u0026env=vpu0026output=xml_vast2u0026unviewed_position_start=1u0026url=[url]/u0026description_url=[description_url]u0026correlator=[timestamp]”
}
}
}
});

Continue reading %Watch: Logo Design Rules of Thumb You Shouldn’t Forget%


Source: Sitepoint

Mastering WP_Meta_Query & WP_Date_Query

Welcome to the final part of the series—well, technically the final part will be “Series Finale”, but you get the idea. In this part, you’re going to learn about two sibling classes called WP_Meta_Query and WP_Date_Query.

Without further ado, let’s begin!

Working With All Kinds of Meta Data Through the WP_Meta_Query Class

The WP_Meta_Query class is a “helper class”, helping WP_Query to make queries with meta data.

As you know, WordPress stores three kinds of meta data in the database: post meta, user meta and comment meta. We saw in the previous tutorials that we can run meta queries within the queries that we make with the WP_Query, WP_User_Query and WP_Comment_Query classes (with the 'meta_query' parameter). The WP_Meta_Query is actually running when you do those queries.

Turns out, you can get the SQLs for these meta-related queries with the help of the WP_Meta_Query class. This class doesn’t really get the results of the given query, but instead prepares the SQL commands for you to use somewhere else.

Example Use of the WP_Meta_Query Class

We can’t say it’s a tutorial if we don’t do an example, right? With a simple example, we’re going to see how we can use the WP_Meta_Query class in real life. (Granted, it’s an extremely specific thing to get the SQL code for a meta-related query, but I will try to come up with a real-world example.)

Let’s imagine that you want to make a special “related posts plugin” for your own website, where you will list posts which have the same meta value for a meta key—or another meta value for another meta key. And instead of making a meta query within a WP_Query instance, you want to get the SQL code of the query to use it dynamically in separate code blocks. Here are the steps to prepare that SQL code:

There you go: The $my_meta_sql variable stores the SQL code for your special query, and you can use this SQL code anywhere you like within your project.

Wrangling Date Queries With the WP_Date_Query Class

Just like WP_Meta_Query, the WP_Date_Query is a helper class for the WP_Query, WP_User_Query and WP_Comment_Query classes. This helper class was introduced in WordPress version 3.7. Back then, the class didn’t support WP_User_Query, but since the 4.1 version, you can query inside the users table (the user_registered column specifically).

Similar to WP_Meta_Query and its ability to query meta keys and values, the WP_Date_Query class allows us to query date fields inside the posts, comments and users tables. And exactly like WP_Meta_Query, this helper class also lets you return the prepared SQL code to run a date-related query.

Example Use of the WP_Date_Query Class

In order to fully understand how the WP_Date_Query class works, let’s go through an example with it. It’s going to be yet another unnecessarily specific example, but it wouldn’t feel right to leave this part without an example.

Let’s imagine that, for some reason, we need to query for comments that are made in the current month and before noon. (Please shoot me a comment if you find a good case to fetch comments made in the current month and before noon!) Here’s how to get the SQL code for this bizarre query:

There you go. Keep in mind that you can use PHP relative date formats, which are really useful.

Quick tip: Christian Bruckner has a great post on MarketPress.com about how WP_Date_Query works. It’s a little bit outdated (because it was written before WordPress 4.1 was released) but it’s very well-written and still a good read. Be sure to check it out.

Wrapping Everything Up

With these two helper classes, we’re ending the long journey of dissecting the WP_Query class. This was one of the longest tutorial series in the history of Tuts+, so thank you for bearing with us till the end! In the next (and last) part, we’re going to recap what we went through for the last time and close the series.

Do you have anything to add to this article? If so, don’t hesitate to share your thoughts in the Comments section below. And if you liked the article, don’t forget to share it with your friends!


Source: Nettuts Web Development