In my continued effort to keep proving to my friend, Tom McFarlin, that PhpStorm is worth switching to, I thought I’d share some of the timesaving keyboard shortcuts that I use every day to help boost my productivity as a developer.

Disclaimers

Before we jump into the shortcuts themselves, please allow me to make a few disclaimers.

PhpStorm vs. Text Editor Plugins

I do know that most serious text editors do support plugins that can offer some of this same functionality, but in my experience, the implementation and execution of those plugins usually do not match in quality to what PhpStorm offers out of the box.

Not to mention everything below comes baked into PhpStorm and works consistently, without having to scour the internet to find these plugins or worry about their ongoing support.

Mac and Windows Keyboard Shortcuts

I am a Mac user, so all the keyboard shortcuts below for Mac are from me and fully verified.

I do not have a PC, but reader IllusionMH provided the Windows shortcuts, but I have no way of verifying their correctness. IllusionMH is also a WebStorm user, but the shortcuts should be mostly the same for PhpStorm. If they don’t work as advertised, please let me know.

Otherwise, you can use the keyboard shortcut name to lookup what the keyboard shortcut would be. More on searching for shortcuts later in the article.

Keyboard Shortcut Legend

Also, just so we’re all on the same page, these are the symbols I’m going to use and what they mean.

Default Keyboard Shortcuts

With those disclaimers out-of-the-way, let’s dig in.

Below are the default keyboard shortcuts that ship with PhpStorm.

Reveal Tool Windows

Starting in PhpStorm 7 (I think), JetBrains decided to hide the Tool Windows, by default, to declutter the UI. To reveal the Tool Windows on the sides and bottom of IDE, just double press / tap the command keys.

Find Action

Find Action is like the super keyboard shortcut. You can use it to search for shortcuts and IDE actions (aka. things you can do that don’t even have keyboard shortcuts). This is helpful for discovering shortcuts you don’t already know or for jogging your memory by typing in a keyword or phrase.

Navigate File

Navigate File is just a fancy name to mean “open files”.

Navigate File also support searching for files with wildcards, title case, file extension, etc..

Rename

Using this, you can rename practically anything, such as variables, functions, filenames, class names, html tags, etc. This even works for some more obscure languages you wouldn’t expect, like Less / Sass, Mustache, and PHPDoc, to name a few.

Not only that, but it will automatically refactor all places these things are within the entire project.

Show Intention Actions

This is a super fancy name for “fix problems”. Show Intention Actions is for anything from fixing typos / spelling, to fixing incorrect parameters, to automatically updating your PHPDoc if you change parameters, and much, much more.

Use this wherever you see a yellow or red squiggly line underneath something.

Open Terminal

Yes, PhpStorm has a fully functional Terminal baked right into it. This is incredibly handy, especially when you’re using tools like NPM, Grunt, Gulp, Composer, etc. in your projects. Mash ⌥F12 and you’re there, ready to rock a command.

No context switching, no fumbling for the right window. Just seamless productivity.

New

Use the New command when you have a folder selected in the project window and you can insert / create a new files and folders.

You can even create nested files and directories with the same command.

Find In Path

Find In Path will search your entire project for just about anything.

You can refine scope to a particular folder, do a reclusive search, match case, regex, etc. A crazy amount of search power for such a little window.

And if you have anything selected, that will automatically become the search term.

Paste From History

This is also known as Clipboard History.

This keeps a running log of things you’ve copied within PhpStorm and you can use it pretty much anywhere within PhpStorm, including the find / replace fields, extracting variables, extracting methods, renaming, etc.

I believe the default history limit is set to 5, which is weak.

Just navigate to PhpStorm > Preferences > IDE Settings > Editor > Maximum number of contents to keep in clipboard to up that limit to something more respectable. I have mine set to 50.

Move Line Up / Down

These shortcuts move whatever line of code the cursor is on up or down a single line.

Very handy for changing the order of an array or declared variables. And most times, it will even shuffle the commas around appropriately too!

Move Statement Up / Down

These work much like the Move Line Up / Down shortcuts, but these will move whole statements up or down a single line.

Think along the lines of entire functions, objects, or arrays instead of just a single part of those things.

Debugging

Once you setup and launch a debugging session, I use these shortcuts to navigate through the code with ease.

Extend / Shrink Selection

These shortcuts will gradually increase or decrease what you have selected, at logical breaking points, and even within strings!

This is one of those features that wish was available in any application or operating system once you start to use it.

Extract Variable

Extract Variable works by taking whatever you have selected and creating a new variable out of it.

This even works for Less / Sass variables too!

Extract Method

Extract Method works by taking whatever you have selected and creating a new method / function out of it, including any necessary parameters.

Inline

Inline is the opposite of the extract shortcuts mentioned above.

It will take variables and methods and will bring them back inline where they are in use.

Duplicate Line or Block

This shortcut will duplicate the line of code the cursor is on, if nothing is selected.

