Code
CFD Smile Goes Live!
Monday, November 12th, 2007 | CSS, Clients, Code, Custom Development, Design, Portfolio, Portfolio - Freelance, Programming, Projects, SEO, Semantic XHTML, Skinning, Web Development, Websites, Work Stuff, XHTML | No Comments
Well, my first side project has finally gone live! After months of hard work, I now unveil www.cfdsmile.com to you. We wanted to bring out the services right up front for best emphasis, and lots of heavy stock photo usage for high impact.
We also worked with a professional web content writer to make the content more effective and search-engine optimized. This, coupled with semantic HTML, CSS, and google web master tools, will help this site rank high in keywords for Texas Dental Services.
So, please visit the site if you get a chance, and enjoy!
Login Usability: Am I in or out?
Wednesday, August 1st, 2007 | CSS, Code, Design, Feedback, Improving Code, Javascript, Programming, Usability, Web Development, Websites | No Comments
UPDATE: After making this post, and refreshing the parallels forums page, I was presented with “Welcome, Joseph Sak” instead of a login prompt. So maybe I got it wrong, or they did, but this post still stands!
The Parallels Forums recently got some redesign and information restructure, which all looks good and is organized quite well. But they’ve missed a couple really easy issues with their login functionality.
Having my Cake and Coding it Too
Wednesday, April 4th, 2007 | Apache, CakePHP, Code, Marionette, OS X, Open Source, PHP, Programming, Projects, Web Development, Websites | No Comments
1 hour into CakePHP and I’m so enthused. This has re-sparked my love for PHP development. I can’t wait to take Marionette into full swing!
New Project “Marionette” in the works
Tuesday, April 3rd, 2007 | CSS, Code, Design, Life, Marionette, Photoshop, Programming, Projects, Web Development, Websites, Wordpress, XHTML | No Comments
OK, so I know I haven’t worked on the veritas project in a long time, but I promise you it is because my client has been busy working a second job and we just haven’t been in touch on the matter lately. It’s no big deal, I’m not charging money for the project and there is no strict deadline. I will be posting about that soon, though. I just got on him to purchase a domain and hosting solution so I can begin scripting the site. I will use wordpress and convert it into a CMS just like I did for Shirock Photography.
So, I am working on a new project, teaching myself cakePHP, and for now, it is codenamed “Marionette”. I’m very, very excited about this project and I hope to produce something in the coming weeks. Stay posted.
Fix your Javascript Print Style Switcher for Internet Explorer
Monday, February 19th, 2007 | Browsers, CSS, Code, Design, Internet Explorer, Javascript, Programming, Web Development, Websites, Windows | 4 Comments
So you’ve decided to use javascript to swap out a print style css sheet that basically hides a bunch of divs and maybe widens the content area. Perhaps your re-color the links and the text and fix the font sizes.
You try it in Firefox and it prints perfectly, but when you print in IE, you’ll notice IE didn’t really print your printable version.
So you think, ‘Ok I’ll add media=”print” to my stylesheet link!’ and then you refresh your page, try your Print this Page link, and nothing happens! And it still prints the wrong version! What to do?
Well, your old pal Joe here figured it out.
Here’s what you do:
- Create a separate stylesheet called print.css
- Add this code to your master stylesheet:
@media print {@import "print.css";
}
- Implement your javascript for making the stylesheet override your master stylesheet
- Test
- Enjoy!
This allows you to switch to your print style so it is preview-able before printing and also tells IE to use print.css when it prints a page on your site. So incidentally, if a user just clicks print in IE without switching to your style, they will still get your printable version. I suppose this might cause confusion but considering the most reasons for making hard copies of digital information, it probably shouldn’t pose too much of a problem for your average user.
Now if your user wants to have a pretty print out of your website because they can’t access a computer to show it to someone else away from home, they’ll probably get stuck with the fact that IE does not print background images and colors by default any way.
A Web Design Process: Part I
Sunday, February 18th, 2007 | Apple, Code, Design, Macbook Pro, Photoshop, Programming, Web Development, Websites, Wordpress | No Comments
I’m not particularly gifted in web design but I thought I’d like to blog about my process from blank PSD using Photoshop CS3 beta on my Macbook Pro to full on HTML / CSS. So I’ll get right to the meat of my newest project: Veritas Community.
Veritas Community is an emerging church being started in Flint and Owosso by Tom and Rachel Wyatt with the help of the Salvation Army. It’s going to be a faith-based community hell-bent on sharing lives, faith, hope, love, music, art, and the occasional Lebowski references. Tom sent me a list of websites he likes, including Mosaic, which will be the base for my inspiration on the project.
The scope of the project will include a blog, a newsletter sign up, some informational pages (about us, contact us, etc), and an event list for music shows. The gathering place will double as a venue for indie rock bands. My vision is to develop this site using XHTML, CSS, PHP, Javascript, maybe some flash, and host it on Wordpress 2.
So without further ado, here is the preview.

