Magento Sucks

Some might think that I want some attention, or have become a grumpy old man. Considering my birthday is tomorrow, turning 36 might be as close to a grumpy old man as I can get.

I want to make some things clear. I have nothing against people using these awesome tools coming out every six months, only to be used for a short period of time. I just want to share my experiences in the 12+ years I’ve been developing. Also considering the fact that I’ve been programming since the age of 11, self taught in basic, I think I understand a few things about writing code.

For the same reason that Apple became the number one company in the world, I like simplicity. Even when it comes to programming. Just because I’m a programmer doesn’t mean that I have to be some rocket scientist that only a few can understand.

Good programmers can write complex code that intertwines on itself in amazing loops and conditionals that will make even the smartest of people look at the code like a dog looks at someone whistling. Great programmers will write code that programmers at any level will easily understand.

This reminds me of the time I picked up Magento. What a convoluted piece of crap! I’m not talking about the basic use of pulling it out of the box and creating a template, but I’m talking about trying to revert from Enterprise back to the Community edition. I mean, holy crap! My head spun around for over 3 months trying to duplicate all of the functionality that already existed in Enterprise. Don’t ask me why business wanted to do that. They’re the ones that think they understand the product and sell it like that to their clients.

I vowed to never touch Magento ever again. Unless, someone needs a simple out of the box solution with a pre-purchased tempalte, there are other programs out there that can do everything much simpler. Presta-shop, wordpress, even weebly has introduced an ecommerce solution for moms and pops.

I like the idea behind Magento and its flexibility, but there’s no way you can build something so flexible to allow for everything you ever wanted. There are workarounds around it, and even then, you still have to revert back to simple PHP in many cases. If it was so flexible that you could do anything, well, then, you’d have PHP. So, why the need of a framework?

From my understanding, Magento was built in two weeks by an offshore Russian or Ukranian who worked nights and weekends to get this magestic piece of crap out to the market… And boy, was it buggy… Many revisions later, it’s still a monster that no normal developer wants to touch. For those that do, best of luck to you. You’re obviously MUCH more intelligent than someone like me.

At one point, the company that I worked for even had a project where the only reason to use Magento was to store user information. Everything was ignored, even the templating system. Everything was bootstrapped to render out custom template files outside of the working template folders. Talk about spreading butter with a chainsaw.

Basically, I’m never happy working in an environment where we start out with a framework, and in months we’re using custom code to run everything. Why not start fresh? Tabula Rasa! Clean slate. So much more control over what you do, and so much you can customize from the beginning.

So much abstraction in the programming world. I left the world of Physics because I wanted less abstraction and more reality based practical involvement and construction. Abstract thinking is just that. Abstract. It has its place in the world of physics and math. Engineering just doesn’t function on abstract ideas. You have to be precise and realistic, otherwise your building collapses.

I guess some programmers just like to be challenged for the sake of being challenged. Not this guy. I like keeping my brain functioning beyond the age of 50.

Let’s keep it real, folks!

The reason Angular JS will fail

I’m all about new technology, but just like Steve Jobs had put it, it has to be intuitive. It has to feel comfortable, and easy to learn. This is reference to another one of my posts done here: Angular JS Kinda Sucks. The main reason Angular JS will fail is because it’s difficult. Honestly, who likes to make their lives more difficult? Not this guy. That’s not to say I’m looking for the easy way out. I believe in hard work paying off, but to make things difficult just for the sake of saying that I did something difficult that I could have done with ease, other ways? That’s just ridiculous. Yes, I can take a boat across the English channel, but why not make it harder and swim it? Other than getting into the book of world records, there really is no practical reason to do so.

Which brings me to the pattern of ever failing technologies. Remember Moo Tools? Prototype? I do too, and sadly, I use NONE of them in any of my projects. jQuery has evolved with the times. It has gotten better and better, and even with its 2.0 release, revolutionized. All while keeping its key ingredient of keeping itself simple to use and logically understandable. Any one of us who struggled with JS before jQuery came along created our own JS libraries to handle mundane tasks of JS. Class lookups, selecting elements, animation, AJAX, etc. We all wondered if there was an easier way to do repetitive work like that. jQuery came along and helped us out in that department.

