Showing posts with label HTML/CSS. Show all posts
Showing posts with label HTML/CSS. Show all posts

Sunday, August 7, 2011

The Lovely Future Of RightJS

Okay, let's make it official, shall we?

Folks, I'm forking RightJS. And before you start screaming like "omg, we all gonna die in here!", calm down, RightJS ain't no going nowhere. The thing I do is future oriented and quite different from RightJS itself. So RightJS will stay where it is, I'm using all the same servers for the fork, so RightJS will be available as long as people use it. And I certainly will apply patches as much as I can.

Just, there will be no RightJS 3.0, RightJS 3.0 will be called lovely.io


So, What's That All Aboot?

Folks, it's not a secret, that monolithic frameworks are dead. Dead as Java. The future is in small, agile and modular libraries and this is where lovely.io starts.

In RightJS we already had kinda modular structure, you could go to the building page and switch off things that you don't need. The problem with this approach is that it is not suitable for the nova-days CDN hosting, all the permutations of a dozen options were blowing the 15k small library into a huge collection of files that weighted several hundreds megabytes and was almost uncacheable. You could host it by uself, but on CDN even if we host it, the chances that another user has the same configurations are slim and it would be pretty much the same as if you host it on your own domain.

Lovely.IO is not really a framework as you might think of a normal javascript framework. It is more like a CDN based package management system. In lovely.io all the RightJS core got split apart on several packages.

* 'core' - basically RigihtJS Class, Events (former Observer), utility functions + some new stuff
* 'dom' - the dom manipulations from RightJS + new jQuery like collections handler
* 'ajax' - new XHR2 based ajax module
* 'cookie' - the cookie module
* 'lang' - JavaScript core extensions
* 'sugar' - syntax sugar for the 'dom' module, things like "something".something() and so on.

Every package is pretty much independent and you can choose what you want. If all you want is 'dom' you just hook it up and it will be just that. If you also like some JavaScript core extensions, then you hook the 'lang' module. Need to do some ajax? Include the ajax module. It's completely up to you what load and what not.

A generic example would look like that

<html>
<head>
<script src="http://cdn.lovely.io/core.js"></script>
<script type="text/javascript">
Lovely(["dom", "ajax", "fx"], function($, ajax) {
ajax.load("/some.url", {
success: function() {
$('#some-element').html(this.text).highlight();
}
});
});
</script>
</head>
</html>

Basically wha happening in there is that you firstly include the lovely.io core package which just 3k of code and provides the modules handling. After that, you can specify the modules you need and once they're loaded (happens asynchronously) your callback function will be called where you can do whatever is it you need to do.

The example above is a bit simplistic. In reality it also automatically handles all internal dependencies, versions and so on. Check out this example, it's a little game, it uses 'dom' and 'cookies', but it also uses another packages like 'timer' and 'hiscore' to function.

This way we are going to have a rubygems like system where anyone can create and share modules, which can relay and reuse each other. All modules including the standard ones will be more or less equal and independent.


Automatic Packages Hosting

Another thing that I'm solving with lovely.io is automatic packages hosting. No more mangling with CDN, demos, documentation and so on. Once you create a package it will be automatically hosted at cdn.lovely.io which sits on Amazon's CloudFront. And it's not just scripts, all your asset images also will be there, automatically and free.

The basic idea is to completely eliminate the process of modules installation. All your package users will have to do is to specify the package name and version in the dependencies, all the reset will be automatically served from the super fast amazon hosting.

Check the mines game I mentioned above. Take a look into the HTML code of the page. It is fairly complex widget, it has some styles and depends on some images, more of that it is a compound widget, the hiscore block is provided by a completely different package. Yet all you have to do to make it working is this

<script type='text/javascript'>
Lovely(["mines-game-1.0.1"], function(Game) {
new Game().insertTo('#game-container');
});
</script>

And it's not all. The micro-modular structure also will provide a big deal of caching optimization. As all the modules are hosted at the same CDN domain, they all will be cached one by one in the user browsers. And because of that the most frequently used packages will be always in cache.

Say a user opens up a page that uses packages A and B, then he goes to a page that uses A, B and C. All he really downloads on the second page is C.


About The Packages

The cool stuff is not over people. Concentrate, because there is more of awesome news!

The other thing is how you actually make the packages. By default there is no JavaScript. Yup, you've heard me. The actual packages code is written in CoffeeScript and SASS (though you can use JavaScript + CSS if you like). Check for example the source code of the mines game from the above. It is all nice and clean now.

How it works? Quite simple. Lovely.IO is not just a hosting. It also has a CLI tool called `lovely` which is much like ruby-on-rails thingy. You can create a project, you can launch a development server and so on.

