Category Archives: JavaScript

bInspiration.com – a small and funny application

binspiration.com Hey guys,

I am really proud to present my last project written in CakePHP – bInspiration.com.

What is all about?
bInspiration.com is a web 2.0 service which aims at helping people to get inspired. Visitors are challenged to write a sentence including 2 already given words. The application is funny way to get creative, because “filling the gaps” in a text could give unpredictable and interesting results and that’s why I thought it’s really inspiring. More you can learn from about section of the site.

How long does it take to create this
Well, I’ve decided to create this application somewhere about mid of June and in fact the time for development and design was really short, about week and a half, but due to some hardware and admin problems with my hosting, I’ve delayed the start up.

Later on, I decided to show it to some friends and the responses were not very optimistic. Most of the people didn’t get the idea of the site, so definitely there was something wrong. Apart from this I received some very good ideas for improvements and I decided to add them before going live.

The features

  • Ajax interface – the whole interface is ajaxed and it’s really easy to use it.
  • Multilingual – thanks to CakePHP i18n class, the application automatically detect the browser language preferences and translate whole site. According to this, all user’s created content will be filtered by the selected language, so users can read and write in their preferred /or at least available in the site/ language.
  • No administration – yes that’s true, and it’s feature. As a real Web2.0 application, visitors of the site are the real administrators. They can vote for each sentence in the database and from their decision the content will be promoted or completely removed from the database /two spam votes will remove the sentence from the database/.
  • Follow an author – there is possibility to browse through all authors in a specific language. It’s also possible to follow them by subscribing to their rss feed.
  • View the archive – it’s possible to browse through all sentences in the specific language.
  • Changing the given words on the fly – this was an idea from Daniel – to give possibility to switch the current fixed pair, if the visitor is not inspired by the current one.

Future plans
Well, the plans really depends from the activity of the users. πŸ™‚ But at least I have idea to make some statistical reports such as

  • Most active language
  • Most and worst sentence by language
  • Most active author
  • Most used words
  • Probably a contest πŸ™‚

and many other.

I would love to hear any comments about it.

Fixing Dead Centre approach with jQuery

I was worked on a centred project design of a website. When I met such requirement I’ve always used Dead Centre approach.

Unfortunately I’ve noticed that when the content is larger than the screen the top-left corner is not visible. In that current project the logo of the site was exactly on that place, so it’s really confusing.

I had to solve this issue in order to satisfy the clients requirements. So, I’ve used jQuery to sort this out.

You can see the difference in these 2 examples:

Resize your browser window in order to see the difference.
How it’s working?

First of all there are 2 javascript includes:

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.dimensions.min.js"></script>

After this there is a function which track the size of the screen and the content.

<script type="text/javascript">
        /*Track height and width of the window and the content*/
        function resize(){
            if($(window).height() < $('#content').height()){
                $('#horizon').css('top', '0px');
                $('#content').css('top', '0px');
            } else {
                $('#horizon').css('top', '50%');
                $('#content').css('top', '-'+($('#content').height()/2)+'px');
            }
            if($(window).width() < $('#content').width()){
                $('#content').css('left', ($('#content').width()/2)+'px');
            } else {
                $('#content').css('left', '50%');
            }
        }
       
        //Bind events on resize
        $(document).ready(function(){
            resize();
        })
        $(window).bind("resize", function(){
            resize();
        });
    </script>

The explanation of the code:
I am using jQuery plugin named jQuery Dimensions Plugin 1.1 which extract the proper dimensions of the boxes.
The function checking if the content screen is bigger than the window size, if so it change the CSS in order to fit properly. I guess that you can see the logic easily. So, no more explanations here.

Hope this will help someone.

Adding autocomplete field for search in WordPress

Added a nice Autocomplete field of the search box in that blog /top right/. It’s really nice to have and I really enjoyed doing it.

