ModernCSS

Nếu bạn muốn nâng cao kỹ năng CSS của mình, bạn nên xem loạt bài đăng của Stephanie Epris. Nó bao gồm các chủ đề nhất định về chủ đề này để giải quyết một số vấn đề phổ biến với các giải pháp hiện đại có sẵn trong CSS ngày nay.

HyperColor

Một bộ sưu tập các màu chuyển sắc đẹp được tạo bằng cách sử dụng các lớp tiện ích từ TailwindCSS. Vì vậy, nếu bạn xây dựng một trang web bằng TailwindCSS, bạn có thể chỉ cần sao chép các lớp và dán chúng vào các phần tử HTML để thêm màu gradient.

TailwindKit

TailwindKit là tập hợp của hơn 250 thành phần được tạo sẵn. Nó bao gồm một số thành phần phổ biến như Button, Header và Footer cho đến một số thành phần thích hợp hơn như Bảng điều khiển dữ liệu và thành phần Group. Một tài nguyên tuyệt vời khác dành cho người dùng TailwindCSS.

GrepApp

Nếu bạn thấy kết quả tìm kiếm trên Github kém thỏa mãn, bạn có thể thử Grep.app. Đó là một công cụ để tìm kiếm mã trên kho lưu trữ công khai Github. Bạn có thể nhận được kết quả tốt hơn vì bạn có thể tinh chỉnh tìm kiếm từ khóa của mình thành phân biệt chữ hoa chữ thường, RegEx hoặc các từ đầy đủ.

React Toast

Thư viện React.js cho phép bạn kích hoạt thông báo dạng toast: kiểu thông báo nhỏ hiện lên trên màn hình của bạn và biến mất sau vài giây. Theo mặc định, nó trông tuyệt vời với hoạt ảnh và chuyển tiếp mượt mà, nhưng nó có thể tùy chỉnh theo ý thích của thiết kế trang web hoặc ứng dụng của bạn.

PowerToys

PowerToys là phần mềm khởi động lại phần mềm tương tự trong Windows 95. Nó đi kèm với một bộ công cụ để nâng cao trải nghiệm và năng suất trong Windows 10, chẳng hạn như Bộ chọn màu cho phép chọn màu trên bất kỳ ứng dụng đang chạy nào. Và có 8 công cụ tiện dụng khác mà PowerToys cung cấp tại thời điểm viết bài.

Reactotron

Một ứng dụng để kiểm tra các ứng dụng React.js và React Native trong trạng thái ứng dụng của bạn, kiểm tra các yêu cầu và phản hồi API cũng như hiệu suất gỡ lỗi. Nó giống như DevTools của trình duyệt nhưng dành cho các ứng dụng của bạn. Reactotron hoạt động trên macOS, Windows và Linux.

Fiddle

Nếu bạn mới bắt đầu với Electron và không muốn giải quyết các vấn đề phụ thuộc, thì Fiddle là ứng dụng dành cho bạn. Nó đi kèm với mọi thứ bạn cần, bao gồm một số phiên bản Electron khác nhau, trình chỉnh sửa tích hợp sẵn và bạn thậm chí có thể biên dịch các thử nghiệm của mình thành một ứng dụng.

Clipy

Một ứng dụng tiện dụng miễn phí giúp nâng cao chức năng khay nhớ tạm trong macOS. Với Clipy, bạn có thể xem gần như tất cả các mục trong danh sách và lịch sử khay nhớ tạm của mình, đồng thời chọn mục bạn muốn dán.

DevKinsta

Một ứng dụng dành cho máy tính để bàn để dễ dàng tạo ra môi trường localhost với WordPress. Bạn có thể tạo một cài đặt duy nhất hoặc nhiều trang web chỉ trong vài cú nhấp chuột.

Cùng với cơ sở dữ liệu và máy chủ localhost với nginx, nó cũng cung cấp một số công cụ tiện dụng để phát triển WordPress cục bộ như Adminer để quản trị cơ sở dữ liệu, máy chủ SMPT và một cách dễ dàng để chuyển đổi giữa các phiên bản PHP.

Nativefier

Nativefier là một công cụ tiện dụng để nhanh chóng kết hợp bất kỳ trang web nào thành một ứng dụng dành cho máy tính để bàn. Nó tận dụng Chromium để bạn có thể xây dựng và biên dịch ứng dụng sang các nền tảng khác nhau bao gồm macOS, Windows và Linux, tất cả chỉ với một dòng lệnh CLI.

Electron React Boilerplate

Đây là điểm khởi đầu của bạn để xây dựng một ứng dụng dành cho máy tính để bàn với Electron. Nó được đóng gói sẵn với React Router, Webpack, React Fast Refresh cũng như React để bạn có thể bắt đầu ngay lập tức xây dựng ứng dụng máy tính để bàn tuyệt vời tiếp theo của mình thay vì xử lý các cấu hình và build tools.

Electron Vue

Nếu bạn thích làm việc với Vue.js, khung công tác này là một lựa chọn thay thế tốt. Nó được đóng gói sẵn cho các công cụ hỗ trợ trong hệ sinh thái Vue.js như Vue DevTools , Axios, Vue Router,…

Theia

Một khuôn khổ để xây dựng một IDE chính thức (Môi trường phát triển tích hợp) với các công nghệ web hiện đại. Nó có thể dễ dàng mở rộng cho phép bạn thêm các tính năng tùy chỉnh xung quanh nó. Một khuôn khổ tuyệt vời nếu bạn định bao gồm một trình chỉnh sửa trong các ứng dụng và dịch vụ web của mình.

Lepton

Trình quản lý mã dựa trên GitHub Gist với hỗ trợ cho cả Gist riêng tư và công khai. Bạn có thể quản lý các đoạn mã của mình hiệu quả hơn trong ứng dụng với nhiều thẻ, nhóm, tìm kiếm và một số tính năng khác không có trong Github Gist.

Pennywise

Pennywise là một ứng dụng dựa trên Electron cho phép bạn mở một trang web hoặc phương tiện trong một cửa sổ nổi trên đầu ứng dụng đang chạy khác của bạn. Nó có thể thay đổi kích thước và có thể được đặt ở bất kỳ đâu trên màn hình, nó cũng hoạt động trong macOS, Windows và Linux.

Insomnia

Bạn có thể sử dụng Electron để phát triển một ứng dụng đơn giản như Insomnia. Nó là một ứng dụng đa nền tảng để đưa ra yêu cầu và kiểm tra một điểm cuối API. Bạn có thể đưa ra yêu cầu bằng các phương thức HTTP khác nhau (GET, POST, PUT, v.v.) hoặc thêm tiêu đề và xác thực.

Postbird

Postbird là một ví dụ khác về một ứng dụng đơn giản được xây dựng bằng Electron. Đây là một ứng dụng để quản lý cơ sở dữ liệu trong PostgreSQL, nơi bạn có thể xem danh sách cơ sở dữ liệu, dữ liệu và thực hiện một số thao tác như tìm kiếm qua các bảng hoặc chạy các truy vấn cơ sở dữ liệu.

WNR

Một ứng dụng quản lý thời gian đơn giản dành cho macOS và Windows. Nó giống như một bộ hẹn giờ nơi bạn có thể đặt thời gian làm việc và thời gian nghỉ ngơi. Một ứng dụng tiện dụng có thể giúp nhắc nhở bạn nghỉ ngơi vì thời gian thường trôi nhanh khi bạn quá tập trung làm việc trước máy tính.

Spectron

Cuối cùng nhưng không kém phần quan trọng, bạn nên kiểm tra các ứng dụng của mình để đảm bảo rằng ứng dụng của bạn chạy tốt. Spectron giúp bạn dễ dàng thiết lập môi trường kiểm tra tự động cho ứng dụng của mình. Nó cũng tương thích với bất kỳ khung thử nghiệm nào bao gồm Mocha và Jest.

Ray

Ray là một ứng dụng web nhỏ cho phép bạn tạo các đoạn mã thành một hình ảnh đẹp . Bạn có thể chọn chủ đề cho ngôn ngữ, tùy chỉnh nền, phần đệm, văn bản và lưu và chia sẻ lên mạng xã hội hoặc bài đăng trên blog của mình.

Conic Style

Một bộ sưu tập các ví dụ CSS conic-gradient(): một chức năng CSS mới để tạo ra hai hoặc nhiều màu được xoay quanh một điểm chính giữa. Với conic gradient, bạn có thể tạo các bản trình bày như biểu đồ hình tròn hoặc bánh xe màu một cách dễ dàng chỉ bằng cách sử dụng CSS.

