MỘT SỐ TOOL HỮU ÍCH DÀNH CHO WEB DEVELOPER CÓ THỂ BẠN CHƯA BIẾT

Ngày đăng: Thứ Sáu, 18/10/2019

Ngày nay lĩnh vực công nghệ phát triển một cách vượt bậc, bên cạnh đó sự trải nghiệm người dùng cũng được theo đó mà tăng lên đáng kể. Đằng sau những giao diện bắt mắt là những ý tưởng mới mẻ, tốn rất nhiều công sức của Developer. Dưới đây mình tổng hợp một số công cụ hữu ích cho một lập trình viên web được chọn lọc qua nhiều nguồn khác nhau.

Font

Trong một layout website thường sẽ có những Icon giúp website đẹp và thân thiện hơn, ngoài ra còn có tác dụng điều hướng người dùng. Trước đây để tạo các Icon đó ta phải thực hiện cắt chúng ra từ file PSD và dùng CSS để gán background hoặc dùng thẻ img để đưa Icon đó vào. Tuy nhiên hiện nay chúng ta đã có giải pháp khác đó là sử dụng Symboy Font (font chữ kiểu ký hiệu). Hiện nay có nhiều thư viện Symboy Font nhưng mạnh nhất và hay sử dụng nhất là Font Awesome, Material icon… vì nó đơn giản và dễ sử dụng.

Awesome Font

Font Awesome là một trong những icon font phổ biến nhất hiện nay. Với phiên bản mới nhất hiện tại 5.5.0, Font Awesome hỗ trợ trên 1400 icon free.

IcoMoon Font

IcoMoon thực chất là một ứng dụng cho phép bạn tuỳ chỉnh icon font, import SVG để tạo ra font riêng, convert font sang SVG, PDF, XAML, CSH… Và IcoMoon cung cấp hơn 5000 icon free bằng cách tối ưu từ nhiều thư viện miễn phí khác nhau

Video: Tối ưu Front-end để web của bạn load dưới 5 giây

CSS Generator

1. CSS tool

Đây là công cụ tổng hợp không thể thiếu của một CSS Developer. Có rất nhiều tool dùng để tạo box-shadow, background gradient, text efftect, transform… 

2. Image Sprites

Với một Frontend developer chắc không xa lạ với kỹ thuật image sprites. Đây là phương pháp giúp tối ưu website, tuy nhiên để xác định tọa độ (background-position) thật là một điều khó khăn. Sau đây làm một công cụ tuyệt vời để giải quyết vấn đề trên với thao tác đơn giản.

 Image Fillter

Đối với những bạn thích selfie hay thích chụp hình đều biết đến photoshop, lightroom hay muốn nhanh gọn thì dùng instagram hoặc B612… Giờ đây bạn cũng có thể ứng dụng một vài bộ lọc này lên hình ảnh để có một bộ ảnh đẹp tuyệt vời không kém. Yên tâm nó rất nhẹ, vì chỉ với vài dòng CSS thôi.

Text style

Lại nói về Photoshop… web developer mà kiểu gì không dính tới photoshop phải không các bạn. Ở photoshop muốn style cho chữ lung linh thật đơn giản với blending option thì ở css mình cũng không thua kém khi dùng biết kết hợp giữa background, color, text-shadow… à mà thôi bỏ đi. Mình có tool này rất hay đây.

Link: https://ecard.enter-media.org/css-text-effects/

Image hover effect

Đây là một thư viện mình đã bookmark từ lâu, và thường xuyên dùng cho những layout yêu cầu độ thẩm mỹ. Về effect mình thấy lib này khá đẹp và thuần css rất nhẹ.

Link: http://gudh.github.io/ihover/dist/

Video: How Tiki Made Dzựt Cô Hồn?

CSS animation

Với những website của Nhật ở phần first view họ yêu cầu effect phong phú làm Dev đau đầu. Mình xin giới thiệu một lib css khá xịn, đa số những bài tủ của mấy anh Nhật đều gói gọn ở đây.

Link: http://cssanimation.io/

Cũng CSS animation

Đây là một tool tổng hợp các effect của CSS3 để ra một hiệu ứng đẹp mắt khi người dùng thao tác trên website.

Link: http://animista.net/

Tổng kết

Frontend dev ngoài vấn đề về layout hiển thị trên nhiều browser đã khổ, nay còn phải mất nhiều thời gian cho việc “makeup” website thật phong phú và lộng lẫy. Chính vì vậy mình muốn cùng đóng góp một vài tool hữu ích hơn nữa. Hy vọng những công cụ này có thể hỗ trợ phần nào cho công việc lên ý tưởng, hoàn thiện thiết kế UI và phát triển phần code Frontend cho các dự án của các bạn.

