Polypane 2.1: Chỉnh sửa tất cả các bảng của bạn cùng một lúc

[ad_1]

Với Polypane, chúng tôi muốn cung cấp cho bạn thông tin chi tiết tốt hơn về trang web của bạn và làm cho toàn bộ công việc của nhà phát triển / nhà thiết kế nhanh hơn. Với Polypane 2.1, chúng tôi đã thực hiện một số cải tiến lớn cho cả hai mục tiêu đó.

Có gì mới?

Danh sách nhanh các tính năng mới quan trọng:

  • CSS trực tiếp Chỉnh sửa tất cả các bảng cùng một lúc
  • Xem trước phương tiện truyền thông xã hội Xem trang của bạn trông như thế nào khi được chia sẻ trên Facebook, Slack, Twitter và LinkedIn.
  • Thông tin meta Nhận tổng quan đầy đủ về tất cả các thẻ meta của bạn
  • Handoff / duyệt Sử dụng Avocode, Zeplin và trực tiếp hơn trong Polypane
  • UI không gian làm việc Chuyển đổi nhanh giữa các bộ khung yêu thích của bạn

Ngoài ra, chúng tôi cũng đã thêm điều chỉnh mạng, lớp phủ mới và được cải thiện, chỉ báo tốt hơn, cách phát hiện khi trang web của bạn được hiển thị trong Polypane , cải thiện tốc độ và nhiều tính năng nhỏ hơn.

Bảng điều khiển CSS trực tiếp

Viết CSS và SCSS là được áp dụng cho tất cả các pan cùng một lúc. Với bảng điều khiển Live CSS, nhanh chóng thử kiểu dáng mới cho trang web của bạn trên nhiều kích thước là cực kỳ dễ dàng và rất bão hòa.

Trình chỉnh sửa CSS có đầy đủ tính năng, biết tất cả các khai báo CSS và sẽ đề xuất các khai báo phù hợp khi bạn nhập , vì vậy, viết CSS là siêu nhanh .

CSS trực tiếp đi kèm với bộ chọn phần tử. Điều này sẽ cho phép bạn nhấp vào bất kỳ phần tử nào trong bất kỳ khung nào, đi qua CSS và tìm các bộ chọn thực tế cho phần tử đó và đưa ra chúng làm gợi ý trong trình chỉnh sửa. Chọn các yếu tố để viết CSS là cực nhanh và không yêu cầu bạn phải mở devtools để tìm chúng.

Cuối cùng, tất cả các phông chữ của Google đều có sẵn khi bạn viết CSS trực tiếp, vì vậy hãy thử các phông chữ mới là dễ dàng như nói phông chữ-họ: Aladin . Polypane sẽ tự động tải các phông chữ cho bạn.

Thông tin thêm về bảng điều khiển Live CSS

Bảng thông tin meta

Bảng thông tin meta hiển thị cho bạn tất cả thông tin được xác định trong . Tiêu đề, mô tả và favicon của bạn, nhưng cũng có tất cả các thẻ meta, khai báo khung nhìn, ngôn ngữ và thông tin khác. Điều này giúp dễ dàng phát hiện thông tin hoặc lỗi chính tả.

 Thông tin meta cho Spiritapp.io "src =" http://polypane.app/bloss/polypane-2-1/meta.png "class = "Đột phá imgshadow" /> 

<h3 id= Xem trước phương tiện truyền thông xã hội / đoạn trích phong phú

Bảng thông tin meta cũng cung cấp cho bạn bản xem trước các thẻ xã hội của Twitter, Facebook, Slack và Linkedin, cũng như Google kết quả tìm kiếm . Đối với Twitter và Slack, chúng tôi cũng hỗ trợ chế độ tối của họ.

Khi phát triển tính năng này, chúng tôi phát hiện ra rằng không có bản xem trước thẻ xã hội chính thức nào của Twitter, Facebook và Linkedin cho thấy chính xác những gì bạn Thẻ sẽ trông giống như vậy. Tất cả đều lỗi thời!

