TOSDN http://www.tosdn.com Thailand Open Source Development Network Wed, 02 Apr 2014 10:13:28 +0000 en-US hourly 1 http://wordpress.org/?v=3.9 Brick – Web Fonts that Actually Look Good http://www.tosdn.com/designer/brick-web-fonts http://www.tosdn.com/designer/brick-web-fonts#comments Wed, 02 Apr 2014 10:13:28 +0000 http://www.tosdn.com/?p=1617 Posted by few on Brick – Web Fonts that Actually Look Good

Web Font แจกฟรี เน้นสวยงามและเป็นระเบียบ จะโหลดมาติดตั้งใช้เองหรือจะใช้แบบ CDN เลยก็ได้ สะดวกดีครับ

The post Brick – Web Fonts that Actually Look Good appeared first on TOSDN.

]]>
Posted by few on Brick – Web Fonts that Actually Look Good

In the age of the Internet, we’ve found ourselves in yet another typographic battle. In an effort to speed up loading times, we’ve compressed fonts, and along the way, we’ve lost the majority of the quality of rendered type.

Let’s change that. The fonts served by Brick are clones of the original, converted without modification to WOFF format for high quality rendering and fast loading across all modern browsers.

  • Beautiful

    We don’t modify or subset the font in any way, so they are rendered the way they were meant to be seen.

  • Fast

    Fonts are served throughFastly’s industry-leading CDN network throughout and supported by Linode’s reliable infrastructure.

  • Open source

    Brick is entirely open-source, so in addition to being free, anyone interested can contribute to the project.

The post Brick – Web Fonts that Actually Look Good appeared first on TOSDN.

]]>
http://www.tosdn.com/designer/brick-web-fonts/feed 0
Avatars and Emoticons Vector Set http://www.tosdn.com/designer/avatars-emoticons-vector-set http://www.tosdn.com/designer/avatars-emoticons-vector-set#comments Tue, 01 Apr 2014 05:02:17 +0000 http://www.tosdn.com/?p=1613 Posted by few on Avatars and Emoticons Vector Set

ภาพการ์ตูนเวกเตอร์ (Vector) ใบหน้าคน สำหรับไปใช้ทำงานต่างๆ โดยมันแยกออกมาเป็นชิ้นส่วน เช่น ปาก จมูก ตา หู ผม ทำให้เราสามารถผสมใบหน้าได้หลากหลายรูปแบบเลยทีเดียว

The post Avatars and Emoticons Vector Set appeared first on TOSDN.

]]>
Posted by few on Avatars and Emoticons Vector Set

ภาพการ์ตูนเวกเตอร์ (Vector) ใบหน้าคน สำหรับไปใช้ทำงานต่างๆ โดยมันแยกออกมาเป็นชิ้นส่วน เช่น ปาก จมูก ตา หู ผม ทำให้เราสามารถผสมใบหน้าได้หลากหลายรูปแบบเลยทีเดียว

An avatar is the graphical representation of the user or the user’s alter ego or character. An emoticon or smiley is a pictorial representation of a facial expression to express a person’s feelings or mood. They are massively use in e-mail, chat, text messages and other forms of communication to dramatize the plain text.

This Avatars and Emoticons Vector set contains over 1,000 combinations available in AI and EPS format that have been lovingly and exclusively prepared for WebAppers readers. You can create your own avatar with those heads, hair, eyes, mouth and accessories icons.

preview-emoticonos

The post Avatars and Emoticons Vector Set appeared first on TOSDN.

]]>
http://www.tosdn.com/designer/avatars-emoticons-vector-set/feed 0
Font Awesome – The iconic font designed for Bootstrap http://www.tosdn.com/designer/font-awesome http://www.tosdn.com/designer/font-awesome#comments Tue, 01 Apr 2014 04:44:18 +0000 http://www.tosdn.com/?p=1602 Posted by few on Font Awesome – The iconic font designed for Bootstrap

Font Awesome สำหรับ Bootstrap (เอาไปดัดแปลงใช้กับอย่างอื่นก็ได้) มันคือเวกเตอร์ไอคอน (vector icons) ที่ถูกสร้างขึ้นจาก Font ครับ

