5 Coding Reference Sites for WordPress Developers

Woman Reading NewspaperWith so many languages, frameworks, and other libraries available it is impossible for developers to keep track of every detail of each one. Adding to that is just the occasional brain misfire where you know what you need but just can’t recall the syntax. Fortunately there are plenty of coding reference sites available to help in those situations. Today I am presenting you with five of them. Continue reading 5 Coding Reference Sites for WordPress Developers

Happy New Year!

For me the new year represents a new beginning. Everything that was going to happen in the last year has happened and the coming year is starting off with a clean slate. I admit last year was tough for my family. We encountered surgeries, broken arms, illness, and a whole host of other challenges. While we haven’t made it through all of those challenges yet, I feel incredibly optimistic going into this new year and am looking forward to, well, moving forward.

Wherever you are, and whatever your personal challenges are, I hope you have an amazing 2015. Happy New Year!

Putting the “Cascade” Into Cascading Style Sheets

Something I learned early on in dealing with Cascading Style Sheets (CSS) is that a good understanding of how the cascading part works is key to troubleshooting problems with your layout. There have been many times when I have found myself going round and round trying to figure out why a particular style was being overwritten even though the code was syntactically correct. As I gained more experience I came to realize that a lot of those kinds of problems could be avoided with a simple understanding of how cascading works.

The three types of styles:

There are three types of styles (I’ll cover each one in more depth later):

1) Inline – these are styles applied directly to the HTML using the style attribute. For example <p style="font-weight: bold;">

2) Internal – Internal styles get applied at the beginning of the HTML in the block using the <style> tag. For example:

<head>
    <style>
        p {
            font-weight: bold;
        }
    </style>
</head>

3) External – External styles are in their own file and linked to the HTML via the <link> tag in the <head> block. For example: <link rel="stylesheet" src="css/style.css" type="text/css">

Inline Styles

Inline styles have the highest precedence over all three types. If you create an embedded or external rule and then apply a different rule to the same element directly in the HTML the previous rule will be overridden and the inline style will have effect. Inline styles are fine for one-off styling, but they’re rarely used because they’re hard to modify if you need to change something. You’d have to find every instance of the style within your HTML which is a daunting task if you have a very large website. Personally, I’ve never used inline styles outside of academic experiments.

Embedded Styles

Embedded styles are better than inline styles in that all the rules you create are in one place so it is really easy to make changes and apply them to the page. The downside is they only apply to the HTML page they’re embedded in so you’d have to make copies in every HTML file for your site. This could lead to a lot of repetition and make it hard to change for a large site. It’s better than using inline styles but still has drawbacks. Embedded styles will overwrite external styles but will be overwritten by inline styles.

External Styles

External styles are the lowest in order of precedence but they have some major advantages over both embedded and inline styles. External styles get defined in a .css file of their own and linked to the HTML file. This is a big deal because it means you can write your style definitions once and apply them to as many HTML files as you want. If you need to make a change to something you need only change one place and it applies globally to all linked documents. For this reason it is good practice to use external styles exclusively or use the other types sparingly as there are cases where they are the best choice for a particular application. The one down side to using external styles is the very slight performance hit received because the client has to download the style sheet off the server, however that performance hit is negligible and unless you either have a very slow connection or a lot of linked CSS files it isn’t a huge consideration.

But wait, there’s more!

So you’re using external styles and everything looks great, but you have a couple of styles that aren’t displaying the way you want. The syntax is good and you’ve managed to rule out a browser issue, so what could be going on?

It turns out that not only do styles cascade based on where you apply the rules to the HTML document, they also cascade internally within the same style sheet. What this means is if you declare a style at the top of the sheet and then declare the same style later toward the bottom of the sheet, that bottom style will overwrite the original.  This can also be frustrating because everything looks like it should work but doesn’t. There are ways around this (like using the !important declaration in your CSS) but in general you be aware of not only what you’re declaring but where you’re declaring it.

Finally, if you link multiple style sheets to your HTML document they will cascade in the order in which you link them. This means any conflicting styles in the last style sheet you link will take precedence over any of the previously linked styles.

Conclusion

