ArTech: Web Development

Showing posts with label Web Development. Show all posts

Tuesday, August 20, 2013

Cool Web Stuff

Cool Things
http://stackoverflow.com/questions/811074/what-is-the-coolest-thing-you-can-do-in-10-lines-of-simple-code-help-me-inspir

1. Modify Web Page

javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

2. JQuery Effect

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(document.body).click(function () {
  if ($("#pic").is(":hidden")) {
    $("#pic").slideDown("slow");
  } else {
    $("#pic").slideUp();
  }
});
</script>
</head>
<body><img id="pic" src="http://www.smidgy.com/smidgy/images/2007/07/26/lol_cat_icanhascheezburger.jpg"/>
</body>
</html>

HTML Presentation

http://lab.hakim.se/reveal-js/#/

Friday, November 2, 2012

Logo Design Tips
http://www.creativebloq.com/graphic-design/pro-guide-logo-design-21221
Preparation:
01. Research your audience
02. Immerse yourself in the brand
03. Do your online research
Logo Moose http://logomoose.com/
Logo Gala http://www.logogala.com/
04 Seek inspiration
05 Fight the temptation to imitate
06 Don't let the client dictate
07 Create a board and rip it up

Initial Design Work
08 Sketch it out
09 Create vectors

Nailing the Typography
10 Choose your typeface carefully
11 Adapt an existing typeface
12 Avoid gimmicky fonts
13 Consider a type-only approach

Use of Space
14 Think about the space around your logo design
15 Use negative space carefully

Graphic Design
16 Make your design active, not passive
17 Consider tones as well as colours
18 Be experimental

Keep it Clean and Modern
19 Don't use more than two fonts
20 Ensure it works on dark backgrounds
21 Keep abreast of trends
22 Subtract as much as possible
23 Don't try to do too much
24 Create a lock up version
25 Make your logo design responsible

Functionality
26 Create different size versions
27 Make it legible
28 Create a non-print variants
29 Make it future-proof

Business Consideration
30 Don't confuse logo with brand
31 Get the tone right

Feedback
32 Show your logo design around
33 Stick to your convictions
34 Ask the client specific questions
35 Test it internationally
36 Check for hidden words
37 Expect your logo design to be panned

Style Guides
38 Create a logo style guide
39 Dictate color options
40 Specific sizes
41 Advice on positioning
42 Advice on spacing
43 Define no-nos

Going future
44 Download the logo design flowchart
http://mos.computerarts.co.uk/pdf/CAP148_chart.pdf

HTML 5, CSS3 and JavaScript

1. 8 Simply Amazing HTML5 Canvas and Javascript Animations
http://www.queness.com/post/3885/8-simply-amazing-html5-canvas-and-javascript-animations

e.g. Bomomo

2. 10 Jaw Dropping HTML5 and Javascript Effects
http://www.queness.com/post/4650/10-jaw-dropping-html5-and-javascript-effects

e.g. Blob

3. 13 Amazing Examples of HTML5 and CSS3
http://www.queness.com/post/4105/13-amazing-examples-of-html5-and-css3

e.g Coke Can

4. WebGL
http://www.chromeexperiments.com/webgl

how to prevent SQL injection

SQL Injection Attacks and Some Tips
http://www.codeproject.com/KB/database/SqlInjectionAttacks.aspx

' UNION SELECT name, type, id FROM sysobjects;--
- the initial apostrophe closes the opening quote in the original SQL statement.
- the two dashes at the end starts a comment, which means that anything left in the original SQL statement is ignored.

SQL Injection
http://en.wikipedia.org/wiki/SQL_injection

' or '1'='1
' or '1'='1' -- '
' or '1'='1' ({ '
' or '1'='1' /* '

If this code were to be used in an authentication procedure then this example could be used to force the selection of a valid username because the evaluation of '1'='1' is always true.

http://www.wwwcoder.com/main/parentid/258/site/2966/68/default.aspx

Friday, September 2, 2011

Prevent Cross Site Scripting

1. HTML and JavaScript
http://www.codeproject.com/KB/web-security/Security_HTML_Injection.aspx

2. PHP: Preventing typical XSS attacks
http://chriscook.me/web-development/php-preventing-typical-xss-attacks/

3. 15 PHP regular expressions for web developers
http://www.catswhocode.com/blog/15-php-regular-expressions-for-web-developers

