HTML5, Tools

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.


Save flash player video RTMP streaming with VLC player

Sometime you may want to save a video running in a flash player. If you join a online session or training you may want to save that video for later reference. Some of them are video streaming in a flash player. You may have tried Download Helper for Firefox and some other download helper available for google chrome. I have also tried these extension and these are really good and fast way to save any video from internet. But sometime these extensions may fail to save the video, Mostly if video running in flash player is a real time streaming. Some websites use Real Time Messaging Protocol (RTMP) for secure sharing of videos.

If you want to save these kind of video you can do this with VLC player. But before going to save with vlc player you have to find out the source of that video. If you are using FIrefox then you can find the source with Firebug or if you using google chrome or safari then you can use native Developer tool available in these browsers.


1. Inspect the flash player with Firebug to find out the source url of that video. Source url of the video will not be easily available. You have to do little effort for that. When you inspect the flash player with firebug you will find the <object> tag as shown in screenshot below. This object tag will have several <param> tags. You will find the source of the video in one of param tag, mostly under <param name=”flashvars” copy that whole param tag and decode that with url decoder. You can save the html of that param tag by right click on that tag and copy html. Then you have to decode that tag with url decoder. You can use any of url decoder available online.

Voila_Capture 2014-09-30_11-30-44_pm

When you decode that url you will find the protocol, and the file name of that streaming.
like streamer=rtmp://
and file=somfilename.mp4

put together the streamer and file value to get the source url


2. Open Vlc player and Go to File >> Open Network. Paste the url you got in last step and click on Streaming/Saving to Enable saving. Click on Settings to set the saving path.

Voila_Capture 2014-09-30_11-45-45_pm

 3. Set the path where you want to save and click open to start streaming and as well as saving that streaming.

Voila_Capture 2014-09-30_11-47-14_pm

Thats it.


Piratepad Beta

Via Scoop.itrocking-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.