Category Archives: Web Development

New Year – Same Old Stuff

New year always gets you thinking about what you did in the previous and what you hope to achieve in the next.  To recap my side-project life in 2016:

  • Merged two of three Parse apps over to Firebase and to keep them running
  • Didn’t merge the other, will unpublish from Google Play until I get around to it
  • Spent a healthy amount of time writing a Daily Fantasy Sports (DFS) lineup generating program (I haven’t written about this, but TLDR; it didn’t win me millions)
  • Learned how to throw together a quick and dirty Chrome Extension and then take the first step towards robustification by adding a Flask/Postgres back-end and deploying to Heroku

Doesn’t look too bad from afar, but really I’m still not producing programs which can reach an audience.  I kept two lightly used Android apps alive, ignoring a third.  I nearly reached minimum viable product territory with a Chrome Extension, but stopped short.

The bigger thing I’ve come to realize is that by switching around and/or dropping things, I’m often stopping short of the point of learning enough to be useful in whatever language/framework/whatever I’m attempting to learn.  When I drop something and pick it up a couple of months later, I have to re-learn most of it just to get rolling again because I didn’t get deep enough the first time to have the lessons sink in.  That’s a problem.  I’m not producing anything and I’m not retaining a workable knowledge of anything I’m learning.

With that being said, what’s the goal for 2017?

  1. Finish that Chrome Extension
  2. Port that 3rd app
  3. ????

The Chrome Extension is something I’ll hopefully write about in the future, but it’s a minor utility that took a night to write with zero Chrome Extension knowledge.  The hard/fun/educational part is adding everything around that to make it a usable product.  I took the first steps by switching to Flask with a Postgres DB to store the data received from the extension (I originally just threw up an sqlite DB running with Bottle).  The next steps are users and views to access the data we’re now storing, breaking down and paying Heroku to host the thing, releasing it to the Chrome Store and trying to get people to use it (I have a partner to handle the latter of those).

I actually picked up the extension project tonight which inspired me to write here.  I fixed a lingering bug and did the preliminary research on how to add users so I could authenticate and allow view access to the data.  Just picking it up after a long layoff was a big step, I tend to drop things like that and move onto the next shiny idea that comes along.  I’m planning on pushing on this with a dedicated one night per week schedule.  Hopefully I will be returning soon to do a full entry about this.

As for the third Parse app. It’s not being used so it’d be easy to ignore it, but I like the idea of having working apps in Google Play, so I do hope to do the conversion.  It is a bit more tricky than the two apps I did convert because it is the only one with users and the requirement of storing user data.  I don’t imagine this will be difficult, I just haven’t done it.  I want to finish for completion’s sake.

Beyond that, I really just want to keep learning.  I would prefer to start getting deep into something(s) rather than continue to be jumping around.  Maybe I can find another project to work on using Flask.  I want to get to the point where when I sit down to start a new web project I don’t have to re-learn everything.  Over the years I’ve switching between Django, Rails, Bottle, and Flask (I think that’s all, I’m probably forgetting some).  It’s nice to have a familiarity with a wide range of frameworks, but for the sake of getting things done, I clearly need to narrow the focus.

I guess one concrete goal would be to post here more often.  If I’m doing that then that means I have been doing work, so that’s a win.

New Coat of Paint

It’s been a while since I’ve looked at this site. I’ve been busy with life-y and work-y stuff so my side project activities have slowed down.

Updating previous entries, I build the sticks for a Django hosted site but the idea behind it never got off the ground so the sticks remain dormant. It was a good learning experience, I learned the basics behind a very powerful framework in Django and a lot about actually deploying something more complex than HTML or a WordPress site.

I have also spent some time putting together another Android app, I’ll write more about that later. The content generation needs to get finished but we are close to launch. Nothing groundbreaking but it is always fun to throw a new app out to the world.