The post Font Awesome – The iconic font designed for Bootstrap appeared first on TOSDN.

]]>
Posted by few on Font Awesome – The iconic font designed for Bootstrap

ทำงานร่วมกับ CSS เท่านั้น ไม่ต้องใช้ Javascript ดังนั้นเราจะใช้ในขนาดใหญ่มาก หรือเล็กมาก ภาพก็ยังสวย และทำงานได้รวดเร็วเพราะขนาดไม่ใหญ่ ตอนนี้นิยมมาก แทนการใช้รูปภาพไอคอนทั่วไป

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

 One Font, 369 Icons

In a single collection, Font Awesome is a pictographic language of web-related actions.

 No JavaScript Required

Fewer compatibility concerns because Font Awesome doesn’t require JavaScript.

 Infinite Scalability

Scalable vector graphics means every icon looks awesome at any size.

 Free, as in Speech

Font Awesome is completely free for commercial use. Check out the license.

 CSS Control

Easily style icon color, size, shadow, and anything that’s possible with CSS.

 Perfect on Retina Displays

Font Awesome icons are vectors, which mean they’re gorgeous on high-resolution displays.

 Made for Bootstrap

Designed from scratch to be fully compatible withBootstrap 3.0.0.

 Desktop Friendly

To use on the desktop or for a complete set of vectors, check out the cheatsheet.

 Screen Reader Compatible

Font Awesome won’t trip up screen readers, unlike other icon fonts.

The post Font Awesome – The iconic font designed for Bootstrap appeared first on TOSDN.

]]>
http://www.tosdn.com/designer/font-awesome/feed 0
Gremlins.js – Simulates Random User Actions http://www.tosdn.com/developer/javascript/gremlins-js http://www.tosdn.com/developer/javascript/gremlins-js#comments Mon, 31 Mar 2014 10:27:40 +0000 http://www.tosdn.com/?p=1605 Posted by few on Gremlins.js – Simulates Random User Actions

Javascript สำหรับจำลองการสุ่มคลิก (ฝรั่งเรียกว่า monkey testing) โดยมันจะลองคลิกทุกจุด กรอกข้อมูลในฟอร์ม คลิกเม้าส์ย้าย element ต่างๆ เพื่อให้เห็นการทำงานของ action ต่างๆ และตรวจสอบว่าพบ Javascript error หรือไม่

The post Gremlins.js – Simulates Random User Actions appeared first on TOSDN.

]]>
Posted by few on Gremlins.js – Simulates Random User Actions

gremlins.js is a  library written in JavaScript, for Node.js and the browser. Use it to check the robustness of web applications by unleashing a horde of undisciplined gremlins.

Purpose

While developing an HTML5 application, did you anticipate uncommon user interactions? Did you manage to detect and patch all memory leaks? If not, the application may break sooner or later. If n random actions can make an application fail, it’s better to acknowledge it during testing, rather than letting users discover it.

Gremlins.js simulates random user actions: gremlins click anywhere in the window, enter random data in forms, or move the mouse over elements that don’t expect it. Their goal: triggering JavaScript errors, or making the application fail. If gremlins can’t break an application, congrats! The application is robust enough to be released to real users.

This practice, also known as Monkey testing or Fuzz testing, is very common in mobile application development (see for instance the Android Monkey program). Now that frontend (MV*, d3.js, Backbone.js, Angular.js, etc.) and backend (Node.js) development use persistent JavaScript applications, this technique becomes valuable for web applications.

The post Gremlins.js – Simulates Random User Actions appeared first on TOSDN.

]]>
http://www.tosdn.com/developer/javascript/gremlins-js/feed 0
Chart.js – Simple HTML5 Charts using the canvas http://www.tosdn.com/developer/css-html/chart-js http://www.tosdn.com/developer/css-html/chart-js#comments Wed, 26 Mar 2014 07:57:26 +0000 http://www.tosdn.com/?p=1599 Posted by few on Chart.js – Simple HTML5 Charts using the canvas

Easy, object oriented client side graphs for designers and developers 6 Chart types Visualise your data in different ways. Each of them animated, fully customisable and look great, even on retina displays. HTML5 Based Chart.js uses the HTML5 canvas element. It supports all modern browsers, and polyfills provide support for IE7/8. Simple and flexible Chart.js […]

