2007 - Archives - exscale.se

Archives for 2007

You are currently browsing 60 article(s) published in 2007, please try the search if you can't fint what you're looking for.

An Equally Small Update

Thursday, December 20, 2007

Ok, another small update here.

I've hijaxed the "Comments"-links in the article listing (which you already know if you read my post it). I've also animated the hijaxation of the "Contined..."-links. It didn't look good when they weren't animated but the Comments-links were.

I also sorted out a little problem I had with ajax-generated content (from the Continued...-links) containing images and/or code-blocks not getting the functionality that images (imgbox) and code-blocks (+/- buttons) have.
The reason is because imgbox() as well as the code-blocks' functionality is run onDomReady. If content is added after DomReady that content will obviously not be affected by what was run before.
I had to rewrite a couple of my functions so they could be run on a specific div (rather than the body-element) (just added a parent-parameter to all of them) and I now run them on the div with the newly added content.

I had to do this so that clicking "Continued..." would not make the "View/Hide comments" stop working.

I think it turned out quite cool in the end.

I've also removed an old blog-post called "My Travels" and moved that information to my about-page.
Under the "About Me"-section there's a new section called "My Travels". I've marked every location up with microformats (well, geo-data at least) and I use Javascript to display a Yahoo! Map with all the locations plotted on the map.

This was discussed in the 24 ways article Unobtrusively Mapping Microformats with jQuery by Simon Willison, but I actually did exactly this a couple of months ago for a project at work :)

I'll be writing something proper soon hopefully, it's just that I enjoy working on the site more than I do writing :P

Latersss

Oh, and Merry Christmas and a Happy New Year! (cus I probably won't write anything 'til next year!).

Comments are off
Filed under Site News

A Smaller Update

Thursday, December 06, 2007

Another tiny update here. First of all I've fixed up the old Rounded Edge-design for those who liked it.

I've also re-added the hit-count on articles. I haven't actually counted article-hits for about 6 months. That's why the "Most Popular Articles"-widget never changes. I remember it causing errors when viewing some (not all) articles on the live site (but not locally) but I decided yesterday to just stick it in there again and see how it goes.

Please let me know if you encounter any bugs (particularly articles that are nothing but blank, white pages).

I also went through my "Old Unfinished" 3D-stuff and stuck the ones that weren't absolute crap on the site. Have a look in the 3d-archives. The new ones are the ones at the top.
I also added some background-text to most of my 3D-projects.

That's about it part from some tiny markup-optimizations and other small bug-fixes.

Toodle-pip!

Comments are off
Filed under Site News

WTF is the Start-Attribute Deprecated?

Wednesday, December 05, 2007

I make sure my markup is always 100% valid XHTML 1.0 strict. I hate it when my little Tidy-icon isn't green and happy but yellow, or even worse, red from use of invalid or deprecated elements or attributes.

I recently added pagination to most of my sub-content widgets which you may have noticed, but it doesn't make much sense that the first article in the list of top rated articles on page 2 has the number 1 in front of it. Here's where the start-attribute comes in.

The start-attribute allows you to specify at what number an ordered list should start. This is exactly what I need in this situation but for some fooked up reason the start-attribute is no longer valid in strict doctypes.

I decided to ignore the fact that it is not valid XHTML 1 strict and use it anyway. I only use it in the case where the list doesn't start at 1 (so you'll never see a start="1" in the code) which means the first page is still error-free. But should you navigate to page 2 of any sub-content widget with javascript disabled you will experience invalid (X)HTML. I say with javascript disabled, because if you have js enabled that content is fetched with ajax and inserted with js so your validator won't notice the invalidity of the code.

I've read that instead of the start-attribute you're meant to use CSS-counters. I've only played around with them once before and for the #top-rated-articles ol to be different from page to page I would have to add a class specifying which page the list is on. Why is that better than a real attribute that does exactly that? And what about user-agents that don't support CSS? Should they not get the same information? Of course they should.

Comments are off
Filed under (X)HTML, Semantics, Web Standards

A Little Update

Tuesday, December 04, 2007

If you've checked my "Post Its" lately you'll know that I've updated all my jQuery plug-ins and removed the need for the dimensions plug-in in all of them but full width navigations.
It could just as easily be removed there as well so I might do it in the future, just couldn't be arsed now.

I don't understand why jquery doesn't come with any outerWidth/outerHeight functions? All that's needed is to add border, padding and width together but it's a pain to do it every time manually.
At least offset() is included as of some later version... perhaps bundling the entire dimensions-plug-in would make sense?

I've also uploaded a couple of new (although they are old) 3D-images that were just lying around on my hard-drive: school house, el bano, x-wing and bloodcells, and I also added a couple more renders of both stugan and the one ring.