Then you write your code in whatever you like, and once you're ready do share it with the public, the tool will compile everything in JavaScript, minify using Ugly and push to the lovely.io server. More of that it will automatically use your README and index.html files as landing and demo pages on the server.

You can structure your project as you like, you can have as many files as you like. You can use CoffeeScript or JavaScript, SASS or CSS, or even Stylus. It all doesn't matter for the end result.

Finally you can do the front-side development in a clean and civilized way.



Other Stuff

There is one thing among this awesomeness though. Lovely.IO is an HTML5 oriented thingy, there is no IE < 9 support, not like I couldn't, just it's thankless job to support those old browsers. I don't wanna do that, you don't wanna do that, and the guy next to you don't wanna do that either.

So, in lovely.io there will be no old IE browsers support in the standard packages, plus there is a good chance that I'll be nuking any other packages that will try to provide the old browsers support explicitly.

Basically, this is where I'd like to draw the line between RightJS and LovelyIO. If you need something well tested with old browsers support, use RightJS, it will be around as long as you want it. But, if you're building a modern HTML5/CSS3 application then you might want to consider LovelyIO, this is where all new stuff will go.


Current Status and Future Plans

At the moment Lovely.IO has all the modules from RightJS core + RubyOnRails support module + I've made a bunch of demo projects over here. It appears to be more or less stable (it's based on RightJS after all), but there is no UI yet.

There is also not much of documentation either. I've just opened the registration for early adopters. So if you wanna play with it, please check the main repository, this is where the STL packages live. It's mostly the good old RightJS with a bit of lean towards more standard jQuery behavior for the $ function.

The next step in the project will be automatic documentation hosting for the packages and then I'll start to port UI modules from RightJS, so if you want me to port something specific from RightJS UI, let me know I'll try to make it a priority.


--
Okay, I think that's the whole introduction for now. I'll give you more when I get to the documentation.

Thursday, March 3, 2011

Super Simple Layout

I'd like to show you a little css-trickery thing I use on pages where you have a super simple content, like a documentation or a demo page, and all you want is just to make it look kinda decent without bothering with additional HTML scaffolding.

Say you have the following HTML page

<html>
<body>
<h1>The Main Title</h1>

<h2>Chapter Title</h2>
<p>
bla bla bla
</p>
.......
<div id="footer">Copyright ...</div>
</body>
</html>

It is super-simple, you've got an H1 for the page head title, you've got a bunch of H2 and P tags with the content and kind of a footer at the end.

And say, you want your page to have some sort of header/footer areas and a bit of paddings on the left and on there right.

Here is how you can do that with pure CSS, without bothering with additional tags

html, body {
margin: 0;
padding: 0;
}
html {
padding-top: 8em;
padding-bottom: 4em;
background: gray; /* header and footer background */
}
body {
padding: 1em 10em;
padding-bottom: 5em;
background: white; /* the main area background */
}
h1 {
position: absolute;
top: -.6em;
font-size: 4em;
color: white;
margin: 0;
padding: 0;
}
div#footer {
position: absolute;
bottom: 1.5em;
color: white;
}

As you can see the trick is very simple, you use top and bottom paddings on the HTML tag to create the header and the footer, and left/right paddings on the BODY tag to create, well left and right paddings. After that just move the header and footer elements in their place with absolute positioning and you're done!

That's the whole trick. An example is over here
Enjoy!

Wednesday, June 2, 2010

Postion fixed in IE6

If you old enough you might remember that wonder of technology we used to admire something like ten years ago, which also known those days as the zombi-browser aka IE6. And if you old enough and unlucky enough to have a need to make something with "position:fixed" under that browser, you might think about the usual approach with hooking up the window.scroll event with some piece of javascript and move the thing manually.

My dear friend, there is a better way to hack the shit out of it. Presenting you the CSS hack which will keep your element fixed at the bottom of the window
div.sweet-div {
position: fixed;
bottom: 0;

/* IE6 position:fixed hack */
_position: absolute;
_bottom: none;
_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop+(document.body.clientHeight-this.clientHeight));
}


Enjoy!

Saturday, August 1, 2009

HTML Code For A Close Button Icon

Some people like use chars and html-codes as a default content for buttons and links. The idea is to put some simple character or code which will look like an icon, and later, if necessary, replace it with a real icon at the css-level. A "close" button is a pretty common case and people usually use the "X" character in there. The problem with it is that it has wrong dimensions and doesn't look like a normal cross on a close button. Luckily there is a better way. There is a standard html code for the mathematical multiplication symbol &times;.

It looks like that

×


As you see it has the correct shape of the close symbol, and it still a normal character which you can paint with css just as you like, use hover effects, etc.

