Tags Posts tagged with "Development"


Web Developer Tools Part 3

Welcome to part 3 of useful tools for developers! This week we have a couple of useful tools, plus a bonus useful tool/funny/entertaining tool to help you get through boring online news reading.

As with most all of the development tools I post up in these articles, I have tried these first hand and love them. They all come in handy and make life easier for us developers.


Ajaxload is a simple and easy tool to help you quickly create a animated loading icon GIF. This is a great tool that I’ve used many times and it’s especially helpful for those web projects you have that involve AJAX and have load time. You can pick from many different load icon styles from the drop-down, select background color & foreground color and quickly generate it.

AJAX Load icon maker


Tired of reading the same old headlines in news stories and blog posts? Spice them up a bit and read them for what they really mean with Downworthy. Downworthy is a browser plugin that turns hyperbolic viral headlines into funny, truthful, headlines.

For example: “This Guy Was Exploring His Grandpa’s Attic. What He Found Is Mysteriously Awesome…Whoa.” turns into “This Guy Was Exploring His Grandpa’s Attic. What He Found Is Mysteriously Probably Slightly Less Boring than Working…Whoa.”

Although it’s not exactly a web developer tool, it’s something than can come in handy and make you laugh when reading blog posts.

Downworthy Browser Plugin for Headlines


Another tool that comes in handy, px-em does just what you think it does, converts pixels to em’s. You just type in your parent font size in pixels and the font size you want, then it converts it to the proper em size. It’s a super useful and super easy tool that can save you the time of doing math and using a calculator while developing.

px-em conversion tool

Useful Tools for Developers #2

Welcome to the second edition of useful tools for developers. Something we all need, whether we are developers, designers, or whatever, are tools to help make our jobs seamless and quicker. These articles are aimed to help you do just that.

These tools I post are either ones I use, have tried, or have been backed by other developers as great tools to help with our jobs. So without further ado, here is part two of useful tools for developers.


Tailor is an experimental code editor for Chrome. Its main features include the ability to edit your code offline, it supports Git, and has auto complete for CSS, HTML, and Javascript.

Tailor Code Editor for Chrome

Custom Google Maps

Just as the title suggests, this website by Donald Sutherland lets you easily build a custom Google Map. You can change the size, lat & long, where markers are placed, zoom level, controls, map type, and map theme.

Custom Google Maps Builder

Entity Conversion Calculator

This is a handy tool for converting entities, like the copyright symbol as you see below, into the proper code for CSS, JS, and HTML. Simply paste whichever code you have into the correct slot and click convert. This converter will convert that code into the other proper formats of code.

Entity Conversion Calculator

Useful tools for developers part one

Being a front-end web developer myself, it’s always helpful finding new tools to help make developing easier and more efficient. That being said, below is part one of useful tools for developers. All of the tools I will post in these articles will in some way be beneficial to developers.

If you have any suggestions for great developer tools that you yourself use to help with the process of developing, please feel free to comment them below and I’ll take a look at them. If I find them useful I will post them up in a future article.


Have you ever been browsing on your iPhone or iPad and come across something you need to copy and paste to your Mac, but you’re forced to copy-paste-email it to yourself instead? Now you don’t have to waste all that time, scribe lets you copy and paste between your Mac and Apple iOS devices.

Scribe Apple App

Web Safe Colors

I know I just posted about this, but it’s a handy website. Web Safe Colors displays all 216 web safe colors in a grid format and displays the RGB, HEX, and HSL color codes in an easy copy format as needed for CSS.

Web Safe Colors by Zac Knoblauch


ColorZilla is a very useful Chrome web browser add on that lets you pick colors right off of a web page with a color dropper. This comes in handy when you see a color you like on another site, or even on an image or logo from a website.

Once you click the dropper on the color you want it gives you the RGB and HEX color codes to copy. This cool add on even has a CSS3 gradient generator!

ColorZilla Chrome Add On


Ruul is an on screen ruler and a great tool for developers. I use this (along with ColorZilla) on a daily basis. You have a short 560px ruler and a longer 1100px ruler to choose from in many different transparent colors. This comes in handy for quick measurements needed while developing on a website.

Ruul Chrome Add On

Adobe Edge Inspect

Adobe has been kicking ass lately as far as tools for web development go, and Edge Inspect is proof. I recently downloaded Edge Inspect to give it a shot and I have to say, I am impressed and I use it for my responsive website projects.

Adobe Edge Inspect allows you to test any website on multiple devices and inspect the code for each of those devices. Simply download the free Edge Inspect app for your Android or iOS device and download the add on for Chrome. Turn it on and start inspecting, change code and watch it change live on your device. This makes editing code and testing on mobile devices smooth and easy right from your desktop computer. I suggest you take a few minutes and head to Adobe to learn more about this awesome tool.

Adobe Edge Inspect

Building a Custom Page Template for Your Blog Dexterously

