JavaScript 필수 사항: CodePen.io의 강력한 기능 활용

제가 얼마 전 JSBin에 대해 글을 썼을 때 어떤 온라인 스니펫 편집기가 가장 좋은지에 대한 많은 토론과 토론이 촉발되었습니다. 일부 대안, 특히 CodePen은 포기되었습니다.

많은 독자들이 자신의 특정 선택에 대해 매우 열정적이고 헌신적이기 때문에 저는 CodePen의 몇 가지 멋진 점을 강조하는 게시물을 작성하고 싶었습니다. 나는 이것이 비교 기사가 아니라고 말하고 싶습니다. 주로 이런 유형의 기사를 쓰는 것을 정말 싫어하기 때문입니다. 이러한 도구는 각각 독특하고 고유한 가치를 제공하며 많은 경우 사용자 선호도에 따라 결정됩니다.

공통점

사용자 인터페이스와 기능 측면에서 이러한 도구 사이에는 실제 유사점이 있습니다. 두 도구를 모두 살펴보면 다중 창 UI가 매우 일반적이며 매우 직관적이라는 것을 알 수 있습니다.

JSBin:

코드 펜:

다중 창 접근 방식을 사용하면 샘플 코드의 모든 측면을 매우 쉽게 시각화할 수 있으므로 마크업이나 JavaScript를 빠르게 업데이트하고 즉각적인 결과를 얻을 수 있습니다. 이러한 도구는 일반적으로 코드 조각의 신속한 프로토타이핑 및 테스트에 사용됩니다.

UI 유사성 외에도 두 편집기 모두 사용자에게 다음을 허용합니다.

• 타사 라이브러리를 참조하세요
• 나중에 사용할 수 있도록 코드 조각을 저장하세요
• 맞춤 링크를 통해 클립 공유
• 동일한 코드로 다른 개발자와 공동작업
• 다른 페이지에 코드 조각 삽입
• 자바스크립트 린팅

내 관점에서 이것은 사용자가 일반적인 자산을 사용하여 프런트 엔드 코드 프로토타입을 구축할 수 있을 뿐만 아니라 개발자가 사용하는 대부분의 미디어에서 이를 공유할 수 있도록 하는 모든 코드박스 도구의 핵심 기능입니다. 기술 작성자로서 라이브 코드 조각을 삽입하는 기능은 내가 만든 코드를 보여주기 위한 실시간 피드백을 제공하고 내가 작성 중인 개념을 강화하는 동시에 독자에게 실제 피드백과 코드를 제공하기 때문에 매우 중요합니다.

어떤 경우에는 기능 패리티가 비용, 즉 기능의 사용 가능 여부에 따라 결정됩니다. 예를 들어 CodePen의 전문가 수준 제품에서만 사용할 수 있는 협업 기능이 필요한 경우 JSBin은 이를 무료로 제공합니다. 분명히 말하자면(이전에 말했듯이) 훌륭한 기능에 대해 비용을 청구하는 것은 완벽하다고 생각합니다. 따라서 사용자에게 가치를 제공하는 한 기능이 무료인지 구독 기반인지는 중요하지 않다고 생각합니다.

코드펜

제가 사용해본 모든 코드펜 도구 중에서 CodePen이 가장 아름답고 솔직히 말이 된다고 단언할 수 있습니다. CodePen의 프런트엔드 디자인은 사용자 인터페이스 디자인에 대한 뛰어난 안목을 갖고 있는 매우 재능 있는 개발자 Chris Coyier에 의해 구축되었습니다. 이는 도구의 절묘한 모양과 느낌에서 확실히 드러납니다.

우리는 많은 중요한 기능에 쉽게 액세스할 수 있도록 하는 동시에 편집기가 복잡해지지 않고 기능이 방해받지 않도록 하기 위해 많은 노력을 기울였습니다. 이러한 유형의 UI에서는 뷰포트 공간이 부족하기 때문에 이는 중요합니다. 모든 것의 균형을 맞추고 여러 언어에 걸쳐 좋은 코딩 경험을 제공하는 동시에 즉각적인 결과를 제공하는 것은 정말 까다로웠고 레이아웃 측면에서 몇 가지 생각을 하게 되었습니다.

각 스크립트 창의 헤더에 적절하게 배치된 아이콘을 사용하면 이는 분명합니다.

설정(기어)에 대한 일반적인 UI 아이콘을 사용하면 CodePen 팀이 프로토타이핑 경험을 향상시키기 위해 몇 가지 훌륭한 보완 기능을 얼마나 잘 통합했는지 확인할 수 있습니다. 이것이 바로 사용자 인터페이스가 방해가 되지 않는다는 의미입니다. 즉, 추가 기능을 제공하는 직관적인 단축키입니다. 하지만 단순히 추가 기능을 추가하는 것이 아닙니다. 이는 웹 개발자가 매일 사용하는 실제 도구이며 프로토타입이 작동하는지 제대로 이해하는 데 중요합니다.

"Details" 보기와 같은 기능은 CodePen이 탄탄한 편집 경험을 제공할 뿐만 아니라 사용자가 코드 조각의 유용성을 더 잘 이해할 수 있도록 강력한 사회적 각도를 제공하는 데 중점을 두고 있음을 보여줍니다. RT:

이제 두 도구 모두 광범위한 보완 기능을 제공하지만 제 생각에는 CodePen이 Sass, LESS 및 Stylus(Compass, Bourbon 및 Nib와 같은 추가 기능 포함)에 대한 풍부한 지원을 통해 분명한 선호도를 보여줍니다. 디자이너를 위한 더 나은 도구.