Monday, July 20, 2009

Inline IE hacks with SASS

SASS is a nested css engine written in ruby. It's a pretty powerful and handy tool with lots of features inside, http://sass-lang.com

I'm using it on my current project and find it quite useful. The only thing which was bugging me is that I tend to use inline IE hacks in my css, like that

div.box {
cursor: pointer;
* cursor: hand;
}

And it seems like sass doesn't support such a feature, at least I haven't found it in their documentation.

But in reality it does actually has support of the feature, just it is not documented. It looks like that

#my-block
:cursor pointer
*cursor: pointer

Note, there should be no space betwen '*' sign and the property name

Monday, April 27, 2009

One Image Round Corners

I'd like to share with you some fancy idea how you make easily maintainable css-based round corners on your pages. It's quite a common feature those days and if you don't know how to do that it might be quite a headache.

The Idea

The idea is pretty simple. You create an image which contains all four of your box corners. Usually it's just a small circle or a ring. Something like that.



Then you create an html-tags structure, like this.

<div class="box">
<div class="corners top"><div class="left"></div><div class="right"></div></div>

<div class="data">
Your text goes here
</div>

<div class="corners bottom"><div class="left"></div><div class="right"></div></div>
</div>

It is not necessary to have the middle div.data, but it will provide you move flexibility for css-alterations in future, so you'd better have it in there.

And eventually you write some piece of css-code.

div.box {
padding: 8px;
}
div.box div.corners div {
height: 8px;
width: 8px;
position: relative;
float: left;
margin-top: -8px;
margin-left: -8px;
margin-right: -8px;
background: url('corners_image.gif') no-repeat 0 0;
}
div.box div.bottom div { margin-top: 0; }
div.box div.corners div.right {
float: right;
background-position: 100% 100%;
}
div.box div.top div.right { background-position: 100% 0; }
div.box div.bottom div.left { background-position: 0 100%; }

The stylesheet uses the images shading technique and displays a quoter of the image for each corner, so the pixel sizes in style definition should be equal to a quoter of your corners image. And the box by itself has some nice padding of the same size, so the box was looking visually correct and fit the corners.

This is pretty much it.

Why Do It Like That?

Well. There are several reasons.

a) It gets down the number of server requests to the server. For such tiny images, the actual loading time is the time of request and response to the server. So making it one image instead of four you make your page loading faster and don't bother your server.

b) When you have one image, you don't need to deal with each corner separately, you can unify and compact the styles, and then if you need, you can replace all the corners really easy but replacing just one image. It provides you really good flexibility in terms of css-based design. Take a look in here One Image Corners Example, I've created some demo for you. See how it's easy alterable for various cases. You just change the background color and image url and have another box ready to go.

c) With such approach in most cases your boxes will be still looking consistent if there is some problem with the image loading. User doesn't see unprofessionally looking cases when you have four separated images and one of them was lost or just when they are getting loading one by one. With one image the user will have all the corners at once, and if the image was lost, he will still see appropriate looking box on the page.


PS: If you need transparent backgrounds at the outer angles of the corners, you can have them on the same exact tags structure, but you will need some additional mambo jumbo in your stylesheet, which I didn't intend to cover in the article. But in 99.9% of good modern designs you won't need that anyway.

PPS: This certain css example does not work correctly on IE6, although it is entirely possible to make it working there, just I don't want to spend my free time on that zombie. If you need to support it you just put some additional adjustments into you css file with IE patches.

Sunday, September 21, 2008

Nested Styles with Ruby and FrontCompiler

Nested styles is a feature which some people dream about for quite a long time. The idea is pretty simple and beautiful.

Say you have got some css like that.

div.article div.title {
font-weight: bold;
}
div.article div.title a.author {
padding-left: 12px;
background: url('user.png') no-repeat left;
}
div.article div.text {
border: 1px solid #EEE;
background: #FEF;
}

And now imagine that you could write it with nested constructions like that.

div.article {
div.title {
font-weight: bold;

a.author {
padding-left: 12px;
background: url('user.png') no-repeat left;
}
}
div.text {
border: 1px solid #EEE;
background: #FEF;
}
}

See the difference? How much more simple, clean and DRYish your css could be! Unfortunately current browsers don't support such things. At lest not yet.

So, does anybody want to sit down and wait for the future coming?

No, say 'no', you don't need tell such terrible things, because we have added the feature emulation in the FrontCompiler project. Which is a JavaScript/CSS/HTML processor written in Ruby and which can be used as a Rails plugin.

From now one, each time when you process a css file with FrontCompiler, it will automatically convert your nested styles in the way browsers can understand. So you can easily and safe use the nested styles advantages.

Have fun!