Determine Your Authorrank, Automating Workflow & Curating Content – Webpreneur Discoveries #1

Buried Treasure

Web Design

Web Platform Docs is a community-driven site that aims to become a comprehensive and authoritative source for web developer documentation.

Automating front-end workflow is a great slide deck that introduces you to a new workflow of tools to keep you productive on the front-end.

Instantly create masks, cutouts, and clipping paths online with Clipping Magic. I found this to be an invaluable tool, that makes extracting backgrounds a breeze.

Marketing

Determine your AuthorRank based on an algorithm that takes into account the quality, quantity, and diversity of your authorship posts.

Watching Moz webinars is a great way to learn something new about online marketing. Sign up for upcoming webinars or watch archived ones.

11 SEO Changes That Will Give You Big Results

  • Trick #1: 404 error pages can lead to more indexed pages
  • Trick #2: Don’t be afraid to start a fight
  • Trick #3: Does your infographic move?
  • Trick #4: The skyscraper technique
  • Trick #5: Use personas to drive relevant SEO traffic
  • Trick #6: Optimize for click-throughs
  • Trick #7: Beg, borrow or steal
  • See the rest here

Why marketers should become more technical and 6 tips to get started from the experts. There’s been a lot of talk recently about how marketing is evolving, and marketers need to keep up. Tips from Ivan Kirigin, Michelle Sun, Fred Wilson, Jamie Steven, Will Lam & Andrew Chen.

Great discussion on how to curate content without being a blog stealer? Really useful for any bloggers out there trying to up the ante when it comes to amount of posts per week. Going along the same line is another great article that explains what marketers need to know about ethical curation.

Open Site Explorer helps you examine a sites link profile. Has both a free and paid version. Tracks inbound links, top pages, linking domains, and so much more!

Are you looking for the latest trends in social media marketing? Mobile social media is exploding according to new research.

Interesting

17 ancient abandoned websites that still work.

The Most Effective Social Media Platform You Should Focus On In 2014

YouTube Help

Most Effective Social Media Platform for 2014?

View Results

Loading ... Loading ...

Let’s face it. Social media is changing the way we interact and communicate in society. Technology is dominating and changing the world as we know it whether you like it or not. There are thousands of social media websites that people visit and utilize daily. Follow the conversation here for instance.

Businesses are starting to capitalize from using social media in a major way. If you have a business or you want to create an online presence, one of the most powerful tools you should use is video. Why? It’s much quicker, faster, and easier to get your message out into the marketplace when balancing impact with time & cost.

Videos are being watched everywhere on the internet (literally). On YouTube they have millions of visitors daily (literally). In our society most people have a short attention span (literally … lol) and have a tendency to want everything fast. Most people don’t like to read as much as they use too, however, they will watch your videos if there interested and you engaged them in a strategic manner.

Could you imagine having more than 100 to 300 videos on autopilot creating leads and income while you sleep? It may sound crazy, however people have been doing this for years. You have kids and adults from all over the world living their dreams starting businesses from home with YouTube videos. The greatest thing about videos is it can go viral… worldwide.

With a little creativity and a decent camera or screen capturing software, you can create a captivating, targeted video for the audience you are trying to reach, and place it right in front of them via other social media channels, optimizing your YouTube SEO, Facebook promoted posts, YouTube advertising (featured video spot), and so much more.

You don’t need all the expensive equipment in the beginning. You don’t have to get everything right, just get it going. Your videos might not be the best in the beginning, however the more videos you create the better you will become. No one becomes a professional video maker overnight. You can learn about lead generation systems and creating your own website later.

It’s a good idea to focus on your video creation in the beginning so you will have a better understanding of your lead generation systems and your website. Some of the same principles you will learn and use in your videos can be applied to other areas in your marketing.

I highly recommend you or anybody with a business to utilize social media in 2014 to the best of your abilities. Social media is on track to explode in ways that you would NEVER imagine.

By the way, the inclusion of YouTube is my opinion. There are many other social media platforms such as Vine that could surprise us. Plus the big platforms in the poll above all in their own way will grow. Social media in general is growing. When the sea rises all boats rise.

Would love feedback & your thoughts on the topic below.

Top 15 Ways to Secure Your WordPress Install

Wordpress Security

