An Introduction to the Agile

Today the number of software projects has grown to an incredible extent. Software products are used practically everywhere and as it seems with the Internet in one hand and the mobile apps markets in other this trend is even more consolidated.

 

Agility in Software Development

The agile methods tend to be more responsive to a highly dynamic software projects.

 

Typically the software build processes are followed by the processes of controlling and managing software projects. In the very beginning of the software sciences these were methodologies that relied mainly on a detailed documentation, precise planning and higher degree of control. As it appears in many kind of projects this approach is simply ineffective. Most of those kind of projects are characterized as very dynamic, with many requirement changes that makes them difficult to predict and control with the traditional methods of software development. Continue reading

Posted in agile | Tagged , , , , , , , , , , , , | Leave a comment

jQuery.unbind()

Binding Problems

jQuery JavaScript Library

jQuery JavaScript Library

Typically in jQuery when you bind an HTML element with some event this event is fired every time the user (client) triggers it. Thus when you’ve a click event attached on a button you can click it as many times as you want. In some rare cases this can be tricky. Let’s imagine the following scenario.

  1. The user clicks on a “vote” button.
  2. Some AJAX calls are performed.
  3. After a successful AJAX call you setup a cookie to deny further votes from this machine.

This seems to be pretty well known scenario, but as the click event is attached to the button there is enough time to click several times on the “vote” button and to vote several times. In this case before the cookie is set the user can vote more than once. Continue reading

Posted in javascript, micro tutorial | Tagged , , , , , , , , , , , , , , , , , , | Leave a comment

Scroll an IFRAME Content to a Predefined Position

IFRAME Source

Usually when you use an IFRAME tag to link an external source the page that’s referenced by the SRC attributes is loaded at the top left corner. This is the default behavior, but sometimes you’d like to show to your users not the entire page from the top left corner, but to show only part of the external page instead.

In most of the cases the reference is external and you don’t have control over the external page. Thus you’ve to scroll the IFRAME content to the desired position. This of course is impossible. Yeah, there are some JavaScript hacks, but they’re all a bad solution, because the scrolling occurs only after the page is loaded.

The Solution

You can wrap the IFRAME into a div and scroll the DIV content using absolute TOP and LEFT CSS properties.

Here’s an example:

#my-div
{
    width    : 400px;
    height   : 200px;
    overflow : hidden;
    position : relative;
}
 
#my-iframe
{
    position : absolute;
    top      : -100px;
    left     : -100px;
    width    : 1280px;
    height   : 1200px;
}

Here you have one DIV with dimensions 400x200px. Now by moving the IFRAME within it you can position it on the right place.

<div id="my-div">
<iframe src="http://www.example.com" id="my-iframe" scrolling="no"></iframe>
</div>

Continue reading

Posted in css, micro tutorial, web development | Tagged , , , , | 7 Comments

How to Collect the Images and Meta Tags from a Webpage with PHP

Meta Tags and the Facebook Example

You’ve definitely seen the “share a link” screen in Facebook. When you paste a link into the box (fig. 1) and press the “Attach” button you’ll get the prompted cite parsed with a title, description and possibly thumb (fig. 2). This functionality is well known in Facebook, but it appears to be well known also in various social services. In fact Linkedin, Reddit, Dzone‘s bookmarklet use it.

Facebook Attach a Link Prompt Screen

fig. 1 - Facebook Attach a Link Prompt Screen

Fist thing to notice is that this information, prompted by Facebook, is the same as the meta tag information. However there is a slight difference.

Facebook Attached Link Screen

fig. 2 - Facebook Attached Link Screen

Facebook prefers for the thumb the image set into the <meta property=”og:image” … />. In the case above this tag appears to be:

<meta property="og:image" content="http://b.vimeocdn.com/ts/572/975/57297584_200.jpg" />

And the image pointed in the SRC attribute is exactly the same as the one prompted by Facebook (fig. 3).

Vimeo Thumb

fig. 3 - Vimeo Thumb

First thing to note is that the real thumb is bigger than the thumb shown in Facebook, so Facebook resizes it and the second thing to note is that there are more meta tags of the og:… format. Continue reading

Posted in micro tutorial, PHP, web development | Tagged , , , , , , , , , , , , , , , , , , | 2 Comments

Adding a Custom Button to TinyMCE – REVISED

Driven by the comment of Afraithe I have to apologize about the yesterday’s post. Here’s a much much simpler, cleaner way do add a custom button to TinyMCE.

<script type="text/javascript" src="<your installation path>/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    theme_advanced_buttons1 : "mybutton,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    plugins : 'inlinepopups',
    setup : function(ed) {
        // Add a custom button
        ed.addButton('mybutton', {
            title : 'My button',
            image : 'img/example.gif',
            onclick : function() {
                // Add you own code to execute something on click
                ed.focus();
                ed.selection.setContent('Hello world!');
            }
        });
    }
});
</script>
 
<form method="post" action="somepage">
        <textarea name="content" style="width:100%">
        </textarea>
</form>

The Problem

There is only one problem – I still cannot find easily the section of the site in TinyMCE. So I’m supposed to click on the comment’s link. This is a pity and perhaps that’s why I couldn’t find it before. Moxiecode should make this section more accessible!

Posted in javascript, micro tutorial | Tagged , , , | 2 Comments