4. XSS (Cross Site Scripting) Prevention Cheat Sheet
https://www.owasp.org/index.php/XSS_%28Cross_Site_Scripting%29_Prevention_Cheat_Sheet#Why_Can.27t_I_Just_HTML_Entity_Encode_Untrusted_Data.3F

5. PHP Regular Expression
http://php-regex.blogspot.com/2008/01/introduction-to-regular-expressions-in.html

6. Using Regular Expressions with PHP
http://www.webcheatsheet.com/php/regular_expressions.php

7. Regular Expression Basic Syntax Reference
http://www.regular-expressions.info/reference.html

8. Using a Regular Expression to Match HTML
http://haacked.com/archive/2004/10/25/usingregularexpressionstomatchhtml.aspx

9 Ultimate Regular Expression for HTML tag parsing with PHP
http://kevin.deldycke.com/2007/03/ultimate-regular-expression-for-html-tag-parsing-with-php/

Literal Text:
- The characters that match themselves are called literals

Metacharacter:

backslash \ :
caret ^ : at the beginning of a regular expression indicates that it must match the beginning of the string
dollar sign $ : match strings that end with the given pattern.
period or dot . : matches any single character except newline (\). e.g. the pattern h.t matches hat, hothit, hut, h7t, etc
vertical bar or pipe symbol | : is used for alternatives in a regular expression.
question mark ? :
asterisk or star * :
plus sign + :
square bracket [ ] :
round bracket ( ) :
brace { } :

If you want to match a literal metacharacter in a pattern, you have to escape it with a backslash.

[agk]    matches any one a, g, or k
[a-z]    matches any one character from a to z
[^z]     matches any character other than z
[\\(\\)] matches ( or ) (in javascript, the escape slash must be escaped!)

.        any character except \n
\w       any word character, same as [a-zA-Z0-9_]
\W       any non-word character
\s       any whitespace character, same as [ \t\n\r\f\v]
\S       any non-whitespace character
\d       any digit
\D       any non-digit

\/       literal /
\\       literal \
\.       literal .
\*       literal *
\+       literal +
\?       literal ?
\|       literal |
\(       literal (
\)       literal )
\[       literal [
\]       literal ]

\-       the - must be escaped inside brackets: [a-z0-9 _.\-\?!]

{n,m}    match previous item n to m times
{n,}     match previous item n or more times
{n}      match exactly n times
?        match zero or once, same as {0,1}, also makes + and * "lazy"
+        match one or more
*        match zero or more

|        or
(x|y)    match x or y, inclusive (all x and y will be replaced)
( )      grouping and reference
\1       reference to first grouping, used in the expression
$1       reference to first grouping, used in the replacement string
$$       literal $ used in the replacement string

^        anchor to the beginning of the string
$        anchor to the end of the string
\b       match a word boundary (does not include the boundary)
\B       match a non word boundary (does not include the boundary) 

q(?=u)   match q only before u (does not match the u)
q(?!u)   match q except before u 

i        case-insensitive search, used like /expression/i
g        global replacement, used like /expression/g

Tuesday, November 30, 2010

IE setAttribute

setAttribute doesn't always work in IE
http://webbugtrack.blogspot.com/2007/08/bug-242-setattribute-doesnt-always-work.html

# bgcolor: Use "bgColor"

# cellpadding: Use "cellPadding"

# cellspacing: Use "cellSpacing"

# class: Use "className"

# colspan: Use "colSpan"

# defaultchecked: Use "defaultChecked"

# defaultselected: Use "defaultSelected"

# defaultvalue: Use "defaultValue"

# type: See note (bug 237) "type" is readonly in IE

# frameborder: Use "frameBorder"

# hspace: Use "hSpace"

# longdesc: Use "longDesc"

# maxlength: Use "maxLength"

# marginwidth: Use "marginWidth"

# marginheight: Use "marginHeight"

# noresize: Use "noResize"

# noshade: Use "noShade"

# on*: Inline events can not be set in IE, attach event handlers instead

# readonly: Use "readOnly"

# rowspan: Use "rowSpan"

# selected: When setting multiple selected items in a "select multiple" this will fail. {bug ref#TBD}

# style: None - see (bug 245), (bug 329)

# tabindex: Use "tabIndex"

# valign: Use "vAlign"

# vspace: Use "vSpace"