As the digital world starts taking over more of the real world; security or digital security to be more specific, is becoming more and more important. Then there’s WordPress; and WordPress is becoming more and more popular (currently 19% of the web). Even web applications are starting to be built on top of it.

Private information and even credit cards are flying around. So, obviously security is really important. There are a lot of steps to take to make sure our WordPress installs are secure.

Keep Everything Up To Date

Number one is kind of the obvious stuff. Keep everything up to date. Keep your WordPress install up to date. Keep all your plugins up to date.

As time progresses hackers figure out ways to breach the current software, while simultaneously the developers (most of them at least) are working to keep their code up to date with the latest standards. A lot of hacked sites are due to old out of date plugins or WordPress installs.

Don’t Use “admin” as a Username

Then, the next thing would be your admin login. You’d be surprised how much you can access from your admin login. You can access any of your theme files. PHP can be injected in there; they could take down your whole site just by having that login. So, you’ll want your user name not to be admin, which is the default. You want to change your user name to something more specific to you.

Strong Password

Also, the password needs to be a strong password, which today is upper case and lower case letters, with a sprinkle of various symbols and numbers as well. If you have one without a symbol and then you add a symbol, it’s adding that much more complexity; and is that much harder for a hacker to hack into that.

Hacking a password

Same thing goes for your database password, and user name, and your database name. Those should all be pretty encrypted as well.

Don’t Use Same Username & Password for Multiple Sites

I know a lot of this is common sense but so is eating healthy. So, moving along, you don’t want to use the same user name and password for any of your other sites. There is software such as 1Password and others that allow you to have and keep multiple passwords for multiple sites.

You can have a different login, a different user name, or even the same user name that is unique to yourself; and different very strong encrypted passwords that are unique to each and every site that this software can store for you, so you don’t have to remember and copy, and paste each and every one. You can just hit a button and it’ll automatically log you in.

This will not only help your WordPress site, but every site you have a username & login to; Your bank; Your email. Etc.

So that’s the “simple” stuff. On to some more “technical” stuff.

Protecting Against Directory Browsing

One step you may want to take is to make sure there is an empty index.php or index.html file in every folder that doesn’t have an index file. This is usually the case by default in WordPress, but doesn’t hurt to check. What this does is make it impossible to browse the folders directly, something that some web hosts support.

You could do the same thing by disabling directory browsing globally by adding the following code to your .htaccess file.

# Disable directory browsing
Options All –Indexes

SSL for Admin Interfaces

You can also force SSL on your admin interfaces within WordPress. This will make it a lot harder for potential bad guys to hack in. Although SSL won’t work without support from your host so you might want to contact them regarding this if your not sure. Some hosts may include this while others might charge for it.

It’s pretty easy to force SSL in your admin. Just add this code snippet to your wp-config.php file in your root WordPress directory.

define(‘FORCE_SSL_ADMIN’, true); 

Secure FTP

To add security when you are accessing your site via FTP, you might want to consider using SFTP instead, which is the same except the S stands for Secure. Again some hosts have this automatically, others you may need to contact to enable.

File Permissions

There are different file permissions and folder permissions that WordPress requires in order for it to run properly and to be able to properly access things through your admin dashboard, such as uploading images and files. Making sure that these files & folders have the appropriate permissions will go a long way.

So the files should be owned and writable by the user account and set to 644. Folder permissions should be set to 755. wp-config.php should be separately set to 600 (source). This will give you the maximum available protection, while also keeping everything that needs to be accessible, accessible. And of course, ask your host if you are unsure about these things. For more information you can visit here.

Change the Database Prefix

Just like changing your username from admin, we need to change the database prefixes from wp_. This is default for many WordPress installs including the convenient one-click WordPress install provided by many hosts. If you don’t change the database prefix, the table names of your site’s database are easily known to the person who is trying to hack your site.

In order to accomplish this you can follow the steps in this tutorial here or you can use a plugin like Change DB Prefix or similar.

Protect wp-config.php

*Update* Moving it outside of the root offers more protection but is only possible in root installs.

As we know now, our wp-config.php file contains all of the confidential details about our site. So it’s pretty important to protect this at all costs. An easy way to do this is by adding the following code to your .htaccess file.

