Quickie: Fading in a newly created element using CSS

Update: I got an email from James at VIDesignz who found another solution to this problem using the :empty selector. I added it at the end of the article.

As part of our JSFoo workshop today I was asked to look into an issue a team had that you can not apply a CSS transition to a newly created element when you change the CSS settings in JavaScript. As I was dealing with professionals, they created a simple JSFiddle to show the problem:

As you see just changing the property (in this case the opacity) is not enough to have a transition. There are a few solutions to this shown in the Fiddle, too, like forcing a reflow, which of course could be a terrible idea.

I played with this and found the solution to be to not change the properties in JavaScript (which is kind of dirty anyways) but leave it all to CSS instead. The biggest part of the solution is not to use a transition but an animation instead and trigger it by applying a class to the newly created element right after adding it to the DOM:

Update: As mentioned by Kyle Simpson on Twitter, there is a way to do the same with a transition, but you need to wrap the creation and applying the class into requestAnimationFrame calls which in turn means some polyfilling:

Update2 You can also use the :empty selector in CSS to achieve the same when you add the new element as a child:

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Quickie: on Google Web Designer

Disclaimer: I work for Mozilla, these are my views, yadda yadda.

Today Google released the Google Web Designer (beta), a WYSIWYG editor to create HTML5 ads for Google AdSense.
Google Web Designer

The designer is an installable app for Mac or PC but seems to be an HTML app under the hood. The interface is very familiar to people who use Adobe’s tools to create ads in the past (yeah, the F(lash) word) and seems to be a directly catered to AdSense alternative to Adobe’s Edge suite.

Of course, when there is a new editor out, shenanigans are afoot really quickly and David Matthams scored the Twitter goal with his Google Web Designer creation of outstanding beauty (yes, this was sarcasm, yes, David’s creation is a joke).

Here’s the thing though: I do applaud Google for what they’ve done here. First of all, the tool creates CSS animated ads – not JavaScript driven ones and despite a few hitches (div class=”gwd-div-s33n editable editable editable editable editable editable gwd-gen-8p5fgwdanimation gwd-div-ydjn gwd-gen-8p5fgwdanimation-gen-animation0keyframe” being an interesting one) the code is clean, supports all the browser prefixes and a non-prefixed fallback and is editable by a machine and readable by a human.

The latter is a very important bit: getting on our high horse and trying to quarrel with the semantics of generated code like this is futile. These are ads. They are clickable videos, and their main task is to look pretty and get people to buy stuff whilst working in all environments. And this code achieves that goal quite well.

HTML5 needs tools, there is no question about it. And whoever had to work with ad providers knows that a lot of ads cause havoc with your memory consumption and page performance. This tool, at least, does not do that and uses Google’s fixation on performance.

So before we snigger at “the return of Dreamweaver or Flash’s fallback output”, let’s take a moment and remember that a lot of content out there on the web that pays our wages and bills is built by people who have no clue about HTML. And we are arrogant enough not to ever touch the projects they get paid to create.

So, I for one, am happy about more tools that are having a good start and hope they’ll go far. In this instance especially, I wouldn’t be surprised if that will be a part of the AdSense site sooner or later and I am extremely happy that it is not a Chrome App that does not work with other browsers, but a tool that people can use.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Quickie: A scriptless, imageless, no-third party code Twitter share button for WordPress

Pestered by my colleague Jason Weathersby (“you should have a share button on your blog, I don’t want to copy and paste the title and the URL”) I just added a “share on Twitter” button at the end of all my posts here on the blog. I looked at a few plugins and the official buttons and was not impressed as they all meant a lot of external JS and CSS and HTTP requests. That is not needed. So here is a Twitter Share button without any extra resources from the outside.

JS Bin

It is simple enough:

  • The structure of a “share on Twitter” URL is http://twitter.com/share?url={url to share}&text={text to share}&via={twitter name}
  • In WordPress you get the title of the current post in PHP with the_title() and the permalink of the post with the_permalink()
  • Put them together and you are done:
<p class="tweetthis">
  <a href="http://twitter.com/share
           ?url=<?php the_permalink();?>
           &text=<?php the_title();?>
           &via={your twitter name}" target="_blank">
    share on twitter

Add some styling and we’re in the business. Want to add more sharing buttons without JS? Toby Osbourne has a good post on more URL structures of social sites.

View full post on Christian Heilmann

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)