Neurons to bytes

Интересная штука этот Rhino, или мысли о серверной разработке на Javascript

Давеча посмотрел на исходный код проекта Etherpad, который гугл недавно свернул. Долго искал внутри проекта что-то похожее на скрипты питона или чего либо еще модного, пока до меня не дошло: проект написан на Javascript. Достаточно было открыть любой файл с расширением js.

Как оказалось, проект написан на Rhino. Это такая имплементация javascript’а на Java. Хоть я в жизни ничего и никогда не писал на Java, но носорог меня определенно заинтересовал. Вообще, классная же идея, писать и на стороне сервера и на стороне клиента на одном языке, на Javascript?

По-моему махровому мнению - это круто. Я слышал краем глаза про такой проект, Jaxer, который позволяет использовать Javascript на стороне сервера, но не щупал его.

Нужно будет потом посмотреть, как там обстоят дела на предмет существования фреймворков для разработки на джаваскрипте на сервере. И вообще, какие есть препятствия для серверной разработки на JS. А то что-то не слышно про серверных разработчиков на этом языке.

Update:

Нашел классный проект Nodejs, это веб-сервер, использующий гугловский джаваскриптовый движок V8. Очень интересная разработка, попробую её собрать под nix и попробовать наваять какую-нибудь простую штуку. Наверное, получится пост.

How to work comfortably with layout blocks in Zend Framework

During my research, I found a convenient way to work with html blocks on the site. Almost every site has a number of blocks that should be present on some pages and absent on others. So, you need a flexible tool for managing the blocks.

I will present my vision of how to manage the blocks under Zend Framework.
Read more

Обновление кода к статье “Блоки в Zend Framework”

Я обновил статью Блоки в Zend Framework. Финальная версия и добавил в код дополнение, позволяющие передавать параметры главного контроллера в блок.
Это означает, что когда вы находитесь на странице, к примеру, http://example.com/pages/view/777 (где controller - pages, action - view и id - 777), то идентификатор (777) передастся так же в контроллер блока, который вы загружаете на данной странице, где его можно получить стандартным способом: $this->_request->getParam(’id’).

How does the event bubbling works in Javascript?

Few people knows how events works in javascript. Currently, many people use frameworks, and do not realize how event works, so they are spend much time on simple things.

I’ll tell about a widely known in narrow circles thing such as event bubbling. What I’m talking about?

When we are click on any element on the web page, the event is raised on all the parent nodes of clicked element, until it reaches the document node. This is event bubbling as is.
Let’s see clearly how it works, it’s better to see than tell a thousand words.
Read more

Event bubbling в Javascript - что это такое?

Мало кто знает, как работают события в Javascript. Сейчас же модно юзать фреймворки, вот люди и не задумываются, как оно там работает и зачастую, тратят очень много времени на простые вещи.

Я расскажу про такую широко известную в узких кругах фишку, как event bubbling. Что это вообще такое?

Когда мы кликаем по-какому либо элементу на странице, то событие поднимается по всем родительским узлам кликнутого элемента, пока не дойдет до узла document. Это и есть event bubbling.
Посмотрим наглядно как это работает, ведь лучше увидеть, чем сказать тысячу слов.

Есть HTML:

<div id="dialog">
    I'm a absolutely positioned dialog. So click me!
</div>

Есть CSS:

<style type="text/css">
#dialog {
    padding: 200px;
    position: absolute;
    top: 100px;
    left: 100px;
    border: 1px solid #000;
    background: #ddd;
}
</style>

И, самое главное, есть javascript (JQuery):

<script type="text/javascript">
$(document).ready(function() {
    $('#dialog').click(function(e) {
        alert('Clicked on dialog!');
    })

    $(document).click(function(e) {
        alert('Clicked on document!');
    })
});
</script>

Как видно по коду, у нас навешаны колбэки на клик по диалогу, а так же на клик по документу. Давайте теперь откроем рабочий пример и кликнем по диалогу. Что получилось? А получилось 2 алерта, алерт диалога и алерт документа. Почему так вышло, мы же кликнули только по диалогу? Причина этого именно в event bubbling’е.

Давайте теперь сделаем так, чтобы при клике по диалогу появлялся только алерт этого диалога. Все, что нужно сделать, это отменить event bubbling, чтобы он не поднимался вверх по DOM узлам. Сделать это можно просто добавив e.stopPropagation() в колбэк диалога. Все. Давайте посмотрим второй пример.