<Files wp-config.php>
    order allow,deny  
    deny from all  
</Files>

Protect .htaccess

We can now protect our wp-config.php file, but what about our .htaccess file? Don’t worry, we can use the same .htaccess file to protect itself from being preyed upon. You just need to place below code in your .htaccess file.

<Files .htaccess>
    order allow,deny  
    deny from all  
</Files>

Hide Your WordPress Version

*Update* Hiding your WordPress version from the meta generator in the head doesn’t make sense as nowadays most properly coded themes add the WP version to styles and scripts.

Removing the generator meta which supplies which WordPress version you are running is important in protecting potential hackers. If you have enable the WordPress version then hackers will know when your version is out of date, and can attack accordingly. If you can absolutely not update your versoin of WordPress, this may be a good failsafe to at least hide the fact that your not running the most current version.

To hide your version of WordPress place this in the functions.php file of your current theme.

remove_action('wp_head', 'wp_generator');

Also remove it from RSS feeds using this:

function wpt_remove_version() {  
    return '';  
}  
add_filter('the_generator', 'wpt_remove_version');

Authentication Unique Keys and Salts

Authentication Unique Keys and Salts are located in your wp-config.php file and should already be there, but its good to double-check this. They are located below you database username & password requirements. Actually when you manually install WordPress on a server, you also need to manually add this. Within the commented out section is a link that will auto-generate a unique set of keys that you need to copy and paste back into the wp-config.php file.

Limit The Number of Failed Login Attempts

Limiting the number of failed login attempts could protect your site against anyone trying to guess your password or a bot trying to brute force its way in. The plugin that provides this functionality is Limit Login Attempts.

Regular Backups

If you’re not already keeping regular backups, you should be. This will not only give you peace of mind, but is almost like restoring Windows to a point in time before you downloaded that virus if you catch my drift.

Backups will not only help you recover if a hacker does succeed in accessing your site, but there are a plethora of other things that can go wrong. Its just a smart thing to do, especially if your running a business.

Some free plugins to help you keep regular backups are:
BackUpWordPress
WordPress Backup to Dropbox

Conclusion

I think that’s it. I hope I don’t have to reassure you need to start taking security more seriously. If you’re not convinced here are some interesting yet scary statistics:

  • 600,000 Facebook accounts are hacked each day (that’s about 7 accounts per second)
  • 100% of the top 100 paid apps on Android have been hacked.
  • 3 in 4 Americans have fallen or will fall victim to cyber crime due to being hacked.
  • 3 in 4 people use the same password for multiple accounts. Source

Put those last two together and I think we are on to something here…

You kind of have the idea by now. It’s just really important to be as secure as possible especially as the technology continues to develop even faster than most people can keep up with. The amount of security holes are probably growing as fast as the technology, so the amount of effort that we need to put into security would probably be growing over time as well.

Custom Thumbnail on YouTube Videos

YouTube Help

First in order to enable you YouTube videos to be able to add custom thumbnails you must both verify your account & become a YouTube Partner. Both of these steps are simple.

Verifying Your Account

In order to verify your account you need to go to the “Video Manager” shown below.
YouTube Video Manager
Once you do that you need to select channel settings on the left bar. Once you do you will be shown a screen like below. You need to make sure your account is verified & you are a certified partner. Once you go through the process the little light for custom thumbnails will turn green.
YouTube Settings

After custom thunbnails is enabled we can now add it to one of our videos. To do so we need to go back to “Video Manager” and then select “Edit” on the video which we would like to add a thumbnail to. To the right of the video under the automatically generated thumbnails to select from there should now be a button enabled named “Custom Thumbnail”. Upload your photo and now that will be what people see before they play your video!
YouTube Custom Thumbnail
The best size to make your thumbnail would be 1280 x 720 pixels. This is so that no matter how large your video is displayed, the thumbnail will still remain nice and crisp.

Footer Menu in WordPress with CSS & HTML

Footer Menu in Wordpress

Learn how to create a footer menu within WordPress not using widgets but with CSS & HTML within the theme files.

A lot of times when creating a custom WordPress theme not all aspects of the theme need to be accessible from the WordPress dashboard. One being simple footer navigation that may never change. If it does change its not a big deal to change, but setting it up initially using widgets is kind of overkill in my opinion for just a few simple links and some copyright information.