CodePen은 CSS와 마크업을 훌륭하게 처리하지만 JSBin만큼 JavaScript 라이브러리를 지원하지는 않습니다. 그렇다고 주요 플레이어가 많이 포함되어 있지 않다는 것은 아니지만 오늘날 사용되는 새로운 라이브러리와 프레임워크의 수가 엄청나게 많기 때문에 기본 제공 지원에는 분명한 차이가 있습니다.

코드 펜:

JSBin:

이 스크린샷(일부만)을 보면 JavaScript 프레임워크 지원의 폭이 수와 지원 버전 측면에서 모두 CodePen의 지원 범위를 훨씬 능가한다는 것이 분명합니다. CodePen은 외부 JavaScript 리소스를 코드 조각에 포함시키는 기능을 제공하지만 드롭다운 목록을 클릭하고 다양한 JS 프레임워크 중에서 선택할 수 있는 편리함은 매우 유용합니다.

그러나 저에게 정말 눈에 띄는 기능이 하나 있는데, 그것은 바로 다음과 같습니다.

그렇죠. CodePen에는 제가 가장 좋아하는 브라우저 테스트 도구 중 하나인 BrowserStack.com과의 통합이 포함되어 있습니다. 이전에 이 서비스에 대해 글을 쓴 적이 있으며 이 서비스의 테스트 단순성과 광범위한 브라우저 적용 범위가 정말 마음에 들었습니다. 따라서 CodePen이 이 서비스와 통합되는 것을 보는 것은 큰 장점입니다. 하지만 훌륭한 기능을 제공하는 것은 단지 버튼이 아닙니다. 옆에 있는 드롭다운 메뉴를 사용하면 어떤 브라우저를 대상으로 할지 결정할 수 있습니다.

...그런 다음 동일한 정보를 사용하여 BrowserStack으로 이동합니다.

편의성 측면에서 이것은 확실히 개발자에게 승리입니다. BrowserStack 버튼을 클릭하면 CodePen에서 리디렉션되며 이를 사용하려면 BrowserStack 계정이 있어야 한다는 점에 유의하는 것이 중요합니다.

CodePen Pro를 선택하세요

CodePen은 무료 버전과 더욱 다양한 기능을 갖춘 Pro 버전으로 제공됩니다. 여기에는 여러 장치에 걸친 코드의 실시간 미리 보기, 다른 개발자와의 공동 작업, 내장된 코드 펜 테마, 온라인 교육 및 과정에 적합한 직관적인 "교사 모드" 등의 기능이 포함됩니다.

사용 가능한 Pro 기능 중 제가 가장 유용하다고 생각한 두 가지는 Live View와 Asset Hosting이며, 후자를 사용하면 개발자가 Code Pen에서 직접 사용할 수 있는 이미지 및 스크립트 파일과 같은 자산을 업로드할 수 있습니다.

이게 왜 작동하는지 궁금하시죠? 또 다른 옵션은 CDN이나 자체 서버와 같은 외부 호스팅 옵션을 찾는 것입니다. 사용자 정의 JavaScript 파일, 이미지 또는 스타일시트를 직접 업로드할 수 있으면 이 문제가 해결되고 이러한 리소스를 코드펜에서 쉽게 사용할 수 있습니다. 업로드한 후 자산을 클릭하고 해당 URL을 가져와서 코드에 입력하세요.

이것만으로도 한 달에 9달러를 내고 서비스를 이용할 가치가 있고, CodePen만의 독점인 것 같습니다.

제가 라이브 뷰 기능을 정말 좋아하는 이유는 요즘에는 다양한 폼 팩터에 걸친 테스트가 매우 중요하기 때문입니다. 테스트하려는 장치에 펜의 링크를 보내면 됩니다. 모바일 브라우저의 URL 표시줄에 직접 입력하거나 CodePen의 공유 대화 상자를 사용하여 모바일 장치에 문자 메시지를 보내면 됩니다.

컴퓨터에서 펜이 업데이트되면 모든 장치의 변경 사항이 거의 즉시 반영됩니다.

CodePen은 잘 구축되었습니다

CodePen은 훌륭한 도구입니다. 마크업 및 CSS 도구에 대한 탁월한 지원을 통해 매우 세련되고 기능이 풍부합니다. 일부 기능이 구독 기반이라는 사실은 좋은 소프트웨어를 지원하는 데 신경 쓰지 않기 때문에 당황하지 않습니다. 내가 말하고자 하는 것은 서비스의 표준 부분이 되어야 할 것처럼 보이는 몇 가지 기능이 있다는 것입니다. 특히 개인 펜 및 실시간 미리 보기를 생성하는 경우, 특히 다른 서비스가 이미 이러한 기능을 무료로 제공하는 경우에는 더욱 그렇습니다.

제 생각에는 JSBin과 CodePen을 모두 사용해 본 결과 둘의 기능이 매우 유사하다는 것이 분명했으며 어떤 서비스를 사용할지는 결국 개인 취향에 따라 결정될 것입니다. 어떤 사람들은 CodePen의 전문적인 UI를 선호할 수도 있고, 다른 사람들은 JSBin의 광범위한 JavaScript 프레임워크 지원을 선호할 수도 있습니다. 서로 다른 작업에 두 가지를 모두 사용하는 것으로 귀결될 수도 있지만 CodePen은 확실히 활용할 가치가 있는 서비스이며 내 거래 도구 모음에 추가할 서비스라고 말할 수 있습니다.

위 내용은 JavaScript 필수 사항: CodePen.io의 강력한 기능 활용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!