Prototype and moo tools tried to be innovative, but they just made things harder. Not only were they not intuitive to use, but referring to the documentation was even worse. Would take hours what jQuery could accomplish in mere minutes.

Don’t look at how many companies use those other tools right now. Wait for it and see how many companies will use those same tools in the future. 5 years, 10 years… jQuery has stood the test of time. And the reason they keep winning is because they cater to the developer, the people who are using the tool the most, and making their lives easier to deal with. It’s a complement to code, not a spaghetti nightmare filled with complexities and high learning curves.

I remember the first time I built a web page using jQuery. It was easy. It was instinctive. It was amazing. It made want to use more of it. AngularJS unfortunately, did not have that same effect on me.

In the end, I guess it’s to each their own, but too many times I’ve come across reviews that are not so pleasant to read about Angular JS. Even doing a google search on “jQuery sucks” vs “AngularJS sucks” shows that there are more results for the latter, and AngularJS has only been around for a few years, while jQuery, almost a couple of decades. You’d think that there would be more results for jQuery since it’s been around for longer, and that AngularJS has been harbored by Google.

What are your thoughts?

Git Kinda’ Sucks

So, another “kinda sucks” article from me. This time, I’m taking on Git. I’m sure Git is wonderful for all of the companies that have adapted it and has dealt with its constraints and difficulties. Ask anyone who’s picked up Git after they’ve been used to SVN, or other repository. They will most likely tell you that it was difficult to implement, but now they’re happy that they spent the time to learn it.

What exactly was gained from it, other than for the sole purpose to learn something new? Nothing. I’ve picked up Git some time ago on one of my projects, and I was battling with it. It would fight me. Pull, push, commit, on and on. It just seemed like more ways one could screw up, that’s all.

SVN did everything I ever needed for my projects, and I have several projects, all with massive code bases, and some of which I run from multiple areas, and work with multiple developers. So, I gave Git another try when one of the team members I worked with on a project introduced it. He also introduced SASS at the same time. Let me tell you, for someone that knows their LAMP stack all too well, introducing all these bells and whistles makes you feel pretty stupid. Conflicts and overwrites became huge issues because the other team members weren’t told that SASS was going to be used, and no one mentioned that designers are going to change template code.

Don’t believe me? Check out others who are upset about Git as well:
http://steveko.wordpress.com/2012/02/24/10-things-i-hate-about-git/

…and the rebuttal:
http://www.tylerbutler.com/2012/08/ten-things-steve-bennett-hates-about-git/

Check out the first comment made by Steve Bennett, the writer in the first link.

In the end, it’s not about the technology that you use, it comes down to how well you use the technologies that you currently know. And I’ve always said the following two things, and follow them religiously:

1. If it ain’t broke, don’t fix it.
2. Stop trying to re-invent the wheel.

They pretty much say the same thing. It’s the same argument when it comes to using OOP for a web project. That’s for a later discussion. Check out the reason I made my own “opened framework” here.

PS. I really think someone invented Git to make SVN users much happier with their repository handling.

Angular JS Kinda Sucks

Ok, so I ran across this angular js framework and looked it over, tried to duplicate some functionality that I already had existing with jQuery, and was not impressed.

First of all, I can do anything in jQuery, and have full control. Full control of the selectors, HTML, the DOM. I like that. I like knowing what I’m doing and what’s happening in my application. Somehow, angular fails to let me know what’s happening behind closed doors, unless I go dig into the code itself. Hm. Never had to do that with jQuery.

+ jQuery

The documentation is just plain horrible. Basically, it comes down to how basics work, not how you can and should build an application, even though they stress that you must first architect your application before you build it. Architect it how? Are there examples? Some nice examples would be of projects that are relevant to the outside world. Data manipulation? Dynamic AJAX driven application? It just seems like a lot of hype because it’s the “cool” thing to do and everyone is doing it. Well, not everyone. About 0.1% of sites out there use Angular, while well over 55% of websites use jQuery. Most of the documentation is just hard to understand without explaining the parts of the application or explaining the magic behind the app, or even explaining why I’m naming certain things the way I name them. Anyway, just confusing.

+ jQuery

