[토혈 요약] 20가지 이상의 실용적인 프론트엔드 도구를 즐겨찾기에 추가하세요!

이 기사에서는 프로젝트 개발 시 개발 효율성을 높이는 데 도움이 되는 20가지 이상의 실용적인 도구를 공유하고 수집하여 모든 사람에게 도움이 되기를 바랍니다.

1. CSS 레이아웃 생성기

레이아웃: https://layout.bradwoods.io/customize

CSS 그리드 레이아웃을 사용하기 위한 모든 기능을 갖춘 CSS 및 JSX 생성기입니다. 구문은 서로 다른 생성을 생성합니다. 레이아웃 종류에 따라 그리드의 속성을 임의로 수정하고 실시간으로 화면을 표시하며 해당 코드를 생성합니다. 물론 Flex 레이아웃도 있습니다(그러나 아직 완벽하지는 않습니다). [추천 학습: css 동영상 튜토리얼]

2. Riju

Riju: https://riju.codes/

Riju는 224개 언어를 상속하는 온라인 코드 실행 플랫폼입니다. 매우 간단합니다. , 광고 없음, 강력 추천

3. Whirl

Whirl: https://whirl.netlify.app/

Whirl은 CSS 애니메이션 라이브러리로, 다른 애니메이션 라이브러리와는 다릅니다. 108개의 로딩 애니메이션을 수집하고 간단하고 독특하며 학습할 가치가 있으며 모든 소스 코드도 사용할 수 있습니다!

4. Pikaday

Pikaday: https://pikaday.com/

Pikaday는 날짜 선택기이며 종속성이 없으며 경량(5k), CSS 모듈식이며 스타일도 매우 간단합니다. , 특히 마음에 듭니다. 놀랍게도 Github에서 별 7,000개 이상을 받았습니다. Tailwind UI 키트입니다. 이 웹사이트는 커뮤니티에서 제공한 다양한 Tailwind 구성 요소 모음입니다.

Tail-Kit은 최초의 훌륭한 Tailwind UI 구성 요소 라이브러리입니다. . 250개 이상의 오픈 소스 구성 요소가 있으며 React, Vue 및 Angular와 호환됩니다. https://pbeshai.github.io/tidy/

tidy.js는 데이터 처리를 위한 JavaScript 라이브러리입니다. 다양한 범주의 70가지 기능(조합, 그룹화, 수학, 정렬 등)

8. party.js

party.js: https://party.js.org/

party .js는 꽤 흥미롭습니다. 마우스로 클릭하면 멋진 애니메이션 효과가 많이 나타납니다. 이 라이브러리를 사용하면 그러한 효과를 쉽게 얻을 수 있습니다. 배경 제거

baseline: https://baseline.is/tools/Background-remover/

baseline은 AI를 사용하여 이미지의 배경을 제거하는 무료 도구 웹사이트이며, 향후에는 지원될 예정입니다. 배경이 투명한 PNG 이미지를 돌려드립니다

十, 레이아웃 패턴

레이아웃 패턴: https://web.dev/patterns/layout/

레이아웃 패턴은 CSS를 사용하여 레이아웃 UI를 구축하는 방법을 나열하는 Google Developers의 개발자 리소스입니다. 이제 11개의 레이아웃이 나열됩니다. 이 수는 앞으로도 계속 늘어날 것이며 더 많은 가능성을 탐색할 것이며

Eleven을 수집하는 것이 좋습니다. Lowdefy

Lowdefy: https://lowdefy.com/

Lowdefy는 YAML을 사용하여 웹 애플리케이션, 관리 패널, BI 대시보드, 워크플로 및 CRUD 애플리케이션을 쉽게 구축하는 오픈 소스 로우 코드 프레임워크입니다

Twelve, uncut

uncut: https://uncut.wtf/

uncut은 오픈 소스에 중점을 둔 현대적인 글꼴 카탈로그 웹사이트로 개인 및 상업적 용도로 무료로 제공됩니다. 총 90개의 글꼴이 포함되어 있습니다~

13. fetoolkit

fetoolkit: https://www.fetoolkit.io/

