Gosu is a nice simple 2D games engine for Ruby, which I used to work on this little game called pentix.rb. And I'd like to put in some good words for the folks who maintain the project.
What's particularly cool about Gosu is that it doesn't try to jump over its head and do everything by themselves. Gosu is a very small framework specifically made for 2D games, it will help you make things like windows, handle graphics, fonts, sounds and some basic animations. But it also easily integrates with Chipmunk to handle physics and with ImageMagic/OpenGL modules if you need some seriously looking graphics.
If you think about it, Gosu is a very cool thing, you leave all the rendering and heavy stuff to the native modules and use Ruby for what it's good for, for describing logic, units, interactions and so on. And Gosu does it right, it doesn't force you to inherit it's classes all the time, quite on contrary actually. Gosu itself has just a few basic classes to handle media things, like fonts and images, and for the actual units you can write plain Ruby classes, which certainly makes it much easier to implement, test and maintain.
And one more thing. Gosu is not just a Ruby toy. It also has all the C++ bindings, which kinda makes it a pretty interesting choice. You can use the power of Ruby to prototype and do all the R&D things. And later, if you actually make it to the investors, it will be relatively simple for you to port everything to C++ and make it running anywhere. Yup, iPhone is on the list :)
This is basically it. If you ever wanted to write some simple 2D games, but didn't want to deal with C++ check out Gosu, it's pretty awesome!
UPD: Check out also this simple ruby tutorial they have
Tuesday, March 15, 2011
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
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
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!
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!
Friday, February 18, 2011
If I Would Design A Simple Format
There is an idea I wanted to spit out for quite a while now. It is about simple formats and to keep the short story short, here is a simple spec I cooked up.
Basically it is a mix of RDoc, Markdown and Maruku, plus some stuff I miss in all of them. The main goal in this one is readability mixed with abilities to handle everyday things, like images, tables, API references and stuff. HTML might be allowed as a fallback.
That's all, let me know what you think about it.
Basically it is a mix of RDoc, Markdown and Maruku, plus some stuff I miss in all of them. The main goal in this one is readability mixed with abilities to handle everyday things, like images, tables, API references and stuff. HTML might be allowed as a fallback.
That's all, let me know what you think about it.
= Head 1
== Head 2
=== Head 3
==== Head 4
# Head 1
## Head 2
### Head 3
#### Head 4
= Head 1 #anchor1
## Head 2 #anchor2
*bold*
~italic~
_underline_
-strike through-
`type text`
http://some.url
</some.url>
<http://some.url>
<Some text:/some.url>
some@email.com
<some@email.com>
<Some email:some@email.com>
API Links
{ClassName#instanceMethod}
{ClassName.classMethod}
Defining a default scope
{-ClassName} after that
{#instanceMethod}
{.classMethod}
<img:/some.url>
<swf:/some.url>
<img:123x234:/some.url>
<swf:123x234:/some.url>
<img:Some title text:/some.url>
<swf:Some title text:/some.url>
<img:Some title text:123x234:/some.url>
<swf:Some title text:123x234:/some.url>
Code formatting
Just a genuine piece of code
That is pre formatted
Ruby piece of code
:ruby
this.is_a?(Ruby)
code.which_we do
paint in some do
nice(colors)
end
end
Javascript code
:javascript
this.isA(JavaScript).code();
that.we(Paint).accordingly();
> This is a quote text
> It will be converted to a block-quote
> > This is and internal quote
> > it will be nested into the original one
* List item 1
* List item 2
- List item 1
- List item 2
1. Num list item 1
2. Num list item 2
a. Letter list item 1
b. Letter list item 2
I. Roman number list item 1
II. Roman number list item 2
III. Roman number list item 3
* Mixed list 1
* Mixed list 2
- Mixed List 3
- Mixed List 4
1. Mixed List 5
2. Mixed List 6
a. Mixed List 7
b. Mixed List 8
I. Mixed List 9
II. Mixed List 10
Head | Head | Head
-----|------|-------------------
Cell | Cell | Cell
Cell | Cell | Cell
-----|------|-------------------
Foot | Foot | Foot
Head | Head | Head
| Head | Head |
-----|------|------|------------
Cell | Cell | Cell | Cell
Cell | Cell | Cell
Cell | Cell | Cell | Cell
| Cell | Cell |
-----|-------------|------------
Foot | Foot | Foot
Right | Left | Center |
----->|<-----------|------x------|
1 | 1 | 1 |
11 | 11 | 111 |
111 | 111 | 11111 |
1111 | 1111 | 1111111 |
Sunday, January 9, 2011
RightJS 2.2 RC Public Test
My dear fellas rightjslings (or whatever the hell we are) I've got some good news for our species! I took a bit of a break from RRTE those holidays and packed ourselves the next major update in the RightJS core, which will go by the number 2.2.0. And I would really like you to play with the thing. Bring some joy and magic in the routine, and start the year with the new shiny toys!
Awrighty, now to the business. You can download the thing from over here (NOTE: there are updates for all the plugins as well).
And as for the changes, there are quite a few of them actually, so let's get through them one by one
Native Fx Support
The first thing that RightJS 2.2 brings is the support of native css-transitions in the visual effects engine. There is not much of changes in the actual API, RightJS will automatically figure everything out and use native features when available.
Currently it runs on Safari, Chrome and FF4. Opera also supports them but I have disabled it for Opera by default, because first of all their thing is buggy (doesn't support say font-size and background-position) and secondly our own, javascript based engine works faster than their native feature :)
Anyhow, if you insist to switch it on in Opera or disable in Webkit/FF4, use the new engine option with your effects, it can be either 'javascript' or 'native'
Class and Wrapper merge
The second biggest change is that the Class and Wrapper units were merged to make an uniformed classes structure where the Class unit is the top parent of everything.
The new Wrapper construction won't work anymore, use the standard new Class calls as you do when you define any other class.
Supercalls On Modules
The other outcome of the Class unit update is that now you can call the $super method not only on inherited classes but with injected modules as well. It kinda looks like that
This comes very handy when you need to overload some certain methods without using the actual inheritance. Before, we used to use all sorts of old_method hacks, now it's all nice and civilized.
Builtin Mouseenter/Mouseleave Handling
RightJS 2.2 will come with built in mouseenter/mouseleave events handler. As usual it all handled automagically, just use the 'mouseenter' and 'mouseleave' event names and be happy. Works both ways, directly with elements and via UJS.
Better UJS
Another major update is that now UJS handlers got triggered by nested elements as well, just like with the normal dom-events. Basically it means that if you say have a structure like that
If you attach your UJS listener like that
Then it will get triggered no matter if the user has clicked the div.something element itself or any of its internal elements. No more hacking this stuff around.
Pretty Collections Handling
And one more sweet thing the RightJS 2.2 release will bring. I know you all love the String#on method to handle the UJS features, so I had extended it a bit further. Now you can run basically any Element methods from strings, just like that.
Those basically shortcuts for $$(css_rule).each('method', args); it finds all the elements matching the rule and calls the method on them.
----
There are more fancy things in there, like various performance optimizations, IE8 was kicked out in the olds module, all CSS3 selectors now work everywhere, and so one and so one. I'll describe everything with the actual release.
For now you just have fun with the new sweet features and come back if you have any troubles.
Awrighty, now to the business. You can download the thing from over here (NOTE: there are updates for all the plugins as well).
And as for the changes, there are quite a few of them actually, so let's get through them one by one
Native Fx Support
The first thing that RightJS 2.2 brings is the support of native css-transitions in the visual effects engine. There is not much of changes in the actual API, RightJS will automatically figure everything out and use native features when available.
Currently it runs on Safari, Chrome and FF4. Opera also supports them but I have disabled it for Opera by default, because first of all their thing is buggy (doesn't support say font-size and background-position) and secondly our own, javascript based engine works faster than their native feature :)
Anyhow, if you insist to switch it on in Opera or disable in Webkit/FF4, use the new engine option with your effects, it can be either 'javascript' or 'native'
Class and Wrapper merge
The second biggest change is that the Class and Wrapper units were merged to make an uniformed classes structure where the Class unit is the top parent of everything.
The new Wrapper construction won't work anymore, use the standard new Class calls as you do when you define any other class.
Supercalls On Modules
The other outcome of the Class unit update is that now you can call the $super method not only on inherited classes but with injected modules as well. It kinda looks like that
var Klass = new Class({
method: function() {
return "original";
}
});
Klass.include({
method: function() {
return this.$super() + "+module1";
}
});
Klass.include({
method: function() {
return this.$super() + "+module2";
}
});
new Klass().method(); // -> "original+module1+module2"
This comes very handy when you need to overload some certain methods without using the actual inheritance. Before, we used to use all sorts of old_method hacks, now it's all nice and civilized.
Builtin Mouseenter/Mouseleave Handling
RightJS 2.2 will come with built in mouseenter/mouseleave events handler. As usual it all handled automagically, just use the 'mouseenter' and 'mouseleave' event names and be happy. Works both ways, directly with elements and via UJS.
$('element').onMouseenter('addClass', 'hovered');
$('element').on('mouseleave', 'removeClass', 'hovered');
"div.something".onMouseenter('addClass', 'hovered');
Better UJS
Another major update is that now UJS handlers got triggered by nested elements as well, just like with the normal dom-events. Basically it means that if you say have a structure like that
<div class="something">
Some text in here
<div>some inner element</div>
</div>
If you attach your UJS listener like that
"div.something".onClick('toggleClass', 'clicked');
Then it will get triggered no matter if the user has clicked the div.something element itself or any of its internal elements. No more hacking this stuff around.
Pretty Collections Handling
And one more sweet thing the RightJS 2.2 release will bring. I know you all love the String#on method to handle the UJS features, so I had extended it a bit further. Now you can run basically any Element methods from strings, just like that.
"div.something".addClass('red');
"div.something".removeClass('red');
"div.important".highlight();
"div#some-crap".remove('fade');
....
Those basically shortcuts for $$(css_rule).each('method', args); it finds all the elements matching the rule and calls the method on them.
----
There are more fancy things in there, like various performance optimizations, IE8 was kicked out in the olds module, all CSS3 selectors now work everywhere, and so one and so one. I'll describe everything with the actual release.
For now you just have fun with the new sweet features and come back if you have any troubles.
Wednesday, December 22, 2010
RRTE Public Alpha
Hey people, sorry for being quiet recently, been busy with work and stuff. I don't have a pretty picture for you today, but Santa didn't come up giftless today, not at all :)
I've got a cute little link for you!
I just pushed RRTE alpha to github, so you could have a sneak pick on what's going on.
It's still an alpha, it doesn't work under IE yet and you might stumble upon some bugs here and there, but generally, generally it all shapes up and should give you some basic overview of the thing.
Anyhow, you know the drill. Checkout, enjoy and come back with feedback! :)
I've got a cute little link for you!
I just pushed RRTE alpha to github, so you could have a sneak pick on what's going on.
It's still an alpha, it doesn't work under IE yet and you might stumble upon some bugs here and there, but generally, generally it all shapes up and should give you some basic overview of the thing.
Anyhow, you know the drill. Checkout, enjoy and come back with feedback! :)
Wednesday, December 1, 2010
RRTE Status Update
Hey folks! It's been couple of weeks and some of you started to wonder, where's Nik with his RRTE and the world domination, so here is the status update.
As you can see, we are having some serious progress. Most of the things you see on the picture are already working, but I'm trying to explore some possibilities and features.
What's Wrong With the World?
It seems that the design-mode support in browsers is utterly broken. It's ugly, limited, uncomfortable to use and behaves differently in different browsers. Well, just like the whole JavaScript business :)
There is basically two modes how the design-mode works in browsers, the tags mode and the css-mode, in the first one the browser tries to use tags to style the content, in the other one it tries to use styles. The trouble is that IE supports the tags-mode only and FF supports both, but in any case both of them do that wrong.
You see, in the tag mode say they use obsolete FONT tag to style fonts, but in this case FF doesn't support for example proper selections highlighting, they also for example use STRIKE instead of S tag and there is no way specify it. In the css-mode, the browsers try to use things like style="font-weight:bold" instead of the <B> tag pair, which is quite inflexible if not to say idiotic in terms of CSS. It also incorrectly reacts on all sorts of things, like say it will show the U tool "on" when you put your cursor on a link, and you won't be able to switch it off because it's styled with css.
And so one and so one. There is are lots of small and big fuckups like that, and honestly it is quite a mess.
Time To Fix It!
Being an arrogant idiot, I couldn't just pass by this mess, so now I'm building my own engine, which will do precisely what we need on any browser. Basically there are two sets of tools, one of them allows you to work with the style attribute, the other one allows you to format anything with any tag you want, and, what's more important, with any attribute you need, which means that you can use ids and classes as well.
The formatting setting is not limited to the H1-H6, PRE and ADDRESS tags anymore. You can easily specify say things like that
Etc, etc. The basic plan is to create some sort of a mixed, truly css-oriented mode. We will use SPAN + style attribute for things like custom colors and fonts, but for everything else use normal tags and classes, so that the editor produced a nice and easy to process and support content.
It's a bit tricky, but we will get through it.
Advanced Tools
The other thing which I'm trying to figure out is how small an RTE can be, or how much features can we squeeze in 10k? Advanced OOP features of RightJS are really helpful in this case, because all the inheritance and functionality injection features allow us to create really compact and flexible code. As you can see I already added the color tools, font name and size tools, formatting options and some other things. At the moment all of that weights about 8k of gzipped code (and that includes all the css).
So I'm trying to add more features in the standard package than I originally planed and see where it will lead us. We might drop some of them into the extensions pack later on, or, if everything will go smoothly, we might not need one and all the standard functionality will be available in the basic build, so that we will have just a core and plugins. Or something like that. Will see.
--
Well, this is basically it for the moment.
To be continued...
As you can see, we are having some serious progress. Most of the things you see on the picture are already working, but I'm trying to explore some possibilities and features.
What's Wrong With the World?
It seems that the design-mode support in browsers is utterly broken. It's ugly, limited, uncomfortable to use and behaves differently in different browsers. Well, just like the whole JavaScript business :)
There is basically two modes how the design-mode works in browsers, the tags mode and the css-mode, in the first one the browser tries to use tags to style the content, in the other one it tries to use styles. The trouble is that IE supports the tags-mode only and FF supports both, but in any case both of them do that wrong.
You see, in the tag mode say they use obsolete FONT tag to style fonts, but in this case FF doesn't support for example proper selections highlighting, they also for example use STRIKE instead of S tag and there is no way specify it. In the css-mode, the browsers try to use things like style="font-weight:bold" instead of the <B> tag pair, which is quite inflexible if not to say idiotic in terms of CSS. It also incorrectly reacts on all sorts of things, like say it will show the U tool "on" when you put your cursor on a link, and you won't be able to switch it off because it's styled with css.
And so one and so one. There is are lots of small and big fuckups like that, and honestly it is quite a mess.
Time To Fix It!
Being an arrogant idiot, I couldn't just pass by this mess, so now I'm building my own engine, which will do precisely what we need on any browser. Basically there are two sets of tools, one of them allows you to work with the style attribute, the other one allows you to format anything with any tag you want, and, what's more important, with any attribute you need, which means that you can use ids and classes as well.
The formatting setting is not limited to the H1-H6, PRE and ADDRESS tags anymore. You can easily specify say things like that
Rte.Formats = {
'h2': "Header 2",
'tt': "Typetext",
'blockquote': "Block quote",
'div.blue': "Blue block",
'div.green': "Green block"
};Etc, etc. The basic plan is to create some sort of a mixed, truly css-oriented mode. We will use SPAN + style attribute for things like custom colors and fonts, but for everything else use normal tags and classes, so that the editor produced a nice and easy to process and support content.
It's a bit tricky, but we will get through it.
Advanced Tools
The other thing which I'm trying to figure out is how small an RTE can be, or how much features can we squeeze in 10k? Advanced OOP features of RightJS are really helpful in this case, because all the inheritance and functionality injection features allow us to create really compact and flexible code. As you can see I already added the color tools, font name and size tools, formatting options and some other things. At the moment all of that weights about 8k of gzipped code (and that includes all the css).
So I'm trying to add more features in the standard package than I originally planed and see where it will lead us. We might drop some of them into the extensions pack later on, or, if everything will go smoothly, we might not need one and all the standard functionality will be available in the basic build, so that we will have just a core and plugins. Or something like that. Will see.
--
Well, this is basically it for the moment.
To be continued...
Friday, November 12, 2010
RightJS RTE Concept
In case you were wondering why it was quiet around here for last couple of weeks, I'd like to share some stuff I've been secretly working on and what are the future plans.
Basically we are taking a little pause until Mozilla guys sort their stuff out and release FF4 or at least 3.7, which we need to execute our evil plan for RightJS 2.2.
Meanwhile I've been working on this puppy
Yup, it's a RightJS based RTE that will most definitely take over the world, and so you started to want it for xmas, I'd like to put some words in about what's what and stuff.
Meet RRTE The Frameless
One of the major differences from usual RTEs is that our RTE (which goes under the codename RRTE) does not use any frakking frames. Instead, it uses an inlined DIV with contenteditable="true" property.
If now you're wondering what it gives you, then this is what:
Because it's an inlined div, all the content inside of it will follow all the styles on the page, which means no more headache with transferring and applying your styles to some iframe. If you take a look at the picture, you'll see that the header text inside of the editor has exactly the same font and size as the header on the main page. The blockquote and pre tags are also painted through usual CSS right on the page.
Secondly, because it's just a small inlined piece of page, RRTE works and feels much faster than any IFRAME based editors. It is super fast, practically it feels almost like a plain textarea element.
Thirdly, because all widgets in RightJS UI are plain elements, you will be allowed to easily access and manipulate any content right inside of the editor via standard API.
Modular
The second most important feature of RRTE is that it will be modular. Unlike all the other heavy duty RTEs, our RTE, by default will be mainly social networks oriented. It's main purpose will be to work as a lightweight embeddable RTE for all sorts of things like comments and blog posts where you already have all styles in place and just need some nice and shiny thing instead of textareas.
For this reason the default package will contain the main core/engine and provide basic editing tools which you can see on the picture above. Currently it weights just 4k of gzipped code (including stylesheets) and my intention is to keep it under 10k size.
And for all the advanced functionality, like file-pickers, fonts, tables, etc. we will have a separated package, which will turn the editor in a normal heavy duty RTE.
Extendable
As you can see, my plan for RRTE is to extend it via plugins. I don't have any intention to implement everything in it, instead of that RRTE will have a proper OOP design in best RightJS traditions, so that you could make your own tools and extensions, using classes and inheritance. In case if you're wondering how it's gonna look like, here is an example how the Save button is implemented
RRTE will provide you with basic tools and open API, so I expect it to be pretty civilized and easy to extend.
What and When
Currently I keep all the fun for myself. This thing is not on github yet, basically because I hack and refactor it alot. Some parts are still quite flimsy and as I don't want you to have a wrong impression about it I'm going to keep it locally for the next week or two.
At the moment it appears to me that I'm done on about 40-50%, but as I'm a bit busy those days it is hard to estimate the exact schedule. Judging by my guts I should push something worth of seeing on github in about couple of weeks and probably will have the first release by the end of November/beginning of December.
This is basically it. Enjoy the news!
--
Oh, and one more thing. I could use some help with a default iconset for this widget. Currently I use some free stuff that I found over the internet, but if you can and willing to draw some particularly cool uber-iconset, that would be much appreciated!
Basically we are taking a little pause until Mozilla guys sort their stuff out and release FF4 or at least 3.7, which we need to execute our evil plan for RightJS 2.2.
Meanwhile I've been working on this puppy
Yup, it's a RightJS based RTE that will most definitely take over the world, and so you started to want it for xmas, I'd like to put some words in about what's what and stuff.
Meet RRTE The Frameless
One of the major differences from usual RTEs is that our RTE (which goes under the codename RRTE) does not use any frakking frames. Instead, it uses an inlined DIV with contenteditable="true" property.
If now you're wondering what it gives you, then this is what:
Because it's an inlined div, all the content inside of it will follow all the styles on the page, which means no more headache with transferring and applying your styles to some iframe. If you take a look at the picture, you'll see that the header text inside of the editor has exactly the same font and size as the header on the main page. The blockquote and pre tags are also painted through usual CSS right on the page.
Secondly, because it's just a small inlined piece of page, RRTE works and feels much faster than any IFRAME based editors. It is super fast, practically it feels almost like a plain textarea element.
Thirdly, because all widgets in RightJS UI are plain elements, you will be allowed to easily access and manipulate any content right inside of the editor via standard API.
Modular
The second most important feature of RRTE is that it will be modular. Unlike all the other heavy duty RTEs, our RTE, by default will be mainly social networks oriented. It's main purpose will be to work as a lightweight embeddable RTE for all sorts of things like comments and blog posts where you already have all styles in place and just need some nice and shiny thing instead of textareas.
For this reason the default package will contain the main core/engine and provide basic editing tools which you can see on the picture above. Currently it weights just 4k of gzipped code (including stylesheets) and my intention is to keep it under 10k size.
And for all the advanced functionality, like file-pickers, fonts, tables, etc. we will have a separated package, which will turn the editor in a normal heavy duty RTE.
Extendable
As you can see, my plan for RRTE is to extend it via plugins. I don't have any intention to implement everything in it, instead of that RRTE will have a proper OOP design in best RightJS traditions, so that you could make your own tools and extensions, using classes and inheritance. In case if you're wondering how it's gonna look like, here is an example how the Save button is implemented
Rte.Tool.Save = new Class(Rte.Tool, {
shortcut: 'S',
initialize: function(rte) {
this.$super(rte);
if (!rte.textarea.form()) {
this.disable();
}
},
exec: function() {
if (!this.disabled) {
this.rte.textarea.form().submit();
}
}
});
RRTE will provide you with basic tools and open API, so I expect it to be pretty civilized and easy to extend.
What and When
Currently I keep all the fun for myself. This thing is not on github yet, basically because I hack and refactor it alot. Some parts are still quite flimsy and as I don't want you to have a wrong impression about it I'm going to keep it locally for the next week or two.
At the moment it appears to me that I'm done on about 40-50%, but as I'm a bit busy those days it is hard to estimate the exact schedule. Judging by my guts I should push something worth of seeing on github in about couple of weeks and probably will have the first release by the end of November/beginning of December.
This is basically it. Enjoy the news!
--
Oh, and one more thing. I could use some help with a default iconset for this widget. Currently I use some free stuff that I found over the internet, but if you can and willing to draw some particularly cool uber-iconset, that would be much appreciated!
Subscribe to:
Posts (Atom)