You may also have noticed a bunch of "previous"/"next"-links in my sub-content area. They're all hijaxed so don't be afraid to click them and vote in previous polls or whatever. I just wish the start-attribute wasn't deprecated cause it would really make sense to use it in all those listings.

That's it. Laterssss

Comments are off
Filed under Site News

jQuery Imgbox Plug-In

Monday, November 26, 2007

I'm working on a new version of this which will eventually show up on AndreasLagerkvist.com - In the mean time, please check out my image zoom plug-in. The code for the imgbox has been removed.

This plug-in will make any link pointing to an image (png, gif, jpg or bmp) open in the "Imgbox". The Imgbox centers on screen and displays whatever image the link was pointing to, together with the link's title, the image'a alt-attribute and a list of all other images in the same scope.

This way you can use imgbox to create "albums" of images by simply applying the imgbox to different sections of your site.
Say for example you have "Random Images" and "Holiday Pictures"-sections on your site, each wrapped in its own div, then you can use the imgbox to group each set of images like this:

$('#holiday-photos, #random-images').imgbox();

Do not target the links themselves as imgbox looks for links inside the element you tell it to.

It requires jQuery and my center plugin for jQuery and you can get the code here. The default styling of the imgbox can be found here but it's very easy to apply your own styling using the default as a guide.

Comments are off
Filed under Accessibility, Javascript, jQuery, Progressive Enhancement

One div[id] per Module

Sunday, November 25, 2007

A way I structure my markup more and more is one div with a semantic id-name around each module on the site. In almost all cases that's all you need to use divs and ids for, but you still see plenty of sites out there that suffer from class-and-id:itus.

With a (unique, obviously) id in a containing div around every module, styling it from CSS or scripting it or any of its children using Javascript becomes a breeze. Especially if you use a JS-library that supports CSS-selectors, like jQuery.

Something you see often is HTML like this:

<h2 id="recent-news-heading">Recent News</h2> <ul id="recent-news-list"> <li><a href="#">Bla di bla</a></li> <li><a href="#">Bla di bla</a></li> </ul>

If you wrap those elements in a div#recent-news, you'll be able to access them from both CSS and JS through simple selectors (#recent-news h2, #recent-news ul). Granted it is a tad slower (2 function-calls rather than 1) to fetch them with JS than if they have ids, but I prefer to keep my HTML clean and completely separated from the other two layers.

<div id="recent-news"> <h2>Recent News</h2> <ul> <li><a href="#">Bla di bla</a></li> <li><a href="#">Bla di bla</a></li> </ul> </div>

Besides, it makes your code look nicely structured in firebug if all you use ids and divs for are wrapping your modules :) Hopefully soon we'll be able to move all "grid-divs" (like #content, #sub-content, #etc) from out HTML to our CSS using the advanced layout module, that will be sooo sweet.

Comments are off
Filed under (X)HTML, Semantics, Web Standards

Opera Mini Better CSS-support than Opera?

Friday, November 23, 2007

I was checking my site in the Opera Mini 4 Simulator and noticed that Opera Mini has support for the :last-child pseudo class. Something that Opera (9.24) still does not have.

TF?

Comments are off
Filed under CSS, Other

jQuery Color Picker Plug-In

Friday, November 23, 2007

A simple colour-picker plug-in for jQuery. Use it like this: $('select[name="colour"]').colourPicker();

Where the XHTML looks like this:

<form method="post" action=""> <p> <label>Select a Colour<br /> <select name="colour"> <option value="ff0000">Red</option> <option value="00ff00">Green</option> <option value="0000ff">Blue</option> </select> </label> </p> </form>

And the colourPicker plug-in will turn the select in to a normal input[type="text"] and add a colour-picker icon to the right of it. Clicking the icon will bring up a dialog box allowing you to select any of the colours that were present in the select-element.

You can check it out in action here.

It requires jQuery and you can get the code here. The default styling of the colour-picker can be found here but it's very easy to apply your own styling using the default as a guide.

And as a bonus, here's a little PHP-function that will generate a list of "web-safe" colours:

<?php function gwsc() { $cs = array('00', '33', '66', '99', 'CC', 'FF'); for($i=0; $i<6; $i++) { for($j=0; $j<6; $j++) { for($k=0; $k<6; $k++) { $c = $cs[$i] .$cs[$j] .$cs[$k]; echo "<option value="$c">#$c</option>n"; } } } } ?>

Use it like this:

<select name="colour"> <?php gwsc(); ?> </select>

Enjoy, and do leave some feedback.

Comments are off
Filed under Accessibility, Javascript, jQuery, Progressive Enhancement

jQuery Center Plugin

Tuesday, November 20, 2007