Browserosaurus

Một ứng dụng cho phép bạn chọn trình duyệt để mở một liên kết. Ứng dụng này được tạo riêng cho macOS với chủ đề sáng và tối tự động chuyển đổi theo tùy chọn hệ thống. Không còn sao chép và dán liên kết theo cách thủ công trên các trình duyệt khác nhau.

Loripsum

Một công cụ để tạo dummy text “lorem ipsum” huyền thoại. Không chỉ nội dung, mà nó còn có thể thêm các định dạng bổ sung như tiêu đề, in đậm, nghiêng, trích dẫn và liên kết. Công cụ này cũng cung cấp một điểm cuối API mà bạn có thể sử dụng để tạo nội dung theo chương trình. Một công cụ khá tiện dụng để tạo nội dung giả để thử nghiệm hoặc tạo template.

WindiCSS

Được thiết kế để thay thế cho TailwindCSS cung cấp thời gian tải nhanh hơn. Nó chỉ tạo ra CSS được sử dụng và đã được tích hợp với một số công cụ như phần mở rộng VSCode, CLI, Rollup, và các framework như Vue.js, Nuxt.js,…

VSCode Vite

Một phần mở rộng cho Vite, một sự phát triển giao diện người dùng hiện đại với một công cụ xây dựng được định cấu hình trước. Nếu bạn đang sử dụng VSCode, tiện ích mở rộng này có thể giúp hợp lý hóa quy trình làm việc của bạn. Bạn có thể khởi động máy chủ nhà phát triển, gỡ lỗi bản dựng và xem trước ngay từ cửa sổ trình soạn thảo.

VueUse

Một bộ sưu tập API thành phần Vue mới cần thiết giúp làm cho các ứng dụng Vue.js dễ bảo trì và linh hoạt hơn. Nó cung cấp một chức năng để thực hiện các hoạt ảnh, giao tiếp với trình duyệt, quản lý trạng thái và các chức năng tiện ích khác.

Browse Lite

Một trong những phần mở rộng VSCode giúp thêm trình duyệt ngay vào VSCode để bạn làm việc và xem trước mà không cần rời khỏi editor. Nó chạy nhanh với thiết kế gọn gàng kết hợp hoàn hảo trong trình chỉnh sửa. Nó cũng có DevTools hoạt động hoàn toàn giống như Chrome và Firefox.

Min

Min là một trình duyệt rất tối giản nhằm mục đích hiệu suất và bảo vệ quyền riêng tư. Trình duyệt Min cung cấp khả năng xoá quảng cáo, trình theo dõi, tập lệnh và hình ảnh để bạn có thể duyệt nhanh hơn và sử dụng ít dữ liệu hơn.

Volar

Một phần mở rộng VSCode được xây dựng đặc biệt cho Vue 3. Nó cung cấp một máy chủ ngôn ngữ cho Vue.js. Tiện ích mở rộng này vẫn đang được phát triển với nhiều tính năng hơn sắp ra mắt.

Saruni

Khung ứng dụng web đầy đủ với JavaScript. Nó cung cấp các tính năng nền tảng như xác thực, email, tải lên hình ảnh và các công cụ (React, TypeScript, GraphQL, v.v.) để phát triển ứng dụng cũng như triển khai ứng dụng với quy trình làm việc hiện đại.

WithFig

Fig là một ứng dụng macOS bổ sung tính năng tự động hoàn thành và các phím tắt trong Terminal tương tự như ứng dụng trong trình code-editor. Nó giúp các nhà phát triển tiết kiệm thời gian và hiệu quả hơn. Tại thời điểm viết bài, ứng dụng này vẫn đang trong giai đoạn phát triển. Nếu bạn muốn tận dụng những thứ này, bạn có thể đăng ký với tư cách là người dùng beta.

GrapeJS

GrapesJS là một trình tạo bố cục web nhằm mục đích giúp bạn tạo một mẫu HTML mà không cần viết mã. Nó đi kèm với các thành phần được tạo sẵn như nút, cột, hình ảnh, bản đồ, v.v. nơi người dùng có thể chỉ cần kéo-n-thả để tạo bố cục họ thích. Bạn cũng có thể tùy chỉnh các kiểu như kích thước và màu sắc. Và bạn cũng có thể xây dựng các thành phần tùy chỉnh của riêng mình.

Rainbow CSV