If something is selected, it will duplicate whatever is selected.

Delete Line

This shortcut will remove the line of code the cursor is on, if nothing is selected.

If something is selected, it will remove whatever lines are selected.

Code Completion

This feature pretty standard in most apps, but even though it’s such a common feature, I still use it every single day, so it’s worth the mention.

Code Completion works by offering suggestions for variables and methods to complete what you have partially typed.

Most of the time, this will just work on its own, but if you’re typing really fast, then you can explicitly invoke it with the shortcut.

Custom Keyboard Shortcuts

So that is all well and good. But what if you want to change or customize your keyboard shortcuts? What if you want to create new keyboard shortcuts for features you use within PhpStorm that don’t have a keyboard shortcut defined?

No problem! PhpStorm has this covered in what they call Keymap. Just navigate to PhpStorm > Preferences > IDE Settings > Keymap to uncover all the goodies.

In the Keymap,  you can search for actions by their name or by their assigned keyboard shortcut.

For example, I use the Split Vertically action all the time, so I can have two editor windows open at the same time, usually when I want to write some markup and some styles at the same time. This is such a huge timesaver to have either file accessible as I am building things out.

Split Vertically doesn’t have a keyboard shortcut by default, so add it to the Keymap, and you’re ready to go! I chose ⌃⌥⌘V as my Split Vertically shortcut.

Don’t worry if you use something that is already defined as a shortcut. PhpStorm will let you know and ask you if you want to remap the keys.

Mouse Shortcuts

I know that sounds weird, but hear me out.

There are a couple of mouse shortcuts I want to point out that I find incredibly handy.

Hide / Reveal Tool Windows

You have your headphones jacked in, your tunes are cranked, and you’re ready to get in the zone and just crank out some code. Now you want to eliminate all the distractions and you want to see as many lines of code as possible.

Just double-click any editor tab to hide all the open Tool Windows. And double-click again to bring them all back.

Redistribute Editor Windows

When I have multiple editor windows open, I am constantly moving things around, resizing the windows to give me the most space on what I am working on the most, but now I want to have them be evenly spaced again.

Simply double-click on the space between the split editors to evenly redistribute them.

Conclusion

Once you get the hang of these shortcuts, you’ll feel and incredible source of power and confidence, especially when refactoring. And you’ll wonder why you waited so long to ditch your text editor of choice for a fully functional IDE, if you just give PhpStorm a shot.

How about you? What PhpStorm keyboard shortcuts have you found indispensable in your daily workflow? Share them in the comments below!

The post Timesaving PhpStorm Keyboard Shortcuts to Increase Productivity appeared first on Michael Novotny.

However, that initial setup can be very frustrating. And since my good friend, Tom McFarlin, decided to give PhpStorm another serious look, I thought I’d document how I was able to get things setup and hopefully save him and you some time.

What I am about outline below is working with MAMP PRO 3 and PhpStorm 8, though I have had the same success with MAMP PRO 2 and PhpStorm 7. I also assume that most of this is applicable to the regular, non-pro version of MAMP, though I have not tested it.

Xdebug

Fortunately, Xdebug is already included with MAMP, so there is nothing we need to install in addition to MAMP itself. We simple need to enable it within MAMP.

MAMP

You should just be able to enable Xdebug within MAMP by checking the Activate Xdebug option under the PHP tab. And that should be it, at least for MAMP 3.

For most of you reading this, you can just stop here and move onto the PhpStorm section. 

However, if you are using MAMP 2, or if you want to ensure that MAMP 3 is indeed configured correctly, you’ll first need to identify what version of PHP you’re using with MAMP. Simply navigate to the PHP tab in MAMP and take note of what you’re default PHP version is.

Or, if you’re running a more advanced setup in MAMP PRO, with different PHP versions for different hosts, head to your Hosts tab to see what PHP version you’re running for the particular host you’re wanting to debug.

With the PHP version identified, you’ll want to open and edit the corresponding php.ini file to enable Xdebug by navigating to File > Edit Template > PHP > PHP [VERSION] php.ini.

With the php.ini file open, you’ll want to find the [xdebug] section, which is usually at the very bottom of the file.

At the very minimum, you’ll want to have the following entered and uncommented.

MAMP 2 used to require a bit more configuration, specifically the definition of a zend_extension, so you might want to add all of the following of the minimum configuration does not work for you. Or if you’re using MAMP 3 and you want to enable things like coverage and profiling capabilities.

Please note that the zend_extensions path to the xdebug.so file will vary depending on the PHP version you’re using, so make sure you look up the correct path on your filesystem.

PhpStorm

With PhpStorm open, navigate to Run > Edit Configurations....

Now, if I were to type out everything you’d need to do, it’d be very lengthy. Instead, I created a short GIF to demonstrate what needs to happen. In short, we need to point PhpStorm to the server we want to debug.

