Xavi Esteve » English

Register in WordPress with Twitter account (plugin)

Xavi — Wed, 18 Apr 2012 21:54:45 +0000

Wordpress Login is a WordPress plugin that will allow users to register into a WordPress website with a Twitter account in one single click. The plugin will create an account in the WordPress wp_users table.

WP-Twitter-Login

Who is this plugin for?

This plugin has been specially coded for intermediate to senior WordPress developers that want to develop a new web application using WordPress. The plugin can be configured easily and it has been coded to be very scalable. Users with no knowledge of PHP may find other solutions more helpful since this plugin doesn’t have any GUI. The main purpose of this plugin is to allow people to develop an app taking advantage of the high-converting one-click Twitter sign-up process and saving time in programming a User Authentication system.

How it works?

When a user accesses the URL ?tw=login in a WordPress website he is redirected to Twitter using Matt Harris’ OAuth library. Once authenticated, a new WordPress user is created picking all the information from the Twitter username. The WordPress username has a prefix (tw- by default) and his Twitter ID (the public username is not used here since it can be changed). The password is his Twitter ID with a custom salt. Extra information is stored in his user profile (nickname, full name, website, bio, etc.) as well as in custom user fields (oauth_token, oauth_token_secret, language, followers and friends count, profile image, etc.).

A caveat in WordPress is that it requires a valid and unique email address per user. Since Twitter does not provide you with the user’s email address, the plugin registers the user with an email address like tw-twitterid@domainname.com.

By default the plugin will not allow users to access WP-Admin which makes this plugin perfect for someone who will provide a service to registered users without ever showing the WordPress inner pages to them. You can enable access to WP-Admin changing a variable from true to false although you should disallow users from changing their password or they will not be able to log back in.

Download

Download the plugin from GitHub:

wp-twitter-login

License

This plugin is licensed under a MIT license. Feel free to use it in any commercial way.

Installation

1. Download the plugin and upload it to your plugins folder as you would do with any other WordPress plugin

2. Create a new app at Twitter here

3. Copy the Consumer Key and Consumer Secret and paste them in twitterlogin.php

4. Change the $salt variable to something long and complicated

5. Optionally, you can change the username prefix to something else to increase security

Retrieving user information

To see if a user is logged in through Twitter run is_user_logged_in() and then check if the username matches the Twitter prefix (tw- by default).

To retrieve the current user’s data do something like this:

global $current_user;
get_currentuserinfo();
echo 'Hello ' . $current_user->nickname;
echo 'User token: ' . $current_user->oauth_token;
echo 'profile_image_url . '" alt="" />';

To retrieve data from someone else do something like this:

$user_info = get_userdata($user_id);
echo 'Username: ' . $user_info->nickname;

Compare files with Dreamweaver in Mac OSX – Step by step guide

Xavi — Tue, 27 Mar 2012 13:34:46 +0000

It is very helpful to be able to compare different code files to see their changes, specially when working in a team. Adobe Dreamweaver is my main choice when developing since I like the color highlighting theme, it has an FTP client included and a simple check-in/check-out functionality that doesn’t need to be set up like SVN and works in cheap shared hostings that don’t support any version control.

To compare files in Macintosh there are several applications and the best, lighter and faster to load is DiffMerge (works great in my old white Macbook), it is also free and open source so more than welcome. This is how you set it up in Dreamweaver so that you can compare files easily by right-clicking the file and selecting Compare with Remote Server:

Also when uploading a file Dreamweaver may warn you that the file in the server has been modified and you may overwrite someone else’s changes:

And also in the Synchronize files list:

It becomes really useful to see what has changed, once you click the Compare button this is how DiffMerge looks like:

Looks good, huh? Let’s get to work then!

Setting up DiffMerge with Dreamweaver

First thing to do is to download DiffMerge from the official site and install it, no need to open it.

Dreamweaver needs a shell command to open DiffMerge with both files. We will install a small script (10 lines of code) into the /usr/bin folder. To do this you first need to be able to view all hidden files:

defaults write com.apple.Finder AppleShowAllFiles YES
killall Finder

Open Finder, go to Utilities and open Terminal. Paste the code above. Finder will restart and all your Finder open windows will close. If the code above doesn’t work then change YES to TRUE and try again.

Now go to Macintosh HD or your main drive and go to usr/bin:

Download this file and rename it as diffmerge.sh

