My Site/Blog
Untitled Document

Firebug and Web Development

In the midst of all these posts on how I went through redesigning each site I feel the need to highlight one of the tools I used, which proved to be paramount. Firebug can be used to view all the scripts, stylesheets, and html of a site. While googling around for something or other on the internet, I remember seeing a post about how Firebug was a developers best friend and at the time I wasn’t quite sure why. I now know, and I hope to provide a few quick examples to show a few ways in which it can be used to help you develop your site.

Firebug and WordPress

As I’ve mentioned in previous posts, this blog is built on WordPress. But the WordPress theme it was built on is one I designed and built page by page from the ground up. While there is much to be said about the process of building your own theme that is not what I want to discuss in this post. I want to talk about what happens when you have your fully functioning, completed theme.

For those of you who are unfamiliar with WordPress, it’s basically a blogging platform run on php with lots of built-in functions and structures which you can use. I knew none of them. In fact, I barely knew php. There were a lot of sites that explained how you could go about building your own theme, but they didn’t really offer detailed information on how to really style your theme once you got it working. The problem is that when you used the functions or  structures WordPress gives you, the results are somehow returned to you in html/css to be displayed but you don’t know the ids or classes of each element that WordPress is generating for you. It saves you a lot of coding however, it also means you have to work your way through WordPress and really integrate it into your site. I’ll give you an example the following is an excerpt of code from the sidebar on the blog:

Screen Shot 2013-05-26 at 10.19.36 PMAs you can see, all of the categories are generated through WordPress and are inserted into the html in that one line of code. Now it isn’t immediately obvious how the categories are returned. Is WordPress adding them within paragraphs or headers or list items? Are they getting their own specific ids or classes? I’m sure some googling or browsing on the WP codex could provide you with an answer, but there’s also another way. The following is the actual html code from the sidebar, all of which was generated by WP:

Screen Shot 2013-05-26 at 10.26.59 PM

 

As you can see each category is inserted as a list item with a class of “cat-item” containing a link, title, and the actual text that gets displayed. All I had to do was run firebug on my website and inspect the sidebar element. Now all I need to do is go into my css file and create a class called cat-item and style it however I want. It’s that simple. I used this approach to style almost all of the generated elements on the blog.

Firebug for learning

I should have probably started by explaining what Firebug does- it reveals the source code and resources of whatever internet page you’re looking at and displays which coding elements correspond to which visual elements on the site. Thus making it an extremely useful tool for picking apart another website or element that you may want to adopt into your own. I actually have a great example as I did this for the photography page on my website. I wasn’t quite sure what I wanted my page to look like and didn’t want to settle with the plain old slider from v2 and a link to flickr, so I googled “top personal photography websites” and found links to a bunch of amazing-looking photography sites and started browsing for a feature I would want. I eventually found an effect that I thought would work well but I had no idea what it was called or how I could recreate it. I popped open firebug and quickly browsed through:

Screen Shot 2013-05-26 at 10.44.21 PMThe line that is currently highlighted is the line that corresponds to the element containing all of the images, which if you can’t see, has the class “masonry.” Now this wasn’t much to go off but another google search turns up results for jQuery Masonry which happened to be the exact plugin I was looking for. Now this is probably one of the far more obtuse and unusual methods of finding design elements but hopefully demonstrates exactly how multi-purpose firebug can be. I use it more regularly to find the names of fonts or hex color codes that I like.

Firebug for debugging

The last thing I want to mention about Firebug is how it can be used to debug and save you countless hours and broken keyboards. Say the formatting of your page doesn’t look how it’s supposed to look. Maybe you want three elements (let’s say buttons) floating on the left side of your page, all stacked on top of one another. Maybe you’ve done this before and have some idea of how your css should look, or maybe you’re following someone else’s example but for some reason can get your version to work. This is where Firebug comes in- all you have to do is inspect whatever element(s) you’re having trouble with and Firebug will conveniently list all of the style rules applied to that specific element.

Screen Shot 2013-05-26 at 11.06.26 PMThis is a screenshot of Firebug showing the css rules applied to the unordered list containing all of the categories. It shows the sidebar ul class from my stylesheet and will also display any other styles linked to a specific item, making it easy to see if something is applied where it shouldn’t be.

These are just a few quick examples of the many way this plugin comes in handy. I’d definitely recommend installing it if you haven’t already.

 

 

The Current Site – Design

After the completion of the second site last summer, change was a long time in the coming. Between the development of each site I had never really tried to progress it. The second site had some sad attempts at blogging, which became too much of a hassle to update in raw html. I didn’t really have enough time to think about redesign until this summer (being unemployed), so I did. I knew some of the elements I wanted the site to have just from what I had remembered while building the second one.

Having some sort of content management was a must as I really wanted an excuse to document the projects I was working on and be able to easily share them. I wasn’t too familiar with the term “content management,” and at one point thought it might be easy to design my own. But in the end I settled with WordPress, which is now the basis for the blog you are currently reading and a topic which I will spend a lot of time covering in the coming posts. But more on that later.