Whether you are running a website that invites users to read latest news and updates across different verticals like politics, movies, sports, etc, or you own a website that advertises you as a service provider, it would give your website a reasonable push if you create a separate blog site on the same URL. You can use that blog to publish your views, or articles that are atypical of standard blogs. If you play to the gallery by writing opinionated articles around the different theme your website caters to, you are set to see a jump in the number of visitors to your site.

However, building a custom blog section on the website involves an arrangement that is easy to create using PHP. The experts would recommend you create a custom page template while the process of building a blog section is being carried out. What this does is that it lends you a capability to define a desired page location that looks like myownoyster/blog. What’s more? You can even choose the title of your choice and display a short description on the topmost part of the page. Here is how you do it:

Reproduce the contents of index.php in the tpl_blog.php file

The first step in the process is opening the index.php file of the theme you are currently working on and copying its content in the new file created by the name of tpl_blog.php. You carry out this copy-paste task in order to make sure that theme functions and HTML structure are not lost in the way. It maintains the consistency of the files and helps carry their functions forward. This will also enable you to build a page template which can be accessed from a dropdown menu.

Make Page Template Readable for WordPress

The traditional practice of adding comments to code is used everywhere for the functions to become more comprehensible. WordPress is no different.

New Template: My Blog

Hence, for the new file you just created (tpl_blog.php), append a comment to the file that tells WordPress that you are creating a custom template.

Use Custom Query for Posts

Now paste the below code right below the location where the get_header() template tag is mentioned:

<?php query_posts('post_type=post&post_status=publish&posts_per_page=10&paged='. get_query_var('paged')); ?>

This performs the overriding function on the existing page query by replacing it with a query that calls for 10 numbered blog posts. This process saves considerable time as the query_posts() function ensures that WP_Query doesn’t have to be called when there is a need to save the custom query.

Add Navigational Links for Pagination

In your code, between the endwhile; and endif; functions, add this code for pagination:

<span><?php previous_posts_link(__('« fresh','demo')) ?></span> <span><?php next_posts_link(__('previous »','demo')) ?></span>
</div><!-- /.navigation -->

This should be between the endwhile; and endif; sections of code in your theme.

The Reset Process

Now that you have successfully implemented the afore-mentioned steps, next in the line is using wp_reset_query() in order to retune the results that emerged by the usage of query_posts(). This takes the current query back to its original state.

Nailing it

Following is how the full page template would look like after combining additional markup with preceding procedures:

<?php get_header(); ?>
<div id="content">
<?php query_posts('post_type=post&post_status=publish&posts_per_page=10&paged='. get_query_var('paged')); ?>
<?php if( have_posts() ): ?>
<?php while( have_posts() ): the_post(); ?>
<div id="post-<?php get_the_ID(); ?>" <?php post_class(); ?>>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(200,220) ); ?></a>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<span><strong><?php the_time('F jS, Y'); ?></strong> / <strong><?php the_author_link(); ?></strong> / <span><?php comments_popup_link(__('0 comments','demo'),__('1 comment','demo'),__('% comments','demo')); ?></span></span>
<?php the_excerpt(__('Continue reading »','demo')); ?>
</div><!-- /#post-<?php get_the_ID(); ?> -->
<?php endwhile; ?>
<span><?php previous_posts_link(__('« fresh','demo')) ?></span> <span><?php next_posts_link(__('previous »','demo')) ?></span>
</div><!-- /.navigation -->
<?php else: ?>
<div id="post-404">
<p><?php _e('None found.','demo'); ?></p>
</div><!-- /#post-404 -->
<?php endif; wp_reset_query(); ?>
</div><!-- /#content -->
<?php get_footer() ?>

Now that your custom page template is ready (thanks to an elaborative yet simple method), go ahead and work your way around it.

Hide Category from homepage wordpress

In this tutorial I will show you the proper steps to hide certain category posts from appearing on your homepage, index page, or blog roll. If you own a blog and you want to keep posts of a certain category from showing up on your homepage blogroll, but still want them to appear on your website somewhere else, this tutorial will show you how to remove those posts from showing up in the blogroll or homepage.

Before I begin, you are responsible for your own edits to your website, I am not liable for any issues that may come of you doing this. In doing this tutorial it is at your own risk and I am not responsible if you screw something up. This code has worked for me on multiple WordPress websites. If you are a beginner and/or have no coding experience I do not recommend that you do this yourself. With that said, let’s begin…

Step 1

The first step is to navigate to your theme folder, find your index.php file (or which ever file you want to hide the category from appearing), and open it in your text editor.

WordPress index.php

Step 2

Once you have it open in your text editor, locate the start of the loop. It may look different depending on what theme you have and depending on who coded the theme. Below I have 2 different examples pictured, the highlighted area is the loop.

Ex 1)

WordPress Loop

Ex 2)

The WordPress Loop

Step 3

Once you have successfully located The Loop, make a few lines of space above it so there is room for the “hide category” code snippet.

Now that you have made some space, you will need to copy the code below and paste it right above The Loop.

<?php query_posts($query_string . '&cat='); ?>

It should then look like the picture below, the code snippet right above the loop.

Hide Category Code Snippet

Step 4