The post Chart.js – Simple HTML5 Charts using the canvas appeared first on TOSDN.

]]>
Posted by few on Chart.js – Simple HTML5 Charts using the canvas

Easy, object oriented client side graphs for designers and developers

6 Chart types
Visualise your data in different ways. Each of them animated, fully customisable and look great, even on retina displays.

HTML5 Based
Chart.js uses the HTML5 canvas element. It supports all modern browsers, and polyfills provide support for IE7/8.

Simple and flexible
Chart.js is dependency free, lightweight (4.5k when minified and gzipped) and offers loads of customisation options.

The post Chart.js – Simple HTML5 Charts using the canvas appeared first on TOSDN.

]]>
http://www.tosdn.com/developer/css-html/chart-js/feed 0
Invoice Ninja – Open Source Intuitive Invoicing Tool http://www.tosdn.com/developer/php/invoice-ninja http://www.tosdn.com/developer/php/invoice-ninja#comments Wed, 26 Mar 2014 07:45:40 +0000 http://www.tosdn.com/?p=1596 Posted by few on Invoice Ninja – Open Source Intuitive Invoicing Tool

ระบบทำเอกรายการสั่งซื้อ มีฟอร์มกรอกข้อมูลเข้าใจง่ายและสวยงาม สามารถออกเอกสารได้ในรูปแบบ PDF, ส่งอีเมล์หลังจากสร้างเสร็จ, และบันทึกเก็บไว้ใช้ในคราวต่อๆไปได้ พัฒนาระบบด้วย PHP บน Laravel Framework และ JavaScript

The post Invoice Ninja – Open Source Intuitive Invoicing Tool appeared first on TOSDN.

]]>
Posted by few on Invoice Ninja – Open Source Intuitive Invoicing Tool

Most online invoicing sites are expensive. They shouldn’t be. The aim of this project is to provide a free, open-source alternative. Additionally, the hope is the codebase will serve as a sample site for Laravel as well as other JavaScript technologies.

The high level instructions for setting up the site are below but there’s also a setup guide. For discussion of the code please use the Google Group.

For updates follow @invoiceninja or join the Facebook Group.

Site design by kantorp-wegl.in

Features

  • Core application built using Laravel 4.1
  • Invoice PDF generation directly in the browser
  • Integrates with many payment providers
  • Recurring invoices
  • Tax rates and payment terms

The post Invoice Ninja – Open Source Intuitive Invoicing Tool appeared first on TOSDN.

]]>
http://www.tosdn.com/developer/php/invoice-ninja/feed 0
PNotify – JavaScript notifications for Bootstrap or jQuery UI http://www.tosdn.com/developer/javascript/pnotify-javascript-notifications-bootstrap-jquery-ui http://www.tosdn.com/developer/javascript/pnotify-javascript-notifications-bootstrap-jquery-ui#comments Wed, 26 Mar 2014 05:37:27 +0000 http://www.tosdn.com/?p=1593 Posted by few on PNotify – JavaScript notifications for Bootstrap or jQuery UI

PNotify is a JavaScript notification plugin, developed by SciActive. Formerly known as Pines Notify. It is designed to provide an unparalleled level of flexibility, while still being very easy to implement and use.  Cross-Browser PNotify works in all major browsers and provides a consistent interface. It is tested thoroughly for consistency.  Unobtrusive PNotify can provide non-blocking notices. This […]

The post PNotify – JavaScript notifications for Bootstrap or jQuery UI appeared first on TOSDN.

]]>
Posted by few on PNotify – JavaScript notifications for Bootstrap or jQuery UI

PNotify is a JavaScript notification plugin, developed by SciActive. Formerly known as Pines Notify. It is designed to provide an unparalleled level of flexibility, while still being very easy to implement and use.

 Cross-Browser

PNotify works in all major browsers and provides a consistent interface. It is tested thoroughly for consistency.

 Unobtrusive

PNotify can provide non-blocking notices. This allows the user to click elements behind the notice without even having to dismiss it.

See All Features

 Themeable

