in ,

Thư viện cho nhà thiết kế tháng 4/2021

HTML, JavaScript và CSS là ba ngôn ngữ tuyệt vời. Nhờ sự tiến bộ xung quanh các ngôn ngữ này, đặc biệt là Electron, giờ đây chúng tôi có thể phát triển một ứng dụng máy tính để bàn đầy đủ hiệu quả hơn có thể chạy trên một số hệ điều hành và nền tảng khác nhau cho dù đó là trên Windows, macOS, Linux hay các ứng dụng di động.

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.

ModernCSS

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.

HyperColor

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.

TailwindKit

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 đủ.

GrepApp

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.

React Toast

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.

PowerToys

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.

Reactotron

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.

Fiddle

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.

Clipy

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.

DevKinsta

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.

Nativefier

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 React Boilerplate

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,…

Electron Vue

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.

Theia

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.

Lepton

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.

Pennywise

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.

Insomnia

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.

Postbird

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.

WNR

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.

Spectron

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.

https://ray.so/

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.

Conic Style

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.

Browserosaurus

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.

Loripsum

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,…

WindiCSS

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.

VSCode Vite

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.

VueUse

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.

Browse Lite

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.

Min

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.

Volar

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.

Sanuri

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.

WithFig

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.

GrapeJS

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.

Rainbow CSV

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.

Text Power Tools

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,…

VSCode REST Client

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.

Skyline

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.

Snowpack

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.

Enlightn

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.

Thư viện cho nhà thiết kế tháng 4/2021 1

Written by Linh Nguyễn

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments