MyFreeWeb in English

float: both;

Creating scalable CSS circles

Everybody loves circles (mostly script.aculo.us). But these circles have their width and height defined in pixels. That sucks!
You thought you can't make the circles without exact sizes in px? You can.
Picture_1
We'll use a little jQuery trick — it will set width == height.

wh = $('.circle').css('height');
$('.circle').css({ width: wh });​

And the CSS:
.circle {
    text-align: center;
    border-radius: 9000em;
    -webkit-border-radius: 9000em;
    -moz-border-radius: 9000em;
    
    font: normal normal bold 4em Helvetica;
    background: black; color: lime;
}​
Test it here.
Ok, we can zoom in — everything will be OK. It will be perfect with different font sizes.

But there's two problems now: changing font sizes on the fly and zooming before opening the page. We'll use the excellent jQEm plugin to solve the first problem. Let's put the trick in a function and call it on the emchange event:

function yaycircles () {
    wh = $('.circle').css('height');
    $('.circle').css({ width: wh });
}
yaycircles();

$('.circle').bind('emchange', function () {
    yaycircles();
});​

It rocks now :) I don't know how to solve the second problem, but I think that no one will zoom before opening the page.

Designing an iPad web application with jQTouch and Invisible CSS

If you know jQuery and iPhone, you must know jQTouch. It's a very awesome plugin for iPhone web apps. It supports animation, geolocation, swipes... well, everything. And these apps (made with jQT) aren't limited to iPhone — I can use them on my Windows Mobile phone with Opera 10 :)

So imagine that we need a to-do app. But first you must know the difference between iPhone and iPad applications.

iPhone ones can display only one screen — list of items or one of these items.

iPad ones can display both at the same time. Just because of the biiiiig screen! (we're focusing on landscape mode right now)

Let's design this app. Just one screen with no functionality — I said «design».

oooooooooooooooo

<!DOCTYPE html>
<html>
<head>
  <title>iPad To-do</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <link rel="stylesheet" href="http://krosswordr.ru/site_media/i/jqtouch/jqtouch.min.css" /> 
  <link rel="stylesheet" href="http://krosswordr.ru/site_media/i/themes/apple/theme.min.css" /> 
</head>
<body>
  <div id="main" class="current">
    <div class="toolbar"><h1>iPad To-do</h1></div>
    <ul class="rounded">
      <li class="arrow">Inbox</li>
      <li class="arrow">Today</li>
      <li class="arrow">Tomorrow</li>
      <li class="arrow">Scheduled</li>
      <li class="arrow">All tasks</li>
    </ul>
  </div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://krosswordr.ru/site_media/i/jqtouch/jqtouch.min.js"></script>
<script type="text/javascript">
  $(window).load(function(){
  $.jQTouch();
  });
</script> 
</body>
</html>

Well, it was easy. If you want to make an app for iPhone, you should add another screen now. But we want it for the iPad, right? My latest creation, Invisible CSS Framework comes right there. We'll make two columns instead.

this code! fork it!

That's right. It's awesome! Now it's your job to add functionality and make a better design ;) And follow me on Twitter.

The Zen of JS

  • Don't be mad about reusable pluggable code, but don't repeat yourself.
  • Optimize your code, but keep it readable.
  • Use only one JS framework. (I recommend jQuery)
  • Embed this framework right from Google's CDN.
  • Think before using fancy JS navigation.
  • Minify all the scripts and compile them into one file automatically with tools like django-assets.
  • Put your <script> tags in the bottom of page's <body>.

jQuery rounded corners and gradients

Ooh.. Looks like I've really created my first jQuery plugin =)

It's called JACG: Just Another Corners&Gradients, and it just works.

As simple as: $('#mycoolblock').jacg({'radius': '1em', 'start': '#ffffff', 'end': '#321123'});

It tries to be as native as possible (for example, using SVG corners and gradient on Opera <= 10.10, CSS corners + SVG gradient on 10.50. Using CSS corners and image gradients on Firefox <= 3.5, CSS corners and gradients on 3.6). The code was derived from my private projects' code. It was used in two apps, so I decided to make a plugin insteadof copying & pasting.

There's a Launchpad project (branches, bugs, questions, blueprints) and a jQuery plugin page for it. You can download the release candidate from the page (and rate the plugin!) or get it via Bazaar, being on the bleeding edge: bzr branch lp:jacg