Move diffmerge.sh to the /usr/bin folder, you will probably need to enter your Administrator password since that is a system folder.

Now go to Dreamweaver, open Preferences and go to the File Compare section. In there, paste this text:

Macintosh HD:usr:bin:diffmerge.sh

Yes, it’s got : instead of / but it’s how it works.

Save the settings by clicking OK at the bottom.

You are done! Now you can compare files and see what has changed, great to keep track of your peer changes and even some changes you made months ago and can’t remember.

You can hide the hidden files again by going to Terminal and typing:

defaults write com.apple.Finder AppleShowAllFiles NO
killall Finder

Nice! You made it until the end of the post. Here’s an extra gift for you, a very useful tool to disable or customize the annoying startup sound in all Mac OSX, it is called Startup Sound and it installs in the System Preferences so it gets completely integrated with your system. It’s free too, download here.

Simplest Modal Window (less than 1KB) – jQuery Plugin

Xavi — Fri, 16 Mar 2012 15:18:19 +0000

Following my jQuery minimal plugin series I’ve now built a very functional and minimal jQuery plugin to create modal windows on the go, it weights exactly 572 Bytes (0.6KB). The modal windows have a slick design using a white rounded border square with a fine shadow:

The CSS style is fully customizable, only 8 properties used by default and you can modify most of them to customise it your way.

The script is unobtrusive and has a high-performance, meaning it only loads and modifies the DOM when required and it unloads everything completely when the modal window is closed. Closing the modal window can be done by either clicking outside of the window or by clicking any .mw_close element in the window content.

Download Simple Modal Window jQuery Plugin

Copy and paste this code below. Yes, ALL the plugin is in this small piece of code, you should just add it into a JavaScript file you have or directly into the page (inside the jQuery wrapper).

