웹 디자이너 및 개발자를위한 새로운 리소스 (2019 년 3 월)

웹 개발의 세계에서 지난 몇 개월 동안 많은 일이 일어났습니다. 첫째, 새로운 블록 기반 편집기, 코드 명 구텐베르그, 마침내 WordPress 5.0으로 병합되었습니다. 창립 이래로 정말 큰 변화입니다. WordPress가 앞으로 발전 할 수있는 새로운 토대를 마련하고 개발자가 WordPress 기능을 확장하는 방법을 바꿀 것입니다..

두 번째로, 동료 개발자 중 일부는 다음과 같은 유용한 도구를 만들었습니다. 터미널에서 JSON보기 웹 디자인 및 개발 프로젝트에서 큰 도움이 될 수있는 몇 가지 React 라이브러리.

마지막으로, 가장 효과적인 리소스, 참조 및 플러그인 새로운 트렌드에 따라 프로젝트를 업데이트 할 수 있도록 시작되었습니다..

신선한 웹 개발 리소스의 가장 포괄적 인 목록을 살펴 보겠습니다..

구텐베르크 핸드북

디자인에 대한 참조를 찾을 수있는 공식 WordPress 핸드북, 블록을 만드는 코드 예제 기타 및 프로젝트에 기여할 수있는 안내서. Gutenberg와 함께 개발 한 첫 번째 참고 자료입니다..

비계 블록

블록 기반 편집기를 통해 WP-CLI는 이제 시작하기에 편리한 방법을 제공합니다. 새 CLI 명령으로 구텐베르크 블록 만들기, wp 비계 블록. 기존 플러그인 및 테마에 생성하여 포함 할 수 있습니다..

CGB

Gutenberg 블록을 쉽게 시작할 수있는 또 다른 방법은 Create Guten Block (CGB)은 다음과 같은 도구입니다. 상용구 생성 구텐베르크 블록 개발 React.js, Webpack, ESLint, Babel 등의 현대적인 도구로 구성되어 있습니다. 가장 중요한 부분은 이러한 도구를 구성 할 필요가 없습니다. 코드 작성에 집중할 수 있습니다..

구텐베르크에 대한 요소 블록

당신이 할 수있는 WordPress 플러그인 Elementor 템플릿 삽입 편집기에서 바로 미리 볼 수 있습니다. 플러그인은 다른 많은 호환성을 제공합니다. 원활한 편집 경험 Elementor와 구텐베르크 사이. 이 비디오를 통해 실제 작동 방식을 확인하십시오..

원자 블록

컬렉션의 증가와 구텐베르크 블록의 집합. 이 글을 쓰는 시점에서 “포스트 그리드 블록” 당신이 눈금 배치에있는 당신의 위치의 포스트의 명부를 추가하십시오. 또한 “회원 평가” 그 이름에서 알 수 있듯이, 페이지 내에 고객 증명서를 삽입하는 것입니다. 이 페이지에서 블록의 전체 미리보기를 확인하십시오..

블록 갤러리

이미지 갤러리를 삽입하는 눈길을 사로 잡는 블록 인 Block Gallery는 원활한 경험을 제공하여 이미지를 게시물에 추가합니다. 단순히 이미지를 드롭하거나 갤러리 디스플레이 스타일 (벽돌 스타일, 캐 러셀 또는 전체 화면)을 설정하면됩니다. 그 순간, 단순히 WordPress 용 최고의 갤러리 블록입니다..

CoBlocks

위에서 언급 한 블록 갤러리를 개발 한 동일한 저자의 블록 모음 인 CoBlocks는 다음과 같은 방법으로 사이트 콘텐츠를 향상시키는 여러 블록으로 구성됩니다. 아코디언, 가격 테이블, GIF, Click-to-Tweet, 추가 할 블록 추가.

StagBlocks

구텐베르크 블록 (Gutenberg Blocks)의 또 다른 모음입니다. 이 플러그인은 많은 사람들이 좋아할만한 여러 가지 흥미로운 블록을 제공합니다. 여기에는 통계 및 통계를 사용자 정의 할 수있는 통계 블록이 포함됩니다. 웹 사이트 카드 블록 멋진 카드 스타일로 미리보기 웹 사이트. 강조 표시된 색상으로 코드를 렌더링하는 코드 블록.

수달 블록

또한 구텐베르크 블록 (Gutenberg Blocks) “Google지도 차단” 지도를 삽입하는 방법, “서비스 블록” 에 모눈보기에 단추가있는 서비스 목록을 삽입하십시오., 과 “회원 평가” 회원 평가 목록을 삽입하십시오. 오터 블록 (Otter Block)은 비즈니스 및 테마 개발자가 이해할 수있는 구텐베르크 블록 모음입니다..

고급 구텐베르크 블록