Finally, I decided to throw some new style to this beat up looking site. I designed this a couple of years ago with a barely functioning knowledge of HTML and CSS. A couple of years later I am back with a barely functioning knowledge of HTML and CSS. The goal is to create a halfway decent looking page, cleaner layouts, breaks, headers and footers. I threw together the original site about an hour and it really wasn’t a good impression to leave should anyone happen to stumble across it. I’m mid-updating as I type this, if I end up doing anything fancy maybe I’ll come back and write about it.

The Plan…inaction?

Just a quick update to my previous post. Basically, three and a half months later, I have made it through half of my plan. There is a laundry list of legitimate and b.s. personal reasons why it took so long, but they don’t matter now.

As of last night I have successfully deployed a Django-based website onto my webserver. It is currently too ugly to even share a link to, but the sense of accomplishment is great nonetheless.

The big frightening part of web development that I never understood before diving in was how difficult it is to actually deploy something beyond HTML/CSS/JS. Want to learn Rails? Read some tutorials, you’ll be running locally in no time, developing your first projects and seeing the results in real-time, it’s a great thing. Want to take that project and deploy it onto the webserver you are already paying for? Well, are you sure you don’t just want to use Heroku? Are you really sure? There are dozens of tutorials out there for that? No, you don’t want to pay another hosting site? Okay then, good luck.

That was my experience, with Django, but I briefly dabbled in Rails tutorials and found it to be a similar issue. I use Dreamhost and there are a few scattered tutorials on how to deploy a Django project onto Dreamhost, but none of them were complete or exactly matched my needs. It is one of those things you can look back on with fondness: you spent three nights trying to deploy, which sucked, but now you are much more familiar with Django and your own webserver. A necessary evil, I suppose.

Perhaps I’ll get around to creating a tutorial with my Django on Dreamhost experience, but I’ll save that for another day.

Up next: Cleaning up my project so it’s presentable to the outside world.

The Plan

My most recent surge into web development was inspired by a post over on LifeHacker: How I Taught Myself to Code in Eight Weeks

Just to avoid confusion, I can code, I have been coding as a career for six years now. My issue is that I only know the absolute basics about web development. I knew so little about web development that this was actually quite informative to me. I have been poking and prodding at different portions of web development for a couple of years now. I ran into some HTML/CSS/JS at work for a few weeks, I created version 0.1 of this website about a year ago at the time of this writing, I did some Rails tutorials, I created an Android app that ran off of Parse, etc…

There isn’t anything particularly interesting about the article. It is a hit-list of tutorials and actually includes a prologue that basically says “learn enough to get to the point where you can hire a professional to code a good web experience.” But the takeaways I had from it were 1) to come up with a concrete plan to learn a skill and 2) Django looks pretty useful.

I’m in the throws of 1) now, I walked through some Python tutorials to sharpen my basic working knowledge of the language and I started learning Django. The second half of my plan is to spend some time learning Javascript. Another language I have a working knowledge of the basics but would be hard pressed to put together something unique and useful in short order. So that’s my plan, learn more of the stack by diving into Django (learning more Python along the way is an added bonus) and then learn to make it look pretty by diving deeper into Javascript (and eventually JQuery).

It is a plan with somewhat defined steps:

  • Step through Python tutorials
  • Learn Django through tutorials and Django By Example
  • Present Django-served data into a basic HTML/CSS driven website
  • Research and complete Javascript tutorial(s)
  • Liven up website with Javascript
  • Research and complete JQuery tutorial(s)

None of these steps individually seem difficult. Each one results in me either learning a new skill or applying the results of a recently learned skill. Seems downright logical to me.

I also wanted to put a non-arbitrary timeline on this project. I assumed I would get through the Python tutorials relatively quickly since I knew a fair amount about it going in, so that got chalked up as a few days. Django was a complete unknown going in so I allocated two weeks for tutorials and then the Examples reference. I had a feeling Javascript would be the big one. I had exposure to it which only served to convince me that it would take a substantial effort to learn. I gave it a full month. JQuery being a JS library I figured it would come a little easier, how about two weeks?

Add it all up and my somewhat non-arbitrary timeline for the launch of a halfway decent Django-serving website was about two months.