Một tiện ích mở rộng VSCode cung cấp đánh dấu cú pháp cho CSV giúp bạn quét và đọc nội dung CSV một cách dễ dàng. Đó là một loại tiện ích nhỏ với lợi ích lớn. Tôi nghĩ điều này nên được thêm vào tính năng mặc định trong VSCode.

Text Power Tools

Một phần mở rộng VSCode cung cấp thao tác văn bản tất cả trong một. Bạn có thể chuyển đổi trường hợp văn bản, lọc dòng và chuỗi bằng cách sử dụng RegEx, loại bỏ các bản sao, chèn số dòng, dấu thời gian, đường dẫn và hơn thế nữa.

VSCode REST Client

Một tiện ích mở rộng VSCode cho phép bạn gửi yêu cầu đến một URL và xem phản hồi từ editor. Phần mở rộng này cung cấp các tính năng khá toàn diện; chẳng hạn, bạn có thể hủy yêu cầu, gửi yêu cầu truy vấn GraphQL, SOAP, hỗ trợ proxy và auth,…

Skyline

Một công cụ nhỏ xinh từ Github để tạo mô hình 3D dựa trên những đóng góp trên Github của bạn trong một năm. Bạn có thể chia sẻ mô hình 3D này trên phương tiện truyền thông xã hội, in nó hoặc xem trong VR.

Snowpack

Một gói JavaScript được thiết kế cho các ứng dụng web hiện đại và nhằm mục đích trở thành một giải pháp thay thế cho gói nặng hơn như Webpack. Snowpack cung cấp quy trình xây dựng tốt hơn, ít cấu hình hơn, đầu ra được tối ưu hóa hơn và hỗ trợ một số khung công tác như React và Preact out of the box.

Enlightn

Một công cụ kiểm tra kiểm tra hiệu suất và các vấn đề bảo mật có thể xảy ra đối với ứng dụng Laravel của bạn. Có hơn một trăm kiểm tra tích hợp từ kiểm tra bảo mật cơ bản đến nâng cao, kiểm tra các phương pháp hay nhất và kiểm tra độ tin cậy.

Site Inspector

Một công cụ kiểm tra kiểm tra trang web của bạn để tìm lỗi chính tả, lỗi ngữ pháp và liên kết bị hỏng cũng như các lỗi đánh máy khác. Nó được xây dựng bằng Ruby / Rails, Vue.js, PostgreSQL và hoàn toàn là mã nguồn mở. Bạn có thể lưu trữ nó trên máy chủ của riêng bạn.

The post Thư viện cho nhà thiết kế tháng 4/2021 appeared first on Nhật Phúc.

Không giống như viết code, tài liệu phải viết làm sao để mọi người dễ dàng tìm hiểu. Về mặt kỹ thuật, chúng ta phải dịch một ngôn ngữ máy (mã) sang một ngôn ngữ có thể hiểu được đối với con người, ngôn ngữ này khó hơn cả code 😀

Mặc dù nó có thể là một gánh nặng thực sự, nhưng việc viết tài liệu rất quan trọng và sẽ mang lại lợi ích cho người dùng, đồng nghiệp của bạn và đặc biệt là chính bạn.

Tài liệu tốt giúp nhiều cho user

Tài liệu giúp người đọc hiểu rõ ràng cách thức hoạt động của code. Nhưng nhiều nhà phát triển đã sai lầm khi cho rằng người sử dụng phần mềm sẽ thành thạo.

Do đó, tài liệu có thể là tài liệu mỏng, bỏ qua rất nhiều yếu tố cần thiết mà nó nên có ngay từ đầu. Nếu bạn hiểu biết về ngôn ngữ, bạn có thể tự tìm hiểu mọi thứ. Nếu bạn không có, thì bạn bị lạc giữa rừng code.

Tài liệu dành cho người dùng thường bao gồm mục đích sử dụng thực tế hoặc cách sử dụng. Quy tắc chung khi tạo tài liệu cho người dùng phổ thông là tài liệu đó phải rõ ràng. Sử dụng các từ thân thiện với con người được ưu tiên hơn các thuật ngữ kỹ thuật hoặc biệt ngữ. Các ví dụ sử dụng thực tế cũng sẽ được đánh giá cao.

