Ok this is thinking outside the box to solve a somewhat annoying and completely arguable problem.
The problem: I want my websites heading to have two words and one of those words I want to be in bold, or, and maybe even in a different colour.
The usual solution:
{code type=php}
firstWord secondWord
{/code}
Looks something like this after some CSS – “firstWird secondWord”
The question I ask myself is simple, does Google like me putting spans, an element with no semantic value inside of my h1’s, h1’s being an element with very important semantic value?
If it doesn’t, why should I be punished for using text instead of an image to make my title stand out? Seems annoying doesn’t it. Well it annoyed me so much I came up with a solution.
Have you ever wanted to immediatly create a valid URL from a text input field or some kind of semantic input filed, I know I’ve had to implement it a few times now for different projects. Typically it will be something like, this new created object needs a name or title and that name or title needs to be converted into a URL which the user can see, and then edit to something more meaningful should they choose to. A good example of this already in action is in your wordpress blog, when you type in your post title Worpress automatically creates a URL for you and allows you to then edit and change the URL without also annoyingly changing the original title.
I’ve implemented this a few times now for different applications so here is the base code I tend to start with.
View Demo :: MooTools
View Demo :: jQuery
Notice how after editing the URL field the title will stop changing the URL value. The logic being that once you have edited the URL to your liking, updating the title will cease to overwrite your new URL.
This is a follow up to Speed up heavy Twitter feeds
The original post was quite simply a way for you to get yours or someone elses public Twitter timeline and display it on your own site. Twitter decided to kill off basic authentication for their API preventing simple Ajaxian requests to the API. So here is the solution and it comes in the form of JSONP (cross site scripting request).
Ok found this bug while working on a project that required a scrolling content bar that wound up needing widths defined in the stylesheet greater then 32,767 px.
Some people will immediatly notice the 32,767 as the programatic max value for an ‘Integer’, which is exactly what the problem is. Opera for some reason, and it is completly alone here, as all other browsers even the dreaded Internet Explorer 6, can handle CSS values that exceed this limit. Opera will silently fail, throw no warning about it and ignore all styles that follow non integer numbers in your selector.
There was no way around this I could find to make it work in Opera, simply put.
Any number bigger then 32,767 for a value in CSS when displaying with Opera 10, will be ignored and cause all following styles in that selector to be dropped.
Heres an example.
div #myElement {
position:absolute;
height:500px;
width:50000px;
background:#444;
font-weight:bold;
}
The above code will cause the div ‘myElement’ to have no selectable width, and will never apply the background or font-weight properties!
Ok so hands up if your a fan of Ajax, you can’t see it but I certainly have my hands up as do many of the other developers out there, so what is this post about? Well if you have ever built an Ajax application or website you would know that Ajax breaks the browsers natural navigation, things like the ‘back button’, ‘forward button’, history, favouriting a page or browsing to it via the URL input all become useless because there is no physical URL for those elements to use or save.
Now yes there are some solutions out there for providing Ajaxified links that keep your back buttons working, they are complex and usually written in a specific framework, so if you want to use them well your going to be adding a lot more code then you thought to your web site. Plus this is how Gmail and Facebook do it, you won’t find there code or get any help from them on the topic so I decided to build it myself so everyone could get the benefits of Ajax URL navigation. Below is an example of a simple yet elegant Ajax Pagination system I’ve written to relieve the navigation hicups Ajax causes.
Demo
Speed up JavaScript by making it execute exceedingly fast with these Google certified techniques
Ok everyone’s good friend David Walsh over at davidwalsh.name posted a link to a Google Talks presentation – Javascript and speed from back in 2009 in which they discuss some simple yet amazingly important JavaScript optimisation techniques. Ranging from Dom interaction and Scope , all the way through to Reflow. Now if your not sure what Reflow is I will explain that below, but put simple it is the name given when the browser has to redraw the page because user interaction or JavaScript has changed its geometry.
So here is what I’m going to cover in this post for you optimisation fanatics, with code examples of the good, the bad and the ugly!
- Scope Management
- Data Access
- Loops
- The DOM
Ever wondered where that missing second is in your blog or Web Sites loading time?
Chances are that it is getting eaten up by your feeds or third party API’s like Twitter, Facebook, Google and Flickr. We all love social media, if you don’t then you were probably the school captain throughout your education and don’t posses the intrinsic ability to Tweet, Blog at update your feed from that shiny Iphone at any given time of the day, rain, hail or shine. But for the rest of us, here is a simple solution.
I personally enjoy including Twitter feeds for myself and clients on web sites, it highlights the human side of an at times, not so human interface. But it comes at a cost, around 700 – 800 milliseconds to be precise. So to include a Twitter feed on web-sites I build It would seem that we would have to sacrifice all the hard work done to optimise the web site so we can give it the cool edginess that a twitter feed presents. But what If we still want both! The answer is Ajax, pure and simple. Load your Twitter feeds via ajax onDomReady and insert them into your page when the server is finished fetching them from the Twitterplex.
How you say?