Ngoài ra, mặc dù tài liệu của họ tuyên bố khác, tất cả các trang web đều sử dụng bất kỳ thông tin meta nào có sẵn. cách các thẻ xã hội thực sự được hiển thị và chúng tôi sao chép nó với pixel-perf ect chính xác.

Các bản xem trước xã hội được tạo của chúng tôi: Twitter, Facebook, Linkedin & Slack (theo chiều kim đồng hồ.)

 Xem trước xã hội cho Doka.js. Theo chiều kim đồng hồ: Twitter, Facebook, Linkedin, Slack "src =" http://polypane.app/bloss/polypane-2-1/previews.png "style =" lề-trái: auto; lề-phải: auto; display: chặn "/> 

<p> Thông tin thêm về bảng thông tin Meta </p>
<h3 id= Bảng điều khiển / trình duyệt

Một khía cạnh quan trọng của phát triển hiện đại là handoff: các công cụ thiết kế và sau đó hiển thị CSS và kích thước về các yếu tố và cho phép bạn xuất hình ảnh, do đó bạn không cần phải bấm xung quanh trong một công cụ thiết kế để tìm ra tất cả những thứ đó.

   Avocode "src =" http://polypane.app/bloss/polypane-2-1/avocode.svg "style =" width: 100px "/>
  <img class= Bảng điều khiển không gian làm việc

Không gian làm việc được giới thiệu trong Polypane 1.1 như một cách để lưu của các bảng sử dụng phím tắt hoặc menu cửa sổ. Bây giờ chúng có giao diện trực quan.

Bảng không gian làm việc chứa một tổng quan trực quan của tất cả 9 không gian làm việc (có bản xem trước) và cho phép bạn dễ dàng lưu và khôi phục chúng.

Điểm mới trong bảng không gian làm việc là bạn có thể đặt tên cho không gian làm việc của mình, do đó bạn không còn phải nhớ nếu, ví dụ, các thiết bị Android của bạn ở trong không gian làm việc 1 hoặc 2.

Nơi bạn có thể tìm thấy tất cả các tính năng mới này: bảng điều khiển bên

Với bảng điều khiển bên, Polypane có được một vị trí mới để thêm chức năng và hiển thị thông tin trang web không dễ dàng nổi lên trong các trình duyệt khác, nhưng vẫn cực kỳ quan trọng.

Bạn có thể gắn bảng điều khiển bên cạnh bên phải hoặc bên dưới để bạn có thể làm cho nó phù hợp với cấu hình màn hình yêu thích của bạn.

 Bảng điều khiển bên "src = "http://polypane.app/bloss/polypane-2-1/sidepanel.png" class = "imgshadow" /> 

<h2 id= Lớp phủ mới và cập nhật

Trong Polypane 2, chúng tôi đã giới thiệu lớp phủ: mô phỏng và trình gỡ lỗi bạn có thể chồng lên một khung. Các trình giả lập này cho phép bạn nhanh chóng kiểm tra các vấn đề về khả năng truy cập và mô phỏng những thứ như mù màu hoặc xem trang web của bạn dưới ánh sáng mặt trời. Trong Polypane 2.1, chúng tôi đã thêm nhiều lớp phủ và cải thiện lớp phủ hiện có.

 Lớp phủ mới và được cải tiến "src =" http://polypane.app/bloss/polypane-2-1/overlays.png " = "imgshadow breakout" /> 

