Blogging Tips

Tweet

It seems that I somehow discovered CSS3 lately. I am aware that recently I wrote a lot about it, but today I feel like sharing the following info.
Have you ever needed to control the text flow in web page?
With the CSS3 hyphens property we can really do interesting things.

An intro
We can use hyphens to automatically hyphenate a justified text, giving it the same flow as we can see on books, magazines and newspapers.

So nothing really new, isn't it? Well, not really. When we normally justify a text, the browser is distributing the text according to the available space. If we stretch or reduce the viewport, we can see the text readjusting itself according to some obscure rule. The only certain thing is that white spaces between words increase or decrease according to the text flow.
With hyphens we can control all that.

Syntax
What we need to do is:
1) set the web page language (lang attribute);
2) choose the needed hyphens value (auto, manual, none).
Not very complicated:

p {
  -webkit-hyphens: manual;
  -moz-hyphens: manual;
  hyphens: manual;
}

With the above code, the text is hyphenated at the end of every paragraph, just in case we have a manual line break. This is the default value. Just to be more clear, as the W3C site states:
"Words are only hyphenated where there are characters inside the word that explicitly suggest hyphenation opportunities.[...] In HTML, ­ represents the soft hyphen character which suggests a hyphenation opportunity. "

If, instead of "manual", we set hyphens to "auto", every word at the end of the paragraph will be hyphenated, using the declared language.
"Words may be broken at appropriate hyphenation points either as determined by hyphenation characters inside the word or as determined automatically by a language-appropriate hyphenation resource. Conditional hyphenation characters inside a word, if present, take priority over automatic resources when determining hyphenation opportunities within the word." [W3C site]

Last, we can set hyphens to "none" just to be sure that no word will be hyphenated.

Compatibility
Just Safari 5.1+ and Firefox 6+ support hyphens. IE10 will probably support it with -ms prefix.
However we can still use hyphenator a js file which will "automatically hyphenate texts on websites". Check the web site (Google Code) if you really need to have a cross-browser compatibility.

Ok, that's all for today. Till next time...

Tweet

Ever needed to create buttons in pure CSS?
The following is a list of the best on-line CSS code generators available.
This time is an easy post, but, as you may understand, I do need a break sometimes.
Enter and enjoy the list!

CSS3 Button Generator (CSS3 Button)

CSS Button Designer

Button Maker (CSS-Tricks)

cssbuttongenerator.com

CSS3 Button Generator (CSS Portal)

CSS Button Generator for your pleasure

CSS3 Button Generator (CSS Drive)

CSS3 Linear Gradient Buttons Generator

CSS Button & Text Field Generator

Tweet

Using HTML5 in order to display a video on a web page is easy and complex at the same time.
You might wonder why I'm saying so and that's why I wrote the following short guide. We will see the syntax, advantages and disadvantages of using just HTML5 to display videos.



The syntax
Let's start from the HTML syntax:

<video width="800px" height="600px" controls="controls">
  <source src="test1.mp4" type="video/mp4">
  <source src="test2.ogg" type="video/ogg">
Your browser does not support the HTML5 video tag.
</video>

Fairly easy, isn't it? Well, maybe not...

First of all, in the video tag we can specify the width and height of our video. We can then determine if we want controls visible or hidden. After that we set the sources: in the above example we used two sources, and the user browser will use the first recognised format.
After the <source> tags, we insert a text to be shown when the browser is not supporting the video tag.
As a side note: it's better to specify the width and height of the video because the browser will reserve the appropriate space during the loading of the page.
There are other specific properties we can use. Apart from "controls", "preload" allow the download of the video immediately while "autoplay" will start the video automatically (pure evil!).

Advantages and disadvantages
As for the benefits of using HTML5 to display videos, well... you know I'm not really a great support of the new standard. Not just for the new tags or because of prejudices, but because of its compatibility.
I've spent lot of words on the subject, so I won't talk about it again. Basically, every browser is behaving differently when dealing with new HTML5 stuff. We, developers, need to consider all those possible fall backs... and that's not really fun!
Anyway, the tag syntax is surely easier than other plugins syntax. HTML5 doesn't need any plugin (free, at last!). We don't need third party web site like Youtube or Vimeo.
Before the video tag, we could insert non-streaming videos, we could use a plugin or use an external web site. Now we need just the browser support... just that?
Well... no. With HTML5 we can't use full screen videos.Video controls are very basic. We can't play DRM videos. There's no adaptive streaming (we can't control the streaming itself in any way).

