Navigate/Search

Archive for the 'css parent' Category

CSS hasParent: Aweful server side pattern that could be fixed by hasParent CSS property

Saturday, December 13th, 2014

I have been frustrated by a weird and difficult issue in web development.  It’s extremely hard to explain and solution is even more difficult to explain.

This weird issue is always (ALWAYS) denied by server side developers.  It’s also the kind of issue that every where I work when I can finally prove it exists it’s too late to fix it.  The problem is baked into our code base.

It’s very difficult to find the problem until you are deep into the code, but there are some signs.

Usually the first place this issue starts to show itself is when an administrator role is added.  It goes kind of like this:

1) PM says we need an administrator role.  Server side says… we already built that.  UI says cool, just let us know what you need.

2) PM says we need a special menu item to show for admins.  Server side says… got it.  UI says what do we need to do? Server side says, NOTHING, UI is not needed… Hmmmm.

3) PM says we need a special link in the footer for admins.  Server side says… got it.  UI says what do we need to do?  Server side says, NOTHING.

4) PM says for some reason the footer shows the link, but not the menu.  Server side says… yeah the UI messed up.  UI, what?

5) PM says for some reason the menu is working but not the footer.  What’s going on?

Here’s the deal.  The server side people have a menu module (class, include, function… depending on the platform) and they have code in there to determine if the user is an admin.  The server side people have a footer module that determines if the user is an admin.  The server side people swear that they have a single function to determine if the user is an admin, but once you dig in you find that something changes between the menu and the footer or whatever…

The pattern that appears over and over again is duplicate code to determine what is supposed to be displayed in the UI being in multiple places.

We all live the lie until finally the PM asks the UI team to move the footer link. The UI team tells the PM that the backend team will need to make the change.

Whenever the server side team divides there code based on the layout it’s trouble.

I think all of the client side information should be gathered and sent to the server in one place of the server side code.

The problem is in most organizations they generate the information (and sometimes the HTML) by page layout location.  As the rules about when to show data and and when not show data get complicated then trying to keep the duplicate code synched gets hard.  Of course, all back end people will swear that that the code is centralized, but in some way the code behaves differently when it executes in the footer and when it executes in the nav.

If there were a CSS property that describes the location of data then it wouldn’t matter when the data is generated.

.adminItem{

parent:menu

}

Basically, when a <a href=”admin.html” class=”adminMenu”>Admin</a> it would be automatically placed inside of the menu div.

In this example:

<html>

<head>

<style>

.adminItem{

parent:menu

}

</style>

</head>

<body>

<div class=”menu”><a class=’menuItem’>home</a></div>

<a class=”adminItem” href=”admin.html”>Admin</a>

<div class=”footer”>Footer Content</div>

</body>

</html>

What would me nice about this is that the adminItem would be magically moved into the menu regardless of the position in the HTML.  What would be extra nice is that moving the admin menu time from the menu div to the footer div would be a simple CSS change.

That’s what I think…