CodePen : HTML, CSS 및 JavaScript 빌드, 테스트, 공유 및 검색

Codepen : 프런트 엔드 코드 빌드, 테스트 및 검색

콘텐츠 관리 시스템의 한 가지 과제는 스크립트 도구를 테스트하고 생성하는 것입니다. 이는 대부분의 게시자에게 필수 사항은 아니지만 기술 간행물로서 다른 사람들을 돕기 위해 때때로 작업 스크립트를 공유하는 것을 좋아합니다. 사용 방법을 공유했습니다 비밀번호 안전성을 확인하는 JavaScript, 어떻게 정규식으로 이메일 주소 구문 확인 (정규식), 가장 최근에 추가됨 온라인 리뷰의 판매 영향을 예측하는 계산기. 사이트에 수십 개의 도구를 추가하고 싶지만 WordPress는 이와 같은 게시에 정확히 도움이되지 않습니다. 개발 시스템이 아니라 콘텐츠 시스템입니다.

그래서 내 작은 스크립트를 작동시키기 위해 코드 펜. CodePen은 HTML 패널, CSS 패널, JavaScript 패널, 콘솔 및 결과 코드가 게시 된 깔끔하게 구성된 도구입니다. 각 패널에는 요소 위로 마우스를 가져 가면 정보가 있으므로 HTML, CSS 및 JS의 색상 코딩은 물론 편집 및 작성을 쉽게 할 수 있습니다.

CodePen은 사회 개발 환경입니다. 핵심은 브라우저에서 코드를 작성하고 빌드하면서 그 결과를 볼 수 있다는 것입니다. 모든 기술의 개발자, 특히 코딩을 배우는 사람들에게 권한을 부여하는 유용하고 자유로운 온라인 코드 편집기입니다. CodePen은 주로 HTML, CSS, JavaScript와 같은 프런트 엔드 언어 및 이러한 것으로 전환되는 사전 처리 구문에 중점을 둡니다.

CodePen 정보

CodePen을 사용하여 필요한 모든 작업을 계산기 게시 나는 사이트에 삽입했다. CodePen의 대부분의 창작물은 공개 및 오픈 소스입니다. 그들은 단순한 마음에서 댓글 남기기, 자신의 필요에 따라 분기하고 변경하는 것에 이르기까지 다른 사람들과 커뮤니티가 상호 작용할 수있는 생명체입니다.

CodePen-온라인 리뷰의 판매 영향을 예측하는 계산기

CodePen을 사용하면 작업 할 때 창을 왼쪽, 오른쪽 또는 아래쪽에 표시하려는 경우보기를 변경하거나 새 탭에서 HTML을 볼 수 있습니다. 나란히보기는보기 가능한 창의 크기를 조정할 수 있으므로 반응 형 설정을 테스트하는 데 매우 효과적입니다.

각각의 작업 스크립트를 펜으로 구성하거나 프로젝트 (다중 파일 편집기)로 결합하거나 컬렉션을 구축 할 수도 있습니다. 기본적으로 다른 작성자를 팔로우하고 다른 공개적으로 공유 된 프로젝트를 자신의 프로젝트로 포크하여 수정하고 도전을 통해 재미있는 작업을 수행하는 방법을 배울 수있는 프런트 엔드 코드를위한 작업 포트폴리오 사이트입니다.

GitHub Gist로 저장하고 zip 파일로 내보낼 수 있으며 포함 다음과 같은 기사의 펜 :

펜보기
온라인 리뷰의 예상 판매 영향
by Douglas Karr (뿡 빵뀨)
on 코드 펜.


펜 편집기의 한계 중 하나는 엄청난 양의 코드입니다. 편집기는 수백 또는 수천 줄의 코드로 문제가 없어야하므로이 문제를 겪지 않을 수 있습니다. 그러나 그들이 5,000 – 10,000 줄 이상의 코드를 입력하기 시작하면 편집기가 실패하기 시작하는 것을 볼 수 있습니다. 그러나 다른 곳에서 호스팅되는 스타일 시트 또는 JavaScript에 외부 참조를 추가 할 수 있습니다!

가입을 권장합니다. 주간 이메일을 구독하게되며 RSS 피드에 피드를 추가하여 새로 게시 된 펜을 볼 수도 있습니다. 그리고 거기에서 공공 펜을 검색하거나 탐색하기 시작하면 놀라운 프로젝트를 찾을 수 있습니다. 사용자는 상당히 재능이 있습니다!

팔로우 Douglas Karr Codepen에서

유료 버전 인 CodePen Pro는 협업, 프로세스, 자산 호스팅, 비공개보기 및 자체 도메인 또는 하위 도메인이있는 배포 된 프로젝트를 포함하여 개선 된 기능 또는 팀을위한 수많은 추가 기능을 제공합니다. 물론 CodePen은 전체 팀이 작업 할 수있는 Github 통합이 포함 된 훌륭한 저장소를 제공합니다. 나처럼 간단한 코드를 테스트하고 싶다면 CodePen은 매우 귀중한 도구입니다.

당신은 어떻게 생각하십니까?

이 사이트는 Akismet을 사용하여 스팸을 줄입니다. 댓글 데이터 처리 방법 알아보기.