Home-theater-designers
JavaScript 웹 개발을 시작하는 것은 실망스러운 과정일 수 있지만 더 쉽게 해주는 도구가 있습니다.
코드펜.io 는 코딩 학습과 최소한의 번거로움으로 아이디어를 신속하게 프로토타이핑할 수 있도록 설계된 브라우저 내 코딩 환경입니다.
이 기사에서는 사이트의 일부 기능과 이러한 기능이 더 나은 프로그래머가 되는 데 어떻게 도움이 되는지 살펴봅니다.
코드펜이란?
CodePen은 펜 , HTML, CSS 및 JavaScript를 위한 세 가지 다른 창과 입력할 때 실시간으로 업데이트되는 미리보기 창으로 구성됩니다.
웹 개발자가 웹 사이트에 대한 아이디어를 선보일 때 자주 사용되지만 프론트 엔드 웹 개발의 기본을 배울 수 있는 좋은 장소이기도 합니다. 다음은 CodePen을 사용할 때 알아야 할 가장 주목할만한 기능입니다.
1. 전처리기
전처리기는 코딩을 단순화하도록 설계된 해석 또는 컴파일된 언어입니다. 그들은 편의를 위해 언어에 기능을 추가하고 코드를 읽기 쉽게 만들 수 있습니다. 웹 개발에서는 HTML, CSS 및 JavaScript용 전처리기의 조합을 사용하여 깨끗한 코드를 빠르게 생성합니다.
웹 개발을 배우고 있고 다른 전처리기를 시험해보고 싶다면 CodePen을 사용하면 전처리기를 즉석에서 전환하고 실시간으로 컴파일되는 코드를 볼 수 있습니다. CodePen 앱의 세 개 창에는 각각 오른쪽 상단에 드롭다운 메뉴가 있습니다. 선택하다 컴파일된 HTML/CSS/JS 보기 코드가 어떻게 해석되는지 확인합니다.
이 펜에서는 다음을 사용하여 간단한 사이트를 만들었습니다. 햄 그리고 사스 일부 헤더 텍스트의 스타일을 지정합니다. 선택 컴파일된 보기 표준 HTML 및 CSS를 보여줍니다. 이 예에서 차이는 최소화됩니다. 그러나 새로운 언어를 배우는 동안 사전 처리된 코드가 컴파일된 후 어떻게 보이는지 확인하는 것이 유용할 수 있습니다.
2. 외부 자원
전처리기에 대한 기본 지원과 함께 CodePen은 외부 스크립트를 지원합니다. 따라서 개인 프로젝트를 위한 라이브러리에 대한 실습 경험을 얻거나 React와 같은 인기 있는 웹 앱 라이브러리를 다듬기에 완벽한 장소입니다.
외부 라이브러리를 추가하려면 설정 창을 열고 JavaScript 탭으로 이동합니다. 리소스 URL을 수동으로 추가하거나 검색하여 리소스를 추가하는 두 가지 방법이 있습니다.
우리는 기사에서 이 기능을 사용했습니다. mo.js를 사용한 웹 애니메이션 , Babel 전처리와 함께.
펜 보기 Mojs MUO 예제 이안 ( @바독터러스 ) 코드펜에서.
예, CodePen 펜을 내장할 수 있습니다! Mo.js 튜토리얼의 결과를 보려면 위의 미리보기 창을 클릭하세요!
다른 펜은 외부 라이브러리처럼 가져올 수 있습니다. 즉, 이전에 작성된 펜에서 요소를 가져와서 새 펜에서 모듈처럼 사용할 수 있습니다. CodePen 사용자 Adam's 간단한 설문조사 펜이 이에 대한 좋은 예입니다.
3. 템플릿
새로운 개념을 배우거나 새로운 아이디어를 테스트할 때 비슷한 구성 요소를 자주 사용하고 시작하는 동일한 단계를 다시 읽습니다. CodePen을 사용하면 반복을 잘라낼 수 있는 템플릿 펜을 만들고 바로 요점으로 이동할 수 있습니다.
템플릿을 만들려면 새 펜을 열고 변경한 다음 주형 설정 메뉴의 슬라이더.
https://vimeo.com/221428690
최근까지 무료 사용자는 3개의 템플릿만 만들 수 있었지만 이제는 모든 사용자가 계정에 원하는 만큼 템플릿을 가질 수 있습니다. 최소한의 지연으로 새로운 아이디어를 시작하기에 완벽합니다!
4. 패션 콜라보레이션
CodePen으로 협업하고 가르칠 수 있는 능력은 CodePen의 가장 큰 자산일 수 있습니다. 프로그래머를 위한 훌륭한 협업 도구는 이미 풍부하지만 CodePen의 접근 방식은 간단하고 직관적입니다.
CodePen의 프로 사용자는 새 펜을 만들고 아래에서 공동 작업을 위해 열 수 있습니다. 보기 변경 메뉴. 그러면 CodePen Pro 계획에 따라 펜의 링크가 확장 가능한 인원을 수용할 수 있는 공유 가능한 초대장으로 변경됩니다.
Google 도서에서 책을 다운로드하는 방법
이 경우에 나는 친구가 CSS를 실시간으로 업데이트하는 동안 HTML을 작성했으며 레이블이 지정된 커서가 작업 위치를 식별했습니다.
링크가 있는 사람은 프로 사용자 또는 CodePen 계정이 있는지 여부에 관계없이 브라우저 내 채팅 기능에 가입하고 사용할 수 있습니다. 자동 저장이 꺼져 있으면 펜 소유자만 변경 사항을 저장할 수 있으므로 위험 없이 다른 사람에게 코드를 열 수 있는 안전한 방법입니다.
이 모드의 개방형 특성은 거의 모든 사람을 펜으로 초대하여 어려운 개념을 안내할 수 있으므로 초보자에게 유용합니다. 또한 잠재적인 직원을 인터뷰하기에 완벽하고 이미 이 방법으로 전문적으로 사용되었습니다 !
5. 교수 모드
교수 모드를 사용하면 한 명의 Pro 사용자가 자신만 코드를 편집할 수 있는 방을 호스팅할 수 있습니다. 호스트의 Pro 요금제에 따라 10~100명의 사용자가 시청하고 채팅할 수 있습니다.
교수 모드는 강의실 학습과 원격 학습 또는 둘의 조합 간에 유연성을 제공합니다. 교수 모드를 사용하면 뒷자리에 있는 사람들이 앞자리에 있는 사람들과 동일한 경험을 할 수 있고 교사가 실시간으로 업데이트되는 버그 수정을 표시할 수 있습니다.
6. 프레젠테이션 모드
프레젠테이션 모드는 당연히 코드 제시를 염두에 두고 설계되었습니다. 이 앱은 오버헤드 프로젝터와 함께 작동하도록 설계된 단순화된 보기로 표시됩니다. CodePen은 저속 인터넷 연결 및 약한 하드웨어에서 사용하도록 최적화된 프레젠테이션 모드를 제공합니다.
영리한 독자라면 무료 버전의 CodePen이 이 기능을 정확하게 제공할 것이라는 사실을 이미 알고 있을 수 있지만 Pro 모드에는 몇 가지 유용한 기능이 있습니다. 레이아웃, 글꼴 크기 및 테마는 거의 모든 설정에 맞게 즉석에서 빠르게 변경할 수 있으며 펜에 대한 링크를 표시하면 프로젝트를 더 쉽게 공유할 수 있도록 점보 크기의 단축 URL이 표시됩니다.
이러한 작은 변경 사항과 함께 미리 보기 창의 크기를 표시하는 항목에 맞게 조정할 수 있어 교사와 동료에게 아이디어를 발표하는 개발자 모두에게 완벽한 프레젠테이션 모드가 됩니다. 프레젠테이션 모드는 또한 프로그래밍 직책에 대해 인터뷰하는 경우 코드를 제시할 수 있는 깔끔하고 간단한 방법입니다.
7. 패턴
CodePen의 컬렉션을 사용하면 영감을 찾는 것이 훨씬 쉬워집니다. 디자인 패턴 .
각 범주는 특정 작업을 위해 CodePen 사용자가 제공한 예제 코드 모음입니다. 사이트에 대한 동적 버튼을 만드는 방법을 찾고 있습니까? 아코디언 메뉴? 거의 모든 예에 맞는 다양한 범주가 있습니다.
이러한 패턴은 대화형 버튼이 작동하는 방식과 동적 사용자 인터페이스가 작동할 수 있는 다양한 방식을 배울 수 있는 좋은 방법이기도 합니다.
8. 에밋
개미 , 이전에 Zen Coding으로 알려졌던 는 HTML 및 CSS 개발을 위한 최고의 시간 절약 수단으로 널리 알려져 있습니다. 플러그인은 여러분이 많이 쓰는 코드 중 일부를 가져와 간단한 바로 가기로 변환합니다.
설명하는 것보다 실제로 작동하는 것을 보는 것이 더 좋으므로 HTML 문서에 대한 일반적인 설정을 사용하십시오.
이것을 모든 HTML 문서에 추가하는 것은 두 가지 작업으로 축소되었습니다. Emmet을 사용하여 다음을 입력합니다. ! 그리고 치다 탭 열쇠. 마법!
Emmet은 CodePen에서 표준으로 활성화되어 있으며 JavaScript에서 새로운 개념을 배우려고 하고 지원하는 HTML 및 CSS를 빠르게 생성해야 하는 경우에 특히 유용합니다.
더 나은 경험을 위해 CodePen으로 개발
CodePen은 웹 개발자를 위한 훌륭한 도구이며 이 분야는 지속적으로 성장하고 있습니다. JavaScript는 웹 개발의 미래를 위해 배울 수 있는 훌륭한 언어입니다.
TV에서 PC 게임을 하는 방법
JavaScript를 시작하려는 사람들을 위한 몇 가지 훌륭한 자습서와 과정이 있으며 CodePen은 새로운 기술을 테스트할 수 있는 훌륭한 환경입니다.
공유하다 공유하다 트위터 이메일 오디오북을 무료로 다운로드할 수 있는 8가지 최고의 웹사이트오디오북은 훌륭한 엔터테인먼트 소스이며 소화하기 훨씬 쉽습니다. 다음은 무료로 다운로드할 수 있는 8가지 최고의 웹사이트입니다.
다음 읽기 관련 항목- 프로그램 작성
- HTML
- 웹 개발
- 자바스크립트
- CSS
Ian Buckley는 독일 베를린에 거주하는 프리랜스 저널리스트, 음악가, 공연자 및 비디오 프로듀서입니다. 글을 쓰지 않거나 무대에 오르지 않을 때는 미친 과학자가 되기 위해 DIY 전자 제품이나 코드를 만지작거리고 있습니다.
이안 버클리가 참여한 작품 더보기뉴스레터 구독
뉴스레터에 가입하여 기술 팁, 리뷰, 무료 전자책 및 독점 거래를 확인하십시오!
구독하려면 여기를 클릭하세요.