Video formats and codecs
The supported video formats are three: ogg, mp4 and webM.
The three video formats use:
1) ogg = Theora video codec with Vorbis audio codec;
2) mp4 = H264 video codec and AAC audio codec;
3) webM = VP8 video code and Vorbis audio codec.
I believe you already understood the problem.
Let's try to make it easy.
ogg is supported natively by Chrome, Firefox and Opera while we need to install it on IE and Safari.
mp4 is native on IE and Safari while it is usable on Chrome and Firefox with install from Microsoft. It is not working on Opera.
webM is native on Chrome, Firefox and Opera. It can be used on IE with install and it can't be used on Safari.
Said that, it's quite difficult to determine which codec is best for our web pages. My choice would be to create three video sources and put them all: one of them will work on any supporting browser.


I hope that's enough. Now it's your turn...

Tweet

With ASP we usually connect and retrieve data from a database. We do it almost every day and we use the relative code without really thinking about it. Things are working and we get what we need, however... do we really know what we are doing?
I’m talking about two particular properties: CursorType and LockType.
In my experience, when I first used ASP to open a recordset, I used the two properties without really understanding their significance. But, because I am basically a curious guy, I wanted to understand what those numbers are, why I needed to use them and why I got different results, when changing them.
Let’s see together what are those two properties.

First of all, we need to consider a common snippet used for opening a recordset:

strSql = “SELECT * FROM myTable”
objRs.Open objConn, strSql, 1, 2

The first line sets our SQL query while the second line is what we use to open the recordset (objRs.Open).
The parameters we pass are:
1) objConn: our connection;
2) strSql: the SQL query;
3) 1: the CursorType;
4) 2: the LockType.
As you can see we normally use those two properties.

CursorType
As the word says, CursorType defines the type of cursor for the recordset.
When opening a MS Access table, the cursor is normally positioned on the first row, top-left position. This cursor defines the record and the field where we are, and where we can perform update, delete or insert operations.
In ASP, the use of CursorType is exactly the same: it allows us to navigate through the recordset and to execute operations.
There are 4 cursor types:
1) Forward Only: the default value. It is used when we need to move only forward through the recordset (ADO = adOpenForwardOnly; value = 0).
2) Static: we use it when we need to move forward and backward between records, and it doesn’t reflect changes made by other users (ADO = adOpenStatic; value = 3).
3) Dynamic: it allows us to move forward and backward and it reflects changes made by other users (ADO = adOpenDynamic; value = 2).
4) Keyset: again, it allows us to move forward and backward, it reflects changes made by other users, apart from insert and delete operations (ADO = adOpenKeyset; value = 1).
We can set the CursorType using two methods. Assuming that objRs is the recordset, we can set it with:

objRs.CursorType = 1

or

objRs.CursorType = adOpenKeyset

Otherwise, we can set it directly when opening the recordset (as in the first example):

objRs.Open objConn, strSql, 1

or

objRs.Open objConn, strSql, adOpenKeyset

LockType
It defines the lock type when updating the recordset.
Ok, I know it doesn’t explain much. However... remember the MS Access example above? Imagine your database is used just by one user. In this case there aren’t any problem when updating records, there won’t be any operation conflict.
Imagine now that there are two users working on the same database. What happens if both are working on the same record? Which one of the two recordset operations will be considered valid?
LockType helps us in that matter. When we know different users would operate on a recordset, we can decide what happens, setting 4 types of lock types.
1) Read Only: this is the default value and it allows just to read records (no update, insert or delete). Remember that this is the default value and that it is the less server resources consuming (ADO = adLockReadOnly; value = 1).
2) Pessimistic: it denies access to the record when an edit request is executed. It means that all the other users won’t be able to access the record. It is the most used lock type when updating records (ADO = adLockPessimistic; value = 2).
3) Optimistic: it denies access just when the update request is confirmed. Until that very moment, other users will be able to view and update the same record (ADO = adLockOptimistic; value = 3).
4) Batch Optimistic: it allows to edit more than one record in a batch. The lock is activated only when confirmed (ADO = adLockBatchOptimistic; value = 4).
As seen for CursorType, LockType can be set in a similar way:

