Speaking at the Inaugural WordCamp Greenville

I was excited to hear about another WordCamp being held close to my home base in Atlanta. Greenville announced their first WordCamp and I was happy to apply as a speaker with a few presentation ideas. I was excited to hear that I was selected as a speaker. Today it dawned on me that as I’m preparing to head to Clemson tomorrow, that I hadn’t even posted that I would be there. So here’s the announcement that I’m speaking at the Inaugural WordCamp Greenville 2018, tomorrow. 🙂

There’s the official announcement from @WordCampGVL.

I’ll be presenting a quick introduction to all things development. While I have presented this topic a couple times now, I still enjoy it. Each time I have a handful of attendees come to thank me and say they had never seen the big picture so simply before. I remember (and still am sometimes) a beginner with certain technologies and getting a quick overview sweep of the whole landscape is helpful and grounding so I can know how it all fits together. I joke when talking about being a web developer/engineer that I started more on the design side. Heck, I even have a BFA, bachelor’s of fine art degree. So, what you might ask am I doing programming sites. I started more on the design side but have since joined the dark side. I have found a more fun and creative outlet writing code than I did actually visually designing things. I still feel that web development is a creative exercise and enjoy the technical side as well as the process and the creativity required. I enjoy helping others grasp this complicated landscape we call web development because I was there and still get lost sometimes myself. So, this talk is called:


Beware the dark side, or an Intro to Development

Crash course introduction to web development for WordPress covering acronyms, buzzwords and concepts that often leave outsiders mystified. Overview of primary development processes and what software and tools are needed to play the game. We’ll cover what you need to go from zero to developer and hopefully how to have fun on the way. WordPress development tools explained for beginners: ftp, git, svn, php, html, css, sass, js, jquery, IDEs, themes, child themes, the Loop, hooks, APIs, CLI, agile, bootstrap, slack, linting, sniffing … etc.


If you’re in the area, sorry for the late notice, because the Conference is sold out, but I’ll update you with slides once they are complete on my WordPress page and the presentation will be up on wordpress.tv eventually.

Custom Post Types or Choose Your Own Adventure – WordCamp Atlanta 2014

I’ve been fortunate enough to be able to present at WordCamp Atlanta 2014. That makes the 3rd year in a row I’ve been able to contribute to WordCamp Atlanta!

WCATL-Speaker

Here are my slides. I’ll be posting a full blown post of my presentation as soon as I can get it all down. Plus I hear there will be a video posted to wordpress.tv at some point, so, watch for that.

Add Parent Page Slug and Parent Template to WordPress Body Class

Add CSS body classes for the parent page on all child pages and the parent page template on of a WordPress site with this body_class filter. Ever need to style all child pages of a parent page in the same way or have you wanted to access every child page of a parent page via css selectors for styling? What about selecting all pages that are descendants of a page which is using a specific template?

body_classes_htmlBuilding large websites gets complicated, even in WordPress. Large sites usually mean there are many subpages and sections to the website that may need to be styled similarly. I’ve found it helpful to add a page’s parent page slug to the body class to allow me to alter or target the page or group of pages via css. By default the themes I’ve used have been generous in adding classes to the html body element for easy css selection rules. Things like the post slug, page template, logged in status, page vs post (or custom post type), post id, author… you get the idea. While half the time I don’t need half of this and the other half the time I find myself needing more.

Place this code into your functions.php file and your html body element will have a couple additional classes if they apply. It will have a class delineating the slug for the parent page on all child pages as well as a class delineating the template used by the parent page. This lets me apply styles to a whole sibling-section of a site pretty easily by just targeting the parent-slug on the body. Also adding the template of the parent in case I needed to use that.