Here's a simple plugin you can use to center elements on the page.
To center an element you go: $('#my-div').center();

As center() uses position: fixed; to center elements there is no IE6 support.

Get the code here jquery.center.js.
As usual it requires jQuery.

Enjoy.

Comments are off
Filed under Javascript, jQuery

The CSS3 Advanced Layout Module

Monday, November 19, 2007

I've only looked briefly at the new CSS3 advanced layout module, but what I've read seems really cool.
Using floats, absolute/relative positioning and (negative) margins you can create basically any layout without the use of tables. But many times your markup still reflects your layout.

The markup exscale.se consists of is pretty much limited to 1, 2 or 3 column layouts due to the grouping of all sub-content widgets in the #sub-content div and everything else in the #content div. Using the new layout module I could place every widget in the #wrapper-div and still create fluid, scalable 1, 2, 3, 4, whatever-column layouts. I could move widgets around however I felt like without ever touching my markup.
With the new layout module in CSS3 complete separation of content and design is possible.

Continued...
Comments are off
Filed under CSS, Design

Android

Friday, November 16, 2007

This has been a dream of mine for so long. Finally a common platform for mobile-phones!

Suweeeeet

Comments are off
Filed under Other

Using a Logical Document Outline

Tuesday, November 13, 2007

Using the 6 different heading-elements is very important for both SEO and accessibility but many websites out there completely ignore to use them or use them in a, to me, illogical way.
Many times people ignore to use them for, what I believe are, obvious headings and will simply use a strong-element (em and b are common as well) instead.
To me any kind of text that describes what a section of your site is about is a heading. If you check the source of exscale.se you will notice that I use headings in almost every one of my modules. "Recent Comments", "Most Popular Articles" etc are all headings in my opinion.

The Web Developers Toolbar-plugin for Firefox has a feature called "View Document Outline" which will give you an outline of the headings in your document. It complains if the document does not start with a h1 (as it always should) and if a heading following another heading is anything but 1 higher, 1 lower or equal to the heading-level that preceded it.
Therefore I believe the following statements to be true:

There must never be more than 1 h1 per document
The h1 must appear before any other heading
It is illegal to follow an hx element by anything but a hx, hx+1 or hx-1-element. (In other words a h2 -> h4 structure would be invalid)
An hx heading is a sub-heading to any preceding hx-1 heading and a super-heading to any following hx+1 heading