With just some simple CSS & HTML we were able to create a decent looking menu in the matter of a minutes.

Follow me through the video and if you have any questions please leave them in the comments.

Optimizing “WordPress SEO” Plugin Settings

Optimize Wordpress SEO Settings

WordPress SEO has quickly become the #1 SEO plugin for WordPress serving millions of happy bloggers including myself. I decided to make a video about WordPress SEO because when you first activate the plugin there are actually a lot of additional things that can and should be done in order to get the most out of it. Enjoy!

A couple of useful links relating to WordPress SEO are as follows:

WordPress SEO – The Definitive Guide
WordPress Plugins by Yoast

Utilizing Your iPhone as a Web Designer

Utilizing iPhone

I can make a pretty bold statement. If your a web designer, you most likely have a smart phone. I don’t have any statistics to back this up so I’m going to take a poll and you can see for yourself:

What kind of phone do you have? (web designers only please)

View Results

Loading ... Loading ...

Hopefully I’m right.

So it is no doubt that our smart phone supplies us as web designers, with so many tools & resources that would be foolish for us not to take advantage of.

Podcasts

I know that for me, I have a passion for web design, so its not hard to listen to podcasts over music. I probably listen to 1-2 hours of podcasts per day and I know that sure sounds like a lot but I’m just using my time wisely. I listen to podcasts while I drive, when I’m at the gym, and when I wash dishes (lol, no dishwasher here). Honestly, listening to other entrepreneurs, web designers & marketers has made me a better web designer, marketer & entrepreneur. You are what you consume. Here are some of my favorite podcasts I listen to regularly:

Shop Talk Show
The Web Ahead
Entrepreneur on Fire
Top Marketing Strategies

If you have any good podcast suggestions please let me know!

Feedly

Feedly is basically an RSS reader, and a good one at that. If your not up on the “web” news you need to be. The one thing as a web designer you don’t want to get stale are your skills, and the one way you will sharpen them is by reading otherwise over time they will become dull, and sooner or later useless. Some good times to read are when your in the doctor’s office waiting to be called, getting an oil change, don’t feel like watching TV or you do but as an alternative you can … read. I know its probably hard at first for some people, but trust me, if you discipline yourself in the area of reading, it will pay off big time.

Taking Screenshots

Its really the simple things that make us a better web designer. Screenshots are one of them. We all know how to take them on the desktop but how about your iPhone? You just hit the home key and top button at the same time and it will save your screen in Photos, then you can email yourself that photo for later reference. This is great to grab snippets of articles or what not that you want to refer to later. Speaking of screenshots, you guys might like this one:

iPhone Screenshot

WhatTheFont

This app is really cool! You can take a picture of any font and it will scan through its database and let you know what font it is! VERY useful! So cool I figured it deserves its own spot here in my blog post.

Other Apps

Here are a list of some less used but intermittently useful apps:

Evernote
Dragon Dictation (great for jotting down ideas when you don’t have a free hand to write!)
Color Stream (helps make color palettes)
WordPress (haven’t even opened this yet but I’m sure its great! lol)
PS Express
Analytiks
Dropbox (of course!)
Omnifocus (best to do app out there)
FreshBooks (best invoicing app)

I’m going to keep it simple and stop here. If you guys/gals have any apps that you use I would love to hear about them. Thanks!

10 Ways to Lose Less Time as a Web Designer

Faster Web Design

The one thing that has made me a much better front end developer has definitely been my openness to doing things a different way, never getting stuck in a rut. In the process you will find that even though it may initially take you longer to do something the “new” way, in the long run you will have saved so much time. And time is one of those things you can never technically save. You can only help yourself lose less of it. So here is a list of 10 ways that I have effectively lost less time.

Zen Coding

*Update* I now believe this is called “Emmett” formerly known as “Zen Coding”

A lot of people may have “heard” of this but not actually looked into it. I hope that changes today. Zen coding is so powerful once you can wrap your mind around it. Let me give you a quick example:

div.container>div#nav>ul>li*8>a>img

Press F1 and this expands to:

