“Atom” trình soạn thảo code của tương lai

Atom

“A hackable text editorfor the 21st Century”

Atom gần 3 năm không phải là thời gian quá nhiều nhưng đó là thời gian đủ đánh dấu sự phát triển của một text editor của thế kỉ mới.

I. Atom là gì?

Atom là một trình soạn thảo code mã nguồn mở được phát triển bởi github. Cảm nhận đầu tiên của bạn khi tiếp cận với nó là một trình soạn thảo hiện đại, dễ làm quen và nhất là sự mượt mà trên từng phím gõ của. Bạn sẽ không bao giờ cảm thấy nhàm chán vì Atom luôn tạo cho bạn hứng thú bất tận khi làm việc cùng với nó.

Lưu ý: Soạn thảo ở đây là chỉ gõ ra code thôi nhé muốn thực thi để chạy thành chương trình thì chỉ có các IDE như Visual Studio, Eclipse, PHP Storm, Code Block mới kiêm luôn việc thực thi. Vậy nên nhóm các phần mềm tương tự như Atom ta có thể kể đến như Sublime Text, Notepad++,…

II. Mô tả về Atom

1. Trải nghiệm Atom

Atom show case
Giao diện và chức năng của phần mềm Atom.

Atom tùy chỉnh rất linh hoạt những package của mình để tạo môi trường cho lập trình viên. Bạn có thể tìm thêm trên mạng những package mới nhất cho các chức năng mình cần. Dễ dàng tắt những chức năng không cần thiết để cải thiện tốc độ xử lý và đỡ rối mắt.

Như gif trên mô tả với các package cơ bản như minimap, emmet, atom-html-preview đã mang lại môi trường làm việc bắt mắt, linh hoạt cho các nhà design web.

2. Giao diện đa dạng, bắt mắt

giao diện phần mềm Atom
Các giao diện đa dạng của phần mềm Atom.

Các thành phần code được phân loại nhờ vào màu sắc là một kĩ thuật khá cần thiết trong giới lập trình với nó cảm nhận code của bạn sẽ được đưa lên tầm cao mới xóa bỏ cái cảm giác khô khan, gò bó mà code mang lại. Nhờ vào màu sắc tâm trạng của lập trình viên cũng thay đổi theo hướng tích cực hơn nhờ nó mà điều khiển được cảm giác code của mình.

Bạn sẽ thấy chán nản khi suốt ngày phải nhìn vào những dòng code và trang giấy trắng

Thử tưởng tượng bạn ngồi vào máy tính và suốt ngày toàn nhìn chữ và trang giấy trắng chắc hẳn ai cũng chán nản vô cùng hãy thử thay đổi giao diện áp vào một gam màu gợi nhớ đến một bộ phim mà bạn từng thích; caffee loại nước uống không thể thiếu hằng ngày của dân lập trình; một cỗ máy của người ngoài hành tinh trong phim bạn vừa xem hoặc là mẫu mã của một quyển sách trinh thám mà bạn vừa đọc chẳng hạn, còn điều gì làm ta đam mê hơn.

3. Plugin đa dạng

Atom Plugin show case
Danh sách Plugin Atom.

Đây là điểm mạnh của các phần mềm mã nguồn mở vì với việc opensource lên github đã tạo điều kiện cho sự phát triển nhanh chóng của các chức năng bổ trợ.

Biểu đồ thể hiện sự phát triển của source code phần mềm Atom

Những chuyên gia tin học đầu ngành sẽ nhảy vào vọc phá, đục khoét để tạo ra những chức năng tốt nhất. Mục đích hoặc là họ tạo ra các chức năng đó để phục vụ cho công việc của mình hoặc là để họ tự khẳng định mình trong cộng đồng lập trình.

III. Điểm mạnh và yếu của atom.

Ưu điểm:

  • Đa nền tảng Mac OS, Windows, Linux.
  • Giao diện mới mẻ, đẹp, dễ nhìn.
  • Cảm giác người dùng mượt mà khi gõ chữ.
  • Tạo cảm hứng cho lập trình viên.
  • Dễ dàng thiết lập môi trường tối ưu cho nhiều hướng đối tượng lập trình viên.
  • Mã nguồn mở, được chia sẻ công khai trên github.
  • Có cộng đồng phát triển lớn mạnh nhanh chóng và không ngừng phát triển.

Nhược điểm:

  • Vẫn còn quá trẻ.
  • Mất thời gian làm quen ban đầu vì kiểu thiết kế và quản lý.
  • Tiêu tốn tài nguyên hệ thống ở một số tác vụ.
  • Một số chức năng chưa được hoàn thiện.
  • Vẫn còn gặp lỗi về giao diện như lệch chữ lệch con nháy chuột, chức năng nhắc code trên windows.

