Absolute or Relative URL issues and the solution


This article demonstrates the issues occur due to the usage of relative URLs while shifting pages from one location to another or the misuse of relative URLs and how to overcome those issues.

Relative URLs examples:
/* HTML example */
<img src="image.jpg" />


/* CSS example */
.image-div
{
    background-image: url(image.jpg);
}

/* JavaScript example */
image.src = 'image.jpg';

Relative URLs and expected issues
In simple words, relative URL reference link on the same server (or domain).
  • <img src="image.jpg" /> Reference of a resource from same directory

  • <img src="../../image.jpg" /> In CSS/HTML, ../ used to reference parent directory. In the above example, ../ is used two times; so it is referencing a resource from 2-level parent directory.

  • <img src="sub-directory/image.jpg" />
    Reference of a resource from sub directory
The issue occurs when when shifting a page from one location to another which cause broken links.

/ and ../ are two different things:
  • <img src="/image.jpg" />
    Reference of a resource from root directory
  • <img src="../image.jpg" />
    Reference of a resource from 1-level parent directory

  • <img src="image.jpg" />
    Reference of a resource from same directory
Absolute URLs: The solution or ...
Absolute URLs solves most of relative URLs issues and also helps prioritized your website (SEO!). Absolute URLs also help testers or late-viewers to understand (+access) the located resource easily.

In JavaScript, we can create a global variable to store domain (root) URL:

/* Global variable */
var domainName = location.protocol + '//' + location.host;

/* Usage */
image.src = domainName + '/image.jpg';

JAMES PADOLSEY way of getting a fully qualified (absolute) URL in JavaScript:

function qualifyURL(url) {
    var img = document.createElement('img');
    img.src = url; // set string url
    url = img.src; // get qualified/absolute url
    img.src = null; // no server request
    return url;
}
// Tested successfully in IE6/7, FF2/3, Safari3, Opera9, Chrome (All on Windows XP) 

// EXAMPLE:
var myRelativeURL = 'blah/page.html';
alert( qualifyURL(myRelativeURL) );

Absolute URLs are helpful when shifting a page from one location to another because you don't have to change resource's URLs from within the shifted page.

A good link for parsing or making absolute URLs in JavaScript: https://gist.github.com/1088850

Protocol Level URLS:
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
<img src="//domain/image.jpg" />
Omitting the protocol—which makes the URL relative—prevents mixed content issues and results in minor file size savings.

What is Curvature?




What is the Curvature?
Curvature is a designer for curving. It generates Canvas 2d APIs relevant code in different forms.

Top Features
Curvature allows you:
  • Curves alignment (in any shape, in any portion of the page, to any point!) 
  • Drag whole drawing (all curves at a time!) 
  • Drag a single curve (all points at a time) 
  • Copy whole drawing and dragging-ability! Generates code in 4 forms: 1) relative coordinates 2) shortened relative coordinates 3) absolute coordinates 4) shortened absolute coordinates
Other common features
  • Undo support (for unlimited curves; whether millions of curves!) 
  • Starting and ending points replacement for a Bezier curve (sometimes: useful) 
  • Auto creates new curves (on mouse movement – on demand!) 
  • Fill color (in the last curve – clarifies the curve!)

New version of Curvature allows you hide/show the coding area so you can have a full drawing surface now!

Source code (Github!)
Source code of Curvature available at Github! https://github.com/muaz-khan/Curvature



What is "Shorten the code"?
This feature shortens the lines of auto generated code! Also it reduces size of the page!

Explain "Make relevant startingX/startingY points"
This feature was included in the first release of the Curvature. It generates relevant code from two points: startingX and startingY.

This feature allows you use e.pageX/e.pageY on these two points so you can easily drag/move whole shape (all curves at a time) without any disturbance.

Is it useful: "Replace starting and ending points' positions at new curve"?
Sure, in the complex shapes – I used it often.

"Auto create new curves" – what is this?
To auto create new curves at mouse movement. You don't have to click "New Curve" button or press "N" key to create new curve(s).

"Temporarily fill a color in the last curve" – isn't it a redundant feature?
For redundancy: it can be a redundant feature. However I included it for those who want to clarify the last curve!

"Drag whole curve/drawing" – Explain
  • "Drag whole curve" feature drags last curve as it is without any disturbance in the real shape of the "last" curve. 
  • "Drag whole drawing" drags whole drawing (at x-y coordinates) without any disturbance in the real shape(s).
Both are most useful features in the Curvature!

"Copy current drawing (all curves)" – isn't it limited?
This feature copies whole drawing and allows you drag "copied drawing". It is limited because it allows only one "paste" for copied drawing. Upcoming version of Curvature may support it fully – till that; use it carefully!

Curves alignment – digging into it



Curvature allows you align curves in two styles:
  • "Align Vertically":- Aligns y-coordinates of all (or selected) points. 
  • "Align Horizontally" (default selected):- Aligns x-coordinates of all (or selected) points.

"Align to relevant topmost points" (default selected) – aligns points with topmost (or first drawn) curve's relevant points.

You can set custom points too for alignment.

Test the tool: https://canvature.appspot.com/