Một thiết kế bố cục tốt cũng sẽ thực sự giúp người dùng quét qua từng phần của tài liệu mà không bị mỏi mắt. Một vài ví dụ tốt là tài liệu cho Bootstrap và tài liệu hướng dẫn bắt đầu với WordPress.

Nó giúp các developer khác

Mỗi nhà phát triển sẽ có phong cách viết code riêng của mình. Tuy nhiên, khi nói đến làm việc trong một nhóm, chúng ta thường sẽ phải chia sẻ code với các đồng đội khác. Vì vậy, điều cần thiết là phải có sự đồng thuận về một tiêu chuẩn để giữ mọi người trên “cùng một hệ quy chiếu”. Một tài liệu được viết đúng cách sẽ là tài liệu tham khảo mà nhóm cần.

Nhưng không giống như tài liệu dành cho người dùng cuối, tài liệu này thường mô tả các quy trình kỹ thuật như quy ước đặt tên code, các biến, chỉ ra cách các trang cụ thể nên được tạo và cách API hoạt động cùng với các ví dụ về code.

Ngoài ra, trong trường hợp bạn có thành viên mới tham gia nhóm của mình sau này, các document này có thể là một cách hiệu quả để họ làm quen thay vì tốt rất nhiều thời gian để đào tạo họ.

Nó cũng giúp chính người lập trình

Điều buồn cười về việc viết mã là đôi khi ngay cả chính các nhà phát triển cũng không hiểu được mã mà họ đã viết.

Bạn mới code thì không sao, tuy nhiên trong trường hợp các mã đã được giữ nguyên trong nhiều tháng hoặc thậm chí nhiều năm thì bạn sẽ không nhớ đâu.

Một nhu cầu đột ngột để xem lại các mã vì lý do này hay lý do khác sẽ khiến người ta tự hỏi điều gì đang xảy ra trong tâm trí của họ khi họ viết những mã này.

Đừng ngạc nhiên, điều này rất bình thường!

Bằng cách ghi lại tài liệu cho code của mình, bạn sẽ có thể truy cập đến phần cuối mã của mình một cách nhanh chóng và không bị thất vọng, giúp bạn tiết kiệm rất nhiều thời gian có thể dành cho việc hoàn thành các thay đổi.

Làm thế nào để tạo một document tốt?

Có một số yếu tố giúp xây dựng một phần tài liệu tốt. Một số điều quan trọng nhất như sau:

Đừng tự phán

Đừng cho rằng người dùng của bạn biết những gì bạn biết cũng như những gì họ muốn biết. Tốt hơn hết là nên bắt đầu ngay từ đầu bất kể mức độ thành thạo của người dùng.

Ví dụ: nếu bạn đã xây dựng một plugin jQuery, bạn có thể lấy cảm hứng từ tài liệu của SlickJS. Nó chỉ ra cách cấu trúc HTML, nơi đặt CSS và JavaScript, cách khởi tạo plugin jQuery ở mức cơ bản nhất của nó.

Điểm mấu chốt là tài liệu được viết với quá trình suy nghĩ của người dùng, không phải của nhà phát triển. Tiếp cận tài liệu của riêng bạn theo cách này sẽ cung cấp cho bạn góc nhìn tốt hơn trong việc tổ chức tác phẩm của riêng bạn.

Tuân theo tiêu chuẩn

Khi thêm tài liệu phù hợp với mã, hãy sử dụng tiêu chuẩn mong đợi của ngôn ngữ . Luôn luôn là một ý kiến ​​hay khi mô tả từng hàm, các biến, cũng như giá trị được trả về bởi hàm. Đây là một ví dụ về tài liệu tốt cho ngôn ngữ PHP.

/**
 * Adds custom classes to the array of body classes.
 *
 * @param array $classes Classes for the body element.
 * @return array
 */
function body_classes( $classes ) {
  // Adds a class of group-blog to blogs with more than 1 published author.
  if ( is_multi_author() ) {
    $classes[] = 'group-blog';
  }
 
  return $classes;
}
add_filter( 'body_class', 'body_classes' );

Sau đây là một số tài liệu tham khảo để định dạng tài liệu nội bộ trong PHP, JavaScript và CSS:

• PHP: PHP Documentation Standard for WordPress
• JavaScript: UseJSDoc
• CSS: CSSDoc

Nếu bạn đang sử dụng SublimeText, tôi khuyên bạn nên cài đặt DocBlockr. Nó sẽ thông minh điền trước code của bạn với hướng dẫn nội bộ.

