23 replies to this topic

[Nico Knoll]

Hey, Merry Christmas!

Today I finished the migration of my blog from WordPress to ProcessWire. I had the move like 300 articles and 600 comments. And yeah, I've got it.

So here it is (may the first whole blog with Processwire?): http://stadtpirat.net/

Greets,
Nico

[ryan]

Really beautiful work Nico. This may be the first full-blog site in PW and its also one of the nicest Blog sites that I've seen, ever. I'm very proud to see this running in ProcessWire.

[formmailer]

Looks great Nico.
And I read the comment of one of your readers about the site being slower after the change, but I didn't notice any loading speed issues from Sweden, although I don't know how fast your WP blog was.

/Jasper

[Pete]

Very nice site!

Loads pretty quickly for me too, but if there are complaints about speed you could always look into PW's caching options (if you haven't already).

Love the page showing the monthly post stats and the tag cloud as well - I was thinking a few weeks ago how to do a tag cloud and it was pretty easy but I've just not had the need to implement one yet. As with most things in PW it's a case of working out how to do something not if you can do it which is the beauty of the platform.

I'm also converting a site from Wordpress to PW but it was only because WP was used for the original site (which isn't actually a blog site), and now the client is happy to move to PW to get away from the seemingly-regular security updates in WP. WP is a well-established platform, don't get me wrong, but surely there can't be that many security issues left to fix by now?

[SiNNuT]

Wow, very slick site! It isn't super fast for me but definitely not slow.

I would be very interested in a writeup on how you handled the migration.

[nikola]

Good work Nico. Site is sometimes slow... Try to switch from Mootols to jQuery, maybe it will help. Also try caching feature of PW.

[ryan]

I haven't noticed any speed issues on the site here. There are all kinds of factors that can affect the speed at which a site loads, so best to track down what it is first. If the site loads quickly for one person and not another, chances are there is a network issue between the host and user, or there is a factor on the site where performance is affected by the users' software or hardware (i.e. JavaScript execution speed). If a site is consistently slow for most users then more likely the web host, server or the site itself and it's use of server resources.

When browsing the site I monitored the request times in firebug and there is an above average 'wait time' between request and response on the page's URL. However, it's not something I would have noticed. But that may point to some heavy lifting happening at the server, whether in PW or any number of other factors. When it comes to PW, it will let you consume a lot of resources very easily, so you do have to take care sometimes, especially with larger sites. For instance a call to $pages->get('/blog/entries/')->children could load all blog entries if you didn't specify it with children("limit=n"). Likewise, siblings/next/prev functions are good to avoid on a page with hundreds of siblings. With great power comes great responsibility. PW will happily load up a few hundred or more pages, but it's not something you want to do if you don't need to because it will affect performance. And even when you need to, it's good to reduce the number of times. One way is by using the MarkupCache module, especially for things you are having to generate on every request. Likewise, the template caching is good to use in instances where you don't need to change something on every request of a page (ie don't need randomization or second by second updates). But my opinion is that it's best to use caching only after you've made your other code as fast as it can be and have made sure you aren't loading pages you don't need to.

These are just general guidelines and aren't much of a consideration until things get big. This site is at a size (with several hundred blog entries) where some of these scalability considerations should be observed. But it may or may not be applicable in this situation. The site performs reasonably well for me and I would not have ever noticed it as slow. But then again, maybe I was the only one accessing it at the time. Anytime anyone wants me to look at your code for potential bottlenecks I'm happy to. Feel free to post in the forum or privately to me. Most issues that would affect scalability are simple to fix because PW is designed to really sing at the larger scale and just requires occasional tweaking to how you use the API.

[Nico Knoll]

The main problem was the fade in javascript effect. The page never were really slow but everyone thought it because the script waited until all of the images were loaded (now I additionally wrote a cache script for them ). So I deleted this effect and it seem to load much quicker.

[nikola]

Nico, site is loading almost instantly now. Glad you find a solution.

[apeisa]

