알아야 할 15 가지 이상의 프론트 엔드 도구 : 내가 가장 좋아하는 2020 년 발견

1 년이 지났으며 업계의 많은 웹 개발자와 같은 경우 워크 플로에 통합 할 것으로 생각되는 수많은 새로운 프런트 엔드 도구를 발견했을 것입니다. 저는 같은 보트에 있습니다. 특히 새로운 소식을 정기적으로 연구하는 데 깊이 관여하기 때문에 도구 풍경.


이 게시물에서, 2020 년에 유용 할 것으로 생각되는 가장 흥미로운 프런트 엔드 도구 중 일부 (스크린 샷 및 데모 포함)를 정리하겠습니다.. 이러한 도구가 가장 인기있는 도구 나 가장 인기있는 도구 일 필요는 없지만 각 도구는 사용 사례에서 고유하며 약간 더주의를 기울여야한다고 생각합니다. 이들은 본질적으로 내 프론트 엔드 도구에서 올해 가장 좋아하는 결과.

최고의 프런트 엔드 도구

핫키

프런트 엔드 도구 : 핫키

JavaScript로 키 입력을 감지하는 것은 지나치게 복잡한 작업이 아니지만 GitHub 팀의이 작은 유틸리티는 매우 간단합니다..

그것으로 당신은 키보드 단축키로 요소에 대한 작업을 트리거 할 수 있습니다.

바로 가기 유형에는 키, 키 콤보 또는 키 시퀀스가 ​​포함됩니다. 한 번의 작업으로 여러 개의 바로 가기를 사용할 수도 있습니다.

JavaScript는 가져 오기와 함께 하나의 선언 일뿐입니다.

‘./hotkey.js’에서 {install} 가져 오기;

for (document.querySelectorAll ( ‘[data-hotkey]’)의 구성 요소) {
설치 (el)
}

해당 코드가 완성되면 HTML에서 주요 작업이 완료됩니다. 사용 된 바로 가기에 따라 일부 콘텐츠를 표시하기 위해 만든 링크 목록은 다음과 같습니다.

각 링크에 추가 된 데이터 단축키 속성을 확인하십시오. 대상 작업에 핫키를 사용하도록 설정합니다 (이 경우 CSS를 통해 : target 선택기 트리거). 여러 핫키는 쉼표로 구분됩니다. 키 조합은 더하기 기호로 구분됩니다. 키 시퀀스는 공백으로 분리됩니다.

라이브 데모는 다음과 같습니다.

각 바로 가기를 시도하고 JavaScript 패널의 코드가 최소인지 확인하십시오. 모듈을 가져 오면 설정이 매우 간단합니다. 그리고 여기서 요점으로, 모달 창에 표시하려는 여러 바로 가기 키가있는 앱이있는 경우 (Twitter, GitHub 등에서 수행됨) 체크 아웃 할 수 있습니다 QuestionMark.js, 내 오래된 프로젝트.

물론 키보드 단축키를 사용하면 접근성 문제를 기록하고 리포지토리의 README에서 정보를 확인하십시오..

Freezeframe.js

프런트 엔드 도구 : Freezeframe.js

웹 페이지에 간단한 비디오를 포함시키는 것이 일반적으로 수행되는 작업을 보여줍니다. 때로는 애니메이션 GIF도 적합합니다. 그러나 GIF는 콘텐츠를 자동으로 재생하기 때문에주의가 산만 해지는 경향이 있습니다..

이 작은 유틸리티를 사용하면 HTML에 포함 된 애니메이션 GIF에 비디오와 같은 기능을 추가 할 수 있습니다.

페이지에 Freezeframe.js 소스를 포함하면 JavaScript 선언이 하나만 필요합니다.

새로운 Freezeframe ( ‘. freezeframe’, {
트리거 : ‘호버’,
오버레이 : 거짓
});

두 번째 인수 (예 : new Freezeframe ( ‘. freezeframe’))를 생략하면 재생 버튼이없고 애니메이션이 호버에서 트리거됩니다. 이것의 유일한 결함은 애니메이션 GIF이기 때문에 기술적으로는 할 수 없다는 것입니다 "중지" 그것만 할 수 있습니다 "중지" 그것은 (처음부터 다시 시작한다는 것을 의미합니다). 하지만 보통 GIF에서는 큰 문제가 아닙니다..

다음은 세 가지 예가있는 데모입니다.