<p> Có lớp phủ chỉ mục Z mới (phía trên bên trái) làm nổi bật các phần tử có chỉ số z được xác định. Nó dựa trên plugin mà Addy Osmani đã viết cho Visorms, với các cải tiến UI mà chúng tôi đã Chúng tôi cũng đang đóng góp lại cho dự án đó. Chúng tôi đã cải thiện khả năng đọc và cũng hiển thị ngăn xếp chỉ số z cho từng yếu tố có một. </p>
<p> Chúng tôi có hai trình giả lập suy giảm thị giác mới: Glaucoma (trung tâm trên cùng) và Đục thủy tinh thể (trên cùng bên phải) Cả hai điều kiện mắt này làm mờ và làm mờ tầm nhìn của bạn. </p>
<p> Trình kiểm tra độ tương phản màu (phía dưới bên trái) hiện hoạt động tốt hơn khi hình nền được xác định cho tổ tiên và không còn cần tải lại. </p>
<p> Ánh sáng mặt trời rực rỡ (trung tâm phía dưới) giờ đây ít bị lóa hơn và có ánh sáng chói bổ sung để mô phỏng các phản xạ mà kính o Thiết bị na tạo. </p>
<p> Chúng tôi có chế độ Ban đêm mới (dưới cùng bên phải) mô phỏng giao diện trang của bạn khi Chế độ ban đêm hoạt động, trong đó màn hình quay số tông màu xanh và độ sáng. </p>
<h2 id= Mạng throttling

 Bộ chọn điều chỉnh "src =" http://polypane.app/bloss/polypane-2-1/throttling.png "class =" imgshadow "style =" lề: 0 0 1rem 1rem; float: đúng "/> 

<p> Ở chế độ cách ly, giờ đây bạn có thể điều tiết kết nối mạng của mình bên cạnh các thiết bị mô phỏng, để kiểm tra cách một trang hoạt động trong các cài đặt thực tế hơn. Chúng tôi hiện có 4 cài đặt: Trực tuyến, Di động trung cấp, Di động cấp thấp và ngoại tuyến. </p>
<p> Thêm về điều chỉnh mạng </p>
<h2 id= Phát hiện Polypane

Nếu bạn đang phát triển trang web của mình , bạn có thể muốn hiển thị thông tin gỡ lỗi bổ sung hoặc kiểm tra các biến thể khác nhau của trang của mình trong các bảng khác nhau. Bắt đầu từ Polypane 2.1, chúng tôi cung cấp hai cách để phát hiện trang web của bạn đang chạy trong Polypane, thông qua tác nhân Người dùng của chúng tôi và thông qua một tài sản __ polypane trên cửa sổ .

Đọc về cách để phát hiện Polypane

Chúng tôi đã tắt các chú giải công cụ gốc cho tất cả các nút cho các nút tùy chỉnh của chúng tôi, để chúng hiển thị nhanh hơn và trông đẹp hơn, giúp bắt đầu với Polypane dễ dàng hơn.

]  Tất cả các chỉ số hoạt động "src =" http://polypane.app/bloss/polypane-2-1/indicators.png "class =" imgshadow "/> 

<p> Tất cả hình ảnh tham chiếu, Lớp phủ, Thi đua và Devtools có một chấm màu xanh khi chúng hoạt động. </p>
<p> Đối với Thi đua, chúng tôi hiển thị một chấm màu vàng khi mạng bị điều chỉnh và nếu bạn gặp lỗi trong bảng điều khiển, biểu tượng Devtools sẽ có một chấm đỏ. sẽ cho bạn biết ngay nếu có một vấn đề bạn cần xem xét, mà không cần phải mở các devtools. Thi đua và Devtools có sẵn trong I solate chế độ Pane. </p>
<h2 id= Cải tiến sàng lọc màn hình

Mỗi bản phát hành chúng tôi tiếp tục tinh chỉnh và cải thiện ảnh chụp màn hình chúng tôi tạo để có kết quả tốt hơn. Polypane đã tốt hơn nhiều so với Chrome, Firefox và gần như tất cả các công cụ trực tuyến (xem trang so sánh Ảnh chụp màn hình để tìm hiểu cách thức) và chúng tôi đang tiếp tục làm cho ảnh chụp màn hình tốt hơn cho các trang web động. Các tập lệnh bây giờ tải tốt hơn và hình ảnh động được xử lý ổn định hơn.

