Johnathan.org

May 2015 Archives

Create High-Resolution Mockups for Your App or Site with Promotee

When it comes to promoting your site or app, it’s important that your renders are high quality and accurately portray what your customers should expect.

Promotee is a Mac application to create pixel-perfect and professional looking artwork for iOS, Mac and Android apps. Just drop a screenshot from your app onto a template in Promotee and our graphics engine will blend it into the template to generate a gorgeous looking result.

Promotee has one goal: to do exactly what I said without breaking the bank of paying for renders or shooting your own devices, wasting valuable time. I sat down with the app and here’s how it went.

When you launch the app for the first time, you’re dropped right into it with no fuss. You’re given an interface that allows you choose from iOS, Mac, and Android devices. By default, all three categories are selected under the “All” tab.

Over the top of the window is side-scrolling menu where you can choose the device and layout you desire. This list includes iPads in both horizontal and vertical arrangements, a three-way iPad setup, iPhones in both black and white, and more.

Because I’m about bullying testing it out, I took three screenshots of my homepage for the 3-way vertical iPhone arrangement. The middle image aligned properly, but the side two did not, leading to a less-than-ideal visual:

Screenshot 2015-05-03 15.45.32

Hoping that it was just a bug, I moved to a single device both vertical and laying flat, both iPhones. This time, I had success both times. All hope was not lost on this app. When dragging the image into the zone marked on our mock device, it took next to no time at all for the render to complete. I suspect this is because re-orienting an image within bounds is trivial. I don’t foresee any issues on even lightweight OS X systems like a Macbook Air. My Macbook Pro is four years old and it was just another day in the life.

Speaking of OS X devices, I wanted to see how well Promotee could churn out mockups of a Macbook Pro. I selected the Mac category and found a mockup of a Macbook Pro (non-retina) just like what I own.

Since we had trouble with the 3-way iPhone setup earlier, I wanted to try again with the 3-way iMac setup. Unlike our iPhone setup earlier, this mockup was flawless.

Android devices get some love, too, so don’t worry about that. If you’re looking for additional devices and you bought the App Store version, you can pick up the 5C/iPad mockup and the Macbook Air (perspective) mockup for $0.99 each via an in-app purchase. If you bought the app right from their site, you’ll have to go back to their site to get your mockups, still $0.99 each.

I’ve included images below from the app below that I created in the process of writing up this review.

All in all, this app is pretty slick. It does exactly what the developers claim it does, albeit with a hiccup here or there. I suspect whatever bug is plaguing the app will be fixed at some point in the future. For right now, It’s a maybe. It’s $4.99 on both the App Store and straight from their site. It’s possible that by the time you read this, whatever issue I experienced is now fixed. if that’s the case, I’ll update this article accordingly.

This slideshow requires JavaScript.

18 Resources for Getting Started with WordPress

WordPress is one of the most popular blogging platforms and content management systems on the planet. Created by Matt Mullenweg and the team at Automattic, it’s an open source and free tool using PHP and MySQL for creating just about any kind of site you can imagine.

Today I’m going to cover a load of resources for getting yourself familiar with WordPress, what it can do, and how to expand and develop for it.

Basics

Before we get into the technical stuff, we need to cover the basics. You won’t get very far if you don’t know how to install it or navigate its interface.

The WordPress Codex

This might be the single best starting point. Coming straight from the source, every single person new to WordPress needs to read the getting started guid on the WordPress Codex. This guide describes where to start from the very beginning: what a weblog is really all about. It continues from there to making a plan regarding your hosting situation, installation, setting up, working with themes and plugins, and finally getting into some more advanced topics.

WPBeginner

Another great beginner guide comes from WPBeginner.com. Like the Codex but more summarized, the guide from WPBeginner gets you running WordPress “in a week (or less).”

WordPress.com

If you’re looking for a hosted solution, there’s always WordPress.com. With that comes a great guide on getting started there from the folks that make WordPress.com happen. If you’ve never used WordPress before, WordPress.com might be the single easiest way to get familiar with the software before diving into hosting it on your own.

Plugins

Hongkiat

If you want a good overview on how to make a good quality plugin, Hongkiat has you covered. They cover basic folder structures, naming conventions, best practices, filter, and more.

Tuts+ – Jeffery Way

Jeffery Way has a crash course on plugin development in video format on Tuts+.com and covers all the basics to make a good plugin. In this scenario, Way covers how they made an actual plugin to serve a real-world purpose and how he planned it out.

Themes

Plugin development is only a small part of a successful and well-oiled WordPress site. the other portion is a quality theme. Why? Your theme is what people see and having it work properly and be as efficient as possible practically goes without saying.

Make

WordPress Codex

**If you want to make your own theme, you can, should you have the proper front-end development skills. The Codex has a rather extensive list of lessons on various elements of theme developments.

Tuts+ – Sam Parkinson

Another WordPress pro, Sam Parkinson, has a rather exhaustive tutorial on creating a WordPress theme from scratch. Parkinson covers the structure of a theme, what the files should look like, and what various functions look like that you’ll likely be using.

Buy

It’s ok to admit that you’re not good at developing WordPress themes. I’ll admit that, too. Here’s a list of my favorite theme developers.

Ecko Themes

Their shop doesn’t have a lot in it, yet, but the quality is great and the price points are exactly where they need to be.

ElegantThemes

This shop has been around for a while and their list of themes is extensive. At the time of this article, they have 87 themes that come as one large package for $69. That comes out to be around $.80 a theme. if you’re a developer or want lifetime access, you’re looking at still low prices of $89/year or $249 one time.