post_parent_classesWalking through the code here we’re filtering the body_class function is how we are able to add this. We name our own function and give it a $classes parameter. Then throughout our function we can add classes to this $classes array and they will be output with the rest of the body classes. We need to hook into WordPress at the body_class function with add_filter and specify the hook and specify our own function to be called. In this case we grab the page properties of post_parent and the template of that parent. First set the post variable to reference the global scope, and then check to see if the post is a page with is_page. Then if the post object has a value for the parent (post_parent) we add the parent’s name to the classes array. Then we get the _wp_page_template meta data from the parent to find the template it’s using (if there is no template specified, then it returns default). This is added to our classes if it exists and then we return the classes array to the original body_class WP core function.

[cc lang=”php”]
/////////////////////////////////////////////////////////////////////////////////
// Body class adding page-parent
//
function cc_body_class( $classes ) {
global $post;
if ( is_page() ) {
// Has parent / is sub-page
if ( $post->post_parent ) {
# Parent post name/slug
$parent = get_post( $post->post_parent );
$classes[] = ‘parent-slug-‘.$parent->post_name;
// Parent template name
$parent_template = get_post_meta( $parent->ID, ‘_wp_page_template’, true);
if ( !empty($parent_template) )
$classes[] = ‘parent-template-‘.sanitize_html_class( str_replace( ‘.’, ‘-‘, $parent_template ), ” );
}
}
return $classes;
}
add_filter( ‘body_class’, ‘cc_body_class’ );
[/cc]

There are many more classes we can add to the body_class and like I said, sometimes you need more than what’s already provided and sometimes you need nothing. It all depends on the theme you’re using, what it provides and what your specific site and design require. What other classes have you wanted to see here? How have you filtered body_class to fit your site’s needs?

Android App Development Keystore for Beginners

Getting into some mobile app development for Android and I was unprepared for the keystore file that is required to be included in the apk file. Using PhoneGap Build to compile my app the interface requires a keystore file uploaded.
Screen Shot 2013-02-05 at 1.55.07 PM
After some digging on google it seems that the most common way to create a keystore file is by using some Java IDE like Eclipse, but the whole reason I was using build phonegap was because I didn’t want to fool with one of those. I finally pieced together what I needed with a few posts and wanted to put it all together to help at least myself in the future.
phonegap keystore upload alias
Luckily with a mac apparently you can do this with terminal! Following a couple tutorials, I managed to create a proper file, and going through a few steps to set the expiration or validity and the alias.

To create a keystore on mac OSX, first, open terminal. We’ll type keytool and then there are some commands to type and our keystore file will be created. -genkey (generates the key), -v turns on verbose mode so full details will be output, -keystore tells it what to name the actual file (it actually saves to the root directory, I’m sure there’s a way to specify location somewhere) and you type the filename (including the .keystore file extension). Once you enter this in you are prompted to fill out your name and company name and info like city, state and country. Then it verifies everything and you must type ‘yes’. Then it will prompt twice for a password, remember this it is how you will update/rebuild your app.

keytool -genkey -v -keystore file_name.keystore

This got me going but I had to do some back and forth to know some other requirements specifically for android marketplace and working with PhoneGap. PhoneGap Build was asking for the alias when I uploaded the keystore file to build my project, but I hadn’t set one. I had no idea what it would be and after trying my name and company and even filename I had to do some more digging. We can in fact set the alias name when I create the key with the -alias command. It doesn’t matter what this is, you just have to remember it. I think of it like the username to my previously entered password. The default is set to mykey, so you don’t really need to set it. This got me through the Build process with PhoneGap, and then I set up my app on the android marketplace (after paying the $25 license fee). Once I uploaded my first apk file I was getting errors regarding the keystore again. The marketplace was telling me that the validity was not large enough. The validity (or expiration) of the key by default is set to 90 days, but the marketplace requires at least 10000 days… quite a difference, no? So to set validity we add the -validity command followed by the value of 10000. Once i did this round I re-uploaded the keystore to PhoneGap, rebuilt the app and resubmitted to the Android Marketplace and it was accepted! Wow.