Tham khảo ngay chương trình học Lập trình viên quốc tế tại Aptech Đà Nẵng 

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

Aptech Đà Nẵng - Hệ thống Đào tạo CNTT Quốc tế Số 1 Đà Nẵng

  • Địa chỉ: Tòa nhà VNPT, 38 Yên Bái, Quận Hải Châu, TP. Đà Nẵng

  • Hotline: 02363.779.779 - Fax: 02363.779.555

  • Email: tuyensinh@softech.vn

 

Nguồn: Topdev

CÁC TIN TỨC, SỰ KIỆN KHÁC


HỘI THI TIN HỌC TRẺ THÀNH PHỐ ĐÀ NẴNG LẦN THỨ 23
HỘI THI TIN HỌC TRẺ THÀNH PHỐ ĐÀ NẴNG LẦN THỨ 23
Thứ Sáu, 10/07/2020 bởi Aptech Đà Nẵng

Hội thi Tin học trẻ cấp thành phố lần thứ 23 năm 2020 được diễn ra trong hai ngày 8 - 9 tháng 7, thu hút hơn 400 thí sinh tham gia đến từ các trường tiểu học, THCS, THPT, Trung tâm giáo dục thường xuyên trên địa bàn thành phố.


GIỮA “MA TRẬN” TUYỂN SINH ĐẠI HỌC 2020, NGƯỜI TRẺ CẦN GÌ NGOÀI THÔNG TIN?
Giữa “ma trận” tuyển sinh đại học 2020, người trẻ cần gì ngoài thông tin?
Thứ Sáu, 26/06/2020 bởi QUANG VŨ, THEO TRÍ THỨC TRẺ

Khác với mọi năm, năm 2020 sẽ không có kỳ thi THPTQG mà chỉ thi tốt nghiệp. Các trường đại học có phương án tuyển sinh riêng khiến nhiều bạn trẻ bị động và đối mặt với tỉ lệ chọi cao. Trong lúc này, sự đồng hành của cha mẹ là điểm tựa vững chắc nhất cho con.


LỢI ÍCH KHI TRẺ TIẾP CẬN CÔNG NGHỆ SỚM
Lợi ích khi trẻ tiếp cận công nghệ sớm
Thứ Sáu, 26/06/2020 bởi Theo Businesstech

Bước vào kỷ nguyên cách mạng công nghiệp 4.0, lập trình sẽ là một kỹ năng cơ bản mà trẻ cần tiếp cận sớm.


TỪ CHỨNG NHẬN APTECH ĐẾN TẤM BẰNG CỬ NHÂN
Từ Chứng Nhận Aptech Đến Tấm Bằng Cử Nhân
Thứ Tư, 24/06/2020 bởi Aptech

Với chương trình liên kết giữa Aptech và Lincoln University College (LUC), học viên còn có cơ hội chọn “du học tại chỗ”, tức hoàn thành chương trình ngay tại Việt Nam, để tối ưu chi phí và vẫn đảm bảo hoàn thiện chương trình


HỌC LẬP TRÌNH CHUẨN QUỐC TẾ TẠI APTECH, BỨT PHÁ LƯƠNG KHỦNG
Học lập trình chuẩn quốc tế tại APTECH, bứt phá lương khủng
Thứ Ba, 23/06/2020 bởi APTECH

Trước thực trạng tỷ lệ thất nghiệp tăng cao, làm sao để tìm được môi trường đào tạo thực tiễn, ăn khớp với yêu cầu của nhà tuyển dụng? Aptech – cầu nối cung ứng 7,000,000 lập trình viên khắp toàn cầu, là lò luyện lâp trình viên chuẩn quốc tế, được các doanh nghiệp lớn kí kết hợp tác phát triển nhân lực.


TƯNG BỪNG NGÀY HỘI TƯ VẤN TUYỂN SINH NĂM 2020 TẠI ĐÀ NẴNG
Tưng bừng ngày hội tư vấn tuyển sinh năm 2020 tại Đà Nẵng
Thứ Hai, 22/06/2020 bởi Aptech Đà Nẵng

Sáng 21-6 vừa qua, tại trường THPT Phan Châu Trinh, Báo Tuổi Trẻ phối hợp với Vụ Giáo dục đại học Bộ Giáo dục và Đào tạo (GD&ĐT), Tổng cục Giáo dục nghề nghiệp (Bộ Lao động, Thương binh và Xã hội), Sở GD&ĐT thành phố Đà Nẵng tổ chức chương trình Tư vấn tuyển sinh – hướng nghiệp năm 2020, thu hút hàng trăm học sinh đến từ các trường THPT trên địa bàn thành phố tham gia.

XEM THÊM


KẾT NỐI VỚI CHÚNG TÔI