tips – Stéphane Caron – No Margin For Errors http://www.no-margin-for-errors.com Thu, 07 May 2015 00:40:40 +0000 en-US hourly 1 https://wordpress.org/?v=4.5.13 JavaScript tip of the day: Extending a String Across Multiple Lines http://www.no-margin-for-errors.com/blog/2010/06/17/javascript-tip-of-the-day-extending-a-string-across-multiple-lines/ http://www.no-margin-for-errors.com/blog/2010/06/17/javascript-tip-of-the-day-extending-a-string-across-multiple-lines/#comments Thu, 17 Jun 2010 15:57:03 +0000 http://www.no-margin-for-errors.com/?p=537

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
I’m working on a project where I need to inject qui a bit of HTML. The examples will feature jQuery but it works with any library as it is simply string handling in javascript.

So the problem we face is that a string of content on a single line is hard to read. Something like that:

$(element).append('<div class="content"><div class="left"></div><div class="right"></div></div>');

It’s really not easy to maintain as you  have to figure out where in the HTML structure you want to add new elements.

So here’s the tip

To keep the HTML cleanly formatted simply add a backslash after every line. This way you escape the new line feed and the javascript thinks everything is on a single line. Here’s an example:

$(element).append(' \
  <div class="content"> \
    <div class="left"> \
    </div> \
    <div class="right"> \
    </div> \
  </div> \
');

It’s a very nice way to keep the HTML structured to make sure the code is easily maintainable.

Hope you liked it 🙂

]]>
http://www.no-margin-for-errors.com/blog/2010/06/17/javascript-tip-of-the-day-extending-a-string-across-multiple-lines/feed/ 13
CSS3: rgba color values! http://www.no-margin-for-errors.com/blog/2010/01/14/css3-rgba-color-values/ http://www.no-margin-for-errors.com/blog/2010/01/14/css3-rgba-color-values/#comments Thu, 14 Jan 2010 16:11:35 +0000 http://www.no-margin-for-errors.com/?p=363

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
RGBA actually stands for (R)ed (G)reen (B)lue (A)lpha and is used to define colors in your CSS. As you must already know, colors are composed of various amounts of red, green and blue to form the final color. In CSS you can now specify the opacity of the desired color, that’s what the alpha channel is for.

What does that mean?

Up until now, the only way we had to add opacity to an element was to use the opacity CSS property. While it’s working totally fine, the opacity is also applied to all the children of that element, so this solution is not really appropriate if you just want a transparent background on a container.

Take a look at the following demo page to see how RGBA and opacity reacts differently.

Another way would be to use transparent PNGs and use them as background images to achieve the desired effect, but then again it’s not the clean way of doing this and PNG support in IE6 is far from being good.

Now you can simply add opacity to the color of your background by defining the background color like so:

#container {
  background: rgba(255,0,0,0.2);
}

The values are the following:

  1. Red color value
  2. Green color value
  3. Blue color value
  4. Alpha value, from 0 (transparent) to 1 (opaque).

Real world usage

As always with CSS3, you need to be careful on how you use it. If opacity on an element is not a major aspect of your design but a nice to have, you can consider RGBA. If your design rely on opacity to look nice, then you’ll have to look at other solutions.

What about degradation?

As you might expect, RGBA is not supported in any current version of Internet Explorer but it’s working as intended in the lastests versions of Chrome, Firefox, Safari, Opera, etc. To ensure at least everyone is able to see a solid background color, you must declare the properties as follow:

#container {
 background: rgb(255,0,0); /* For IE and older browsers */
 background: rgba(255,0,0,0.2);
 }

So when a browser sees the first value, it’ll apply it to the element, if it supports RGBA, it’ll override the first declaration with the second one. This way you’re sure everyone will at least see a solid background.

]]>
http://www.no-margin-for-errors.com/blog/2010/01/14/css3-rgba-color-values/feed/ 11
CSS3 properties: shadows! http://www.no-margin-for-errors.com/blog/2010/01/07/css3-properties-shadows/ http://www.no-margin-for-errors.com/blog/2010/01/07/css3-properties-shadows/#comments Thu, 07 Jan 2010 19:17:41 +0000 http://www.no-margin-for-errors.com/?p=302

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
Here’s a new series of post in which I’ll introduce you to new CSS3 properties. You might already know about them but have you tried them? Or know how to use them? Stay tuned and be ready when we can widely use them or start right now as it degrade gracefully.

In this article, I’ll cover text-shadow and box-shadow. Both are very similar and quite easy to use. To be able to view the example, you need to use a CSS3 compatible browser.

Text-shadow

This property will put a shadow under your text… Used wisely it can give the subtle touch that makes a design stand out. The CSS declaration should be as follow:

h1 {
text-shadow: #999 1px 1px 0px;
}

The four value are:

  1. Color of the shadow. Accepeted values are hex, rgb, rgba. I’ll discuss RGBA in the next article.
  2. X-Coordinate of the shadow relative to the text. A positive value will push it down, a negative value will pull it up.
  3. Y-Coordinate of the shadow relative to the text. A positive value will push it right, a negative value will pull it left.
  4. Blur of the shadow. The higher the value, the more blury the shadow. Don’t make it too high as it can make the text difficult to read. 0px or 1px is usually perfect!

Check out an example here. It should work in Firefox, Opera, Safari, WebKit, Chrome, you get it!

Box-Shadow

This property is very similar to text-shadow. It takes the same values, the only difference is that for now, you need to define it with browser specific prefix. The CSS declaration should be as follow:

#content {
  box-shadow: #000 2px 2px 15px;
  -moz-box-shadow: #000 2px 2px 15px;
  -webkit-box-shadow: #000 2px 2px 15px;
}

