What's the best way to present an e-mail address on my website without being attacked by spammers?

The approach foo at fooland dot com is not exactly what I'm looking for. I need to present it in a way that is comprehensible for normal people.

EDIT

The displaying e-mails are dynamic

There's a recent answer on superuser.com which addresses this exact question by comparing a whole range of commonly used methods.

Our web forms are really complex. What's a great solution for extensible form validation, preferably one that works with jQuery?

Background:

Our site has a bit of Ajax, but the real focus is on user experience through about 20 multi-page forms or "wizards." These forms are complicated.

• Presentation: Some fields are floats or ints. Validation means stripping non-decimal characters, but we also want to make sure that, if a user enters 5 into a price field, the field is updated to 5.00.
• Side effects: Some fields have side effects when updated. E.g., updating the price or quantity of an item needs to update a subtotal field.
• Widget-driven elements: Some fields are hidden and have values populated by widgets. E.g., a map widget lets you point to a location and a hidden field is updated with latitude-longitude coordinates, but the location must be within a certain region.
• Groups: Some fields are groups, like address/city/state/zip, and should only be validated when all of the fields have bee populated.
• Server-side validation: Validation of some fields requires back-end checking via Ajax requests
• Multiple forms per page: Sometimes a user needs to fill out one form before a dialog opens with another form. A framework has to be more versatile than binding to onSubmit — we sometimes post multiple forms in order from the same page using Ajax. (E.g., we let users sign up and create a widget in one swoop but, due to legacy systems, that flow requires two POST requests.)
• Customizable error display: Sometimes errors appear above fields, sometimes the field style changes, and our new designs call for tooltip-like popups (ala qTip) for some errors.
• Snappiness: User experience is key and tactile feedback is important. Any solution
• Submit buttons: Clicking the submit button needs to validate everything and then show a response — but since some of the validation happens asynchronously.

We're currently using the jQuery Validation library but our forms appear to be outgrowing its capability. I've been looking at things like <angular/>, Knockout and Backbone.js, but I'm worried that they're too heavyweight or that they would require us to rewrite our frontend.

(This should be a community wiki.)

Answering this myself since someone on our team noticed Validator from jQuery Tools !