이 플러그인에는 고급 블록을 사용하여 콘텐츠 향상 자동 생성 목차와 같은, “지피 블록” Giphy.com의 GIF 이미지 포함, “Unsplash Block” Unsplash.com에서 이미지를 삽입하는 방법, “배너 광고 차단”, WooCommerce “장바구니에 추가 버튼 블록”, 그리고 훨씬 더.

블록 실험실

Block Lab은 개발자가 구텐베르크 블록을 쉽게 만들 수있게합니다. 플러그인을 사용하면 사용자 친화적 인 GUI로 새로운 블록을 등록하십시오. 및 PHP의 템플릿. React.js를 배울 필요조차 없습니다..

EDD 블록

Gutenberg 편집자가 Easy Digital Downloads 제품을 렌더링 할 수있게 해주는 플러그인. Shortcode 사용과 달리 블록은 제품보기를 표시합니다..

테스트 구텐베르크

Gutenberg 플러그인을 설치하거나 WordPress 5.0에 사이트를 업데이트 할 준비가되지 않았습니까? 당신은 간단하게 이 사이트를로드하여 새 편집기를 사용해보십시오..

구텐베르크 클라우드

Gutenberg Blocks의 AppStore와 같습니다. 당신이 얻을 수있는 중앙 장소 WordPress 및 Drupal에서 사용할 수있는 구텐베르크 블록. 예. Drupal은 편집인을 위해 구텐베르크 편집자를 채택 할 예정입니다..

구텐베르크 예제

Gutenberg 블록을 생성하는 코드 샘플의 Github 저장소. 여기에서 가장 간단한 블록 -보다 복잡한 예제, 예를 들어, “조리법 블록” 사용자가 에디터에 템플릿을 추가하여 추가합니다. 레시피 함유량. 교과서보다는 실제 사례를 통해 배우는 것을 선호하는 사람들을위한 훌륭한 참고서입니다..

구텐버그

Gutenberg의 JavaScript 전용 버전. 구텐베르그 (Gutenberg)를 자바 스크립트 애플리케이션에 통합 할 수있는 NPM 패키지로 제공됩니다..

구텐버그 사용 안함

Gutenberg가 WordPress에 새로운 가능성을 제시하지만 모든 사람이 WordPress에 준비되어 있지는 않습니다. 기존 사이트가 Gutenberg와 잘 작동하지 않으면이 플러그인을 설치할 수 있습니다. 그것은 당신이 구텐베르크 편집기 사용 안함 특정 게시물, 게시물 유형, 사용자 역할, 테마 및 프런트 엔드에서 구텐베르크 스타일 시트 사용 안 함.

클래식 에디터

또는 이전 클래식 편집기를 계속 사용하면서 WordPress 5.0으로 업데이트 할 수 있도록이 플러그인을 설치할 수 있습니다. 이 플러그인은 2022 년까지 지원됩니다..

클래식 프레스

또 다른 방법은 WordPress 포크 인 ClassicPress로 전환하는 것입니다. ClassicPress 포커스 기업, 안정성 및 보안. WordPress 플러그인과 호환되며 향후 출시 될 새로운 기능을 추가 할 계획입니다. 우리의 포스트를 체크 아웃하십시오 : ClassicPress : Gutenberg & React.js가없는 WordPress의 대안

스피드 업 WordPress

WordPress가 너무 커지면서 단순히 블로깅 플랫폼 이상입니다. Gutenberg는 특히 사이트에 속도를 늦출 수있는 추가로드, 코드, 파일을 추가했습니다. 이는 귀하가 참조 할 수있는 세부 정보로 사이트의 문제점을 파악하고 업계 최고의 최신 사례를 해결하는 데 도움이됩니다..

Visual Studio 코드 브라우저 미리보기

Visual Studio 코드 안에 Chrome 헤드리스가 탑재 된 실제 브라우저를 추가하는 비주얼 코드 편집기입니다. 이렇게하면 실시간으로 작업 미리보기 코드 편집기 내부에서 바로 사용할 수 있으며 편집기 내 디버깅.

번들 화

번들 크기는 JavaScript 파일 유지 번들링 수표의 크기. 묶음 처리 된 각 파일의 최대 크기를 정의 할 수 있으며 정의 된 최대 크기가 지나가거나 지나칠 때 경고합니다. Bundlesize는 TravisCI 및 CircleCI와 같은 CI 서비스와 통합되어 프로젝트의 워크 플로우를 원활하게 배포 할 수 있습니다..

WP 출현

현대적인 MVP 패턴을 기반으로하는 WordPress 테마 프레임 워크. Laravel과 Slim과 같은 PHP 프레임 워크를 사용하는 데 익숙하다면이 프레임 워크에 정말 감사 할 것입니다. 라우터 및 컨트롤러, DI 컨테이너 및 미들웨어 등을 사용할 수 있습니다..

