프런트 엔드 개발 : CodePen 또는 Sublime Text?

CodePen 또는 숭고한 텍스트?
CodePen 또는 Sublime Text? 웹 프로그래밍에 대해 이야기하면 HTML, CSS 및 JavaScript의 이름이 바로 우리에게 나타납니다. 거기에 도착하는 방법에는 여러 가지가 있습니다. 조차, 메모장을 열면 "html"을 작성할 수 있습니다.. 패드에서 프로그래밍 한 결과를 보려면 진행 상황을 알기 위해 힘든 절차가 필요합니다.

이 사이트는 오늘의 사용자를위한 애플리케이션 개발자를위한 주요 놀이터입니다.. 이러한 프로그램의 장단점에 대해 더 자세히 알아보기 위해이 기사에서 자세히 분석 할 것입니다 (적어도 우리가 알고있는 모든 것). 내가 항상 말했듯이 여기 계신 분들 중 일부는 주제를 더 잘 알고 있습니다. 그렇다면 여기서 우리를 벗어나는 모든 것에 대해 언급하십시오. 우리는 기꺼이 논의 할 것입니다!

오늘 우리는 CodePen, JSBin, Plunkr, sublime을 분석 할 것입니다., CSSDeck, Dabblet 및 LiveWeave. 이 환경에서 가장 잘 알려져 있고 가장 많이 사용되는 도구입니다. 물론 더 있습니다.

그러나 FrontEnd 또는 BackEnd가 무엇인지 모르는 모든 분들을 위해 조금 설명해 드리겠습니다. 프런트 엔드 또는 인터페이스는 탐색하는 사용자가 웹에서 볼 수있는 시각적 부분입니다.. 백엔드는 사이트 관리자가 제어하는 ​​부분입니다. 프로그래밍에서 결과를 동시에 표시하는 도구를 통해 코드를 입력하면이를 프론트 엔드라고합니다..

코드 펜

대부분의 가장 완벽한 도구 우리가 말하는 모든 것의. 작업을 보여주기 위해 커뮤니티에 가장 가까운 웹 도구로 사용됩니다. 의 종류 유튜브 프로그래머에게서. 여기에서 웹과 관련된 프로그래머의 작업을보고 관심이있는 경우 연락하고, 프로필을보고, 네트워크에서 팔로우하고, 채널을 구독하여 향후 모든 프로젝트를 볼 수 있습니다.

콘텐츠 프레젠테이션, 지원 및 키보드 단축키

CodePen 프레젠테이션이 가장 흥미 롭습니다.몇 번의 클릭만으로 바로 프로세스를 진행할 수 있기 때문입니다. 매우 잘 분리 된 html, css 및 javascript 행이 있습니다. 시각적 부분 외에도 위아래로 산재하여 진행 상황을 명확하게 볼 수 있습니다. 따라서 각 언어를 잘 구별하는 데 도움이됩니다. 초보 프로그래머에게 유용한 것.

웹 지원, 우리가 잘 알지 못하는 것을 사용하기 시작할 때 더 견딜 수 있습니다. 그것은 그것이 당신에게 더 낫다는 것을 의미하는 것이 아니라 우리가 가진 필요에 달려 있습니다. 그러나 예, "알 수없는"출처의 컴퓨터에 무엇이든 설치하기 전에 환경을 좀 더 잘 알기 위해서입니다.

당신이 사용하는 데 익숙한 사람 중 하나라면 casi 일할 때 완전히 키보드를 사용하면 CodePen이 훌륭 할 것입니다. 다른 도구가 필요 플러그인 키보드 단축키를 사용하여 환경을 채울 수 있습니다. 이로 인해 작업이 조금 더 불편 해집니다 (설치된 후에는 효과적이지만). CP. 목록에있을 수있는 것처럼 반복되는 동일한 코드 줄을 채울 수있는 시스템을 표준으로 통합합니다. 목록이 표시되는 방식을 작성하고 탭을 클릭합니다.

