Combining PDF documents with Mac’s Preview

Combining PDFs with Mac's Preview - hassadee.com

Combining PDF documents with Mac’s Preview

Use these steps to move pages between PDF documents.

  1. Open the PDF documents that you want to combine in Preview.
  2. Select “Edit menu > Insert” to insert document that you want to combine with. You can select “Page from Scanner…”, “Page from File …”, or “Blank Page” with this menu.
  3. In Thumbnails view (by choose “View > Thumbnails” to open the Thumbnails pane) you can rearrange page by dragging page(s) in the pane.
  4. After finished all the process, then “Save” the document. Done.

The link_rewrite field {{…}} is invalid issue on PrestaShop 1.4+

“The field link_rewrite (ไทย (Thai))is invalid”
“The field link_rewrite (Deutsch (German)) is invalid”
“The link_rewrite field (Português (Portuguese)) is invalid.”
“The link_rewrite field (Español (Spanish)) is invalid.”
“The link_rewrite field (Français (French)) is invalid.”
“The link_rewrite field (Italiano (Italian)) is invalid.”
“The link_rewrite field (Catalan) is invalid.”
“The link_rewrite field (Galician) is invalid.”

or other language, those responses might occur when you update product category or that form has “Friendly URL field” to fill in.
So how to solve this?

In Friendly URL field, should add only in English. If you do that, this issue is solved.
However, you could add other language as well by setting “accented URL” in “Preferences > SEO”.

Related links:
1. https://www.prestashop.com/forums/topic/97614-the-field-link-rewrite-deutsch-german-is-invalid-after-14-upgrade/
2. http://forge.prestashop.com/browse/PSCFV-9513

[CSS Preprocessor] ความแตกต่างกันระหว่าง Sass และ SCSS

สำหรับคนที่เขียน Sass หรือ SCSS บางครั้งอาจจะสับสนว่าจะบอกคนอื่นยังไงว่าเขียนอะไร จะบอกว่ามันคือ Sass หรือ SCSS ดี? น่าจะเคยมีอารมณ์นี้บ้าง สรุปง่ายๆมันคือ อย่างเดียวกัน ครับ

แล้วทำไมมันถึงมีชื่อเรียก 2 ชื่อ?
เริ่มแรกเดิมที Sass ถือกำเนิดขึ้นมาในปี 2007 ถูกพัฒนามาพร้อมๆกับ Haml โดย Ruby developers ผู้สร้างคนเดียวกันกับ Haml 2 คนคือ Hampton Catlin, Natalie Weizenbaum ส่วน Chris Eppstein นี่ไม่ได้ทำ Haml ด้วย ทำเฉพาะ Sass กับ Compass ที่เป็น Stylesheet Authoring Environment

เป็นที่มาที่ทำให้รูปแบบ syntax ของ Sass แรกๆเลยมันเลยเหมือนๆกับ Haml เป็นแนว indent ครับ
อยู่มาจนกระทั่งเดือนพฤษภาคม ปี 2010 ใน version 3.0 ได้กำหนด SCSS (Sassy CSS) ขึ้นมา ที่รูปแบบ syntax เป็นแบบ brackets {} เพื่อให้เข้าใกล้ความเป็น CSS มากขึ้น แถมพอมี brackets โอกาสเกิดความผิดพลาดในการเขียน และการทำงานร่วมกับผู้อื่นก็ง่ายขึ้นด้วยนะ ตัดปัญหาเรื่อง indent ที่อาจเกิดจากการใช้ editor คนละตัวกันได้เลย *เชียร์ๆ*

มาถึงตรงนี้แล้ว เรามาลองดูความแตกต่างกันของ Sass และ SCSS ดูครับ ในเรื่องของ syntax

Sass

$font-stack:    Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

ส่วน CSS ที่คอมไพล์ออกมาจะหน้าตาเป็นแบบนี้เหมือนกันครับ

Compiled CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

เห็นไหมครับ ถ้าเคยเขียน Haml อยู่แล้ว จะคุ้นเคยกับหน้าตาของ Sass มาก เป็น indent ไม่มี ; แนวจะดูคลีนๆแบบนั้น
เรามาลองดูการใช้ Mixins กันบ้างครับ ถ้าใช้ CSS Preprocessor ผมคิดว่าใช้กันเพราะด้วยเหตุผลที่ต้องการใช้ Mixins นี่แหละลำดับต้นๆ ลองมาดูกัน