You’ll use whatever host and port you’ve configured within MAMP. For this example, I’ve created the host iowagirleats.dev in MAMP PRO (which is also shown in the screenshots above) and I customized my MAMP Apache port to run on port 80. If you’re running just MAMP (the non-pro version) or if you didn’t create a custom host, or if you didn’t customize the ports within MAMP, then you’d probably be using localhost with a port of 8888 for the configuration below.

Once this is complete, you should see the Debug configuration you just created in the upper right part of PhpStorm.

Seeing Is Believing!

And that should be it!

Set a breakpoint in PhpStorm by clicking in the margin of an open PHP file, click the “bug” next to the configuration you just created to start debugging, and you should hit your breakpoint and feel like you finally have visibility into a once dark and secret world. Gone are the days of the antiquated var_dump as you fumble around to discover what is going on!

Hopefully that helped connect all the dots for you and you’re also up and running.

Please let me know in the comments below if you hit any snags and I’ll try my best to help out.

The post How To Setup and Configure PhpStorm, Xdebug, and MAMP for Debugging appeared first on Michael Novotny.

I have previous written a WP Engine review on my own blog, and today, Envato published an article I wrote for their Code tutorials, reviewing Pagely as managed WordPress host.

Both are excellent hosts worthy of  your consideration.

So check out both of the articles and let me know if you have any questions!

The post Pagely Review: Fine-Tuned Managed WordPress Hosting appeared first on Michael Novotny.

As I’ve already said, I’ve personally been though seven hosts and I have probably worked my way through just as many with clients. And let’s just be honest… A vast majority of hosts will meet the demands for many of our sites, especially when you’re just getting started.

But over time, things can get…complicated.

Your site starts to gain some traction, which is awesome, but it can come with a laundry list of side effects.

• Server resources like database, storage, bandwidth, etc. start to explode.
• Pages load starts to crawl.
• Lovely white pages of death like “internal server error” or “error establishing a database connection”.
• Start spending late nights parsing log files to track down memory, performance, or caching issues with magical combinations of server operating system, PHP, MySQL, WordPress, plugin, and theme configurations and versions.

Yuck.

I don’t know about you, but as much as I really want to dig in and do and know it all, it’s simply not possible. There just isn’t enough time and I know I cannot be an expert at all those things. I just want as much time to work on the things I am great at and leave the rest alone.

Is there any hope? Can managed hosting focused strictly on WordPress really be the answer?

The Case Study

I have been incredibly fortunate to partner with Kristin on Iowa Girl Eats for the past two years. Her site has always been a hit, but it has seen explosive growth from the time I started working with her, especially with things like Pinterest making sites like hers a mecca for foodies.

It has provided me with a tremendous amount of exposure to things that I would have never had to face, learn, and overcome on something like my own measly blog. While it’s been some intense problems, I am always grateful to concur something new that I would not of otherwise had the opportunity to learn.

In the past two years we have:

• Written a completely custom theme.
• Been through four hosts, ranging from shared to VPS to cloud.
• Started using NetDNA as our CDN to offload the nearly 4.5TB of bandwidth usage per month.
• Scrutinized every plugin and reduced the number used by more than half.
• Tracked down and killed every PHP error and warning.
• Optimized the database, converted to InnoDB, and cleaned up a lot of cruft in options and revisions, which still left it with a 500MB footprint.
• Wrote a completely custom caching system Redis because popular caching plugins couldn’t keep up.

To be honest, I do feel quite proud that I’ve helped keep the wheels on for this long.

But even with all these pieces in place, we were still running up against issues. Issues that I will fully admit are beyond my capabilities, like the WordPress Cron getting hung about once a week which caused a core WordPress error to get thrown hundreds of times…per millisecond…and required a server reboot. Not to mention random site slowness / sluggishness, especially in the WordPress admin, with no rhyme or reason that I or hosting support could discern.

These are exactly the kinds of things me or my client should not need to worry about at this point.

I knew I couldn’t continue to battle this on my own. I needed help. I needed experts.

This led me to WP Engine.

Show Me The Money

There are a few managed hosts out there completely dedicated to WordPress, but without question, one of the most well known ones is WP Engine. Their reputation within the WordPress community is undeniable, especially for their support and expertise. It’s almost absurd how overwhelmingly satisfied WP Engine customer seem to be and they are not shy about letting people know.

So let’s just cut straight to the chase… The price.

Even WP Engine’s entry-level plan will cost you $29 a month for a single site. Compare that to shared hosting, which can be had for $5 – $10 a month at several very popular and reputable companies. On top of that, you can usually run as many sites as you want for that same price on those other hosts. You can also get into VPS and cloud hosting for under a $100 at most of those same places, which is equal to or under WP Engines next two plans. And if you’re doing more than 400k pageviews per month, that can send you into the unsettling “Let’s Talk” price range on WP Engine.

So the question at hand… Is WP Engine worth it?

The Verdict