Yếu tố đồ họa

Sử dụng các yếu tố đồ họa, chúng nói tốt hơn văn bản. Những phương tiện này rất hữu ích, đặc biệt nếu bạn xây dựng phần mềm có giao diện đồ họa. Bạn có thể thêm các yếu tố trỏ như mũi tên, vòng tròn hoặc bất kỳ thứ gì có thể giúp người dùng tìm ra nơi cần đến để hoàn thành các bước mà không cần phỏng đoán.

Sau đây là một ví dụ từ ứng dụng Tower nơi bạn có thể lấy cảm hứng từ đó. Họ giải thích bằng video cách hoạt động, dễ hiểu hơn so với việc sử dụng các dòng lệnh văn bản thuần túy.

Phân đoạn

Bạn có thể cân nhắc gói một vài điều trong tài liệu trong danh sách và bảng có dấu đầu dòng vì điều này làm cho nội dung dài hơn dễ dàng hơn để đọc.

Thêm một bảng nội dung và chia tài liệu thành các phần dễ hiểu, nhưng vẫn giữ cho mỗi phần phù hợp với nội dung tiếp theo. Giữ nó ngắn gọn và đơn giản.

Dưới đây là một ví dụ về tài liệu được tổ chức độc đáo trong Facebook. Mục lục sẽ đưa chúng ta đến nơi chúng ta muốn chuyển đến trong một cú nhấp chuột.

Sửa đổi và cập nhật

Cuối cùng, hãy xem lại tài liệu về những sai sót và sửa đổi khi cần thiết hoặc bất cứ khi nào có những thay đổi quan trọng đối với sản phẩm, phần mềm hoặc thư viện.

Và tài liệu của bạn sẽ không có ích cho bất kỳ ai nếu không được cập nhật thường xuyên cùng với sản phẩm của bạn.

The post Vì sao làm developer bạn nên tạo tài liệu hướng dẫn? appeared first on Nhật Phúc.

Nếu bạn đang chạy một trang web cho podcasting và muốn tạo một trình phát đa phương tiện phù hợp với thiết kế web tổng thể của bạn, thì bài đăng này có lẽ là dành cho bạn.

Những gì chúng ta cần

Trước khi tạo trình phát âm thanh, chúng ta cần chuẩn bị một số công cụ cho nó: jPlayer , jQuery và một bộ phông chữ có tên là FontAwesome.

• Trước hết, hãy tải xuống jPlayer. JPlayer là một jQuery Plugin cho phép chúng tôi chạy đa phương tiện trên trang web của mình mà không gặp rắc rối. Miễn là bạn có thể code HTML và CSS, bạn đã sẵn sàng.
• jPlayer về bản chất là một plugin jQuery, do đó chúng ta cũng cần tải xuống jQuery để nó hoạt động.
• Chúng ta cũng cần một số biểu tượng cho giao diện của trình phát đa phương tiện và lần này mình sẽ sử dụng FontAwesome để cung cấp các biểu tượng.

Chúng ta sẽ giải nén tất cả các tệp đã tải xuống và đặt tất cả nội dung, bao gồm tệp jPlayer, jQuery và phông chữ vào cùng một thư mục. Sau đó liên kết  file jquery.js và jquery.jplayer.min.js đến file HTML như sau:

<link rel="stylesheet" href="css/normalize.css">
<link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>

Như bạn có thể thấy, ngoài thư viện jQuery và jPlayer, chúng ta cũng đã liên kết hai tệp CSS trong đó. Cái đầu tiên có tên normalize.css sẽ đặt lại và giúp trang web hiển thị nhất quán hơn trên các trình duyệt, trong khi cái thứ hai, style.css là nơi mình sẽ “trang điểm” cho giao diện.

File âm thanh dùng cho demo

Để trình diễn trong hướng dẫn này, bài viết sẽ sử dụng file âm thanh của Kelli Anderson từ buổi thuyết trình của cô ấy tại TEDx Pheonix.

Cấu trúc HTML markup

Bây giờ, đã đến lúc code HTML cho trình phát âm thanh và dưới đây là đoạn code HTML mà chúng ta cần.

Điều quan trọng từ đoạn code này là phần thuộc tính id=jquery_jplayer_1 được gán trong div chứa tất cả những thứ này. ID này được sử dụng để liên kết cấu trúc này với jPlayer sau này thông qua hàm jQuery.

