My Blog

7 Oct 2012

Chrome Developer Tools now supports Sass debugging out-of-the-box !!!!
I use it with Chrome v23 (currently, beta), it might be available on 22 too but not on older versions.

How to enable this -

  1. First, you should compile your Sass with --debug-info turned on.
  2. In Chrome/ium go to about:flags
  3. Enable Developer Tools experiments
  4. In your inspector (F12), open "Settings", then go to the "Experiments" tab and check "Support for SASS".

Voilà.

1 Comment | Read more
19 Jul 2012

One of my latest discoveries is HOOK_admin_menu_output_alter().
This handy little thing allows you to add links to your admin menu quite easily.
Use it like this:

/**
 * Change the administration menu content before it is rendered.
 *
 * @param $content: A structured array suitable for drupal_render(), containing:
 *       menu: The administrative menu of links below the path 'admin/*'.
 *       icon: The icon menu.
 *       user: The user items and links.
 *
 * Passed by reference.
 */
function MYMODULE_admin_menu_output_alter(&$content) {
  $content['menu'][] = array(
    '#title' => t('New blog post'),
    '#href' => 'node/add',
    '#weight' => 10,
  );
  $content['menu'][] = array(
    '#title' => t('Edit HP'),
    '#href' => 'admin/bloggers-hp/sort',
    '#weight' => 10,
  );
}

If you don't need the drop-down, with core's toolbar you can even have more flexibility like this:

/**
 * Implement hook_page_alter().
 */
function MYMODULE_page_alter(&$page) {
  global $user;

  if (isset($page['page_top']['toolbar']) && user_access('access administration menu')) {
    // Remove toolbar for user 1 and admins since they have admin-menu
    unset($page['page_top']['toolbar']);
  }
  else if (isset($page['page_top']['toolbar']) && in_array('editor', array_values($user->roles))) {
    // Editors
    $page['page_top']['toolbar']['#pre_render'][] = 'ihmodule_toolbar_add_editor_links';
  }
  else if (isset($page['page_top']['toolbar'])) {
    // Bloggers
    $page['page_top']['toolbar']['#pre_render'][] = 'ihmodule_toolbar_add_blogger_links';
  }
}

/**
 * Pre-render function which dynamically adds links to the toolbar for editors.
 */
function MYMODULE_toolbar_add_editor_links($toolbar) {

  if (drupal_is_front_page()) {
    $toolbar['toolbar_menu']['#links'][] = array(
        'title' => t("Edit"),
        'href' => 'admin/bloggers-hp/sort',
    );
  }

  return $toolbar;
}

/**
 * Pre-render function which dynamically adds links to the toolbar for bloggers.
 */
function MYMODULE_toolbar_add_blogger_links($toolbar) {

  $toolbar['toolbar_menu']['#links'][] = array(
      'title' => t("New blog post"),
      'href' => 'node/add',
  );

  return $toolbar;
}
0 Comments | Read more
11 Jul 2012

You can apply patches without the need to download and save them, it's actually very simple:

● First you should navigate to the right folder (e.g. drupal root / module / theme )
● to apply the patch:

curl PATH/TO/PATCH | git apply

for example:

curl http://drupal.org/files/admin_menu-rtlsupport-725840-2.patch | git apply

● You can also revert it with:

curl PATH/TO/PATCH | git apply -R
0 Comments | Read more
11 Apr 2012

Here are all the commands, starting from creating a new copy of a drupal repository and up to creating the patch to be published in the issue queue, the examples are for drupal core but the same may apply to contrib modules and themes too.

Get the code
git clone --branch 8.x http://git.drupal.org/project/drupal.git

Change directory
cd drupal

Create a branch
git checkout -b branchnme
e.g.
git checkout -b 766458-seven-rtl-112

Add untracked (new) files
git add path/to/file
e.g.
git add themes/seven/ie7.css

Commit changes
git commit -a -m "commit message"
e.g.
git commit -a -m "issue 766458-seven-rtl add ie7.css"

Update origin
git fetch origin

Make your code apply to the latest version of the code
git rebase origin/8.x

Create patch
git diff origin/8.x > patchname.patch
e.g.
git diff origin/8.x > 766458-seven-rtl-112.patch
Or, if you want your patch to include author attributions (some credit for you) you should use:
git format-patch origin/[branchname] --stdout > [project_name]-[short-description]-[issue-number]-[comment-number].patch

0 Comments | Read more
17 Feb 2012

Well, views now (D7) has this feature built in for exposed filters, but if you still need it somewhere -

(function ($) {
  Drupal.behaviors.autoSubmit = {
    attach: function(context) {
      $("form#form-ID .field-class").change(function() {
          $(this).parents("form").submit();
      });
    }
  };
})(jQuery);

You must adjust the selectors obviously.

0 Comments | Read more
6 Feb 2012

This littel jQuery snippet will take a drop-down select and display it as a list of radio buttons :

    // Turn  select into radio buttons  
    $('select').each(function(i, select){
      var $select = $(select);
      $select.find('option').each(function(j, option){
        var $option = $(option);
        var $radio = $('');
        $radio.attr('name', $select.attr('name')).attr('value', $option.val());
        if ($option.attr('selected')) {
          $radio.attr('checked', 'checked');
          var active = 'class="active"';
        }
        $select.before($radio);
        $radio.wrap($(""));
        $radio.after($option.text())
      });
      $select.remove();
    });
0 Comments | Read more
31 Jan 2012

Simply navigate to about:config and set bidi.browser.ui to true (just double click it).
for chrome you have Switch Direction extension.

2 Comments | Read more
24 Jan 2012

Create a script :

sudo mysql -p -e "show tables in jbryce;" | tail --lines=+2 | xargs -i echo "ALTER TABLE {} ENGINE=MyISAM;" > alter_table.sql

run the script :

sudo mysql --database=jbryce -p < alter_table.sql

0 Comments | Read more
13 Dec 2011

This is how I set up a new project on my ubuntu machine:

Edit etc/hosts

sudo gedit /etc/hosts

Add one line :

127.0.0.1       MYSITE.lh

then:

sudo gedit /etc/apache2/sites-available/MYSITE

the content of this file should be something like that :

<VirtualHost *:80>
        DocumentRoot /var/www/MYSITE/
        ServerName MYSITE.lh

        <Directory /var/www/MYSITE/>
                Options Indexes FollowSymLinks MultiViews +Includes
                AllowOverride All
                Order allow,deny
                allow from all
        </Directory>
</VirtualHost>

Then do:

sudo a2ensite MYSITE

Finally, restart Apache to apply changes:

sudo /etc/init.d/apache2 restart

EDIT: or simply install and run https://gist.github.com/3088993

0 Comments | Read more
16 Oct 2011

This is an attempt to target specific devices with media queries, keep in mind that you should usually adjust your media queries to your content and not the other way around but here it is anyway :

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
 /* Styles for small smartphones (generic) */
}

@media only screen and (max-width : 320px) {
 /* Styles for smartphones (portrait) */
}

@media only screen and (min-width : 321px) {
 /* Styles for smartphones (landscape) */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
 /* Styles for iPad */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
 /* Styles for iPad (portrait) */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
 /* Styles for iPad (landscape) */
}

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
 /* Styles for iPhone */
}

@media only screen and (min-width : 1824px) {
 /* Styles for wide screens */
}

@media print {
 /* Styles for print */
}

this is probably not perfect, please leave a comment if you have anything to add.

0 Comments | Read more

Pages