keytool -genkey -alias alias_name -validity 10000 -v -keystore file_name.keystore

terminal creating a keystore file for android apk

I hope that helped someone. I’m surprised that the PhoneGap doesn’t aleviate some of the pain in this process. Since the whole point of using Build PhoneGap is so that I don’t have to set up an IDE or get complicated. A simple online keystore gen process would go a long way, and better yet if they automated it somehow!

Did I miss any steps? Are there better ways to do this? (I sure hope so) Share a comment.

Also, check out the app I made from web technologies html, css and javascript with the help of PhoneGap. It’s a quiz that tests and teaches users facial recognition of leaders at church. It’s called LDSQuiz and shows images of modern day prophets and apostles and asks you to identify them by name.

Reference links that helped me:

A Practical Guide to HTML & CSS – Learn How to Build Websites

I came across Shay Howe’s website today for the first time and am very impressed with his learn section. He’s created the content for a course (or 2) to learn HTML and CSS. There is a beginner’s guide and then an advanced one is scheduled too. This is great content or curriculum and would be a great boost to anyone interested on the subject. It is very thorough and teaches good practice with bad vs good examples throughout.

learn-html-css
A Practical Guide to HTML & CSS – Learn How to Build Websites
.

http://learn.shayhowe.com/html-css/
http://learn.shayhowe.com/advanced-html-css/

SVG Preloader with Raphael JS

Here's a very creative use of using a newly available technology. Using svg graphics which are very lightweight, for a website preloader. I like the animation used as well.

Embedded Link

Make a stylish preloader with SVG | Tutorial | .net magazine
Many sites neglect users with slow connections. Ian Culshaw explains how to use SVG library Raphaël to create a preloader that’ll hold the users' attention while pages load

Heavy Collision Prediction Math

I've wanted to solve this issue a couple times but usually ended up faking it once I realized how complex the math was going to be. Here is the proof, I'm pretty sure I never would have med it this far had I tried. It's a great resource and I found it understandable too. So, hopefully next time, I'll have the time to try it out!

Embedded Link

Predicting Collision Points With Math in AS3 | Activetuts+
In my previous tutorial about collision detection between a circle and a line, I covered projection on a line using the dot product of a vector. In this

Speaker at WordCamp Atlanta 2012

I’m proud to announce that I’ve been asked to speak at WordCamp Atlanta this year! WordCamp will be held this weekend and hosted at SCAD Atlanta! My session is titled: From PSD to WordPress Theme: Under the skin. Obviously, I’ll be focusing on themes. We’ll look at what they are, what they can do, how to make one and we’ll also go through the process of creating a theme in my presentation. I know that’s a lot, but I’ll do my best to get it all covered in my time. I’m really excited since this is my first speaking gig at a conference (and also a bit nervous). I’ll be sure to post my presentation slides here as well as submit them to the wordcamp site. I even hear they are attempting to record all sessions to post on wordpress.tv, so I may have a post with that too. Here’s the official session description:

We’ll cover how to get from photoshop to WordPress. There are many different roads to a theme. We’ll go over a few possibilities and then cover getting from a design in photoshop to an actual WordPress child theme while trying not to reinvent the wheel.

Are there any questions you want covered in the presentation? Ask quick and I’ll do my best to work them in!

UPDATE: Here are my slides for the presentation: WordCamp Presentation Slides: From Photoshop PSD to WordPress Theme!

Snow via Javascript & Canvas – Tis the Season

