new css layouts coming soon!

Last night I spent some time in PhotoShop Elements mapping out my next new CSS layout. As I finished up my rough layout, I began questioning – for the first time in a year or so – where I would begin for my CSS. For the past few designs, I have started off with a great three column layout that has worked very well for me. It is now officially time to make my own master layout that I can use and reuse for multiple designs to come. Stay tuned for my first new web site design with this new CSS. My goal: flexibility, compatibility, optimization, and the use of W3C standards. Jappler.com will not be the first site I redo with the new CSS, but it will be redone in the next few months. Change is good. Being obsessed with browser compatibility is better. 😉
[tags]CSS, W3C standards, browser compatibility[/tags]

web development fun.

You know the drill…one link leads to another and then to another until I stumbled onto Scott Johnson’s blog. One of his blog posts mentioned wanting some resumes for some CSS contract work so since I have some extra time, I decided to send him a copy of my resume and portfolio…and I am happy to say that I will be helping out with his newest startup: Ookles. If you have not heard of Ookles yet, I encourage you to sign up on the Ookles web site so you will be notified when the the company is out of stealth mode. Exciting stuff ahead!

On another note, I have begun rethinking and mentally re-arranging jappler.com. Time to take my personal web site to the next step and use some really cool technology. First up: the sections. I am planning on combining some and adding others. I also need to make the home page more portal like instead of having static content that no one really cares about. I also have some minor interface tweaks in mind (time to learn and implemet some AJAX goodies. Stay tuned!
[tags]ookles.com, jappler.com[/tags]

helpful css links.

It is that time of year…when I start looking around at my web sites and figuring out what I can do to improve them. First stop: new or cool CSS techniques. I have been gathering helpful bookmarks for the last few months and thought I would pass all my top 6 CSS recent bookmarks onto everyone. Why 6? That is what I had – back off…I told you this site was random. Not using CSS yet? Please…consider it as a New Year’s Resolution. The table was so 1999. New development: CSS.

  1. Mini-Tab Shapes
  2. CSS Tabs
  3. Listamatic
  4. In search of the One True Layout
  5. 24 ways to impress your friends
  6. Somone’s top 12 CSS articles

PS. Happy birthday Ben!

kick ass calendar.

Well. A good calendar solution is always needed for business and/or personal needs. I just happened to stumble on a really cool PHP/CSS/AJAX solution: Monket Calendar. Check out the demo. As of now, it is still in beta testing, but it looks promising. (Especially since it supports RSS and iCal…as well as used AJAX. I need some more AJAX in my life.
[tags]Monket Calendar, AJAX[/tags]

web site optimization.

The last few days I became obsessed with optimizing jappler.com. It was loading slower and slower with what seemed to be every passing day. Since I had originally designed my web site for an earlier version of WordPress, I figured it was about time for a tune up. I went to the ever-so-helpful codex, to help me figure out what was going on. I went through a number of different steps to troubleshoot the problem and I thought the steps I took might be helpful to others.

  • Is it my host or my site? At first I thought it was a slow host. I had friends from around the country access my web site, and confirm the problem existed for everyone. From all the feedback, I confirmed something was going on. Now it was time to take it to the next step. Was my host slow or was my web site slow? To check this, I grabbed a recent backup and restored it to my desktop to check it out. Once I had everything in place, I hit my web site and it still seemed slow, so I asked Ken to give it a try. He confirmed it was still slow. It was not the host that was slow.
  • Is it my template/XHTML/CSS/graphics that is slow?
    Now it was time to revalidate my XHTML and CSS via W3C. I caught a few errors, but nothing major. I also took a look at my graphics’ sizes…nothing too hideous. I even had a few graphics (Get FireFox, etc) that were being pulled from a remote location…I put an end to that. I then reconfirmed that the site was still slow so I decided to turn to my favorite part about FireFox the Web Developer extension. Under the tools menu, I viewed my site’s speed report via http://www.websiteoptimization.com. I was able to look at everything that was loading from my site, make sure CSS decisions (break up my CSS into a few different files, and then do some minor changes to reduce my HTTP requests from 63 to 36. How? This is where I started getting into some database optimization.
  • MySQL issues? Since everything is page is created dynamically, it was time to shift the focus on the database.
    • Table optimization.
    • I first read about the option to optimize tables, so I logged into phpMyAdmin and optimized all my WordPress tables. I once again did some more performance testing on my site and yet again, no luck…it was still slow. Time for my next hypothesis.

    • Slow queries. I found out that MySQL has the ability to log slow queries by adding log-slow-queries=/var/log/mysql/mysql-slow.log and then defining the slow query variable set-variable = long_query_time=2 in the /etc/my.conf file. (This is not created by default.) Once you have made changes to the my.conf file, you will need to stop/start MySQL. Now to look at the slow queries…simply tail -f your log. (for me: tail -f /var/log/mysql/slow-queries.log) Once again, with some testing (browsing) of my web site, I did not find any queries that stood out.
  • Back to the jappler template: One div at a time. Back to the codex I went searching for tips, examples, etc. What else could be the problem? Time to go through what I know.
    • I have ruled out a slow host.
    • My XHTML and CSS validate (or have only a minor issue with one of my IE tricks, but when I use the default WP theme my pages load fine.
    • I have stripped out the right hand column and the footer to localize the problem to the main part of the page so those parts of the pages are fine.
    • I have disabled and then re-enabled all the WP plugins one at a time (and deleted a number of them)
    • I have optimized my MySQL tables. I have looked at slow queries coming from my theme.

    At this point I did not see too many options other than recreating my templates over one div at a time. Div by div I recreated and tested my web site. (header loads ok…time to add the menu….menu loads ok with header…time to add content. Eventually through enough testing (and some wild plugins) I tracked down the problem…more like problems and started testing multiple templates.

  • What’s left as of today? I still need to work on my index.php to make it load a little quicker. Something is still not happy there. I also need to figure out what is not happy with the news page. Other than that…even though it was a stressful few weeks, I can walk away happy because I learned a lot.
  • Summary.

  • When issues arise, try to pinpoint the problem as much as possible by asking yourself questions.
  • Validate your HTML/XHTML/CSS. Clean code is a good thing.
  • If you are using themes/templates, try a default template.
  • Make use of the Web Developer extension for FireFox.
  • Take a look at your site’s speed report via http://www.websiteoptimization.com.
  • Back up often!! (I just had to slip this in)
  • Be on the lookout for rogue plugins and watch your queries.
  • Don’t give up!

[tags]optimization[/tags]

up late with XOOPs.

After completely moving towards tabless designs, it is hard to look at the cluttered code of tables in code. I have probably put in 15 hours of playing with XOOPs now, a few of these hours stripping code down to be more CSS driven. I am all about clean code these days, but boy do I have my work cut outr for me. I am having problems giving up complete control with layout with a lot of what I am working on, but I have to stay focused on the prize: added functionality without a lot of effort. Last night I upgraded my install to XOOPs 2.2 from 2.13. The upgrade was painless, but some of the modules I want to use are not compatible with the new version. I will wait. Ideally I would some day produce my own CMS, and this idea is why I have been looking at several CMS packages. I would like to take the best from what I have worked with and put it all together. I am at least a year away from doing this, but it is something I am looking towards. I chose XOOPs for several reasons, but one of the main reasons was because it uses Smarty, and I am curious how it handles these templates on a large scale. I am learning a lot about seperating my content from my php code and layout. It is a bit confusing sometimes because of old habits, but it is coming together nicely. I am hoping to have something to show everyone after another 10 or so hours this weekend. I could have easily used one of the layout that comes with XOOPs, but if you know me, you know I could easily spend several hours trying to figure out how to get everything perfectly lined up to the exact pixel, so a custom layout was certainly needed…and a complete CSS driven layout of course. Overall, my work with XOOPs has been pretty positive. Version 2.2 really cleaned up the admin interface which I greatly appreciate. My only complaint so far is that I have to wait a few days/weeks for my choice modules to be updated. OK, I do have one more…the screen refreshes when you authenticate. I would like to go to the page, not refresh to include new content…but I am trying to read up about that…perhaps I can do something about that. Everything is customizable, right? 😉

jappler.com dashboard widget!

Time to take things to the next level…my love for (Mac OS X 10.4 + Web Development) = Dashboard widget creation time. When I first got my hands on

Mac OS X 10.4, I was not too crazy about Dashboard, but after WWDC I started to like it more and more. I wanted to start off with a simple widget, so I decided that it would be cool to have a widget that would display the past 10 jappler.com posts while also having the option to search old posts/pages. I have a few other plans in mind for other widgets, but until then, check out my very own widget: Jappler.com Dashboard widget.

Disclaimer: Use the jappler.com dashboard widget at your own risk. I am not responsible for any data loss, productivity loss, global warming, etc that this widget might cause.

Day 3: Panic, Day 4: Done.

Well, yesterday after hours of frustration and CSS style sheet number three, I started thinking that what I wanted was not possible…not even close. Thoughts entered my mind like : “maybe I will forward all IE users to a nice web site on standards” and “maybe I could pdf my web site and make users do that.” These thoughts were the desperation speaking. I dreamt all night about CSS classes, divs, and elements and woke up determined to find something that would work. Enter my new hero: Tonico Strasser who authored an awesome layout which I based my design on. I have learned so much about CSS…and this experience has been an education. I am still not a fan of IE, but it is something we have to deal with and I have dealt with it. I have a few spacing issues with IE still, but everything looks pretty good. Sixty plus hours worth it? Yes. Standards are important.

day 2, style sheet 2.

Well well. Who says you should settle? I decided to completely re-write my style sheet and I have almost everything down for both IE and Netscape (FireFox, Safari, Netscape) browsers. Some things I still need to look at are the bulleted lists on the right (blog) and some other details. I again feel like I have taken CSS to another level.

So why did I switch style sheets? I went over to a friend’s house last night and saw the horror of my web site in IE for Windows. I came home and made some adjustments, but then got frustrated and knew there had to be another way…here I am.

What I have learned…well for one, IE is not pleasant to work with, time to get a “get Firefox” logo for this web site. IE does not play nice in so many ways, but the killer is it does not like min/max-width, and that is very important to this design. All other browsers that I have tested obey the min/max-width, but not IE…this was the major reason I had to start from scratch again. I decided that being able to stretch it for IE was better than the absolute mess I saw before. I am hoping I can find a fix somewhere, but for now I am ok with that…I suppose.

Other than that, this whole design has been a great learning opportunity and I am excited to figure out these last few bugs so I can enjoy the design instead of working on it…well at least for a few weeks. So, if you see something weird, believe me, I am aware of it…and am on the case.
[tags]CSS[/tags]

css, a voyage.

Oh my. Well, by blog was getting ugly with all of my leftover CSS problems, so I decided to sit down and figure this out. I have 95% of all this figured out, still some problems with Firefox and the li dots. I am not happy with the word/letter spacing, but who knows. All this CSS work makes me want to redesign my site…again, but I need a break, and I need to focus on making my current one better. So many things that I like. Well, I am burned out. CSS…
[tags]CSS[/tags]