www.netsi.dk

"The internet is just a layer on the real world" (don't forget that!)

Category Archives: css

Extend Object with method that handles CSS values in javascript

If you are working with and need to for instance add or subtract a value to a value like “15px” or “3em” this method “()” will come in handy.

Simply add the code somewhere in the top to extend the “Object” object.

 

The method is used as follows:

"10px".getCSSValueAndUnit();

which will return an object:

{ 'value':10, 'unit':'px' }

Simple but very usefull!

 

Object.prototype.getCSSValueAndUnit = function() {
  var oReUnit = new RegExp('[0123456789\.-]', 'ig');
  var sOriginal = this.toString();
  var sUnitRaw = sOriginal.replace(oReUnit, '')
  var sUnit = sUnitRaw.replace(new RegExp(' ', 'ig'), '');
  var vValue = parseFloat(sOriginal.replace(sUnitRaw,''));
  return {'value':vValue, 'unit':sUnit};
}
Share

Speeding up you CSS in Visual Studio using Web Essentials plug-in

Mads Kristensen (@mkristensen) is the name of the person bringing speed and hope for the part of Microsoft Visual Studio. He is adding new life the the rather dead part of Visual Studio. He is doing so through his free for Visual Studio: Web Essentials.

The features

In general Web Essentials makes working with CSS in Visual Studio more nice, adding features like colour and font preview, change of values using Ctrl+Arrows (up=add, down=subtract as you know it from for instance Firebug and Google Chrome), option to base64 encode images and speed typing. I can only recommend this plug-in, and also the fact that Mads listens to you request given to him for instance through twitter makes me a happy user! Well done Mads, and keep up the good job! Smiley

Amoung other features: Embed image as base64 encoded image

Links
Share

Printing HTML pages, make screen and print appear the same.

When using external stylesheets on a webpage you can specify which “media” it should apply to. For instance see these lines:

<link rel="" href="Blueprint/screen." type="text/css" media="screen, projection" />
<link rel="stylesheet" href="Blueprint/.css" type="text/css" media="print" />

As you might allready have guessed the screen.css will be choosen for screen (read: browser) and projection mode. When printing the print.css will be choosen if you print the webpage. So far so good.

Some times you will have a specific page for print, which say will render only a stripped down version of your content and prompt the user with a print dialogue (using a window.print() line of code). But when you see the page in the browser you are in “screen” media, and the style shown will be as defined in the screen.css. You may confuse the user as he gets a screen version ready for print – and printing it wil result in a version based on the print.css. I have made a jQuery based fix for this situation.

The page before and after the fix

The jQuery fix

The fix will disable any external stylesheets related to screen and make the print.css work on media types “all”. It is coded so that it will check for a “#print” added to the URL. So you should simply make the URL of the printversion have a “#print” in it. Here is the fix:

   1:  <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
   2:  <script type="text/javascript">
   3:  /* STH: 2011-07-07 Make any stylesheets target for "print" media active on "all" media types (including screen)
   4:      Also disable any layouts for screen
   5:  */
   6:  jQuery(function() {
   7:    var bPrint = (window.location.toString().indexOf('#print')!=-1);  
   8:    if (bPrint) {
   9:      // The user wants to print this page
  10:      jQuery('link[media*="print"]').attr('media', 'all'); // Enable the print styling for all media types, including screen.
  11:      jQuery('link[media*="screen"]').remove(); // remove any styling related to screen
  12:    }
  13:  })
  14:  </script>

 

The fix above has a link to jQuery, you do not have to include it if you allready have jQuery on your webpage.

Share

Introducing “Xara Designer Pro 7”, all you need to work with graphics!

is the name of a British company which has been living in the shadow of Adobe for many years with its all-in-one graphics application. This version has been around since ARM was a custom chip running a desktop computer called Acorn Risc PC. Perhaps this is a good thing to relate to, as ARM now is properly the most successful chipset around in the world, taking every from Google Cromebooks over Apple iPads, Android “pads”, TV sets and even windows 8 by storm. The same should happen to this graphics application called ! It’s fast, rich featured, easy to use, compatible with other main graphics packages like Adobe Photoshop, it produces SVG, webpages and I could go on! You should at least go and download a free trial from: www.xara.com!

Vector, pixel, , presentation, video, 3D and DTP…

The program has many basic things build into one application, I like that. Everything you create in it is vector based, except of cause if you work with pixel based elements like photos. At my work where I implement websites in CMS systems I use Xara for many types of graphics operations. I might buttons where I get automated scaled versions which also have mouse hovering and selected states. They are vector based, so scaling them up and down is very easy. I can use theme colors which makes it possible to reuse them on other websites. I can add popup layers to them and links. I simply export it, and Xara Designer Pro 7 produces a HTML page in seconds containing exactly what I need in the CMS system.

At a later state when I need to document the use of the website I can create a manual with working buttons inside it, the same buttons as I just used on the website. I can even export the pages to PDF, giving the customer both an offline manual (PDF) and a full featured HTML website with the documentation.

A webpage with some of the enhancements

See an example of the HTML that Xara Designer Pro 7 can generate

I have collected some of the features on two webpages. They of cause have been created in Xara Designer Pro 7!

Some of the new enhancements

Xara Designer Pro 7 has been packed with a lot of enhancements to the way that you use the program. Many of them relate to the program trying to a more “mainstream” Windows 7 application. For instance the tabbed document windows and the fly-out and docking option for the gallery system. Those enhancements are nice to new users but for me not essential, because I know my way around the application with or without such standard windows 7 UI.

Xara Designer Pro 7 offers new paste options allowing you to paste different properties to objects. If you for instance need one object to have same size as another you simply select the first object which is placed where you want to position both object, press Ctll+C. Now a lot of information from that object is on the clipboard and you can select any other to copy various properties from it onto other objects. In this case, the position. Some of the many paste options which Xara Designer Pro 7 now offers are:

  • Paste replacing selection
  • Paste format/attributes. This will apply relevant attributes from object on clipboard to selected object. For instance , shadow or opacity.
  • Paste opacity mask. You can use any object as an opacity mask. This for instance allows you to have Text appear as a mask on a photo. Opacity masks in Xara Designer Pro 7 will mask out the object is placed on – black colors will give 100% masking, and white no masking.
  • Paste position; change the position of the selected object to that of that of the object on the clipboard. If however you have several objects on clipboard it gets a little tricky. I experienced that it just moved the object outside the canvas – not logical.

Another great enhancement is the ability to edit groups in a separate window, allowing you to focus on the elements in the group. You simply double click on the group and a new “inside editing window” is opened. I like that feature.

Some of the existing functions have been arranged differently or made easier/quickly to access. For instance the alignment function can now be accessed directly by right clicking on your mouse. Small changes, but I guess that it all adds to Xara Designer Pro 7 being even faster to use.

New features

Live copies – you can have objects where changes to the properties of each copy will apply to all the live copies of the element. Size, rotation, opacity and other properties however will be local to each copy. An interesting new feature which I for one am looking forward to use.

Magic snap – visual help and snapping when aligning objects allows you to create good looking designs much easier. Take a look at this example:

The aligment lines makes it very easy to align elements

The alignment of the text above was easily done, as Xara Designer Pro 7 showed lines indicating where I could align two objects. This makes a design better in balance. What the illustration also shows is that I add a mouse over effect with a popup layer fading in. Xara Designer Pro 7 can save anything which you produce as webpages and in the HTML you can easily add things like mouse over, links, menus, and popups. Xara Designer Pro 7 has added transition effects and other nice things.

Photo magic erase allows you to easily remove elements of a photo in a way which makes look like the element was never there. This is an example of the pixel related editing of Xara Designer Pro 7. It appears to work like similar features in other pixel based application like for instance Adobe Photoshop, but actually it is not working on the original image and you can work with it as if it was vector based changes.

The girl to the left have been ereased using Photo magic erease

As you can see below the way that Xara Designer Pro 7 created the magic erase effect was in fact to slice out part of the photo and fill it with pixels making the element disappear. I have selected the slice, added a glow shadow (which can be added to any element in Xara Designer Pro 7! and is editable at any time) and applied opacity. You can then see through the sliced element and the diapered part of the original picture is again visible.

Xara Designer Pro 7 actually just adds a sliced vector element on top of the original photo to create the magic erease effect

And a lot more…

Many other things have been added especially to the HTML part of Xara Designer Pro 7. I suggest that you see the videos and press F1 (Yes, windows help – it’s okay to use it!). Locate the “What’s new in Xara Designer Pro 7?” and spend some time reading it and seeing the examples. I simply could not find the time here to mention all of them. But a short list of new features I can offer:

  • More widgets. Facebook, Google maps,

New to Xara Designer Pro? Some advices for you…

If you have not tried previous versions of Xara Designer Pro you have a lot to look forward to! Of cause there will be a learning curve, but just visit some of the many online resources – I have listed some of them below. Actually this is one of the areas where I find that Xara is taking good care of its customers – take this statement for instance:

From e-mail: “Information about Xara Designer Pro 7” which you receive when you have registered your Xara product.

“Don’t miss the intro movies on our website (or click the Movies option in the Help menu). There are over 100 movies covering features and techniques and they are a great place to start learning about Designer Pro.”

Do not hesitate to ask “stupid” questions on the various talkgraphics.com forums – we were all beginners at one time

Open and take a look at all the examples included in the gallery:

Many great examples can be downloaded - be inspired by them!

An example is this extreme drawing, all vectors:

Find this example vector drawing and try to zoom deep (around 28000%) to view what is hiding in the drawing

Remember that any drawing you do can contain pages, layers, objects which can all be exported to various formats, including complete HTML pages, PDF files, Adobe PSD files, SVG. You can publish directly to an FTP site. You have unlimited undo/redo, auto save (backup). The undo/redo history is saved together with your document. Xara is extremely good at packing its files – I have tried to load a JPEG (from Adobe) into Xara Designer Pro and save it, leading to file size much smaller than the original JPEG file!

You also get a lot of “free” fonts and clipart, website templates and ready-to-use elements like buttons and navigation elements. Xara supports many color modes, from HEX to CMYK and Pantone. You can create serious related output including color separation handling. You can easily use Xara Design Pro 7 as a DTP program! The advanced way you can let text flow from textboxes to textboxes and around object is so . And yes it works fine if you export your work into a webpage! Xara produces valid HTML and will not change your text into graphics! Oh and for us website developers: Ctrl+Shift+L will give you instant Lorem Ipsum text I love it!

I know it’s nerded: but build in Lorem Ipsum is a feature well worth mentions:

Ad veniam ad minim aliquip, voluptate cupidatat. Sint ex velit in. Sunt enim pariatur sit non, dolore, ut occaecat consequat non ad non aute ullamco sed aute excepteur. Enim dolore exercitation ex nisi cupidatat culpa.

Navigation bar builder making it very easy to construct navigations bars:

The Navigation Bar tool

Two panorama creating tools – the build simple and the advanced Magix PanoramaStudio 2. Here is a simple example from Aarhus, Denmark. Only 4 images were used.

The Magix PanoramaStudio 2 in action

The Magix PanoramaStudio 2 can even generate an interactive panorama using and HTML. The above view can be seen online here: Aarhus, Denmark

I could go on… But visit the links below to see good tutorials!

Conclusion

With the release of Xara Designer Pro 7 the world’s best one-in-one graphic package have just gotten closer to being perfect! As we all know nothing is perfect, so I can’t call it perfect. There is still room for improvements, but the history tells that Xara is listening to its users, and follow trends in the world surrounding the Xara world. With internet being a very powerful media to communicate and emerging technologies like the CANVAS element of HTML5 and the powerful features of , my guess is that Xara Designer Pro 8 when it comes will be much more focused on bringing content to the new taking into account things like based gradients, round corners, custom fonts and transitions. The current version Xara Designer Pro 7 have put a lot of effort into this, and to Xara Designer Pro 7 super users who understand this application and all it offers like Wizards for internet the sky is the limit.

Every time – actually ever since my first version of Xara Designer called Artworks – I have shown people this application to my friends they have been blown away and impressed by its abilities, features, ease of use and speed. Nothing has changed there in Xara Designer Pro 7 – everything has just gotten even more smart and nice to use!

I think that Xara Designer Pro 7 deserves even more attention, and I would like to end where I started: I hope that Xara Designer Pro 7 like the ARM chip will get the deserved success in the years to come! I am looking forward to seeing the Xara Designer Pro run on an ARM based Windows 8, bringing the old palls together again!

 

Links
Share

Add CSS 3 intellisense to Visual Studio 2010

As is spreading out the editors should also start supporting it with things like validation and intellisence. In it the same thing as it is schema based in its approach. What this means – in short – is that you define rules in a XML based schema, a XSD. XSDs are very flexible but not very userfreindly to compose (unless you use a smart tool like for instance ).

Anyway I googled and found a MSI file which containes a 3 XSD file. The MSI will do most of the job installing the 3 schema, but will ufortuanally install it perfectly. In the Q&A on the site however I found a simpel regedit fix, which helps. I have saved the regex for you so you can simply download it and double click it to make the 3 a choice in Visual Studio when editing .

Downloads

In use

When you runned the MSI and added the new keys to the reged database you may want to restart any running Visual Studio 2010 instances. After restart you will have a new choice in the dropdown box “Cascading Style Sheet Version for validation”:

Select CSS 3 validation and intellisence in Visual Studio 2010

The defined parts of CSS 3 is not complete in this CSS 3 Schema. For instance defining colors in hsla space is considered invalid which is not true for CSS 3.I hope that updates for the Schema made by Mojtaba kaviani will be more complete soon. But great job Mojtaba!

Share

Improvements in Microsoft Visual Studio 2010, from a frontend webdevelopers point of view, part 1: javascript

Sometimes I have wondered just what the h**l they were thinking over at Microsoft: their flagship development tool just didn’t perform and deliver what you would expect from a tool of that caliber. That was before the (VS 2010)! I will try to write about features in VS 2010 which makes me happy as a frontend web developer, hoping that you will gain something from it – and please do comment and share your experiences.

The background: What I missed…

I have during my 15 years career as web developer tried various development tools, and have touched the “backend” development side of web applications also. It seems that many rich development tools focus on the heavier backend development part of web application development with things like , snippets and so on. I have often wondered: Why should it be so difficult and not possible – especially in VS – to automate things, processes which is done many times every day? Rich development tools RDTs should support the “web craftsmen” trying to produce quality work. In real life “real” tools for craftsmen like a carpenter have evolved. Quality tools make the fundament for quality work! Anyway, we might just have got a piece of quality tool in VS 2010!

The new features –

In this part I focus on javascript in VS 2010.

Javascript intellicence

jQuery embedded from local “standard” API javascript file.

It is near perfect now! The intellisense engine in VS 2010 seems to “think” nearly perfect. Say you want to use jQuery. If you include your jQuery API using a local version, you will get basic intellisense – that is objects inside the jQuery API will appear as you start typing. You will get relevant methods shown together with basic information about which parameters you can use. Okay, but it gets better!

Microsoft minimised version of jQuery still has intellisence

jQuery embedded from Microsoft at: http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js
Using the MS CDN to get even a minified version of jQuery, you still get extensive intellisence!image

Note:
After you have added any external script file you can update the javascript intellisense using [Shift]+[Ctrl]+J. For big APIs like jQuery this might take perhaps 20 seconds.

jQuery plug-ins handled as well in intelisence

Extra jQuery plug-ins added will also get intellisense, as expected, but also at the correct place
below you can see that I have added a script reference to the jQuery Cycle plug-in for jQuery. The “cycle” method now exists after I have used a jQuery selector $(‘#test’). The description of the method “cycle” however is not very useful – but that is because that the jquery.cycle.all.min.js file does not contain JavaScript documentation (more about that later).

If you think about it – VS 2010 is quit smart! It scans the cycle and sees that it extends the jQuery API. That is how it can figure out – I guess – that the cycle method fits in as a method on a found elements of the “$” (or jQuery) method. Nice feature!

 

The intellisence works perfect

Dropdown filelist simplified

Automatic dropdown file list when adding code like “script”. Previously you had to click the “Pick URL…” and then point to the file which you wanted to use in your document. Now you simply click on the file, if it is located at the same place as the current document. Nice.

 

”Dropdown filelist simplified

Snippets – finally!!

I have written about snippets in Visual Studio in a previous post: Find Visual Studio Snippets ready for download on my DropBox folder, but it is first in VS 2010 that it is actually possible to execute snippets in HTML mode! (Why, why, why?). Anyway you can now! And VS 2010 comes with a few snippets installed.

Snippet types “Surround with” and “Insert snippet”
If you do not know activate them try the “surround with snippet” by pressing [Ctrl]-K, [Ctrl]-S. By doing that you get the chance to automate things like creating a JavaScript function using just two keyboard clicks and a mouse click. The Insert snippet can be archived using [Ctrl]-K, [Ctrl]-X. And remember: You can always create your own!

Using the surround with snippet

Just discovered that in fact Microsoft has not made it possibel to use snippets within … Why, why, why???

Intellisence will execute your code dynamically to give better suggestions

Say you define a string “effect” and assign it a string value. This will make VS 2010 execute the assignment and then “guess” that your variable is of the type String. So at a late point in your code you try to use the variable, the suggestions given by intellisense will be relevant to that type (string). Look at the example below. To the left a variable “effect” and to the right an “int”, the suggestions are not the same. Smart! and you can do some pretty nice things when your code is dynamically executed – try visiting the JavaScript Intellisense Improvements with VS 2010 – on ScottGu’s Blog and have a look at those examples.

Intelligence sugestions are related to the type of your variable...

Your own intellisence using XML comments!

Now there is no excuse why you do not document your JavaScript code! VS 2010 offers easy documentation using snippets and XML comments! It is so easy, simply press [Ctrl]+K, [Ctrl]+X, choose “XML Comments” and what type of comment you want to insert. After having done and (of cause) filling out the marked fields, your code will be providing intellisense and suggestions when other people use it! !

You can see below a simple function called “myhide”, The 3 lines below the function have been inserted using the above mentioned XML comments snippet. I defined a summary, a return definition and a param description. Voila! My function now has intellisense and build in help – which will without doubt be useful for me and others at a later state. You can make this part quit advanced with references to documentation files, assemblies and more.

Here goes your excuse for not documenting your javascript code anymore! XML Comments in javascript.

 

Various small changes

  • You can zoom the work area as you can in your browser. Just hold down [Ctrl]while rolling the wheel of you mouse up and down. Guess that woud be nice for elderly people like me :-)
  • All these improvements also apply to the free Visual Web Developer 2010 Express!

 

Links


Share
					

		

			
			
		

		

	
				






Using jQuery UI, is it easy?

			
		

			
The  API jQuery is a very powerfull libray which have revolutionised the use of clientside javascript in browsers. Along the side of jQuery exists  a library of strongly customizable widgets. It offers a wide range of "easy-to-implement" widgets for your website. I will try in this post to implement a datepicker and conclude in the end if it is easy!

Read the article and post your comments here on this page.


Share
					

		

			
			
		

		

	
				






Work-arounds for 9 MSIE bugs…

			
		

			
If you implement  on the web, chances are that you have to make som  work-arounds from time to time. The page “9 Most Common IE Bugs and How to Fix Them” is a great resource for avoiding such bugs to mess up your layout.


Here is an example from the website:


The output you’d expect:


Tutorial Image


But what IE actually gives you:


Tutorial Image


This is mainly due to IE6 in quirks mode and below not recognizing the auto value we set to the margin property. Fortunately, this is easily fixed.


Share
					

		

			
			
		

		

	
				






A very usefull CSS framework

			
		

			
image I am in the search of a  framework which will make it more standard to implement designs and add more resusability to the work put in creating  based designs. The issue arose when a collegue of mine – Nickey – started a talk about CSS frameworks.


I started from the top of the 12 mentioned frameworks and until now I have reached number 4 – which is YUI Grids CSS from Yahoo. It is a big thing so I just jumped directly to their online tool to autogenerate CSS for generic layouts. It is called “CSS Grid Builder”, and I must say that my first hand impression is one of respect! It is an impressive piece of work. See my very simple 1st test.


I will be trying out other frameworks, but for sure will also try to use the framework from  in practice!


Share