To recap, external styles are overridden by embedded styles which are in turn overridden by inline styles which override both. Multiple style sheets linked to a given HTML document will cascade from top to bottom in order, so the last style sheet linked will take precedence over any of its predecessors. Finally, styles declared toward the top of a style sheet will be over ridden by the same style declaration further down.

Confused? Perhaps an easier way to think of it is to remember the order from most to least important is inside out, bottom to top. Remember that and you’ll have a much easier time troubleshooting your code.

5 Premium Applications With Free Open Source Alternatives

It is rare to find someone who hasn’t at least heard of applications like Adobe Photoshop or the Microsoft Office Suite. These programs have become standard in homes and offices all over the world. There is a good reason for that. They are (mostly) stable and have a robust feature set that makes them the go-to choice. The biggest problem is the cost. A copy of Microsoft Office can set you back about US$300, and Adobe’s Creative Suite can cost upwards of US$1200. In some cases organizations can get a discount due to the volume of licenses they’re purchasing, but for the average single user cost is definitely a factor in the decision-making process. This is where open-source software can really be a life saver, but as with anything there are pros and cons to it.

The term “open-source” means that the source code is available to anyone who wants to look at it. Most open-source software takes that a step further by opening it up so anyone can contribute to the application. This means there is a great deal of accountability in the project and bugs are usually (although not always) squashed fairly quickly. It also means there is total transparency in the software because anyone who wants to can look at the code unlike the major software developers who hold their code tightly to their chest and prohibit reverse engineering it or otherwise tampering with it. Neither method is necessarily better than the other, it simply boils down to differing of opinion on how to do it.

That said, if you’re like me you’re very budget conscious so here are 5 premium applications that are replaceable with free open-source alternatives:

1) Replace Adobe Dreamweaver with Aptana Studio

When people think of web development, the usually think of Adobe Dreamweaver.  Dreamweaver is a fabulous Integrated Development Environment (IDE) for the web and has a lot of great features, most notably the ability to automatically convert a Photoshop comp into web code. It’s also expensive, so I use Aptana Studio instead. I’ve written about Aptana before so it’s probably no surprise I’m mentioning it again. Aptana is a surprisingly robust open-source IDE with support for a variety of languages from C/C++ to HTML. While it lacks some of the features of Dreamweaver (like the ability to import Photoshop comps) it is robust enough that most developers won’t miss them.

2) Replace Adobe Photoshop with GIMP

The GNU Image Manipulation Program (GIMP) has been around for a very long time and is an excellent replacement for Adobe Photoshop. There isn’t much you can do in Photoshop that you can’t do in GIMP making it an excellent replacement. There is a bit of a learning curve because the tools in GIMP, while very similar to those in Photoshop, are just different enough that it takes some getting used to. I have been happily using GIMP for some time now and haven’t felt the need to go back any time soon.

3) Replace Adobe Illustrator with Inkscape

While Adobe Illustrator is the de facto standard in vector graphics, its open-source counterpart, Inkscape, can give it some stiff competition. What some people may find surprising is how feature rich Inkscape is when compared to Illustrator. There are a few things Illustrator offers that aren’t available in Inkscape, but for most users the features in Inkscape are more than adequate for the job making it a worthy contender as a replacement for the budget conscious.

4)Replace Adobe InDesign with Scribus

Adobe InDesign is a fabulous desktop publishing tool and has all the features necessary to create eye-catching layouts and designs. Scribus is an open-source application that can do much of the same thing. As with all of these replacement applications, there is a bit of a learning curve, but it is well worth the effort.

5) Replace Microsoft Office with Open Office

It seems unlikely that anyone who has used a Windows-based computer has not used Microsoft Office at some point. Over the years, Office has become the suite of choice for desktop productivity, not only in business but for students and home use as well. It is hard to imagine a modern Windows computer that doesn’t come with at least a trial version of Office. Keeping that in mind the likelihood of someone having a need to replace their Office with an alternative is fairly small, but if you have a need consider using OpenOffice.

OpenOffice has been around for a long time and at this point offers most of the same features that it’s Microsoft counterpart offers. One of the biggest drawbacks to it is that it saves documents in its own format by default. This makes sharing documents difficult unless you either share with someone who also has OpenOffice or remember to save the document in a Microsoft format (i.e. .DOCX, .XLSX, etc).