In short, the answer is a resounding…yes!

I have never been more impressed with a hosting company. I completely understand why their users rave about them so much. They literally are experts, through and through.

Here are just a few reasons why I have been so impressed.

• I had multiple phone calls, with a real person and with the same person, throughout the setup and customization process. Yes, email is convenient, but it was really refreshing and comforting to talk to a real person.
• After the setup and customization process, you get access to support via live chat and tickets. I know that other companies do this too, but their live chat people are always and consistently available and wicked smart. I have yet to stump any one of them on anything.
• Zero configuration, zero hassle. I have literally had to do nothing. In fact, I have had to undo / remove a lot of things I’ve done in the past on my own because they just handle it automatically. Things like advanced .htaccess, CDN integration, and caching. No plugins necessary. Again, it just happens. Their infrastructure is dazzling, even just to read about.
• We no longer need to use VaultPress for backups. They do all of this automatically, too.
• You can deploy new versions of your site by simply pushing to a Git repository. No S/FTP. Just push and it’s live.
• A completely sandboxed staging environment to do all your testing, configuring, tinkering, and client approval before you go live. All with a single click of a button. And you have Git push to deploy access to here too!
• They audit your codebase for poor performing plugins, notify you, and recommend replacements that perform better. They do this for slow performing parts of themes and error logs too. it’s like having a whole team of developers working with you.
• The speed is absolutely gross and that is saying a lot for Iowa Girl Eats, which is extremely image rich. No matter what we have tried in the past, the site is the fastest it has ever been.
• And probably the most impressed I’ve been with them is when we had completed our migration to WP Engine, we were having issues with newly uploaded images. They would display in the WordPress post editor, but not on the live site when previewing the post. I was fairly confident it was a CDN issue, but I assumed something got setup incorrectly on our account. I cannot tell you how liberating it was to know this wasn’t my problem and I could just contact them about it. The best part, it was actually my error. I forgot to change the origin IP address on our CDN account to point to WP Engine’s server, but they figured that out for me and very kindly let me know. They figured out an issue what was my fault in a system that was not even their own!

The bottom line is this…

As a developer, I don’t have to worry about what I don’t know or what I’ll have to become an expert on, especially with things I really don’t want to be an expert on. And my client doesn’t have to worry how her site is performing, how it is impacting her readers, hampering her ability to compose posts, or feel like she is constantly bothering me.

For both myself, and my client, the extra price is well worth the time we save and the stress we no longer have.

What I have really learned is that not all hosting is created equal. If you value your time, it’s most certainly worth every bit more.

You should do yourself a favor, sign up, and give them a try.

Trust me. You will not regret it.

The post WP Engine: Is Managed WordPress Hosting Worth The Premium Price? appeared first on Michael Novotny.

There are so many scenarios to account for, such as WordPress versions, plugin versions, plugin conflicts, host server configurations, browsers, and the endless ways you can customize WordPress through post formats, custom post types, theme options, theme templates, etc.

In this vast sea of variety is both the pleasure and the pain in developing WordPress themes and plugins for mass distribution.

Today I would like to begin to put an end to one of those variables. I would like to introduce the release of WP Test, the best tests for WordPress.

WP Test is exhaustive set of test data to measure the quality and integrity of your plugins and themes.

The foundation of these tests are derived from the WordPress Theme Unit Test Codex data. On top of that, I added three years of leading quality, support, and testing for 8BIT, which has uncovered some corner cases in the way people use WordPress.

WP Daily, Post Status, and Tom McFarlin have already given WP Test some great coverage (thanks guys!), but I want to expand upon the reasons why I created WP Test.

Transparency

Without question, the WordPress Theme Unit Test Codex data is good place to start. My frustration with it was born out of lack of updates. It could go more than a year without any attention, even when major updates to WordPress introduced new features that lacked examples and testing coverage. And when the test data did update, there was no indication of what had changed within the data.

WP Test comes with a changelog indicating what has been added, removed, or changed within the data for each release. The website also has a release notes page also indicating the history of changes to the test data.

Contribution

Contributing to the WordPress Codex is fairly straightforward, but contributing to the test data is not.

By using GitHub to host the test data, anyone is free to contribute to the project by making pull requests or by adding issues. There is also a contact page on the website if you are not comfortable with Git and / or GitHub.

I purposely excluded the word “comprehensive” in the description of the tests. I know the test data is most likely missing coverage in some areas. That’s where the community comes in. Let me know of a test that is not covered and I will get it added to the data so we can all account for it in our products.

Life

Testing can be tedious and boring enough, but there is no need for the test data itself to be mundane.

Lorem ipsum is effective. It does simulate text flow fairly well, but it’s boring as hell. I wanted content with life and character.

There are no testing benefit to this, but it does inject personality and fun into traditionally dry content. This alone is a good enough reason for it to exist in this way.

Purpose

Not only is your test data content funny, but it’s smart and helpful.