Hơn nữa, tất cả các lớp giao vào cấu trúc sau, bao gồm jp-play, jp-pause, jp-mute và jp-unmute là tất cả các lớp tiêu chuẩn được sử dụng trong jPlayer.

Do code được build sẵn nên bạn không nên thay đổi các lớp này cũng như thuộc tính id để giúp mọi thứ dễ dàng hơn khi code trình phát âm thanh sau này (trừ khi bạn thực sự biết mình đang làm gì).

<div id="jquery_jplayer_1" class="jp-jplayer"></div>
 
<div id="jp_container_1" class="jp-audio">
  <div class="jp-type-single">
 
    <div class="jp-title">
      <ul>
        <li>TEDxPhoenix - Kelli Anderson - Disruptive Wonder for a Change</li>
      </ul>
    </div>
 
    <div class="jp-gui jp-interface">
 
        <ul class="jp-controls">
          <li><a href="javascript:;" class="jp-play" tabindex="1">&#61515;</a></li>
          <li><a href="javascript:;" class="jp-pause" tabindex="1">&#61516;</a></li>
          <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">&#61480;</a></li>
          <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">&#61478;</a></li>
        </ul>
 
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
 
        <div class="jp-time-holder">
          <div class="jp-current-time"></div>
        </div>
 
        <div class="jp-volume-bar">
          <div class="jp-volume-bar-value"></div>
        </div>
 
    <div class="jp-no-solution">
      <span>Update Required</span>
      To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
    </div>
  </div>
</div>

Đoạn code HTML này bạn có thể thắc mắc các ký tự sau: , ,  và . Các ký tự này là các số HTML đặc biệt để tham chiếu và hiển thị các ký tự biểu tượng đến từ FontAwesome.

Kích hoạt JPlayer

Tiếp theo, chúng ta chỉ cần kích hoạt trình phát bằng đoạn mã dưới đây. Trong đoạn code này, chúng ta cung cấp các nguồn âm thanh và như bạn có thể thấy bên dưới, chúng tôi đã thêm hai nguồn mp3 và oga. Định dạng oga dạng sẽ mở rộng khả năng tương thích trình duyệt chéo, đặc biệt là trong Firefox và Opera.

$(document).ready(function(){
  $("#jquery_jplayer_1").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", {
        mp3: "audio/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.mp3",
        oga: "audio/TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.ogg"
      });
    },
    swfPath: "/js",
    supplied: "mp3,oga"
  });
});

Sau khi chúng ta thêm tập lệnh này, âm thanh thực sự đã có thể phát được và nếu chúng tôi kiểm tra đoạn HTML bằng Firebug hoặc các Công cụ dành cho nhà phát triển khác, chúng ta có thể tìm thấy một <audio>phần tử HTML5 mới cũng được tạo như ảnh dưới:

Chỉnh sửa lại giao diện

Trong phần này, chúng ta sẽ bắt đầu thêm các kiểu để làm cho trình phát âm thanh trông đẹp hơn và chúng ta sẽ bắt đầu bằng cách xác định dùng phông chữ mới và xóa gạch dưới khỏi phần tử anchor.

@font-face {
    font-family: "FontAwesome";
    src: url("fonts/fontawesome-webfont.eot");
    src: url("fonts/fontawesome-webfont.eot?#iefix") format("eot"), 
       url("fonts/fontawesome-webfont.woff") format("woff"), 
       url("fonts/fontawesome-webfont.ttf") format("truetype"), 
       url("fonts/fontawesome-webfont.svg#FontAwesome") format("svg");
    font-weight: 400;
    font-style: normal;
}
a {
    text-decoration: none;
}
.jp-jplayer,.jp-audio {
    width: 420px;
    margin: 50px auto;
}

Tiêu đề cho trình phát

Chúng ta sẽ không thay đổi nhiều kiểu phần này, vì nó chỉ chứa tiêu đề văn bản của âm thanh đang được phát. Chúng ta sẽ chỉ làm cho văn bản tiêu đề nhỏ hơn và chuyển sang màu xám.

.jp-title {
    font-size: 12px;
    text-align: center;
    color: #999;
}
 
.jp-title ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

Vùng chứa trình phát

Giao diện trình phát âm thanh được chứa trong một lớp div được gán với jp-gui.

