Roll Your Own Social Media Buttons

I recently tested out several WordPress’s social media share plug-ins and disappointed with unnecessary injections of JavaScripts and CSS. Some services even use their own site as a gateway to server up the social media services. I was frustrated and ended up rolling my own, thanks to this blog post. Here’s my customized codes:

<a href="<?php the_permalink();?>&t=<?php the_title(); ?>" target="_blank"><img src="facebook.png" alt="Share on Facebook"></a>

<a href=”<?php the_permalink() ?>” target=”_blank”><img src=”google-plus.png” alt=”Share on Google+”></a>

<a href=”<?php the_title(); ?> -&url=<?php the_permalink() ?>” target=”_blank”><img src=”twitter.png” alt=”Share on Twitter”></a>

<a href=”<?php the_permalink() ?>” target=”_blank”><img src=”linkedin.png” alt=”Share on LinkedIn”></a>


$ sass --watch style.scss:style.css --style compressed

// Import
@import "normalize";

// Variables
$body_font: 'Georgia', serif;

// Mixin
@mixin rounded_corners($rounding) {
-moz-border-radius: $rounding;
-o-border-radius: $rounding;
border-radius: $rounding; }

Apache Rewrites

Redirect non-www to www with .htaccess

RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.
RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L]

Example: to

Add trailing slash (/) to URL:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} !(.*)/$
RewriteRule ^(.*)$$1/ [QSA,L,R=301]

Example: to

Mason Law’s Email Newsletter

Need an email newsletter with Mason Law’s brand? Check out our new email newsletter template.

If you would like to use the template, follow these steps:

  1. Click on the template.
  2. View source and copy codes.
  3. Paste codes into an editor like Dreamweaver.
  4. Edit the contents.
  5. Save codes and paste into your email client using HTML view. If you’re using a Mac, open the new file in Safari and hit command-i. The email will be imported into Mail.
  6. Hit send.

Please note, the header image lives on our server so you don’t need to upload the header somewhere else. Just leave the URL absolute.

Mason Law Gets Responsive Makeover

In January 2012, we relaunched a responsive makeover for Mason Law web site. One of the challenges was that the new design has to work with and response to the existing contents, which being added and updated through  MODX, an open source content management system. Fortunately, MODX’s flexibility doesn’t get in the way and also allowed us to bring the markups up to HTML5.

In making responsive layout, we took the mobile first approach. The entire navigation system is moved to the bottom to allow the content to be more prominent and improve accessibility and SEO. On small screens (smartphones and tablets), users can get to the main content quickly without having to scroll through the menus. On larger screens such as desktops, the navigation is repositioned back to the top using CSS technique.

As an institution, accessibility is one of top priorities; therefore, we make sure the site works well with screen readers and legacy browsers including IE7 & 8. We hope that the new site could help you find information quickly and effectively on any device that you are holding in your hands.