So, if you can only use one h1 per document, and any following h2 will be a sub-heading to the h1 then the question "what is a heading to the entire site?" arises. My answer: the name of your site. The name of your site is the only thing that can be considered a super-heading to all other headings in the document. And every other heading in your document should be a h2 (unless of course it's a sub-heading to one of your h2s).

Here's what exscale.se's document outline looks like (pretty much):

h1 exscale.se
- h2 Navigation
- h2 Recent Articles
  - h3 A recent article
  - h3 Another recent article
    - h4 Sub-heading to recent article
- h2 Search
- h2 Recent Comments
- h2 Poll

To me that makes perfect sense. If "Search", "Recent Comments" or "Poll" were anything but h2s they'd be sub-headings to "Recent Articles", which, obviously, isn't correct.

The way I see it is, use h1 for you site's title. Place it before any other heading in your document. Use h2 for other headings (unless, of course, they are actually sub-headings to an h2 in which case they should obviously be h3s (and so on..)).

I do it like this because to me it makes sense. Loads more sense than placing random h3s or h5s in your document based on how valuable you believe they are. At least if you do it like this you have a reason. On many sites that use headings the author simply seems to have picked randomly what he felt was a good heading for that section. This way there are logical rules for which heading to use.

How do you do it? What do you think about this approach? Do tell.

Comments are off
Filed under (X)HTML, Accessibility, Semantics, Web Standards

jQuery Equal Height Elements Plugin

Sunday, November 11, 2007

This plug-in will make every matched element equal height by adjusting their min-height properties. Any padding/border will be taken in to account but this plug-in is not compatible with IE6 as it lacks support for min-height.

To make #content and #sub-content equal height you simply go: $('#content, #sub-content').equalHeight();
It's best to run equalHeight() on window.onload rather than $(document).ready() so that all images are loaded before the height is calculated.

It requires jQuery and you can get the code here.

Enjoy!

Comments are off
Filed under Javascript, jQuery

jQuery Full Width Navigation Plug-in

Friday, November 09, 2007

In the (not so distant, hopefully) future, creating full width navigations will be a piece of cake using display: table, table-row and table-cell, but until certain browsers get up to speed with CSS here's a plug-in you can use to make any navigation created with the HTML-elements ul li and a full width.

Continued...
Comments are off
Filed under Javascript, jQuery, Progressive Enhancement

100% Valid XHTML Database Output with Markdown and HTMLEntities()

Wednesday, November 07, 2007

Editors not knowing HTML and messing up your markup can be a big problem for you if you care about validation.

There are numerous WYSIWYG editors out there, but most of them produce absolute crap code, and if you want valid and semantic XHTML they simply will not work.

Markdown is an absolutely brilliant text-to-HTML converter that everybody can learn in minutes.
In fact, you don't have to do anything special at all to produce semantically correct, valid XHTML 1.0 Strict (or HTML if you prefer).

The syntax for adding basic HTML-elements such as headings, lists and images takes about 2 minutes to learn, and is very similar to the way you add meaning to your emails and IM messages, using underscore for emphasis etc.

The problem with Markdown if you use it for user-input (as well as your own) is that it allows any type of HTML-code to be inserted. Of course this is not optimal for comments and other data anybody can submit.

Together with the PHP-function htmlentities(), however, you can always be sure to get 100% valid output.

Download NiceString and demo-files

Continued...
Comments are off
Filed under (X)HTML, PHP, Semantics

We've Moved

Monday, November 05, 2007

Just a simple "We've Moved" image I used on some site ages ago..

Comments are off
Filed under 3D Work, Design

Vietnam

Sunday, November 04, 2007

My first (and only) attempt at a face. The weapon is just something I made up but it's meant to look a little like a minigun. Not sure if it's that "Vietnam" though...

Comments are off
Filed under 3D Work

Using display: table to Create Full Width Navigations

Saturday, November 03, 2007

Sometimes you need a navigation to span the entire width of its parent:

Because all types of navigations are nothing but lists of links they should always be marked up with the unordered list element (ul) with each navigation-item in its own li-element.

A very common way to display the list of links horizontally is to float each li-element to the left which will make them all appear on one row, but the total width of a row of floated elements is determined by the elements' margin, padding, border and contents so you have no real control over the width of your navigation-bar (unless, of course, you set a fixed width to each li).

Using the CSS display-property together with its table, table-row and table-cell values you can make an unordered list behave like a table and easily make the navigation-items take up the full width of your site.

Continued...
Comments are off
Filed under (X)HTML, CSS, Semantics

Our House

Saturday, November 03, 2007

The top floor of my parent's house in Sunderbyn, Sweden. The colour of the books in the shelf really bring down the overall quality of this one. But it is a few years old.

Comments are off
Filed under 3D Work

Spooky House

Friday, November 02, 2007

Never finished this one either. I wanted to make it look cartoonish but still be 3D.

Comments are off
Filed under 3D Work

Silver Ball

Thursday, November 01, 2007

A basic silver ball inspired by some old Hugo Boss cologne. The reflection is from "Our House".

Comments are off
Filed under 3D Work, Design

A Lot Going On

Tuesday, October 30, 2007

You may notice it's been kind of quiet here for a while.
That's because during the past few weeks I've been busy moving from Stockholm (and Web Guide Partner) to London (and Yahoo!).

I've also been working quite a bit on the site, both back-end, front-end and on a new design.

Continued...
Comments are off
Filed under Design, Javascript, Site News

Rap Gang

Tuesday, October 30, 2007

Here's another one i never really finished. Just wanted to try out the cell-shading plug-ins for Lightwave.

Comments are off
Filed under 3D Work

My Old Room

Monday, October 29, 2007

This is how the "Dream Flat" started out and is basically a copy of my old room at my parent's house.

Comments are off
Filed under 3D Work, Design

8 Erm... 5 Random Things

Sunday, October 28, 2007

So my work-mate Simon Jobling (aka one phat dj!) tagged me with this 8-random-things-thing and seeing as it's been over a month since my last post it's about bloody time I put something on here.

There are some rules one must follow so have a look:

You have to post these rules before giving you the facts.
Players state eight random facts/habits about themselves.
At the end of the blog post, you tag eight people and list their names. (Don't forget to leave them a comment telling them they're tagged, and to read your blog.)
People who are tagged need to write about their eight things on their own blog and also post these rules.

Ok, here we go:

I was born in Hong Kong. My parents lived there for a few years but I don't remember much. I do have a Honk Kong/British (as well as a Swedish) passport tho.
One of my favourite films is The Life Aquatic Wiv Steve Sizou. Although it's one of many other favourites.
I''m quite in to snooker and pool. In fact, snooker is the only sport I really ever watch..
I have a tattoo of an anchor on my right shoulder. I was well pissed up in Chiang Mai in Thailand one night and thought it'd be funny. It looks like absolute shit (the man doing the tattooing was quite pissed himself) but it's a good memory.
I'm no good at all at coming up with random things.... :|

Ermm.... guess I broke all rules but one. Sorry mate!

Comments are off
Filed under Other

eXscale Mosquito

Sunday, October 28, 2007

This one is used on the "Mosquito 3"-style. I like how the lighting worked out on this one.

Comments are off
Filed under 3D Work, Design

Cat & Butterfly

Saturday, October 27, 2007

I initially planned to make a short film with this but couldn't come up with anything good so lost interest.

Comments are off
Filed under 3D Work

X-Wing

Thursday, October 25, 2007

One of the first things I created when starting with 3D was an X-Wing and a few Star Wars related animations. They look really noobish so I decided to brush up my old X-Wing model and create a new, cooler animation. Rendering-time was, like normal, a right piss-take so couldn't be arsed to render more than this.

Comments are off
Filed under 3D Work

School House

Saturday, October 20, 2007

Another one where I just followed a tutorial. Different tree-making technique here than from "Stugan" and "Morker".

Comments are off
Filed under 3D Work

El Baño

Monday, October 15, 2007

This was my bathroom when I lived in Valencia, Spain for a few months. The 2 black objects that seem to be out of place are there because the "picture" is taken from behind the wall where those objects are. Should probably have removed them completely but this is another one I never really finished.

Comments are off
Filed under 3D Work

Bloodcells

Wednesday, October 10, 2007

I just followed a tutorial for this one. Turned out quite cool no?

Comments are off
Filed under 3D Work

Encourage IE Users to Upgrade to a Modern Browser

Monday, August 27, 2007

I'm getting seriously fookin fed up wiv IE and the fact that so many people still use it regularly.

If you've ever visited exscale.se using IE you may have noticed a small warning-label at the top of the page, and I encourage everyone who's serious about modern web development to start using something similar.

Continued...
Comments are off
Filed under Other

Dark is Back

Tuesday, August 14, 2007

I decided to brush up and update my old style "Dark" that I made back in March of 2006.

I've added quite a lot of widgets to my sub-content area since then and this style doesn't really look good with more than a few of them visible so you won't have access to everything if you use it.

I think this is the best one I've made and I know it's one of the most popular ones among visitors (well, perhaps not so much anymore since i added the JoshuaInk-style) so I felt it was time to get it back online.

Select it from the style switcher, styles page or just click the thumb.

Enjoy.

Comments are off
Filed under Design, Site News, Web Work

Markdown Heading Level PHP Function

Tuesday, August 07, 2007

If you use Markdown-syntax for articles/comments or whatever like I do you know that the #-symbol defines a heading.
But depending on where an article is displayed on a page you may want to adjust the heading-levels.
On exscale.se for example the maximum allowed heading-level for an article on the index-page is 4 (<h4>). This is because the title of the article on the index-page is a <h3>.

I've created a little php-function that adjusts markdown heading-levels to whatever the user wants, so that the same article can be displayed on different pages where heading-levels aren't the same.

Continued...
Comments are off
Filed under PHP, Semantics

Joovc Doovde Player

Tuesday, July 31, 2007

Brilliant.

Comments are off
Filed under Funny Stuff

Why Can't We Select Parent Elements with CSS?

Tuesday, July 24, 2007

Yea, why is that? And are they working on letting us do it?
It's a breeze with JavaScript and it could be extremely useful in CSS I think.

Continued...
Comments are off
Filed under CSS

Skillnaden Mellan Attribut, Tagg Och Element

Friday, June 29, 2007

Verkar som att det fortfarande är lite oklart för vissa vad taggar, attribut och element egentligen är.
Man hör ofta saker som "alt-taggen" och de allra flesta säger tagg när det ska vara element.

Jag har gjort en fin liten bild här som illustrerar skillnaderna och hoppas att de som läser det här och lär sig något börjar säga rätt.

Continued...
Comments are off
Filed under (X)HTML, Web Standards

IE Double Padding Bug

Wednesday, June 13, 2007

Couldn't find anything about this on Google but there seems there's not only a double margin bug in IE but also a double padding bug.
I haven't been able to recreate the bug (although haven't tried much) but it seems to occur when an element is used to clear other elements. Then the clearing element will get double padding-top.

