Category Archives: Stories

Fix bug Foundation 6 doesn’t show Filename when choosing file

$(document).on('change', '[type=file]', function () {
    var $me = $(this),
        classFileName = 'file-name',
        $fileNameContainer = $me.next('.' + classFileName),
        fileName = baseName($me.get(0) && $(this).get(0).value),
        maxLength = 20;
    if (fileName.length > maxLength) {
        fileName = fileName.substring(0, maxLength - 1) + '...';
    }
    if (isEmpty($fileNameContainer)) {
        $fileNameContainer = $('<span class="' + classFileName + '">' + fileName + '</span>');
        $fileNameContainer.insertAfter($me);
    } else {
        $fileNameContainer.text(fileName);
    }
});
Advertisements

Creating login middleware in Express Node js

app.js

...
app.use(require('./login')); /* include middleware login */
...

index.js

var express = require('express');
var router = express.Router();
router.all('/', function (req, res) {
  res.render('index', {
    title: 'Express'
  });
});
module.exports = router;

Continue reading Creating login middleware in Express Node js

Cách xây dựng directive bằng Angular Js 1

Khi tạo 1 directive, đầu tiên ta phải suy nghĩ xem ta viết cái gì? Sau đó ta xem directive của ta hoạt động ra sao? Và cuối cùng là ta truyền vào cái gì để nó hoạt động?

Để mô tả luồng tư duy, mình thử viết 1 modal directive cơ bản nhất:
– Viết cái gì: Modal
– Hoạt động: Modal có tính năng click vào button thì hiện lên, click vào background thì tắt đi.
– Truyền vào: Biến bật/tắt và Content của modal.

Sau khi tư duy xong, ta có thể khái quát được mô hình như sau:
– name directive: modalWindow
– replace: true (dĩ nhiên)
– transclude: true (vì cần truyền content vào modal, sau này cứ khi nào directive cần truyền dynamic content vào thì transclude là true hết)
– biến bật/tắt: show (false là tắt, true là bật) Continue reading Cách xây dựng directive bằng Angular Js 1

Angular Js 1: Auth check when change state

Controller:

...
$stateProvider
  .state('home.contact', {
    url: '/contact',
    resolve: {
      currentAuth: function(AuthFactory) {
        return AuthFactory.authPromise();
      }
    }
  });
...

Service:

...
.factory('AuthFactory', function ($q, $timeout, $rootScope) {
  var factoryObject = {
    authPromise: function () { /* promise to check is login or not */
      // Initialize a new promise
      var deferred = $q.defer();
      $timeout(function () {
        if ($rootScope.isAuthenticated) {
          deferred.resolve();
        } else {
          deferred.reject('AUTH_REQUIRED');
        }
      });
      return deferred.promise;
    }
  };
  return factoryObject;
})
...

Root Controller:

...
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
  if (error === 'AUTH_REQUIRED') {
    $state.go('home.dash');
  }
});
...

Use promise in Angular Js 1

// Story: One morning, a father says to his son: "Go and get the weather forecast, son!"
// Every Sunday morning, a father asks his son to go and find out the weather forecast for the afternoon, by using his super-strong telescope to look across the horizon from the tallest hill by their house. The son promises his dad he will go and get the weather forecast. He creates a promise with his dad at the door when he leaves.
// At that point, the dad decides if the weather tomorrow is good, he'll prepare a fishing trip for tomorrow. If it's bad he won't. Also, if the son is unable to get a forecast, he'll stay in as well.
// After 30mins or so, the son comes back. Different things happen from week-to-week
// ---------------------------------------------------------------------------
// can detect the result
var prepareFishingTrip = function (data) {
    console.log('the weather is fine');
    console.log(data);
};
var prepareSundayRoastDinner = function prepareSundayRoastDinner (data) {
    console.log('the weather is bad');
    console.log(data);
};
// can't detect the result
var dontKnowPrepareSundayRoastDinnerOrNot = function prepareSundayRoastDinner (res) {
    console.log('the son can\'t retrieve the weather, he return everything');
    console.log(res);
};
angular.module('myApp', [])
.factory('SonService', function ($http, $q) {
    return {
        getWeather: function() {
            // the $http API is based on the deferred/promise APIs exposed by the $q service
            // so it returns a promise for us by default
            return $http.get('http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=2de143494c0b295cca9337e1e96b00e0')
                .success(function(res) {
                    if (typeof res.data === 'object') {
                        return res.data;
                    } else {
                        // invalid response
                        return $q.reject(res);
                    }
                })
                .error(function(res) {
                    // something went wrong
                    return $q.reject(res);
                });
        }
    };
})
.controller('Ctrl', function($q, SonService) {
    SonService.getWeather()
        // success() called when son gets back
        .success(function(data) {
            // promise fulfilled
            if (data.wind && data.wind.speed > 2) { // if success
                prepareFishingTrip(data);
            } else {
                prepareSundayRoastDinner(data); // if the weather is not good
            }
        })
        .error(function(res) {
            // promise rejected
            dontKnowPrepareSundayRoastDinnerOrNot(res);
        });
});

Apache/Nginx/Xampp apache enable CORS Access-Control-Allow-Origin for Angular Js

More information, you should check here: https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
How CORS works:
1
The browser sends the OPTIONS request with an Origin HTTP header. The value of this header is the domain that served the parent page. When a page from http://www.foo.com attempts to access a user’s data in bar.com, the following request header would be sent to bar.com:

Origin: http://www.foo.com

The server may respond with:
An Access-Control-Allow-Origin (ACAO) header in its response indicating which origin sites are allowed. For example:

Access-Control-Allow-Origin: http://www.foo.com

