Là một lập trình viên, tất nhiên, bạn code rất giỏi, tuy nhiên, gu thẩm mỹ và khả năng thiết kế cũng cần có, các lập trình viên sẽ luôn loay hoay với giao diện rất tốn thời gian, đặc biệt nếu bạn không có một designer bên cạnh, thậm chí là một Frontend Developer cũng không có luôn. Xin giới thiệu 32 công cụ sau đây, giúp các lập trình viên trên matebe có thể tạo ra các ứng dụng web rất dễ dàng, giúp bạn giải quyết nhanh chóng bài toàn designe, ngoài ra còn có các công cụ hổ trợ như Mail, Xử lý đồng bộ ...


Tất nhiên, bạn sẽ có một ứng dụng web hoàn chỉnh và tiết kiệm rất rất rất nhiều thời gian.


Bootstrap


---------------------------------------------------------------------------------------------------------------------------


Bootstrap (Newest : flat design)


http://getbootstrap.com/


Free Design Template


http://startbootstrap.com/ (Recommend)


http://www.templatemag.com/free-bootstrap-templates/


http://www.blacktie.co/


Còn nếu bạn chịu trả phí thì dùng


https://wrapbootstrap.com/


CSS animation


---------------------------------------------------------------------------------------------------------------------------


Animate.css (Recommend)


http://daneden.github.io/animate.css/


Rất nhẹ và rất dễ dùng!


Tạo logo


---------------------------------------------------------------------------------------------------------------------------


Squarespace (Recommend)


http://www.squarespace.com/logo#


LOGASTER


https://www.logaster.com/


Tạo các thành phần của HTML


---------------------------------------------------------------------------------------------------------------------------


coveloping (Recommend)


http://coveloping.com/


Tập hợp rất nhiều công cụ dùng để sinh ra các phần trong trang HTML như price page vân vân.


TeamPage.io


http://www.teampage.io/


Tạo team member page một cách rất đơn giản.


FRAME


http://frame.lab25.co.uk/


Sinh ra 1 top page na ná như trang đó.


UICloud


http://ui-cloud.com/


Trang chuyên dùng cho việc search tham khảo những thành phần của UI. (Category trong này gần như đầy đủ cho 1 template cơ bản)


Nén ảnh


---------------------------------------------------------------------------------------------------------------------------


Hai công cụ tuyệt vời sau đây có thể nén dung lượng ảnh còn gần một nửa mà hầu như không làm giảm chất lượng ảnh.


JPEGmini (Recommend)


http://www.jpegmini.com/


TinyPNG (Recommend)


https://tinypng.com/


Chỉnh sửa ảnh


---------------------------------------------------------------------------------------------------------------------------


GIMP


http://www.gimp.org/


SeaShore (Mac)


http://seashore.sourceforge.net/TheSeashoreProject/About.html


Đặt tên cho ứng dụng


---------------------------------------------------------------------------------------------------------------------------


Dislexicon: The English Language Extender


http://www.robobunny.com/cgi-bin/dislexicon


Công cụ đề xuất tên dịch vụ dựa vào keyword ta nhập vào, các đề xuất nghe rất hay và kêu.


Công cụ này có cả app Android, giúp chúng ta lưu tên mình thích để sau này dùng đến.


Web service naming idea tool


http://c.hrgrweb.com/naming/


Xuất ra tên dịch vụ bất kì dựa vào việc kết nối các đơn từ được lưu trong DB. Cách thức rất đơn giản nhưng lại khá tiện lợi.


Ảnh đẹp


---------------------------------------------------------------------------------------------------------------------------


Free high-resolution photos.10 new photos every 10 days.


https://unsplash.com/


Không có chức năng search, nhưng trên này toàn ảnh nét căng mà lại dùng free.


List photo on MEDIUM blog


https://medium.com/@dustin/stock-photos-that-dont-suck-62ae4bcbe01b


Video đẹp


---------------------------------------------------------------------------------------------------------------------------


Tổng hợp những video đẹp dùng làm background (dùng cho cá nhân cũng được)


http://mazwai.com/#index


Toàn là video nhìn rất cool.


jQuery plugin dành cho việc tạo video background


https://github.com/VodkaBears/Vide#readme Cách dùng siêu đơn giản.


Icon


---------------------------------------------------------------------------------------------------------------------------


ICONFINDER


https://www.iconfinder.com/