objRs.LockType = 2

or

objRs.LockType = adLockPessimistic

As a side note, remember that the two properties used in objRs.Open are first CursorType and then LockType. That means we need to always set the CursorType, if we don’t use the default LockType.

Ok folks. That’s all for today. As usual, let me know what you think…

Tweet

I've recently talked with a friend of mine about jQuery. I soon realised that some common methods are not so easy to understand, especially for beginners.
That's why I decided to write this short post. We are going to see how to hide and show a DOM element. Not very complicated, but that's what beginners usually start to do the first time they use jQuery. Understanding the following tricks, will simplify the whole understanding of jQuery.
Follow me...

Hide an element
Each DOM element in a web page can be manipulated by jQuery. Here we are going to hide the chosen element.
Let's say we have a div with id="element":

<div id="element">We are going to play with this element</div>

Now let's hide the above element:

<script>
$('#element').hide();
</script>

Simple as that.
If we want to completely remove the element we use:

<script>
$('#element').remove();
</script>

The two methods differ in a deep way: the first is just hiding the element, the second will actually remove the element. In the first case, we can always re-use the element while in the second case we can't.
As a side note: the hide method will just make the element disappear. If we prefer, we can always make the element gradually fadeout. To do so we can use the fadeOut() method.

Show a hidden element
After hiding an element, we can always make it reappear. I'm sure you already guessed how...

<script>
$('#element').show();
</script>

Similarly to what I said above, we can always make the element reappear gradually using the fadeIn() method.

Taking the first steps inside jQuery is not that complicated. I suppose that sometimes people are afraid of starting to use a new web tool, just because they think it's difficult or too much complicated.
jQuery is not difficult nor complicated. Starting from the basic can be a good way of understanding something that will really simplify our work a lot.
If you're interested in jQuery, please have a look at my other articles...

Tweet

A few days ago Mozilla has released the new Firefox 16.
There are a few interesting things we should consider in this new release:
1) the incremental garbage collection which improves the browser overall performance;
2) web app support;
3) better CSS3 animations;
4) reader mode for Android devices improves the reading experience;
5) VoiceOver, a text reader for OSX systems;
6) the new developer toolbar.

The last is what we are talking about here: the developer toolbar. Let's see what it can do.

Command line
The new tool is accessible by pressing shift+F2. A grey toolbar will appear at the bottom of the viewport.
What appears immediately to all of us, is some sort of command line. Is it? Yes, it actually is a command line.
At the moment there are some interesting ways of using it. The following is a list of all available commands:
      addon: manages addons 
      break: manages break point and sections
      calllog: commands used to manage functions calls logs
      console: console commands
      cookie: shows and modifies cookies
      dbg: manages the debugger
      edit: changes the page resources
      export: resources export
      firebug: Web Developer Evolved
      help: helps us on available commands, showing options and everything else we need to know on a specific command
      inspect: inspects a node
      pagemod: edit a page
      pref: preferences
      resize: manages the flexible view mode
      restart: restarts Firefox
      screenshot: saves a screenshot of the page
      tilt: show your web page in 3D
It would take a whole set of articles just to explore everything about the above commands. However I suspect you are all going to look what they are actually doing in depth as soon as you have installed Firefox 16.
But there's more...

Other tools
Other switches are available on the right hand side of the Developer Toolbar.
The first is the Web Console which will show us errors and warnings for the viewed page. We already know something about the Web Console because it's similar to the Error Console, accessible from the top right corner of the top toolbar in Firefox (remember those green checks or red badges?).
Analysis allows us to select and inspect elements on a page. Quite useful in order to see how an element is behaving during web development and coding.
The Debugger is exactly what it says. If you already use Firebug, you won't find any difficulties in using the developer toolbar debugger.

