background preloader

DD_belatedPNG: Medicine for your IE6/PNG headache!

DD_belatedPNG: Medicine for your IE6/PNG headache!
2011/4/8: This is no longer an actively maintained project. I apologize, I must move on with current events. This is a Javascript library that sandwiches PNG image support into IE6 without much fuss. You can use PNGs as the SRC of an <IMG/> element or as a background-image property in CSS. If you attempt the latter, you will find that, unlike with vanilla usage of AlphaImageLoader, background-position and background-repeat work as intended. As a bonus, "fixed" elements will respond to a commonly used set of Javascript style assignments, as well as the A:hover pseudo-class. Table of Contents Long story short, this uses Microsoft's implementation of VML instead of Microsoft's AlphaImageLoader filter. The intended implementation is pretty easy: Download a copy of the DD_belatedPNG Javascript file - please do not hotlink mine, I am on a shared host. Due to popular demand, here is some documentation for how to "fix" elements on a pick-and-choose basis. (Based on the normal usage approach)

"I have read your website and it is obviously that your a foggot." From: George LewisDate: Thursday 2 September 2010 6.51pmTo: David ThorneSubject: No Subject I have read your website and it is obviously that your a foggot. From: David ThorneDate: Thursday 2 September 2010 8.07pmTo: George LewisSubject: Re: No Subject Dear George, Thank you for your email. While I have no idea what a foggot is, I will assume it is a term of endearment and appreciate you taking time out from calculating launch trajectories or removing temporal lobe tumors to contact me with such. From: George LewisDate: Thursday 2 September 2010 8.49pmTo: David ThorneSubject: Re: Re: No Subject I didnt ask for a photo fag. and I meant faggot you homo. im not a fan so you can shove your signed photo up your ass. From: David ThorneDate: Thursday 2 September 2010 9.17pmTo: George LewisSubject: Re: Re: Re: No Subject While I do not have a boyfriend, I do have a friend who is homosexual and I once asked him "Do you ever think about having sex with me because you are gay?"

DD_roundies: Code-only rounded HTML boxes 2011/4/8: It is high time I update the documentation here. This plugin got as far as supporting IE8 Release Candidate 1. That was a while ago. I spent some time away from the project before IE8 final was released. Foolishly, I never wrote anything to this effect because I'd hoped to give it a new college try at some point. Turns out I like riding my bicycle during my free time more than maintaining this project. That said, IE9 is supposedly offering itself as an update. This was a neat experiment, but note that I never took the version numbers out of "alpha" mode. If I were truly sore on this subject, I would take this page down; I will leave it up for posterity instead. This is a Javascript library that makes creation of rounded-corner HTML boxes easier, with a focus on Internet Explorer. IE is supported through use of VML. Since Opera doesn't currently (time of writing: 2009-01-01) support border-radius, this library doesn't do anything in Opera. Table of Contents Quick summary:

Anti-Spam - Prémunissez-vous contre les « spammeurs » | bulk unsolicited unwanted junk email Treesaver.js CSS Decorative Gallery Did you like my previous CSS tutorial on how to create gradient text effects? I'm using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. View Demo Gallery Download Demo ZIP What Are The Benefits Of This CSS Trick? Saves Time — You don't have to manually create the decorative template in Photoshop and export the individual image. Basic Concept (see demo) You need to insert an extra <span> tag within the <div> tag, with which we'll apply a background image to create the overlaying effect. Then in the CSS, the key point you have to remember is: specify the div element to position:relative and the span element to position:absolute. IE PNG Hack To make the transparent PNG image work on IE6, I use this wonderful hack. Look and Feel The jQuery Solution (see demo) #1. #1b. #2. #2b. #3. #4. #4b. #5. #5b.

Quick Feedback Form w/ PHP and jQuery Martin Angelov When releasing a web product, there is nothing more beneficial than receiving early feedback from your users. Unfortunately, many websites make it unnecessarily difficult to send your feedback or lack this functionality altogether Today we are making a simple solution to this problem. Powered by jQuery, PHP and the PHPMailer class, this form sends the users’ suggestions directly to your mailbox. The HTML Lets start with the HTML markup. feedback.html <! Inside the body you can see the #feedback div. Inside it reside the five color spans. Lastly is the .section container, which holds the heading, the textarea and the button. Quick Feedback Form w/ PHP & jQuery The CSS Moving on to the styling of the form, we first have to say a couple of words about how the stylesheet is structured. styles.css – Part 1 The first element to be styled is the #feedback div. At the bottom are the CSS rules which define the looks of the textarea. styles.css – Part 2 Sending an AJAX Request The jQuery

Weekend Posts & Videos For jQuery Developers (4/1/2011) Hey guys. It’s been a great week for jQuery and with the 1.5 milestone now out, I wanted to share some useful links, articles and videos to help you get the most of this release (and jQuery in general). Some of the stuff I’ll be personally checking out this weekend is a more in-depth look at deferreds (new to 1.5) as well as some of the great talks from last year’s jQCon which were just released. Please feel free to retweet this post for your colleagues if you find it useful (and have an awesome weekend!). jQuery 1.5 Articles, Resources and Videos Using Deferreds with jQuery 1.5 – a great in-depth article by Eric Hynds with jsFiddle examples: . How can you use jQuery Deferreds? jQuery 1.5’s new jQuery.sub() feature explained in 10 Minutes (jsFiddle demo included) Boris Moore’s jQuery Script loader that uses the new 1.5 dfds features

Video Screencasts #130: First Moments with Grunt There are all these tasks that we need to do as front end developers. Concatenate and compress our files. #127: Basics of JavaScript Templating A template is a chunk of HTML that you need to inject onto the page. #126: Using Modernizr Should Modernizr be part of every modern web project? #124: A Modern Web Designer’s Workflow This is a presentation I gave at conferences in late 2012 and early 2013. It talks … #121: The Right CMS is a Customized One The perfect CMS to suite the needs of any non-trivial content-oriented website does not come out-of-the-box. #119: Let’s Answer Forum Posts! In this screencast we live answer more forums posts with no planning whatsoever. #117: Let’s Attempt To Do a “Pull Request” I’ve never in my life submitted a “Pull Request” on GitHub. #115: Don’t Overthink It Grids Even if the layout of a site is simple as a main content area on the left and a sidebar on the right, that’s a grid. #113: Creating and Using a Custom Icon Font

What To Do When Your Website Goes Down - Smashing Magazine Advertisement Have you ever heard a colleague answer the phone like this: “Good afterno… Yes… What? Completely? An important website has gone down, and sooner or later, heads will turn to the Web development corner of the office, where you are sitting quietly, minding your own business, regretting that you ever mentioned “Linux” on your CV. 1. Don’t take your client’s word for it. If it fails, then visit a robust website, such as or If the website is definitely down, then frown confusedly and keep reading. 2. A website can appear to have gone down mainly for one of the following reasons: A programming error on the website,A DNS problem, or an expired domain,A networking problem,Something on the server has crashed,The whole server has crashed. To see whether it’s a programming error, visit the website and check the status bar at the bottom of your browser. Otherwise, you’ll need to run some commands to determine the cause. C:> ping 3. On Windows: 4.