Behind the solid wall of minimalism, dub and house simmers a rough, exploding and sharp sludge that doesn't know its origin nor its direction. The soundscape is as young as it is heavy - it's focused, occasionally without periphery, and is now introduced to you by sweet, creative blood.

Skegg Eklektro is an intense and forthcoming act on the electronic and alternative scene, whose third EP Kukboken (eng. Cock book) is the start of a march towards both the top as well as the absolute bottom. Skegg Eklektro is the broken glass gathering by the curb, the walk after a fight a Tuesday night, a long monotonous clapping totally without reason. Skegg Eklektro is the ink cock drawing in your diary.

About the site

The site is a space mustache journey containing:

· Kinder eggs
· Dotsies
· ASCII art
· Typos
· Top notch IE fixes
· Mobile adaption
· Batman vibes
· Much much much more

Enjoy it here.

I do write the neatest code I can, but whenever I've created togglable content, switches or custom checkboxes in the past, something always gets too customized. I've tended to write one generic function per type of manipulation, often depending on the jQuery function or animation used.

data-in-control.js

To avoid this, I wrote this little snippet called data-in-control.js that takes care of these basic needs. For starters (version 0.1) it includes class toggling and scrolling to a target or position.

data-in-control.js on Github

View the sauce

Here's the idea.

Some jQuery approaches are getting old

No more of those jQuery animations

jQuery animations make me feel out of control. Styles are in the script, I mean, whatthe..? Since most browsers and users are getting support for CSS3 I've started to care less about the ones that don't get 300 ms slides with custom easing and more about me (douchbag!) and the 90% that get it natively.

So I say: I will use CSS transitions as far as it goes.

By the way, we are talking about everyday neat effects here, not about discarding essentail UI design or effects.

No more of those arbitrary selectors

For me,

$('.menu-item').click(showSubmenuChild);

or

$('.small-heading').click(toggleThirdSiblingFromTheInnerLeft);

is not a natural relationship. I want an explanatory trigger and a defined target:

$('.triggers-submenu').click(showSubmenuMatchingSomeAttr);

That's better, but why not use a data-* attribute as the trigger, since we already need one for the target selector?

$('*[data-trigger-submenu]').click(showSubmenuMatchingDataAttrValue);

So I say: I will trigger DOM modification using data- attributes as far as it goes.

No more of those arbitrary actions

What happens when, say, a submenu is shown or hidden? Well, it's obvious we have two states: one visible and one hidden, and — being a web developer — that kinda sounds like CSS classes to me. Classes (or states) is not arbitrary, while animating CSS properties flat out is.

It hit me that these types of paired states are extremely common throughout my sites. Visible/hidden, folded/unfolded, loving/broken. Switching between these states can be directly translated into toggling CSS classes, and for that we have jQuery. Using a data-* attribute we could use something like:

<div data-toggle-these-classes="funny boring">

along with a triggering attribute mentioned in the section above.

So I say: I will not use styles, but classes containing styles when switching between different states of appearance.

A more generic approach to manipulating the DOM

So my three generic approaches are to:

1. animate using CSS3 transitions,
2. use explanatory and parametrical data attributes instead of classes when dealing with minor funcitonality, and
3. switch between states by toggling CSS classes.

Now this is my goal, and it's the goal that got me to write this little insignificant script.

$('*[data-toggle-on-click]').click(function(e) {
var $el = $(this);
$($el.attr('data-toggle-on-click'))
.toggleClasses($el.attr('data-toggle-classes'));
}

That snippet is all it takes to perform almost any switch between to states of appearance.

Here's two examples of how to use this approach:

1. Drop-down submenu

Here we've got a submenu that should display when its parent is clicked.

<a href="/rumba" data-toggle-on-click="#rumba-submenu" data-toggle-classes="hidden visible">Rumba</a>
<ul id="rumba-submenu" class="submenu hidden">...</ul>

Let's add styles to it.

.submenu { height: 0; opacity: 0; transition: opacity 0.3s ease-out; }
.submenu.visible { height: auto; opacity: 1; }

2. Scrolling to some part of the page

When i.e. a link should trigger a vertical scroll to some part of the page, this is the only thing you have to do:

<a href="url" data-scroll-to="#scroll-target">Go to target</a>

Some final words

This article is not really about the script, but about pushing the use of web techiques forward and keeping stuff generic when they can be.

If data-toggle-on-click is toggling an elements visibilty, animating dynamic content with transitions is no easy game. There are many drawbacks, such as height: auto; not animating and the lack of proper one-way animations (without the use of keyframe animations). Surely the efforts of getting this working might exceed the usefulness.

Now, what do you think of it all? Was this rant easy to follow?

Paxa Gården (roughly calling dibs on the youth club) is a project aiming to reduce the amount of administrative work spent on handling the booking of facilities and equipment on youth centers in Sweden. This web app allows youngsters and adults to quickly get a reserved time for any item or place in a minute or two, generating and handing out all contracts necessary for the booking to take place.

This app is developer by me, Jonathan Lundborg and Patrik Weibull, and has taken shape in deep collaboration with the city of Gothenburg and Lotta Johansson, responsible for its development and increase of young peoples participation in politics, activities and the society in large.

My work

My work on Paxa Gården has been to develop and maintain most of the JavaScript on the site, such as custom alerts and popups, modular forms and a rather complex calendar (based on the lovely jQuery Week Calendar) that fully integrates with the booking system in real-time.

I have also been responsible for the design of the site, including the logotype.

ProNordic also has a mobile version of the site, enabling visitors coming directly form viewing an ad or article about ProNordic to get the information presented to them in the best possible way.

The site is also multilingual.

YouCustomize also runs a blog about entrepreneurship, the hairstylist industry and product/marketing related topics.

The applications are designed, developed and managed by me. For some (rather hasty) previews of the app, you can watch Miniteve's promo video here.

• 6 levels
• Up to six different players
• Best Times chart
• Replays
• Ten bags of fun

TrojMa is built in Java and developed during a ten week part-time class in late 2009.

Note: The game is shipped as a .jar file

Trojma gameplay. This is from the last (and hardest) level Hail The Fame. Going for a really bad time, there.

Developed features and maintenance

• The web platform

  A WordPress installation tweaked to fit our needs as a video site. The main plugins that I have used are All In One SEO Pack and WP Favorite Posts along with analytics, sitemap and contact plugins.

  I also did develop a post packages plugin, with a user access feature. The plugin is not public at the moment.

• An optimized fork of the f4player Flash video player.

  What I did was to improve (limit) visual updating when scrubbing, add HD support, vastly improve the volume bar and add proper comments (yeez!).

  

  The Miniteve Flash video player

• An SMS-driven payment solution

  My client's main focus in our implemented payment service was to make it extremely easy to make a purchase. Therefore, I chose to use an SMS service (in our case Wobtel) where a user sends teve 1 to a short number to purchase a package of programs. If it is the user's first purchase, she is automatically registered as a user and provided with a generated password, enabling her to register and make a purchase in one easy step!

• Converting, compressing and distributing video

  All videos have to be optimized for streaming in order to reduce outgoing traffic loads and improve the users' experiences while still maintaining great quality, as well as for different devices such as the iPhone or the iPad.

• A smooth experience using JavaScript and AJAX

  . Since a video site has many thumbnails, programs (or posts), and in our case also program packages, to display, the user experience is improved by providing a modal box for package purchases and signing in, as well as More buttons, lazy loading and, of course, animating the sun itself!