Mike McCallister

He’s been in it for a while and his collection of themes serves a wide audience and great support comes with each theme. You can buy each theme individually or get access to the whole collection for $199.

Free

It’s also OK to go with a free WordPress theme if you’re finding what you looking for without spending any money. Frankly, WordPress themes can be expensive, too.

Modern Themes

The team behind Modern Themes is shooting for creating quality themes that don’t cost money. Just because a theme doesn’t have a price tag on it, doesn’t mean it has to be sub-par. Modern Themes hosts a variety of themes that cost zero dollars, with premium options that offer up additional features for a fraction of the price of most premium themes.

Anders Noren

A Swedish developer, Anders Noren creates great WordPress themes, mostly for free. As someone who’s used several of this themes in the past, I can vouch for the quality.

WordPress.org

The WordPress Theme Directory is the go-to repository for every WordPress.org approved theme. Each of the themes on this site meet strict quality standards and there are literally thousands to choose from.

WordPress.com

if you’re rocking a hosted WordPress site on WordPress.com, this site will become a favorite for you. At least 345 themes are featured here of both free and premium varieties.

Extra: All-Encompassing Video Courses

Lynda.com

If you like video training, Lynda has just about anything you could hope for, including WordPress. Prices are great at least than $30 a month.

Treehouse

If you’re a fan of a track-based development course that covers the whole gamut of WordPress development, Team Treehouse has a course you’ll be interested in. It covers the basics like going over the Codex, getting a local development environment set up, theming and templating, Bootstrap, customizing the administration panel, and more. It really is an all-in-one course. Treehouse isn’t free, but for $25/month, you can consume as many courses of their as you like.

WordPress.tv

Great free training and lectures from key players in the WordPress community. If you miss various WordPress events, you might also find them here.

Udemy

Udemy is good for more than programming courses. WordPress development and administration is on their menu, too, and prices are hard to beat.

WP101

A great video library that you can browse on their site. Created by Shawn Hesketh, a 26-year freelance development guy, he’s made likely a literal ton of WordPress sites for his clients. His tutorials have helped over 100,000 people get into WordPress and build their own sites.

Dart: Java-Free Android Apps

Made by some folks from the Chrome V8 Javascript engine team, Dart tries to solve 20-year old frustrations of working with Java. A language created completely in house, it feels a lot like Python.

from ArsTechnica:

Being fast and responsive is one of the biggest goals for Sky. While 60FPS (or Hz) is the smoothness standard most devices and app developers aim for, the Dart team wants to crank that up to 120FPS, which isn’t even possible to display on the standard 60Hz smartphone screens we have today. That sounds rather improbable on Android, where many apps don’t stay at 60FPS, let alone 120. Rendering an app at 60FPS requires a frame to be drawn every 16ms, and apps “jank” or display an animation stutter, when they can’t keep up with the 16ms deadline.

I know the feeling. I’ve experienced it myself many times when I used to own an Android device. I also am a fan of the word “jank.”

The Dart team brought along a demo app, and it was rendering entire frames in 1.2ms. While it was a simple example, it appears Sky has plenty of headroom for silky-smooth animation on more complicated apps and makes that 120FPS goal (8ms rendering time) seem like a possibility. The Dart team says Sky is “Jank-free by design” with APIs that don’t block the main UI thread, meaning that even if the app slows down, the UI will still be fast and responsive.

Now that’s what I’m talking about. I’m not entirely sure why 120fps is necessary as they’re still struggling to get 60fps to run smooth. Baby steps, folks. Sure there’s nothing wrong with aiming high, but I’d hate to see this dropped because they never got to 120fps in real world use cases.

Read the rest of the article Dart on ArsTechnica or check out Dart for yourself.

Bulk Updating Any Meta Values in WordPress Posts Automatically

I updated the look of my site, today, and with that came a non-standard setup for featured images and the realization I’d have to manually update a lot of posts.

The theme requires custom meta be used for the featured image setting to determine how to display an image. As of this post, I have roughly 170 blog posts in the database that would need updating from the beginning of January until now. I definitely didn’t want to spend the next 60 minutes (170 posts * time to click) updating each post, so I did a bit of quick and dirty PHP coding.

Placing the code within the_loop() allowed it to run automatically for each post that was presented. Setting the per-page post count to 200, I effectively had all 170 posts pushed on screen at the same time. This subsequently updated all 170 posts at the same time. This of course put a little bit of a hit on my SQL database, but not so much that it bogged it down. I’m sure having 170 * 2 reads then writes all at once blew out a few of the cobwebs. Most of this site is cached pretty effectively so the database doesn’t do much.

Screenshot 2015-05-02 18.23.56

You’ll see in the image above where I made the updates. The first spike should have been the only one, but I entered the wrong value for one of the custom meta fields so I had to go back and do it again. The code has logic so if it was already correct, it skipped it, hence the smaller second peak.

If you’re curious, the above came from NewRelic, a service offering made by some pretty cool people. They’re free to use for the basic stuff and their customer service rocks.

Anyway, without further delay, here’s the code that made this happen:

.gist table { margin-bottom: 0; }

Pretty neat, eh? I know it’s nothing spectacular but it gets the job done, for sure.

Share this post with everyone you know who’s even just remotely interested in WordPress development. One could even bulk-update posts themselves with zero clicks or interaction necessary.

I feel like I did a great thing, today. Time for a beer.

Johnathan Lyman
Kenmore, WA,
United States
 
blogging, design, technology, software, development, gaming, photography