Home-theater-designers
Bắt đầu với phát triển web JavaScript có thể là một quá trình khó khăn, nhưng có những công cụ giúp việc này trở nên dễ dàng hơn.
CodePen.io là một môi trường viết mã trong trình duyệt được thiết kế cho cả việc học viết mã và nhanh chóng tạo ra các ý tưởng nguyên mẫu với ít rắc rối nhất.
Trong bài viết này, chúng tôi xem xét một số tính năng của trang web và cách chúng có thể giúp bạn trở thành một lập trình viên giỏi hơn.
CodePen là gì?
CodePen cung cấp một cái gì đó được gọi là cái bút , bao gồm ba cửa sổ khác nhau cho HTML, CSS và JavaScript, cùng với một ngăn xem trước cập nhật trong thời gian thực khi bạn nhập.
Mặc dù nó thường được sử dụng cho các nhà phát triển web để giới thiệu các ý tưởng cho các trang web, nhưng nó cũng là một nơi tuyệt vời để học những kiến thức cơ bản về phát triển web front-end. Dưới đây là những tính năng đáng chú ý nhất mà bạn cần biết khi sử dụng CodePen.
1. Bộ tiền xử lý
Bộ tiền xử lý là các ngôn ngữ thông dịch hoặc biên dịch được thiết kế để đơn giản hóa việc mã hóa. Họ có thể thêm các tính năng vào một ngôn ngữ để thuận tiện và làm cho mã dễ đọc hơn. Trong phát triển web, sự kết hợp của các bộ tiền xử lý cho HTML, CSS và JavaScript được sử dụng để tạo mã sạch một cách nhanh chóng.
Nếu bạn đang học phát triển web và muốn dùng thử các bộ tiền xử lý khác nhau, CodePen cho phép bạn chuyển đổi nhanh các bộ tiền xử lý và xem mã mà nó biên dịch theo thời gian thực. Mỗi ngăn trong số ba ngăn trên ứng dụng CodePen có một menu thả xuống ở trên cùng bên phải. Lựa chọn Xem HTML / CSS / JS đã biên dịch để xem mã sẽ được diễn giải như thế nào.
Trong bút này, chúng tôi đã tạo một trang web đơn giản bằng cách sử dụng Haml và Sass để tạo kiểu cho một số văn bản tiêu đề. Lựa chọn Xem tổng hợp hiển thị HTML và CSS chuẩn. Trong ví dụ này, sự khác biệt là tối thiểu. Tuy nhiên, trong khi học một ngôn ngữ mới, có thể hữu ích khi xem mã được xử lý trước trông như thế nào sau khi được biên dịch.
2. Nguồn lực bên ngoài
Cùng với hỗ trợ gốc cho bộ tiền xử lý, CodePen còn hỗ trợ các tập lệnh bên ngoài. Điều này làm cho nó trở thành nơi hoàn hảo để có được trải nghiệm thực tế với các thư viện cho các dự án cá nhân của bạn hoặc tìm hiểu các thư viện ứng dụng web phổ biến như React.
Để thêm một thư viện bên ngoài, hãy mở Cài đặt trên bút của bạn và chuyển đến tab JavaScript. Có hai cách để thêm tài nguyên, bằng cách thêm URL tài nguyên theo cách thủ công hoặc bằng cách tìm kiếm.
Chúng tôi đã sử dụng tính năng này trong bài viết của chúng tôi bao gồm hoạt ảnh web với mo.js , cùng với xử lý trước Babel.
Xem bút Ví dụ về Mojs MUO bởi Ian ( @Bardoctorus ) trên CodePen.
Có, bút CodePen có thể được nhúng! Hãy tiếp tục và nhấp vào khung xem trước ở trên để xem kết quả của hướng dẫn Mo.js!
Các bút khác có thể được nhập giống như các thư viện bên ngoài. Điều này có nghĩa là bạn có thể lấy các yếu tố từ những chiếc bút đã viết trước đây để sử dụng giống như các mô-đun trong những chiếc bút mới của mình. Người dùng CodePen Adam's Cuộc thăm dò ý kiến đơn giản bút là một ví dụ điển hình cho điều này.
3. Mẫu
Khi bạn đang học các khái niệm mới hoặc thử nghiệm các ý tưởng mới, bạn thường sử dụng các thành phần tương tự và đọc lại các bước tương tự để bắt đầu. CodePen cho phép tạo các bút mẫu có thể loại bỏ sự lặp lại và cho phép bạn đi thẳng vào vấn đề.
Để tạo một mẫu, hãy mở một cây bút mới, thực hiện các thay đổi của bạn và chọn Bản mẫu thanh trượt trong menu cài đặt.
https://vimeo.com/221428690
Cho đến gần đây, người dùng miễn phí chỉ có thể tạo ba mẫu, nhưng bây giờ tất cả người dùng có thể có bao nhiêu mẫu trong tài khoản của họ tùy thích. Hoàn hảo để bắt đầu một ý tưởng mới với độ trễ tối thiểu!
4. Hợp tác thời trang
Khả năng cộng tác và giảng dạy với CodePen có thể là tài sản lớn nhất của nó. Đã có rất nhiều công cụ cộng tác tuyệt vời dành cho các lập trình viên, nhưng cách tiếp cận của CodePen rất đơn giản và trực quan.
Người dùng chuyên nghiệp của CodePen có thể tạo một cây bút mới và mở nó để cộng tác với Thay đổi góc nhìn thực đơn. Điều này thay đổi liên kết của bút thành một lời mời có thể chia sẻ với số lượng người mở rộng tùy thuộc vào gói CodePen Pro của bạn.
cách chơi pokemon trên iOS 10
Trong trường hợp này, tôi đã viết HTML trong khi một người bạn cập nhật CSS trong thời gian thực, với một con trỏ được gắn nhãn xác định nơi họ đang làm việc.
Bất kỳ ai có liên kết đều có thể tham gia và sử dụng chức năng trò chuyện trong trình duyệt, bất kể họ là người dùng chuyên nghiệp hay thậm chí có tài khoản CodePen. Với điều kiện tính năng tự động lưu bị tắt, chỉ chủ sở hữu của chiếc bút mới có thể lưu bất kỳ thay đổi nào, làm cho nó trở thành một cách an toàn để mở mã của bạn cho người khác mà không gặp rủi ro.
Bản chất mở của chế độ này có lợi cho người mới bắt đầu vì bạn có thể mời hầu như bất kỳ ai tham gia vào cây bút của mình để hướng dẫn bạn qua một khái niệm khó. Đây cũng là một chế độ hữu ích để biết cách của bạn vì nó hoàn hảo để phỏng vấn nhân viên tiềm năng và đã được sử dụng một cách chuyên nghiệp theo cách này !
5. Chế độ Giáo sư
Chế độ giáo sư cho phép một người dùng Pro lưu trữ một căn phòng mà chỉ họ mới có thể chỉnh sửa mã. Từ 10-100 người dùng có thể xem và trò chuyện tùy thuộc vào gói Pro của máy chủ.
Chế độ Giáo sư cho phép linh hoạt giữa học trên lớp và học từ xa, hoặc kết hợp cả hai. Sử dụng chế độ Giáo sư sẽ cho phép những người ở cuối lớp có cùng trải nghiệm với những người ở phía trước và để giáo viên hiển thị các bản sửa lỗi sẽ cập nhật theo thời gian thực.
6. Chế độ trình bày
Không có gì ngạc nhiên khi chế độ trình bày được thiết kế với mã trình bày. Ứng dụng hiển thị ở chế độ xem đơn giản, được thiết kế để hoạt động với máy chiếu trên cao. CodePen có chế độ Trình bày được tối ưu hóa để sử dụng trên các kết nối internet tốc độ thấp hơn và phần cứng yếu hơn.
Những người đọc thông minh có thể đã nhận ra rằng phiên bản CodePen miễn phí sẽ cung cấp chính xác chức năng này, mặc dù chế độ Pro có một vài tính năng hữu ích. Bố cục, kích thước phông chữ và chủ đề có thể nhanh chóng được thay đổi nhanh chóng để phù hợp với hầu hết mọi cài đặt và hiển thị liên kết tới bút sẽ hiển thị URL rút gọn có kích thước jumbo giúp chia sẻ dự án dễ dàng hơn.
Những thay đổi nhỏ này, cùng với việc có thể mở rộng cửa sổ xem trước để phù hợp với bất cứ thứ gì bạn đang thể hiện, làm cho chế độ trình bày trở nên hoàn hảo cho cả giáo viên và nhà phát triển trình bày ý tưởng với đồng nghiệp. Chế độ trình bày cũng là một cách dễ dàng và đơn giản để trình bày mã nếu bạn thấy mình đang phỏng vấn cho vị trí lập trình.
7. Hoa văn
Tìm kiếm nguồn cảm hứng trở nên dễ dàng hơn nhiều với các bộ sưu tập của CodePen về Mẫu thiết kế .
Mỗi danh mục là một tập hợp các mã mẫu do người dùng CodePen cung cấp cho các tác vụ cụ thể. Bạn đang tìm cách tạo các nút động cho trang web của mình? Cài đặt menu? Có rất nhiều danh mục để phù hợp với hầu hết mọi ví dụ.
Những mẫu này cũng là một cách tuyệt vời để tìm hiểu cách các nút tương tác hoạt động và các cách khác nhau mà giao diện người dùng động có thể hoạt động.
8. Emmet
Emmet , trước đây được gọi là Zen Coding, được nhiều người coi là công cụ tiết kiệm thời gian tốt nhất để phát triển HTML và CSS. Plugin lấy một số mã bạn thấy mình viết nhiều và chuyển chúng thành các phím tắt đơn giản.
Xem nó hoạt động tốt hơn là giải thích nó, vì vậy hãy thực hiện thiết lập thông thường cho tài liệu HTML:
Việc thêm điều này vào mọi tài liệu HTML đã được giảm xuống còn hai hành động. Sử dụng Emmet, gõ ! và đánh Chuyển hướng Chìa khóa. Ảo thuật!
Emmet hoạt động theo tiêu chuẩn trên CodePen và đặc biệt hữu ích nếu bạn đang cố gắng tìm hiểu một khái niệm mới trong JavaScript và cần tạo HTML và CSS hỗ trợ một cách nhanh chóng.
Phát triển với CodePen để có trải nghiệm tốt hơn
CodePen là một công cụ tuyệt vời cho các nhà phát triển web và lĩnh vực này đang tiếp tục phát triển. JavaScript là một ngôn ngữ tuyệt vời để học cho tương lai phát triển web.
cách tắt thời gian sử dụng thiết bị
Có một số hướng dẫn và khóa học tuyệt vời dành cho những người muốn bắt đầu với JavaScript và CodePen là một môi trường tuyệt vời để kiểm tra các kỹ năng mới của bạn.
Đăng lại Đăng lại tiếng riu ríu E-mail 8 trang web tốt nhất để tải xuống sách nói miễn phíSách nói là một nguồn giải trí tuyệt vời và dễ đọc hơn nhiều. Dưới đây là tám trang web tốt nhất mà bạn có thể tải chúng xuống miễn phí.
Đọc tiếp Chủ đề liên quan- Lập trình
- HTML
- Phát triển web
- JavaScript
- CSS
Ian Buckley là một nhà báo tự do, nhạc sĩ, nghệ sĩ biểu diễn và nhà sản xuất video sống ở Berlin, Đức. Khi không viết hay trên sân khấu, anh ấy sẽ mày mò với các thiết bị điện tử hoặc mã tự làm với hy vọng trở thành một nhà khoa học điên rồ.
Xem thêm từ Ian BuckleyTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký