I had a hard time finding an answer for this today and thought I’d share the solution. Please see the original article I found that helped me link to original article. My code did turn out to be slightly different given the positioning of the Google +1 in the footer of the Beacon main site but it was based on the code in Danny’s article.


First I needed to find an icon like the one requested. Here are a few more options on where to find good icons:

• IconFinder – I was unable to use the version from here but they do have others
• wplift – I was able to find a good version here
• Designrfix – I found this after but it looked like a good selection

Now on to the code. I used Googles customize your +1 button to get the google parts of the code I needed.

I first placed this part of the code in the head of the document

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Then I took Danny’s HTML code and changed it up a bit to include my unique URL and placed it where I wanted it on the HTML page

<div class="googleplus">
<div class="googlehider">
<div class="g-plusone" data-annotation="none" data-href="https://plus.google.com/u/0/b/112352004720495408285/"></div>
</div>
<img src="images/googleplus.png" class="mygoogle" />
</div>

Lastly I took Danny’s CSS code and also changed it up a bit so that it worked in the footer of the main Beacon site.

.googleplus {position: relative; display:block; float:left; padding-right:5px; width: 35px; height: 35px;}
.googlehider {opacity:0; height:35px; width:35px; position:absolute; top:0; left:0; z-index:3; visibility: hidden;}
.mygoogle {position:absolute; top:0; left:0; z-index:2; top:1px;}

Here at beacon I am a Developer. I have always wanted to be some type of artist but as I grew up found that my technical and problem solving skills for code and programming well outweighed my artist skills. I do however still like to try and learn as much as I can and see if I can get better with practice. I was really struggling with doing things you would normally do in Photoshop in Illustrator. Not that I know what to add or where to add it but I was failing before I even reached that point because I didn’t know how to. Our new Designer Jennifer Calogero sent me a link to some tutorials that really helped me learn to accomplish these things. Seeing them and actually accomplishing them are two very different things and I think for me I actually have to do it step by step to get a feel for what I am doing. After the tutorials I definitely feel more confident in my ability to add some of these small but very important details in illustrator. I have attached my end product after playing around with a few of the items and I encourage anyone learning Illustrator to actually go do some of these tutorials as well.

The article is located at: http://vectips.com/tutorials/creating-seamless-textures/

You can download my ai file by clicking here. Please note I played around with settings after doing each tutorial so the results are not exact.

If you are working in WordPress and are thinking about modifying the core WordPress code I’d like to tell you why you shouldn’t. I’ll start with a reminder that WordPress has created both plug-in and theme capabilities to help customize every part of WordPress including looks and functionality. Given you can accomplish what you need using these tools, hacks shouldn’t be needed and are not recommended.

Reasons why you shouldn’t hack WordPress core files:

• There’s almost always a solution that doesn’t involve hacking core files
• Almost all situations should be handled with a hook or custom plug-in
• Upgrading to the latest version or security patch will overwrite your changes
• Core file changes could cause other plug-ins to not work correctly
• Makes it more difficult for other developers to debug or solve issues

Modifying the core files is a quick fix that will likely end up more costly than doing it correctly the first time or the functionality could just disappear on the next upgrade. It is more likely among amateur and beginner developers that are not aware of the correct way to implement the functionality. I’m not saying you will never have to edit the core files because there is that chance you may find a bug. But in that case you need to report it to WordPress so they can fix it in the next upgrade.

So next time you’re working with WordPress take some time to look through all the WordPress documentation out there and I guarantee you there is a better way of solving the issue that will not interfere with future development and updates.

As for beginners to WordPress I highly recommend the print and PDF version of the book Digging Into WordPress by Chris Coyier & Jeff Starr. It is the best WordPress book I’ve come across and on my top 3 books of all time. I cannot express my love of the spiral binding (I wish all tech/developer books did this), the large and colorful print and screenshots throughout the book and most importantly the content itself covers everything you would want to know in a detailed, accurate and easy to follow way.

Today I decided to devote some time to learning what exactly this responsive web thing everyone is talking about is .  I found the perfect article on nettus about the topic.

The video broke down the mysterious new technology into human language and then shows some good resources and examples of how to implement it.   This video was so good that I even did a little test driving on one of my current projects and it worked like a charm.  Sadly this new technology does not work in IE8 and below but there are some solutions out there that claim to allow backwards compatibility.

One of the most important things to think about with this new way of handling different screens is how modular is your code?  It’s also very exciting to me personally given I have always been a big supporter of best practice and developing the right way with good clean hack free code and this will push others in the same direction if they want to keep up with the times.  Your code needs to be solid and clean enough to be completely detached from any presentation layers and remolded as needed.  This means no inline styles, no tables for layout, no outdated font or other tags, and developing with separating content and presentation in mind.

It’s an exciting step forward and I am glad I got past my fear of the unknown and seemingly impossible to learn that responsive web is not scary at all.  In all truth it’s one of the simplest things I’ve learned to date and it uses what you already know about CSS.  The more complicated parts of responsive web come with the UI and deciding what viewers experience for each device/screen size/orientation.

As a developer I like to listen to music while I am working. I’m sure this goes for many people across professions so I wanted to introduce everyone to something I was recently introduced to, Spotify.  As a quick summary Spotify is like having an iTunes stocked with anything you’re in the mood for.  You can make songs available for offline access and even share with friends.  If by chance what you’re in the mood for is not available you can add your own files and retrieve them just the same.  You can use it anywhere and that includes mobile!  You also have a lot of features similar to iTunes like Library, Search, top lists and Playlists.

For 9.99 a month you get all that.  I have to tell you that it is worth every penny and I’ve only had it for 2 hours.  Just imagine being able to listen to anything you want instantly.  It’s almost as if you get Music Block from the possibilities.

Some people think there is no ‘right’ or ‘wrong’ way to code. I agree and disagree. I’m not saying there is only one right way and all developers should live by this method. I’m saying that there is a wrong way for anything. People can go about the same thing in many ways and it would be considered right. Each developer has their own style and comfort zone in how they do things and as long as it is efficient, doesn’t bear on page performance and doesn’t fall into the ‘wrong’ category then it’s still considered good code.

Right

• Following the rules that the W3C has defined for creating websites
• Following Web Standards, Best Practice and the KISS principle
• All code validates and runs error free
• Separate content from presentation
• Semantically correct markup
• Fully minimized and clean
• Makes sense

Wrong

• Using things in a manner they were NOT meant for (ex. tables for layout)
• Hacks that are unneeded (hacks are normally only needed for bad code)
• Overly complex (adding in some code because it was too simple)
• Re-writing built in functions (re-inventing the wheel of php)
• Doesn’t make sense

Right

To fully explain things there is the W3C which is an organization that standardizes Web technologies. They are the people who define how the web works in terms of HTML. Following these rules will not only keep the need for hacks at bay but it will also keep your code valid because that is what you are validating against when it comes to HTML and CSS. Yes… you are validating your code against the rules they have outlined for you. So tell me again why we wouldn’t follow the rules?

As for fully minimized and clean I mean can I look at it and point out anything not being used? Did the old stuff get cleaned out? Are there unnecessary things? Are there too many unneeded wrapping divs? Is the programming of the code logical? Can it be done in a simpler way? Basically take the code and remove everything you can from it. Make it as small and compact as you can without losing any functionality. Once you’re done it is minimized and clean.

Overall when I say there is a ‘right’ way I mean when any knowledgeable developer can look at the code and figure it out almost instantly because it is done the way it was intended and follows Web Standards and common sense then it is good code.

Wrong

Ahhhh the ‘wrong’ way. Man oh man is there a definite wrong way of doing anything in life. Let’s take going to a grocery store that is half a mile down the road. What is the right way to get there? There are a few ways that would work I mean you could walk, take a bus, ride your bike or even drive your car. All these work and are logical. Well what about walking 1 mile the opposite direction to get on a bus that takes you to the airport where you fly round trip to the furthest destination and on return get a rental car and drive straight to the grocery store. This in my eyes is wrong.

It may seem dramatic to some but you have to admit that’s not the most efficient way to get to the grocery store. You might catch yourself thinking ‘Why would anyone do that?’… And that is a good indicator question that determines bad code.

On a less obvious side there are other things that make it the ‘wrong’ way including invalid, erroneous, weighted, hacked and non-logical code. When people use tables for layout it is actually wrong because it is invalid. If errors pop up or it takes triple the time to load due to controllable factors it is wrong. If you use JavaScript to apply CSS classes or inline styles when there is no JavaScript functionality on the page then it is wrong. If you are re-writing built in functions for any scripting language then it is wrong. These are just a few examples that there are wrong ways of coding things.

Conclusion

In conclusion I understand that some developers use floats and some use positioning this is their style and both methods work. There is a difference between that style factor and the just plain wrong or outdated factor.

I know I can’t make everyone a believer overnight, some will just always believe if it runs then it must be good code. However I encourage you to Google the ‘benefits of web standards and best practices‘ and after a few good reads go ahead and try to search for the ‘downfalls of web standards and best practices‘. Since I don’t know of any downfalls please comment below if you do find any.

Also stay tuned for more blog posts about this topic.

This checklist is not all-inclusive but it covers some major areas that need to be tested with any major development.

• Accessibility (SortSite http://www.powermapper.com/products/sortsite/)
• HTML Validation (W3C http://validator.w3.org/)
• JavaScript Validation (JSLint http://www.jslint.com/)
• CSS Validation (W3C http://jigsaw.w3.org/css-validator/)
• Performance  and speed (GTmetrix  http://gtmetrix.com)
• Design (PixelPerfect http://pixelperfectplugin.com/)
• Test in all browsers listed in the requirements
• Test without JavaScript, Flash and other plug-ins
• Print version

Lastly take a look at the logic and code itself to ensure that it follows Web Standards, Best Practice and the KISS principle (http://en.wikipedia.org/wiki/KISS_principle).

Over the past few days I’ve had the chance to do a lot of research and decided to take a stab at a more lightweight version of a jump menu or sometimes referred to as a quick menu. We often include these in the header area and place important ‘quick links’ inside for users to go directly to important areas of the site. Below I have listed the features and source code for this.

NOTE** Examples are in iFrames

Features

• W3C Valid
• 508 Compliant
• Easily styled with CSS
• No Script version (on hover)
• Supports absolute or relative links
• Supports target=”_blank” (new window)
• Browser Compatible, tested on:
  • Windows: IE 7+, Safari 3+, Firefox 2+, Chrome
  • Mac: Safari 5, Firefox 3

Click here to download source code. Or click here to go see it in jsfiddle.

URL Linter – http://developers.facebook.com/tools/lint

Facebook’s URL Linter is an extremely handy tool for testing an instance of the Facebook like button. It allows you to view how it will look in the Facebook feed. If you’ve ever tried to test a like button you know that Facebook caches the results for an unknown amount of time which can be very frustrating while trying to test.

It’s truly a priceless tool.

There are many add-ons to test a web pages load but for some reason I have grown attached to GTmetrix. GTmetrix is a website that offers page load analysis along with the methods to fix any existing issues. I like to run all my development through GTmetrix to ensure the most optimized code as well as a smooth user experience.

If you register for a free account you can then take advantage of additional features like Save & Compare or Monitoring.

Also don’t overlook the GTmetrix Bookmarklet to test any page easily. Just drag and drop it into your bookmarks and you can click it to test any page you visit.

“The web should be fast.” – Google, Inc.