Clean URLs help search engines like Google, Bing to identify the content of the page (yes they are intelligent enough to understand English) and if searched for, it simply lists pages with these URLs on the top. In fact, Google uses gives preferences to the content of the URL while ranking results – this means that if the slug contains a search term, there is a probability that it would be ranked higher. The routing system of each framework is different and URLs can be stored with a matching value. For example, a URL like http://xyz.com/what-is-spice-forms is actually interpreted ashttp://xyz.com/post/4. It means visiting the not-so-friendly URL will also land you to same page.

There might be a case of ambiguity if someone asks the same question. Usually that time a database search is done and the URL is modified slightly to make it unique. For example, it can be observed that Facebook stores URL like http://xyz.com/what-is-spice-forms-12836. The last number is used to make the slug unique and it reduces a database query.

Overall, it can be concluded that slug based URLs are very constructive towards the popularity of the site.

PHP Slug Maker

We will discuss the slug maker in PHP. It is very easy to make a slug out of a given sentence or group of words. We are going to take inspiration from a gist and then slightly modify it to create unique URLs.

<?php
function slugify($str) {
    $search = array('Ș', 'Ț', 'ş', 'ţ', 'Ş', 'Ţ', 'ș', 'ț', 'î', 'â', 'ă', 'Î', 'Â', 'Ă', 'ë', 'Ë');
    $replace = array('s', 't', 's', 't', 's', 't', 's', 't', 'i', 'a', 'a', 'i', 'a', 'a', 'e', 'E');
    $str = str_ireplace($search, $replace, strtolower(trim($str)));
    $str = preg_replace('/[^\w\d\-\ ]/', '', $str);
    $str = str_replace(' ', '-', $str);
    return preg_replace('/\-{2,}/', '-', $str);
}

This function generates a slug based out of the $str you pass to the function. A string like this The quick brown fox was slugified to the-quick-brown-fox. To make it unique, we will add a unique string at the end.

$url = slugify("The quick brown fox")."-".uniqid();

PHP uniqid()

uniqid() helps to generate a unique random string and the algorithm makes it almost unique. There are some params which can be passed to increase the likelihood of uniqueness but since we are already combining it with a slug, the total string being duplicate has inverse astronomical probability. In simple words, the slug generated will be unique. If you are using databasees, you can also append the primary key (ID) to the end of the string to make it unique.

Python

In python, a package already exists which makes slugs. You can install it using a package manager like pip.

pip install python-slugify

Usage:

txt = "This is a test ---"
r = slugify(txt) // gives 'this-is-a-test'

The unique ID can be attached using uuid() function and voila, the slug is created.

Python Django

