demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

Frameworks

javascript / frameworks

Estimated reading time: 1 minute, 24 seconds

Frameworks, sometimes known as prototyping systems, are perhaps best described as “shortcuts” installed as an upper-level library over a base language. They allow you to achieve popular, complex operations in brief snippets of code that would otherwise take a great deal of work to specify in the original language.

There are many different frameworks, for many different languages. Some examples of web development frameworks include:

JavaScriptCSSPHP
jQuerybluetripzend
PrototypeTripoliYii
mooTools960.gsCodeIgniter
YUIElementsCakePHP
dojoBlueprint
SASS
Compass
Turbine
LESS

CMS’s could also be considered a form of framework.

There are several important points to note:

  • Frameworks are typically installed as a library, which can increase page size, although there are techniques to get around this issue.

  • Frameworks do not completely excuse you from learning the base language, as you are still using the original language in the framework… you’re just using less of it, meaning you don’t have to learn to the same depth.

  • Frameworks are not a “magic pill”: they are not a solution for every possible goal on a web page. Frameworks also tend to be overused: loading a 60k library in order to accomplish a single effect that could be written in 480 bytes in the base-level language is not unusual nor efficient, but it is a giant waste of resources.

  • Frameworks do not allow you to accomplish anything that is not possible in the original language: they just allow you to reach your goal quicker and easier, in most cases. A good example would be fading out an image over time.

In jQuery:

$('#object').fadeOut('slow', function() { });

In JavaScript:

varTimeToFade=1000.0;
functionfade(eid)
{ varelement=document.getElementById(eid);
if(element==null)
return;
if(element.FadeState==null)
{ if(element.style.opacity==null||element.style.opacity==''
||element.style.opacity=='1')
{ element.FadeState=2; }
else
{ element.FadeState=-2;}}
if(element.FadeState==1||element.FadeState==-1)
{ element.FadeState=element.FadeState==1?-1:1;
element.FadeTimeLeft=TimeToFade-element.FadeTimeLeft;
} else {
element.FadeState=element.FadeState==2?-1:1;
element.FadeTimeLeft=TimeToFade;
setTimeout("animateFade("+newDate().getTime()+",'"+eid+"')",33);
}} 
functionanimateFade(lastTick,eid)
{varcurTick=newDate().getTime();
varelapsedTicks=curTick-lastTick;
varelement=document.getElementById(eid);
if(element.FadeTimeLeft<=elapsedTicks)
{
element.style.opacity=element.FadeState==1?'1':'0';
element.style.filter='alpha(opacity = '
+(element.FadeState==1?'100':'0')+')';
element.FadeState=element.FadeState==1?2:-2;
return; }
element.FadeTimeLeft-=elapsedTicks;
varnewOpVal=element.FadeTimeLeft/TimeToFade;
if(element.FadeState==1)
newOpVal=1-newOpVal; 
element.style.opacity=newOpVal;
element.style.filter='alpha(opacity = '+(newOpVal*100)+')';
setTimeout("animateFade("+curTick+",'"+eid+"')",33); }
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.