Whenever possible, the test data references the WordPress Codex for best practices and function references.

These kind of integration into the test data will only increase over time and lessen the barrier to resolving the issues the test data uncovers.

Consolidation

I had test cases scattered all over the place… Across three servers and ten WordPress installations. It was a chore to remember where everything was located, so I decided to centralize it.

This way everyone on the 8BIT team are consistently developing against common WordPress scenarios for both internal and personal projects.

Community

Sharing is caring, right?

I was going to consolidate all these test cases anyway, so I could have either kept it private for just our team or I could release it for the greater good of the WordPress community.

All it literally cost me was a domain name. That seems like a small price to pay for continuity.

The decision to make it public was a no brainer.

The Future

WP Test would be good enough as just test data, but I do have bigger plans for what it could be beyond what it is today. I would love to see it grow into an all encompassing suite of WordPress testing tools and data. Who knows if it will ever get there, but at the very least, now we can all share and contribute to an impressive set of test data.

Please let me know if you have any ideas, additional test cases, or feedback!

Let’s make WordPress testing easier and resilient together.

The post Introducing WP Test: The Best Tests For WordPress appeared first on Michael Novotny.

I gave a presentation on Testing & Troubleshooting WordPress Plugins & Themes, which is the culmination of all that I have learned from leading quality at 8BIT for the past three years.

I am posting my enture presentation along with bullet point cliff notes and resource links for each slide.

• I live from Des Moines, IA.
• I am a frontend developer for John Deere.
• My website is manovotny.com.
• You can follow me on Twitter at @manovotny.

• I have been working for 8BIT for three years.
• I oversee quality for 8BIT, which means I test the integrity of our products before they are released.

• Most theme, and especially plugin issues, can be mitigated by properly using jQuery.
• Do not add your own version of jQuery.
• Do not deregister the version of jQuery that comes with WordPress.
• To use jQuery, properly enqueue the version of jQuery that comes with WordPress.
• While jQuery is the most popular example, there are actually several included scripts that come with WordPress, so be sure and properly queue those versions instead of using your own.

• Use WordPress conditionals to only display scripts on pages when they are needed. This reduces the changes of scripts conflicting with each other.
• For example, only load the CSS and / or JavaScript for a widget plugin if that widget is being used and be displayed on the current page.

• I created WP Test to help identify issues while developing WordPress themes and plugins.
• It is a fantastically exhaustive set of test data to measure the integrity of your plugins and themes.
• It contains lessons learned from over three years of theme and plugin support, and baffling corner cases, to create a potent cocktail of simulated, quirky user content.

• In your development environments, tell WordPress to start logging and reporting errors so you can address them.
• Find your wp-config.php file, which should be at the root of your WordPress installation. Just replace the existing define( 'WP_DEBUG', false ); with the code below.

• Debug Bar is a debugging menu added to the admin bar that quickly shows query, cache, and other helpful debugging information.
• A very useful way to view the errors being logged and reported.

• Notice the “Debug” button in the WordPress admin bar turns red when there is a error or warning.
• Click it to open the Debug Bar panel.
• Notice the message it’s reporting so you can fix them.

There are many Debug Bar extensions that can provide a deeper view into what is happening.

• Debug Bar Actions and Filters Addon
• Debug Bar Console
• Debug Bar Cron
• Debug Bar Post Meta
• Debug Bar Query Tracer
• Debug Bar Super Globals
• Debug Bar Transients
• Debug Bar-Extender
• Kint Debugger
• WooCommerce Debug Bar

• Log Deprecated Notices is a plugin that helps you identify old WordPress API functions your theme or plugin is currently using so you can update to the newer methods.

• Log Deprecated Notices logs its calls under the Tools menu in the WordPress admin.
• Sometimes themes or plugins will want to keep these deprecated calls anyway, especially if they want to support older versions of WordPress, so you will need to make that call on your own when reported.
• Note that it is a best practice to keep up-to-date with the newer methods instead of keeping legacy support whenever possible.

• Theme-Check is a simple and easy way to test your theme for all the latest WordPress standards and practices.
• It is located under the Appearance menu in the WordPress admin.

• Sometimes Theme-Check reports false positives, so you will need to determine if something is a legitimate claim that needs to be fixed or not.

• Theme Mentor is the cousin of Theme-Check plugin.
• It does deeper code analysis to ensure best practices, like checking for the dequeueing of jQuery as we discussed above.

• RTL Tester is essential for troubleshooting for plugins and themes that offer support for right-to-left reading languages.

• Slim Jetpack is simply Jetpack without the need to connect to a WordPress.com account.
• Handy for development environments who do not need the connection to WordPress.com to test Jetpack features.
• Someone in the Q&A session mentioned that Jetpack does now ship with a “Developer Mode” which you can enable to not require the connection to WordPress.com while in development environments. Simply add the code below to wp-config.php to enable developer mode.