I followed that article: How to: Create an Ajax-based Auto-completing Search Field for your WordPress Theme, but instead of using suggested js code, I’ve used Script.aculo.us Autocomplete way.

I really enjoyed and I hope you will like it too.

Update: I’ve wrote a plugin for this: nik.chankov.net/autocompleter/. Enjoy!

Building cake application (Part VI)

Saturday (Day 6)

Problem with validation messages while translating
Although my native language is Bulgarian and the requirement from the client was to have this site only in Bulgarian, I’ve preferred to have it in English and to make the translation with the i18n functions of CakePHP. There are 2 reasons to do this:

1. This will give me the possibility to show you the result of all these days of coding and
2. I can reuse some part of the codes the same as I’ve used in this project

So, up to my experience having application in English is never a bad idea. πŸ™‚

You know, that the translating process is not very exciting process, but someone need to do it and because there is no one who can help me with this I’ve start the translation. Anyway. πŸ™

While translating I noticed that the most of the validation messages are not appear of the translation file. I knew this from my past experience, but I needed to find an easy and elegant solution to translate these messages instead of putting them in all views. Putting in the view you need to do this at least 2 times.
Continue reading

Building cake application (Part II)

Tuesday (day 2)

I really hate to start working early in the morning. I’ve always trying to delay this step by reading some news, checking mails, etc. But job need to be done and I had to go downtown, so I’ve started early today.

Building external user interface
I’ve started with the external user interface, incl. login, logout, change passwords, I’ve also decided to move fields Name and E-mail from this page to the profile page etc. Most of the things went quite well, but there were some “problems” with autoRedirect var in the Auth component. Well they weren’t real problems, but wrong redirects while the user switch from profile to another /i.e. admin to regular user/. To avoid this I’ve decided to set that variable to false, and the login redirect will be fixed to a landing page. Anyway, the application is not so big and keeping the last place is not very critical. πŸ™‚
Continue reading

Nice to meet you, Lily

Today I’ve read about Lily. Lily is an open source, browser-based, visual programming environment written in JavaScript. It’s an XPI application which could be executed in Mozilla run-time and of course in FireFox browser.

This application uses JavaScript modules and there are already over 180 ready to be used including UI, Graphical and Sound, Math and various Web services from Google, Yahoo, Amazon, Flickr, Twitter and Digg. There is possibility to write your own modules which give you possibility to expand the functionalities depending from your needs. The applications written with Lily are stored in JSON files, so it is very convenient to exchange applications between users.

The biggest benefit of this application is that you literally connect functional blocks in order to “construct” the application. That’s why it is very intuitive and easy to be understand.

I’ve tried to create a math application and it run quite well. It’s extremely easy to make it, but it was a little bit hart to understand how to run it. Fortunately for every module there is nice and good help with examples written with Lily.

What I really like in this application and strongly recommend you to take a look on it.

11 Things which every developer would do when starting a new project

For every project which is going to be started there are at least 11 things which you need to do before. Here is my list of things which need to be happen before starting any project. During my work experience I’ve started many projects and I think that these are the most important issues which you need to do before start the project.
Continue reading

ClickHeat – track user’s clicks on your web site

Today … is the first day after my trip in Greece. Well it’s hard to be in good mood after a holiday and I couldn’t code as fast as I want for these first days, but this is another story.

I would like to share here some information about a marketing tool which I just saw. It’s called ClickHeat.
What is the main purpose of that tool? People which using already Google Analytics could see many things which are the same, but in fact there are differences which I am going to mention.
Continue reading

Ajax Examples and Demos Collection

Yesterday I found AjaxRain – Great collection with 600+ Ajax or Javascript code snipets and examples.
I like that site from the first look, because everything in it is clean, neat and usefull. I really like sites having visible preview of the functionality as well as direct link to the example – it just show you the code in action. Everyday there are few new snippets/examples so I think this is one of the good sources for Ajax or Javascript expiration.

Ajax Rain Site