Conclusion
I do hope that this new version will improve the browsing experience. I've lately noticed that Firefox is getting too "big" and slow. While the first releases were very fast and light, lately it has really began to suffer from annoying strange behaviours (for example the use of RAM).
However, the introduction of the Developer toolbar is really something we, developer, might value a lot.
I invite you to download and try Firefox 16... and see with your own eyes if this tool will help you and how.

Let me know what you're thinking about it.

Tweet

Do you like CSS3? Do you think it gives you a big help in doing things you've never dreamed of?
Are you aware of what browser is supporting your wonderful new CSS?
Let's see those obscure CSS3 properties and whether we can use them freely or not...

There's a bunch of new properties that are not yet supported by any browser. Get ready because it's a looooong list:

alignment-adjust, alignment-baseline
bookmark-label, bookmark-level, bookmark-target
border-image-outset, border-image-repeat, border-image-slice, border-image-source,border-image-width
box-decoration-break, box-flex-group,box-lines
color-profile
crop
dominant-baseline
drop-initial-after-adjust, drop-initial-after-align, drop-initial-before-adjust,drop-initial-before-align,drop-initial-size,drop-initial-value
fit,fit-position
float-offset
font-stretch
grid-columns,grid-rows
hanging-punctuation
hyphenate-after, hyphenate-before,hyphenate-characters,hyphenate-lines,hyphenate-resource
hyphens
icon
image-orientation, image-resolution
inline-box-align
line-stacking,line-stacking-ruby, line-stacking-shift,line-stacking-strategy
mark,mark-after,mark-before
marks
page,page-policy
rendering-intent
rest,rest-after,rest-before
rotation,rotation-point
ruby-span
size
string-set
target,target-name,target-new,target-position
text-align-last,text-emphasis, text-height, text-outline, text-wrap

Every time I look at the above list I feel a little bit desperate. It's not because the above properties are not yet implemented in modern day browsers. It's not that!
basically what I feel is: "What a waste of time and efforts!"
Most of the above properties are even completely obscure. We need to visit the W3C web site just to understand what they will probably do in future browsers (if any browser will ever introduce them).

Then there are other properties. Some are already fully supported by most browsers (like animation, box-shadow, border-radius etc...). Some are supported just by "some" browsers.
I have already said that, it's a difficult situation...
If you are interested in knowing which are the properties supported by major browsers, please refer to HTM5 & CSS3 support site.
Why did I list all the not-yet-supported properties?
Well, just to make all of us aware about how those great genius are playing around with things...
There's a wide background of unknown coder and programmer whose work is aimed to the full compatibility of new HTML5 and CSS3 stuff. And we must thank them... If we wait for big browsers to be completely CSS3 compatible... well we will probably be retired by then...

Keep on reading and following The web thought... and if you have a minute, share your ideas using the comments section below.

Tweet

What would the world be without colours?
We work with colours every day, especially with CSS. But, do we really know what are all the available colours values types?
Well... following the previous post about measurements values - drums roll - here we go with colours...

In CSS we can use different ways to define a colour value:

• Hexadecimal
• RGB
• RGBA
• HSL
• HSLA
• Names

As you may understand, RGBA is an extension of RGB while HSLA is an extension of HSL.
Let's see them one by one.

These are the most used and they are supported by all major browsers.
We specify the colour using the #RRGGBB pattern, where the RR is red, GG is green and BB is blue.
The three values are hexadecimal integers between 0 and FF.
Examples? #FFFFFF which is white and #000000 which is black. All the other colours in between... ... ... ok, joking... Well I can't list them all...

The RGB is very similar to hexadecimal in principle. It's quite common and it is supported by all major browsers. As the name say, RGB stands for Red, Green and Blue. Each value defines the quantity of the related basic colour.
For the black colour, we use RGB the following way:

rgb(0,0,0)

Instead of integers between 0 to 255 as in the above example, we can use percentage:

rgb(100%,0,0)

While RGB is supported by all major browsers, RGBA is supported by more recent browsers versions.
What's the difference? To the three basic colours (Red, Green and Blue) we can add the alpha channel.
The alpha channel determines the opacity of the colour itself and it can have a value between 0.0 (transparent) and 1.0 (opaque).