<div class="container">
	<div id="nav">
		<ul>
			<li><a href=""><img src="" alt="" /></a></li>
			<li><a href=""><img src="" alt="" /></a></li>
			<li><a href=""><img src="" alt="" /></a></li>
			<li><a href=""><img src="" alt="" /></a></li>
			<li><a href=""><img src="" alt="" /></a></li>
			<li><a href=""><img src="" alt="" /></a></li>
			<li><a href=""><img src="" alt="" /></a></li>
			<li><a href=""><img src="" alt="" /></a></li>
		</ul>
	</div>
</div>

Once you get the hang of it you will be coding at lightning speed. To get started go here. Note that Zen Coding requires an add-on for most code editors! Not to worry though, there are add-ons for most all popular coding editors. You can find them at the above link towards the bottom of the page.

Coda Clips or Sublime Snippets

No matter what editor you choose to use, most have the ability to add snippets. Coda is both my code editor and FTP client (used to be.. now its Sublime Text 3). It has a very useful tool called “Clips” that allows you to save snippets of code and then assign them shortcut keys. I have over 50 snippets of code saved and it saves me an enormous amount of time rather than having to look it up in Google every single time (which I was doing for far too long). What I did one night was just sit down and spend some time compiling all the snippets of code I use often so that I would never have to look them up again. Rather ingenious yet underused. I believe most code editors have something similar (as I mentioned perviously).

Shortcut Keys

I tend to see a lot of people not taking advantage of shortcut keys (other than copy & paste)!!! Shame on you all! lol. This can save you SO much time! Here are some that I use constantly (by the way I use a Mac so forgive me PC users):

General Mac Shortcuts:

CMD+Shift+3 – Take screenshot of whole screen (saves to desktop)
CMD+Shift+4 – Take screenshot of selected area (saves to desktop)
CMD+Space – Search through computer (I use this to open up new apps. Just start typing the first few letters and it will find your most used app starting with those letters. Saves time rather then using mouse to click on app)
CMD+Tab – Switches applications (hold down and keep hitting tab to scroll through all apps)
CMD+` – Switches between windows in same application (for instance if you have multiple browser windows open, also if you are wondering which key that it is the key to the left of 1)
CMD+W – Closes current window
CMD+Q – Quits current program
CMD+S – Save
CMD+Shift+S – Save As
CMD+Z – Undo (accidentally delete a file? Instead of going to trash bin and restoring.. just hit CMD+Z)
CMD+Shift+Z – Redo

Mouse Pad Touch Events:

2 fingers left & right – scroll horizontally and also in browser go back and forward between pages
4 fingers left & right – scroll between desktops (Lion & Mountain Lion only)

For a full description go to your System Preferences > Trackpad

Mac Trackpad Gestures

Chrome:

CMD+F – Do a search for words on the page
CMD+T – New tab
CMD+W – Close current tab

Photoshop:

CMD+Shift+Fn+S – Save for Web & Devices
CMD+` – Switches between photoshop files open (very useful!)

There are so many more I can be taking advantage of I know, but thats it for now… having a brain fart and can’t think of more.

Wufoo

Ever take an extra few hours on a project because you had to code & style a form? Wufoo solves this problem. It’s totally worth the money you pay for it because it saves you so much valuable time. Being so very versatile is one of its major benefits. Dragging and dropping a few otherwise sophisticated elements becomes easy. Obviously there are “some” setbacks such as CSS customization (which requires and SSL certificate, since all forms are SSL) and some minor performance issues (although it is async). The standard way to use it would be to use their javascript embed code, but you can actually host the files on your server and then send the information back to Wufoo as well. Its really a sweet tool.

Starkers Foundation (WordPress specific)

Consistency across all your websites will save you so much time in the future when making updates and doing routine maintenance. Most all sites I make I use WordPress. I always make custom themes from scratch but I always build them on top of a “foundation” theme to stay consistent. Its really a creation of mine drawing from a few different places, mainly the Starkers theme. I have a version of it I like where I have already cleaned out the code I don’t want and added Bootstrap. All this to say… whenever I have to make a change to ANY one of my websites, even if I made it 2 years ago, I will know exactly where to look to make changes. This amazingly saves me SO much time and allows me to be on top of everything all the time, not wasting time on relearning how I made certain sites. Email me if you want and I will send you the theme I use.

*Update* Now using child themes enhances this further, so that I am able to update my “core” code without effecting any of the layout or other custom features built into the child theme.