You’re not done yet, now you will need to tell WordPress which categories you want it to hide from the index page. Once you decide which categories you want hidden from the index.php page, you will need to find the ID of the category(s). To do this, navigate to the categories page in the WordPress admin.

Category Menu WordPress Admin

Once you get there, click the category link you want hidden and view the link info in your browser status bar. It should look something like this: edit&taxonomy=category&tag_ID=5&post_type=post

Where it says ID=5 (or another number), that is your category ID. In this case, the category ID is 5.

Step 5

Now that we have the category ID, we need to plug that into our snippet we inserted earlier. Since we are wanting to hide it from the homepage, we need to add a minus sign in front of the ID number like so:

<?php query_posts($query_string . '&cat=-5'); ?>

Make sure the number is inside the end single quote mark. That’s it, everything should work properly and your category should no longer display on your index.php page. If you have errors or issues, be sure to look over your code carefully to ensure it is correct.

Hiding Multiple Categories

If you want to hide more than one category, just add a coma after each category ID like so:

<?php query_posts($query_string . '&cat=-5, -45, -9'); ?>

If you have any questions please comment them below and I will help you as best I can.

Web Designers vs Web Developers Created by Shane Snow for WIX

The styles and personality of web designers and web developers is one of the bigger things people like to compare and poke fun at. It’s more like a form vs function type of debate. Shane Snow, a tech journalist and co-founder of Contently, designed this quirky infographic for WIX comparing the styles and habits of web designers and web developers, as well as job availability and salary comparisons of each.

Created by Shane Snow for WIX

Web Designers vs Web Developers Created by Shane Snow for WIX

How to add an app icon to your website

Having app icons for your website is a good thing to include these days with the amount of iPhone’s and iPad’s in the world. If you’re wondering what having an app icon for your website means then let me explain. Apple iPhone’s, iPad’s, and iPod touch devices give users the ability to add websites to their home screen (bookmarking) as if it were an app (see image below).

Enfuzed App Icon

This is great if your website does not have an app in the app store as it can be made to look like an app and acts as a quick access point for users to your website. The problem is, if you have not made app icons for your website then it will just take a shitty screen shot of your website and shrink it down to fit the app icon size.

This is not good for a number of reasons; one being, it looks like junk; two being, when a user is sliding through their apps, yours will be easily overlooked. I used Creative Bloq as an example of a site not having app icons since it’s one of the blogs I frequent.

Bookmark without an app icon

Assuming you don’t want that crummy screenshot as your icon if a user bookmarks your website, let’s get to the “how to” on adding an app icon to your website.

Creating an App Icon

The first thing you will need to do is create an app icon that is to be used for your website. We need to take into account the various apple touch resolutions and sizes when making an icon. Here are the icon sizes for the icon (in pixels) you will need to make:

*Note that these need to be in PNG format*

  • iPhone/iPod: 57×57
  • iPhone/iPod with Retina: 114×114
  • iPhone 5/iPod Touch 5th Gen: 114×114
  • iPad: 72×72
  • iPad with Retina: 144×144

You don’t need to worry about rounding the corners, Apple will do this for you, so just make square icons. You also don’t have to worry about adding the “glare” to your icon, as Apple will do this for you as well, but we will get to this later.

Now that you have all of your icons created, you’ll need to add them to your website’s directory naming them as follows so apple will recognize them:

  • iPhone/iPod: touch-icon-iphone.png
  • iPhone/iPod with Retina/iPhone 5: touch-icon-iphone-retina.png
  • iPad: touch-icon-ipad.png
  • iPad with Retina: touch-icon-ipad-retina.png

The Code

We have our app icons made in all device sizes, we’ve named them accordingly so Apple will recognize them, and we’ve added them into our website’s directory. Now we have to add the code to the head of our website. There are two ways to present your app icon to viewers:

  • The regular way – which includes the “glare” over top of the icon
  • The precomposed way – which shows the app icon as is

If you wish to show the icon “as is” (meaning just as you made it) then just add the words -precomposed after “apple-touch-icon” in your code. If you want the famous apple “glare” over your icon, then just leave the rel=”apple-touch-icon”.

Now to the easy part, just copy and paste the following code making sure the file paths are correct. We have chosen to leave our app icon “as is” which is a flat look, so we added “-precomposed” to the end of our rel:

<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="touch-icon-ipad-retina.png" />

That’s it! Now you can navigate to your website on your Apple touch device, click the add bookmark button and see your new app icon on your home screen. Please make sure all of your files are named properly, your images are in the right format, and your file paths are correct.

Test It

Here is how you can add a bookmark to see if it worked. Navigate to your website and click the middle button (pictured below) to bring up a menu.

Apple Safari Bookmark Icon

In the middle of the menu you will see your icon and under it it says “Add to Home Screen”. Click this.

Add to Homecreen Bookmark button

Next it gives you the option to name your bookmark, this will be the name that appears under your icon on your home screen.

Adding name to bookmark icon

Useful Resources:

Safari Web Content Guide – Configuring Web Apps

iOS Human Interface Guidelines – Custom Icon and Image Creation Guidelines