Cải thiện hiệu suất

Chúng tôi đã viết lại các phần của Polypane để làm cho chúng nhanh hơn và hiệu quả hơn. Việc cuộn được đồng bộ hóa bây giờ nhanh hơn rất nhiều và hầu hết việc nhắn tin và xử lý nội dung được thực hiện không đồng bộ, khiến giao diện người dùng phản ứng nhanh hơn.

Thay đổi đầy đủ:

Có nhiều tính năng mới hơn, cải tiến và sửa lỗi trong bản phát hành này, vì vậy hãy đọc qua toàn bộ thay đổi bên dưới. Tất cả các tính năng mới cũng được ghi lại đầy đủ trong các tài liệu của chúng tôi.

  • Mới Bảng điều khiển bên
  • Mới Bảng thông tin meta trang web
  • Mới Bảng CSS trực tiếp
  • Mới Bảng điều khiển / trình duyệt
  • Mới Bảng điều khiển không gian làm việc [19900] Mới Lớp phủ mới: Chỉ số Z, Glaucoma, Đục thủy tinh thể và Chế độ ban đêm
  • Mới Điều chỉnh mạng
  • Mới tùy chọn trì hoãn
  • Mới Phát hiện Polypane từ trang web của bạn
  • Cải thiện Sử dụng chú giải công cụ tùy chỉnh cho tất cả các nút
  • Đồng bộ hóa cuộn nhanh hơn và hiệu quả hơn
  • Cải thiện Lớp phủ tương phản màu đã cải thiện tính toán
  • Cải thiện Lớp phủ tương phản màu không còn cần tải lại
  • Cải thiện Lớp phủ ánh sáng mặt trời sáng hiện mô phỏng ánh sáng chói
  • Cải thiện
  • Cải thiện Hỗ trợ sàng lọc toàn trang tốt hơn
  • Cải thiện Các biểu tượng trong tiêu đề khung hiện hiển thị các dấu chấm hoạt động
  • devtools hiển thị dấu chấm màu đỏ khi có lỗi
  • Cải thiện Biểu tượng devtools của cửa sổ nhấp chuột sẽ tập trung lại nếu đã mở
  • Cải thiện
  • Cải thiện Tất cả các cửa sổ bật lên sẽ ở bên trong cửa sổ
  • Cải thiện Đóng tất cả các tùy chọn panes được thêm vào menu
  • Cảnh báo khi mở hơn 15 panes
  • Cải thiện Đã thêm phím tắt f6 vào thanh địa chỉ tiêu điểm
  • Cải thiện Biểu tượng giao diện người dùng Tweak
  • giới hạn của các điểm dừng được tạo hiện là 320px
  • Khắc phục Chế độ đầy đủ không còn tràn màn hình
  • Khắc phục Cải thiện tốc độ và khả năng phản hồi
  • Khắc phục Thu phóng để phù hợp với panes hoạt động trở lại
  • Khắc phục Hỗ trợ nhiều cấp nhập khẩu để phát hiện điểm dừng
  • Khắc phục các tập lệnh chặn lâu hơn khi tạo ảnh chụp màn hình
  • Khắc phục trang 404 ở chế độ đầy đủ không còn chồng chéo các biểu tượng
  • Khắc phục Ngăn chặn đồng bộ hóa các đầu vào tệp

Bắt Polypane 2.1

Polypane sẽ tự động cập nhật trên Mac và Windows. Người dùng Linux cần tải xuống phiên bản mới từ
trang tải xuống và nếu bạn đang ở trên Mac và Windows nhưng không muốn đợi trên cửa sổ bật lên cập nhật, bạn có thể tìm thấy
bạn cũng tải xuống ở đó.

Nếu bạn chưa có Polypane thì vẫn có bản dùng thử 14 ngày miễn phí. Lấy nó ở đây.

[ad_2]
Source link: webdesignernews

Leave a Reply

Your email address will not be published. Required fields are marked *