콘텐츠
- 01. 주제를 사용하여 새로운 것을 탐색
- 02. 템플릿으로 더 빠르게 프로토 타이핑
- 03. 컬렉션 시작
- 04. 전처리기로 효율성 향상
- 05. CodePen의 멋진 새 기능인 프로젝트 살펴보기
- 06. 텔레비전 켜기
- 07. 공동체 정신을 받아들이십시오
- 08. 밋업 IRL 참석
- 09. Pro로 업그레이드
- 10. 영감의 우물에 담그기
CodePen은 영감을주고 지원하는 기여자 커뮤니티가있는 신속한 프로토 타이핑을위한 킬러 툴킷입니다. 번거롭지 않은 크리에이티브 코드 반복을 제공하고 새로운 개발 환경을 생성하는 골칫거리를 제거하며 사용자가 기발하고 우스꽝스러운 것부터 실용성에 이르기까지 수많은 프런트 엔드 개념을 쉽게 해결하고 배포 할 수 있도록함으로써 업계에서 가장 선호하는 웹 디자인 도구 중 하나가되었습니다. -준비된.
이 기사에서는 웹 업계에서 가장 좋아하는 코딩 플레이 그라운드에서 더 많은 것을 얻을 수있는 10 가지 주요 팁을 모았습니다. 이것이 CodePen을 영원히 사용하는 방식을 바꿀 것입니다. 이것이 창의력을 발휘하도록 영감을 준다면 CSS 애니메이션 예제 또는 웹에서 가장 흥미로운 오픈 소스 프로젝트를 확인하는 것도 좋습니다.
더욱 번거롭지 않게 만들고 싶으신가요? 쉽고 간편한 웹 사이트 빌더로 사이트를 구축하고 매우 유용한 웹 호스팅 서비스를 받으세요.
01. 주제를 사용하여 새로운 것을 탐색
CodePen 토픽은 모든 레벨의 사용자에게 제공되는 비교적 새로운 커뮤니티 기반 기능이며 새로운 프레임 워크, UI 패턴 또는 JS 라이브러리를 탐색하는 좋은 방법입니다. 주제 페이지를 열면 카테고리별로 필터링되고 하위 카테고리별로 필터링 된 다양한 옵션이 표시됩니다. Vue.js와 같은 주제별 카테고리를 보면 여러 옵션이있는 개요 화면이 표시됩니다.
Vue 구성 요소를 구축하는 데 도움이되는 시작 템플릿이 필요하십니까? 다음은 인기있는 구성 요소 목록과 시작하는 데 도움이되는 멋진 '템플릿의 새 펜'버튼입니다. 작동중인 프레임 워크의 전문적으로 선별 된 예를보고 싶으십니까? '추천 Vue 펜'으로 필터링하면 프레임 워크 마스터와 초보자 모두가 영감을주는 작품을 만나게됩니다.이러한 주제 개요를 탐색하는 동안 공식 사이트, 프레임 워크 또는 라이브러리 문서 및 가이드, 프로젝트의 핵심 GitHub 존재에 대한 지속적인 링크가 제공됩니다.
02. 템플릿으로 더 빠르게 프로토 타이핑
어느 시점에서 모든 개발자는 스택에 관계없이 로컬 개발 환경을 설정할 때 진정한 고통을 느꼈을 것입니다. 상용구 설정조차도 몇 개의 제출 버튼 프로토 타입과 같은 것을 만들고 테스트하는 데 투자하는 것보다 훨씬 더 많은 시간이 필요할 수 있습니다. CodePen을 사용하면 이미 거기에 있습니다. 창의적인 마음의 내용을 쉽게 덤프 할 수있는 IDE가 준비되어 있습니다.
그러나 CodePen의 템플릿 기능을 사용하면 작업을 완료하는 데 필요한 정확한 환경을보다 쉽게 시작할 수 있습니다. 템플릿은 미리 정의 된 외부 스크립트 (다른 펜을 외부 자산으로 포함 할 수 있음)를 포함 할 수 있으며 선호하는 HTML / CSS / JS 전 처리기 (즉석에서 깔끔하게 자동 컴파일 됨)를 미리 설정할 수 있으며 보존 할 수도 있습니다. 보존하려는 기존 코드.
펜을 템플릿으로 지정하는 것은 매우 간단합니다. 펜을 연 상태에서 해당 설정 버튼을 매쉬하고 펜 세부 정보를 클릭하면 여기에서 일반 펜으로 저장하는 옵션을 제공하는 깔끔한 작은 토글이 표시됩니다. 주형.
그렇다면 이것이 기존 펜을 포크하는 것과 어떻게 다릅니 까? 펜을 템플릿으로 설정하면 새 펜을 만들 때 즉시이 설정을 선택할 수 있습니다. 이전 펜을 검색하여 포크하고 수정할 필요가 없습니다. 선택한 모든 스크립트를에서 다시 가져올 필요가 없습니다. 주어진 개념에 대해 선호 할 수있는 모든 구문 옵션과 설정을 다시 선택할 필요가 없습니다. 또한 템플릿에서 새 펜을 시작하면 펜이 완전히 새로운 창조물로 취급되는 반면, 포크는 빈 슬레이트가 아닌 뚜렷한 역사를 가진 원본과 다시 연결되는 펜을 만듭니다. CodePen Pro 계정으로 업그레이드하면 믿을 수 없을 정도로 가치있는 확장 기능 세트가 제공되지만 무료 사용자 계정도 무제한 템플릿 생성이 가능합니다.
03. 컬렉션 시작
CodePen 주제를 사용하여 리소스를 찾을 수있는 기능을 좋아하지만 직접 큐레이팅 할 수 있기를 원한다면 컬렉션이 당신이 찾고있는 답입니다. 컬렉션에 펜을 추가하는 것은 펜의 편집보기에서 '컬렉션'드롭 다운을 선택하는 것만 큼 간단합니다. 여기서 컬렉션을 지정하거나 새 컬렉션을 만들 수 있습니다. 다시 말하지만 모든 사람의 펜이 될 수 있습니다 (Pro 사용자 인 경우 컬렉션을 비공개로 설정할 수 있음). 컬렉션의 장점은 강력한 필터, 정렬 및 검색 옵션을 사용하여 한 곳에서 모든 컬렉션을 볼 수 있다는 것입니다. 이는 스택 또는 프레임 워크별로 리소스를 정의하고, 실행중인 영감 목록을 유지하거나, UI 개념에 따라 펜을 클러스터링하는 좋은 방법입니다. 다른 사용자의 공개 컬렉션에 관심이 있으십니까? RSS를 통해 컬렉션을 구독하여 최신 소식을받을 수도 있습니다.
04. 전처리기로 효율성 향상
현실을 직시하자, 우리 대부분은 예상보다 화면 뒤에서 충분한 시간을 보냅니다. 우리 중 많은 사람들이 실용적인 경력 관련 노력에 너무나 압도되어 쓸모없는 토글 스위치 또는 WebGL 페이지 전환 라이브러리를 구축 할 시간을 찾기가 어렵습니다. 항상 개선됩니다. 이것이 바로 CodePen의 기본 전처리 기가 유용한 곳입니다.
예를 들어, JavaScript를 통해 각각의 스타일 속성이 무작위로 업데이트되는 수백 개의 HTML 셀 격자를 만들고 싶습니까? div 다음에 div를 복사하고 붙여 넣을 수 있습니다. 그리고이 작업이 끝나면 모든 편집기 창을 탐색하는 것이 거의 불가능합니다.
여기에 HAML, Pug 또는 Jade가 빛나는 곳이 있습니다. Pen의 설정 창에서 HTML 전처리기를 쉽게 선택하고 간단한 루프를 작성하고 이러한 요소를 대략 두 줄로 생성합니다. 어디서부터 시작해야할지 모르겠습니까? 이를위한 Pen이 있습니다. CodePen에서 'HAML Loop'를 검색하면 페이지 요소를 효율적으로 생성하는 방법에 대한 간단한 이해를 제공하는 많은 상용구 Pen이 생성됩니다.
LESS 및 Sass와 같은 CSS 전처리기를 사용하여 여러 인수를 허용하는 믹스 인 및 사전 정의 된 함수를 빌드하여 CodePen 템플릿에 완벽하게 추가하고 비교적 쉽게 복잡한 스타일을 작성할 수 있습니다. 더 큰 프로젝트를 위해 UI 요소를 구축하고있을 수 있습니다. 이제 명확하고 간결한 명명 규칙을 사용하여 모든 색상, 서체 및 간격 변수를 정의 할 수 있습니다. 이를 CodePen 템플릿에 다시 포함하면 거의 제로 설정으로 반복 할 수 있습니다.
CoffeeScript, TypeScript 또는 Babel의 효율성을 즐기십니까? CodePen은 기본적으로 원하는 JS 전처리기를 컴파일 할 수 있습니다. 언제든지 내부를 들여다보고 컴파일 된 코드가 어떻게 보이는지 확인하려면 선택한 코드 편집 창에서 '컴파일 된보기'를 선택하기 만하면 최종 출력이 어떤 모습인지 알 수 있습니다. – 그리고 당신은해야합니다; 루프 및 고급 기능으로 작업하면 설정 및 반복이 매우 빨라질 수 있지만 사용하지 않는 구문이 많이 나올 수 있습니다. 언제든지 이러한 생성을 프로덕션에 사용하려는 경우 모든 코드를 완전히 컴파일하고 성능에 필요한 축소 또는 조정을 수행해야합니다.
05. CodePen의 멋진 새 기능인 프로젝트 살펴보기
여전히 다소 새로운 기능인 CodePen Projects는 이름없는 영웅입니다. CodePen의 원래 3 개 창 HTML / CSS / JS 설정은 이미 사용자 지정 외부 포함 및 실시간 전 처리기 컴파일을 허용합니다. 그렇다면 프로젝트가 돋보이는 이유는 무엇입니까? 표준 편집 페이지 외에도 고유 한 로컬 파일을 추가 할 수 있습니다. 즉, 로컬 환경 에서처럼 고유 한 파일 구조를 구체화하여 단일의 독립된 환경에서 다중 페이지 사이트 또는 응용 프로그램을 만들 수 있습니다. 예를 들어 복잡한 Gulp 또는 Webpack 구성을 설정할 필요가 없습니다.
CodePen 프로젝트를 사용하면 기존 파일을 쉽게 끌어서 놓을 수 있으며 (클라우드 스토리지에 안전하게 보관해야 함) 구조를 깔끔하게 유지하거나 편집기 내에서 변경할 수 있습니다. Pro 레벨 사용자라면 조금 더 달콤 해집니다. 작업을 배포 할 준비가되면 클릭 한 번으로 원하는 환경을 배포 할 수 있습니다.
06. 텔레비전 켜기
CodePen이 제공하는 강력하고 실용적인 도구들 사이에 숨겨져있는 것은 CodePen TV로 알려진 기발한 산만 함입니다. CodePen TV는 화면 보호기와 같은 방식으로 점차적으로 회전하는 Picked Pen의 무작위 샘플링입니다. 무작위로 선택한 펜을보고 싶지 않고 고양이가 등장하는 자신 만의 펜 '채널'을 큐레이팅하고 싶을 수 있습니다. 모든 CodePen 컬렉션 (다른 사용자가 만든 컬렉션 포함)을 기반으로 CodePen TV 채널을 시작할 수도 있습니다. Mac 사용자라면 CodePen TV를 독립형 OSX 기본 화면 보호기로 사용할 수도 있습니다!
07. 공동체 정신을 받아들이십시오
코딩 커뮤니티는 독점 성으로 악명이 높으며 가장 노련한 디자이너와 개발자조차도 뚫을 수없고 반갑지 않다고 느낄 수있는 사기성 증후군에 대한 진정한 번식 기반을 만듭니다.
이것이 CodePen이 눈에 띄는 부분이며 커뮤니티의 적극적인 회원이되는 것이 그러한 혜택을 제공하는 이유입니다. 기쁨을 불러 일으키는 펜이 보이십니까? 그 하트 버튼을 매쉬하고 다른 사용자에게 약간의 사랑을 보여주세요. 그들이 한 일이 정말 마음에 든다면 최대 세 번 클릭 할 수 있습니다.
영감을 얻었거나 다른 사용자의 펜에 대한 대안을 생각하고 계십니까? 한 번의 클릭으로 펜을 포크 한 다음 자신 만의 창의력을 발휘하거나 적절하다고 생각되는대로 리팩토링 할 수 있습니다.
또는 더 나은 접근 방식을 보거나 사용자 코드에서 결함을 발견하면 건설적인 제안으로 Pen에 주석을 달아보십시오. 이와 같은 사이트의 대부분의 댓글 섹션은 일반적으로 통제 할 수없는 부정적 쓰레기통이지만, 커뮤니티는 일반적으로 자기 치안, 긍정 성 장려 및 다른 사람들을 강화하는 훌륭한 작업을 수행합니다.
커뮤니티에 참여하는 가장 좋은 방법은 작업 공유, 조언 구하기 및 창의적인 협업을위한 공개 포럼 인 CodePen의 Spectrum 채팅에 참여하는 것입니다. 한 가지 예는 CodePen 사용자 Kristopher van Sant의 개념 인 Pass the Pen입니다. 여기에서 Pen을 만든 다음 기여하려는 사용자가 반복합니다.
CodePen은 창의적인 참여를 유지하기 위해 매주 도전 프롬프트를 제공합니다. 자신의 작업이 공유 할 가치가 없다고 생각할 수도 있지만 아마도 틀렸을 것입니다. CodePen의 Spectrum 채팅에 참여하여 규모에 관계없이 작업중인 작업을 보여주세요. 평범한 CodePen 사용자가 얼마나 도움이되고 도움이되는지 놀라 울 것입니다. 그 과정에서 몇 가지 다른 것을 배우게 될 것입니다.
08. 밋업 IRL 참석
CodePen을 프런트 엔드 개발자에게 필수적인 도구로 만드는 핵심은 커뮤니티입니다. 그러나 때로는 기술을 화면에서 벗어난 것이 도움이됩니다. CodePen 모임을 주최하거나 참석하는 것보다 더 좋은 방법은 없습니다. CodePen은 참석자들을위한 선물을 기꺼이 제공 할 것이며, 스폰서의 도움으로 음식과 음료에 대한 환급을 보장 할 수도 있습니다. 장소와 날짜는 귀하에게 달려 있습니다. 모임은 프로그램을 페어링하고, 전략이나 개념을 공개적으로 요청하고, 팀 과제를 완료하거나, 동료 코더에게 동기를 부여하는 것이 무엇인지 더 잘 알 수있는 훌륭한 기회를 제공합니다. 아니면 그냥 무료 피자를 위해 거기에있을 수도 있습니다. 우리는 당신을 용서합니다.
09. Pro로 업그레이드
CodePen이 무료로 제공하는 기능의 깊이는 정말 놀랍습니다. 특히 수천 명의 사용자가 동시에 엄청나게 서버 집약적 인 제작물을 함께 사용하는 부담을 고려하면 더욱 그렇습니다. 기본적으로 CodePen Pro에서 한 입 먹기 전까지는 상당히 둥근 경험입니다. 그렇다면 왜 점프를해야합니까? 많은 유용한 확장 기능을 제공하지만 한 가지 기능만으로도 유용합니다. 펜을 개인적으로 저장할 수있는 기능입니다.
비 Pro 사용자의 경우 생성 된 모든 Pen은 공개적으로 색인이 생성되므로 괜찮습니다. 하지만 아직 출시되지 않은 클라이언트 프로젝트를 위해 일부 UI 번창을 구체화하려면 어떻게해야합니까? 여기에서 비공개로 저장하는 기능이 매우 편리합니다. '비공개'가 숨겨 졌다는 의미는 아닙니다. 예를 들어 펜에 대한 직접 링크를 내부 팀과 계속 공유 할 수 있습니다. 그러나 당신의 펜은 그렇지 않으면 발견 할 수 없습니다. 새로운 개념을 테스트 할 수있는 환경이 필요하거나 창작물에 대해 작업 할 시간이 제한되어 있고 나중에 돌아올 계획 일 수 있습니다. 여기에서 프라이버시 옵션이 차이를 만듭니다.
그렇다면 Pro 계정에는 또 무엇이 포함됩니까? 자산 호스팅! 파일 당 2Mb 제한 내에서 CodePen은 Pen의 자산을 호스팅하므로 이미지 나 스크립트를 외부 호스트에 업로드 할 필요가 없으며 엄격한 출처 간 사양이있는 프레임 워크로 작업 할 때 더 많은 유연성을 허용합니다.
Pro 계정은 라이브 뷰에 대한 액세스를 제공합니다. 사용자는 여러 창에서 편집 내용을 즉석에서 볼 수 있습니다. 콜랩 모드는 라이브 페어 프로그래밍을 허용하고 편리한 채팅 옵션을 포함하고 있으며, 교수 모드는 코드 업데이트를 브로드 캐스트합니다. 실시간으로 Pen의 실시간 미리보기와 함께 코드 강사 또는 회의 회로 마조히스트 모두에게 이상적입니다. CodePen Pro는 또한 사용자 정의 CSS 및 JS를 포함하여 고유 한 프로필 페이지를 편집 할 수있는 기능을 제공하며, 페이지 헤더로 옵션 인 Pen 임베드를 제공합니다. 대상을 알면 프론트 엔드 개발자가 사용자 정의, 사용자 정의, 사용자 정의를 요구하고 있음을 알 수 있기 때문입니다.
10. 영감의 우물에 담그기
새로운 펜은 빈 캔버스와 같지만 때로는 창의적인 블록이 부딪 히고 그 캔버스는 니체의 긴 시선을 끌 것입니다. 영감을 얻지 못 하셨나요? 최신 CodePen Challenge를 살펴 보거나 Codevember 또는 DailyUI와 같은 코딩 챌린지 그룹에 참여하십시오. Dribbble로 가서 CSS에서 일러스트레이션을 재현 (또는 애니메이션화) 할 수 있습니다. 기한이있는 시점에 크레딧을 제공해야합니다 (펜의 공개 세부 정보에 백 링크를 추가하는 것이 선호되는 방법).
이것들은 무의미한 연습처럼 보일 수 있으며 우리는 모두 자유 시간에 코딩에 대한 논쟁에 사로 잡혀 있었지만 CodePen에서 (공개적으로) 창의적인 코딩에 대해 잘 알려지지 않은 또 다른 장점이 있습니다. 창의적인 야망을 보이는 사람들을 위해. 특히 자랑스러워하는 것들을 만들었나요? 포트폴리오에 포함시켜야합니다.
CodePen은 여러 디스플레이 옵션을 사용하여 쉽게 포함 할 수 있으며 새로운 사전 채우기 포함 기능을 사용하여 포트폴리오 사이트의 코드베이스에서 직접 렌더링 된 코드가있는 CodePen 편집기 창을 추가 할 수 있습니다.
이 기사는 원래 크리에이티브 웹 디자인 잡지에 게재되었습니다. 웹 디자이너.290 호 구매.