등대 봇

Docker를 사용하여 CI 서비스에서 Lighthouse를 실행할 수있는 유틸리티 도구입니다. 이 도구는 웹 사이트 실적 점검 자동화 웹 사이트 코드에 새로운 변경 사항을 적용 할 때마다.

반응하는 앱 배우기

Learn React App은 React.js를 배울 수있는 리소스입니다. 하지만 다른 리소스와는 달리 컴퓨터에 로컬로 설치. 학습 자료가 포함되어있을뿐만 아니라 코드 및 대화식 샘플도 포함됩니다. 가장 좋은 부분은 일단 설치되면 오프라인에서 할 수 있다는 것입니다..

WP 수락

WP 수락은 수락 테스트를 수행 할 수있는 새로운 도구입니다. 이를 간단히 말하면 수용 테스트는 사용자 행동을 모방하기위한 테스트. 이 유형의 테스트를 수행 할 수있는 많은 프레임 워크가 있습니다..

그러나 주로 WordPress로 작업하는 경우 WordPress의 일반적인 프로젝트에 맞게 설계되어 있으므로 사용하기 쉽도록이 도구를 사용해 주시면 감사하겠습니다..

빛나는

자바 스크립트 라이브러리 모바일 장치에서 볼 때 웹 사이트에서 조명 반사를 에뮬레이션합니다.. https://pqina.nl/shiny/에서 데모를 볼 수 있습니다. 모바일 장치에서만 사용할 수있는 특정 API를 사용하므로 모바일 장치에서만 작동한다는 점은 주목할 가치가 있습니다..

반응의 진실

ReactLucid는 당신을 도울 수있는 도구입니다. React 및 GraphQL 응용 프로그램 디버그 더 대화식으로 그것은 당신이 실시간으로 GraphQL 스키마, 질의 및 변이뿐만 아니라 React 애플리케이션 내에서 구성 요소 계층 구조, 상태 / 소품 변경 사항을 볼 수있게합니다.

CSS 기능 토글

Chrome 확장 프로그램을 사용하면 Chrome에서 특정 CSS 기능 사용 중지. 이를 통해 특정 기능이없는 경우 웹 사이트가 어떻게 렌더링되고 작동하는지 확인할 수 있습니다. 모든 브라우저에서 구현되지 않을 수도있는 새로운 CSS 기능을 구현하는 데 유용합니다..

블렌디

당신을 도울 수있는 도구 이미지로 CSS 배경 혼합 모드 사용자 정의. 블렌드 모드를 미리보고 색상을 변경하고 그라디언트를 적용 할 수 있습니다. Unsplash의 이미지를 사용하거나 컴퓨터에서 업로드 할 수 있습니다..

반응 원소

상자에서 바로 사용할 수있는 React 요소 모음입니다. Webpack에 추가 할 구성을 가져 오거나 사용자 정의 할 수있는 외부 CSS가 없습니다. Button, Checkbox, SelectList, Tabs, Tooltip과 같은 필수 구성 요소와 함께 제공됩니다..

FX

JSON 형식을 종종 사용하는 사용자라면이 도구를 사용해 주시면 감사하겠습니다.. FX ~이다. 터미널에서 JSON 데이터를 시각화 할 수있는 명령 행 도구 대화 형 모드. 데이터를 확장하거나 축소 할 수있는 방식으로. FX NPM 또는 Homebrew를 통해 설치할 수 있습니다..

모니카

모니카는 그 자체의 범주에 있습니다. 그것은 일종의 CRM (고객 관계 관리자)이지만 고객을위한 것이 아니라 가족 및 친구와 같은 사랑하는 사람을위한 것입니다..

CRM과 마찬가지로, 사용자는 자신의 활동과 같은 정보를 추적하고 마지막으로 정보를 호출 한 시간을 추적 할 수 있습니다. 더 많은 시간 동안 이야기하지 않은 사람에게 전화하도록 상기시킬 수 있습니다. 그들은 PRM (Personal Relationship Manager).

이온 프레임 워크

이오니아 프레임 워크는 실제로 잠시 동안 주변에 있습니다. 하지만 요즘은 기능면에서 큰 발전을 이루었습니다. 이제는 더 빠르지 만 이온이 있습니다. React.js와 Vue.js라는 두 가지 새로운 스타 프레임 워크와 호환됩니다..

이것은 이오니아가 프레임 워크 불가 지론 도구. 따라서 특정 프레임 워크에서 작동 할뿐 아니라 프론트 엔드 개발이 미래에 발전함에 따라 새로운 프레임 워크와 함께 작동 할 수도 있습니다..

주목할 만한