PNotify uses either Bootstrap or jQuery UI for styling, which means it is fully and easily themeable. Try out some of the readymade themes using the selector in the top right corner of this page.

jQuery ThemeRoller Ready

 Completely Open

PNotify is distributed under the GPLLGPL, and MPL. This triple copyleft licensing model avoids incompatibility with other open source licenses.

The post PNotify – JavaScript notifications for Bootstrap or jQuery UI appeared first on TOSDN.

]]>
http://www.tosdn.com/developer/javascript/pnotify-javascript-notifications-bootstrap-jquery-ui/feed 0
Facebook เปิดตัว Hack Language ภาษาเขียนโปรแกรมใหม่ http://www.tosdn.com/lifestyle/update/facebook-hack-language http://www.tosdn.com/lifestyle/update/facebook-hack-language#comments Wed, 26 Mar 2014 04:04:47 +0000 http://www.tosdn.com/?p=1583 Posted by few on Facebook เปิดตัว Hack Language ภาษาเขียนโปรแกรมใหม่

Facebook เปิดตัว Hack Language ภาษาเขียนโปรแกรมชนิดใหม่ ในรูปแบบ Open Source ผสมผสานระหว่างภาษา PHP กับการนำเอาความสามารถพิเศษของภาษาอื่นๆ เช่น C++ มาใช้

The post Facebook เปิดตัว Hack Language ภาษาเขียนโปรแกรมใหม่ appeared first on TOSDN.

]]>
Posted by few on Facebook เปิดตัว Hack Language ภาษาเขียนโปรแกรมใหม่

โดยภาษา Hack ได้ถูกออกแบบมาเพื่อทำงานบน HHVM (หรือ HipHop Virtual Machine) และ PHP ได้เป็นอย่างดี จากเนื้อข่าวที่ผมได้ติดตามมา เป็นการปรับปรุงความสามารถของ PHP ให้เหมาะกับใช้พัฒนาในโครงการขนาดใหญ่ เช่น การระบุชนิดตัวแปร และระบุได้ว่าตัวแปรประเภทใดเป็น Null ได้, Generics, Collection เช่น Vector/Set/Pair เป็นชนิดตัวแปรพื้นฐาน, Lambda สร้างฟังก์ชั่น

hack-programming-language-facebook-code

เปรียบเทียบ: ซ้ายมือคือ PHP, ขวามือคือ Hack

ใครเคยเขียน PHP คงรู้ว่ามันสามารถสร้างตัวแปรโดยไม่ต้องระบุชนิดของตัวแปร เช่น  INT, CHAR จึงทำให้เขียนได้ง่ายและเร็ว แต่ด้วยความสะดวกนั้นก็แลกกับการประมวลผลที่มากขึ้นเพื่อให้ระบบตรวจสอบว่าตัวแปรที่เราใช้ควรเป็นประเภทไหน ส่งผลกับโอกาสการมี error ที่มากขึ้น (รวมไปถึงการจัดการกับ error ก็ยังไม่สมบูรณ์) แต่ทั้งนี้ทั้งนั้นโปรแกรมเมอร์ก็สามารถเลือกที่จะเขียนภาษา Hack ในรูปแบบใหม่นี้ หรือแบบเดิมเหมือน PHP ก็ได้

ใครอยากศึกษาความแตกต่างระหว่าง Hack และ PHP เพื่อเปลี่ยนไปใช้มัน ก็ลอง เล่น Hack Tutorial ได้เลยครับ ให้เราลองพิมพ์ทีละ step เลย ว่าการเปลี่ยนจาก PHP เป็น Hack ต้องทำจุดไหนบ้าง

hack-1

 

อ้างอิงจาก

  • http://hacklang.org/
  • http://ostatic.com/blog/facebook-releases-open-source-hack-language-to-improve-on-php
  • https://www.blognone.com/node/54609

 