/* Simplest Modal Window by Xavi Esteve (Creative Commons BY-SA) http://xaviesteve.com/?p=3054 */function mw_close(){$("#mw_win,#mw_mask,#mw_style").remove()}function mw_load(a){mw_mask="background:#333;height:100%;opacity:0.33;position:fixed;top:0;left:0;width:100%;z-index:1000;";mw_win="background: white;border-radius: 5px;box-shadow: 0 1px 2px #666;left: 33%;padding: 2%;position: fixed;top: 33%;width: 33%;z-index: 1001;";$("head").append('");$("body").append('
'+a+"
");$("#mw_mask,.mw_close").unbind("click").bind("click",function(){mw_close()})}

Here’s the code without minifying:

/* Simplest Modal Window by Xavi Esteve (Creative Commons BY-SA) http://xaviesteve.com/?p=3054 */
$(function() {
  /* Modal window script in 9 lines */
  function mw_load(html) {
    mw_mask = 'background:#333;height:100%;opacity:0.33;position:fixed;top:0;left:0;width:100%;z-index:1000;';
    mw_win = 'background: white;border-radius: 5px;box-shadow: 0 1px 2px #666;left: 33%;padding: 2%;position: fixed;top: 33%;width: 33%;z-index: 1001;';
    $('head').append('');
    $('body').append('
'+html+'');
    $('#mw_mask,.mw_close').unbind('click').bind('click', function() {mw_close();});
  }
  function mw_close() {$('#mw_win,#mw_mask,#mw_style').remove();}

You can load a new Modal Window through JavaScript by using this function:

mw_load('Lorem ipsum dolor sit amet.
');

If you have any issues please let me know, note that the plugin’s purpose is to simply work, fancy features and extras should be coded apart specifically for your projects. The plugin requires jQuery and it hasn’t been tested in IE6.

Spreadsheet to calculate share/equity between startup/business co-founders

Xavi — Mon, 05 Mar 2012 08:57:57 +0000

One of the first and most important questions a new startup, business or company should have is how to divide the stock amongst its co-founders or stockholders.

Purpose of the Co-Founders Pie

The Co-Founder’s Pie can be used in two different ways:

A) Work and responsibility distributor

We always use the Co-Founder’s Pie to calculate how to distribute work and responsibilities between the co-founders. First we write in everything as it is and then tweak it to make it as balanced as possible so we keep the same equity for all the co-founders. That’s the best approach, if all the co-founders can have the same equity everything would be much better and simpler. If we end up with a 33% 32% 34% then we will agree and share them at 33% each. But if the distribution is quite unbalanced, something like 40% 35% 25% and we can’t tweak the spreadsheet further to balance work/responsibilities then we will go with that equity.

B) Calculate co-founder share equity

If you already have all the areas assigned then you can calculate the equity division with the spreadsheet and see exactly how much should every co-founder own.

Spreadsheet Guide

It is recommended to fill in the spreadsheet in a meeting, when all co-founders are present and do it all together, agreeing on each step. Also, please read this article (5 minute read) from Frank Demmler to learn the origins and reasoning of the Co-Founder’s Pie and the actual purpose of all this.

Co-Founder Pie Spreadsheet

1. Login to Google, follow the link above and click ‘Use this template’

A new copy of the Co-Founders Pie Spreadsheet will be created in your Google Docs. No one has access to it now, not even me. To allow people to collaborate click the Share button (top right corner).

2. Fill in the co-founder names at the top

You can write from 2 to 5 different co-founders.

3. Allocate the different items, tasks, areas in Column A

Examples are in there for demonstration purposes, create your own elements from scratch.

4. Fill in the Weight of each row

This is the most important step of all. Decide a relative importance for each element.
The minimum value is 1, higher is more important. Example: Finance=1 and Design=2 means Design has twice the amount of work or responsibility than Finance.

5. Fill in the amount of work/responsibility of each co-founder

Add a number from 0 to 10 for each player’s participation in each element. It should add up to 10, no more, no less. Use round values like: 3-7 or 1-5-4. If everyone has the same amount leave it blank.

6. Results in Row 2

Row 2 show how much each co-founder owns of the company. You can change all the numbers in the spreadsheet and it will automatically update.

Good to know

Please read this question (spanish translation) if you are unfamiliar with equity division, it is a completely different approach but a must-read which should be considered whenever work and responsibilities among co-founders is quite similar. Also, have a look at OnStartups Q&A site for many interesting information.

Best Base64 online file encoder

Xavi — Tue, 28 Feb 2012 08:55:24 +0000

I’ve created a simple yet powerful free online tool to convert any image or file into a Base64 encoded string. The tool works by either providing a URL to a file or by uploading your file directly.

Why should you base64 encode?

Base64 encoding allows you to embed media into your HTML, CSS or JavaScript files which means you save one or more server requests. Keeping your website with as fewer requests as possible is one of the best ways of loading websites faster.

When not to base64 encode?

If your file is bigger than 20KB or appears in several pages of your site then it is best to load it as a separate file and let the user’s browser cache it.

Extra features

Apart from providing you the code to embed into your project, I’ve also made available copy-paste codes already with the base64 string in it so if you want to embed your code as a favicon, an image, JavaScript file, CSS sprite map or CSS image you are just a few keystrokes away:

Base64 encoder website

Ok, enough talking, here’s the link to the tool:

Online Base64 encoder

Awesome trick to remember thousands of different passwords

Xavi — Sat, 25 Feb 2012 18:10:27 +0000

Here’s a very cool technique to remember unique passwords for each website or service that you access while keeping them super secure. So no need to worry about either having to remember 10 different passwords or using the same password for all the online accounts you have.

The way it works is pretty straight forward, every time you refresh the page The Human Password Generator it generates a short list of steps you need to remember that will generate very secure passwords on every different website… sounds good? Check it yourself in one click:

The Human Password Generator

Click the Refresh button until you find nice looking passwords and print the page to keep it very safe. It is just a piece of paper so you can hide it very well nearly anywhere. I would also recommend to change all your passwords once every 6 months (imagine you kept your password combination in a book and one your day your sister accidentally sold it).

You can also just keep the URL that’s at the bottom of the website, it stores the exact combination that you have.

Kohana 3.2 Documentation all-in-one PDF, ePub and HTML formats

Xavi — Fri, 24 Feb 2012 12:14:54 +0000

Kohana’s official documentation is pretty complete and useful as well as well written. I have been studying it for a few days but wanted to read the tutorials also whenever I had no Internet connectivity. Searching on the Internet for PDFs or ePubs on Kohana didn’t really show much so I developed a little tool that extracts the official documentation and outputs it in one single file so you can read the official Kohana guide anywhere anytime.

You can download the documentation both in ePub, PDF and HTML formats. The ePub format does not have the images in it (I used an online tool and it removed them, there aren’t a lot anyway) but works great in the iPad, Kindle and Android tablets.

Kohana 3.2 Documentation in PDF format (mirror) (3.3MB)

Kohana 3.2 Documentation in ePub format (mirror) (240KB)

Kohana 3.2 Documentation in HTML format (mirror) (310KB)

I have done my best with the crawling tool but it hasn’t been 100% tested so some sections may have been skipped, please let me know in the comments if that’s the case.

Thanks to all the contributors to the Kohana Documentation, as I am still learning Kohana accept this as my little contribution to the framework :)

iPad web based Code Editor (with extra symbols keyboard)

Xavi — Wed, 08 Feb 2012 16:11:39 +0000

I mostly use the iPad for reading email, news and blogs although I am still perplexed at how few apps there are for actually doing some work. Well, to be honest, there are many apps to do some work. But I believe in platform-agnostic web-apps or SAAS to be the future of our world and the amount, variety and features of current web apps for web development is still quite scarce.

One of the big gaps that I found was regarding code editors. The lack of fast symbol typing in the keyboard is very frustrating and slow (you need to use iOS’s default keyboard and type 3 keys just to get a “<” sign, plus another one to get back). This is why I came up with a proof of concept on additional keyboard rows with extra keys for touch screen devices and added all symbols frequently used for coding and programming so you don’t need to keep switching from one keyboard set to another. It has been optimised for the iPad in portrait mode although with some responsive CSS queries and device detection it can be adapted anywhere.

The code itself is basic HTML, CSS and a bit of JavaScript and jQuery. I’ve kept it simple to aid scalability and customisation. This is how it looks:

Demo and download

Click the following link to open the Code Editor. To test it properly you will need an iPad in portrait mode.

iPad web-based code editor with extra symbols keyboard

License

Public Domain, keeping the Internet open. You can use it commercially and distribute it as much as you want without being forced to credit the author.

Changelog

If you have developed it further send me an email and I will include it in the next release and you in the Credits.

8 February 2012 (v1.0)

First release

If you haven’t seen my iPad HTML/CSS template you must see it now.

iPad/iPhone/mobile HTML/CSS template for web apps (responsive, no javascript)

Xavi — Fri, 27 Jan 2012 17:03:16 +0000

iPad/iPhone template made in pure HTML and CSS (no JavaScript needed) that works perfectly on any modern browser (iPad (including iPad 3), iPhone, tablets, mobiles, laptops, etc.). The template uses responsive queries to hide the sidebar in iPad portrait mode and in the iPhone and smaller screens (you can disable that easily if you want to).

Here’s how it looks in the iPhone (click image to view full size):

This template is the perfect start for any front-end or back-end developer to build complex web apps without spending time on developing the main structure. Or even to create a mobile version of your current site.

The code has been developed so that there is no “divitis”, completely optimized, semantically correct and minimal HTML code. There are no images or animations at all, everything has been coded using some of the latest CSS3 available features and tested it in most modern browsers. Ready for you to download and start developing. These are some of the template’s features:

Features

App-ready

You can install this template as a normal App Store app, removing the Safari top navigation bar and enjoying the full screen.

Responsive Web Design

Hides the sidebar in iPhone, mobiles and iPad portrait mode. Adapts nicely to the full screen.

No images

The whole template has been built without requiring any images which means less server queries and increased bandwidth savings.

Heading styles

Two different heading styles: the main black one and the smaller blueish.

Anchor texts (links)

The whole clickable area is active so that even fat fingers can click comfortably.

Scrollable

Both the sidebar and the main content can be scrolled separately in the iPad and other touch screen tablets.

Tables

Fully flexible and liquid tables that allow you to include more information while keeping the same look and feel as in any Apple app.

Forms

Fillable textboxes, password fields, select dropdowns and buttons.

Fully tested in several devices

Works great in: iPhone 4, iPhone 3GS, iPad 2, Samsung Galaxy Tab (GT-P7510), Safari 5, Chrome 16 and Firefox 9.

Graceful degradation: IE9 (no rounded corners), IE8.

Not working: (none tested yet).

License

The best of it, I am releasing it under a Public Domain license. This means it is free to use as many times as you want (even for commercial projects) and you do not need to give me credits if you don’t want to. I would appreciate if you do so or if you send me a link to your creation, it will motivate me to develop it further and make me happy.

Download the template

To download the most recent version of the Xavi iPad template click the link below:

Xavi iPad template

And then go to File > Save as… The CSS has been coded in a