Nico, not sure if you are aware of this, but your blog is almost un-usable on Android Browser (at least default one that comes with HTC Desire HD). It crops half of the left content out, no matter which page you are. When reading single post you can only see few words at the end of the lines.

This is probably caused because everything is absolute positioned (that is some wild stuff you have there ). So there is no any kind of content flow. You can test this if you resize your browser window to smaller size: you cannot scroll to the left, even when content doesn't fit into the window.

Wouldn't it be much simpler layout to have three columns and let the content flow without any absolute positioning?

[Soma]

Nico, not sure if you are aware of this, but your blog is almost un-usable on Android Browser (at least default one that comes with HTC Desire HD). It crops half of the left content out, no matter which page you are. When reading single post you can only see few words at the end of the lines.

This is probably caused because everything is absolute positioned (that is some wild stuff you have there ). So there is no any kind of content flow. You can test this if you resize your browser window to smaller size: you cannot scroll to the left, even when content doesn't fit into the window.

Wouldn't it be much simpler layout to have three columns and let the content flow without any absolute positioning?

I think it may could be because of Nicos favorite center position technique on the main container (as pointed out in a other thread one I wouldn't recommend )
hint:
#home {
  font-size:13px;
  left:50%;
  margin-left:-480px;
  margin-top:100px;
  position:relative;
  width:960px;
}

[apeisa]

Well, content is not inside that #home element, so I don't believe that is the main issue. It might be that it causes similar effect there (not sure), but the main issue comes surely from absolute positioning on everything.

Negative margins are part of the spec, they are well supported and work as expected. Also spec is pretty clear how they should function: http://www.w3.org/TR/CSS2/box.html (search: "case of negative margins").

They are not evil Soma . I have never seen similar problems with any negative margin layouts... Ie. these here: http://www.alistapar...negativemargins

Although I don't prefer using negative margins myself. I use them only when necessary (and that means I don't have easy access to markup) which is very rare.

[apeisa]

But that is also pretty strange way to center position in that case. Margin: 0 auto; would do the job just fine.

I tested in web inspector to remove those styles from #home and set it to margin: 0 auto; It centered fine, but didn't resolve the main problem (hidden content on small screen). So that is not the issue.

[Soma]

Problem is this technique is used using a mix of positioning in % and negative left margin. So if you resize your browser the left part of the container get shifted outside browser window. It may not the way to go anymore with fluid responsive layouts, although there could be media queries being used to adapt to window size. I used this technique myself a few years back and decided to get away from it. Just my experience with using it, everyone has to decide on their own.

[apeisa]

Soma: I re-read the original post and don't know how I understood it that way (that you are against negative margins), sorry about that. Yeah, that overall combination is strange and messy - I think 99% of times just margin: 0 auto; does the same with much more reliable manner.

But unfortunately that won't help here, fixing this issue probably requires more work than that.

[apeisa]

I went ahead and tested this problem with other site Nico posted here (http://schiller.nico-knoll.de/de/), where was this similar issue (content clipped on small resolution). There changing from this centering method to more normal fixed everything - actually only thing needed was taking few css rules away (see screenshot).

But in stadtpirat there is also this absolute positioning stuff, which causes problems. If you resize your window and look at the firebug/web inspector at the same time, you can see how it changes those inline values. After you have small enough screen it will position them out of the screen: position: absolute; left: -30px; etc...

Nico: are you using some kind of js-plugin for the layout? Is there some way to make it work with smaller screens also?

Attached Thumbnails

• 

[Nico Knoll]

I wrote my own version of grid-a-licious. And I'm working on a mobile HTML5 version . But right now it's optimized for windows which are at least 960px width. So it will work on every device in something like a week

[apeisa]

Great work Nico.

It is superb design! Looking forward for mobile version.

[neildaemond]

Very Slick! I love the design and animations, if only I knew German I'd totally follow your blog.

another great line: "Proudly powerd by WordPress Processwire"

Your comment box looks good, I have yet to update mine as per your last suggestions.

Also, I got an error when clicking your archive graph... I'm running Ubuntu + Firefox if it helps

But, Great stuff overall!

[diogo]

I also get an error with Chrome on Ubuntu