Make any webpage editable

Do you know you can make any web page editable? This editable page gives you the power to do many tasks quickly. For example, if you struggle to copy the text of a hyperlink while trying to make a selection of text with click and drag. You can quickly make any page editable and copy hyperlink text. You can quickly edit any part of the page and take a screenshot to send that to your colleague.

If you google “How to make any webpage editable” or “Edit any website” you may find this code like:

javascript:document.body.contentEditable = 'true'; document.designMode='on'; void 0

Which basically works based upon contentEditable property of HTML Element. See Making content Editable and HTMLElement.contentEditable on MDN.

You need to copy and paste in your browser’s address bar. But if you use chrome then chrome may strip the leading javascript: for the security purpose.

What if you can make a bookmarklet of this code which will toggle the page to be editable and non-editable. Here is the code of that bookmarklet.

function() {
  if (document.body.contentEditable === 'false' || document.body.contentEditable === 'inherit') {
    document.body.contentEditable = 'true'; document.designMode='on';
  } else {
    document.body.contentEditable = 'false'; document.designMode='off';
  }
}

Here is the bookmarklet because WordPress does not allow me to put bookmarklet here.

Make any directory as web server root directory

In your local system temporarily you can make any directory as localhost web server root directory. If you have some static web application or static pages and you want to test. One option is you copy that web application folder in your localhost root directory then browse that directory through localhost. Another thing you can do is make that directory as web server root directory temporarily. You can do this in two ways one with PHP build in server and another with python. For PHP you should have php 5.4 or higher.

With PHP

php -S localhost:<port number>

Here -S tell php to start builtin server

example :

php -S localhost:9000

Now the current directory in which you run this command will become the web server root directory and web server will listen at 9000 port.

With Python:

python -m SimpleHTTPServer 9000

here -m tell python to import SimpleHTTPServer module.

Now the current directory in which you run this command will become the web server root directory and web server will listen at 9000 port.

Of course another way to do this is changing the configuration in apache’s httpd.conf file.

I think Ruby also provide builtin server for development, i am not aware about that. Please leave in comments if you know some another languages also provide builtin server.

Grab a static website with Wget linux command

You can get any static websites on your local system with wget linux command. Let say there is simple static web application which you want to run on your local system. One option could be that you save each page and every script and css files embedded on each page as well of that application, and then you have to correct the path of the script and css files if the paths are not relatives. Wget can do this for you. For example: css3shapes.hertzen.com is very good static web application which create awesome css shapes just using drag and drops. If you want to run this application in your local system, in case you don’t have internet access. Using the following wget command you can get this application running on your local system.

wget --recursive --no-clobber --page-requisites --convert-links --no-parent http://css3shapes.hertzen.com/
 

you can pass several option to wget command. The options are:

--recursive: download the entire Web site.

--domains website.org: don't follow links outside website.org.

--no-parent: don't follow links outside the directory tutorials/html/.

--page-requisites: get all the elements that compose the page (images, CSS and so on).

--html-extension: save files with the .html extension.

--convert-links: convert links so that they work locally, off-line.

--restrict-file-names=windows: modify filenames so that they will work in Windows as well.

--no-clobber: don't overwrite any existing files (used in case the download is interrupted and
resumed).

 

Thats all now you can open index.html file in browser and everything works, in case if this doesn’t work as expected then you can put this grabbed website directory in your localhost document root.

Piratepad Beta

Via Scoop.it – rocking-css3

Piratepad Its Perfact tool for webdeveloper and team member of any businees those who want to work in collaborative environment. It provide real time live editing of to do list or any thing which you want to work as team and need realtime updation. It have cool feature like rich text, different color for each user text, image and link import, realtime chat and much more. Check it out.
Via piratepad.net

ChromePlus.. its cool!

I tried ChromePlus browser its cool. Because ChromePlus is an enhanced Chromium produced by Maple Studio.You can download it from http://www.chromeplus.org It is as fast as simple google chrome with advanced feature like mouse gesture, startup option and adblock option.