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

Tháng này chúng tôi đã thấy một vài thông báo từ những cái tên đáng chú ý trong công nghệ. Ví dụ: Apple mở nguồn hệ thống cơ sở dữ liệu mới, Google đã phát hành một công cụ mới để đo tốc độ trang web của bạn trên thiết bị di động và Github với một khóa học miễn phí để giúp bạn bắt đầu với Git, Github và mã hóa nói chung.

Ngoài ra, trong bài viết hôm nay, tôi cũng sẽ tính năng một số công cụ mới hiện đang gia tăng. Hãy nhảy vào những gì chúng ta có nhiều hơn trong danh sách.

VuePress

Một công cụ mới từ người tạo ra Vue, VuePress là một trình tạo trang tĩnh được thiết kế với Vue.js trong tâm trí. Nó tạo và kết xuất lại HTML tĩnh cho mỗi trang và chạy như một SPA (Ứng dụng một trang). Nó đi kèm với một số tính năng vượt trội bao gồm khả năng thêm ID Google Analytics, tìm kiếm, điều hướng tiếp theo và trước, thanh bên và PWA.

IMG-2

Một thư viện JavaScript giới thiệu một yếu tố tùy chỉnh, img-2. Phần tử mới thêm một số tối ưu hóa không đi kèm với tiêu chuẩn img thành phần, cải thiện cách tải hình ảnh cho người dùng. Với thành phần tùy chỉnh, hình ảnh sẽ được lưu trữ trước, nó cũng lười tải hình ảnh và phân phối sẽ từ bộ đệm chỉ khi hình ảnh đi vào khung nhìn của người dùng. Kiểm tra bản demo.

Tabler

Bảng điều khiển / Bảng quản trị thanh lịch dựa trên Bootstrap 4. Bảng điều khiển có các thành phần được tạo sẵn như Biểu đồ, Biểu mẫu, Phòng trưng bày, Bảng giá và một bảng điều khiển đẹp bộ sưu tập các biểu tượng tùy chỉnh. Một điểm khởi đầu tuyệt vời để cho phép các nhà phát triển xây dựng Bảng quản trị nhanh chóng. Kiểm tra bản demo!

DayJS

DayJS Thư viện JavaScript để định dạng ngày và giờ. Thậm chí, DayJS còn có các API tương tự như Moment.js, nhưng nó chỉ có trọng lượng 2Kb. Cho rằng, nó có thể là một thay thế tuyệt vời cho Moment.js, nếu bạn muốn một thư viện nhẹ hơn nhưng vẫn duy trì sự quen thuộc với những gì bạn đã biết.

Thống nhất

Một thư viện PHP để xử lý các tệp nén, UnifiedArchive hỗ trợ một loạt các định dạng bao gồm RAR, Zip, Gzip, Tar, và rất nhiều kiểu nén khác. Với thư viện này, bạn có thể lưu trữ và giải nén tập tin hoặc thư mục. Nó cung cấp một một số API để thao tác với các tệp sau khi nó được trích xuất từ ​​kho lưu trữ. UnifiedArchive có sẵn dưới dạng gói Composer.

Phòng thí nghiệm học tập Github

Github vừa công bố khóa học miễn phí bao gồm chủ yếu Git trong Github. Có 5 khóa học tại thời điểm này, nơi bạn có thể học một vài điều hữu ích như Cách sử dụng Github để lưu trữ mã của bạn, Cách sử dụng trang Github để có được một trang web hoặc blog miễn phí cho dự án của bạn và cách quản lý Xung đột hợp nhất thường xảy ra khi bạn làm việc với nhiều nhà phát triển trong một dự án.

Trình phân tích cú pháp DOM UnitTest DOM

Một mẹo hay từ Takayuki Miyauchi trên kiểm tra DOMEuity khi thực hiện UnitTest trong các ứng dụng WordPress. Cá nhân tôi thấy điều này thực sự hữu ích; hy vọng bạn tìm thấy nó giống nhau.

Popmotion

Một thư viện JavaScript cho một hình ảnh động mượt mà trên web, “Popmotion” cung cấp một API có tên Vật lý cho phép bạn tạo ra với hiệu ứng hoạt hình gần như thật. Nó không bị ảnh hưởng; thư viện đơn giản xuất giá trị dựa trên bộ cấu hình cụ thể. Điều này cho phép bạn áp dụng các kết quả đầu ra đó để tạo hiệu ứng cho bất kỳ phương tiện nào, bao gồm CSS, SVG, Three.js và thậm chí React.js.