I've experienced this a few times but, as i said, never found any information about it.

Perhaps someone reading this knows more about it? What exactly triggers the bug and if there's a fix (part from simply reducing padding by 50% in IE).

I'll try to recreate the bug and post a demo-page.

Update

IE8 fixes this.

From: http://msdn.microsoft.com/sv-se/library/cc304082(en-us,VS.85).aspx (emphasis mine)

Floats

Many changes have been made to float behaviors, fixing many of the most troubling float issues encountered with prior versions of Internet Explorer, including those caused by the requirement of the hasLayout property. The hasLayout functionality has been removed in Internet Explorer 8. The following are some of the issues fixed:

Cleared elements don't clear other nested floats when they don't share a parent.

Cleared elements after floats have doubled top padding.

Comments are off
Filed under CSS

Get Firefox Now, Please

Tuesday, June 12, 2007

I can see in my stats that quite a few people who visit my site still use IE.

Please try a real browser and you'll see how much fun it is when you can actually experience everything that "web 2.0" has to offer.

Comments are off
Filed under Other

Creating Pipe-Separated Menus with Unordered Lists

Sunday, May 27, 2007

Pipe-separated menus are quite common over the internet, especially for footer-navigations.
As we all know, menus are simply lists of links and should therefore be marked up as such. Even so you see plenty of footer-navigations that are marked up with nothing more than the paragraph-element and the separating character is actually in the source code.
Thanks to the :after pseudo-element we can add the separator using CSS, and it's very simple.

