jQuery: CSS manipulation

Tweet

In this very short article, we will see how to manipulate CSS properties using jQuery. The main reason why, we should consider jQuery to change applied CSS styles to an object, is because we can do it on the fly, and thus basically change the appearance of an object according to some predefined event.
I assume you know a little about jQuery and how to develop functions on events. We will just see jQuery css method which has two basic usage:
1) retrieve the property of an object;
2) change the property of an object.

What's a property?

The css method has a simple syntax:

$('selector').css('css-property-name');

With the above syntax, we can determine a property for a specific div:

$("#example").html($('#example').css('background-color'));

In the above example, we are retrieving the background-color value of a div with id = "example":

<div id="example" style="width:100px;height:100px;background:blue"></div>

HTML5 & CSS3: compatibility issues

Tweet

In the past weeks, I have posted different articles about HTML5 and CSS3. In almost every one of them, we ended up describing the possible compatibility issues we might face implementing new features and solutions offered by the two standards. As a start, I would like to share some thoughts about the use of HTML5 and CSS3.

a) Do we really need them?  What I am saying is that we do not really want to use new features just because they are cool and they make us great web designers. We need to understand when new stuff really serves our purposes. If it’s only a matter of style – believe me – it is not worth it.
b) Are we ready for possible non standard solutions? In the past when HTML or CSS couldn’t help us with a specific effect, we looked for help with JavaScript. Today it is the same: Modernizr, CSS3 PIE or Selectivzr can really help us in dealing with compatibility issues. That might affect site speed and usability.
c) Are HTML5 and CSS3 the future? Well, this is difficult to answer. It is my personal opinion that they will be. It is decided – someway.
d) Are HTML5 and CSS3 really helping us? Before the (slow) introduction of the new standards, we were used to find alternative solutions (as said just before). HTML5 and CSS3 were conceived to help us in creating astonishing new web site in an easier way. With compatibility issues, we are actually back to square one: we need possibly more workarounds to ensure that – almost – every possible user will be able to use our web site the way it was meant to. That means more work just for possibly not necessary embellishments.

Blogger in draft and Windows Live Writer

Tweet

After the introduction of the new Blogger in draft, I would like to share my thoughts about it. While the new interface is quite interesting and complete there are a few things that are still not working as expected. At the same time there are few information on workarounds, tricks and tips. Personally I’ve contacted Google directly with my feedback and I will see what they will do about it.
What are the problems? Well, I’ve just noticed one thing that makes me quite unhappy: in the old Blogger in draft there was the possibility to directly edit the blog template through Design/Edit HTML. Now it seems that the feature is gone. I believe that’s a limitation I could accept for the moment, however most of the tricks and solution to Blogger issues are related to the direct edit of template. Are those solution now gone for good? We will see…
Another issue is related to post editing. And this is bad, specifically for a blog like The Web Thought. Basically inserting snippets example, I use html tags like:

<div>this is a div</div>

The above box is what I use to highlight code portions. Usually I write the post using the “compose” view. After writing all the post, I check the “HTML” view for small problems. With the new Blogger in draft, every time you switch between the two views, the text formatting gets messed up. In addition to that, if you insert an HTML tag (like a did above), the tag is interpreted. Just to replicate the issue, if you insert <zzz> in the post body and switch to HTM view, you will see the text interpreted as <zzz></zzz> and obviously gone in the “compose” view.
That is a big problem, as I write a lot of code.

Possible solutions

We have to wait and see if Google finds a solution to the issue. I definitely can’t use the post editor that way. It’s an awful waste of time, and frankly  I have to check the text formatting more than once, just to be sure you see the post the way I wanted. And talking about it, I do apologize if the recent post are not properly formatted.
Another viable solution is to use Windows Live Writer.  The Microsoft software lets you compose post in a simple and effective way, it can connect to the blog, it retrieves old posts for editing, and it has everything you might need for post publishing. I actually have written this very article with it. The first impression is positive, but I would like to test it further and see how it goes.

Another solution is to remove the check near the "Make Blogger in Draft my defaul" and get back to  http://blogger.com/home
 
I will keep you posted on new findings.

CSS: @media (are you ready for the new mobile users generation?)

Tweet

As said before, 2011 and 2012 will be the tablets years. Recently we have witnessed the wide spread of new generation devices increasingly used to surf the web. Because of that, web developers have been aware of possible restyling of old web sites needed to satisfy the new mobile users. It's really a matter of determining your audience. Is people visiting your site using mobile devices? Are you really interested in developing a new look for your site just to satisfy that portion of your audience?
That is quite an interesting point. I suspect that before jumping to conclusions, we need to analyse our audience, know who they are, what they want, what they expect from our web site, and how they want to browse the web site. Basically we need to know if we really need to make those changes to the structure of the site and if it's worth working on it, after all.

At-Rules

I don't know if you already have used CSS at-rules. Basically they enclose a set of CSS rules and apply them to a specific item. We have talked about one of them in the @font-face article. The at-rules are quite interesting and become handy when dealing with different medias. The usual scenario was when we needed to create a specific style for printing pages. However the @media rule can be used to style pages according to different situation.

Is the web a good resource for web developers?

Tweet

I know that the question has been raised in the past a lot of times. The number of web sites claiming to help web developers and designers is incredible. When we search for help for example with Google, we are undoubtedly easily misled and the answer we think will solve our initial issue, might end up being completely wrong. In fact, if the provided solution is not working at all, we can immediately understand it was wrong. However, if it works, we are utterly convinced that the wonderful snippet we have found is pure gold. We happily insert it in our web page and we think we have learnt something new. That's not always true.

RSS Feed: How to create custom feeds (part 2)

Tweet

In the previous part we have introduced the basics for the creation of custom RSS feeds. We ended the article creating the xml object and we were ready to write down the feed itself. Please, before going on here, see the first article if you haven't, otherwise you won't understand the following explanations.

The  Feed

First of all, we start creating the head of the feed. Just for explanatory purpose, let me say that a feed needs some basic elements:
1) a version;
2) a title;
3) a ttl (time to live);
4) a language;
5) if you like, a copyright statement;
6) a publishing date.

RSS Feed: How to create custom feeds (part 1)

Tweet

This is the first of a two parts article about creating custom RSS feeds. It might be a complex task in terms of coding, however the logic behind it is not that difficult to understand. I decided to divide it in two, so that I can explain it in depth.

Some assumptions must be made before starting with the creation of the page.
1) We have a database from which we fetch data for the feed. We assume the resulting recordset is called RS (as we always do in our examples).
2) In the root directory of our web site, there's a folder called "rss" where we are going to write the feed (xml file). The folder must have read and write permissions.
3) The page used to create the feed is an asp page with VBScript as programming language.
4) The feed is generated by opening the above asp page. Thus the creation of the feed is not automatic. Anyway, it could be integrated at the end of a data inserting process, so that every time a new item is inserted or updated in the database, the asp page is run (and the related xml file created).