Blog

Sunday, January 19th, 2014

Improving Drupal Frontend Performance

Steve Sounder’s is an authority on web performance. He writes about everything from front end performance to browser performance. As a front end developer, it’s easy to get lost in tasks that don’t matter. There’s a saying in software development, “Don’t optimize until you need to.” In frontend development, that doesn’t apply because we don’t write complex algorithims. But, it’s important to make sure we focus our time and attention on the right stuff. So, what is the right stuff.

The best practices to focus on as a front end developer are the ones that have the most impact on site performance and user preception. To that end, here’s 4 topics that you should put special effort into:

  • Prevent jerky, flashy page loads. Restyling content after page loads is annoying and interrupts reading content.
  • Javascript, CSS and images should be minimised and compressed.
  • Images should be responsive and only as large as they need to be.
  • JavaScript and third party content should only load as needed and shouldn’t cause your site to fail or delay.

CSS at the Top

Load CSS at the top of head and JavaScript at the bottom of body. Putting all your CSS in a file at the top of the document prevents any unstyled elements from loading. Avoid inline CSS and printing CSS in JavaScript. Lastly, put your JavaScript in the footer so visitors can read the content of your website while your scripts are loading. If you can’t put your animations in the footer, use a loading graphic.

Prevent Flash of Unstyled Text

Preventing FOUT is a quick and easy win. FireFox and Internet Explorer both do a terrible job loading @font tags. These browsers cause the original unstyled text to flash, sometimes for a couple of seconds before the page is redrawn. This affect can even break your layouts on a page that uses thin custom fonts. All that’s needed is adding a bit of JavaScript when you include custom fonts:

< script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"> < /script >
< script >
WebFont.load({
google: {
families: ['Droid Sans', 'Droid Serif']
}
});
< /script >

Grunt to Compress, Minify and Optimize

Grunt automates your workflow so that you never forget to put your SASS into production mode again. It allows to string together tools so you can combine, minify, and compress your static files, and optimize your images. You just type Grunt build and Grunt works it’s magic. These tools can easily save you 500KB on a large project.

Responsive Images Done Well

If you’re loading a 1400 pixel hero image on a 320 pixel smart phone, your page load is going to suck. Instead, use tools like Borealis or Picture to load the best size image for the visitor. Converting a slide show to responsive images can easily save 400KB. That’s a huge win.

Prevent Single Point of Failure

Modern websites almost always include JavaScript from Facebook, Twitter, Google, LinkedIn, AddThis, Discuss and other sources. If done incorrectly, these third party scripts can each cause your page to white screen. To avoid this is simple. You should always use asynchronous snippets. If you don’t have an Async snippet, then place the JavaScript just above the footer.

CDN Saves the Day

If you use Cloud Flare as a free content delivery network, Cloud Flare will compress and minify all your code and html. It will combine all your CSS and JavaScript and it will asynchronously load all of your JavaScript. All you have to do is set up Cloud Flare which takes only a few minutes. When you do switch to CF, you’ll want to exclude your web font loader and any other critical javascript from the “Rocket Loader” so it doesn’t get loaded last.

So, load your fonts well, clean up your code, correctly load images, and move all your JavaScript to the footer, or just use Cloud Flare and forget about performance.


Thursday, September 12th, 2013

Mysqldump and mySQL/Mariadb import of Microsoft Word Special Characters Windows 1251 (Latin1)

I needed to export and import a WordPress database from Dreamhost. So, I logged in via command line dumped the files with:


mysqldump -u user -p > databases.sql

I then copied those files to the new server and ran


mysql -u user -p < databases.sql

Everything was going great until I loaded a blog post with Microsoft Word special quote marks in it. Arrg! I managed to get the files with quotes intact out of dreamhost with this:


mysqldump --default-character-set=latin1 -u user -h host.example.com -p > databases.sql

However, In Mariadb on the new server Microsoft special characters were still wrong on the new server after the import!

So I ran this:


UPDATE wp_posts SET post_content =
    IFNULL(CONVERT(CONVERT(CONVERT(post_content USING latin1)
                                       USING binary)
                                       USING utf8),
                                    post_content )

Life is good. MariaDB now correctly displays WordPress posts with all the Microsoft Windows 1251 – Latin1 junk.


Tuesday, August 27th, 2013

Drupal 7 AJAX Forms

