Tài nguyên mới dành cho nhà thiết kế và phát triển web (tháng 10 năm 2017)

Tháng này Fresh Resouces sẽ khác một chút so với các tháng trước. Chúng tôi, các nhà phát triển web, đang kiếm sống trong một ngành thay đổi nhanh chóng và tôi đã thấy rất nhiều thông báo từ một số công ty công nghệ lớn nhất như Google, Microsoft, Firefox và PHP, sẽ thay đổi cách chúng tôi xây dựng Trang web.

Trong phần này, một nửa danh sách của chúng tôi sẽ là về những thông báo này. Vì vậy, hãy sẵn sàng để nói xin chào với tương lai!

Tối ưu hóa hình ảnh thiết yếu

Đó là một bài viết đầy đủ để tối ưu hóa một hình ảnh cho web được viết bởi Addy Osmani. Nó không giống như các bài viết khác xoay quanh cách làm, hoặc chỉ và không nên làm.

Bài viết này thực sự dẫn bạn qua các chi tiết kỹ thuật cũng như khoa học đằng sau việc tối ưu hóa. Bạn cũng sẽ tìm thấy thông tin kỹ lưỡng về một số phương pháp tối ưu hóa và định dạng hình ảnh, các công cụ, mẹo và một số ví dụ thực tế.

PHP 7.2

Toàn diện tham khảo về những gì sắp tới với PHP 7.2. Ngoài các bổ sung cải thiện hiệu năng ứng dụng PHP, PHP 7.2 cũng đi kèm với khấu hao trong đó một số thứ sẽ được loại bỏ và không nên được sử dụng.

Trong PHP 7.2, có hai hàm sẽ không được dùng nữa tạo_feft () và __autoload (). Nếu bạn là nhà phát triển web, xem lại mã của bạn và thực hiện các thay đổi cần thiết. Tôi đã thấy nhiều plugin WordPress vẫn đang sử dụng hai chức năng này.

API chia sẻ web

Tôi thực sự không thấy API này xuất hiện trên web. Tuy nhiên, vì một nửa tương tác của chúng tôi trên web là về “chia sẻ”, API này sẽ làm cho mọi thứ rất nhiều các nhà phát triển web dễ dàng hơn để xây dựng trải nghiệm chia sẻ bản địa, đặc biệt trên nền tảng di động.

API này hiện chỉ khả dụng trong Google Chrome cho Máy tính để bàn và Android. Hãy xem video Youtube này để xem nó hoạt động.

Thuộc tính hình ảnh không đồng bộ

Một điều nữa sẽ cách mạng hóa web là không đồng bộ thuộc tính cho phần tử img. Tại thời điểm viết, có một số cách tiếp cận tải hình ảnh không đồng bộ liên quan đến một mẹo nhỏ về JavaScript. Chúng tôi sẽ sớm có thể thêm async = bật lên img thành phần.

Lượng tử Firefox

Mozilla đã tích cực đẩy các bản cập nhật lên Firefox với một số cải tiến, có tên mã “Lượng tử dự án”. Nó bao gồm CSS lượng tử - một công cụ mới cho kết xuất CSS cực nhanh, giao diện người dùng mới và DevTools mới.

Bản phát hành là đạt được sức hút trong các nhà phát triển web và một số đã chuyển trình duyệt chính của họ sang Firefox. Có nhiều thứ hơn trong dự án này bao gồm Quantum DOM và WebRender. Chúng ta sẽ thấy ứng cử viên Node.js dựa trên công cụ Firefox Quantum phải không? Vâng, có lẽ là có.

MS Edge cho iOS và Android

Microsoft vừa công bố phát hành trình duyệt mới nhất của mình, Edge, cho iOS và Android. Điều này có nghĩa là có thêm một trình duyệt để các trang web của bạn thử nghiệm với.

Gutenberg

WordPress hiện đang trong một dự án đầy tham vọng, mã có tên Gutenberg. Gutenberg là một facelift để trình soạn thảo WordPress được xây dựng gần như hoàn toàn bằng JavaScript.

Tại thời điểm này, Gutenberg là được xây dựng với React nhưng dự án đang xem xét một khuôn khổ khác như Preact, Vue hoặc một cái gì đó khác. Bây giờ nó là một tình huống phức tạp. Vì vậy, đối với các nhà phát triển WordPress xây dựng các chủ đề và plugin, hãy chú ý đến dự án như nó sẽ thay đổi cách chúng ta xây dựng WordPress mãi mãi.