주목할만한 메모 작성 데스크탑 응용 프로그램입니다. 다른 유사한 응용 프로그램과 달리 독점 형식, WYSIWYG 또는 다른 전형적인 종소리와 휘파람을 사용하지 않습니다. 그만큼 앱 편집기는 주로 Github-flavored Markdown에 의해 구동됩니다.. 메모는 플랫 파일에 저장됩니다. .MD 파일뿐만 아니라 첨부 파일. 그냥 효과적이고 간단합니다..

팁 탭

TipTap은 Vue.js와 함께 ProseMirror 위에 구축 된 WYSIWYG 편집기입니다. ProgressMirror에서 Markdown 구문 지원과 같은 뛰어난 기능을 상속하는 것 외에도 TipTap은 메뉴 버블과 같은 몇 가지 현대 기능을 제공합니다. 여기서는 텍스트를 강조 표시 할 때 서식 메뉴가 나타나고, 태그 또는 언급 할 수있는 제안 기능 콘텐츠 안에있는 사람, JSON 형식으로 내용을 내보내는 기능.

Restplain

Restplain은 WordPress 플러그인으로 사이트의 맞춤 끝점을 비롯하여 WordPress REST API 끝점의 문서를 쉽게 생성 할 수 있습니다. 문서 내에서 API 호출하기. 한 가지주의 할 점은 엔드 포인트 스키마를 사용하여 문서를 생성하므로 사용자 정의 엔드 포인트에 적합한 스키마를 추가했는지 확인하십시오.

반응 컨텐츠 로더

반응 컨텐츠 로더 실제 콘텐츠를로드하는 동안 콘텐츠 자리 표시자를 표시 할 수있는 React 사용자 지정 구성 요소입니다. Facebook 및 Instagram에 표시되는 로더 유형과 유사합니다. .

신화의

Mythic은 Dependency Injection, Views 및 Controllers와 같은 현대적인 모범 사례를 사용하는 WordPress 스타터 테마는 물론 현대적인 도구 사용과 같은 현대적인 도구입니다. Webpack, Sass, Linting, PHP7 최소 요구 사항 및 BEM. 테마 개발자로서의 기술을 높이는 훌륭한 테마입니다..

세련된 Github

Github를 사용할 때 경험을 구체화하는 브라우저 확장 프로그램. 몇 가지 편리한 바로 가기 키를 추가하고 일부 레이아웃과 UI를 개선하며 자동으로 이슈 및 홍보에 대한 링크를 추가합니다..

WC 열기

Open WC는 사용자 지정 웹 구성 요소를 만들 수있는 도구 모음입니다. 그것은 웹 컴포넌트를 생성하기위한 메인 라이브러리를 포함하고, Yeoman 생성기는 “WC 열기” 테스트 용 스캐 폴드가 포함 된 프로젝트, 보풀, 계속 통합.

오픈 WC는 좋은 대안이 될 수 있습니다. 네이티브 웹 기능으로 구현하는 것을 선호합니다. Vue.js 또는 React.js와 같은 프레임 워크를 사용하는 것이 아닙니다..

그리드 솜

그리드 솜은 Vue.js 및 GraphQL을 사용하여 정적 웹 사이트 및 웹 응용 프로그램을 구축하는 도구. WordPress 및 Drupal과 같은 CMS, Markdown 또는 Yaml과 같은 로컬 파일 또는 AirTable 및 Contentful과 같은 외부 API와 같은 여러 데이터 스트림을 처리 할 수 있습니다. 이것은 Gatsby.js에 대한 훌륭한 대안입니다. 특히 React.js보다 Vue.js를 선호하는 경우.

브라우저

이것은 World Wide Web 발명가 인 Tim Berners-Lee가 구상 한 브라우저입니다. 그것은 HTML 렌더링을위한 간단한 브라우저 최신 브라우저와 같은 주소 표시 줄은 보이지 않지만 다음 주소로 이동하여 볼 수 있습니다. 문서> 전체 문서 참조에서 열기 URL에 붙여 넣기를 클릭하십시오. 열다. 그러면 사이트에서 원본 브라우저로 렌더링하는 방법을 확인할 수 있습니다..

래스터

Raster는 CSS 격자, CSS 사용자 정의 속성 (변수) 및 사용자 정의 요소와 같은 최신 HTML 및 CSS 사양으로 빌드 된 최신 그리드 프레임 워크입니다. 가장자리에서 살기를 원하는 사람들을위한 완벽한 프레임 워크.

후퍼

Carousel 또는 Slider를 추가하는 Vue.js 구성 요소입니다. 터치, 키보드, 마우스 휠 및 기타 보조 탐색 기능을 통해 액세스하고 사용할 수 있으며 RTL 및 수직 방향, 확장 가능 및 물론 응답을 지원합니다..