Hello everybody, I want to share a little technique with you that I used at a school project this week, the CSS3 transition feature.

Check out demo

Tested in:

• Firefox 4 beta
• Safari 5
• Chrome 6 & 7

The good thing about this technique is that the text is invisible, but rendered until mouse-overed, so search engines will read it. Problematic about this is that you can’t overwrite the opacity of a parent element. That means that you can’t have fully visible text in a <p> tag for example. The child elements will have the same opacity.

Code snippets:

HTML file:

<div class="box">
    <img src="pics/sunny_day.jpg">
    	<div class="box_text">
        <h2>oh sunny day</h2>
        	<p>
           	Description text
            </p>
        </div>
	</div>

CSS file:

.box {
	float: left; /* free space for content on the right of the element */
	margin: 5px;
	height: 333px;
	width: 500px;
	border: 5px solid white;
}

.box_text {
	position: relative;
	top:-341px; /* a little dirty workaround for this case, can surely be done better */
	left: -5px; /* a little dirty workaround for this case, can surely be done better */
	height: 333px;
	width: 500px;
	padding: 5px; /* inner distance to content */
	font-size: 1.1em;
	background: white;
	overflow: hidden; /* If text to big, don't render, don't create scrollbar */
	opacity: 0; /* make invisible */
	-moz-transition: opacity 1s linear; /* Transition for Mozilla Firefox */
	-o-transition: opacity 1s linear; /* Transition for Opera */
	-webkit-transition: opacity s linear; /* Transition for Webkit (Chrome, Safari) */
}
.box_text:hover {
opacity: 1; /* how visible the object is going to become on hover, values like 0.3 or 0.75 are available */
.box_text:hover {	opacity: 1; /* how visible the object is going to become on hover, values like 0.3 or 0.75 are available */

If you try off this feature, please show your results or ask if there is something you want to know Thanks for reading!

What I’ve learned about homework in Integration is, that I really should keep stuff that I already have done and document it! I just finished an exercise about basic html forms. It was about alignment, the semantics of forms and how to style forms with html and css. My file may act a little as a reference because I have included the common form elements in their correct structure, like usual fields, password fields, radio buttons, checkboxes and drop down menu.

While looking around on the web a little, I have some good ideas for future forms I find mine really boring now.

• Show basic html forms demo



(If you don’t see something like this after clicking the image, please update your browser)

As I’ve mentioned I want to learn more JavaScript. Today I’ve played around a little with some chapters of JavaScript lessons and CSS3. What you see above is generated without any graphics. Just with JavaScript and CSS3. The gradient feature in CSS3 is really a charm. If you don’t want to get a headache over coding the gradients yourself, there are some generators for it around, like http://gradients.glrzad.com/.

See the JavaScript Demo here (or click the image).

Code for Clock:

<script type="text/javascript">
function clock(){
var now =  new Date();
var hour = now.getHours();
var minutes = now.getMinutes();
minutes = (minutes <; 10 ? "0" : "") + minutes;
hour = (hour <; 10 ? "0" : "") + hour;
var time = hour + ':' + minutes;
document.getElementById('block').innerHTML = time;
setTimeout('clock()','1000');
}
clock();
</script>

Code for background gradient (both for Webkit and Mozilla):

background: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.5, rgb(0,0,0)),
 color-stop(0.98, rgb(77,77,77))
);
background: -moz-linear-gradient(
 center bottom,
 rgb(0,0,0) 50%,
 rgb(77,77,77) 98%
);
}

Code for rounded corners:

border-top-left-radius: 50px 80px;
border-top-right-radius: 50px 80px;
border-bottom-left-radius: 50px 80px;
border-bottom-right-radius: 50px 80px;

The full source code, as always, is available through CTRL+U ;)

At work, I’ve been more than once exposed to older web sites that had to be changed. Problematic about this was, that I would have to edit about 30 html files to change an email address or change a part of the menu that was stored on every single html page. As I thought, that this was far too annoaying, I decided to write a script for it.

The stream editor (sed) that is pretty much standard on basically every distribution and a core element offers the search and replace function, but I will stop to annoy you and just give you the script:

#!/bin/bash
# a little help by Jonathan M. Hethey
# use:
# 1. put in directory with files to edit
# 2. change variables replace and with
# declare the variable you want to have replaced
replace="old_pic.png"
# and the string you want to replace it with
with="new_pic.png"
# the script will do it on all files with a certain file suffix, .html in this case
for filename in *.html
# loop it for all files found with .html
do
# search and replace it
sed -i "s/$replace/$with/g" $filename
# echo all files processed, this gives you information which files were worked on (probably all .html files, because sed will read all, but only work on the ones where there is something to be replaced.
echo $filename
# end the loop
done;

A little struggle was to get the variables (I only added for you, my readers) to work. It’s all about using ” instead of ‘ because bash does not interpret variables inside ‘.
Download: replacer.sh

There are, once again, many interesting projects for the summer of code. Trends for this year are JavaScript, Ajax, browsers (Chromium, Mozilla has an entry too), some CMS systems and some cool Linux or platform independent projects like GIMP, Inkscape and blender.

If you want to participate, from my quick peek over the list the main languages that are requested are C, C++, JavaScript and PHP, but also python, ruby, bash, assembler, perl, qt and many other developers are welcome in many projects. I even spotted some Lua and erlang requests. Overall there is more than only writing code to it, smart heads for artificial intelligence and more are welcome too.

Basically it’s no wonder that Chromium is on the list, Google’s Chrome is based on the same code and every upstream is for their benefit. Mozilla is one of Google’s big partners and paid to have Google as the standard search engine in their popular browser Firefox. Some would even say, that the Mozilla foundation is practically depending on Google financially.  Another project that fits the category is Google caja, which works as a framework for secure internet applications.

Another project I literally stumbled upon is Haiku. Haiku aims to be a BeOS like operating system in looks and unity of user interface and software. The goal is to keep simplicity as far as possible. Seven students are in for this years summer of code on this alternative operating system.

If you ask yourself what else Google is and does, I’d recommend you visit the blog of a dear friend of mine, which offers a little more suspicious view on worlds most used search engine: blog.thinking-aloud.eu.