This is Veritas home page, version 1.
Most of my focus was on logo development. I knew right off the bat I wanted a font like Gill Sans. I also knew I wanted to incorporate some sort of leafy symbol, to represent growth. You can see I have taken the greys and blue from mosaic and played with it for my layout and header. I hope they won’t mind. This is obviously not close to being finished but it’s a start and hopefully we’ll see something more as we progress.
Part II of my Design Process is now available
The Beauty of Standard Code
Wednesday, February 14th, 2007 | CSS, Code, Collaboration, Programming, Teamwork, Web Development, Websites, XHTML | 1 Comment
Eric Puidokas used to be a coworker of mine, but now he works in Florida for the New York Times. While he was here, he developed a standard skin and css naming convention for us to use so we could easily jump into each others’ code when need be to fix problems or implement redesigns.
I recently had the opportunity to do just that. I had to put in a new design for a client based on roughly the same layout. Eric’s standard coding made it very simple, and a process that takes 4 to 5 hours from a blank sheet took about 1 hour with Eric’s code.
We use the same names for similar layout elements in every single web page we do. It goes kind of like this: (this list identifies common unique DIV IDs)
- Frame (main container)
- Header
- Nav (main nav bar)
- Sidebar (sub page nav bar)
- Main - or - Content
- Footer
So thanks to Eric for the great code, and let this be an encouragement to other development teams to use standard naming conventions for your CSS and HTML elements.
Download a zipped example of our standard code.
Shirock Photography is live!
Wednesday, February 14th, 2007 | Code, Design, Programming, Websites, Wordpress | 1 Comment
After a couple months of planning, designing, coding, hosting, and blah blah blah, Sarah’s photography portfolio site is now live: http://www.shirockphotography.com I redesigned her site last January, and hosted it on WordPress this past month. I followed a few steps to make WordPress a CMS, and so far it’s been working well. Except instead of fgallery, we’re using Lazyest Gallery.
She is happy with it because now she can log in and easily make edits to her content. I also set up a method for her to easily change the pictures on her front page.
I created a contact page with a form so people can easily contact her for quotes. I utilized the front page to point visitors to important sections of her gallery.
For Phase 2, we’re hoping to make it possible for her clients to log in and view their pictures online. This might be doable with the help of Flickr.
FrogJS: A new twist on LightBox
Friday, January 26th, 2007 | Code, Design, Javascript, Programming | No Comments
Eric just released a phenomenal bit of javascript called FrogJS. Basically it allows you to do paging between your pictures in a lightbox-type gallery.
This is a pretty neat little script. My only qualm with it is that it’s currently 760px wide. It’s not exactly going to work within your standard website template. I think the point of the typical lightbox is that you can throw your images into a template where your content area is typically 500 px in width, and the image pops up with an AJAX-y effect of muting out the rest of the screen.
Perhaps this concept can be taken further in this regard! I will definitely be playing with this.
Wordpress Code in Posts Headaches
Tuesday, January 16th, 2007 | Code, Programming, Wordpress | No Comments
Want to get your code to display AS-IS in Wordpress?
- Disable the Rich Text Editor through your Profile Settings
- Add the Code Markup Plugin to your site
- Use Simple Code Encoder to convert your HTML easily
- Post