Archive - Web Development RSS Feed

Scrum Team Git Workflow

Update my local master
git pull origin master

Create a branch for the story and check it out
git checkout -b storyName

(work, work, commit, commit)

Switch to the master branch
git checkout master

Pull again to fetch and merge any changes
git pull origin master

Merge master into my branch
git checkout storyName
git merge master

Check everything one last time and fix any conflicts

Merge branch into master
git checkout master
git merge storyName

Push the changes upstream
git push origin master

Delete the branch from remote
git push origin --delete storyName

Delete the branch locally using -D instead of -d because it forces a delete
git branch -D storyName

Webhooks, Formstack & Fellowship One

Web Dev = Creative Work


Fellowship One API Guest Entry

Website Redesign: Christ Followers For Change

I love being asked to help improve a church or ministry’s web presence.   It’s what I’m passionate about!  I am currently involved in a number of redesign projects and wanted to share my progress with one in particular – the Christ Followers for Change site. Christ Followers for Change is an organization based in Kalamazoo, Michigan made up of more than twenty local churches and organizations. Each year, these churches set aside the third Sunday in November to take up a special offering for the purpose of meeting two external needs. One global and one local. Last year they raised over $200,000!  Around 70% was given to various projects in Africa, and around 30% was used to purchase beds for people in need within Kalamazoo.  The stories of impact that these funds have had both at home and abroad are incredible and will be featured in a video shortly.

I was asked by the board to take over and redesign their website.  Whenever I design or redesign a new website, I break up the process into numerous steps involving a team of specialized individuals.  I will be publishing another blog post about the process I have developed for designing and redesigning web sites shortly.

Here is a snap shot of what the current  Christ Followers for Change homepage looks like:

Christ Followers For Change site

Current snapshot of the Christ Followers For Change Website

And here are a couple of snapshots of what the site will look like when I’m finished:

Redesigned Homepage for Christ Followers For Change

Redesigned Inner Page for Christ Followers For Change

Credit goes to Design Guru Ryan who I “met” through the Godbit Project for the awesome graphic artistry of these design compositions.

I am really excited to convert these compositions into full fledged websites and to measure the difference in traffic once the new website is live.  Stay tuned for news of it’s launch and the new 2011 goals in the coming weeks.

Go ahead and leave a comment to let me know what you think of the new designs!

29 Ways to Stay Creative

This is a very creative little video showing 29 simple ways to keep creativity in your life!  It is relevant to any profession but I found it to be a particularly good reminder for those of us in the web design / development world:


Process for Redesigning a Website

1) Study the current site.  List it’s strengths and it’s weaknesses.  Pay particular attention to the navigation and flow of information – the User Experience.

2) Research other websites of other similar organizations.

3) Organize research and create a project outline

4) Contact a Graphic Artist to produce a homepage and inner page creative layout based on the project outline.

5) Evaluate creative layouts and send feedback for revisions if necessary.

6) Create the basic site structure.  I have a template I’ve developed that consists of folders called: CSS, Assets, Scripts, Images, Includes, Fonts, and Files.  I have base level CSS files that include Reset styles and the 960 grid system CSS.  I also usually include jQuery in my scripts file and then attach the CSS and scripts into a base level HTML file.  This saves me time as these are the items I include in most of my projects.

7) Hand draw (I’m sure there’s a better way to do this, I still use good old paper and pencil) a sketch of the composition with the divs and classes I plan to define.

8) Get to work breaking up the composition and constructing all the CSS and HTML.

9) Implement any scripts necessary

10) Test (usually involves numerous other people) and then launch.

There are plenty of other things I do during this process that are too many to document but this is a general idea.

Creating a Jewish Themed Blog Step by Step

A local pastor asked me to create a blog for him to use while on his 5 week trip to Israel. He wanted to share his location specific insights with his congregation while he was gone and provide a way to post photos etc. I loved the idea of this and so got to work. I was quite pleased with the end result so wanted to share the steps I took for the purpose of helping any other church webmaster out there who may be asked to do something similar!

First of all I had to select a blogging platform. The obvious choice for this project was WordPress. It has a great community, endless plugins, beautiful themes and I’ve worked with it numerous times before – decision made!  After following their famous 5-minute install, the blog looked like this:

Wordpress Default Theme

Not a bad look right out of the box, but definitely didn’t have the Jewish flair I was imaging!  The next step was to select a better base theme from which to build on. This too was an easy choice – I selected the Standard Theme by 8bit. My own blog is built on it, I customized the blog on this site: based on it and I absolutely love how well organized the code is and the graphical user interface is really nice too! It provided me with a clean and nicely laid out blog template from which to build on.

After uploading the “best coded wordpress theme ever” into my themes directory, the blog now looked like this:

Fresh Install Example of the Standard Theme

Continue Reading…

Using jQuery to Color Table Rows

One of the reasons I love technology is that it is designed to make life easier!  As the webmaster at Lake Center Bible Church, one of the things I do every week is upload the sermon to our website and to iTunes.  On our sermons page, we have a simple table that contains the sermon that is preached each week – pretty typical for any church.  I have the table set up to have alternating colors for the rows to make the content easier to see.  It looks like this:


Each row has a CSS class with the background color set as gray or blue.  Every week, when I upload the new sermon, I have to select the table row and then select the appropriate class.  Not a big deal, but it’s a few clicks / keystrokes.

Since I am learning javascript and jQuery, I decided to let it do the work for me instead!  By adding these lines of code I wrote, jQuery automatically colors the table for me:

$("tr:odd").css("background-color", "#E5E5E5");
$("tr:even:gt(0)").css("background-color", "#c7d4e5");

All this is doing is taking every odd row and giving it the background color of gray (#E5E5E5).  It is then taking every even row that is greater than (gt) the index of 0 – everything past the first row, and coloring the background blue (#C7D4E5″).

Now, my table looks like this in Dreamweaver with all the classes stripped out:


And jQuery is coloring it in for me!  A VERY simple fix but anything that saves me time on something I do repeatedly is worth the effort.  Hope this helps someone!

The Open Source Church

open source logos

What if the Church Modeled the Tech World?

I’ve been working in the web field for three or four years now.  Most of what I know is self-taught through books, a class or two, but mainly from the web community at large – forums, blogs, tutorials, Twitter, etc etc.  As I was contemplating my education track and the rapidly developing world of technology, I started thinking about the mind-blowing speed at which technology is sweeping the planet!  It seems as though it is an unstoppable force which can be used for great good or great evil.

Continue Reading…

Page 1 of 212»