Category Archives: Web Development

Web Development

SVG clip-path doesn’t work in html5mode

Leave a comment

I am working on an AngularJS project with html5mode enabled. I would like to implement the Card Expansion effect written on Codrops. Everything works fine but the SVG clip-path animation doesn’t work.

This is because i have ended the <base> tag in the index.html for the html5mode so the clip-path value has to be an absolute path. i.e.

<!-- fail with base tag -->
<image clip-path="url(#clipPath1)" width="1920" height="500" xlink:href="a.jpg"></image>

Change to

<!-- it works! -->
<image clip-path="url(http://localhost:10000/project#clipPath1)" width="1920" height="500" xlink:href="a.jpg"></image>

 

If you want it to work on IE, please refer to the post in the reference.

Done =)

Reference: StackOverflow – Svg clipPath in AngularJS app with url in hashbang mode

Web Development

Gulp – Handle page reload in gulp-connect using connect-history-api-fallback

Leave a comment

Page reload doesn’t work after enabled the html5mode. We have to rewrite the url and it could be easily done by using a middleware for the connect server.

gulpfile.js

var connect            = require('gulp-connect');
var historyApiFallback = require('connect-history-api-fallback');

gulp.task('connect', function() {
  connect.server({
    middleware: function(connect, opt) {
      return [ historyApiFallback({}) ];
    }
  });
});

 

Done =)

Reference: GitHub – bripkens/connect-history-api-fallback

CSS, HTML, Web Development

Offset the anchor link for sticky header

Leave a comment

If you have a sticky header (Position fixed header on the top of the html page), your anchor link with CSS ID would not work as you expected. The target section would be covered by the position fixed header.

You can use the following CSS to offset the fixed header height.

/* The target CSS ID with :before pseudo class */
.offset:before { 
  display: block; 
  content: " "; 
  height: 150px;      /* Give height of your fixed element */
  margin-top: -150px; /* Give negative margin of your fixed element */    
  visibility: hidden; 
}

 

Done =)

Reference: Offsetting Anchor Hash Tag Links To Adjust For Fixed Header

Chrome, Web Development

Chrome – Bypass Access-Control-Allow-Origin on Mac

Leave a comment

About a year ago, i posted an article about allowing the Javascript accessing the local file system in order to read the local JSON file.

 

So if you are using Mac, you need to quit the Chrome application. Then execute the following command in Terminal.

/usr/bin/open -a "/Applications/Google Chrome.app" --args --allow-file-access-from-files

 

Reference: Disable same origin policy in Chrome on Mac OSX

AngularJS, Web Development

Yeoman – Setup AngularJS and Foundation 5 with Sass

7 Comments

The generator-angular written by the Yeoman team comes with Bootstrap integration. But instead of using Bootstrap, i would like to use Foundation 5 with Sass. The following example is created under Node.js v0.10.29.

1. Create your project directory. In my case, i will name the project ng-foundation.

mkdir ng-foundation

 

2. Move to the ng-foundation folder.

cd ng-foundation

 

3. Scaffold the AngularJS project using the generator-angular as usual.

yo angular

Continue reading Yeoman – Setup AngularJS and Foundation 5 with Sass →

Chrome, Web Development

Chrome – Bypass Access-Control-Allow-Origin on local file system

2 Comments

Just wanna do some proof of concept on reading a JSON file in Javascript. So i open the index.html and read the JSON file locally. But the Chrome console throw the Access-Control-Allow-Origin error.

  • XMLHttpRequest cannot load file:///C:/Users/user/Desktop/readJson/data/file-1.json. Origin null is not allowed by Access-Control-Allow-Origin.

Although it should work if i upload those sources files to a web server, i would still make it work locally especially for development purpose. So here is a small trick which could ask the Chrome browser to bypass this cross-domain restriction.
Continue reading Chrome – Bypass Access-Control-Allow-Origin on local file system →

Web Development

Manage your project dependencies using Bower

1 Comment

Let’s continue our tour on Yeoman.

 

Bower is a tool to manage your js dependencies of your project. you can find out all the dependencies on the bower.json. The bower.json below is the one initialized in the AngularJS project.
Continue reading Manage your project dependencies using Bower →

Web Development

Setup Yeoman in Windows PowerShell

4 Comments

Update @ 2015-09-23: Using PowerShell is just my personal preference, You could use MS-DOS in Windows if your machine doesn’t have PowerShell installed.

1. Download Node.js and install it and make sure you have the npm package manager selected before the installation.
setup-yeoman-in-powershell-1
 
Continue reading Setup Yeoman in Windows PowerShell →