Вот так, вроде простая вещь - но знают о ней немногие. Ее знание сильно облегчает разработку на javascript. Как, например, без особых извращений сделать так, чтобы какой-либо элемент на странице скрывался при клике вне этого элемента? Только через event bubbling!

До скорого.

Developing pretty buttons with css best practices

In this article I’ll show you how to make beautiful buttons to use these on your web pages using best practices. These buttons are:

  • Use only one picture for all states
  • Has a 3 states: the state of rest, when you hover the mouse and when clicked.
  • Having less of css code.
  • Can be easily embeded into any place of your web pages.
  • The text on the button is just text, not image.
  • Buttons can be of any width.

As a result, we have got these buttons:

preview

Read more

Делаем красивые кнопки с использованием лучших практик

В этом примере я расскажу, как сделать красивые кнопки для использования их на ваших веб-страницах использованием лучших практик. Эти кнопки будут:

  • Использовать всего лишь одну картинку для всех состояний
  • Поддерживать 3 состояния: состояние покоя, при наведении мыши, при нажатии.
  • Иметь малое количество CSS-кода
  • Легко встраиваться в любые места ваших веб-страниц
  • Текст на кнопке это именно текст, а не картинка.
  • Кнопки могут иметь произвольную ширину.

В итоге, мы получим такие кнопки:

preview

Read more

Получение ответа в виде JSON от Form.Request в Mootools

В Mootools есть отличное решение для отправки форм при помощи AJAX, это Form.Request. Он позволяет очень просто отправить форму без перезагрузки страницы.

После того, как форма отправлена, вы можете получить ответ в виде html, чистого текста или XML, в зависимости от того, какой заголовок Content-type вы отдаете на стороне сервера. Но чаще всего, нужно получить запрос в виде JSON, а в Form.Request это не предусмотрено.

Давайте посмотрим, как все таки получить нужный нам ответ в JSON:

new Form.Request($('login-form'), $('login-form-errors'), {
    resetForm: false, // Не сбрасывать форму после отправки

    // В случае успешного запроса
    onSuccess : function(target, text, xml) {
        // Если сервер что-то возвратил
        if (text.length) {
            // Перекодируем ответ в объект JSON
            var json = JSON.decode(text[0].data);
            ...
        }
    }
}).send();

Смотрите так же документацию по Form.Request

Как получить размеры видимой части окна браузера (viewport size).

А вот так:


function getViewportSize() {
    var size = {};

    if (typeof window.innerWidth != 'undefined') {
        size.width  = window.innerWidth,
        size.height = window.innerHeight
    }
    else if (typeof document.documentElement != 'undefined'
        && typeof document.documentElement.clientWidth !=
        'undefined' && document.documentElement.clientWidth != 0) {
            size.width  = document.documentElement.clientWidth,
            size.height = document.documentElement.clientHeight
    } else {
        size.width  = document.getElementsByTagName('body')[0].clientWidth,
        size.height = document.getElementsByTagName('body')[0].clientHeight
    }

    return size;
}

В Mootools лучше делать так:


window.implement({
    getViewportSize: function() {
        var size = {};

        if (typeof window.innerWidth != 'undefined') {
            size.width  = window.innerWidth,
            size.height = window.innerHeight
        }
        else if (typeof document.documentElement != 'undefined'
            && typeof document.documentElement.clientWidth !=
            'undefined' && document.documentElement.clientWidth != 0) {
                size.width  = document.documentElement.clientWidth,
                size.height = document.documentElement.clientHeight
        } else {
            size.width  = document.getElementsByTagName('body')[0].clientWidth,
            size.height = document.getElementsByTagName('body')[0].clientHeight
        }

        return size;
    }
});

Время - деньги. Как сэкономить деньги при разработке ПО.

Во время разработки любого проекта самое пристальное внимание стоит обращать на качество кода и аспекты документирования. Для меня это аксиома, для многих других нет.

Заказчику как правило все равно, как там оно работает внутри, лишь бы все работало. Такой подход к разработке складывается и у разработчиков проекта. Может показаться, что так это и правильно, главное ведь, чтобы проект работал? В этой статье я хочу рассказать, как можно сэкономить деньги при разработке программного продукта.

Часто временные рамки не позволяют “сделать красиво” в коде проекта, часто сделать это мешает квалификация разработчиков. Но очень важно, чтобы проект был красив не только снаружи, но и изнутри, в архитектуре и коде. Заказчикам часто все равно, а зря - они несут лишние потери денег, и вот почему: Read more