Blog

Posted on

Getting Started with Rails

For anyone that’s new to Rails, there are a couple of tutorials out there that I’d highly recommend:

I’d say repeating the Rails Guide tutorial several times first is a good place to start, then moving to Michael Hartl’s tutorial and completing that a few times, which will give you a much better understanding of even more complex Rails concepts.

I’m a strong advocate for learning through repetition, especially if you’re new to programming or don’t have a background in computer science.

Posted on

Using MAMP to run WordPress Locally

I’m currently in the process of redesigning and reworking my art portfolio website.  The website was built on WordPress, and I started it years ago before I ever really knew how to develop and design websites. As a result, the website has become a bit of a beast with all of its pages. So, when it comes to updating the overall look and feel, I’m often resistant to making updates since it often becomes a big ordeal.

However, the other day I realized it made more sense to figure out how to run my WordPress site locally to work on those updates in a dev environment. Previously I’d just copy the entire instance of the WordPress website and work on it live, then move the entire site to replace the older one. This always become a bit of an ordeal.

But now I’m excited at the possibilities of working locally before pushing those changes to the live environment. Here’s how I set up my environment:

  • Download and install MAMP, which is software that installs a local server environment on your computer. MAMP gives you the ability to install Apache, PHP, and MySQL on your local machine. You can find out more about installing MAMP on the WordPress documentation website.
  • Once MAMP is installed, you can copy over your entire website to your local machine.
  • Open MAMP and specify the root of the folder for the site you want to run. Then start the servers.
  • Next update the wp-config-php file so that it specifies the local host as the host, as opposed to the domain name: define('DB_HOST', 'localhost');
  • Then access the MAMP welcome screen and open up the local phpMyAdmin.
    • Find the “create new database field” and enter in the name of the backup database from the live website that you are going to import.
  • When you access the site in the browser, you should be able to see the homepage although all the other pages are probably broken. This is because you need to update the siteurl and home configurations.
    • In phpMyAdmin, select the new database
    • Select the “wp_options” table
    • Search for “siteurl” within the “option_name” column
    • Edit the “siteurl” so it points to the localhost
    • Next, search for “home” within the “option_name” column
    • Edit the “home” item so it points to the localhost as well
  • Next, visit the homepage for the locally installed site and ta-da, it should work fine. You are also able to login with the wp-admin by using the usual admin credentials you use for the live website. Now you can edit themes, update plugins, and test out other features locally without worrying about breaking your live website.
Posted on

New Design for Portfolio Site

I finally got around to updating the look and feel of this portfolio website. Previously the site was bogged down with too many pages, and from a technical stand-point, I wasn’t taking advantage of customizing templates very well with php. Below is actually the way the homepage previously looked before the redesign:

Megan Coyle's previous web portfolio design

With this updated look, it was important that I focus on page load time, and also simplify the overall layout. The font sizes on the previous site were also fairly large. And lastly, the older site focused primarily on my web design work. I wanted to rework the entire site so that it could focus more on my development work.

Posted on

GRESB Website

Project Details:

gresb.com
GRESB was in need of a new marketing website redesign. I began the process by putting together a rough draft of a site by customizing a build of Drupal. After going through a series of edits, I also worked on adding in JavaScript functionality for carousels and collapse/expand panels. The new site was launched at the beginning of this month.

Programs Used:

  • Drupal (CMS)
  • JavaScript
  • Photoshop
  • Illustrator

GRESB Website

Posted on

William Coyle Portfolio Website

Project Details:

wtcoyle.com
I created the logo and manipulated William Coyle’s photographs for different sections of the website. After completing the website with Dreamweaver, I later reworked the entire site with WordPress so the client could make updates.

Programs & Technology Used:

  • jQuery
  • JavaScript
  • CSS & HTML
  • PHP
  • Photoshop
  • Illustrator
  • WordPress (CMS)

wtcoyle_1-website

wtcoyle_2-website

Posted on

USGBC STUDIO Website

Project Details:

studio.usgbc.org
This was a collaboration with one of the designers on my team. I worked on developing the user experience and framework. The other designer worked on fine-tuning and editing the overall look.  I also worked on customizing a WordPress theme so that our non-coder team members would be able to make updates to the website.

Programs & Technology Used:

  • jQuery
  • JavaScript
  • CSS & HTML
  • PHP
  • Photoshop
  • WordPress

Studio USGBC

Studio USGBC

Posted on

Center for Green Schools Website

Project Details:

centerforgreenschools.org
The Center for Green Schools website underwent an complete redesign. After the content was finalized, I worked on creating the overall new design and layout for the website. I created icons for navigation and to break up text-heavy pages. I manipulated photos and compiled the new site CSS.

Programs Used:

  • Photoshop
  • Illustrator
  • Drupal (CMS)

Center for Green Schools Website

Posted on

Marketo Landing Pages

Project Details:

USGBC uses Marketo to collect user submitted information for targeted marketing. Although Marketo makes digital marketing easier, the platform isn’t mobile-friendly. The drag-and-drop designer makes it easier for non-coders to create landing pages, however it makes it difficult to create responsive and easily adjusted pages.

I worked on editing the CSS and found a workaround for targeting the long and obscure classes that Marketo’s designer automatically generates. I then created templates that our creative team could use to make responsive and mobile-friendly landing pages.

Programs Used:

  • Marketo

Marketo Landing Page

Marketo Landing Page

marketo-landing-page-1-mobile

Marketo Landing Page

Posted on

Megan Coyle: Collage Artist Portfolio

Project Details:

mcoyle.com
I created this website for my studio collage work. I designed the logo myself and took pictures of the artwork. Aside from designing the site, I have managed and maintained it since 2007.

Programs & Technology Used:

  • jQuery
  • JavaScript
  • CSS & HTML
  • PHP
  • Photoshop
  • Illustrator
  • InDesign
  • WordPress (CMS)

Megan Coyle Collage Artist Website

Posted on

JavaScript: What’s the point of looping?

In JavaScript, looping is a handy way to do something repeatedly. For example, if you wanted to print out a list of results in a consistent way, or add styles to objects that fit certain parameters.

Here are a few of the ways to do looping:

for statement

A for statement is usually used when you need to increment a value within an expression.

for (var i = 0; i > 10; i++) {
console.log(i);
}

do…while statement

A do…while statement repeats until a specific condition evaluates to false.

var i = 10;
do {
i++;
console.log(i);
} while (i < 40);

while statement

A while statement executes as long as a specified condition evaluates to true.

var i = 2;
while (i < 5) {
i++;
console.log(i);
}

break statement

The break statement is used to terminate a loop.

for (var i = 0; i < a.length; i++) {
if (a[i] == 5) {
break;
}
}

Note: This post is written in conjunction with the coding cheat sheets I’m developing.