var browserName=navigator.appName; 

if (browserName=="Microsoft Internet Explorer") {

}

Tuesday, May 25, 2010

YUI: Customize YUI

Building Your Own Widget Library with YUI
http://yuiblog.com/blog/2008/06/24/buildingwidgets/

Customizing Existing YUI Component

YAHOO.namespace static function to create an object space for our own library



YAHOO.namespace('SATYAM');  // create a property SATYAM under YAHOO

Define Constructor



YAHOO.SATYAM.LoadingPanel = function(id) {



  YAHOO.SATYAM.LoadingPanel.superclass.constructor.call(this, 

            id || YAHOO.util.Dom.generateId() , 

            {

                   width: "100px", 

                   fixedcenter: true,

constraintoviewport: true,

underlay: "shadow",

close: false,

visible: false,

draggable: true

            }

      );



      this.setHeader("Loading ...");

      this.setBody('');

      YAHOO.util.Dom.setStyle(this.body, 'textAlign', 'center');

      this.render(document.body);

};

Use YAHOO.lang.extend
superclass is part of the inheritance mechanism provided by YUI’s extend method. After you declare the constructor for your new object, you call extend:



YAHOO.lang.extend(YAHOO.SATYAM.LoadingPanel, YAHOO.widget.Panel);

The constructor itself does not get executed immediately. The extend function does get executed immediately.

We use method call of JavaScript native Function object, which takes the first argument as the execution scope of the function called and passes it the rest of the arguments.

To Use the object we just created



if (!loadingPanel2) {

   loadingPanel2 = new YAHOO.SATYAM.LoadingPanel();

}

loadingPanel2.show();

Puts all the code within an anonymous function, which gets immediately executed (notice the empty parenthesis at the end)



YAHOO.namespace('SATYAM');

(function(){

        var Dom = YAHOO.util.Dom,

                Event = YAHOO.util.Event,

Panel = YAHOO.widget.Panel;



 // here goes the library contents itself

 // constructor

 // extend component

})();

YAHOO.register('SATYAM.LoadingPanel', YAHOO.SATYAM.LoadingPanel, {version: "0.99", build: '11'});

After we declare the instance of the YUI Loader that we will use, we call method addModule providing the information about our library file



var loader = new YAHOO.util.YUILoader();



loader.addModule({

       name: 'SATYAM.LoadingPanel',

type: 'js',

requires: ['container'],

fullpath: 'LoadingPanel.js'

});



loader.require('reset', 'grids', 'base', 'SATYAM.LoadingPanel');

Wednesday, May 19, 2010

Javascript Tips - Part2

1. Declare Function
http://www.permadi.com/tutorial/jsFunc/index.html
functionName([parameters]){functionBody};



function add(a, b) 

{

    return a+b;

}

assign a variable to an unnamed function: consider the function as an object



var add = function(a, b) 

{

    return a+b;

}

var add=function theAdd(a, b) 

{                     

    return a+b;

}                     

alert(add(1,2));           // produces 3

alert(theAdd(1,2));        // also produces 3

Useful in object oriented program, we can have a function be a property of an object



var myObject=new Object();

myObject.add=function(a,b){return a+b};  

// myObject now has a property/a method named "add"

// and I can use it like below

myObject.add(1, 2);

When we declare a function, JavaScript actually creates an object;
We can add properties to Objects, including function objects.



function Ball()          // it may seem odd, but declaration

{                                      // creates an object named Ball, and you can 

}                                       // refer to it or add properties to it like below

Ball.callsign="The Ball"; // add property to Ball

alert(Ball.callsign); // produces "The Ball"

Since function is an object, we can assign a pointer to a function



function myFunction(message) 

{ 

      alert(message);

}

var ptr=myFunction;  // ptr points to myFunction

ptr("hello");      // executes myFunction which will prints "hello"

2. Function as Data Type and Function Constructor
http://www.permadi.com/tutorial/jsFunc/index2.html

By declaring a function, we have also created a new data type



function Ball(message)

{

      alert(message);

}

var ball0=new Ball("creating new Ball");  // creates object & 

                                                                                   // prints the message

ball0.name="ball-0";                      // ball0 now has a "name" property

alert(ball0.name);                        // prints "ball-0"

The red portion as a shortcut for doing below



function Ball(message)

{

      alert(message);

}