Continued...
Comments are off
Filed under (X)HTML, CSS, Semantics, Web Standards

CSS Boxar Med Rundade Hörn, Toning Och Skugga

Thursday, May 24, 2007

I denna korta artikel tänkte jag beskriva ett sätt att bygga boxar med rundade hörn, skuggor och toning med enbart en div och ett rubrik-element.

Boxen kommer såklart vara flexibel i höjd, men däremot ha en fast bredd. Krävs flexibel bredd så krävs fler än 2 bakgrundsbilder, vilket då (i nuläget) kräver fler än 2 element.
Om några år (förhoppningsvis) så kommer browsers ha stöd för flera bakgrundsbilder i ett element, och då kan vi bygga hur avancerade boxar vi vill med en enda div, men i dagsläget får vi antingen nästa div:ar, eller nöja oss med fast bredd.

Boxen i exemplet kommer att se ut såhär:
CSS box med rundade hörn
Men kan som vanligt enkelt ändras genom att pilla lite i CSS:n och ändra bilderna.

Boxen kommer bestå av två bilder, den ena placerar vi i div:en, och den andra i rubrik-elementet.

Continued...
Comments are off
Filed under (X)HTML, CSS, Design

Ricky Gervais is a Genius!

Thursday, April 26, 2007

Comments are off
Filed under Funny Stuff

Big Update

Sunday, April 22, 2007

A few months back i set out to speed my site up because loading-time was ridiculous.
I quite soon found out it had to do with the blog roll favicons, and once I removed them loading time greatly improved.

I kept working on the back-end though, made the framework ready for ajax-calls, trimmed all the code, and generally made everything nicer.
All the ajax-trickery is back again, try it out in the poll, comments, post it, random quote or whatever. The "Post It"-widget is new, -and is temporarily open for anybody to use- (i closed it due to too much spam).
I have a feeling it will fill up on spam quite fast if it's anything like my comments without a captcha.

But try it, i think it worked out kind of cool (atleast if you have JS enabled).

Still working on that new design... fear it may take forever.
Oh, and yea, none of the old styles will work for a while. Only aframework and joshuaink, because i changed the #id-names of the container-divs again (last time though. This time im almost sure!)

Please let me know if you encounter any bugs or whatever.

List of updates

RSS-Feed fixed and moved to ArticleListingModule
Contact-Page added
Ajax support in framework + loads of ajax-functionality
A couple of new sub-content widgets and updates on others
Style for admin login-screen and made it work properly

Comments are off
Filed under Site News

Ajax/Hijax Rating Exempel

Wednesday, April 18, 2007

Det är mycket snack om ajax nu för tiden, och jag tänkte bara visa ett simpelt exempel på hur man använder ajax på "rätt" sätt. Dvs, det är tillgängligt även om användaren inte har JS aktiverat.

Kolla in exmplet live här.

Continued...
Comments are off
Filed under Ajax, Javascript, jQuery, PHP, Web Standards

Sture och Serre

Wednesday, March 21, 2007

Sture och Serre har varit offline alldeles för länge, så här kommer alla tre avsnitt för alla er die-hard-fans!

Continued...
Comments are off
Filed under Funny Stuff, Old School

Bra CSS-Menyer

Sunday, March 11, 2007

Med den här guiden ska jag försöka förklara hur man med CSS kan bygga menyer som kan se ut i princip hur som helst, utan att använda något mer än de obligatoriska HTML-elementen ul, li och a.

Jag har sett många exempel på dåliga CSS-menyer, och ska nu försöka bevisa att man sällan behöver förstöra sin HTML med en massa divs och spans för att göra snygga menyer.

Vill du kolla in koden direkt kan du göra det här.

Den färdiga menyn i exemplet ska bli såhär:
Men kan enkelt ändras till vilket utseende som helst genom att ändra bilderna och tweaka CSSn därefter.