• At some point in your development career, you will be bit by browser cache.
• If you are not seeing changes you’ve made to CSS and JavaScript files, try clearing your browser cache.

• We use a process of elimination procedure at 8BIT to determine where to begin looking for a point of failure.
• If things are not working, we first disable all plugins to see if that resolves the issue. If things start working again, then we enable plugins one by one until the issue reappears. Then we know we’ve found our culprit and we can begin troubleshooting the plugin.
• If plugins are not the issue, then we try switching to one of the default WordPress themes like TwentyEleven or TwentyTwelve. If the issue goes away, then we know it’s a theme problem we need to resolve.
• If both plugins and themes are not causing the issue, then you know you have an issue with WordPress core or a server configuration issue.

• Chrome Developer Tools is the most advanced way to inspect what is going on underneath the covers of your website.
• The Firebug extension / add-on is a good alternative for other browsers, though it is not as capable as Chrome Developer Tools.

• You can open Chrome Developer Tools by right-clicking anywhere on the website and select Inspect Element.
• This will open a panel at the bottom of your browser (I have moved mine to the right).

• The Elements tab contains markup and CSS for the current page.
• In this panel you can select an element. In the screenshot I have selected the <div class="container"></div> element. This also highlights that element on the web page itself in a light blue overlay as seen in the top navigation of the website.
• The far right of the screenshot also shows the CSS being applied to the element, the selector that is causing the CSS to be applied, as well as the order the CSS styles were loaded in. These CSS properties an values are editable, so you can make live changes to your website and see what it looks like without even refreshing your browser.

• The Sources tab shows you all the CSS and JavaScript files that were loaded as a part of the page.
• You can open files by clicking the little file browser icon above the line numbers or by pressing Control + R or ⌘R while in the tab.
• The content of these files can be edited live and the changes will take place immediately without needing to refresh the page. This is a great way to quickly troubleshoot.
• You can also set breakpoints by clicking on a line number. The next time the page is loaded, it will stop there and you can inspect variable values to see what is going wrong.

• The Console tab is a essentially a full on Terminal or Command Prompt.
• For the sake of troubleshooting, all we need to use it for is to see if the site is throwing any errors. It will report things like not being able to find a file or if your JavaScript is throwing an error. Just keep it open at all timers during testing and make sure nothing pops up in there.
• There can be false positives, like loading a YouTube video. These errors can just be ignored.

• Viewport Resizer is a handy bookmarklet that will load your site in a viewport the size of common devices. This is helpful in testing responsive design.
• It is one of the few plugins that accurately display websites that are not built to be fully responsive, yet you want to still see what it looks like on a mobile device.
• Someone in the Q&A session also recommended the Web Developer extension as an alternative that properly displays websites with the correct user agents.

• Note that you can select different devices from the Viewport Resizer Toolbar in the upper left corner of the browser window.

• BrowserStack is a paid service that will give you access to testing your website on all browsers, devices, and operating systems.
• It also comes with built-in debugging tools.
• Someone in the Q&A session also mentioned that if you have a Mac, you can pair Xcode’s iPhone / iPad simulator to Safari’s Web Inspecter to debug. You can also plugin your iPhone / iPad via USB and use Safari 6 to live debug webpages on your iDevice with Web Inspecter. This Webdesigntuts+ article will walk you through that process.

• An example of a website in IE 8 running on a Windows 7 machine all from within my browser.
• The websites are fully interactive not just a screenshots.

A special thanks to Jared Erickson for making our team look united in our presentations. The guy can make anything look good, even slides and presentations.

And thanks to everyone who attended my talk and to everyone who came to WordCamp Atlanta. It was great to meet you all face-to-face and the conversations we had are priceless.

Please let me know if you have any additional questions about my talk or these notes. I would love to help answer them for you.

Slides

I am also making all the slides available in a single PDF, which you can download below.

Download Slides

Video

Below is the video recording of the session, if you would like to watch it “live” instead.

You can also watch this talk on WordPress.tv along with all the other WordCamp Atlanta 2013 videos.

The post How To Test And Troubleshoot WordPress Plugins And Themes appeared first on Michael Novotny.

I also have the privilege of speaking this year. I will be giving a presentation on Testing & Troubleshooting WordPress Plugins & Themes on Saturday, March 16th at 10:00am EST.

So if you want some practical techniques, tips, tools, and resources on how to help test, troubleshoot, and proactively address common WordPress plugin and theme issues, then come find me and have a listen.

I will post my slides after I actually give my presentation.

Looking forward to meeting all of you I know digitally and to meeting many new WordPressers. Come and find me and say hello!

The post Speaking At WordCamp Atlanta appeared first on Michael Novotny.

When I got my new computer, I took the opportunity to clean up my local development environment. That meant a fresh installation of MAMP Pro and some new databases.

I got everything setup and I was settling in for a good, long second shift when I saw this in my WordPress admin.

