Share your localhost with the world using ngrok

Working locally has huge advantages as compared to working on a remote server. You won’t have to go through the cycle of fetching files, editing them, and deploying.

But what if you want to share your localhost with people on a different network, without deploying it? That’s where ngrok comes in.

ngrok

ngrok is a small command line utility which lets people on different network to access your localhost. It does this by creating a tunnel from one of its subdomain (xyz.ngrok.com) to your localhost.

To get started, head on to the site and download it. You’ll be getting a executable shell script which is the utility itself. (That’s on OS X/Linux, I’m not really sure about Windows.)

You’ll probably want to symlink it to /usr/local/bin/ngrok or a place where you generally keep shell scripts.

Now execute the script. The most basic usage is to just do ngrok 80 – which makes your localhost on port 80 available on ngrok’s subdomain.

There are quite a few options for the script, ngrok -subdomain mynewrockingapp 80 , for example, will create a tunnel to subdomain of your choice.

Creating a free account unlocks lot of cool features, like choosing a default subdomain, username/password for authentication and so on. You can also choose your own subdomain (xyz.devilsworkshop.org), instead of ngrok’s.

ngrok also lets you debug HTTP requests and responses, and inspect traffic. You can access the interface at localhost:4040.

Link: ngrok

Google to host two special events for Mobile Chrome on June 7th and 13th

Just when you thought the month of June is filled with a lot of product launches, here’s a new (and unexpected) one. Google plans to host two ‘special’ events for Mobile Chrome this month – on June 7th and 13th.

Both of the events will be streamed live on YouTube.

Google Developers live

So, what is Google even planning to release? That too, two weeks after Google I/O? Honestly, I have no idea. Google Developers Live is a show done by people from Google’s developer relations team about many products like Android, Maps, Google+ and more. They’re generally streamed via YouTube through their official channel.

But the fact that this event is called ‘special’, made it interesting to me. Also, they don’t generally host events just for Chrome or the mobile versions of it.

They will probably talk about their future ideas with Blink or if we’re lucky, may be some new features in Mobile Chrome. Wait and see.

On the video page, you can ask questions related to Chrome and those will be answered by developers at Google. There are some interesting ones like “Will Blink reduce the memory usage of the browser?” – which I really want to happen.

Nevertheless, if you’re a web designer/developer, you should definitely keep an eye on this.

Link: Mobile Chrome special event – June 7th | June 13th

Google introduces “Save to Drive” Button for Developers

If you are a web developer than Google has created something very useful for you. It is the “Save to Drive” button which can be used on your webpage. This button allows users to save a document or image right into their Google Drive.

Save to Drive - Button

How “Save to Drive” button works?

It really requires a developer to only post a small amount of script and HTML code. Basically copy-paste the code below into your webpage. (Reproduced from here)

<script src="https://apis.google.com/js/plusone.js"></script>
<div class="g-savetodrive"
 data-filename="My Statement.pdf"
 data-sitename="My Company Name"
 data-src="/path/to/myfile.pdf">
</div>

For more advanced options you can also use Google Drive JavaScript API.

“Save to Drive” from a user perspective

For users this is going to be a great idea. I already use their Chrome extension to save images and webpages on Google Drive whenever I need to save a print-out of a ticket or even keep an image stored.

With Google Drive syncing on phone and other platform it makes sense for webmasters to integrate it onto their site.

I am not a developer but I would love hear if someone is bringing Google Drive’s “Save to Drive” as a WordPress plugin? That would be hugely useful.

What are your views on “Save to Drive” button? Will you have this on your website? Do drop in your comments.

Facebook Hacker Cup 2013: Winner Gets $10,000

Facebook is well known for its hacking competition. If you have seen the movie ‘Social Network’, it showed how hacking match-offs would take place and the winner would be offered a job at Facebook.

Though I would not know if those stories are real or not, but Facebook does have a lot of respect for the hacking community. They show this respect by hosting an annual programming contest called the Hacker Cup.

Facebook Hacker Cup

Facebook Hacker Cup Details

  • The competition starts on 25th January 2013. If you are interested in the competition, you can register at this link.
  • Anyone from around the world can register for the competition but read the terms while registering.
  • There will be a qualification round followed by 3 elimination rounds. All these rounds will be held online.
  • Final Onsite round will be held at Facebook offices at Menlo Park, California, US.

The Prize

  • The 1st place winner will get a cash prize of $10,000 USD.
  • The 2nd place winner gets $2000 USD and 3rd place winner gets $1000 USD.
  • The prize of $100 USD will be given to programmers who come in from 4th to 25th.