Conclusion

Despite the misgivings of many people, the open-source software community has a lot of great applications to offer. This makes it fairly simple to find an alternative for just about any application you may need.

What about you? Do you have any open-source applications you regularly use as a replacement for a more mainstream title? I’d love to hear about it in the comments!

Happy Holidays!

This is the time of year where we take a step back and reflect on the things we are grateful for. In addition to my friends and family, I am very thankful for you, my readers, without whom I wouldn’t have any reason to keep this blog going… so whether you celebrate Christmas, Hanukkah, Kwanzaa, or none of the above… I want to wish you and yours all the best this holiday season and say “thank you” from the bottom of my heart for spending just a small part of your day here with me.

Thank you, and Happy Holidays!

DRY Your Code: Tips on How to Write Legible Code

Writing legible code is crucial for success as a developer. It is important to remember that while you might be writing the code today, someone else may have to support it later. It’s incredibly frustrating to look at someone else’s code and not be able to sort out what they were doing. With that in mind, here are three tips on how to write code other developers can actually follow.

1) Comments are your friend

As you write your code you should leave comments so future developers know what you are doing. You don’t have to comment everything, in fact, too many comments is just as confusing as not enough. In general a comment about what each function does, or how a particularly complex piece of code works is enough. There’s no need to comment something like “X+Y” with “Adding X to Y” as that is obvious from the statement. Use your best judgement keeping the future person maintaining the code in mind. It is very likely you won’t be around to ask how or why you did something a particular way.

2) Use white space to organize your code

White space is those areas in your code where there is no text such as spaces or tabs. Most programming languages ignore this white space so you can use it to your advantage by indenting blocks of code. For example:

public void SomeFunction(){
   if (this is true){
      Do something;
   } else {
      Do something different;
   }
}

By indenting the code it is easy to see which code belongs to the if/else statement. This is a simple example, but imagine if there are dozens of lines of code in each block. Organizing your code in this way will go a long way toward making it more legible.

3) DRY your code

DRY is an acronym for “Don’t Repeat Yourself”. To DRY your code means to combine redundant lines and cut clutter. For example if you have a CSS rule that sets all H2 elements to red and gives them a margin of 30%,  then later create a rule for a H2 element in a specific place on the page that sets it to the color blue and sets the margin to 30%, you can drop the second margin declaration because it’s already been declared in the original rule. Drying your code serves two functions, first it makes the code easier to read since you don’t have a lot of redundant statements cluttering things up. Secondly, it reduces the overall file size of your code saving disk space and allowing your code to load just that much faster. The latter isn’t as much of a big deal when you’re dealing with relatively small applications ( a web page, for example) but it could potentially have a huge impact on larger programs.

There you have it, three tips to help you write legible code and be kind to your fellow developers. Do you have any other tips? I’d love to hear about them in the comments.

5 iPhone Features You May Not Know About

The iPhone is one of the most popular phones on the market. It’s relatively easy to use, has a nice screen resolution, and has a ton of apps and games to make life more (or less) productive. I love my iPhone and consider myself a fairly knowledgeable user of it, however there are many features that aren’t in the manual and are only mentioned in blog posts like this one. I’ve collected five of my favorites to share.

1) Take a screen shot

One very useful feature is the ability to capture your phone’s screen to share with others. I’ve used it many times to create documentation. It is very simple to do, just press the lock button and the “Home” button at the same time. The phone will take a snapshot of your screen and place it in your photos. Be wary though, if you hold the buttons down too long you’ll force the phone to reboot.

2) Take a series of rapid photos

There are times when it would be nice to take a series of photos rapidly (at your kid’s soccer game, for example) so you can capture as  much of the action as possible. Back in the day people had to attach a special motor device to their cameras that would automatically advance the film for this exact purpose. Fancier cameras had the motor built into it. Did you know you can do the same thing with your iPhone? While taking a photo just press and hold the button. Your phone will continue taking pictures for as long as you hold down the button.

3) Level up