The second important feature I wanted to have was a more fluid-based layout. Working with fixed layouts was much easier in hindsight however, the switch to fluid was one I had been wanting to make for a while. If anything for a learning experience, not necessarily because I think they’re better. Having built the previous site on a fixed layout, I had some trouble trying to rebuild with a fluid mindset. In the end, I think the fluidity as a nice touch to some of the pages (although it’s far from perfect) and is something I’ll definitely consider repeating down the line.

Lastly, I wanted this to be a great learning experience. I told myself I had about a week to screw around in before I really settle down in the job hunt and wanted to make the most of my time. I definitely challenged myself with quite a few of the aspects of this site and, while it was basically completed within five days, I literally did nothing else. For the past week my life has been wake up, code, eat, code, eat, code, and sleep when tired. Mornings became even more subjective than on college weekends. I was hooked. I loved seeing the site come together piece by piece, and getting each and every detail dialed mattered to me. This was the site where I didn’t cut corners or settle for less.

Those three key points drove the development of this site. I started with some basic knowledge of html/css and three things I wanted to accomplish and set out to do just that. Interestingly enough, I also had to design a site in my intro to web design class. The site was on how we can make the world a better place and required a minimum of three pages, some flowchart thing, and a timetable for design. All I wanted to do was start coding, and I did.

V2 Contact Page, Image Sliders, and Plugins

I’ll start by talking about the specific image sliders I used for v2. The first, as I mentioned in the previous post, is the eislideshow jQuery plugin which is featured on the homepage and photography page. You don’t need to know anything about jQuery or javascript or anything fancy to use the plugin. All you do is add the eislider css files to your css folder (and obviously include them on your page), and then copy a little javascript provided in an example. The following is code from the photography page:

Screen Shot 2013-05-25 at 5.31.10 PM

As you can see, there really isn’t much to it. the slideshow_interval is fairly obvious, autoplay is on, and the transition animation is centered. I didn’t need to write any of the code, I didn’t need to know how it worked, I just copy/pasted it into my website and integrated a great looking slider. The following is the html format for the slider:

Screen Shot 2013-05-25 at 5.34.44 PM

The height/width of the image can be changed in the css files of the slider to the height and width of your image. All the ids and classes are what the plugin uses by default and can be changed if desired (make sure to change your css to match). Each slide is then held in a list item containing the image source, with an option for thumbnails in the other empty list. I prefer the slider without thumbs so I leave it empty. That’s how you integrate an eislideshow into your webpage! It’s really that easy. You could just go ahead and copy all of the code I have shown here, link to images that are 1280 pixels by 640 and you’d be done.

The other slideshow on the projects page is called the s3slider and is also a jQuery slider. If you follow that link to their website the have examples right there telling and showing you how easy it is to use. I won’t bother to go into the same detail as the eislider, but if you get stuck try looking at some other examples and see if you can work it out on your own.

This is probably a good time for me to mention the firebug plugin for firefox/chrome, which allows you to examine the html and css of a webpage. Once it’s installed all you have to do is right click and select “inspect element” to view a page’s source code. You can then break down the formatting and styling of a page to see how someone accomplished a certain look or feature that you may want to put in your own site. This is also a great way to learn if you can’t find good examples using google. Firebug is also a great tool for debugging your site if things aren’t displaying as they should. Its use played a critical role in the development of the current site and I highly recommend it.

The Contact Page

This page was created more as a gimmick than being useful. I was on youtube and stumbled across a video on how to create your own php contact form with validation, and I thought it would make a nifty addition to my site. Truthfully I was never a fan as I couldn’t style it the way I wanted to (again, another reason to learn the basics and not just copy code) and it wasn’t terribly useful. Here is a picture of what it sort of looked like (it’s not currently online so I can’t get a picture of the actual page)

contact form

It consisted of three basic fields: name, email, and message. Each was validated meaning you had to put something in for name, the email address had to have a valid format, at the message itself couldn’t be blank. If a user filled out all of the fields and clicked the submit button, the server would forward the message to a provided email address. It is much easier to have a contact link with the href=”mailto:someemail@something.com”, which will open up a new window with the recipient address already filled in. I opted for this when designing the current site so feel free to check it out now.

The purpose of this post is to hopefully show you how easy it can be to integrate a plugin to your website. If you want a slideshow, google “html slideshow plugins” for example and pick whichever one you like the most. It doesn’t just have to be a slideshow plugin, it can be anything from a contact form, video player, or even video game. Just spend some time looking at whatever documentation is provided, and see if you can figure out how to get it working. The other purpose of this post is to make note of the importance of reading over and learning code as opposed to just copying and pasting. Plugins are simple and can be centerpieces on many of your pages however, it it important to make sure you understand how they work and what you can tweak. If you find the perfect plugin for your site but can’t make it larger than the 100 pixel wide demo you were given, then it’s not much use.

Untitled Document