Link: Facebook Hacker Cup | Hacker Cup FAQ

Compiling ghostscript 8.71 from sources

In a recent project, where we are working on converting PDF based newspapers to interactive image slideshows, we came across an issue with ghostscript version 9.05. This version was breaking rendering of some Marathi fonts present in PDF.

When tested on ghostscript version 8.71, conversion was working properly. So we decided to downgrade ghostscript from version 9.05 to 8.71 on our server running Ubuntu 12.04 LS. Below are steps we followed.

Compiling ghostscript 8.71 from sources

Download sources from http://downloads.ghostscript.com/public/

wget http://downloads.ghostscript.com/public/ghostscript-8.71.tar.gz

Uncompress downloaded source code & change to directory.

tar xvf ghostscript-8.71.tar.gz
cd ghostscript-8.71

Configure it (I used all defaults)

./configure

Start compilation with

make

If you encounter following error:

./base/gp_unix.c:148:2: warning: implicit declaration of function ‘gettimeofday’ [-Wimplicit-function-declaration]
make: *** [obj/gp_unix.o] Error 1

Compile using

make XCFLAGS=-DHAVE_SYS_TIME_H=1

Finally install compiled binaries using

make install

At this point you will ghostscript will be installed at /usr/local/bin/gs

There are other methods to install old versions also, but compilation is safer alternative IMHO.

About the project:

rtCamp is working on an exciting project to connect WordPress with conventional newspaper publishing. The project is in early stages and a sample can be seen at http://anandnagri.com/e-paper/22-aug-2012-3/ (Note: you may see some text in images broken if you visit this on Aug 24 or Aug 25 as all images are recreated using ghostscript 8.71 right now)

 

Managing local changes using “git stash” tool

(Disclaimer: I am quite new to git so I may end-up making a mistake here!)

Use-case:

You are using a third-party software codes via it’s git repo. For some reason, say that software’s developer does not have support for plugin or customization or the support for changes is limited. Somehow you need to make changes to codes but since changes are useful to only you, they reject your pull requests.

You still want to keep using this software and want to preserve your changes across future updates! Here comes git’s stash tool to your rescue! ;-)

Workflow:

Our workflow will have mainly 3 steps:

  1. Save your local changes (git stash save)
  2. Upgrade local git repo (git fetch & git checkout [...])
  3. Re-apply (merge) local changes to new codebase (git stash apply)

#1. Saving local changes

If you have local-changes and if you decide to update your codes (git pull/git checkout to latest tag), its quite likely that git will give you a hint to either discard or stash your changes.

Since you do not want to discard them, lets stash them using simply

git stash

Or

git stash save "some useful name/comment"

When you run a command like above, all your local changes gets saves to a stack. You don’t need to worry about where this stack resides, or other internal details. You can imagine that your local modifications are stored in a blackhole! ;-)

#2. Upgrade local codebase

This involve mostly fetching remote changes and switching to latest tag (or branch if they don’t like tagging).

Since we are dealing with versions, I feel using git pull is not necessary. git pull does git fetch which is followed by git merger. As we are on a tag (which is not supposed to change by convention) there must be nothing to merge on it from remote.

I generally use following set of commands for upgradation. YMMV.

git fetch
git tag -l
git checkout <latest-tag>

#3. Reapplying local changes to latest codes

Since that developer did not incorporated your changes, you will find latest codes do not have your customizations.

You can reapply them using

git stash apply

Or specifying stash index (in case you did stash save many times)

git stash apply stash@{2}

To get exact index number, in case of multiple stash-saves, please use following command

git stash list

My changes got reapplied successfully without any issue. ;-)

I guess depending on changes, we may need to do some adjustments as we do when doing merge.

Bonus: Undoing Stash Apply!

Just in case you applies wrong stash, or apply it on a wrong tag/branch, you will need a way to undo it.

If you are maintaing only one stash, then simply run…

git stash show -p | git apply -R

OR specify stash index

git stash show -p stash@{2} | git apply -R

If you know any better way, feel free to share with us! :-)

(image credit: created in-house by our design Yogesh Daphane. Idea was mine!)

Codecademy – Learn Python Programming Language for Beginners

Recently, Vibin Reddy wrote a nice post which reviewed a list of 5 websites to learn HTML/CSS. It is a great resource for beginners, especially if you are new to web designing. In the list was Codecademy, which is allows learners to complete exercises created by experts.

Codecademy has now rolled out resources to learn Python programming language for beginners.

Codecademy’s Focus on Python