Lời kết: Atom là một sự lựa chọn cho những bạn thích màu sắc, muốn cảm nhận một giao diện mới cho con đường code của mình. Trong thế giới text editor còn có các phần mềm mạnh mẽ khác như vim, emacs,… vậy nên việc sử dụng text editor nào còn phụ thuộc vào hoàn cảnh, sở thích và cộng đồng xung quanh của bạn hãy lựa chọn text editor phù hợp vớ công việc của mình.

Nguồn: Công nghệ công ty cổ phần Sen Quốc Tế

Advertisements

[Atom] Sử dụng emmet trong file php

Giới thiệu sơ lượt Atom.

Atom là một text editor. Một trình gõ chữ mới nhất hiện nay. Cung cấp môi trường cho những lập trình viên có thể gõ những dòng code của mình một cách dễ dàng. Bên cạnh giao diện thân thiện và mượt mà Atom còn có một kho các package để giúp cho nó thêm nhiều tính năng mạnh mẽ. Có thể so sánh Atom với các đối thủ khác như Sublime Text, Notepad ++. Tác giả biết Atom qua một video giới thiệu trên channel youtube của github.

Giới thiệu sơ lượt emmet.

Emmet là một cú pháp viết tắt của html, css. Ví dụ: khi bạn viết p rồi nhấn  phím [tab] code sẽ tự động complete thành <p></p>; bạn viết p*3 rồi nhấn phím [tab] code sẽ tự động complete thành 3 dòng <p></p>   <p></p>   <p></p>.

Để sử dụng được Emmet trong Atom chúng ta cần phải cài đặt package Emmet vào File -> Settings -> Install tìm Emmet rồi nhấn Install.

Trong atom mặt định emmet chỉ được sử dụng trong file html và css. Tuy nhiên có một giải pháp đó là. Trong file keymap.cson (File -> Keymap…) thêm 2 dòng này vào cuối:

‘.pane .editor:not(.mini)’:
‘ctrl-shift-tab’: ’emmet:expand-abbreviation’

Hướng dẫn sử dụng snipping tool chụp ảnh màn hình

1. Mở snipping tool:

  • Bấm vào start menu. Click vào ô tìm kiếm nhập snipping tool.
  • Snipping tool sẽ hiện lên trên cùng. Click vào để mở.

mở snipping tool

2. Chụp hình bằng snipping tool

    • Sau khi mở lên các bạn bấm “new” -> rồi chọn vùng cần chụp -> lập tức snipping sẽ chọn vùng chụp của bạn -> bấm “save” và chọn đường dẫ để lưu.

chụp màn hình bằn snipping tool

3. Tạo phím tắt cho snipping tool

(Chỉ cần bấm phím tắt này snipping tool sẽ tự mở)

  • Bấm vào start menu. Click vào ô tìm kiếm nhập snipping tool.
  • Snipping tool sẽ hiện lên trên cùng. Chuột phải vào snipping tool -> chọn propeties.
  • Vào tabshortcut” -> bấm vào ô “shortcut key” -> bấm phím Ctrl và phím F12.
  • Bấm OK.
  • Từ giờ bạn sẽ mở snipping tool bằng phím tắt Ctrl + F12.

tạo phím tắt snipping tool

Quay lại màn hình thành file gif bằng tool ScreenToGif

Screen To Gif
Screen To Gif WordPress PandaKirota

Link: http://screentogif.codeplex.com/

Phần mềm tuyệt vời để quay lại màn hình của bạn. Với nó bạn có thể dễ dàng chuyển đoạn quay của mình thành file gif để chia sẻ online hoặc gắn vào website, blog.

Phầm mềm rất đơn giản để sử dụng. Truy cập vào sẽ hiện khung quay màn hình. Bạn chỉnh kích thước và vùng cần muốn quay bấm recoding. Quay xong bạn bấm StopRecoding phần mềm sẽ chuyển bạn tới giao diện chỉnh sửa vào phần save và lưu lại thành file gif. Phần save có các chế độ ảnh gif khác nhau nếu chọn đúng chế độ thì chất lượng đoạn video bằng file gif của bạn sẽ rất tốt. Comment bên dưới về các vấn đề bạn thắc mắc nhé.

Lưu ý các bạn chỉ nên quay một đoạn ngắn khoảng mấy mươi giây thì chất lượng sẽ hiệu quả hơn.

Ví dụ screentogif:

Ví Dụ

Ví Dụ 2

Mang đến trải nghiệm mới cho Visual Studio 2013 với tool Productivity Power Tools 2013

Link: https://visualstudiogallery.msdn.microsoft.com/dbcb8670-889e-4a54-a226-a48a15e4cace?SRC=Home

Trợ giúp nhanh (alt+f1)

Tính năng gọi là Peek Help có thể được gọi từ menu ngữ cảnh hoặc sử dụng phím tắt Alt + F1. Điều này sẽ làm xuất hiện Help nội dung nội tuyến trong trình soạn thảo, bên dưới dòng code, sử dụng Peek. Đây là một trình  duyệt đầy đủ, vì vậy bạn có thể làm chuyển hướng, tìm và vv.

Peek Help ctrl+f1