Pro 버전은 기본 패키지의 경우 € 9,00,“Super”패키지의 경우 € 29,25의 가격으로 더 많은 옵션을 허용합니다. 우리가 하나에서하는 일을 여러 장치에서 동시에 업데이트 할 수 있습니다. 또한 협동 모드, "교사 모드"등입니다. 여기에서 원하는 경우 이점이 있습니다.

JSBin

JSBin은 우리가 직접 자격을 부여 할 수있는 도구입니다.. 웹 도메인으로 이동하면 지체없이 다음 프로젝트를 작성할 준비가 된 것입니다. 첫 번째 무대는 그다지 매력적이지는 않지만 편안합니다..

JSBin은 간단하며 시간을 낭비하지 않도록 html로 작성된 기본 구조로 작업을 완료하기 위해 서로 다른 언어 사이에 산재 해 있습니다. 먼저 HTML, CSS, Javascript 및 마지막으로 시각적으로 작업합니다. 더 어려워 보이지만 아무것도 설치하지 않고도 동일한 유형의 바로 가기를 사용할 수 있습니다. 브라우저에서 직접.

그러나 후속 열로 인해 코드가 숨겨지면 코드를 올바르게 보는 것이 더 불편하다는 것을 알았습니다. 노트북을 사용하려면 포기하거나 포기해야합니다. 트랙 패드 그리고 그것은 매우 유동적이지 않습니다.

무료 또는 유료의 두 가지 할부 만 있습니다. 이것은 CodePen보다 약간 비싸지 만 연간 지불하면 € 120을 지불 할 수 있다면 더 수익성이 높습니다.

CSS덱

CSS덱
작업 환경 CSS덱 위에서 본 것과 다릅니다. 비주얼 코드라는 두 개의 열로만 나뉘어 진 CSSDeck은 3 개의 행을 사용하여 서로 다른 유형의 언어를 구분합니다. 소셜 네트워크 형태의 프레젠테이션과 밝은 색상의 깨끗한 작업 환경. 간단한 도구처럼 보입니다. 때로는 그것이 부정적이라는 것을 의미하지는 않습니다.

XNUMX 만 명 이상의 등록 된 사용자와 XNUMX 억 XNUMX 만 개 이상의 프로젝트가 생성 되었기 때문에 원하는 것을 검색하고 찾는 것이 어렵지 않을 것입니다. 언제나처럼 영어를 모르는 분들에게 불편을 끼칠 수 있다면이 언어는 빨강 사회 이미지가 매우 중요하기 때문에 큰 도전이라고 생각하지 않습니다.

플 런커

플 런커 지금까지 접해 본 도구 중 가장 매력적이지 않은 도구입니다.. 프레젠테이션은 메시지와 이미지 부족으로 가득 차 있습니다. 콘텐츠 로딩 속도가 느리고 언뜻보기에는 그다지 유용하지 않습니다. 또한 날짜순 정렬로 인해 아무리 간단하더라도 모든 프로그래밍이 첫 번째 위치에있을 수 있습니다. 더 흥미로운 것을 보려면 다음과 같은 탭으로 이동해야합니다.«최다 조회«. 즉, 이전에 Google로 번역하지 않은 경우입니다.

또한 웹에 따르면 버전 1.0.0입니다. 따라서 이것은 웹을 검색 할 때 발견 할 수있는 디자인, 프레젠테이션 및 가능한 오류에 대해 약간 설명합니다.

장점으로 아이디어가 부족하면, 오른쪽 사이드 바에서 직접 다른 프로젝트와 함께 이동하고 즉시 볼 수 있으므로 Plunkr에서 다른 탭을 떠나거나 열 필요가 없습니다. 이렇게하면 빠른 아이디어를 쉽게 수집하고 동시에 프로젝트에 적용 할 수 있습니다.

다블렛

다블렛 간단한 도구입니다. 입력하고 생성합니다.. GitHub를 통해 등록하고 사용자 이름을 가질 수 있지만 웹에서 많이 눈에 띄는 것은 아닙니다. CSS 탭에서 변경할 수 있지만 노란색에서 빨간색 그라데이션의 배경, 시각적 부분 및 코드 부분의 흰색 배경 (일반적으로)으로 Dabblet 프로젝트가 표시됩니다. 저에게는 비워 두는 것이 좋습니다. 그래디언트가주는 모든 것이 조금 생활 a