그러나이 도구 만 사용하면 전체 GIF가 장면 뒤에서로드되는 것처럼 보이기 때문에 성능이 저하되지 않을 수 있습니다. 하지만 페이지가로드 될 때 GIF가 화면에서 벗어나면 지연로드 라이브러리와 함께 사용할 수 있다고 가정합니다..

아크 툴킷

프런트 엔드 도구 : ARC 툴킷

최첨단 도구에는 다양한 접근성 옵션이 포함되어야합니다..

이 도구는 개발자 도구에 탭을 추가하여 WCAG 2.1 레벨 A 및 AA 가이드 라인과 관련된 접근성 오류 및 경고를 찾는 데 도움이되는 Chrome 확장 프로그램입니다..

이 도구가 큰 이유 두 가지 :

  • 개발자 도구 내에서 기존 테스트 / 디버깅 워크 플로와 통합
  • 그것은 접근성 통찰력으로 개발자 커뮤니티에서 잘 알려진 The Paciello Group에 의해 만들어졌습니다.

ARC 툴킷 기능

확장 프로그램이 설치되면 개발자 도구에서 탭을 선택하고 "테스트 실행". 초기 출력은 이전 스크린 샷에서 볼 수있는 것과 비슷합니다. 여기에서 다음 스크린 샷과 같이 특정 기능과 관련된 잠재적 접근성 문제를 드릴 다운 할 수 있습니다.

ARC 툴킷 기능 드릴 다운

주목 "연결" 왼쪽의 옵션 옆에 확인 표시가 있습니다. 그것이이 경우에 제가 검토하기로 선택한 것입니다. 또한 라이브 페이지의 개발자 도구 위에서 볼 수 있듯이 선택한 모든 객체가있는 위치를 보여주는 오버레이를 페이지에 추가합니다..

Scene.js

프런트 엔드 도구 : Scene.js

매년 프론트 엔드 도구 환경에 새로운 종류의 애니메이션 라이브러리가있는 것 같습니다.

올해 내 추천은 Scene.js입니다..

이것은 지금까지 설명한 다른 것들처럼 몇 분 만에 작업하고 처리 할 수있는 것이 아닙니다..

API에 익숙해지는 학습 곡선이 있습니다.

let scene = new Scene ({
".검색 창": {
"0 %" : "너비 : 50px",
"70 %": "너비 : 300px",
},
".선": {
"30 %" : "폭 : 0 %",
"100 %": "폭 : 100 %",
}
}, {
기간 : 1,
여유 : Scene.EASE_IN_OUT,
선택기 : true,
}). exportCSS ();

scene.setTime (0);
토글 = 거짓;

document.querySelector (".제출하다") .addEventListener ("딸깍 하는 소리", 함수() {
토글 =! toggle;
scene.setDirection (토글 ? "표준" : "역전");
scene.play ();
});

그 중 하나의 코드입니다 홈페이지에서. 간단한 작은 애니메이션 검색 창입니다. CodePen 데모는 다음과 같습니다.

다시 말하지만,이 도구는 빠르게 배울 수있는 쉬운 도구는 아니지만 매우 간단한 API 인 새 애니메이션 라이브러리를 사용해보고 싶다면이 방법이 좋습니다..

Commento

프런트 엔드 도구 : Commento

현재의 개인 정보 보호 온라인 환경은 이와 같은 더 많은 도구를 사용할 수 있습니다. 한동안 WordPress 웹 사이트에서 향상된 댓글 시스템에 대한 옵션을 고려하고 있으며 Commento는 견고합니다..

Disqus와 같은 기능 (공감 / 감독, 인기 댓글 등)이 마음에 들지만 너무 많은 팽창.

또한 WordPress 주석은 기본적으로 자체 호스팅되지만 Disqus의 추가 기능이 부족합니다. Commento는 이러한 문제를 해결하기 위해 올바른 방향으로 나아가는 단계라고 생각합니다.

기존 주석 달기 플랫폼에서 Commento로 전환을 고려하고 있다면 꽤 많은 일 내가 읽은 내용에서 큰 단점이 있습니다..

또한 Commento에서는 Disqus에서 가져 오기를 허용하지만 "투표" Disqus의 오래된 댓글 또는 댓글을 게시 한 사용자의 아바타.

Disqus로 먼저 내 보낸 다음 Disqus에서 Commento로 가져 오지 않는 한 이전 WordPress 주석을 Commento로 가져올 수있는 방법도 없습니다 (Commento에 가입 할 때 Disqus 가져 오기 도구를 사용하여 수행 할 수 있음).