var ball0=new Object();
 ball0.construct=Ball;
 ball0.construct("creating new ball");  // executes ball0.Ball("creating..");

ball0.name="ball-0";                      

alert(ball0.name);

Constructor function



function Ball(message, specifiedName)

{

      alert(message);

      this.name=specifiedName;                

}

var ball0=new Ball("creating new Ball", "Soccer Ball");  

alert(ball0.name);                   // prints "Soccer Ball"

The "new" keyword eventually causes the constructor function to be executed. In this case, it will executel Ball("creating new Ball", "Soccer Ball"); and the
keyword this will refer to ball0.
Therefore, the line: this.name=specifiedName becomes ball0.name="Soccer Ball".

Every constructor function has a property named prototype.
You do not need to explicitly declare a prototype property, because it exists on every constructor function.



function Test()

{

}

alert(Test.prototype);  // prints "Object"

Prototype is an object
when an object is created, the constructor function assigns its prototype property to the internal __proto__ property of the new object.



function Fish(name, color)

{

this.name=name;

this.color=color;

}

Fish.prototype.livesIn="water";

Fish.prototype.price=20;

You can use prototype to assign functions that are common on all objects



function Employee(name, salary)

{

this.name=name;                

this.salary=salary;

}

Employee.prototype.getSalary=function getSalaryFunction()

{

return this.salary;

}

Employee.prototype.addSalary=function addSalaryFunction(addition)

{

this.salary=this.salary+addition;

}

YUI Tips

1. YUI Container
http://developer.yahoo.com/yui/container/

Seven Examples of YUI Panels
http://icant.co.uk/sandbox/yuipanel/

2. YUI Event
http://developer.yahoo.com/yui/event/