Giao diện quản lý lỗi mới: Giao Diện Quản Lý Lỗi Mới

Tính năng này cho biết lỗi, cảnh báo từ giao diện cây thư mục Explorer. Các thông tin được lấy từ danh sách lỗi và hiển thị trực tiếp trong cây thư mục Solution Explorer. Di chuột qua các file với gạch chân cảnh báo để hiện lên một cửa sổ pop-up với thông tin các lỗi / cảnh báo / lời nhắn.

Và còn một số tiện ích hấp dẫn khác mang lại trải nghiệm mới cho người dùng Visual Studio. Các bạn có thể đọc hiểu nội dung của họ bằng tiếng anh theo link trên. Cách cài đặt rất đơn giản bạn chỉ cần tải file về và chạy file, khởi động lại Visual Studio là được.

Tổng hợp phím tắt dành cho dân lập trình

tab: thụt code vào một khoảng =><= shift+tab: đưa code ra một khoảng

VISUAL STUDIO

Debug

f5: chạy code =><= shift+f5: dừng chạy app

Thao tác code

ctrl + x: xóa toàn bộ dòng (dòng tại con nháy chuột đang chọn)

Thao tác khung làm việc

shift + alt + enter: fullscreen khung làm việc

Notepad++

ctrl+backspace: xóa toàn bộ từ (đặt dấu nháy ở cuối từ)

Atom

ctrl + d: tạo thêm con nháy chuột tại những từ tiếp theo giống như từ đang chọn

ctrl + l: chọn dòng hiện tại nếu tiếp tục bấm một lần nữa sẽ chọn tiếp dòng tiếp theo

ctrl + [ : di chuyển dòng code đang chọn trồi ra

ctrl + ] : di chuyển dòng code đang chọn thụt vô

 

ctrl + shift + l: chọn cú pháp ngôn ngữ lập trình cho văn bản hiện tại

Hướng dẫn sử dụng table của tinymce website tiengnhatthatde.com

Tạo bảng

  • Vào Table > Insert table: chọn số dòng số cột của table.


Gộp ô trong bảng

  • Chọn số ô cần gộp > chuột phải vào phần đã chọn > Cell > Merge Cells


Chỉnh sửa nội dung trong bảng

  • Chọn ô > ghi nội dung > sử dụng các công cụ để chỉnh sửa nội dung


Tạo viền cho bảng

Vào Table > Table Properties

  • Thẻ General thêm vào mục Border: solid
  • Thẻ Advanced thêm vào mục Style: border-collapse: collapse;

Khắc phục lỗi error 5 khi attach một database có sẵn (têndb.mdf)

screenshot-44

Lỗi error 5 là lỗi phát sinh khi quyền truy cập của bạn bị giới hạn bởi lý do là bạn đang thiết lập hệ thống SQL Log on as: This account. Chỉ cần vào Sql Server Configuration Manager ở mục Log On ta chọn Built-in account: Local System. Như vậy là bạn đã có thể thêm một database từ file có sẵn vào SQL Server Management Studio của mình. Phiên bản bài viết sử dụng là phiên bản SQL Server 2014 Management Studio.

Lập trình game đơn giản html5 – game đập chuột

<html>
<head>
https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
<style>
body{width:100%;height:100%;overflow:hidden;}
.mole {
background-color: rgb(128,64,0);
boder-radius:100px 0px 0px;
height: 100%;
width: 10%;
position: absolute;
top: 100%;
background-image:url(mole.bmp);
background-size:100%;
background-repeat: no-repeat;
background-position: 0px 25px;
}
.left-ear {
background-color: rgb(128,64,0);
border-radius:100px;
position:absolute;
float:left;
min-width:30%;
z-index:-1;
}
.right-ear {
background-color:rgb(128,64,0);
border-radius:100px;
position:absolute;
float:right;
min-width: 30%;
left:70%;
z-index:-1;
}
#mole1{left:10%;}
#mole2{left:45%;}
#mole3{left:90%;}
</style>

jQuery(document).ready(function(){

var add = 0;

function game_over(){
jQuery(‘.mole’).animate({‘top’:’100%’}, 300);
jQuery(‘.score’).html(‘GAME OVER’);
jQuery(‘.score’).append(‘

TRY AGAIN

‘);
}

function start(){
add = 0;
jQuery(‘.score’).html(‘Score:’ + add);
jQuery(‘.mole’).animate({‘top’:’0%’}, 5000, function(){
game_over();
jQuery(‘.try_again’).click(function(){start();});
});
}

jQuery(‘.mole’).hover(function(){
jQuery(this).css(‘background-image’,’url(hrt.bmp)’);
jQuery(this).stop().animate({‘top’:’100%’},300,function(){
add = add – (-1);
jQuery(‘.score’).html(‘Score:’+ add);
jQuery(this).css(‘background-image’,’url(mole.bmp)’);
jQuery(this).animate({‘top’:’0%’},5000);
});
});

start();

});

</head>
<body>

Score: 0

</div>

</div>

</div>
</body>
</html>