Which brings me to my final reason for not liking it. Intuitiveness. It’s not intuitive at all! If you know JS and jQuery, everything is build so you can just figure things out. .show(), .hide(), $.ajax({stuff}), $(‘whatever selector you want full control of here’).doThings(). It’s easy to read, just like OOP. In angular it feels like you’re looking at fog. ng-this, ng-that, and now you have to assume that somehow everything is aware of everything else on the page. WTF?

+ jQuery

Speed of development? Hardly. We had some experience with it at work where some front-end code was handed down to be integrated by back-end guys, and… well… everything broke. Why? The back-end guy knew only jQuery. Now, he has to spend additional time and resources to learn angular, and the learning curve is STEEP!!!! And once he learns it, maybe someone will come up with another stupid framework that will do exactly the same thing jQuery does, only more abstract. Can we get practical with our development, stop being such lazy-ass programmers, learn to code properly, and stop complaining about how working on something feels like work? Beware of lazy programming and short cuts to faster deployment schemes. Sounds a lot like get rich quick schemes. How well have those worked out so far? Is everyone rich yet?

+ jQuery

Just not for me. Might be for you, but for me, I stand by the saying, “If it ain’t broken, don’t fix it!” And jQuery is definitely not broken. It’s by far the most favorable, intuitive, powerful “framework”/library to date. It’s not a hula hoop. It’s a cellphone.

Updated on Feb 27th, 2014:
After attempting to look through documentation and examples on stackoverflow, I’ve come to the conclusion that I’m much happier with jQuery, for the simple reason that I know how to use it and it does everything I’ve ever wanted, because it’s a tool for short-cutting a lot of mundane tasks that JS threw at us. .each() loops, .ajax calls, class selectors, very easy to understand and build on top of. After looking at many examples of angular implementation, I’ve noticed a pattern of jQuery being used on top of angular. Obviously to take care of the many things that angular can’t. It seems to me that performance wise it wouldn’t be smart to use angular, simply because it would be additional bulk on top of your programming. It doesn’t complement JS, it complicates it by changing the rules, and way of thinking. jQuery respects JS and complements it greatly. So…

+ jQuery

If anyone has the solution to how they would take care of the example I’ve created using jQuery with angularjs here, I would love to read it.

Finally, The vBox Plugin!

Ever wanted a nice plugin that you could just insert, and run with it? No major reconfigurations, no extra images, nothing of the sort.

Bad news first!

Here are some of the cons:
– Modern Browser Support only.
– IE 9+
– Chrome 4+ (all)
– FF 3.5+
– Safari 5.1+
– Safari Mobile 5.0+
– Android 4.0+
– Chrome aor FF for Android (all)
– Dependent on jQuery.

And the good news!

Here are some of the pros:
– Resizeable with window if contents are larger than window.
– Multiple levels, stackable.
– Based on jQuery, easy to implement and use.
– Always stays in the center.
– SUPER light!

Take it, make it, minimize it, do whatever to it. Feedback would be appreciated.

vbox-0.1.2
Updated from 0.1.1: Added a resize on any element within that has the class resizable to fit the pop up which fits the window itself.

vbox-1.0.0
Updated from 0.1.2: Added compatibility for other browsers. Added custom fade time.

Usage:

1
$.fn.vbox('open',{content:'<p>My internal HTML text.</p>'});