Staying Organized

If your not organized, get organized. Period. Stop everything your doing and just spend a day and organize things, and then take the time to maintain it. There I said it. Being organized has helped me respond quicker to requests for files when someone needs something, I can quickly attach it to that email, instead of digging and digging for it wondering where the heck I saved it. It also helps with workflow and ongoing projects as you could imagine.. just visualize all the files as they pile up over the weeks. If you are not proactive in organizing them you will find a mess on your Desktop and Download folder. Take time to organize your Finder so that the folders you use often are bookmarked on the left like in the screenshot below.

Mac Finder

One other thing I didn’t touch on is check-lists, priority lists, to-do lists, etc. An all in one solution for all of this that I use is Omnifocus. It’s expensive but amazingly powerful.

LESS

LESS is a CSS Preprocessor that extends CSS with dynamic behavior such as variables, mixins, operations and functions. Personally I use a WordPress plugin that allows me to run LESS live on the server, so that I don’t have to always work locally. If your are not already using a CSS preprocessor, start! So worth the time to learn.

Outsource

I never like to say no to opportunities. If at all possible I hire temporary and part time help to finish things so that I don’t become too overwhelmed. I also always like to keep someone at hand to hand off tasks that don’t require web design skills to do for instance input content into a site, etc. This frees up time so that you can spend it doing more productive things. I’ve tried a lot of outsourcing websites such as odesk.com and freelancer.com but I’ve had the best luck believe it or not on Craigslist. I would just be honest and post that I’m a freelancer looking for some extra help. You’d be surprised at the quality applications you will receive. If you even want to take it to the next level, use Wufoo to create an online application and ask very open ended questions so that you can better differentiate the good applicants from the bad.

Inspector

Most web browsers these days have a web inspector built in. Learning how to effectively use the Inspector (especially in Chrome) will most definitely increase your productivity and efficiency. You can make CSS changes right in your browser that will immediately show you the changes on screen which is great for troubleshooting. This is also a great way to figure out the class or id names of elements, dimensions of certain divs, links to background images, javascript, console errors etc. etc. I don’t know what I would do without the Inspector (probably not much.. hah).

Working Live

Then there is working live a.k.a. “Cowboy Coding”. If your in a rush, this will definitely speed things up, especially for smaller projects. Although, I really shouldn’t be recommending this as its perceived as a “bad practice” and rightfully so. Many things can go wrong. So there are some caveats. For new projects I like to create a hidden site with a secret URL & set the robots.txt to disallow. For updates & maintenance there are some conditions to working live. 1) You are working on the site alone. 2) You really can’t afford to make any mistakes… 3) Have a good, reliable internet connection. 4) You’re not working on a high traffic site. 5) You keep very regular backups of both files & databases.

Personally I work live at times because it saves me a LOT of time. 99% of the time I’m flying solo so I don’t have to worry about other people editing files at the same time. I also don’t make many mistakes if any (at least most of the time hehe) and keep regular backups. It just works for me (at the moment). Find what works for you but do what you can to get a fast & efficient workflow. Especially if you crank out websites, lets say you save 15 minutes per website & make one website a week. That will save you 13 hours over the next year. It all adds up!

I’m sure there are other time saving techniques.. mind sharing them with me in the comments? Thanks all!

Premier Web Designer’s Toolbox

Web Designers Toolbox

Over the years as a web designer I have used MANY different tools, programs, apps, etc. Some were good, some were meh, and some were downright horrible. Today I’m going to share with you a few of the good ones. We are going to cover everything from compilers & WordPress plugins to auto-generators & speed test tools.

Design Tools

Color Scheme Designer

IcoMoon
Probably one of my favorite tools. You can make your own custom icon fonts choosing from hundreds of free individual icons. I now use this on pretty much every site for a few months now and it saves so much on file size, bandwidth & speed. To implement these fonts into your site you will also probably need this resource: http://css-tricks.com/html-for-icon-font-usage/.

Color Scheme Designer
This is great when you are in the planning stages of a website and trying to come up with a color scheme and having a hard time finding complimentary colors. You can also then save these templates on Colour Lovers for storage and sharing.