fetoolkit은 20개의 글꼴이 포함된 프런트 엔드 개발 도구 상자입니다. CSS, JSON, 아이콘, SVG, 이미지 압축, npm, regex 및 기타 도구를 포함한 다양한 코딩 및 이미지 관련 도구

Fourteen, Unicode Arrows

Unicode Arrows: https://unicodearrows .com/

Unicode Arrows는 다양한 화살표와 관련된 16진수 코드 모음입니다. 구문 강조 생성기, 그라디언트, 그림자 도구, SVG 패턴 생성기, 애니메이션 배경 등을 포함한 테마 빌더는 모두 온라인으로 디버깅할 수 있으며 사용하기 매우 쉽습니다

Sixteen , glitter

Glitter: https: //wh0.github.io/glitter/

Glitter는 형광 글꼴 생성기입니다. 프로젝트는 복잡하지 않지만 보기에는 좋아 보입니다. 텍스트를 마음대로 수정하고 최종적으로 SVG로 내보낼 수 있습니다

Seventeen, Iconduck

Iconduck: https://iconduck.com/

Iconduck은 키워드로 검색할 수 있고 상업 프로젝트에 모두 사용할 수 있는 100,000개 이상의 아이콘을 갖춘 오픈 소스 아이콘 웹사이트입니다.

18, Pattern-generator

pattern-generator: https://doodad.dev/pattern-generator/

pattern-generator는 배경 이미지를 생성하는 데 도움이 되는 웹사이트입니다. 선택할 수 있으며 대화형 버튼을 통해 각 패턴의 요소를 마음대로 수정할 수 있습니다. 마지막으로 JPEG, PNG, SVG 및 CSS 배경 코드를 내보낼 수도 있습니다. 종료 후 마지막 작업 내용 복원도 지원합니다.

Nineteen,buttons-generator

buttons-generator: https://markodenic.com/tools/buttons-generator/

buttons-generator는 다양한 대화형 양식과 스타일을 갖춘 버튼이 포함된 웹사이트입니다. **120+** 종류 정도인데, 커스텀 버튼이 필요하신 분들은 참고하시면 됩니다

Twenty, Coding Fonts

Coding Fonts: https://coding-fonts.css -tricks.com/fonts/hack/?언어=html&theme=dark

Coding Fonts는 45개의 코딩 글꼴을 수집하는 웹사이트입니다. 대부분은 무료입니다. 물론 유료 글꼴도 선택할 수 있습니다. 좋아요를 누르고 직접 넣으세요. 편집기로 이동하세요(조용히 bb, 저는 여전히 그것이 가장 좋고, 자유롭고 아름답습니다). svgrepo는 300,000개 이상의 무료 SVG 아이콘이 포함된 SVG 아이콘 라이브러리이며, 대부분은 상업적으로도 이용 가능합니다. . 해당 홈페이지는 검색을 지원하며 로그인 없이 수집 가능합니다(로컬 저장소에 저장될 수 있음)~

Twenty-two, maplibre

maplibre: https://maplibre.org/

maplibre는 JavaScript 세계 지도 라이브러리는 즉시 사용 가능하며 IOS 및 Android SDK도 지원합니다

Twenty-Three, Dopefolio

Dopefolio: https://github.com/rammcodes/Dopefolio

Dopefolio는 타사 오픈 소스 라이브러리는 모두 순수 HTML 및 CSS이므로 SEO가 매우 좋고 Lighthouse 점수도 매우 높으며 페이지 응답성을 지원합니다. 공식 웹사이트 페이지가 필요한 친구들은

Twenty-four, animista

animista: https://animista.net/

CSS 애니메이션 세트를 사용해 볼 수 있습니다. 애니메이션 매개변수, 사용하기 쉬운 코드 조각 생성

25, CSS Inspiration

CSS Inspiration -- CSS Inspiration

https://csscoco.com/inspirion/

사장이 준비할 것입니다. for you 매번 온갖 멋진 스타일을 찾을 때 참고로 사용할 수 있습니다

end

(영상 공유 학습: 웹 프론트엔드)

위 내용은 [토혈 요약] 20가지 이상의 실용적인 프론트엔드 도구를 즐겨찾기에 추가하세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!