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.

drupal console can’t connect to MAMP mysql server

Do you ever encountered an error while running drupal command inside drupal root directory where you using MAMP as your development stack?

$ drupal
[PDOException]
SQLSTATE[HY000] [2002] No such file or directory

OR while trying to connect mysql client with mysql server run by MAMP or MAMP Pro?

$ mysql -u root -ppassword
ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)

This is because drupal console or mysql client try to connect to mysql server by default location of mysql socket file which is supposed to exist at /tmp/mysql.sock

But mysql server run by MAMP create this socket file at /Applications/MAMP/tmp/mysql/mysql.sock location which is different from default expected mysql socket file

Solution:

Simply create a symlink to this mysql socket file under /tmp/ directory.

$ ln -s /Applications/MAMP/tmp/mysql/mysql.sock /tmp/mysql.sock

BOOM! now you can run drupal console or mysql command.

Foundation 6 accordion collapse all item even if single item

Foundation allow you create accordion container if you have long list of content and want to present them in a beautiful manner.

By default accordion keep the first item as active and shows its content. By clicking on this single item it does not close that item. It only closes that item if you click on another item.  As per the foundation 6 documentation if you want to allow all items to be collapsible when user click on that accordion item title. You need to pass data-allowed-all-close=”true” to accordion container.

What if you have only single item in your accordion and want that accordion item to be collapsed by default on page load.

Let say you have Terms and Condition on your site and want to use accordion to collapse all the condition with single accordion item and on initial page load terms and condition section should be collapsed so it does not increase the page height and user may not need to scroll too much. User can expand terms and condition if he is interested to see.

This can be done by adding data-allowed-all-close=”true” to accordion container and removing is-active class from that single accordion item.

See the Pen Foundation – Accordion Component – All closed on load by mahesh sankhala (@msankhala) on CodePen.

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.

Steps:

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.

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

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

rtmp://hostname.com/somedir/path/somfilename.mp4

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.

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

Thats it.

Drupal 7 node title show error when enter special characters

If you don’t want to allow special character in node title of Drupal node then you can do this with one simple hook hook_node_validate. This hook will be called when you create a new node or you update any existing hook.

function custom_node_validate($node, $form, $form_state){
 // special character list, Add more special character if you want.
 $special_character_list = '\'^£$%&*()}{@#~?>,|=_+¬\-\[\]';
 if(preg_match('/[' . $special_character_list . ']/', $node->title, $matches) !== 0){
 form_set_error('title', format_string("Special characters !special_character_list are not allowed in title.", array('!special_character_list' => $special_character_list)));
 }
}

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.

Programmatically get Drupal views exposed form

Sometime you may have to get the drupal views exposed filter form programmatically, Let say you implemented the custom search functionality in your site at <your-site.com>/customsearch with views module where you showing listing of different content type with summery and you exposed the filters (e.g simple text box) so that user can filter down the result based upon the search term he type in exposed search box. You may have to show the same exposed search form on site home page so that when user search something on homepage he will be redirected to your custom search page. You can get the views exposed form with following code:

<?php
$view = views_get_view('your_views_machine_name');
$view->set_display('Views display name');
$view->init_handlers();
$exposed_form = $view->display_handler->get_plugin('exposed_form');
print $exposed_form->render_exposed_form(true);
?>

As code is self explanatory, the  views_get_view function will get your view from database, then set_display method on view object will set the display of your view. init_handlers method will initialise the handlers then with the help of get_plugin method of display_handler you can get the exposed form and render it.

Override Chrome selection background color

Have you ever noticed that some of the  cool well designed website have their selection background color according to theme of the website. For example if a website using green color for most of its design will show the green color when you select text  on website.  Here is a website http://www.impressivewebs.com/ if you select text on this website then it will show light brown color as background of selected text. You can do this with single line of CSS using CSS3 ::selection pseudo class. Put the following line in chrome’s user style custom.css file which is located at ~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css  on mac.

::selection {
  background: teal; /* -webkit browser*/
}

 

Drupal 7 apache solr search within attached document

Since last couple of week i was working with Drupal and apache solr. There is very good module Apache solr search integration to integrate apache solr with Drupal search. This module provide number of hooks to modify solr search index, alter the document before it being indexed on solr, to alter query parameters, alter the result before it being displayed on result page and several other hooks. Here are my other posts to add custom field in apache solr index and add custom sort to apache solr query parameter.

I had the requirement to search within the drupal content as well as within the attached document with any of the node, if user search for some terms and if that trem exists within the attached document but not within node content itself then result should return that node in search result.

There are existing module apachesolr_file and apachesolr_attachments. Apachesolr attachment module was working quite near to my requirement, As apache solr create one document in index for each drupal node, but this module create separate document  for attached file with any of node. So when i search for some keyword then it return that attached file as separate document not the node with which this file is attached, Then i have to apply some hack over that module to index the attached file content with the node itself not as a separate document.

Approach:

Before solr index the drupal content i simply alter the document being indexed. I check whether the node being index have file attached with iteself, if file exits then add a new custom field to solr index and using the apachesolr_attachment module’s apachesolr_attachments_get_attachment_text() function grab the text of attached file and add this text to this custom field. Apachesolr attachement module uses tika library to extract the text from attached document.

I created custom module which uses hook_apachesolr_index_document_build() and hook_apachesolr_query_alter(). These two hooks are provided by Apache solr search integration module.

Let say you have a custom file field with node which contain the file(doc, pdf etc). In my case this field is field_download_file. 

<?php
function apache_solr_attachments_custom_apachesolr_index_document_build(ApacheSolrDocument $document, $entity, $entity_type, $env_id) {
  if ($entity_type == 'node') {
    if(isset($entity->field_download_file)) {
      module_load_include('inc', 'apachesolr_attachments', 'apachesolr_attachments.index');
      $text = apachesolr_attachments_get_attachment_text((object)$entity->field_download_file['und'][0]);
      $document->addField('ts_attachment_text', $text,3);
     }
  }
}
function apache_solr_attachments_custom_apachesolr_query_alter($query) { 
  $query->addParam('qf', 'ts_attachment_text');
}
?>

To use apachesolr_attachments_get_attachment_text function you have to install apachesolr_attachement module and enable it.