Driver.js

Một thư viện JavaScript cho phép bạn “lái xe” người dùng tập trung vào một trang. Điều này đặc biệt hữu ích nếu bạn muốn giới thiệu các tính năng cụ thể hoặc hướng dẫn họ thực hiện các tác vụ cụ thể trên trang. Driver.js chỉ là Kích thước 4 KB, có thể tùy chỉnh và thân thiện với bàn phím.

Thay thế GIF hoạt hình bằng video

GIF ở khắp mọi nơi, sau khi làm cho một trở lại tuyệt vời. Nhưng vấn đề về GIF là nó thường rất lớn. Đó là một sự lãng phí băng thông, nhưng chất lượng đồ họa thường khủng khiếp. Điều này hướng dẫn từ Google cho thấy làm thế nào “Video” có thể thay thế GIF để hiển thị đồ họa hoạt hình.

Mặt nạ văn bản

Một thư viện JavaScript để chuyển đổi văn bản yêu cầu định dạng đặc biệt như số điện thoại, tiền tệ hoặc số thẻ tín dụng. Khi người dùng đang gõ văn bản sẽ tự động được chuyển thành định dạng phù hợp để cải thiện trải nghiệm người dùng. TextMask có thể được sử dụng với React, Vue hoặc JavaScript đơn giản cũ.

So sánh tốc độ trang web di động

Đây là một công cụ tiện dụng khác của Google. Công cụ này sẽ cho phép bạn kiểm tra tốc độ trang web của bạn khi tải từ điện thoại di động và ước tính tổng thiệt hại doanh thu khi trang web tải chậm. Bạn có thể chọn quốc gia và tốc độ trong đó trang web của bạn sẽ được kiểm tra.

VueNut

Đồng hành phát triển khi xây dựng ứng dụng web với Vue.js và Vuex, VueNut làm cho nó dễ dàng hơn để khám phá trạng thái dữ liệu được lưu trữ và cho phép bạn thao tác dữ liệu trong quá trình phát triển một cách dễ dàng. Đồ mát!

FoundationDB

Gần đây, Apple đã tạo ra mã nguồn mở FoundationDB trong Github. nó là một hệ thống cơ sở dữ liệu cặp khóa-giá trị hứa hẹn khả năng mở rộng và hiệu suất. Thật tuyệt khi có các công ty công nghệ lớn bắt đầu cống hiến cho nguồn mở một số sản phẩm của họ.

Truyện

StoryBooks là một công cụ để xây dựng thành phần React trong sự cô lập. Nó cung cấp một giao diện người dùng trên trình duyệt cho phép bạn xem các trạng thái khác nhau của từng thành phần cũng như kiểm tra các thành phần.

GhostText

Một phần mở rộng trình duyệt sẽ đồng bộ hóa những gì bạn viết trên trình duyệt với trình soạn thảo văn bản của bạn hoặc ngược lại. Tôi thấy điều này cuối cùng hữu ích nếu bạn muốn có thể viết trên một trang web với sự tiện lợi và các tính năng của trình soạn thảo mã của bạn. GhostText có sẵn cho Chrome, Firefox và Opera.

Coala

Coala là một CLI cung cấp giao diện cho việc nhuộm và sửa mã bất kể ngôn ngữ được sử dụng. Bạn có thể sử dụng Coala trong trình chỉnh sửa mã, tích hợp nó với CI (Tích hợp liên tục) và tùy chỉnh nó với cú pháp cấu hình trong .coafile. Coala hỗ trợ nhiều ngôn ngữ như CSS, JavaScript, PHP và bạn có thể tìm thấy nhiều hơn trong thư mục này.

ReactStrap

ReactStrap là một tập hợp các thành phần Bootstrap 4 được chuyển đổi thành các thành phần React có thể tái sử dụng. Nếu bạn muốn hiện đại hóa trang web dựa trên Bootstrap cũ của mình, thư viện này là thứ bạn có thể muốn xem xét.

Phản ứng

Một công cụ khác liên quan đến React, Reacto là một IDE được xây dựng dựa trên Electron và được thiết kế để phát triển các ứng dụng web với ReactJS. Điều này có vẻ thực sự tiện dụng nếu phát triển chính của bạn xoay quanh ReactJS.

PicoJS

Một thư viện JavaScript cho phép nhận diện khuôn mặt. Nó hoạt động với một bức ảnh tĩnh hoặc từ máy ảnh tích hợp. Thật là hấp dẫn khi công nghệ web phát triển trong vài năm qua.