If you are using Python Django, a package is available called django-autoslug which does exactly the same. Also, the [SlugField](https://docs.djangoproject.com/en/dev/ref/models/fields/#slugfield)may be used to create slugs in models.

I hope the quest for creating unique slugs is over. Keep creating them!

The post Create unique slugs for URLs using PHP and Python appeared first on SpiceMailer Web Tutotiral.

Let us discuss about some other useful display options web developers have.

1. inline - If any property is not specified, inline always acts as default. It simply creates a box, which is as close as possible to the actual rendering area. It doesn’t really matter what are the dimensions of parent element as it inline does not take that into account. You cannot specify the height and width of the element. But yes margin and padding works in horizontal direction but not in vertical direction. For example:

<h2 style='display:inline'>Hello World</h2>

Would look like this:

2. inline-block - It is almost similar to inline, the difference being that width and height can be specified. For example:

<h2 style='display:inline-block;width:120px;height:200px'>Hello World</h2>

Would look like this:

3. block - Elements such as div, p,h1 and with HTML5 elements like header, section areblock by default. block elements tend to acquire the width of the parent element. So basically, it takes as much as horizontal space which is available to it. For example, elements declared after a heading with h# tag always come below it. This is due to the width:100% which they have due toblock display. For example:

<h2 style='display:block'>Hello World</h2>

Would look like this:

4. none - When this property is assigned to display, browser considers that the element doesn’t exist in DOM. This means it’s invisible and doesn’t take any space nor leave any vacant unoccupied space. Although, it can be referred by Javascript. Changing the property to block or inline will make it visible once again.

5. table - These are rarely used. We have a list of them which can help you build a table from divbut once again, they are rarely used or not used at all. They are self explanatory about the properties and I think directly using a table will make more sense.  display: table display: table-cell display: table-column display: table-column-group display: table-footer-group display: table-header-group display: table-row display: table-row-group 

6. list-item - This has also got nothing so special except that the element starts behaving as if it is<li></li>.

With only block, none and inline being significantly used, other display properties are losing usage with time. I hope you enjoyed reading this. To test things, simply move on to inspect-element in Google Chrome and try changing display property of various elements, specially h# tags. For more info and documentation, check Mozilla Documentation.

The post Display attributes in CSS Explained appeared first on SpiceMailer Web Tutotiral.

While Facebook was expanding, it noticed that there was a need to exchange lots of data. There were users who came for gaming, social marketing, shopping or for simple authentication and Facebook had lots of data which could be shared like name, email, activities and likes. Most other platforms didn’t realize the importance of sharing data as a business model (and yes, Google did exactly the reverse — it took your data away) and rarely took a step in this direction. But when Facebook wanted to share user’s data with other websites and in turn wanted to receive the data from them in a secure manner without exposing the credentials of the user, they made a ‘Login Via Facebook’ plugin which is based on OAuth protocol. The major feature of this method is that the user doesn’t have to share his username/password to the third party websites in order to let them access his/her data. That means, it eliminates the requirement of different key/secret for each user. Instead an app key/secret pair is enough to fetch the required data.

The whole effort by Facebook opened new gates for business. Every other website came up withLogin Via XXXX option be it Twitter, Google+, LinkedIn, GitHub, FreshDesk and most others. But Facebook is still leads the way by long with Google catching it up. Hence this post is about the OAuth protocol along with some basic Facebook API setup.

OAuth Introduction

OAuth is basically an authentication protocol using which apps can access data from third party websites about a particular entity. An idea about how this technology works will help you understand its implementation. By taking the example of Facebook Javascript SDK Let us define OAuth in few steps so that its can be easily understood while we write the code for the same.

Facebook Javascript SDK Loads

A div with id = fb-root is appended to the <body> and Facebook uses that as a reference to load its Javascript SDK on to the browser. This SDK is basically a library which has functions defined to send requests to Facebook Server which includes obtaining permissions, fetching data and posting on the behalf of a user.

User Grants Permission

User grants the permission by clicking on a the ‘Login via Facebook’ button. A request is sent to Facebook’s server. Along with that a key is also sent which has to be obtained prior to coding. It is obtained by registering your domain name with Facebook. Now Facebook matches this key and the domain it has been called from just to make sure that user grants permission to the correct website. Now the user encounters a popup from Facebook where he can grant certain permissions which Facebook takes note of. Then finally an access token is sent to the browser.

Access Token

The access token obtained is basically a string, which is an authorization of the user and Facebook to allow using certain data related to user. Now the website can send its key and access token to the Facebook server along with specifying what data it requires. Facebook cross checks the access token against the permissions it granted and sends data/error codes respectively. An access token is related to a user and a Facebook application created by the third party website for this purpose.

Validity of Access Token

The access token is valid only for 2 hours after its creation. Also if the user deactivates their Facebook account, all existing tokens become invalid. Although an access token of 2 months validity can be obtained and stored, but usually websites acquire a fresh token each time the user logs in.

Creating an App on Facebook

There are numerous tutorials available and the website itself is self explanatory. We are going to describe it briefly once again.

1. Log on to Facebook and then open Facebook Developers in a new tab.
2. Click on Apps followed by Create a new app.

3. Write a name for your app, select a category and click on create.

4. You can see you AppId and Secret Key.

5. Click on ‘Create a Platform’ followed by ”Website’.

6. Enter Domain name and save it.

Just keep a note of the key and secret as these will help you in the process. In the next post, a real implementation of the whole process can be discussed. Both Javascript and PHP based examples on extraction of data from Facebook Graph API will be discussed where we will build an app to show details of the user using data from his Facebook account. A lot of documentation is provided on theFacebook Developers website which provides a great deal of understanding and scope to which you can access data. It includes access user’s profile, his feed. You can also take permissions to send messages, post status and manage pages from your website on his behalf. There is API for metrics and stats of pages too. I hope you enjoyed reading this post.

The post Facebook Graph API – The OAuth Token explained appeared first on SpiceMailer Web Tutotiral.