All the WordPress admin styles were not loading.

This was not what I had planned for my evening… *sigh*

I wasn’t sure what was going on… Could it be something wonky with my new computer? Was it due to updating to the shiny new WordPress 3.5? I tried to reinstall WordPress a couple of times to no avail, so intense Google searching ensued.

I cannot remember how many articles I read or how many suggested hacks I attempted. I do know it took well over an hour and none of them worked. Then I found something buried deep in some sketchy looking site, but it worked!

I am not trying to hold out on giving credit to the person who suggested it. I simply did not think to save the URL at the time. But this is what the article suggested.

And let me be clear… I do not encourage WordPress core hacks, but in the moment, I just wanted to fix it and move on with my small window of time I had to work on my hotfix.

In the wp-admin/load-styles.php file, find this line of code…

…and change it to this…

…and then simply refresh your WordPress admin screen a few times. You should see the WordPress admin CSS styles come back to normal.

That’s it! And you do not even have to leave this WordPress core modification in place. Once the admin styles come back, you can revert the line of code back to what it was and you should still have smooth sailing after that.

Bizarre…

Dan in the comments also said that simply adding the code below to your wp-config.php file will also do the same trick. It certainly feels better than modifying the WordPress core, even if it is just temporarily.

So if you ever run across this, perhaps it can save you some time and get you back on track. I am not saying this will work in all cases of the WordPress admin not loading the styles, but this is what worked for me.

I have no idea why this works, so if you have a more technical or detailed explanation of why, then I would love to hear so in the comments.

I have never had this happen again, otherwise, I will dig in much deeper next time to see if I can identify a root cause.

The post How To Fix WordPress Admin Styles Not Loading appeared first on Michael Novotny.

I have to admit, I have been pretty spoiled when it comes to computers over the past several years. I have not bought a computer for myself since 2007. I have been incredibly fortunate to have employers give me top-of-the-line hardware for both company and personal use.

My new job is decidedly more corporate, which means it came time for me to once again separate work and personal computer use.

Now, which computer to get?

In the past six years, I have gone from a 15″ MacBook Pro, to a 17″ MacBook Pro, to a 15″ Retina MacBook Pro. I sadly had to return the latter when I resigned. I also knew I would be getting another 15″ MacBook Pro at my new gig, though not a retina one. So with my more demanding development environment on my work machine, it seemed a bit overkill to also have a 15″ MacBook Pro of some flavor as a personal machine too.

This brought the battle down to the 13″ beauties… The MacBook Air vs. the Retina MacBook Pro.

Pre-Game

Nearly all of my close friends all sport a MacBook Air. They swear by the machine as the ultimate combination of portability and power. I had some reservations about the power (again, I have been spoiled) and the screen, but they all convinced me that everything would be ok.

I had also heard a rumor that the 13″ Retina MacBook Pro was graphically underpowered trying to serve up all that sweet, sweet retina, which gave me pause as well.

The good news is, Apple also allows you to return a computer, no questions asked, within 14 days. WIth that safety net in place, I decided to purchase the Air first as the most svelte and affordable option.

13″ MacBook Air

By far, the most appealing aspect of the Air is its form factor. The thing is ridiculously light and thin. I mean, I have been to the Apple Store and seen one, but you do not fully appreciate its agility until you own one and actually use it and lug it around. It is the most ridiculous computer I have ever owned.

There were no performance issues, since I am not running an enterprise app environment. Yes, I am maxing out my RAM usage more often, but nothing to the point where I saw performance hits.

But the screen… It is very, very sad.

Display Manufacturers

The first thing you need to know is that there are two different manufactures of the MacBook Air displays, LG and Samsung. It is a complete toss-up as to which one you will get. Most agree that the Samsung display is far superior to the LG display. Mine was an LG and all the ones at my local Apple Store were Samsung. Side-by-side, the different was astounding. The LG is incredibly dull and washed out compared to the vibrant and rich Samsung.

To determine what display your MacBook Air has, you can launch Terminal and enter this command.

The command will spit out a string of letters and numbers. If the output starts with LP, then you know you have an LG display. Anything else should be a Samsung display.

Color Profiles

One way to overcome the LG issues is to calibrate your display. To calibrate your Mac, you can go to System Preferences > Displays > Color. You can walk through the process yourself (do the advanced mode) or you can scour the internet for ICC color profiles to install on your machine.

I had mixed results doing the process myself, so I spent hours looking for the best color profile to install. I searched endless forums threads until I came up with the best I could find. I saved you some time and attached what I considered the best three I found.

Download MacBook Air Color Profiles

To install color profiles Macs:

1. In Finder, navigate to /Library/ColorSync/Profiles/Displays/ and drop in the .icc files.
2. Go to System Preferences > Displays > Color and select which color profile to use.

In the end, I simply could not look past the screen. It bothered me every single time I sat down at my laptop. There was no way I could keep it.