The post Facebook เปิดตัว Hack Language ภาษาเขียนโปรแกรมใหม่ appeared first on TOSDN.

]]>
http://www.tosdn.com/lifestyle/update/facebook-hack-language/feed 0
LayoutIt – สร้าง Template จาก Twitter Bootstrap ได้ง่ายๆ แค่เม้าส์คลิก http://www.tosdn.com/lifestyle/online-tools/layoutit-easy-build-template-twitter-bootstrap http://www.tosdn.com/lifestyle/online-tools/layoutit-easy-build-template-twitter-bootstrap#comments Tue, 25 Feb 2014 08:55:08 +0000 http://www.tosdn.com/?p=1570 Posted by few on LayoutIt – สร้าง Template จาก Twitter Bootstrap ได้ง่ายๆ แค่เม้าส์คลิก

LayoutIt บริการที่ช่วยให้เราสร้าง Website Template จาก Twitter Bootstrap เพียงใช้เม้าส์คลิกลาก-วาง (Drag-Drop) ก็สามารถมีโค้ด HTML นำไปใช้ได้ทันที โดยไม่ต้องเขียนโปรแกรม

The post LayoutIt – สร้าง Template จาก Twitter Bootstrap ได้ง่ายๆ แค่เม้าส์คลิก appeared first on TOSDN.

]]>
Posted by few on LayoutIt – สร้าง Template จาก Twitter Bootstrap ได้ง่ายๆ แค่เม้าส์คลิก

25-2-2557 14-33-23

ใครเคยใช้ Twitter Bootstrap ก็จะรู้ว่ามันเจ๋งขนาดไหน เพราะเป็น Front-end Framework ที่รองรับได้ทุก Browser และทำงานแบบ Responsive คือ เปิดได้ทั้ง Mobile, Table. แต่ด้วยความที่เวลานำไปใช้ ผู้ใช้ต้องเขียนโค้ดเพิ่มเติมใน HTML ด้วย เลยทำให้ยังยุ่งยากสำหรับมือใหม่ที่ไม่ถนัด CSS และ HTML

สำหรับ LayoutIt เป็นบริการที่ช่วยให้เราสร้าง Website Template จาก Twitter Bootstrap ด้วยการใช้เม้าส์คลิกลาก-วาง (Drag-Drop) และก็กำหนดค่าบางอย่าง จากนั้นมันจะสร้างโค้ด HTML เพื่อนำไปใช้ได้ทันที ซึ่งผู้ใช้ ไม่จำเป็นต้องมีความรู้ใดๆ เกี่ยวกับการเขียนโปรแกรมเลย ดังนั้น เราจึงสามารถให้ Designer (หรือใครก็ตาม) เป็นผู้กำหนด Layout Template ด้วยบริการ LayoutIt ได้เลย

http://www.layoutit.com/

25-2-2557 14-37-31เลือกชิ้นส่วนที่ต้องการ และลาก-วาง ไปตามตำแหน่งที่ต้องการ

25-2-2557 14-41-33บริการนี้ ให้เราสร้างได้หลาย Project ครับ

25-2-2557 14-39-49
เราสามารถดูรูปแบบ Responsive ได้ทันทีจากหน้าจอออกแบบ

25-2-2557 14-38-07สามารถแชร์รูปแบบที่เราออกแบบให้กับคนอื่นได้ด้วยนะครับ (หรือให้คนในทีมช่วยกันดู)

25-2-2557 14-37-51สุดท้าย หลังจากออกแบบเสร็จ ก็สามารถ Download ออกมาเป็น HTML เพื่อนำไปใช้ได้ทันที

The post LayoutIt – สร้าง Template จาก Twitter Bootstrap ได้ง่ายๆ แค่เม้าส์คลิก appeared first on TOSDN.

]]>
http://www.tosdn.com/lifestyle/online-tools/layoutit-easy-build-template-twitter-bootstrap/feed 0
Normalize.css – Makes your website render cross-browsers http://www.tosdn.com/developer/css-html/normalize-css http://www.tosdn.com/developer/css-html/normalize-css#comments Wed, 19 Feb 2014 02:51:00 +0000 http://www.tosdn.com/?p=1566 Posted by few on Normalize.css – Makes your website render cross-browsers

Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.  

The post Normalize.css – Makes your website render cross-browsers appeared first on TOSDN.

]]>
Posted by few on Normalize.css – Makes your website render cross-browsers

Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.

 

The post Normalize.css – Makes your website render cross-browsers appeared first on TOSDN.

]]>
http://www.tosdn.com/developer/css-html/normalize-css/feed 0