Preflight example
When performing certain types of cross-domain AJAX requests, modern browsers that support CORS will insert an extra “preflight” request to determine whether they have permission to perform the action.

OPTIONS /
Host: bar.com
Origin: http://foo.com

If bar.com is willing to accept the action, it may respond with the following headers:

Access-Control-Allow-Origin: http://foo.com
Access-Control-Allow-Methods: PUT, DELETE

Continue reading Apache/Nginx/Xampp apache enable CORS Access-Control-Allow-Origin for Angular Js

Set up browser-sync with Gulp

var gulp = require('gulp'),
    browserSync  = require('browser-sync').create(),
    gulpif       = require('gulp-if'),
    gutil        = require('gulp-util'),
    uglify       = require('gulp-uglify'),
    concat       = require('gulp-concat'),
    cssmin       = require('gulp-cssmin'),
    sass         = require('gulp-sass'),
    sourcemaps   = require('gulp-sourcemaps'),
    plumber      = require('gulp-plumber');
var errorHandle = function (error) {
    gutil.log(gutil.colors.red(error.message));
    this.emit('end');
};
var production = false;
/**
 * Copy any needed files
 * Do a 'gulp copyfiles' after bower updates
 **/
gulp.task("copyfiles", function() {
    ...
});
var paths = {};
paths.scripts_1 = [
    ...
];
paths.scripts_2 = [
    ...
];
paths.scripts_3 = [
    ...
];
paths.css_1 = [
    ...
];
paths.css_2 = [
    ...
];
gulp.task('buildVendorJs', function() {
  return gulp.src(paths.scripts_1)
      .pipe(plumber(errorHandle)) /* replaces pipe method and removes standard onerror handler on error event */
      .pipe(sourcemaps.init())
      .pipe(concat('vendors.js'))
      .pipe(gulpif(production, uglify({ mangle: false })))
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('./public/assets/js'));
});
gulp.task('buildAppJs', function() {
  return ...;
});
gulp.task('buildLangJs', function() {
  return ...;
});
gulp.task('buildVendorCss', function() {
  return gulp.src(paths.css_1)
      .pipe(plumber(errorHandle)) /* replaces pipe method and removes standard onerror handler on error event */
      .pipe(sourcemaps.init())
      .pipe(concat('vendors.css'))
      .pipe(sass())
      .pipe(gulpif(production, cssmin()))
      .pipe(sourcemaps.write('./'))
      .pipe(gulp.dest('./public/assets/css'));
});
gulp.task('buildAppCss', function() {
  return ...;
});
gulp.task('default', ['buildVendorJs', 'buildAppJs', 'buildLangJs', 'buildVendorCss', 'buildAppCss'], function () {
  browserSync.init({
      proxy:      'my.app'
  });
  gulp.watch(paths.scripts_1, ['buildVendorJs', browserSync.reload]);
  gulp.watch(paths.scripts_2, ['buildAppJs', browserSync.reload]);
  gulp.watch(paths.scripts_3, ['buildLangJs', browserSync.reload]);
  gulp.watch(paths.css_1, ['buildVendorCss', browserSync.reload]);
  gulp.watch(paths.css_2, ['buildAppCss', browserSync.reload]);
  gulp.watch([
    'app/Http/**/*',
    'app/Library/**/*',
    'app/Models/**/*',
    'app/*',
    'resources/views/**/*'
  ], browserSync.reload);
});

Giải pháp để fix production bugs bằng Git Stash

Giả sử trường hợp là project chúng ta đang làm ổn định. Và chúng ta đã đi được gần hết task, đùng 1 cái thì cấp trên báo rằng có bug trên live, nhờ ta fix. Vậy giải pháp lúc đó là như thế nào?

GIT

Đầu tiên bạn gọi:
git stash
# Lệnh này sẽ save lại những việc bạn đã làm trong task vừa qua và cất nó đi 1 nơi an toàn nào đó, đồng thời code se quay về thời điểm trước khi ta commit (tức là = với git reset –hard)

Sau đó bạn fix production bugs, và commit, sau đó up lên live luôn.

Sau khi done việc mà cấp trên báo, giờ là lúc bạn keep working những việc bạn đang làm dở dang. Lúc này bạn chỉ việc gọi:
git stash pop
# Lệnh này sẽ cut những file bạn đã change trước đó, và paste vào project của bạn(tương tự git pull trên server về). Việc còn lại là resolve những file bị conflict nếu có.

Tổng hợp lại git stash giống như là pause công việc của bạn lại, và sau đó git stash pop sẽ giúp bạn continue tiếp sau khi bạn pause.

Hope Speak – những trang đầu

Vậy là sau 1 quá trình dài, hôm nay mình cũng release được trang account của Hope Speak, nhìn chung thì giao diện cũng khá bắt mắt (theo ý mình) và mình khá tự hào về điều đó. Hi vọng website sẽ phát triển hơn nữa !!!

———

So after a long time, today I release Hope Speak account page. In general, the interface is quite stunning ( according to me), and I am pretty proud of that. Hopefully, the website will grow more !!!

———

Hope Speak account page
Hope Speak account page

View more on: https://www.hopespeak.com

Building a Social Profile Widget: Get Your Follower Count

A feature that’s becoming more common with websites is the social media profile widget. The widget consists of icons and text that link to a number of social network profiles to which the website is associated. Some of these widgets also show the number of followers on each of their respective social network.

There are a lot of free and premium social profile widget plugins available for WordPress that one can use in linking to his/her personal or website social network’s profiles.

In this two-part series, I will show how to get the count of Facebook page Likes, Twitter and Google+ Followers, and how to build a social profile WordPress widget.

We’ll be focusing on Facebook, Twitter, and Google+ because they are three of the biggest social networks.

Read more at: tutplus