• Presentation - Supports HTML5 input fields. pattern fields make sure the user can only input test in a certain pattern.
• Side effects - Triggers events on the form and on individual fields: onFail and onSuccess
• Widget-driven elements - "Custom input types" are encouraged. The basic demo even includes a natural numbers-old "age" field.
• Groups - Write a "function matcher" whose sole purpose is to filter which fields are to be validated.
• Server-side validation - Does it and does it intelligently — depends on your validator calling a callback (so it's async-friendly) instead of a return value.
• Multiple forms per page - jQuery Tools seems to be very well built and this shouldn't be a problem.
• Customizable error display - Errors next to fields? All in one place? No problem. Still not good enough? Bind events on failure. Even uses tooltips by default.
• Snappiness - Demos are very snappy
• Submit buttons - No problem.

Update: Yep, just reimplemented a chunk of our site with jQuery Tools' validator tooltips. Fantastic!

My UI has an unordered list on the left. When a list item is selected, a div appears on the right of it. I'd like to have a curved outer corner where the <li> and the <div> meet. Some people call this a negative border radius or an inverted corner. See the white arrow in the image below.

To extend the blue <li> to the edge of the <ul>, I'm planning to do something like this:

li { 
    right-margin: 2em; 
    border-radius: 8px; 
}

li.active { 
    right-margin: 0; 
    border-bottom-right-radius: 0; 
    border-top-right-radius: 0;
}

Is there a better way to extend the <li> to the edge of the <ul>? Obviously, I'll include the webkit and mozilla border radius CSS as well.

The main thing I'm unsure about is that outer corner underneath the bottom right corner of the active <li>. I have some ideas, but they seem like hacks. Any suggestions?

NOTE that the <ul> is indicated in grey, but it would be white in the real design. Also, I'm planning to use Javascript to position the <div> correctly when an <li> is selected.

Well, as it turns out, I managed to solve the problem myself. I hacked together a demo -- check it out.

Essentially, several additional DOM elements are required and a fair amount of CSS. And as mentioned in the link provided by @Steve, a solid background is required. I don't believe there is any way to do this over a gradient background or other pattern.

I ended up with HTML like this:

<ul class="selectable">
    <li>
        <dl>
            <dd class="top"></dd>
            <dt>Title</dt>
            <dd class="bot"></dd>
        </dl>
    </li>
    <li class="active">
        <dl>
            <dd class="top"></dd>
            <dt>Title</dt>
            <dd class="bot"></dd>
        </dl>
    </li>
    <li>
        <dl>
            <dd class="top"></dd>
            <dt>Title</dt>
            <dd class="bot"></dd>
        </dl>
    </li>
</ul>
<div class="right">
    <div class="content">This is content</div>
</div>

And here's the CSS. Notice that I'm using negative margins in some places. There's probably some way to do it without that, but it was easiest.

ul.selectable {
    padding-top: 1em;
    padding-bottom: 1em;
    width: 50%;
    float: left;
}
ul.selectable li {
    margin: 0 3em 0 4em;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
}
ul.selectable li.active {
    margin-right: 0;
}
ul.selectable li.active dl {
    background-color: #4f9ddf;
}
ul.selectable li dt {
    background-color: #dfd24f;
    padding: 1em;
    margin-left: -2em;
    margin-right: -2em;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
ul.selectable li dd {
    padding: 0.25em;
    background-color: #fff;
}
ul.selectable li.active dt {
    background-color: #4f9ddf;
    margin-right: 0;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -khtml-border-top-right-radius: 0;
    -khtml-border-bottom-right-radius: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0; 
}
ul.selectable li.active dd.top {
    -webkit-border-bottom-right-radius: 8px;
    -khtml-border-bottom-right-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    border-bottom-right-radius: 8px;
}
ul.selectable li.active dd.bot {
    -webkit-border-top-right-radius: 8px;
    -khtml-border-top-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    border-top-right-radius: 8px;
}
div.right {
    float: left;
    padding-top: 3em;
    width: 50%;
}
div.content {
    height: 15em;
    width: 80%;
    background-color: #4f9ddf;
    padding: 1em;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

I haven't optimized any of the CSS as I just hacked it together. But perhaps it will help someone else. I've only tested this in Google Chrome on Mac OSX.

Besides the new Google Docs, all the other WYSIWYG web-based rich text editors (ckeditor, tinymce, old Google Docs) I've seen are based on contenteditable or designMode. I personally hate using these editors. It doesn't take much formatting or copying/pasting before the whole experience turns into an exercise in frustration. Returns suddenly start getting double-spaced, unintended formatting gets introduced via pasting from other HTML sources, undo's/redo's are completely broken, formatting becomes excruciatingly difficult to control, etc.

I believe this is one of the reasons Google Docs introduced its own much more constrained, non-HTML formatting engine. Is there any open-source library out there that provides something similar? Thanks in advance.

You could start with the Ace editor (formerly Bespin and Skywriter) which uses Canvas for rendering the text. It's aimed at code editing, so it's missing formatting and other features, but you may find a useful core of functionality to base a rich text editor on.

In action: http://ajaxorg.github.com/ace/build/editor.html

Code: https://github.com/ajaxorg/ace

I have a site with registration & modify account forms. When a user navigates to one of these pages, Firefox is filling in certain areas of the form. It is filling in:

<input type="text" name="nemail2" value="" />

<input type="password" name="npassword" value="" />

Not sure why these names are original for this form, it can be the first time a user ever visits this form and it will fill in their username and password (not even in the correct boxes) from their cached passwords.

Note: the names of the actual login boxes are "emailaddr" and "password", also the <label> is different for these boxes that it is filling in. Not sure what I should do, it looks horrible when a user comes to edit their account information and half optional fields for changing their email/password are filled out with their current information.

Any help is appreciated.

Use HTML5's autocomplete="off".

<input type="text" name="nemail2" value="" autocomplete="off" />

<input type="password" name="npassword" value="" autocomplete="off" />

You can also use it in the form element to turn off autocompletion for the entire form.

Source: https://developer.mozilla.org/en/how_to_turn_off_form_autocompletion

I'm running into an issue where the border of an outer div with rounded-corners is getting cut-off by an inner element with a CSS3 gradiet. Is this a bug with CSS3 - if so, I'll happily submit a bug-report.

If not, how do I fix this?

Source & Demo here: http://jsfiddle.net/joshuamcginnis/2aJ8X/

Screenshot:

The problem isn't the gradient - give your <h2> element a solid background to see. Instead, you need to round the corners of the <h2> as well as of the wrapping <div>.

Add border-radius: 10px 10px 0 0; and the appropriate vendor-specific versions to the <h2> styling and it all works.

Is it possible to have a circular menu or dock using css or jquery.?
I have a set of images as the dock items that need to be displayed as a circular dock... however the number of items in the dock are not constant and may vary.... so i cannot tend to use constant values for positioning each item in a pre-defined manner. Ajax loads some images into this particular div and i need to use css or jquery to style this so that they get displayed as circular dock items. Any idea on how this can be implemented..?
I would like a browser in-specific implementation, but i also welcome if some one has some solutions specific to few browsers...

UPDATE
I don't think i exactly want a pie menu... it easily gets messed up as the number of dock items increase. I am looking for a spiral dock. and by spiral i mean that the menu items must be in the following alignment..

I got it I think! This is just a basic concept, so please tweak it yourself.

http://www.mathematische-basteleien.de/spiral.htm#Spirals%20by%20polar%20equations

See the following JSFiddle and the code below:

var items = 10;
var a = 20;
var b = 1; // updated an extra b, used for rate (see update section below)
var centerX = $('.content').innerWidth()/2; // and some adjustment of half its own size
var centerY = $('.content').innerHeight()/2;
for(var i = 0; i < items; i++)
{
    var yPos = a * i * Math.cos(b*i) + centerY;
    var xPos = a * i * Math.sin(b*i) + centerX;
    var item = '<div class="item" style="top:' + yPos   + 'px; left:' + xPos + 'px;" />';
    $('.content').append(item);
}

And some CSS for testing purposes:

.item
{
    width:10px;
    height:10px;
    position: absolute;
    background-color:red;
}

.content
{
    position:relative;
    height:300px;
    width:300px;
    background-color:green;
}

<div class="content">
</div>

Update: answer to the comment

The function for yPos and xPos are generating items to the outside, they start from the center point. By defining a different a and a an extra var b inside the Math.cos(b*i). It is possible to change the rate of the divs showing up and the spread of the total spiral. The spread of the spiral is defined by a, because it defines the amplitude. The rate that divs are showing up is defined by the new b.

So a smaller b means lower angles, means closer together on the spiral. A smaller a means lower amplitude, means closer together in x and y axes.

If the number of images is not predictable, it shouldn't matter, because of the spiral going out. Of course, this will give you problems when adding too much.

Another solution is just doing this in PHP, because it has nothing dynamic to do, so you can already do this in your backend. The could will be the same with the forloop and all, but then with printing statements in your PHP.

GitHub seems to be doing something incredible: animated page changes without breaking state. The address bar changes, but the page doesn't refresh and I get animated to the next view.

For example, hit this URL: as3logback/ then hit this URL: as3logback/lib

How in the devil are they doing it!?! It's so cool! Are they using some sort of frame or something serverside?

They have a detailed blog entry up on how it works (HTML5 History API) here: https://github.com/blog/760-the-tree-slider

I'm working on a music related website, and frequently use the HTML special characters for sharps (♯) and flats(♭) to keep things pretty, e.g.:

♯
♭

However, I've noticed that in some browsers (IE6, Safari for PC) those characters aren't supported. I've created a conditional javascript that serves up plain, supported characters in place of the special ones ( G# for G♯ and Bb for B♭ ). But I'm having a hard time figuring out how to detect which browsers lack those characters.

I know I could test for the browser (e.g. ie6), but I was hoping to do things right and test for character support itself.

Does anyone know of a good way to do this using either javascript, jQuery, or rails? (The page is served by a rails app, so the request object and any other Rails magic is on the the table.

If you create two SPANs, one containing the character you want, and the other containing an unprintable character U+FFFD (�) is a good one, then you can test whether they have the same width.

<div style="visibility:hidden">
  <span id="char-to-check">&#9839;</span>
  <span id="not-renderable">&#xfffd;</span>
</div>
<script>
  alert(document.getElementById('char-to-check').offsetWidth ===
        document.getElementById('not-renderable').offsetWidth
        ? 'not supported' : 'supported');
</script>

You should make sure that the DIV is not styled using a fixed font.

Take these two pieces of markup:

<div id="header">
  <img src="/img/logo.png" alt="MyLogo" />

  <ul id="misc-nav">
    <li>..</li>
  </ul>

  <header>
    <h1>Welcome to Bob's Website of Fantastical Conbobulations</h1>
    <p>The smell of invention awaits you...</p>
  </header>
</div>

and

<header>
  <img src="/img/logo.png" alt="MyLogo" />

  <ul id="misc-nav">
    <li>..</li>
  </ul>

  <h1>Welcome to Bob's Website of Fantastical Conbobulations</h1>
  <p>The smell of invention awaits you...</p>
</header>

My example may not be perfect, but I'd like to know if the purpose of the tag is for semantic definition of the content, or is it block level structural definition with CSS?

It is my understanding from the spec itself, that the first example is the correct interpretation, yet I see the second being touted as the right way.

Can you offer any clarity on it?

Both are fine. But what exactly do you mean by "structural" vs "semantic"?

From my time on SO I've found w3schools may not be the best place to send people as an html/web programming reference. I started using them a loooong time ago and have been sending people there for years because of their usage of programming categories and tutorials.

I know I can go there and easily find out what different tags are available for use(though it may not be correct) and I can find out attributes to tags easily. Are there any alternatives that can provide the same simple reference and tutorials as they do? Where should I refer people too?

Google Doctype is a nice reference that describes itself as a

Google-sponsored open encyclopedia and reference library for developers of web applications. By web developers, for web developers.

It often references:

• blooberry.com
• MSDN (HTML & CSS section)
• SitePoint HTML Reference
• HTML 4.01 Reference
• WHATWG's HTML 5 Reference

W3Fools - A W3Schools Intervention also promotes the following "more reputable sources":

• HTML Dog is a fantastic and comprehensive intro for HTML and CSS.
• Opera Web Standards Curriculum covers the basics of web standards-based design in HTML and CSS.

• Google's HTML, CSS, and Javascript from the Ground Up presents the basics of web development with video tutorials presented by Google's expert web developers.

  [...]

• The W3C, itself, has a wiki-based general Learn page as well as an HTML element reference.

How can I make the content in a string to upper case but not the html entities in it? Is it possible?

$str = 'FUNDA MENTALISM';
echo strtoupper($str);

I want to produce this,

'FUNDA MENTALISM'

but I get this with strtoupper()

'FUNDA MENTALISM'

I know you haven't listed CSS in your tags, but most of the time it is easier to leave this to the client side (if you only intended this string for browser display).

Applying CSS text-transform: uppercase; will do this for you.

When going to YouTube, it gives a embed code such as

<iframe title="YouTube video player"
class="youtube-player" type="text/html" width="640" height="385"
src="http://www.youtube.com/embed/QRvVzaQ6i8A?rel=0">
</iframe>

Note that the

type="text/html"

is not valid html. There's no such attribute for iframe tag.

could anyone explain why google put that? I guess it's for some practical reason, but i couldn't guess what.

PS you can get the embed code by going here http://www.youtube.com/watch?v=QRvVzaQ6i8A

I guess it is a mistake from Google itself. I suspect a mistake. It was not part of HTML4, and it is not part of HTML5. You can safely ignore it and remove it.

on the type attribute topic: The type on the object element is conforming but obsolete. It has never been really used by browsers to guess the content of the URI served.

I'm starting to wonder if this is even possible. I've searched for solutions on Google and come up with nothing that works exactly how I'd like it to.

I think it'd benefit to explain what that entails. I work for database group at my university's IT department. My main job is to take specs of a report in a docx file, copy that over to dreamweaver, fix some formatting, and put it onto their website. My issue is that it's ridiculously tedious to do this over and over. I figured, hey, I haven't written anything in C# for some time now, perhaps I could write an application to grab a docx file, convert it to html, fix the css, stick the header and footer from the webpage on there, and save the result. I originally planned to have it do one by one, but it probably wouldn't be difficult to have it input a list of files and batch convert.

I've found these relevant topics on how to accomplish this, but they don't fit my needs well enough.

http://www.techrepublic.com/blog/howdoi/how-do-i-modify-word-documents-using-c/190

This is probably fine for a few documents, but since it's just automating an instance of Word, I feel like it'd be slow and memory intensive. I'd prefer to avoid opening and closing an instance of Word 50+ times.

http://openxmldeveloper.org/articles/333.aspx

This is what I started using. XSLT had the benefit of not needing word to be installed nor ran for each file. After some searching I got a proof of concept working. It takes in a docx file, decompresses it, grabs the document.xml from that, and uses the DocX2Html.xsl file I scavenged from OpenXML viewer. I believe that was originally provided by MS for sharepoint servers to provide the ability to render word documents in a browser. Or something along those lines.

After adjusting that code to fit my needs, and having issues with the objXSLT.Load() method, I ended up using IlMerge to make the xsl into a dll. No idea why I kept getting a compile error when using the plain old xsl file, but the dll worked fine, so I was satisfied. Here (http://pastebin.com/a5HBAakJ) is my current code. It does the job of converting docx to html just fine(other than random spaces between some words), but the result file has ridiculously ugly HTML syntax. An example of this monstrosity can be found here (http://pastebin.com/b8sPGmFE).

Does anyone know how I could remedy this? I'm thinking perhaps I need to make a new XSL file, as the one MS provided is what's responsible for sticking all those tags and extra code in there. My issue with that is that I don't know anything about how to do that. Perhaps there's an alternative version already out there. All I'd need is one that will preserve tables and text formatting. Images aren't needed.

Any help anyone can provide would be much appreciated. Thank you in advance.

This looks like just what you need: http://msdn.microsoft.com/en-us/library/ff628051(v=office.14).aspx

The author Eric White blogged about his experiences developing that tool. You can see that list of posts on his blog here: http://blogs.msdn.com/b/ericwhite/archive/2008/10/20/eric-white-s-blog-s-table-of-contents.aspx#Open_XML_to_XHtml

I'm looking at implementing a live voting system on my website. The website provides a live stream, and I'd like to be able to prompt viewers to select an answer during a vote initiated by the caster. I can understand how to store the data in a mySQL database, and how to process the answers. However:

How would I initially start the vote on the client-side and display it? Should a script be running every few seconds on the page, checking another page to see if a question is available for the user?

Are there any existing examples of a real-time polling system such as what I'm looking at implementing?

You would have to query the server for a new question every few seconds.

The alternative is to hold the connection open until the server sends more data or it times out, which just reduces (but does not eliminate) the server hits. I think it is called "long polling". http://en.wikipedia.org/wiki/Push_technology

Take the most famous group of lines of them all:

Hamlet: To be, or not to be: that is
the question: Whether 'tis nobler in
the mind to suffer The slings and
arrows of outrageous fortune, Or to
take arms against a sea of troubles,
And by opposing end them? To die: to
sleep; No more; and by a sleep to say
we end The heart-ache and the thousand
natural shocks That flesh is heir to,
'tis a consummation Devoutly to be
wish'd. To die, to sleep; To sleep:
perchance to dream: ay, there's the
rub; For in that sleep of death what
dreams may come

How would you mark that up in a semantic way, preserving space for a) line number (e.g., 1.1.1), b) character name, and c) of course, the text?

I'm going to have to disappoint you there, but it is not possible. See this A List Apart article for more information.

To summarise, because HTML is a markup language designed specifically to mark up a certain type of document, not all documents can be represented with HTML's limited set of elements:

Some documents cannot be published using HTML. In many cases, we shouldn’t even bother trying. In other cases, we have to radically change the appearance and structure of the document.

They even used a screenplay as an example of one such document. I will recommend you to read the entire article in full to see the rationale, as well other methods for marking up documents.

How should my class names be?

For example, a CSS class for a vote count, how should I name it?

.vote-count-post     (1) // SO uses this
.VoteCountPost       (2)
.voteCountPost       (3)
.vote.count-post     (4)
.vote .count-post    (5)
.vote .count.post    (6)

• What are the advantages and disadvantages of each?
• Which is most used and why?
• Are there any implications in any of these?
• May I have any uppercase in my CSS?

It's just naming, so it's up to you what you like. Either of your examples would work fine. Just pick one and stick to it.

The three first selectors addresses single elements, the fourth addresses a single element with two classes, the fifth addresses an element inside another, and the sixth does the same but with the inner ellement having two classes.

I would probably put class="Vote" on the surronding element, and out class="count" on the count element inside it to address it. I use pascal case for surrounding elements and lowercase for child elements inside them, so I would use:

.Vote .count

Title might be a bit confusing, I'll try my best to explain what I need to achieve. Basically I have the following elements to a particular webpage:

1. Header - always visible above content
2. Content - background image covers the entire content area - this is the key part
3. Sub-footer - information about the content always visible below it
4. Footer - standard company footer, visible if window height is a certain size, otherwise need to scroll down to see it

As I mention above, the content portion of the page is maybe the trickiest part. I need a big image to be in the background that covers the entire area. css-tricks has an excellent guide in the ways to do full page background images. So I'm hoping this can be achieved easily. The issue is how to make the sub-footer stay at the bottom if the window is <720px with the footer underneath it below the fold (needing you to scroll to it). A window >720px should show both the sub-footer and the footer with no scrollbars.

I won't even worry at this point about a minimum height the content needs to be (possibly necessitating scrollbars on the content <div> or making both the sub-footer and footer go below the fold).

Here are image mockups of what I'm trying to achieve:

First - a window <720px tall where the footer needs to be scrolled to:

Second - a window <720px tall that has been scrolled down to see the footer:

Finally - a tall window >720px that has no scrollbars because everything is visible:

I'm using jQuery and don't care about IE6. Can I achieve this in CSS? Do I have to use jQuery to dynamically adjust things? Full page backgrounds are easily done with css3, I'm happy to use css3 or html5 to do what I need.

You definitely can not use CSS position: fixed because that is always relative to the viewport, not the parent element.

What you need to do is have the "subfooter" as a fixed positioned child element of "content". In order to do that, you're going to have to use Javascript.

Something like this should do what you need. Try changing the height variable in the CSS for #content so you can see how it behaves with various content heights:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<style>
    #header {
        height: 50px;
        background-color: #ccc;
        width: 100%;
        margin-bottom: 10px;
    }

    #content {
        position: relative;
        height: 1500px;
        width: 100%;
        background-color: #ccc;
    }

    #subfooter {
        height: 50px;
        width: 100%;
        background-color: #666;
        position: fixed;
    }

    #footer {
        height: 50px;
        width: 100%;
        margin-top: 10px;
        background-color: #ccc;
    }
</style>
<script>
    $(document).ready(function(){

        $(document).scroll(function() {
            position_subfooter();
        });

        var position_subfooter = function() {
            $("#subfooter").css("bottom", "20px");
            if(($("#subfooter").offset().top - $("#subfooter").height()) > ($("#content").scrollTop() + $("#content").height())) {
                $("#subfooter").css("bottom", ($("#subfooter").offset().top - ($("#content").scrollTop() + $("#content").height()) + 20));
            }
        }
        position_subfooter();
    });
</script>
</head>
<body>
    <div id="header">
        <h1>HEADER</h1>
    </div>
    <div id="content">

    </div>
    <div id="subfooter">
        <h2>SUB FOOTER</h1>
    </div>
    <div id="footer">
        <h1>FOOTER</h1>
    </div>
</body>
</html>

I have a fairly stand-alone page, and I'd like to make it as small as possible: inline minimized Javascript and minimized CSS, and then minimize the HTML itself. There's tools for each of these parts, but I'd like to avoid writing the glue for putting all of these together. Open source would be ideal.

try http://code.google.com/p/htmlcompressor/

EDIT

Although doing it will make the code reading part a lot more complex and as a result, debugging will be a big pain. Do it only after you have all the other required optimization in place.