편집 할 때 표시되는 탭을 구성 할 수 있습니다. 용이하게. 편집하는 사람에 따라 편안하게 볼 수 있도록 열 또는 행으로 전환하려는 경우에도 마찬가지입니다. 글꼴 크기를 변경하고 HTML 코드를 등록하거나 유효성을 검사하지 않고 익명으로 저장하는 것은 Dabblet이 언뜻보기에 더 많은 가능성을 제공합니다. 내가 선택할 첫 번째 옵션은 아니지만 향후 버전이 업데이트되면 고려할 수 있습니다.

내가 가장 마음에 들지 않았지만 훌륭한 프로그래머가 좋아할만한 것 중 하나는 레이블을 표로 만들고 자체적으로 작성하도록 할 수있는 옵션이 없습니다.. 즉, HTML을 넣고 탭을 클릭하면 "html"과 "/ html"이 자동으로 작성됩니다. 그것이 완료되면 다른 응용 프로그램에서 뭔가.

라이브위브

살고있다
라이브위브 그것은 다른 것들과 매우 유사하며 다른 사람들이 유용성 측면에서 제공 할 수없는 것이 없습니다. 이 프로젝트에서 우리가 강조하는 것은 CodePen과 비슷하지만 정사각형 분포를 가진 어두운 색상 인 디자인입니다. 크기 변경 가능 맛을보기 위해. 클리어 모드와«줄을 벗어난« 편집 한 코드는 활성화 할 때까지 비주얼에 반영되지 않습니다. 내가 매우 유용하다고 생각하는 기능은 아닙니다. 디자이너로서 편집 한 내용을 항상 실시간으로 확인하는 것이 중요하지만 누군가는 확실히 유용하다고 생각합니다. 그리고 언제나처럼 등록 할 수 있지만 사용자는 주역이 아닙니다. 등록하지 않아도 프로젝트를 저장할 수 있기 때문에.

숭고한 텍스트

이 도구 지금까지 분석에서 본 것과 완전히 다릅니다.. Sublime Text는 웹 리소스가 아니라 응용 프로그램입니다. 한편으로는 데스크톱에 두는 것이 더 유용합니다. 특히 초과 및 작업 손실 가능성으로 인해 인터넷 충돌 또는 정지 가능성이 있습니다. 반면에 이전 도구만큼 시각적 인 도구는 아닙니다. 커뮤니티가 프로젝트를 공유 할 가능성이없는 것 외에도.

여기 모든 것이 처음부터. 탭을 만들어 코드 줄을 배치하고 이름을 변경하여 코드 줄을 알아야합니다. 첫 번째가 HTML이면 두 번째 CSS가 ... 또는 그 반대입니다. 그것은 또한 그것이 될 것에 대한 지름길이 없습니다 따옴표를 제외하고 완전히 수동.

결론

모든 프로그램은 장단점이있는 각 회사의 특정 개인적인 접촉과 유사합니다. 각자 자신에게 가장 적합한 것을 선택합니다. 내 권장 사항은 환경과 처리하는 소셜 네트워크에 CodePen 또는 CSSDeck을 사용하는 것입니다.. 그러나 다른 것을 더 좋아한다면 댓글을 남기고 이유를 설명하면 분명히 유용 할 것입니다.


기사의 내용은 우리의 원칙을 준수합니다. 편집 윤리. 오류를보고하려면 여기에.

코멘트를 첫번째로 올려

코멘트를 남겨주세요

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드가 표시되어 있습니다 *

*

*

  1. 데이터 책임자 : Miguel Ángel Gatón
  2. 데이터의 목적 : 스팸 제어, 댓글 관리.
  3. 합법성 : 귀하의 동의
  4. 데이터 전달 : 법적 의무에 의한 경우를 제외하고 데이터는 제 XNUMX 자에게 전달되지 않습니다.
  5. 데이터 저장소 : Occentus Networks (EU)에서 호스팅하는 데이터베이스
  6. 권리 : 귀하는 언제든지 귀하의 정보를 제한, 복구 및 삭제할 수 있습니다.