Sass

=border-radius($radius)
  -webkit-border-radius: $radius
  -moz-border-radius:    $radius
  -ms-border-radius:     $radius
  border-radius:         $radius

.box
  +border-radius(10px)

SCSS

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box {
    @include border-radius(10px);
}

ส่วนผลลัพธ์ตัว CSS ที่ได้คือไม่ต่างกันเลย

Compiled CSS

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

ในความเห็นของผมนะครับ ถ้าตัดสินใจไม่ถูกว่าจะเลือก Sass หรือ SCSS ผมตัดสินใจให้คือเลือก SCSS ครับ
รูปแบบ brackets ผมยังมองว่าเป็นรูปแบบที่ดีในการลดโอกาสการเกิดความผิดพลาดในการเขียน CSS มาก ยิ่งเว็บไซต์ใหญ่ๆ CSS มักจะบวมครับ ผมเคยเขียนในแบบ Sass ครับ พอต้องเขียนสไตล์ที่สเกลใหญ่ขึ้นเรื่อยๆนี่ค่อนข้างลายตาครับ ยิ่งถ้าใครเขียน Python ทำโปรเจกต์หลายๆคน ใช้ editor คนละตัวกัน อาจเจอปัญหาเรื่อง indent ด้วย สำหรับ Sass นี่ก็อารมณ์เดียวกันเลยครับ บวกกับเราเขียน CSS เราก็ไม่ควรที่จะออกห่างจากรูปแบบการเขียน CSS ที่เป็น standard ของเขาใช่ไหมครับ? ผมคิดว่าอย่างนี้นะ

สำหรับใครที่ต้องการเขียนความแตกต่างเพิ่มเติมของ Sass กับ SCSS ลองเข้าไปดูที่ Sass/SCSS Guide ได้เลยครับ


“เราควรเขียนโปรแกรมให้คนอื่นอ่านได้ด้วย ไม่ใช่ให้คอมพิวเตอร์เข้าใจเพียงอย่างเดียว เขียนในรูปแบบที่จะลดโอกาสในการเกิดข้อผิดพลาดให้มากที่สุดโดยเฉพาะ Human-error และเพื่อรองรับการการบำรุงรักษาและการเติบโตในอนาคต”

SCSS Variable Interpolation #{} / lang::ภาษาไทย

วันนี้เห็นโพสต์พี่เติ้งโพสต์ใน Facebook ว่าเจอโค้ดที่เขียนด้วย SCSS ในท่าประมาณว่า #{$fa-css-prefix}-border { .... } ว่ามันคืออะไร เลยเข้าไปตอบและถือโอกาสเขียน Blog เลย เพราะคิดว่ามันเป็นความสามารถที่สำคัญมากๆของ SCSS ถ้าได้ใช้จะจัดการโค้ด SCSS ได้ง่ายขึ้นมากเลยครับ
ตัวสรุปสามารถดูในภาพข้างล่างได้เลยครับ,

scss-variable-interpolation

แล้ว Variable Interpolation คืออะไร?
ความหมายตรงตัวเลยครับ มันคือการสอดแทรกตัวแปร วิธีการใช้คือ

ตัวอย่างที่ 1
SCSS

$name: foo;
$attr: border;
p.#{name} {
    #{$attr}-color: blue;
}

Compiled CSS

p.foo {
  border-color: blue;
}

ซึ่งการใช้งานหลักๆจะเป็นไปในรูปแบบของ text ครับ ซึ่ง operations ต่างๆจะไม่มีผลกับค่าที่อยู่ภายใน #{} เลย
หากใครที่เขียน SCSS อยู่แล้วจะพอทราบว่าเราจะใช้ตัวแปร แบบ $variable เข้ามาเลย อาจจะเอาไป /, +, -, *, หรือด้วย operations ใดก็แล้วแต่ ค่าที่ได้คือมันจะคำนวณออกมา แต่หากใช้ #{} ค่าที่ compile ออกมาจะไม่เปลี่ยนแปลงครับ
ตัวอย่างเช่น

ตัวอย่างที่ 2
SCSS

p {
    $font-size: 12px;
    $line-height: 30px;
    font: #{$font-size}/#{$line-height};
}

Compiled CSS

p {
    font: 12px/30px;
}