마지막 단점은 자체 호스팅하지 않으면 Commento가 무료가 아니라는 것입니다. 그러나 Disqus의 팽창 및 개인 정보 보호 문제를 고려할 때 작은 월 수수료는 가치가 있습니다..

힘내 역사

프런트 엔드 도구 : Git History

이 도구는 프론트 엔드 도구 카테고리에만있는 것은 아니지만 작동 방식의 단순성과 참 신성 때문에이 목록에서 내가 가장 좋아하는 것 중 하나입니다..

Git History를 사용하면 공개 Git 저장소 (GitHub, GitLab 또는 Bitbucket)의 파일 내역을 볼 수 있습니다.

예를 들어, 변경 기록을보고 싶다고 가정 해 보겠습니다. 소스 파일 …에 대한 Normalize.css. 파일은 다음 위치에 있습니다.

https://github.com/necolas/normalize.css/blob/master/normalize.css

히스토리를 보려면 URL의 github.com을 github.githistory.xyz로 바꾸십시오.

https://github.githistory.xyz/necolas/normalize.css/blob/master/normalize.css

새 URL의 출력은 시간이 지남에 따라 파일의 변경 사항을 볼 수있는 깔끔한 대화식 방법을로드합니다. 히스토리 포인트를 선택할 때마다 멋진 애니메이션이 트리거되어 어떤 변경이 이루어졌으며 어떤 사용자가 커밋했는지 확인할 수 있습니다..

CSS 기능 토글

프런트 엔드 도구 : CSS 기능 토글

레거시 브라우저 테스트를 수행해야하는 환경에서 여전히 작업중인 경우 테스트 도구 상자에 추가 할 수있는 멋진 Chrome 확장 프로그램 일 수 있습니다..

위에서 언급 한 ARC 툴킷과 유사한 CSS 기능 토글은 브라우저의 개발자 도구에 새로운 탭을 추가합니다.

탭에서 최신 CSS 기능 목록을 볼 수 있습니다.

토글 가능한 CSS 기능

사용자가 특정 기능을 지원하지 않는 브라우저에서 페이지를 방문 할 때 페이지 모양을 즉시 표시하도록 이들을 토글 할 수 있습니다. 이것은 오래된 환경에서 레이아웃이 어떻게 저하되는지에 대한 빠른 개요를 얻는 좋은 방법입니다..

다른 기능을 선택하면 변경 사항이 표시되도록 페이지가 자동으로 업데이트됩니다. 예를 들어 Flexbox로 구축 된 사이트는 일부 최신 CSS를 활용하여 레이아웃을 깔끔하게 유지하면서 새로운 브라우저에서 점진적으로 향상시킬 수 있습니다..

앱 만들기

프런트 엔드 도구 : 앱 만들기

의심 할 여지없이 프론트 엔드 도구 워크 플로우에는 빌드를위한 많은 옵션이 포함되어 있습니다. 이 웹 사이트는 인기있는 자산 번 들러 인 웹팩 또는 Parcel을 사용하거나 사용하는 방법을 배우려는 개발자를위한 학습 사이트와 프로젝트 생성 도구의 조합입니다..

왼쪽의 범주로 드릴 다운하여 빌드에 필요한 옵션을 선택한 다음 기본 창에 필요한 파일 및 구성 옵션이 표시됩니다..

앱 구성 옵션 생성

이 페이지는 대화식이므로 가상 파일을 클릭하여 내용을 보거나 선택한 옵션 위로 마우스를 가져가 해당 옵션과 관련된 빌드의 강조 표시된 부분과 함께 설명을 볼 수 있습니다..

학습과 새로운 프로젝트 생성에 매우 유용!

CSSJanus

프런트 엔드 도구 : CSS Janus

국제화 영역에서 스타일 시트를 왼쪽에서 오른쪽으로, 오른쪽에서 왼쪽으로 또는 그 반대로 변환 할 수있는 온라인 도구입니다..

이를 통해 아랍어 및 히브리어와 같은 오른쪽에서 왼쪽 (rtl) 언어에 대한 스타일 시트를 쉽게 작성할 수 있습니다..

CSS 예제는 다음과 같습니다.

.예 {
왼쪽으로 뜨다;
텍스트 정렬 : 왼쪽;
패딩 : 1px 2px 3px 4px;
왼쪽 여백 : 1em;
배경 위치 : 5 % 100px;
커서 : ne-resize;
경계 반경 : 1px 2px;
}

위의 내용은 다음과 같이 변환됩니다.