Using AJAX to update a Drupal 7 form could be easier. The documentation on this feature is extremely verbose, and I had a difficult time piecing together a working example. So, here’s the code to modify the values of a second field when the value of the first is selected. The code below will use the taxonomy_voc drop down to control the product model drop down values. This code does not work with field widgets that define their own AJAX.

Wrap the field that’s being controlled and add the callback and wrapper to the controller field.

Thanks to Anne Sturdivant for her assistance in writing this code.


/*
 *  Implements of hook_form_alter() to update a field via AJAX.
 */

function hitachi_module_form_alter(&$form, &$form_state, $form_id) {
  switch ($form_id) {
    case 'contact_us_entityform_edit_form':

    // Wrap the field that being controlled
    // Add the callback and wrapper to the controller field

    // Create a wrapper for the AJAX callback to populate the model
    $form['field_product_model']['#prefix'] = '<div id="hitachi_wrapper_type">';
    $form['field_product_model']['#suffix'] = '</div>';

    // If we are editing an existing form, we already have the values
    if (!empty($form['taxonomy_voc'][LANGUAGE_NONE]['#default_value']) 
        || isset($form_state['values']['taxonomy_voc'][LANGUAGE_NONE][0])) {
      $form['field_product_model'] = _hitachi_set_model($form, $form_state);
    }

    // Create an AJAX callback. This is the magic bit that does all the AJAX.
    $form['taxonomy_voc'][LANGUAGE_NONE]['#ajax'] = array(
      'callback' => '_hitachi_set_model', //Must match the function name below
      'wrapper' => 'hitachi_wrapper_type',
    );
  }
}

/**
 * AJAX callback to grab all the nodes with a given term.
 *
 */
function _hitachi_set_model($form, $form_state) {
  if (!isset($form['#after_build_done']) && isset($form_state['triggering_element'])) {
    $product_types = array_keys($form_state['triggering_element']['#value']);

    // Populate all the product models with all the product titles from that division.
    foreach($product_types as $product_type) {
      $entities = _hitachi_module_get_nodes_from_tid($product_type);
      $nodes = node_load_multiple(array_keys($entities['node']));
      foreach($nodes as $node) {
        $title = entity_metadata_wrapper('node', $node)->title->value();
        $key = preg_replace('/[^a-z]/i','', strtolower($title));
        $form['field_product_model'][LANGUAGE_NONE]['#options'][$key] = $title;
      }
    }
  }

  return $form['field_product_model'];
}


Thursday, July 11th, 2013

Portland Drupal Group Gets a little Awesome

Have you ever had a client ask for everything to be red? Or perhaps it was auto playing audio on every page load? Well, check these awesome sites out.

Portland is a Drupal epicenter. The Drupal community comes together strongly in many places around the world and Portland’s Drupal User Group is no exception. Once a month we gather for conference quality presentations about all sorts of advanced Drupal topics. Last night our fantastic host, Jason, Yee (JYee) did something different. He had us break into 7 teams with the goal of using 4 specific modules to produce a website that’s awesome in 1 hour. The competition was stiff. Everything from advanced working, feature-complete Drupal builds to sparkles that actually sparkled. I appologize now if any of these screen shots make your eyes water.

Tweet with us at #pdxdug.

We ended up learning a lot about Flags and Rules. I had the luck and privlege of project managing a 1 hour project for an amazing Drupal team:

@illepic – Chris Bloom, Drupalist at Superstar Media
@mpgeek – Eric Paul, Drupal developer at Open Sourcery.
@mikey_p – Michael Prasuhn, 1/2 of Shomeya

The Awesome Websites

PDX DUG 1

dug1
modules: bad judgement, fivestar, userpoints
alt/bonus module: webform

PDX DUG 2

dug2
modules: nodequeue, privatemessage, viewfield (or eva)
alt/bonus module: webform

PDX DUG 3

dug3
modules: field collection, flag, userpoints
alt/bonus module: views_field_view

PDX DUG 4

dug4
modules: better exposed filters, fivestar, rules
alt/bonus module: webform

PDX DUG 5

dug5
modules: bad judgement, flag, message
alt/bonus module: userpoints

PDX DUG 6

dug6
modules: field collection, message, privatemessage
alt/bonus module: rules

PDX DUG 7

dug7
modules: field collection, message, nodequeue
alt/bonus module: privatemessage