นอกจากนี้ยังเป็นประโยชน์มากเวลาจัดกลุ่ม selector ให้เป็นระเบียบ, การแทนที่ prefix ต่างๆ, การกำหนด file path สำหรับใช้งานอื่นๆ ตัวอย่างที่ผมใช้เองบ่อยๆก็จะเป็นทั้ง 3 อย่างเลยครับ ยกตัวอย่างเช่นการกำหนด file path

SCSS

$path:  "../fonts/";

@font-face {
    font-family: 'open-sans-light';
    src: url(#{$path}opensans-light-webfont.eot);
    src: url(#{$path}opensans-light-webfont.eot?#iefix) format('embedded-opentype'),
         url(#{$path}opensans-light-webfont.woff) format('woff'),
         url(#{$path}opensans-light-webfont.ttf) format('truetype'),
         url(#{$path}opensans-light-webfont.svg#open_sanslight) format('svg');
    font-weight: normal;
    font-style: normal;
}

Compiled CSS

$path:  "../fonts/";

@font-face {
    font-family: 'open-sans-light';
    src: url(../fonts/opensans-light-webfont.eot);
    src: url(../fonts/opensans-light-webfont.eot?#iefix) format('embedded-opentype'),
         url(../fonts/opensans-light-webfont.woff) format('woff'),
         url(../fonts/opensans-light-webfont.ttf) format('truetype'),
         url(../fonts/opensans-light-webfont.svg#open_sanslight) format('svg');
    font-weight: normal;
    font-style: normal;
}

เท่านี้ผมว่าผู้อ่านคงพอจะสามารถนำความสามารถนี้ของ SCSS ไปใช้งานต่อเพื่อสร้างเว็บไซต์ที่มีคุณภาพได้อีกเยอะแล้วครับ : )

อ้างอิง:
ตัวอย่าง 1 และ ตัวอย่าง 2 ผมนำมาจาก: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

How to convert, resize, and center image with ImageMagick

Cause (If you want to go to the method, skip this part):

I have one project that I have to add product to an e-commerce website and client sent me product images in PSD file and I need to convert it into JPG or PNG file to upload to the site. So the problem is, I don’t have Photoshop and (if I have) I don’t know how to use it. Hence, I find this solution, use ImageMagick to convert, resize, and center all images with ImageMagick instead of buying Photoshop to do it (or using GIMP).

Method part:

If what you want to do is same as mine, PSD file, PSD has layer, mostly you want to convert it at the first layer. But if you want to know how many layer in PSD file you can use command “identify” to check it out,

Example:

ImageMagick identify command

The result will look like this,

ImageMagick Identify result
ImageMagick Identify result

Now you will see size, type, and other detail of its.
And how to get to each layer of its file is, [number] for example, image.psd[0], or image.psd[1]

Next step is, get to the point “convert, resize, and center image”
You can use the command below to get what you want,

ImageMagick convert

Note: -extend value must larger than source image size that you get from identify

See the result and source file below,
You can see image’s aspect at the source file and what ImageMagick does. It’s awesome that you can done this job with single line of command in your Terminal/Command-line tool.

PSD source file
PSD source file
Converted image file by ImageMagick
Converted image file by ImageMagick

Identify software on the websites you visit with Wappalyzer

The icons displayed by Wappalyzer represent the software used to create the website.
The icons displayed by Wappalyzer represent the software used to create the website.

Today I found a very good tool to identify software on the websites that you visit on my Facebook timeline from my friend’s post. Its named Wappalyzer, you can download it from wappalyzer.com and install the extension on Mozilla Firefox or on Google Chrome.

It’s a great extension that you should have in your web browser if you are a web developer, it will make your life easier.

Install and Configure wget on OS X 10.7+ and fix SSL GNUTLS error

Pre-requisite:

1. Install Xcode (Because you need to compile wget source, it using GCC compiler)

2. Install Command Line Tool

Download

Using curl to get wget


curl -O http://ftp.gnu.org/gnu/wget/wget-1.16.tar.gz
tar -xzvf wget-1.16.tar.gz
cd wget-1.16
./configure --with-ssl=openssl
make
sudo make install

Note 1: The reason to use “–with-ssl=openssl” because GNUTLS is not included with Mac OS X. Wget needs to have some type of SSL, so we can use OpenSSL instead. Otherwise you can get this error “configure: error: --with-ssl=gnutls was given, but GNUTLS is not available.

Note 2: other version of GNU Wget can be found at http://ftp.gnu.org/gnu/wget/