Continued...
Comments are off
Filed under (X)HTML, CSS, Design, Semantics, Web Standards

Putting the Site on Hold

Friday, March 02, 2007

I'm gonna put the site on hold for a bit while I work on optimizing my PHP.
Loading time has really increased lately, and I'm gonna see what I can do about it.

It may take some time, but i figured there's no point in writing anything if people can't read it because it takes 40 secs to load the friggin page.

When i come back the site will (hopefully) run much faster, have a lot of ajax functionality (comments, poll, rating etc) and i'll write some css/xhtml-articles in swedish for once!

Be back in a few weeks!

Update: During my back-end update I've created a debug-mode for the site that times all modules etc.
Through this function i found out that my BlogRoll took around 5-6 seconds to load and all the other modules avaraged something like 0.2 seconds.
I quickly realized it was my getSiteFavicon() function that was slow (it tries to open and parse files on other servers), and removing that function increased speed by 3-4 times.

I'm still re-coding plenty of the back-end, making it "ajax-ready" and generally making things better and nicer.

Expect a big back-end update in a few weeks.

Ciao

Comments are off
Filed under Site News

jQuery Image Viewer Plugin

Wednesday, February 28, 2007

Please check out the improved version of this plugin, "imgbox". The code for the ImageViewer has been removed.

Here's a simple "image-viewer" for jQuery.
It's quite similar to lightbox only probably not half as advanced.

Usage is quite simple, simply go $('#image-container').ImageViewer(); and all images that are children to #image-container will now "pop-up" in the image viewer.