YAHOO.util.Event.addListener(el, sType, fn, obj, overrideContext)
el: id, or a collection of ids
sType: the type of event to append (such as "click" http://www.quirksmode.org/dom/events/)
fn: the method the event invokes
obj: an arbitrary object that will be passed as a parameter to the handler
overrideContect: if true, the obj passed in becomes the execution context of the listener; if an object, this object becomes the execution context

YAHOO.util.Subscriber( fn , obj , overrideContext )
fn: the function to execute
obj: an object to be passed along when the event fires
overrideContext: If true, the obj passed in becomes the execution context of the listener

There are 2 main types of event subscriptions:



//DragDrop

var dd = new YAHOO.util.DD('dd');

dd.on('dragEvent', function() { });



//Panel

var panel = new YAHOO.widget.Panel('panel');

panel.renderEvent.subscribe(function() {});



//Calendar

var cal = new YAHOO.widget.Calendar('cal');

cal.selectEvent.subscribe(function() {});



//Editor

var editor = new YAHOO.widget.Editor('editor', {});

editor.on('afterRender', function() {});

3. Define anonymous function
Defining an anonymous function in order to keep all variables out of the global scope. Inside the anonymous function, define some shortcuts to utils that will be used frequently (Dom and Event).



(function () {

     var Event = YAHOO.util.Event,

      Dom = YAHOO.util.Dom;

}());

Inside the the anonymous function, use the onDOMReady method of the Event utility to instantiate an Overlay and a Button when the page's DOM is ready to be scripted.



Event.onDOMReady(function () {

     var oCalendarMenu;



     // Create an Overlay instance to house the Calendar instance

     oCalendarMenu = new YAHOO.widget.Overlay("calendarmenu", { visible:  false });



     // Create a Button instance of type "menu"



     var oButton = new YAHOO.widget.Button({ 

                 type: "menu",

id: "calendarpicker",

label: "Choose A Date",

menu: oCalendarMenu,

container: "datefields" });

});

3. YUI Panel
Click outside of a panel to close it

var treePanel = new YAHOO.widget.Panel(...);



function isInsideTreePanel(clicked_element) {

                  var current_element = clicked_element;

                  while(current_element && current_element != document.body) {

                       if (current_element == treePanel.element) {

          return true;

                      }

                    current_element = current_element.parentNode;

                  }

                  return false;

}



function onDocumentMouseDown(e) {

                  if (treePanel.cfg.getProperty('visible')) {

                       if (!isInsideTreePanel(e.target)) {

                            treePanel.hide();

                            YAHOO.util.Event.removeListener(document, onDocumentMouseDown);

                       }

                  }

}



treePanel.show();

YAHOO.util.Event.addListener(document, 'mousedown', onDocumentMouseDown, null);

4. YUI namespace
http://www.yuiblog.com/blog/2007/06/12/module-pattern/



YAHOO.namespace("mySwitch");

YAHOO.mySwitch.panelTable = new YAHOO.widget.Panel("panelTable");

Error: missing ; before statement
if trying to create a public method with “var” keyword


YAHOO.namespace("mySwitch");
 var YAHOO.mySwitch.panelTable = new YAHOO.widget.Panel("panelTable");

parentheses () at the end of function: cause anonymous function to execute immediately



YAHOO.myProject.myModule = function () {

} ();

Javascript Syntax

Javascript Tutorial
http://www.tizag.com/javascriptT/javascriptsyntax.php



document.write("something something");



window.location = "http://...";



function prompter() {

   var reply = prompt("what's your name?", "");

   alert("Nice to see you " +reply+"!");

}



window.print();



function delayer() {

   window.location="../xxxx.php";

}



body onload="setTimeout('delayer()', 5000)"



window.open("http://...", "name of window", "status =1, height=300, width=300, resizable = 0");



if(elem.value.length ==0) {

   elem.focus();

}



var numericExpression = /^[0-9[+$/;

if(elem.value.match(numericExpression)) {

}



javascript void 0

News Flash

because alert() returns null value





Set myNum Please



indexof

var aURL = "http://www.tizag.com/";

var aPosition = aURL.indexOf("www");

document.write("The position of www  =  " + aPosition);

Javascript Tutorial 2
http://home.cogeco.ca/~ve3ll/jstutor0.htm

Good Resource
JavaFile.com
http://www.javafile.com/

JavaScript.net
http://www.java-scripts.net/

Thursday, May 13, 2010

CSS Techniques

1. CSS Drop Shadows
http://www.alistapart.com/articles/cssdropshadows/

2. Rounded Corner
http://spiffybox.com/

3. Free Graphics and Effects
http://journalxtra.com/2009/08/snazz-up-your-website-with-free-graphics-and-sound-effects/

Thursday, April 8, 2010

Web Design: Liquid Layout

The Myth of 800x600
http://www.andreoni.com/articles/publish/screen_size.shtml
Average Screen Resolutions of Web Surfer (Feb 2001)

640x480: 7%

800x600: 53%

1024x768: 31%

1152x864: 2.5%

1280x1024: 2.5%

other: 4%

So 93% of web population can view 800x600 without unnecessary scrolling.

However Viewable Browsing Area is less than 800x600
1. Browser not completely open
2. Standard toolbar areas
3. Windows status bar
4. Sidebar areas
5. Browser companions

Web page designers often account for this by developing pages that are about 770x430.

Techniques
1. Centered content
2. Placing less important content on the right
3. Fully flexible pages ("liquid" pages)
4. Variable number of columns
5. Axis-oriented pages
6. Modular page components
7. Compressing/Expanding features
8. Variable surface areas
9. Combinations

Liquid Layout
http://www.maxdesign.com.au/articles/liquid/
All containers on the page have their widths defined in percents – meaning that they are completely based on the viewport rather than the initial containing block. A liquid layout will move in and out when you resize your browser window.

Basic Rules:
1. work out a basic layout grid before you begin coding
2. include gutters so that your columns will not spread too wide
3. use percentage units for widths of all containers and gutters
4. do not define containers that use the full width of a page – allow for browser rendering issues (such as percentage rounding)

Tuesday, February 23, 2010

Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
http://www.lipsum.com/

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Wednesday, February 10, 2010

Web Page Optimization

Calculate Time to Load Page
http://webdeveloper.earthweb.com/repository/javascripts/2006/04/827481/load_time.htm

Speed Up Web Site Load Time
http://www.webweaver.nu/html-tips/load-time.shtml

Formatting Tips To Speed up Your Website
1. Use CSS
2. Use External Scripts
3. Remove Anything You Don't Really Need
4. Avoid Nested Tables
5. Avoid Full Page Tables
6. Split Up Long Pages - Multiple Short Pages
7. Remove Excess "Whitespace"

Speed up Images Load Time
1. Don't Go Overboard On Images
2. Height and Width Tags
3. Reduce Image File Size
4. GIF vs JPG vs PNG

ArTech