ajaxload.info
Ajaxload.info is a ajax loading gif generator. I’m sure not many people need this but its good to have in your bookmarks just in case you do one day!

0to255
0to255 is a simple tool that helps web designers find variations of any color. Really great if your looking for the perfect color to use for hover effects or when creating a color palette.

Dynamic Dummy Image Generator
Dynamic Dummy Image Generator is what it says it is. It helps you quickly create dummy images you can use for development sites, mockups & placeholders.

CSS-Trick’s Button Maker
Helps you create good looking CSS buttons really fast.

Compatibility Tools

IE Testing

modern.IE
This tool is very useful in identifying issues that your site may have when running on earlier versions of IE.

CSS Gradient Background Maker
This little tool which is hosted on microsoft.com has saved me the time of memorizing all the different browser specific CSS gradient terminology. You just input the colors and it outputs the gradients. Copy & paste and done!

W3C Markup Validation Service
I know this is kind of an obvious one, but I bet most people skip this step when making a website on a budget. Also there is a CSS Validation Service & MobileOK Checker

Performance Tools

Google PageSpeed Insights

Google’s PageSpeed Insights
PageSpeed Insights analyzes the content of a web page, then generates suggestions to make that page faster. I have used this on almost every one of my sites to identify what is slowing it down. After a while you start proactively making your site faster so by the time you use a speed test most everything is already optimized.

GTmetrix
Another speed test tool that goes a little deeper than Google’s PageSpeed Insights and also gives you YSlow speeds.

Pingdom
Pingdom tests the load time of a page giving you a breakdown of what is being loaded and how long it takes to load. Also give you a performance grade and page analysis.

WebPageTest
I know your thinking… another speed test tool? The thing about this tool that differentiates itself is the fact that it runs to back to back speed tests and gives you a good idea of how well your page is caching files. Gives you a “first view” speed and a “repeat view” speed. Very insightful stuff when your trying to identify what to optimize.

Load Impact
Load Impact offers free load testing and reporting. They do have paid plans as well, but you can load test your site here for free. This is great if you are worried about a spike in traffic and if your servers can handle it.

Mobile Tools

Detect Mobile Browsers

Detect Mobile Browsers
Ever try to redirect people coming to your site from mobile devices to another URL? Its not the simplest thing in the world. Detect Mobile Browsers is an open source project that simplifies this for you and gives you the scripts you need to just copy and paste right into your file. I’ve used it on a few sites and it works flawlessly (so far).

Responsivator
This tool gives you a side by side view of your website in multiple screen sizes. Very handy when designing responsive layouts!

Offermobi Preview
Cool tool that allows you to view your website on most mobile devices out today… although it doesn’t run the browser, just emulates the screen size & resolution.

WordPress Tools

Wordpress Custom Post Type Generator

Themergency’s WordPress Custom Post Type Code Generator
There are a few WordPress plugins that help you make custom post types easily, but if you want to put the code directly into your theme’s functions.php file or make your own plugin this little tool will save you so much time because of the size, complexity and redundancy of the custom post type code required.

Compression Tools

Tiny PNG

Tiny PNG
This is the best PNG compressor out there. Other image compression tools don’t compress png’s that great. This tool will drastically reduce png file size while keeping the same quality and in addition the transparency will work in IE6. How about that!

Smush.it
Smush.it is a free online image compression tool that losslessly compresses your image files. Found it really useful until I started using a Mac app called “Image Optim”.

Closure Compiler
I’ve only used this a few times, but plan to use it more! The way I use it is I grab external javascript loaded from 3rd party plugins, compile it and then put it locally on my server and delete the 3rd party link to the outside javascript file so that there isn’t a request to another outside server. Works for some things but not others. Otherwise its a good tool in general but there are a lot of compilers out there.

Random Tools

FreshBooks
FreshBooks is a paid invoicing service, but they have a free plan for up to 3 clients. I HIGHLY recommend them. I have been using them for 3 years now and I’m very happy with them and the quality of service they offer.

faxZero
Even web designers have to fax things from time to time. Here is a free service to do so!

So I guess thats it for now. I just went through almost all of my bookmarks and I got thousands of them lol. Hope you guys found a few “gems” here. If you guys/gals have any tools that I missed (which I’m sure I did) please leave them in the comments below. Thanks!