This is well and good, but will I stick with it? Going back over my previous good-intention/half-finished forays into various types of development, I found the common thread among the failures/incomplete tasks was that I didn’t have a well defined end product that I was motivated enough to see through to the finish line.

I started learning Android apps because I thought that would be fun. I started writing a few different golf-related apps since I like golf. None of them were terribly interesting or at all unique so I learned the skill I wanted to learn (whether it be basic Android dev. or JSON calls or geolocation options or whatever) and stopped developing the app. Basically, I got the point where it was functional but I gave up when it was time to make it publishable. That means ironing out functionality, optimizing and making it look presentable. The one Android app I have published at this point was a completely unique app for a very small, specific audience. I saw it through, learned a lot and produced a reasonable looking product at the end of the day. Perfect? Far from it, but I relative proud of it as “My First App.” There are dozens of tweaks I want to make but I don’t have motivation given the 10 person audience.

So, I know my blocking points, do I have a plan to hurdle that for this Great Plan? Not really. I sit here having gone through most of the django tutorials and probably a couple of good days away from planning and attacking my first unique django web app. But I don’t know what the app will be. I have a few ideas but I have to better understand what, exactly, django provides and fit my idea into that framework.

If you’ve made it this far, thanks. I think the point to all of this is that if you want to get something done, identify concrete steps you can work on to achieve the goal. Also recognize what has held you back in the past and be prepared to push through that stage this time to see something through to completion.

Adding WordPress Into Existing Webpage

I wanted to slap a WordPress blog into my existing website.  I wanted it to get the full WordPress functionality and still have the same styles as the other pages on the site and use the same headers and footers.  Basically, I wanted it to look like you were still on the same website whether you clicked on “Blog” or “Projects” or “Home.”

Below is how I came to the solution I am using.  They are labeled loosely as “steps” but they are not exactly concrete “Do A then B then C then D then you’re done” steps and more of a recording of what I went through to solve the problem.  I will provide concrete actions within the steps if that is what you are after, but you might have to dig a little.

Step 1: Learning What Question To Ask

As is almost always the case, the first important hurdle to solving a problem is knowing what problem you want to solve.

I thought I wanted to “embed a WordPress blog into an existing website” so that’s what I typed into Google.  That led to a very official looking post on WordPress’s site telling me that with two short code snippets I would be displaying WordPress entries into my webpage in no time at all!  Until I tried it, it failed miserably and I re-read the post.  It was instructions for embedding WordPress into an existing PHP page.  Do people really hand-gen PHP pages all that often?  Maybe they do, I’m not web developer so I don’t know, but I didn’t/don’t/won’t.

So, what did I actually want to do?  I came up with “embed a WordPress blog into an existing HTML page.”  HTML being the important distinction here.  It turns out that this wasn’t exactly the right question to ask either, but it did get me pointed in the right direction.

Step 2: WordPress and the Actual Task at Hand

Backing up a bit, you have to install WordPress to use WordPress.  So do that.  I use DreamHost and they have an easy install for WordPress, it takes a few minutes total, most of that time is waiting for your database to come online.  I imagine most other web servers have the same option, if not a full WordPress install isn’t too difficult.  Come back when you have this done.

I installed mine at www.christopherrmack.com/blog. If I loaded that exact URL I would see the default WordPress layout with the “Hello World” post.  I didn’t want that, I wanted www.christopherrmack.com/blog.html to have it’s content be WordPress blog postings but otherwise look like it the rest of my site.

It turns out, the way to do this (at least the way I found to do this) isn’t to adjust your existing HTML to reference WordPress posts, but rather to adjust WordPress to look like the rest of your site.  It seems like a mostly semantic difference, but it does fundamentally change the way you approach this task.

Step 3: WordPress Themes

WordPress separates the core WordPress-y stuff and the visual look into separate entities.  Most users won’t care about this distinction, but if you are diving into WordPress to try to change the way it looks at the HTML level, you will find this was an excellent choice by WordPress as you can tinker away with HTML, CSS, and JS while (mostly) ignoring the actual content of a WordPress blog.