Dragging/Moving shapes smoothly using Canvas 2d APIs


Did you ever write code to drag or move shapes using HTML5 Canvas 2d APIs? If you did, then didn't you ever face a situation (an unexpected behaviour) when you drag or move a shape (e.g. circle, rectangle, image, Bezier cubic/quadratic curve, etc.)?

Fore a live example, please test following demo. Drag any shape (from its any corner):


Didn't you face a sudden jerk on the shape?

Test bottom-part of the demo too. It is working smoothly. There is no sudden jerk!

Let us dig into both examples

circleX = e.pageX - canvas.offsetLeft;
circleY = e.pageY - canvas.offsetTop;

context.arc(circleX, circleY, 50, 0, Math.PI * 2, false);

Each workaround regarding the shape's width/height or radius is inefficient or non-smooth:
  • Extraction of the radius (one or two times) to accurately position the circle
  • Subtraction of half width/height of the shape (rectangle/image) to position it accordingly
Second example/demo is the solution!

But for second example, I've not used pageX/pageY directly; instead I'm doing following steps:

  • Tracking first/previous mouse-down or touch position (x-y coordinates)
  • Extracting the dragged distance from those coordinates
  • Adding or subtracting the distance from shape's coordinates according to the dragging direction (positive or negative x-y axis)


/* Global Variable */
var previousPoints = [0, 0];

/* Mouse Down event! */
{
    var x = ( e.pageX - canvas.offsetLeft ), y = ( e.pageY - canvas.offsetTop );
    
    /* Saving last x-y coordinates! - on mousedown */
    previousPoints = [x, y];
}

/* Mouse Move event! */
{    
    var x = e.pageX - canvas.offsetLeft,
        y = e.pageY - canvas.offsetTop,
    
        /* Previous points: x-y */
        prevX = previousPoints[0],
        prevY = previousPoints[1];
    
        /* Drag direction! */
        positiveX = x > prevX, 
        positiveY = y > prevY, 
    
        /* The dragged distance! */
        value;

    /* This value will be used for x-coordinates */
    value = positiveX ? (x - prevX) : (prevX - x);
    if (positiveX) 
        circleX += value;
    else 
        circleX -= value;

    /* This value will be used for y-coordinates */
    value = positiveY ? (y - prevY) : (prevY - y);
    if (positiveY) 
        circleY += value;
    else 
        circleY -= value;

    /* Saving last x-y coordinates! - on mousemove */
    previousPoints = [x, y];
}

/* And to draw the circle! */
context.arc(circleX, circleY, 50, 0, Math.PI * 2, false);

Quick updates in the Curvature

https://canvature.appspot.com/

Summary: “Now you can directly share code with others!”
※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
Test what I shared with you!
① http://goo.gl/5MdKo 
② http://goo.gl/tZAuJ 
③ http://goo.gl/XXVjg
④ http://goo.gl/Y8NqT
※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
This feature is not only helpful for sharing but also for saving your last drawing or settings via bookmarking.

Click → “Share” button – and share URL! (Hint: use http://goo.gl/ to shorten the URL!!)
※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
★ Note ⇒ Sometimes URL goes too long. In that case, open browser specific dev-tool (F12 or whatever shortcut!) and type location.hash in the Console window/section. (And copy!)

Curvature is a designer allows you draw curves

Releasing Curvature second time!

https://canvature.appspot.com/

Curvature is a designer allows you draw curves. It generates Canvas 2d APIs relevant code in different forms/styles.

Today release contains following new features:
➛ Curves Alignment (align any point, to any coordinate of the screen)
➛ You can drag whole curve (as it is!)
➛ You can drag whole drawing (all curves – without any disturbance!)
➛ You can copy whole drawing exactly!
➛ You can get shortened code too!

Today version also allows you hide/show the coding area; so you can have a full drawing surface, now!

Curvature: https://canvature.appspot.com/

To know the Curvature and too see some screen shots:
http://muaz-khan.blogspot.com/2012/02/what-is-curvature.html

Dragging/Moving shapes smoothly using Canvas 2d APIs

Did you ever write code to drag or move shapes using Canvas 2d APIs? If you did, then didn't you ever face a situation (an unexpected behaviour) when you drag or move a shape (e.g. circle, rectangle, image, Bezier cubic/quadratic curve, etc.)?
This post helps you write code to drag or move shapes as smoothly and accurately as possible using HTML5 Canvas 2d APIs.


http://muaz-khan.blogspot.com/2012/02/draggingmoving-shapes-smoothly-using_12.html

Curvature: HTML5 Canvas Curves Generator/Tool



I designed Curvature: a tool gives you full control over Bezier cubic/quadratic curvesThis tool is under production.
I’ll soon release updated version of this tool. Till that use this old version.

Features of this (old) version:
  • Lets you draw unlimited curves
  • Undo facility for unlimited curves
  • Generates code for you in relative/absolute coordinates


New version that I’ll release soon contains following features:
  • Drag whole curve smoothly
  • Drag whole drawing (all curves at a time) smoothly
  • Relative coordinates for each point (advanced!)
  • Alignment of the curves (for each point!)


And a lot more!

https://github.com/muaz-khan/Curvature