SNS avatar generator


---------------------------------------------------------------------------------------------------------------------------


uiFaces


http://uifaces.com/


Dùng trong trường hợp muốn tạo ra một loạt avatar dùng cho demo vân vân.


Có tích hợp cả API, rất đáng để dùng thử.


Đa ngôn ngữ


---------------------------------------------------------------------------------------------------------------------------


Wovn.io


http://wovn.io/


Biến tất cả các page thành đa ngôn ngữ bằng cách viết thêm đúng 1 dòng code! 


Chọn màu


---------------------------------------------------------------------------------------------------------------------------


Adobe Kuler (for pro use)


https://kuler.adobe.com/create/color-wheel/


HUE/360 (for simple use)


http://hue360.herokuapp.com/


Web Colour Data


http://webcolourdata.com/Tổng hợp color code của các Web service nổi tiếng.


Service introduction video


---------------------------------------------------------------------------------------------------------------------------


Wideo


http://www.wideo.co/


Công cụ có thể tạo ra những video giới thiệu dịch vụ không khác gì Power Point.


Social plugin


---------------------------------------------------------------------------------------------------------------------------


Công cụ tổng hợp nút liên kết với các mạng xã hội.


AddThis


http://www.addthis.com/


Ninja omatome button


http://www.ninja.co.jp/omatome/


 


Server


---------------------------------------------------------------------------------------------------------------------------


Heroku


https://www.heroku.com/


Một cloud server rất nổi tiếng có thể dùng miễn phí.


Cực kì thích hợp cho việc làm prototype.


New Relic (add-on for Heroku)


https://devcenter.heroku.com/articles/newrelic


Công cụ quản lí server đơn giản, miễn phí có thể add vào Heroku.


Dùng công cụ này có thể biết được cụ thể server đang chịu tải ra sao và có cả lỗi báo về.


 


Send mail


---------------------------------------------------------------------------------------------------------------------------


SendGrid


http://sendgrid.com/


Tiện lợi hơn khi dùng dưới dạng add-on cho Heroku.


 


HTML mail


---------------------------------------------------------------------------------------------------------------------------


BeeFree (Recommend)


http://web-cre.info/beefree/


Tạo mail HTML cực kì đơn giản bằng cách kéo thả, đã thế còn miễn phí!


Có sẵn template của các loại mail hay dùng nên ta chỉ cần chọn template, sửa sang một chút, sau khi export thì customize lại chút nữa là ổn.


Công cụ còn hỗ trợ việc gửi mail để test thử rất đơn giản.


MailChimp


http://mailchimp.com/


Công cụ thần thánh không những cho phép tạo HTML mail mà còn cho phép gửi một loạt mail theo lịch (step mail).


Zurb


http://zurb.com/ink/


Cung cấp template cho việc tạo responsive HTML mail một cách đơn giản.


Có document hướng dẫn cụ thể việc code cho từng phần như thế nào.


Antwort


http://internations.github.io/antwort/


Nếu muốn tạo mail HTML do tự mình customize thì tôi nghĩ đây là công cụ tiện lợi.


 


Favicon


---------------------------------------------------------------------------------------------------------------------------


Favicon Generator


http://favicon-generator.org/


Công cụ sinh ra file favicon.ico khi ta up ảnh lên.


Tinycon - js library có thể xuất ra alert number cho favicon


https://github.com/tommoor/tinycon


Một thư viện js nhỏ có khả năng xuất ra alert number cho favicon, ta chỉ cần viết thêm 1 dòng code.


Ngoài ra còn nhiều công cụ về Rails, Heroku hay API nữa như dưới đây.


Rails


---------------------------------------------------------------------------------------------------------------------------


Sign in, sign up management


Devise


https://github.com/plataformatec/devise


facebook


https://github.com/plataformatec/devise/wiki/OmniAuth:-Overview


 


Xử lí không đồng bộ


---------------------------------------------------------------------------------------------------------------------------


Redis&Resque


https://devcenter.heroku.com/articles/queuing-ruby-resque


 


Heroku


---------------------------------------------------------------------------------------------------------------------------


Batch processing


Scheduler


https://addons.heroku.com/scheduler


Mail


---------------------------------------------------------------------------------------------------------------------------


MailChimp


https://devcenter.heroku.com/articles/mandrill


SendGrid


https://addons.heroku.com/sendgrid


Nguồn:techtalk.vn