Python is popularly known for being a expressive language. The syntax is simple.  It is often used for scripting web servers or even network servers.

Codecademy has courses on JQuery, JavaScript, HTML/CSS. In a way this is a first foray into server side languages.

This seems like a good way to start your foray into learning Python.

In the future Codecademy is probably introducing the courses for Ruby language.

In case you are new to programming languages like PHP, you might want to check this tutorial series.

Also if you know more great resources for learning programming and Python in particular, do let me know through your comments.

Link: Python @ Codecademy

5 Great Sites for Beginners To Learn HTML/CSS

Recently, I’m on the verge of learning basic web designing. It all started with the idea of making a landing page for myself from scratch, without using sites like About.me. I ended up discovering sites which can be very handy for beginners who’re trying to code.HTML5

1. Codecademy

This is one of the best things I’ve stumbled upon this year. Codecademy is where you learn code by actually writing it, i.e. by completing exercises which are created by experts of those field. This year, they launched a free initiative named Code Year, calling everyone to learn the basics of coding.

The site lets you track progress, achieve badges and other cool stuff. If you’re stuck at some particular exercise, you can post your doubts in the forums, there are some helpful people out there! You can grab exercises related to Javascript, JQuery and of course CSS3. They also seem to add lessons related to Python, in future. The best thing? All this is free.

Link: Codecademy

2. Dochub

How about an instantly searchable documentation of all major programming languages? That’s Dochub. You can easily find documentation for various programming languages online, but it’s all scattered, and it’s not fast. Dochub solves this. Also, you can get the local version of the website from the Github page.

Link: Dochub

3. Mozilla Developer Network

Mozilla Developer Network(MDN) provides a great in-depth documentation for CSS and Javascript. It’s more like Wikipedia for web developers (you can even edit the wiki, and changes will be reviewed). Bonus is that, you can also learn about making Firefox addons and HTML5 apps, which are cross platform.

Link: Mozilla Developer Network

4. 30 days to learn HTML and CSS

If learning coding by reading documentation or books doesn’t work for you, then consider taking this free course. It’s a series of video tutorials by Jeffery Way, of TutsPlus. Of course, the tutorials are really basic, so if you want something more advanced, you should consider paying for Treehouse, a subscription based learning platform for web and and even iOS developers.

Link: Learn CSS

5. Read Blogs

Blogs related to web designing are in plenty. Starting with the TutsPlus network, till Smashing Magazine, there are so many blogs dedicated to this niche. Most of them will rank well on Google, if you search for anything related to web designing, that’s the best way to find good blogs.

I’m sure there are many more sites which fall under this category, and I’m no web designer. So, do you know any free resources for learning web designing? Write them in the comments.

Mozilla Thimble – A Great HTML Editor for Beginners

Mozilla is trying to encourage more internet users to become familiar with HTML. Honestly, learning HTML is not really very difficult and anyone who creates content online through blogs should ideally try to learn atleast a little bit of it.

Often people are stuck with what sort of HTML editor they should use on their computers. Also questions are there on if these editors will be compatible with the OS of your computer.

For starters, Mozilla has a nice web app called Thimble which allows users to type in the HTML code in an editor and see the changes immediately.

Thimble Features

  • The web app is compatible on most modern browsers and not just Firefox.
  • Thimble has the text editor on the left hand side and the changes are shown in real-time on the right hand side of the browser.
  • You can also publish your HTML content and share it with friends with via a URL. It also has easy options on sharing it across Twitter, Facebook and Google+.

If you are new to HTML and a beginner, I would recommend starting with Mozilla Thimble. Try it out and do drop in your comments.

Link: Mozilla Thimble

Learn HTML with the help of Mozilla Webmaker

Before I was a blogger, I was not exactly into HTML. I know a smattering of HTML and found W3Schools as a good resource for someone who is new to learning web designing.

Mozilla has launched Webmaker, which actually allows users to get regular tutorials and projects that will teach coding and designing for the web.

Why should one sign up with Mozilla Webmaker?

Mozilla first will users with some free tools to learn how to create webpages. Most of them should be compatible with Firefox browser.

Many practical projects at starter level will be made available. This actually makes a lot of sense for people teaching themselves HTML, CSS and more.

Mozilla wants everyone to be a coder!

It seems that Mozilla’s mission with webmaker is to make everyone into a programming geek. I think that is not possible but it will help people who want to learn something to atleast a decent level, so when they look at say a HTML code, they are not completely overwhelmed.

What do you think of Mozilla’s latest initiative? Do drop in your comments.

Link: Mozilla Webmaker