If you want to read it without opening the file, here you go:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
(function($){
    var g_vboxlevel = 0;
    $(document).on('click','.vbox-close, .fuzz',function(e) {
        e.stopPropagation();
        $.fn.vbox('close');
    }).on('click','.vbox-content',function(e){
        e.stopPropagation();
    });
    $(window).on('resize',function(){
        $.fn.vbox('resize');
    });
    $.fn.vbox = function (action,options) {
        var settings = $.extend({
            content: 'sample',
            speed: 100
        },options);
       
        var win = $(window);
        var winH = win.height();
        var winW = win.width();
       
        if (action == 'open') {
            g_vboxlevel++;
            $('body').append('<div class="fuzz" id="vbox_'+g_vboxlevel+'"><div class="vbox"><div class="vbox-content"><div class="inner-content">'+settings.content+'<a data-id="'+g_vboxlevel+'" href="#" class="vbox-close">&times;</a></div></div></div></div>');
            $thisbox = $(document).find('#vbox_'+g_vboxlevel);
            $thisbox.animate({opacity:1},settings.speed,function(){
                $.fn.vbox('resize');
            });
        };
        if (action == 'close') {
            $(document).find('#vbox_'+g_vboxlevel).animate({opacity:0},settings.speed,function() {
                $(this).remove();
            });
            g_vboxlevel--;
        };
        if (action == 'resize') {
            $thisbox = $(document).find('#vbox_'+g_vboxlevel);
            $thisbox.find('.inner-content, .resizable').css({'max-width':(winW - 100) + 'px'});
            $thisbox.find('.inner-content, .resizable').css({'max-height':(winH - 100) + 'px'});
        }
       
    }
}(jQuery));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.fuzz {
    position: fixed;
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
    vertical-align: middle;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
}
.fuzz .vbox {
    display: table-cell;
    vertical-align: middle;
}

.fuzz .vbox-content {
    box-shadow: 0 9px 39px #333;
    display: inline-block;
    padding: 20px;
    background: #fff;
    position: relative;
}
.fuzz .inner-content {
    overflow: auto;
    border: 1px solid #ccc;
    padding: 20px;
}
.fuzz .vbox-close{
    position: absolute;
    font-size: 28px;
    text-decoration: none;
    top: -12px;
    right: -12px;
    border: 3px solid #fff;
    box-shadow: 0 0 10px #000;
    border-radius: 16px;
    height: 26px;
    line-height: 22px;
    background: #000;
    color: #fff;
    width: 26px;
    font-weight: bold;
}

Update:

I’ve managed to make some tweaks with the help from some feedback and the vBox plugin is finally ready for release. Enjoy!

Facebook buys WhatsApp for $19 billion

What's App Logo, thanks to computerhoy.com and google image search.

What’s App Logo, thanks to computerhoy.com and google image search.

And I don’t care too much, really. I care that WhatsApp will be owned by a company that’s too big to fail, so that would guarantee me a long and prosperous lifeline with it, but overall, I don’t see any negatives. Of course, if Facebook decides to start adding ads, I will complain, but from what I gather, registering my wife up this morning with WhatsApp, it seems like they will charge me 99 cents per year to keep it going ad free. At least that’s what the news said too. WhatsApp will remain free of ads. I don’t mind that at all.

What’s really cool is that the guy that created WhatsApp, Brian Acton, applied to work for Twitter and Facebook and was denied, only have them pay him THAT much money. I guess that was a bad investment on their part. Karma’s a bitch!

Smart business decision? Definitely.

I’ve been saying this all along… Lazy programmers make for bad code

A link to an article about why code these days is so bloated.

I’ve been saying this for so long. Running a 3 mile race in 1 mile is not going to make you a faster athlete. It will weaken you as a performer. Get your ass off the couch, do the work, the right way, and always consider performance. Or, you get what’s coming to you. Adding frameworks and shortcuts to your development will only make you hurt later on.

Thoughts?

A New Way of Programming AJAX Style

As a programmer / web developer, I’ve been exposed to AJAX since before it was popular in jQuery. I remember creating my own $.ajax(); functions using XMLHTTP Requests, and other complicated javascript code and functions.

When exposed to jQuery, why reinvent the wheel? However, implementing the code to my current applications and websites was not that easy though. I wanted to create a sort of a system to integrate into a web app. Something that works for me. After many iterations, I came up with the following:

Where it all began

We need to trap the clicks to our app actions. In doing so, let’s look at the action buttons.

1
2
3
<body>
    <a href="#" class="btn" id="buttonone">Click Here</a>
</body>

And now, for the JS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function(){
    $(document)on('click','.btn',function(e){
        // This makes sure we don't follow through on the click.
        // In essence, we cancel the initial click.
        e.preventDefault();
        // Now we make an ajax call.
        $.ajax({
            url: '/ajax/buttonactions.php?action=actionone',
            success: function(data) {
                // and we output our results
                console.log(data);
            }
        });
    });
});

And our complementing PHP action file.