Let’s say you’re hanging your favorite cat photo on the wall. Naturally you want to hang it straight but you’ve left the level in the garage. You could ask someone to eyeball it for you, but why rely on human error when you have your iPhone handy? The built-in compass app has a level feature built into it. Just open the app then swipe the screen to the left and you’ll find a handy-dandy level just waiting to make sure your photo is, well, picture perfect.

4) Automatically insert common top-level domains like .com or .org

An especially nice feature is the ability to automatically populate the Top Level Domain (TLD) in an email or web address. The TLD is the .com or .org (or whatever) at the end of the address. If you press the ‘.’ button and hold your finger there for a second or so, a list of common TLD’s will come up allowing you to quickly select and enter the one you want.

5) Create an emergency contact card

The Apple Health app has an emergency contact card. Once you’ve filled out the information you want displayed, slide to where you enter your lock code, then tap “Emergency” then “Medical ID”. You can enter emergency contact information so medical responders know who to call in an emergency, what medications you might be taking, any medical conditions you have, and what potential drug allergies you might have. It basically has all the information first responders will need to make informed decisions on how to treat you in an emergency, especially if you are unable to respond for yourself. The Health app is a standard app in iOS 8 and above.

There you have it, five features that aren’t obvious so you can start using your iPhone like a pro. What do you think? Do you have any iPhone features you like to use that aren’t obvious? I’d love to hear about it in the comments.

Code Oregon: Learn to Code, Find a Job

A couple of weeks ago a friend of mine sent me a link to a program sponsored by WorkSource Oregon called Code Oregon. The program is in partnership with TeamTreehouse.com and aims to teach people the skills necessary to land a job in technology, specifically in software or web development.

Getting into the program is pretty easy, just go to the Code Oregon website and sign up. You’ll need to go into one of the WorkSource Oregon centers to show photo ID (and in some areas offer I-9 documentation), but once you’ve done that you’re all set. The training is online through Team Treehouse, just pick a track you’re interested in and start earning badges.

The goal of the program is to help people find jobs, so if you’re looking for work or looking to change careers this is a great way to learn some new skills without the cost of college, plus you’ll get all the other resources available through WorkSource Oregon.

This program is only available to Oregon residents, but I suspect if the program is successful Treehouse will expand it to similar programs in other states.

PowerShell ISE – Add a GUI to Powershell

First of all, Happy Halloween! I hope those of you out gathering tricks and/or treats have a safe, fun time! I was going to do a whole post on something Halloween related, but decided to settle for a “spooky” image, a “Happy Halloween”, and a topic I’m very excited about instead.

OK, really I just couldn’t think of anything that hadn’t already been done to death (no Halloween pun intended).

That said, earlier this month I took a week-long course on Troubleshooting and Maintaining Windows 8.1 (MS-20688, if you’re interested). The class was a lot of fun and while I didn’t discover much that was unique to Windows 8.1 I did learn a few tricks I had yet to learn in almost 15 years of professional IT work. One of those tricks was a little tool called PowerShell ISE.

Anyone who does any kind of heavy lifting in Windows has probably at least heard of Windows PowerShell. For those of you who haven’t,  think of it as a pumped up Windows Command Prompt. You can do some pretty amazing stuff in PowerShell. In fact, I could probably write several posts on all the neat things you can do with it and still not cover everything. That said, this post is about PowerShell ISE which adds a GUI layer over PowerShell.

The best way I can think to describe PowerShell ISE is that it is kind of like a simple IDE for PowerShell. At the top of the window is a text editor where you can enter or load a script or list of commands. The editor is smart enough to attempt to auto-complete the command you are trying to add. Once it displays the command you want you can either double-click on it or hit ENTER to add it to your list.  At the bottom of the window is a typical PowerShell prompt. You can either enter commands into it directly or run command from your list with either the “Run” button or the “Run Selected” button. The “Run” button will run everything in your script pane while the “Run Selected” button will just run the commands you have highlighted.

At this point I’ve barely scratched the surface on PowerShell (let alone PowerShell ISE), but already I can see the power of these tools even with my limited knowledge of what they can do. If you do any kind of windows administration and haven’t taken advantage of this tool I highly recommend you look into it. My only regret is that I didn’t look into it sooner.

So what about you? Are you a PowerShell guru or are you just learning about it? I’d love to hear your experiences in the comments!

 

Design, Develop, Inspire!