TIPS, TRICKS & BOOKMARKSChanging Display Resets Scroll Offset
In Chrome 5, Safari 4, Opera 10.53 and sometimes Firefox (although I was unable to reproduce it in this test case), changing the visibility of the element by toggling display:none will cause the scroll offset to reset to zero. Toggling visibility:hidden does not seem to trigger the same problem. Scroll the container and then toggle the classes applied. #a { position:relative; ...
Handling Active State for jQuery Animated Backgrounds
Awhile back, I wrote an article on how to animate background images with jQuery to create some nifty effects. One of the most common questions I receive on that article is, "How do I handle active states?" It is time to answer that question. There are two ways in which you can handle the active state: Create a different animation for active elements; or Change the background ima...
Filling in the Gaps
HTML started as a very simple language. By many accounts, it's still very simple. You create some text and you wrap some tags around it. The tags provide a small measure of meaning and allow user agents—aka browsers—to present the content in a meaningful way. In the early days of the web, browser developers quickly added features that helped web developers build more exciting sites ...
Vendors using Competing Prefixes
IE Mobile for Windows Phone 7 has decided to implement support for -webkit-text-size-adjust. They'll also be adding their own duplicate vendor-specific prefix, -ms-text-size-adjust. That's right, Microsoft will be adding support for another vendor's non-standard implementation. Is this good or bad? The general consensus on Twitter would indicate that this is a bad thing but while there is a scena...
Font-face in Chrome
Some days you can tell that @font-face embedding is still trying to find its feet in becoming a stable and viable solution. Chrome 4 and 5 beta currently have a bug that creates some weird behaviour. In the following screenshot, you'll notice that everything looks a little off. Okay, that's an understatement. Image courtesy of Pete Lambert Every character is replaced by an A in a box. The pro...
Finishing an Email
I've commented on this before but I have a protocol that I usually use when emailing someone. I like to finish my emails in a way that acknowledges that you have reached the end of the message. My first email tends to be on the more formal side. [Cheers | Best regards | All the best | Best of luck to you], Jonathan Once the formality is out of the way, I keep it short. The verbosity is...
Hundred Pushups
Have you heard of Hundred Pushups? It's a simple six-week program to build up your strength by slowly increasing the number of pushups you can complete. By the end of six weeks, you should be able to complete 100 and along the way you've gotten a short workout working multiple muscle groups. Since I'm still trying to lose weight, I figured I'd get started on the program (yesterday was my first da...
HTML5 Forms Are Coming
HTML forms have been, to date, quite simplistic. We've had limited options: the text field, the checkbox, the radio button, the textarea and finally the select drop down. Any complex data like phone numbers, email addresses or dates had to be checked by JavaScript. (And you should always and I mean always do server-side validation of the data.) The input element works overtime by being rendered c...
Not Supported
Leave it to PPK to come out with a bold statement like, "CSS vendor prefixes considered harmful". Moreso, It’s time to abolish all vendor prefixes. They’ve become solutions for which there is no problem, and they are actively harming web standards. The problem is that they are necessary. Look at Safari's implementation of border-radius compared to the rest. I still ca...
MIX10: The Type We Want
I recently presented a session at MIX10, The Type We Want, in which I covered where we came from with using custom fonts on the web, where we are now and the hurdles we face moving forward. All of the videos and slides are posted at http://live.visitmix.com/Videos. You'll have to sift through the list to find my session, DS15. The slideshow posted on the MIX10 site is the original PowerPoint fi...
Background Position X and Y
Every now and then I look at using background-position-x and background-position-y but can never seem to find a definitive and up-to-date resource. To save myself the trouble in the future, I'm documenting it here. Positioning via separate X and Y values is a feature that Internet Explorer introduced but never made it into a W3C specification. Any recommendations to add it to the spec have been d...
Review: Logo Design Love
Logo Design Love is a book written by David Airey that covers the whys and hows of brand identity development. The book is broken down into three parts: The importance of brand identity, the process of design and keep the fires burning which looks at how to find motivation and inspiration. It's a light 200 pages with readable type and plenty of examples. David Airey aims this book at the aspiri...
Multiple Backgrounds and CSS Gradients
CSS3 features are making their way into the various browsers and while many are holding off on implementing them, there are those who are venturing ahead and likely running into a world of interesting quirks across the various platforms. Two such features that I have been having the pleasure of enjoying are the use of multiple backgrounds and CSS gradients. I'm covering both features because mult...
Safari and Transparent Borders
I had noticed this little bug on my own site. In the footer, there's a 5px border with the colour set using rgba. In Safari, it's as if the semi-transparent borders overlap each other in the corners and the values are compounded. This creates little squares in the corner of my squares. Not quite what you'd expect. Firefox and Opera (10.5; I didn't test in 10.10) render this as you'd expect, wit...
Onward
It's so easy to wallow in self-pity when things don't go right. As much as 2009 sucked on all levels, it wasn't all bad. As much as I want to sulk, the fact remains that I live a charmed life. Through some karmic luck of the draw, I've got a lot to be thankful for. Personal Projects This past year was a year of simplication and basically had me letting go of all my personal projects—at lea...
Failure
It has been a year marked with a series of failures and while I feel some urge to explain it all, I think it will be better off left unsaid. This post is a stick in the sand to remind me of what has happened. Onward we go, for time gives us no other choice....
I'm Jonathan Snook and I write about web design and development. I speak at conferences and I yammer on about what I'm having for lunch on Twitter. You can keep up to date with everything I blog here via the RSS feed.
Want to learn more?