.예 {
플로트 : 오른쪽;
텍스트 정렬 : 오른쪽;
패딩 : 1px 4px 3px 2px;
오른쪽 여백 : 1em;
배경 위치 : 95 % 100px;
커서 : nw- 크기 변경;
경계 반경 : 2px 1px;
}

차이점은 float : left 및 text-align : left와 같은 행뿐만 아니라 가로 패딩 선언 및 배경 위치 값과 같은 행도 포함합니다..

또한 도구가 스타일 블록이나 단일 선언을 무시하도록하려면 @noflip 지시문을 사용할 수 있습니다.

/ * @noflip * /. 무시 {
왼쪽으로 뜨다;
}

.무시하지 {
왼쪽으로 뜨다;
/ * @noflip * / 배경 : #fff (poster-ltr.png);
}

컬러 도둑

프런트 엔드 도구 : 색상 도둑

Color Thief는 정말 깔끔하고 사용하기 간단하지만 사용 사례에 매우 구체적입니다..

기본적으로이 유틸리티를 사용하면 JavaScript를 사용하여 지정된 이미지를 기준으로 2에서 20까지의 색상 팔레트를 가져올 수 있습니다.

이것은 모든 웹 사이트 또는 앱에서 사용할 것이 아니지만 좋은 아이디어이며 한동안 주변에 있었고 지난 1 년 동안 업데이트되었습니다..

간단한 API를 사용하면 한 줄로 이미지에서 팔레트를 가져올 수 있습니다.

let myPalette = colorThief.getPalette (img, 10);

거기에서 반환되는 배열을 조작하는 것입니다. 아래 CodePen에 내장 된 데모를 통해 표시된 이미지에서 사용자가 입력 한 색상 수를 확인할 수 있습니다. 배열에서 사용하는 코드는 다음과 같습니다.

myPalette.forEach (
요소 => colors.innerHTML + = ""
);

요소와 인라인 스타일을 사용하여 팔레트를 만들고 있습니다. 색상은 RGB 값으로 반환됩니다.

CodePen 데모에서는 CodePen에서 발생한 교차 출처 문제를 해결하기 위해 해결 방법을 사용하고 있지만 일반적으로 일반적인 환경에서는 해당 줄이 필요하지 않습니다..

정규식 안내

프런트 엔드 도구 : RegexGuide

매년 정규 표현식을 만드는 데 도움이되는 프런트 엔드 도구 모음에 추가 할 수있는 멋진 대화 형 앱을 찾고있는 것 같습니다. 올해의 참가작입니다. 그리고 당신이 나와 같다면, 당신은 이것들을 만들 수있는 모든 도움을받을 것입니다.

마법사처럼 단계별로 진행하기 때문에 처음에는 머리를 돌리는 것이 조금 이상합니다..

작업이 완료되고 모든 조건이 충족되면 지정된 조건을 충족하기 위해 다른 값을 시도 할 수 있으며 페이지는 대화식으로 작동하는 것을 나타냅니다.

이러한 종류의 도구는 지루한 코드를 만드는 방법뿐만 아니라 구문을 배우는 데 도움이되기 때문에 항상 내가 좋아하는 도구 중 일부입니다..

프런트 엔드 도구 : 훌륭한 언급

제 생각에는 이것들은 제가 지난 해에 충분히 관심을 갖지 못했다고 생각한 더 흥미로운 프론트 엔드 도구입니다. 본인이 찾은 내용이 있으시면 아래 의견에 자유롭게 입력하십시오. 그 동안 주요 목록을 작성하지는 않았지만 언급 할 가치가있는 것으로 생각되는 최종 목록이 있습니다.

  • wehatecaptchas – 이미지 나 문자 / 숫자 해독이없는 보안 문자 대안, "로봇이 아닌지 확인"
  • 단순 시차 – JavaScript로 시차 효과를 수행하는 쉬운 방법.
  • 라이트 유튜브 임베드 – 기존의 내장 코드보다 224 배 더 빠름.
  • 브라우저 기본 스타일 – HTML 요소를 입력하면이 도구는 해당 요소에 대한 각 브라우저의 기본 CSS를 알려줍니다.
  • 사용할 수있는 사람 – 두 가지 색상 조합을 입력하면이 도구를 통해 시각 장애인이 어떤 종류의 시각 장애인이 텍스트 / 배경에 해당 콤보를 사용할 수 있는지 알려줍니다.

WordPress 사이트 속도를 높이기위한 충돌 과정에 참여하는 것을 잊지 마십시오. 몇 가지 간단한 수정으로로드 시간을 50-80 % 줄일 수 있습니다.

Karol K의 레이아웃 및 프리젠 테이션.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map