Another couple. The principle is the same as the above, however HSL means hue, saturation, and lightness. The three values are completely different: hue is an integer value between 0 and 360, while saturation and lightness are represented by a percentage.
If you use Photoshop these are very basic rules you already know very well. If you don't use Photoshop, you really need to see some kind of image editor to fully comprehend what I'm saying. Just go to any colour palette editor and see what I mean.
Syntax? Here we go:

hsl(50,50%,50%)

The resulting colour will be some sort of light brown...
Again, with HSLA we add the alpha channel to the basic HSL.

This is the easiest way of using colours in CSS: we use their name. 'white' is white, while 'red' is red. Isn't it easy?
The main difference between this method and all the mentioned above is that we have "only" 147 colours names. The 17 basic colours are: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. **Just notice "gray" and "grey"... isn't it crazy?**

Ok folks... I'm done here for today.
Next time I will talk about CSS again, so stay tuned.

Tweet

Have you ever wondered what pc stands for in a CSS file?
Measurment values in CSS can be different and they usually have different use.
It is quite normal to use pixels or percentage and I believe we all consider them the most important. However, when for example we are working on a fluid or responsive layout, we might even need other kind of measurment values.

Let's see them!

The list
Here is the list of all possibile measurement CSS values.

% - Percentage
It is most used when we need to have responsive layouts. Especially in tables and, generally for containers, when we want a fluid layout, we set widths or heights in percentage.

in - inches
cm - centimeters
mm - millimeters
They are not very often used. However if you think about a printable page, they might become very handy.

em
These values are quite tricky. Anyway...
1em is equal to the actual font size. Therefore 2em is twice the actual font size.
Just follow this example: we have an element displayed with font size set to '14pt'. For the same element, '2em' will be '28pt'. Simple as that...

ex
Another tricky one, even if less than ems. 1ex is the x-height of a font. Normally it represent half the size of a font. I wonder when and where we should use it...

pt - points
Personally I don't really like points. In any case... 1pt is 1/72 inch... if anyone is really interested.

pc - picas
Ok, another obscure one. One pica is 12 points... - never used!

px - pixels
That's the one we use most (together with percentage). We all know what a pixel is, don't we? For those who have just left their moon base, a pixel is the smallest dot on a screen. Just put your face really near your monitor... see those small dots? No? Well... you have to believe me, there are small dots there! Every small dot is a pixel.

According to what is our need, we have a really large set of possible measurement values. In my opinion the list is even too long. I don't know your experience on the matter, but personally I have never used most of them. Not that I don't want to... just because I have never needed them.
If you had personal situation where you used for example ex or picas, please do share your ideas.

Well, that's all for today. See you next time...

Tweet

One of the most used functions in ASP is InStr.
In this short article we are going to see how to use it.

The InStr function has the following syntax:

InStr([startOfStr,]stringSearched,search[,compare])

where:
startOfStr is optional and it specifies where the search will begin. By default is set to1 (first character of the string). It is required when compare is used.

stringSearched is the string to be searched. It is required.
search is the string to search inside stringSearched. It is required.
compare is optional and it can be 0 (default) or 1. If 0 (vbBinaryCompare) is used, a binary comparison will be performed, If 1 (vbTextCompare), a textual comparison will be performed. Normally we use the default value (0).

The function returns a value which must be evaluated. Let's see what kind of response we can obtain:

• If stringSearched is "" - InStr returns 0
• If stringSearched is Null - InStr returns Null
• If search is "" - InStr returns startOfStr
• If search is Null - InStr returns Null
• If search is not found - InStr returns 0
• If search is found within stringSearched - InStr returns the position at which search is found
• If startOfStr > Len(stringSearched) - InStr returns 0

It is quite obvious what we can do with InStr. Usually we use it to search a text and see if a specific word is contained inside the text itself. We can use it in order to determine where a specific word is placed inside a long text and, if used together with a loop, we can use it to find where a word is, more than once.

As you can see InStr is an interesting function with many possible use. It depends on what we really need to do, and what is our goal. With a little bit of imagination, we can solve a lot of complicated situations.

If you need more help on it, please use the comments section below... in the meantime happy coding!