You see “-moz” and “-webkit”, those are the browser specific prefixes I was talking about. According to Michael Ventnor, the prefixes are not needed with text-shadow because they were part of CSS2.0 and got dropped in CSS2.1. Box-shadow needs the prefixes because it is part of CSS3.

Once CSS3 support will be final in the browsers the prefixes should be dropped. That’s also why I include a “box-shadow” without any prefix, for future support, this way you ensure your style will still be visible properly once the browsers drop the prefix.

Check out an example here. It should work in Firefox, Safari, WebKit, Chrome, you get it!

Bottom line

You can start using those properties right now, but make sure your design doesn’t rely on them as the properties are not widely supported yet. A browser that doesn’t support them won’t display any shadow, so it degrades gracefully.

It can be nice to start using this right now as it can make your life significantly easier, not having to play with PNGs to have shadows is a big plus and you can save some kilobytes on page sizes.

Just be careful if you start using this on clients website, I personally wouldn’t recommend it as clients often expect websites to be the same across all browsers. If your clients are open enough to let you play with this, then you’re in luck!

]]>
http://www.no-margin-for-errors.com/blog/2010/01/07/css3-properties-shadows/feed/ 7
target=”_blank” XHTML replacement. http://www.no-margin-for-errors.com/blog/2009/12/16/target_blank-xhtml-replacement/ http://www.no-margin-for-errors.com/blog/2009/12/16/target_blank-xhtml-replacement/#comments Wed, 16 Dec 2009 15:13:12 +0000 http://www.no-margin-for-errors.com/?p=288

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
As you must already know, using target=”_blank” to open a page in a new window doesn’t validate in XHTML.

There’s a javascript workaround tho. This example is based on jQuery since it’s always included in my project and it’s my library of choice but it could be easily converted to any library.

The basics

To replace the target=”_blank” you should use the rel attribute. This attribute is used to specify the relationship  between the document that contains the link and the document it refers to. So your links should have the attribute rel=”external” to specify the link is not a link inside your website but to another website. There are plenty of values possible for you rel attributes, I invite you to read about microformats.

Now rel=”external” doesn’t mean target=”_blank”. Adding that attribute won’t open the links in new windows, it’s only a more semantic way of specifying the relationship between pages. Since some of you might not want to open rel=”external” in new windows, browser vendors didn’t implement it as being the same as a target=”_blank”. That when javascript comes into play.

The javascript

$(function(){
	$('a[rel="external"]').attr('target','_blank');
});

Easy isn’t it?

You actually need to either put that in a script of his own or at the bottom of you webpages. $(function(){ }); is actually the short document.ready call in jQuery. Once the document is ready, it’ll traverse through each link and add the attribute target=”_blank” to them. This way the W3C validator doesn’t see them and you page still validates.

Working markup

Here’s a working example with jQuery loaded.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<script src="http://www.google.com/jsapi" type="text/javascript"></script>
		<script type="text/javascript">
			google.load("jquery", "1.3.2");
		</script>

		<script type="text/javascript" charset="utf-8">
			$(function(){
				$('a[rel="external"]').attr('target','_blank');
			});
		</script>
	</head>
	<body>
		<a href="http://google.com" rel="external">Google!</a>
		<a href="http://no-margin-for-errors.com" rel="external">My site!</a>
	</body>
</html>

Your opinion?

What do you think about this technique? I personally stopped caring about my pages not validating when I use target=”_blank”, but I know some people really want to see their page validates whatever the price.

]]>
http://www.no-margin-for-errors.com/blog/2009/12/16/target_blank-xhtml-replacement/feed/ 27
CSS tip: Float an image without text wrapping under it. http://www.no-margin-for-errors.com/blog/2009/12/10/css-tip-float-an-image-without-text-wrapping-under-it/ http://www.no-margin-for-errors.com/blog/2009/12/10/css-tip-float-an-image-without-text-wrapping-under-it/#comments Thu, 10 Dec 2009 21:47:56 +0000 http://www.no-margin-for-errors.com/?p=262

Related Posts

If what you were reading interested you, those might too! Check them out! ]]>
I thought I’d share this little CSS tip that can be useful to some of you.

Let’s say you have this content that contains a thumbnail, you want to float the thumbnail but don’t want the text to wrap under it like below.

thumb_bad

Instead you want the thumbnail to float and the text beside it, in it’s own column, like below.

thumb_good

Well that’s fairly easy to do, your markup should look something like this:

<div class="content">
    <img src="thumbnail.jpg" width="50" height="50" alt="Thumb!" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ligula arcu, luctus nec elementum quis, condimentum a lectus. Suspendisse potenti. Proin neque diam, dictum ac elementum scelerisque, aliquet eget diam....</p>
</div>

Now what you actually do, is that instead of floating the thumbnail, you “position:absolute” it inside the content and add padding to the content so the text displays beside the thumbnail.

You CSS should look something like that:

.content {
	padding: 0 0 0 75px; /* 75px being the width of the thumbnail + how much space you want to put between it and your text */
	position: relative; /* So the thumbnail is relative to this */
}

	.content img {
		left: 0;
		position: absolute;
		top: 0;
	}

This should produce the result below. What actually happen is that the thumbnail which is absolutely positioned don’t take the padding of it’s container into account. That’s why it can be positioned over the padding.
thumb_padding

Working demo

Check out my working demo to see it in a real world example.

Bottom line

So by using this technique you’re always sure your text will never wrap under your thumbnail, that’s one less thing to worry about!

]]>
http://www.no-margin-for-errors.com/blog/2009/12/10/css-tip-float-an-image-without-text-wrapping-under-it/feed/ 33