WordPress uses themes to define the look portion of things.  Depending on whether or not you click a checkbox during installation, your WordPress blog might come with a dozen themes pre-installed.  Hundreds or thousands more are available with a few clicks.  Themes define everything about how a WordPress blog looks.

You can probably see where I’m going with this…wouldn’t it be great if there was a WordPress theme which looked exactly like the rest of your website so your WordPress blog fit in seamlessly?!?

Step A:  Reference Aside

I want to point out that I used Embedding WordPress into an existing website post to guide me through the process.  I got tripped up a little near the end but I eventually worked through it.  All following steps are my interpretation of that post, it is a very detailed post and you might want to try it out before reading the rest here.  If you run into issues maybe come back here to see if they were the same I was having.

Step 4:  My Very Own WordPress Theme!

So WordPress has themes which define everything about how the page looks.  And, unfortunately, nobody has made a theme which exactly matches the layout of the rest of my site, bummer.  The natural solution is to make your very own WordPress theme.

This is much less involved than it sounds because we are going to cheat.  FTP into your website, find the “themes” folder under your WordPress installation and pick one(from your WP install directory it is: ./wp-content/themes/).  It isn’t completely arbitrary which you choose because I won’t explain how to change every single look-and-feel value in this theme.  I wanted to keep my white background without having to think about it so I went with the default (“twentytwelve” when I did this) which is at least in the same vein as my website, making the process of adapting it to fit in a little smoother.  If I had chosen a dark theme with colorful background images I would have had more work to do to hack it down to my minimal website look.

Okay, you’ve chosen a base theme to start from.  Copy the contents of this theme into a new folder in the themes directory.  Say you put them into “mywebtheme.”  You need to now go into “mywebtheme” and change the theme to have a unique name so you can use the WordPress control panel to start using your new theme.

To change the name open the file:
./themes/mywebtheme/style.css

At the top of this file will be some commented header information, change the Name to whatever you want it to be called and also add your own description.

Now your theme has its own name so you can tell WordPress to use this new theme by going into the WordPress control panel of your blog.

In WordPress control panel to to Appearance–>Themes.  You may have a long list of themes or a short list, depending on if you installed a bunch of defaults during installation.  Either way, find your new theme and make it the active theme for your blog.

Now go reload your blog.  It looks….exactly the same!  (If you copied the theme your blog was already using, if not it will at least look exactly the same as whichever theme you copied)  This might be true, but the important thing here is that it is your very own copy of another theme, progress!

Step 5:  Enough Already, Make It Look Like Mine

Alright, so what have we done so far.  We have installed WordPress onto your website, copied an existing theme and are now using that “new” theme.  Installing WordPress is obvious, but why did we copy a theme?  Because we now get to use that copy as a sandbox to try to make our WordPress page look like the rest of our website.  Fun!

Head into the bowels of WordPress themes by navigating in your website FTP to (from your WP install direction): ./wp-content/themes/mywebtheme/

For the most basic purposes you will only care about two files:  header.php and footer.php.

header.php defines the nice banner at the top of the page, with the title/subtitle, maybe an image and whatever else the theme has.
footer.php defines the footer, if any exists, for the theme.

I’m interested in these two pages because my website has a basic header (the page title on the left-ish side and then my Twitter link in the top right) and a basic footer (the intra-site links on the bottom).

I want to make the WordPress header and footer look like the header and footer on the rest of my site.

First, open header.php.  Import your CSS files so that when you add your HTML it knows where to look to define the style.  You can do this anywhere in between the <head> open and close tags in header.php.  I added him below an existing <link> tag.

Import your CSS by adding the line:

<link rel="stylesheet" type="text/css" href="../../../../../PATH/TO/YOUR/CSS/FILE.css" />

My exact entry, for example, is:

<link rel="stylesheet" type="text/css" href="../../../../../cnfg/css/main.css" />

You can add multiple CSS files (I had three I needed to add) and also reference any Javascript, images, icons, etc…you may need for your customization.  At the time of writing the only references I had were my CSS files.

Step B: Another Aside