13″ Retina MacBook Pro

So I went back to the Apple Store and traded in the MacBook AIr with zero hassles and walked out with a retina MacBook Pro. In a word… Stunning.

Like I said, I had used a retina MacBook Pro for 8 months. My iPhone is also retina. My eyes are not only drawn to the sharpness, but they had become accustomed to it. I could go on and on about the screen, but Brian Gardner, who was a diehard MacBook Air fan, sums up everything I could try to articulate in why he sold his 13″ Air for a retina MacBook Pro.

Aside from the screen’s incredible sharpness, it gives you a higher screen resolution compared to the Air, also due to the retina goodness. Developer and designers alike will love those extra pixels. The performance is better than the Air due to beefier hardware. I have never experienced the rumored sluggishness others had mentioned due to the lower end graphics card and the retina.

Apple even came out with a hardware refresh and price reduction on the retina MacBooks last week making this decision an absolute no brainer.

One Month Review

It has now been one month since I settled in on my decision to keep the 13″ Retina MacBook Pro.

I have zero regrets. This is the best machine I have ever owned. The perfect combination of power and portability, just like the MacBook Air, but a screen I never tire of staring at all day. A far cry from loathing every morning when I sat down with the MacBook Air wondering if I would ever get used to the dull screen.

Do yourself a favor and just get this machine. You will not regret it. You have my word.

The post 13″ MacBook Air vs. 13″ Retina MacBook Pro…Fight! appeared first on Michael Novotny.

But things change, especially in technology.

Today is bittersweet. Today I am officially breaking up with Flash…for good.

It’s not you, Flash. It’s me. It is time to see other platforms.

My wife and I needed money to pay for our wedding, so I started freelancing to raise the extra cash. The HTML, CSS, and JavaScript landscape was completely different six years ago… Does anyone remember slicing an image into nine pieces to get round corners? That kind of frustration made Flash an easy choice at the time. I could simply draw a rounded rectangle on the stage and I was done! Immediate gratification. I paid $100 for a screencast course on Advanced Flash Website Development and the rest is history.

I started out doing simple Flash websites for about a year. It wasn’t long before I started to build advanced Flash applications. Flash was never meant to create websites or applications, but the Flash development community took it there. Adobe eventually responded by creating Adobe Flex, which at its core is still Flash, but with a much more feature rich framework. Flex gave Flash the ability to become a viable enterprise development platform and it took off like a rocket.

Flex gave me the opportunity to work with some of the best RIA (Rich Internet Application) companies in the world. The experience I gained in learning how to architect complex web apps was invaluable. I am very thankful for the chance to work with some of the best and brightest developers in the industry.

The beginning of the end, for me, was in 2010 when Steve Jobs published his Thoughts on Flash. I believe this single article is responsible for the current landscape of technology, namely the two differing perspectives of Google and Apple. Most of my colleagues fell into the Google camp due to their allegiance to Flash. I took Steve’s article as a wake up call. I knew that it would be irresponsible of me to continue to invest my professional career into a language that was dead or dying, so I began to spend any free time I could muster investing in myself and learning other technologies.

During the next two years, it would turn out that Steve Jobs was right. In the fall of 2011, Adobe announced their intention to open source the Flex SDK, which I interpreted as a kind way of saying, “We’re done with Flash, too”. Their attempt at a FAQ article only confirmed my assumptions that they were shifting their focus to HTML5. This only increased my desire and decision to make a transition.

These turn of events is what led me to WordPress and the more traditional web stack of HTML, CSS, and JavaScript. Technologies like HTML5 and CSS3 have emerged in the wake of this new post-Flash era, with an unrelenting and unapologetic attitude.

I have been doing development for 11 years now and I have never experienced such an explosion in development as we are in right now. Yes, I know I am young with even 11 years of experience in the technology landscape, but just look at what is going on now that did not even exist just 2 – 3 years ago. Entire industries and livelihoods have been birthed in such a short time.

• The aforementioned HTML5 and CSS3.
• Mobile and tablet platforms, like iOS and Android.
• Responsive frameworks, like Bootstrap and Foundation.
• New frameworks, libraries, and plugins released nearly every day.

It really is an exciting time to be a developer and I simply could not continue to try and keep up with where development is going in what little free time I have. The time came to make a dramatic change.

December 31st, 2012 officially marked the last day I will be doing Flash development and I could not be more excited to finally say that.

So what’s next?

I will be turing my focus towards UI / UX front-end development, both in web and mobile. Really looking forwards to taking what I already know about HTML, CSS, JavaScript, and Objective-C to the next level.

I am really stoked for 2013! It will be a year of immense learning, new opportunities, renewed focus, and incredible growth.

I never imagined I would be where I am today as a developer. Flash played an important part of my professional life, and for that, I thank it. But it is time to move on and I cannot wait to see how it all turns out.

The post Breaking Up With Flash appeared first on Michael Novotny.