1
2
3
4
5
6
7
8
9
10
11
12
// To make sure we set our action
$action = isset($_GET['action']) ? $_GET['action'] : '';

// call the function passed in from the ajax call
call_user_func($action);

// the function of the same name as the parameter
// as passed in from AJAX call.
function actionone() {
    // data to return
    return "data is back";
}

We don’t know what we’re going to do with our data yet, so let’s make it make some sense. We would like to return a JSON object from our PHP, because inside the JSON object, we can pass structured HTML, as well as other JSON data to be used by JS.

Our PHP has been updated with the following (Notice the JSON Encoded array returned at the end):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// To make sure we set our action
$action = isset($_GET['action']) ? $_GET['action'] : '';

// call the function passed in from the ajax call
call_user_func($action);

// the function of the same name as the parameter
// as passed in from AJAX call.
function actionone() {
    // data to return
    $retVal = array(
        "error" => false,
        "message" => "Data is back!"
    );
    return json_encode($retVal);
}

And now, to deal with the data on JS side. Make our AJAX call be of dataType JSON. We check to see if the data returned has the error variable equal to true or false. If false, continue.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function(){
    $(document)on('click','.btn',function(e){
        // This makes sure we don't follow through on the click.
        // In essence, we cancel the initial click.
        e.preventDefault();
        // Now we make an ajax call.
        $.ajax({
            url: '/ajax/buttonactions.php?action=actionone',
            dataType: 'JSON',
            success: function(data) {
                // and we output our results
                if (!data.error) {
                    console.log(data.message);
                } else {
                    console.log('data return error');
                }
            }
        });
    });
});

But this is not too much fun. All of the processing and rendering would have to happen on the JS side if all we return is JSON data. Let’s put things in arrays, and nest them for future use. Also, use our Output Buffer to do the work for rendering things.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
...
function actionone() {
   
    $htmlToBeReturned = '';
    ob_start();
    ?><div>This is a block of HTML!</div><?php
    $htmlToBeReturned = ob_get_contents();
    ob_end_clean();
   
    // data to return
    $retVal = array(
        "error" => false,
        "message" => "Data is back!",
        "htmls" => array(
            "#buttonone" => $htmlToBeReturned
        )
    );
    return json_encode($retVal);
}
...
?>

Notice how we are returning HTML content inside our JSON object. It works really well too. json_encode takes care of everything for us. Also notice how we put our HTML return code inside another array called “htmls”. This is a great way to handle multiple HTML blocks that require changing. The great part about this is that you’re returning all of your data with one HTTP Request, one database call, and you’re manipulating multiple DOM blocks / elements. Another notice is the htmls object will contain the “selector” to be changed in the front end. You can have a string of these selectors, specific selectors, or a group of selectors, just like jQuery.

Our new JS code will look something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
            success: function(data) {
                // and we output our results
                if (!data.error) {
                    console.log(data.message);
                    for ($html in data.htmls) {
                        $($html).html(data.htmls[$html]);
                    }
                    $('body').append();
                } else {
                    console.log('data return error');
                }
            }
...

And now we see how easy it was to manipulate the DOM via ajax. You can improve on this model by templetizing the rendering to be able to re-use the same tempalte, you can add data objects to the click element and pass them in as post parameters, etc.

This is how we templetize the rendering of the HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<?php
...
function actionone() {
   
    $htmlToBeReturned = '';
    ob_start();
    renderHtmlBlockOne();
    $htmlToBeReturned = ob_get_contents();
    ob_end_clean();
   
    // data to return
    $retVal = array(
        "error" => false,
        "message" => "Data is back!",
        "htmls" => array(
            "#buttonone" => $htmlToBeReturned
        )
    );
    return json_encode($retVal);
}
...
function renderHtmlBlockOne() {
    ?><div>This is a block of HTML!</div><?php
}
...
?>

You can move the render functions inside a file to be included from anywhere so you can avoid duplicate render code.

Let’s make the click dynamic.

1
2
3
<body>
    <a href="#" data-action="actionone" class="btn" id="buttonone">Click Here</a>
</body>

And adjust the AJAX call to fit in any action:

1
2
3
4
...
        var $this = $(this);
        var $action = $this.attr('data-action');