Special thanks to O’Rielly, Drupalize.me, and Lullabot for sponsorship that included beer, pizza, coffee cards and an OScon pass! My group ended up winning, but all the sites are awesome. So, I’ll leave it up to you to guess which one was ours.


Monday, June 17th, 2013

Increasing Klout Score by 30 Points

Does LinkedIn ever send you messages that aren’t spam? Well, anyway, while deleting my LinkedIn spam, I saw one of the largest SEO firms advertising an SEO manager position that required a Klout Score of 50. And, I thought, well that’s lame! Who cares about Klout? Then I thought, could I hack my social media profiles to increase my Klout score without much work?

Hacking Your Klout Profile Score

As someone who does not use social media, outside of using Facebook to look at family photos, you’d think I would have a hard time getting a Klout Score of 50. However, after only 20 minutes of effort over a couple of days, I’ve managed to create a significant increase in my score.

My score going up

Creating the increase turned out to be pretty simple. Once you log in, Klout has access to your private Facebook posts so your mother liking your posts on Facebook shoots your score way up. But, what if your mother doesn’t like you? Tweet Klout Support and other social media support accounts that you know you will likely get a reply from.

Try, tweeting “@kloutsupport klout support is fantastic”. Even a single response from a popular account will blossom your score quickly. Lastly, make sure all your networks are accounted for. I’ve noticed my Google+ account has never showed up on my Klout profile… so I contacted@KloutSupport and here was their advice… get someone to comment on one of your posts to make your profile count!

Add all the networks except ones that don’t count

Don’t use Instagram? Create one and get your  family to like your stuff. Hate Four Square? Yeah, no one (except Klout) cares about your check-ins, but a few interactions get you a strong bonus. A small interaction from is worth a huge boost to Klout. Also, make sure you get at least 2 or 3 friends to give you K+ points. I know, I know, it’s stupid. No one uses K+, but Klout gives huge weight to their own network. But, there’s some bad news. So far Klout seems not to register these networks for me:

  • Bing
  • Flickr
  • Blogger
  • Tumblr
  • WordPress.com

Get easy K+ by trading

Too lazy to bug your friends and family to give you K+? Easy, trade K+ with another marketing Klout user. I always return K+ to anyone who gives me K: http://klout.com/#/gregory_boggs.

Make Google+ count in your score

Michelle
JUN 14, 2013 | 01:13PM PDT
Hi Greg,

I apologize for the confusion. Please note that Google + stats will only populate from public posts within the last 90 days when you receive +1s, comments, and shares from other users. I looked up your account and saw that you have 0 public posts within the last 90 days which means there are no +1s, comments, and shares from other users, so your stats are displayed properly. I’ve attached a screenshot of what I see when I view your Google + account.

Please let me know if you have any other questions and I will be happy to help.

My G+ profile hasn’t done much for my score still, but all my other networks have registered. It seems to be a bug in Klout’s measuring of G+, but they said it can take several days, so we’ll see.

Score Increase Results

Well, none of my G+ followers registered, but I’ve managed a 33 point gain. The trick? Added my partner’s Instragram. My last test will be to use some extra Klout accounts to see if passing K+ to myself improves my score.

klout-final

Problems with Klout

  • An unpopular Twitter account you haven’t used in 2 years is worth more than other networks.
  • Your websites only count if you host them on Blogger, WordPress or Tumblr.
  • Your family on Facebook count way too much.
  • People who circle you on Google+ don’t count.

You can add Facebook pages that you admin to your Klout profile, but it disables your Facebook profile. Lastly, spamming a few posts to Twitter and dropping a comment on two on your own G+ gives a quick boost because Klout score is largely influenced by activity.


Friday, November 30th, 2012

How to watch Netflix on Ubuntu 13.04

I’ve only been waiting for this since the day I first purchased a netflix account… The performance wasn’t so great for me… but after shrinking the window and disabling the useless “HD”, it was watchable… Not as fast as the iPhone, could be related to the fact that I’m using the built in Free drivers and a 2d desktop.

Yesterday, developer and programmer extraordinaire Erich Hoover and I spent several hours working out all of the Netflix Desktop kinks. Most users will have no problems with installation now.

Here is how to install the Netflix Desktop App on Ubuntu. Open a terminal and run these commands:

sudo apt-add-repository ppa:ehoover/compholio

sudo apt-get update && sudo apt-get install netflix-desktop

 