Cho phép

FoitFout là một công cụ tiện dụng để so sánh hai cách tiếp cận khác nhau được gọi là FOIT và FOUT với tải phông chữ tùy chỉnh trên web. Với công cụ này, bạn có thể mô phỏng hai cách tiếp cận và quyết định cách tiếp cận nào phù hợp nhất với trang web của bạn.

Vũ

Vũera là một Thư viện JavaScript cho phép bạn sử dụng Vue và React cùng nhau. Bạn có thể bao gồm một thành phần Vue từ một .vue hoặc sử dụng thành phần React trong Vue. Nhóm của bạn bây giờ có thể hiệu quả hơn với bất kỳ khuôn khổ nào họ thích sử dụng.

Có thể kéo

“Có thể kéo” là thư viện tuyệt vời từ Shopify. Nó được xây dựng trên đầu trình duyệt gốc API kéo và n cho phép bạn sử dụng API rộng rãi để làm việc với. Trong trường hợp, nó không cung cấp thứ bạn cần, bạn có thể viết mô-đun tùy chỉnh để mở rộng chức năng của nó. Kiểm tra bản demo để xem nó hoạt động như thế nào.

Lưu đồ

Như tên của nó, FlowchartJS là một thư viện cho phép xây dựng sơ đồ như trong PowerPoint. Tương tự, bạn có thể tạo các hình dạng khác nhau của biểu đồ bao gồm hình tròn, hình elip, hình vuông, hình thoi, hình tam giác, v.v..

QuickBill

Nhẹ và ứng dụng web đơn giản để tạo hóa đơn. Nó sử dụng các công nghệ trình duyệt và API gốc để chạy nên không cần tài khoản. Chỉ cần truy cập trang web, thêm các mục vào hóa đơn và tạo tệp PDF. Đó là nó!

Mocka

Mocka là một giữ chỗ nội dung mà bạn có thể sử dụng cho trang web tạo mẫu. Nó chỉ có 500 byte và hoàn toàn tùy biến. Bạn có thể dễ dàng đưa nó vào tệp CSS của dự án bằng cách sử dụng Sass mixin.

Các CSS cung cấp một số lớp kể cả phương tiện truyền thông để tạo một trình giữ chỗ hình ảnh, tiêu đề để tạo một Tiêu đề và văn bản mocka để tạo một văn bản tùy ý.

VueStar

VueStar là một Thành phần Vue để thêm hiệu ứng lấp lánh khi bạn nhấp vào biểu tượng, tương tự như những gì Twitter làm với “tim” biểu tượng trong ứng dụng di động của họ. Thành phần giới thiệu một yếu tố mới có tên ngôi sao nơi bạn có thể thêm nó trong thời đại web. Và bạn đã hoàn thành!

Sân chơi lưới

CSS Grid giới thiệu một khái niệm mới trên web để xây dựng bố cục và thoạt nhìn nó khá phức tạp với nhiều thuộc tính mới mà nó có.

GridPlayground về cơ bản là một Mozilla chủ động dạy CSS Grid và thúc đẩy việc áp dụng CSS Grid về phía trước. Ngay cả Firefox cũng mang đến một công cụ mới cho DevTools để kiểm tra bố cục Grid.

Quản lý đoạn trích

“Quản lý đoạn trích” là một đơn giản ứng dụng để lưu trữ và quản lý đoạn mã. Bạn có thể tạo một mục mới, dán mã và đặt điểm. Tại thời điểm này, không có gì quá lạ mắt và nó chỉ cung cấp mã nguồn mà bạn sẽ cần biên dịch bằng NPM.

Giao diện theo thẻ

Một điều tuyệt vời hướng dẫn xây dựng điều hướng tab tiến bộ và có thể truy cập với việc sử dụng JavaScript tối thiểu. Một tài nguyên tuyệt vời cho những ai muốn tìm hiểu thêm về thiết kế có thể truy cập.

SwissInCSS

SwissInCSS trưng bày một số thiết kế poster cổ điển của Thụy Sĩ không sử dụng CSS. Mã nguồn có sẵn trong CodePen.