...

We cached the clicked object so we don’t have to constantly refer to it via jQuery.

And the url:

1
2
3
4
5
...
        $.ajax({
            url: '/ajax/buttonactions.php?action='+$action,
            dataType: 'JSON',
...

Now, your only worries are to make sure that you assign the data-action to the clicked element to call the proper action in PHP. HTML -> JS -> PHP -> back to JS -> back to HTML. Pretty clever, huh? Input -> controller -> model -> controller -> output.

And now, for the promised bells and whistles of passing data through data attributes. We already passed in one data attribute, the action, now, we just have to add more data, and change the type of the AJAX call to post.

1
2
3
<body>
    <a href="#" data-action="actionone" data-data="id=1&type=active" class="btn" id="buttonone">Click Here</a>
</body>

In the code above, we pass in a string of data that can be dynamically generated when generating the page with PHP. In essence:

1
2
3
<body>
    <a href="#" data-action="actionone" data-data="id=<?php echo $id; ?>&type=<?php echo $type; ?>" class="btn" id="buttonone"><?php echo $actionTitle; ?></a>
</body>
1
2
3
4
5
...
        var $data = $this.attr('data-data');
...
            type: 'POST'
...

And in our PHP code,

1
2
3
4
5
6
<?php
...
    $id = $_POST['id'];
    $type = $_POST['type'];
...
?>

And that’s it. You can always improve on the code, but this is the general idea to keep things simple and expandable.

The HTML File:

1
2
3
<body>
    <a href="#" data-action="actionone" class="btn" id="buttonone">Click Here</a>
</body>

The JS file, assuming you’ve loaded jQuery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(document).ready(function(){
    $(document)on('click','.btn',function(e){
        // This makes sure we don't follow through on the click.
        // In essence, we cancel the initial click.
        e.preventDefault();
        // Now we make an ajax call.
       
        var $this = $(this);
        var $action = $this.attr('data-action');
        var $data = $this.attr('data-data');
       
        $.ajax({
            url: '/ajax/buttonactions.php?action='+$action,
            dataType: 'JSON',
            type: 'POST'
            success: function(data) {
                // and we output our results
                if (!data.error) {
                    console.log(data.message);
                    for ($html in data.htmls) {
                        $($html).html(data.htmls[$html]);
                    }
                    $('body').append();
                } else {
                    console.log('data return error');
                }
            }
        });
    });
});

And the AJAXed PHP code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?php
// To make sure we set our action
$action = isset($_GET['action']) ? $_GET['action'] : '';

// call the function passed in from the ajax call
call_user_func($action);

// the function of the same name as the parameter
// as passed in from AJAX call.
function actionone() {

    $id = $_POST['id'];
    $type = $_POST['type'];
   
    $htmlToBeReturned = '';
    ob_start();
    renderHtmlBlockOne();
    $htmlToBeReturned = ob_get_contents();
    ob_end_clean();
   
    // data to return
    $retVal = array(
        "error" => false,
        "message" => "Data is back!",
        "htmls" => array(
            "#buttonone" => $htmlToBeReturned
        )
    );
    return json_encode($retVal);
}
...
function renderHtmlBlockOne() {
    ?><div>This is a block of HTML!</div><?php
}

?>

Happy coding!

Bounce Effect in CSS Only Using CSS3

Ever wanted to have a nice bouncy effect when hovering over something without the use of javascript or hard to learn advanced code?
Use this for your HTML:

1
2
3
    <div class="bounce-cnt">
        <div class="bounce-r" id="the-button">asdf</div>
    </div>

And complement with this for your CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
@keyframes hover-over {
    0% {padding: 10px; left: 0px; top: 0px; opacity: 0.7; }
    50% {padding: 16px; left: -6px; top: -6px; opacity: 1; }
    100% {padding: 13px; left: -3px; top: -3px; opacity: 1; }
}
@-webkit-keyframes hover-over {
    0% {padding: 10px; left: 0px; top: 0px; opacity: 0.7; }
    50% {padding: 16px; left: -6px; top: -6px; opacity: 1; }
    100% {padding: 13px; left: -3px; top: -3px; opacity: 1; }
}
@keyframes hover-out {
    0% {padding: 13px; left: -3px; top: -3px; opacity: 1; }
    50% {padding: 16px; left: -6px; top: -6px; opacity: 1; }
    100% {padding: 10px; left: 0px; top: 0px; opacity: 0.7; }
}
@-webkit-keyframes hover-out {
    0% {padding: 13px; left: -3px; top: -3px; opacity: 1; }
    50% {padding: 16px; left: -6px; top: -6px; opacity: 1; }
    100% {padding: 10px; left: 0px; top: 0px; opacity: 0.7; }
}

.bounce-cnt {
    position: relative;
}
.bounce-r {
    animation-name: hover-out;
    animation-duration: 0.2;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    -webkit-animation-name: hover-out;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    position: absolute;
    top: 0;
    left: 0;
}
#the-button {
    border: 5px solid #000;
    background: #eee;
}
.bounce-r:hover {
    animation-name: hover-over;
    animation-duration: 0.2;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    -webkit-animation-name: hover-over;
    -webkit-animation-duration: 0.2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
}

But you might say to yourself… “That’s a lot of CSS for one little effect”. That’s fine. Here’s why.
1. You’re not tying up the JS processing.
2. All you have to do is add class to a parent and child pair to make it look and work great, every time, without making the effort of re-writing bouncy code for every element.

Cheers!

What Makes a Solid Web Dev. Team?

Or for that matter, what makes a solid software development team? Let’s start with the product in mind. Whenever you look at a product, you really need to understand its purpose. Every team member has to. It’s a requirement, I think. You can’t just black box everything.

The Basics:
This is your fire team!

For starters, you need a solid squad. Yes, like in the military. You need highly trained specialists in 4 different areas:

  • Design
  • UI/UX
  • Product
  • Dev

With those four roles in mind, yes, you can have cross overs. A designer can do UI, but not as well as a specialist in UI.

Let’s see the roles as they play out:

Product: The key role in understanding what they product is, and why it will be useful to the audience. A product owner has to be an awesome communicator. He has to explain to design why certain things will be added, removed, or modified. He has to be sharp when it comes to technology usage. Has to understand SEO requirements, and the most important, has to keep the product simple enough for the end user. The product most likely will have to have an added benefit, not increase the workload of the end users. Need marketing? Someone to put out fires? Talk to the public? This is your guy! There could be several people playing a few roles on the product team, but essentially, product means business.

UI/UX: User Experience is what will make the product work for the user, not against. Working closely with the product owner, the UI specialist has to understand that red buttons don’t work, orange ones do, but not too many on one page. Place the OK and Cancel button far apart so the end user doesn’t have an “accidental” click. UI also comes in very handy for mobile devices where a touch of a small button could spell disaster. Keeping buttons consistent, such as OK and Cancel pop ups is pretty crucial to end user experience. It makes the end user more comfortable if they see the same flow all over the site instead of having Yes and No buttons appear from time to time, unless there’s a logical reason to use them. All this and more in the day of a UI/UX Developer.

Designer: Having a creative person on your team, keeping up with the latest trends and designs is great. Everyone is using the Windows 8 Metro theme because it’s nice, but also because it’s light for the web. Simple colors, non rounded corners, no drop shadows or gradients all make for a quick loading site. Little white icons on top can be placed in a sprite that only loads once, or can be included in as a special font. In any case, this guy needs to be able to provide awesome designs, and great looking interfaces, without sacrificing speed or ease of use for end users.

Developer: Last, but definitely not least, the guy or guys to glue it all together, the developer. This is your heavy machine gunner. He carries over all of the requirements and glues them together in a nicely and smoothly working product. He’s the Goldie Locks of the team. There has to be a balance of speed, performance, reliability, maintainability, and of course, design, UX and many more factors. This team can consist of other sub specialists depending on your application requirements. Maybe a server guy, with a database guy, a back-end server-side script developer and a front-end specialist to handle all of the bells and whistles. Very rarely will you find someone with all these experiences.

So, now you have your fire team armed and ready, locked and loaded, locked cocked and ready to rock. Set your missions, and go out there and conquer ground! Get an idea going, build a start-up, get funding and take over the world!