Lukas W.
Well-known member
The code of the article-list is honestly driving me crazy. I see a lot of redundancy, unnecessary elements and hard to modify classes. I have thought about it for some time but I just cannot think about any reason why it has to be built like this. I think it would work much simpler than the code right now. Maybe you can help me and explain, why things have to be like this.
Let's give an example. I will take one of your articles from the surrey forum to serve as example. The code is given as the following:
To start with the most obvious thing: there are three links in total pointing to the article. I see one is wrapping the image and one is serving as a layer to simulate a hover effect, but I haven't found out, what the third one serves for.
However, you should remove the hover and do it with opacity or simualting a new element with css when hovering the link below. This should be possible by now with css3. It does not only remove redundant code but make things a lot easier to oversee.
Linked with this is the hoverMask-class-div. What exactly does this element serves for? You can put all the code necessary directly into the surrounding a-element.
Maybe you can explain me what the third link (the one in the middle) is good for, otherwise it may should be removed.
Next: There is a small border underneath every image. A border, that actually only exists in webkit browsers. But not only the fact it is missing in internet explorer, opera, ie and so on, but it is built out of an 1x1px image. What is this good for? Why don't you use the border-top property here and make the border visible in every web browser?
Next: Five spans for five stars? Why don't you make one span with the complete with of all five stars and give it the empty star as repetitive background. Then put another span on top of it with the repetitive image of the full star. Ajust the width as necessary.
You should also remove the titleContent pinTitleRow-class-div and put the code right into the h3-child of it. This will again remove an unnecessary element from the code.
This should be it for the first. Would be glad if you could explain me the reason for the things described above and maybe this criticism helps you, to make your addon even better
Let's give an example. I will take one of your articles from the surrey forum to serve as example. The code is given as the following:
HTML:
<div class="box_a masonry-brick" style="position: absolute; top: 0px; left: 500px;">
<div class="styledBox">
<div class="titleAndImage">
<a href="xz-articles/surrey-events-plan-your-surrey-event-part-1.23/">
<div class="hoverMask"></div>
</a><div class="crop"><a href="xz-articles/surrey-events-plan-your-surrey-event-part-1.23/">
</a><a href="xz-articles/surrey-events-plan-your-surrey-event-part-1.23/" class="artImg">
<img src="http://www.surreyforum.co.uk/data/article_images/l/0/23.jpg?t=1371508074" align="absmiddle" class="srcimg">
</a>
</div>
<div class="titleContent pinTitleRow">
<h3>Surrey Events: Plan your Surrey Event - Part 1</h3>
</div>
</div>
<div class="imgContent">
<div class="ratingContent pinRow">
<div class="ratelist">
<form action="xz-articles/surrey-events-plan-your-surrey-event-part-1.23/rate-article-dialogue" method="post" class="rating RatingWidget">
<dl>
<dt class=""></dt>
<dd>
<span class="star Full"></span>
<span class="star Full"></span>
<span class="star Full"></span>
<span class="star Full"></span>
<span class="star Full"></span>
</dd>
</dl>
<input type="hidden" name="_xfToken" value="">
</form>
</div>
<span class="reviewCount pinMute">
<a href="xz-articles/surrey-events-plan-your-surrey-event-part-1.23/reviews"> 1 Reviews</a>
</span>
</div>
<div class="pinRow pinMute authorContent">
<a href="members/surrey-events.507/" class="avatar Av507s" data-avatarhtml="true"><img src="http://www.surreyforum.co.uk/data/avatars/s/0/507.jpg?1334865380" width="48" height="48" alt="Surrey Events"></a>
Article Author
<div class="userTitle"><a href="members/surrey-events.507/" class="username">Surrey Events</a></div>
<div class="spacer" style="clear: both;"></div>
</div>
<div class="pinRow aboutContent">
<span class="articleMore pinMute">
<a class="imgMore" href="xz-articles/surrey-events-plan-your-surrey-event-part-1.23/" id="23_more">Article Summary</a>
<a class="imgLess" href="xz-articles/surrey-events-plan-your-surrey-event-part-1.23/" id="23_less">Less</a>
</span>
</div>
<div class="pinRow articleSum" id="articleSum_23">
<p>Things to Do Before Planning an Event in Surrey
* Think careful about the date, you wouldn't want to start planning an event when it clashes with something else. Check your local tourist information centre, look at several local event lists and even check your TV guide (a big sports event on TV can certainly dwindle numbers)</p>
<div class="posterDate muted">
Article by <a href="members/surrey-events.507/" class="username postDate" title="Article Author">Surrey Events</a>,
<span class="faint"><span class="DateTime" title="18 Jun 2013 at 12:52 AM">18 Jun 2013</span></span>
</div>
</div>
</div>
</div>
</div>To start with the most obvious thing: there are three links in total pointing to the article. I see one is wrapping the image and one is serving as a layer to simulate a hover effect, but I haven't found out, what the third one serves for.
However, you should remove the hover and do it with opacity or simualting a new element with css when hovering the link below. This should be possible by now with css3. It does not only remove redundant code but make things a lot easier to oversee.
Linked with this is the hoverMask-class-div. What exactly does this element serves for? You can put all the code necessary directly into the surrounding a-element.
Maybe you can explain me what the third link (the one in the middle) is good for, otherwise it may should be removed.
Next: There is a small border underneath every image. A border, that actually only exists in webkit browsers. But not only the fact it is missing in internet explorer, opera, ie and so on, but it is built out of an 1x1px image. What is this good for? Why don't you use the border-top property here and make the border visible in every web browser?
Next: Five spans for five stars? Why don't you make one span with the complete with of all five stars and give it the empty star as repetitive background. Then put another span on top of it with the repetitive image of the full star. Ajust the width as necessary.
You should also remove the titleContent pinTitleRow-class-div and put the code right into the h3-child of it. This will again remove an unnecessary element from the code.
This should be it for the first. Would be glad if you could explain me the reason for the things described above and maybe this criticism helps you, to make your addon even better
The new structure is perfect.
But I would use the title of a news as a link to the article (e.g. "