Now is when I encourage you to experiment.  You now are deep in the throws of your WordPress header file with complete access to the CSS which defines all of the pages on your website.  Start adding some of your HTML from that old blog.html page and see what happens.  How does it interact with the existing HTML in header.php?  Which parts of the existing header do I need to keep around?  Being new to HTML/CSS when I was going through this, this is the stuff that interested me.  If experimenting is not your thing, I’ll cut to the chase now.

Step 6: The Chase

Start looking at the HTML inside of header.php, specifically what happens after the </head> tag. Ignoring the content for a second, it appears as though some of the tags don’t actually get closed in this file.  Where is </body&gt; and the </div> for the id=”page” tag?  It turns out, the way WordPress uses this file is actually to combine it with footer.php to create the page.  So if you open footer.php you see the </body> and the </div> <!-- #page --> lines.  Sneaky WordPress.

You don’t need any of the HTML inside of the <body> tag in header.php except for the <div id="main" class="wrapper"> tag. This tag, and the corresponding closing of it in the footer.php file, help define where the blog content/menus go so they must be left in so that your newly added HTML shows up properly.

So I removed everything else in the <body> section of header.php and copied in my old blog.html header information.  Since header.php is already loading in my CSS files, I don’t need to do anything else.  I reload www.christopherrmack.com/blog and I see a header that is consistent with the rest of my website followed by the “Hello World” default blog entry.

The footer is a bit different because it doesn’t have all of the <head> information header.php does, it has some comments and then jumps right in to closing some of the tags from header.php.  I emptied out everything between the </div> for #main.wrapper and the <?php wp_footer();?> line.  This removes any footer that might have existed.  I copied my few lines of HTML in that place and  my WordPress theme now contained both my header and footer to match the rest of my site:  victory!

My complete header and footer PHP files when I was finished:

header.php

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="stylesheet" type="text/css" href="../../../../../cnfg/css/main.css" />
<link rel="stylesheet" type="text/css" href="../../../../../cnfg/css/blog.css" />
<link rel="stylesheet" type="text/css" href="../../../../../cnfg/css/grid.css" />
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
<link rel="icon" type="image/png" href="../../../../../images/favicon.png">
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
 <div id="intro">
 <ul id="corner">
 <li><a href="https://twitter.com/#!/chrisrmack">Follow Me!</a></li>
 </ul>
 <div class="row">
 <div id="title">Blog</div>
 </div>
 </div>
 <div id="main" class="wrapper">

footer.php

<?php
/**
 * The template for displaying the footer.
 *
 * Contains footer content and the closing of the
 * #main and #page div elements.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?>
 </div><!-- #main .wrapper -->
 <div id="footer">
 <div class="row">
 <ul id="links">
 <li><a href="http://www.christopherrmack.com">Home</a></li>
 <li><a href="http://www.christopherrmack.com/blog.html">Blog</a></li>
 <li><a href="http://www.christopherrmack.com/projects.html">Projects</a></li>
 <li><a href="http://www.christopherrmack.com/skills.html">Skills</a></li>
 </ul>
 <div id="text">Christopher R. Mack</div>
 </div>
</div>
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>

And the look they produced:
blog_wp_theme_after<

Step 7:  There Is No Step 7

You’re done.  You have created your own custom WordPress theme by copying a reasonable starting point and manually editing the HTML so it fits in with the rest of your website.  In the end you didn’t embed WordPress posts into your existing page, you took the styles of your existing site and embedded them into a WordPress blog

If you want to go more in-depth or have a more complicated site theme, this becomes a bigger project.  But I think at this point it is all down to HTML, CSS, and JS, and if you’ve coded up a slick looking website you are probably very capable of doing the same within the WordPress files.

This was a pretty straightforward issue for my case.  My two main hurdles were knowing what, exactly, I wanted to do (or more precisely, knowing what was possible) and then knowing what HTML to chop out of the existing *.php files to get me where I wanted to be.  It isn’t very exciting that most of my learning here was related to WordPress and its themes, but at least I know.  I doubt I will want to get much more in depth on WordPress php files in the future, but I’m sure I will come back and revisit those header and footers as my site design changes.