All images in the same scope (in this example the #image-container div(?)) will be navigatable from the image-viewer.

There may be plenty of bugs and ways to optimize, but it works ok and i'm fed up wiv working on it for now.

Check our the example page for source code and... examples.

Update

I've created a tiny version of the image-viewer that's not as buggy as the big one. The previous one had problems in everything but FF it seems, but this one's been tested in FF, Opera and IE6 (should prolly work fine in 7 as well).

The new version does not include any image-navigation though, and is triggered on anchor-elements with a class of "pop-up".

Check out the example page for the code...

Update 2

Well, i fixed the original, "big" version. It's been tested in Opera, FF and IE6. For some weird reason it doesn't work properly in Opera when used on my site. On the example-page it works fine though, so it must be some other JS i'm using that's fucking with it.

Anyway, check it out.

Comments are off
Filed under Javascript, jQuery, Progressive Enhancement

Content Flipper Javascript Function

Wednesday, February 28, 2007

Note: This code was outdated and quite shit so I've removed the example page. Check out my jQuery Paginate Plugin instead.

Created this at work recently.
It's a function you can use to add a navigation bar to the bottom of a div, containing other divs, and with it you can navigate through the divs with back and forward buttons.

It's very similar to normal tabs, only instead of tabs there's a nav-bar.

Comments are off
Filed under Javascript, Progressive Enhancement

Completely Unobtrusive jQuery Tabs

Monday, February 26, 2007

As i've mentioned before i've started using quite a lot of jQuery, and some of its plugins.
Among them the Tabs-plugin by Klaus Hartl.

It's an amazing plugin that is extremely easy to use and works very well. What annoyed me a bit was the fact that it requires you to put an unordered list at the top of all you tab-content, with links pointing to all the tab-content-containers.
To me it seemed that list was completely unnecessary if javascript was disabled (i mean, it's not like people don't know how to use the scroll).
So i though, fuck, I'll generate the list from javascript.

So here you have it, a completely unobtrusive tabs-plugin (that uses the normal tabs()-plugin).

The titles in the tabs are generated from:

The title-attribute of the div it is pointing to
Or, the first heading in the div
Or, the id of the div, str-replaced so it looks a bit nicer (this asumes you use foo-bar syntax for naming IDs and classnames)

The list is automatically inserted before the FIRST tab-content (the first div).

Check out the example and have a look at the source for the erm.... source.

Oh yea, the main reason i created this is cus i've been thinkin about tabbing my sub-content in future designs, and now i can do that without having to change the XHTML. Luvely Jubbely.

Update: If you don't want to add title-attributes to all your divs in your (x)html-code, you can very easily use javascript to do it instead.
Before executing the AutoTabs() function, do something like this:
$('#id-of-div').attr('title', 'Whatever you want the tab to say');

Comments are off
Filed under Javascript, jQuery, Progressive Enhancement, Web Standards

CSS Wish List

Thursday, February 22, 2007

Often times when programming CSS i think of stuff i would really like to see in future versions of the language.
I know some (most?) of these have been mentioned around the web before, but these are the ones I would really like to see in the future.

Continued...
Comments are off
Filed under CSS

Satan Golga 2

Tuesday, February 20, 2007

Det här är så jävla kul.
Missa inte "då och då":et och "inlåst på min måne" hahahe.

Comments are off
Filed under Funny Stuff

O'Sullivan's Ameezing 147

Saturday, February 17, 2007

I know this is really old, and you've probably already seen it if you're at all interested in snooker. But i really wanted to put it on my site cus i reckon it's fuckin wicked!

Comments are off
Filed under Other

Fade an Entire Design Using jQuery

Saturday, February 17, 2007

I've been using jQuery lately at work to create some pretty cool effects and tabs, and I must say I'm starting to like it more and more.

I had an idea to morph a website's design from one to another, so i created this little test (Click anywhere on the page to fade to the other design).
It didn't turn out exactly as cool as I first had hoped, because all I really do is fade out body, change its class and fade it back in.
You could however potentially animate every CSS attribute that differs in the two design, and create a really fuckin neat morph.
I could not be arsed though, cus that would mean putting all the CSS in the js-file.

Also the fade is a bit sketchy. I don't understand why the "Round" design jumps up and down like that, but i guess it's something i have to live with.

I can't use this on my style-switcher though, because changing a style on my site not only changes CSS attributes, but includes other JS-files etc.
And also i can't be arsed to go through every design i've made and put a body.design-n in front of every selector.

Anyhoo, check it out.

Edit: i just realized that instead of changing the class of the body (and having to use body.design-n in the CSS) one could simply change the href attribute of the link element with media "screen".
I can't be bothered to change the example though.

Comments are off
Filed under CSS, Javascript, jQuery

A Really Old School Design

Thursday, February 01, 2007

Just finished coding this really old-school design i initially made a couple of years ago.
It looks horibble, but it was a pretty good CSS excersise to get my current HTML to look like that through CSS.
I actually had to use some JS aswell to add a div for the bottom-left image in the content-area (home/archives etc).

I had the 2 year old source code zipped up and saved for reference, but the page wouldn't render properly in FF, which isn't strange when you consider the code; table based design, inline styles, attribute values without quotes etc.
I tried it in IE7 and there it rendered just fine. Too bad IE has better support for crappy code, than for modern standards.

Anyway, it's pure CSS now so check it out on the styles page or click here to apply it right away

Laters

Comments are off
Filed under CSS, Design, Old School, Web Work

Major Back-End Update

Tuesday, January 30, 2007

Hey, hey!

I know i've been extremely slow with the updates lately, only a few old school stuff and some images to show for the last several months.
The reason is I now have a full time job and thus not as much time to spend on my personal projects.

However, since about June I've been working on updating the back-end part of my site.
Back-end is not my strongest side, but the more code i write, the more i learn. Beacause of that, i constantly realize what i did 2 weeks ago is no longer good enough so i've now gone through about 3 different versions of exscale, and finally settled with this one.

As a visitor you will hardly notice a difference. But a couple of things have changed; all the urls have been re-written and (temporarily) there's no longer any Ajax-trickery used on the site. This is beacause i've started using jQuery (well, i'm gonna start), and i have not yet been arsed to re-code all my old JS to 'jQuery-JS'.

I've tried to build the back-end modular. But to tell you the truth i don't even know what that means, hehe.
I can tell you this though, every part of the site is its own "module" (emphasis on the quotation-marks). It is completely separated from the rest of the site's modules, and the site itself (almost).
If you have no idea what im on about, or you do, but think i don't, check out this file and see if that helps you understand what i'm trying to say.
Files like that i've decided to call "PageTypes". They are what defines what goes on a specific page.
The one i linked to is the RecentArticles-page. And all the XML-nodes in that file represent the different "modules" used on that page.
It works quite well, and i'm planning on creating a cool drag-and-drop admin for creating pages. If i can be arsed.

I've been working on a new design aswell, but it's really going slow.
The one you see now (unless you've changed it) is the one i've been using during development of the back-end.
I know it looks shit, but i kinda like it =).

Expect more updates in the near future. New JavaScript effects, new design and whatnot.

Oh yea, I added a few more renders of "The Office", been thinking about rendering a big version of that aswell, but don't really have any inspiration to sort out the lighting. I also added a X-mas special tune by FlyBoy4 on the FlyBoy4-page.
Almost all the styles have been re-coded (again!). But this time i'm pretty sure i won't be changing the HTML ever again (yea right), so hopefully i won't have to do that again.

Toodle Pip!

Comments are off
Filed under Site News

Include Kukk

Monday, January 22, 2007

Kukk3D is my "so called" 3d-engine. I wanted to use it for something so it wouldn't just waste space, but i really had no motivation so i just quickly put this together. Music is by the famous FlyBoy4

Download here (761 KiB)