Bạn có thể thấy trong ảnh chụp màn hình ở trên trình phát đa phương tiện của chúng ta sẽ trông như thế nào. Chúng ta áp dụng các màu chuyển cho giao diện và chúng ta sử dụng số màu này cho màu bắt đầu #f34927 và #dd3311 cho màu kết thúc. Ngoài ra đảm bảo rằng thuộc position cho div là relative.

.jp-gui {
  position: relative;
  background: #f34927;
  background: -moz-linear-gradient(top,  #f34927 0%, #dd3311 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f34927), color-stop(100%,#dd3311));
  background: -webkit-linear-gradient(top,  #f34927 0%,#dd3311 100%);
  background: -o-linear-gradient(top,  #f34927 0%,#dd3311 100%);
  background: -ms-linear-gradient(top,  #f34927 0%,#dd3311 100%);
  background: linear-gradient(to bottom,  #f34927 0%,#dd3311 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f34927', endColorstr='#dd3311',GradientType=0 );
  -webkit-box-shadow:  0px 1px 1px 0px rgba(0, 0, 0, .1);    
    box-shadow:  0px 1px 1px 0px rgba(0, 0, 0, .1);
    border-radius: 3px;
  overflow: hidden;
  margin-top: 10px;
}

Giao diện cho các nút điều khiển

Đây là phần điều khiển để người dùng điều khiển âm thanh, chẳng hạn như nút phát và tạm dừng, nút âm lượng và tắt tiếng. Trong phần này, chúng ta đặt thuộc font-family thành FontAwesome, và chuyển màu văn bản thành màu trắng cũng như thêm bóng văn bản.

.jp-controls {
    padding: 0;
    margin: 0;
    list-style: none;
    font-family: "FontAwesome";
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}
 
.jp-controls li {
    display: inline;
}
 
.jp-controls a {
    color: #fff;
}

Nút Play và Pause

Đối với phát và tạm dừng cũng như nút âm lượng, chúng ta sẽ đặt position của chúng thành absolute, đó là lý do tại sao chúng ta đặt .jp-gui thành positive trước đó. Vì vậy, vị trí của các nút này sẽ liên quan đến cha mẹ gần hơn của chúng hơn là cửa sổ trình duyệt.

.jp-play,.jp-pause {
    width: 60px;
    height: 40px;
    display: inline-block;
    text-align: center;
    line-height: 43px;
    border-right: 1px solid #d22f0f;
}
 
.jp-controls .jp-play:hover,.jp-controls .jp-pause:hover {
    background-color: #de3918;
}
 
.jp-mute,.jp-unmute {
    position: absolute;
    right: 55px;
    top: 0;
    width: 20px;
    height: 40px;
    display: inline-block;
    line-height: 46px;
}
 
.jp-mute {
    text-align: left;
}
.jp-time-holder {
    color: #FFF;
    font-size: 12px;
    line-height: 14px;
    position: absolute;
    right: 90px;
    top: 14px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

Thanh tiến trình và thanh âm lượng

Thanh tiến trình sẽ có giao diện tương tự, chúng chỉ khác nhau về kích thước. Tiến trình rõ ràng phải dài hơn và lớn hơn thanh âm lượng.

.jp-progress {
    background-color: #992E18;
    border-radius: 20px 20px 20px 20px;
    overflow: hidden;
    position: absolute;
    right: 133px;
    top: 15px;
    width: 210px;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2) inset;
}
 
.jp-play-bar {
    height: 12px;
    background-color: #fff;
    border-radius: 20px 20px 20px 20px;
}
 
.jp-volume-bar {
    position: absolute;
    right: 10px;
    top: 17px;
    width: 45px;
    height: 8px;
    border-radius: 20px 20px 20px 20px;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.1) inset;
    background-color: #992E18;
    overflow: hidden;
}
 
.jp-volume-bar-value {
    background-color: #fff;
    height: 8px;
    border-radius: 20px 20px 20px 20px;
}

Đó là tất cả các mã chúng ta cần. Bây giờ bạn có thể xem bản demo cũng như tải xuống toàn nguồn từ các liên kết bên dưới:

• Xem demo
• Tải mã nguồn

Nguồn tham khảo: Hongkiat

The post Cách tạo một trình phát nhạc trên trang web của bạn appeared first on Nhật Phúc.