http://www.iheartubuntu.com/2012/11/ppa-for-netflix-desktop-app.html


Saturday, October 13th, 2012

Maximize your blog layout

It’s been many years since the blog become the standard layout of the web. However, many people still struggle with the basics of how to use the blog layout to maximize their content and reward readers. When a friend ask me what he should do to maximize his blog content, I  went and found a couple of blogs that maximize their layout to promote content.

What is a Blog?

In case you don’t know, a blog is a traditional website with no homepage. Instead of a home page, the website has a reverse chronological listing of content. And, that’s it! Many blogs also feature comments.  But, otherwise, there is no difference between a blog and a website other than the home page.

Disadvantages of a Blog

The disadvantages of a blog are that your blog is only as good as your last post. Unlike a traditional website, a blog must be timely and each visitor is going to judge your blog entirely based on your most recent post.

Advantages of a Blog

It’s always easy to figure out where to post your most recent post. It always goes at the top of your home page. The best blogs use the sidebar (generally on the right) to feature evergreen content that rarely changes.

Layout Elements to Count On

The most effective layout elements for a blog are:

  1. A featured post section that contains a hand selected list of content that most represents the blog. For larger blogs, this might be multiple sections.
  2. A popular posts section that should change every week automatically. For high traffic blogs, this may change every day.
  3. Related posts should be a small list of related posts. Generally, these are placed at the bottom after each article. This list can be automatic, but selecting related posts by category also works well.
  4. About the author(s) with photos. Reading about you is as important as reading what you have to say. This can go below the post, in the sidebar, or near the top of each post.
  5. Social sharing, FB Like, follow buttons, and email sign up are key actions you want readers to take. Sharing buttons should be large an obvious.  If you think your social media buttons are too large… look over Move On.org again. Move on does it right.
  6. Your home page should load at least 10 posts if not more. The majority of your visitors will read everything on your front page before leaving.  They most often will not click any links to other pages of your site… so give them the goods and lots of them all on the home page.
  7. Each blog post is a new opportunity to promote previous articles. When writing for a blog, you’ll be repeating key points many times. Every time you mention a topic you’ve written about before, link to it!

As short as my list is, it’s extremely difficult to find a single blog that takes advantage of all of these layout elements. Got a better example of the perfect blog? Send it over.


Tuesday, June 26th, 2012

Drupal Scrum Tips

So, I’d like to stop using waterfall development for Drupal projects. The first step is to teach myself to be a good advocate for something different… Started way back in the early 90′s was a thing called scrum… It really is very different. Here are some resources that don’t suck.

http://blog.merge.nl/20110619/scrum-driven-drupal-development

http://slides.liip.ch/img/documents/agile-drupal-development-with-scrum_vienna.pdf

http://drupaldojo.com/session/scrum-revolution-embrace-future-interactive-development

 

Not all positive:

http://2011.doitwithdrupal.com/2011/sessions/pitfalls-being-agile

It’s funny, when I got a computer information systems degree, we all laughed about waterfall development. But, client’s demand fixed bids! Can you be agile with a fixed scope, budget, and timeline?


Wednesday, March 14th, 2012

Find Vulnerable WordPress and Drupal

Drupal:

grep 'DocumentRoot' /etc/httpd/vhost.d/* | awk {'print $2;'} | xargs -I {} nice find {} -name CHANGELOG.txt > ~/drupal-sites.txt

Produce clean report:

cat ~/drupal-sites.txt | xargs head -n 3 > ~/drupal-sites2.txt

WordPress:

grep 'DocumentRoot' /etc/httpd/vhost.d/* | awk {'print $2;'} | xargs -I {} nice find {} -name readme.html > ~/wp-sites.txt

Todo: Add string to pull WordPress version with pretty formatting.

Django:

 
nice find -L /vol/www/ -name 'PKG-INFO' | xargs grep '^Version:' > ~/django-sites.txt


Tuesday, January 31st, 2012

Drupal Security Updates with Drush

Since I get tired of hunting through forum threads for correct answers to common task. So, for the lucky souls to find this trick, here is how you run just the security updates to a Drupal install with Drush from the command line.

drush upc -u 1 --pipe | grep 'SECURITY-UPDATE' | cut -d" " -f1 | xargs drush upc -u 1 -y

Found here.



All content © Copyright 2014 by Greg Boggs.
Subscribe to RSS Feed – Posts or just Comments