After playing with the settings in my experiments I found a few settings I liked and wanted to develop further. The first was snow! An added bonus I was able to work on a project just for the holidays and used much of this code in it! I looked around the web and saw a couple interesting examples of snow, but nothing that stood out to me. I used couple images and pulled them into the canvas in place of the dot (choosing one of 3 flake graphics), and learned how to apply a rotation to that graphic from somewhere online (I think stackoverflow, but now I can’t find it again to link it. The physics settings are hardcoded now and the update function doesn’t check the dot y position against the top of the page, since the snow should all be moving down with the gravity, it could be moved up with it’s floating, but I just wanted it to come down on it’s own. Then to get the rotation we need to save the context state, more to the flake center, rotate it and then move back to the canvas origin, draw the image and restore context. This process sounded complicated and took a bit to get things in the right order and the whole time I was scared it would be too processor intense for a good amount of snowflakes, it seems to do just fine! interactive physics animations via javascript & canvas | snow application example: check it out!

[cc lang=”javascript”]
$(function () {
var canvas, context, width, height, x, y, radius = 25, clickX, clickY, drag = false;
var total_dots = 150;
var fps = 24;

canvas = $(“#canvas”)[0];
context = canvas.getContext(“2d”);
var dots = new Array();
var drag_i = -1;
var gravity = .05;
var friction = .98;
var bounce = -.96;
var wrap = true;
var float = true;

var imgs = new Array();
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
img1.src = “snowflake_1.png”;
img2.src = “snowflake_2.png”;
img3.src = “snowflake_3.png”;
imgs[0] = img1;
imgs[1] = img2;
imgs[2] = img3;
var this_dot = {};
for (var i=0; i < total_dots; i++){ createDot(); } function createDot(x, y, r, vx, vy){ var this_dot = { x: typeof(x) != 'undefined' ? x : Math.random()*canvas.width, y: typeof(y) != 'undefined' ? y : Math.random()*-canvas.height, radius: typeof(r) != 'undefined' ? r : 25, scale: Math.floor(10 + (1+50-10)*Math.random()), vx: typeof(vx) != 'undefined' ? vx : Math.random()*3-1, vy: typeof(vy) != 'undefined' ? vy : Math.random()*3, //this will pick a digit 1, 2 or 3 and set it as the src value, this could also be a Math.floor(Math.random()*3)+1 to really be random src: (dots.length % 3) + 1, r: 0, vr: 0 }; dots.push(this_dot); } draw(); $("#canvas").mousedown(function (event) { createDot(event.pageX - this.offsetLeft-25, event.pageY - this.offsetTop-25); }); $("#canvas").mouseup(function (event) { drag = false; drag_i = -1; }); function update(){ for (var i=0; i < dots.length; i++){ if (drag_i != i){ var this_dot = dots[i]; if (float){ this_dot.vx += Math.random() - .5; this_dot.vy += Math.random() - .5; this_dot.vr += Math.random()*.01 - .005; } this_dot.vx *= friction; this_dot.vy = this_dot.vy * friction + gravity; this_dot.x += this_dot.vx; this_dot.y += this_dot.vy; this_dot.r += this_dot.vr; if (this_dot.x > canvas.width + this_dot.radius){
this_dot.x -= canvas.width + this_dot.radius*2;
this_dot.vr = 0;
}
else if(this_dot.x < 0 - this_dot.radius){ this_dot.x += canvas.width + this_dot.radius*2; this_dot.vr = 0; } if (this_dot.y > canvas.height + this_dot.radius){
this_dot.y -= canvas.height + this_dot.radius*2;
this_dot.vr = 0;
}

}
}
}
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
for (var i=0; i < dots.length; i++){ var src = img1; if (dots[i].src == 1){ } else if (dots[i].src == 2){ src = img2; } else { src = img3; } context.save(); context.translate(dots[i].x+dots[i].scale/2, dots[i].y+dots[i].scale/2); context.rotate(dots[i].r); context.translate(-dots[i].x-dots[i].scale/2, -dots[i].y-dots[i].scale/2); context.drawImage(src, dots[i].x, dots[i].y, dots[i].scale, dots[i].scale); context.restore(); } } setInterval(function() { update(); draw(); }, 1000/fps); }); [/cc]Follow the whole Interactive Physics Animations via Javascript & Canvas series.