Study/개발 Tip

[개발 Tool] 웹 디자이너 및 개발자를 위한 새로운 리소스 모음

AC 2021. 4. 7. 00:10

 

JavaScript는 훌륭한 언어입니다. JavaScript로 거의 모든 것을 빌드 할 수 있습니다. 간단한 웹 사이트, 데스크톱 애플리케이션에서 모바일 애플리케이션까지

이번 시리즈에서는 JavaScript와 관련된 몇 가지 유용한 리소스를 살펴 보겠습니다. 이 게시물에는 JavaScript로 빌드 된 유틸리티, 도구 및 전체 리소스 목록이 포함되어 있습니다. 예를 들어, 개발 및 배포를위한 풀 스택 프레임 워크, JavaScript 번 들러 및 소수의 VSCode 확장이 있습니다. 전체 목록을 살펴 보겠습니다.

레이 42

Ray 는 코드 조각을 아름다운 이미지 로 생성 할 수있는 작은 웹 응용 프로그램입니다 . 언어 테마를 선택하고 배경, 패딩, 텍스트를 사용자 정의하고 소셜 미디어 또는 블로그 게시물에 저장 및 공유 할 수 있습니다.

원추형 스타일 14

CSS conic-gradient()예제 모음 중심점을 중심으로 회전하는 두 개 이상의 색상을 생성하는 새로운 CSS 함수. 원추형 그래디언트를 사용하면 CSS 만 사용하여 쉽게 파이 차트 또는 색상환과 같은 프레젠테이션을 만들 수 있습니다.

Browserosaurus 15

링크를 열 브라우저를 선택할 수있는 앱입니다. 시스템 환경 설정에 따라 자동으로 전환되는 어둡고 밝은 테마로 macOS 용으로 특별히 제작되었습니다. 더 이상 다른 브라우저에서 링크를 수동으로 복사하고 붙여 넣을 필요가 없습니다.

Loripsum 8

"lorem ipsum"을 생성하는 도구입니다. 콘텐츠뿐만 아니라 제목, 굵게, 기울임 꼴, 인용구 및 링크와 같은 추가 서식을 추가 할 수도 있습니다. 이 도구는 프로그래밍 방식으로 콘텐츠를 생성하는 데 활용할 수있는 API 끝 점도 제공합니다. 테스트 또는 프로토 타이핑을 위해 더미 콘텐츠를 생성하는 매우 편리한 도구입니다.

WindiCSS 15

WindiCSS 유틸리티 우선 CSS 프레임 워크. 더 빠른로드 시간을 제공하는 TailwindCSS의 대안으로 설계되었습니다. 사용 된 CSS 만 생성하며 VSCode 확장 , CLI , Rollup  Vue.js 와 같은 프레임 워크와 같은 여러 도구와 이미 통합되어 있습니다. 1, Nuxt.js  벨테 .

VSCode Vite 7

미리 구성된 빌드 도구를 사용하는 최신 프런트 엔드 개발 인 Vite 의 확장입니다 . VSCode를 사용하는 경우이 확장은 워크 플로를 간소화하는 데 도움이 될 수 있습니다. 에디터 창에서 바로 개발 서버를 시작하고 빌드를 디버깅하고 미리 볼 수 있습니다.

VueUse 5

Vue.js 애플리케이션을보다 유지 관리하고 유연하게 만드는 데 도움이되는 새로운 필수 Vue Composition API 모음입니다 . 애니메이션 수행 , 브라우저와의 통신, 상태 관리 및 기타 유틸리티 기능을 제공합니다.

Lite 찾아보기 5

내가 가장 좋아하는 VSCode 확장 중 하나입니다. 이 확장 프로그램은 VSCode에 바로 브라우저를 추가하므로 편집기를 떠나지 않고도 작업하고 미리 볼 수 있습니다. 편집기 내에서 완벽하게 잘 어울리는 깔끔한 디자인으로 빠르게 실행됩니다. 또한 Chrome 및 Firefox와 같이 완전히 작동하는 DevTools 도 있습니다 .

최소 6

Min은 성능과 개인 정보 보호를 목표로하는 매우 최소한의 브라우저입니다. 최소 브라우저는 광고, 추적기, 스크립트 및 이미지를 중지하는 기능을 제공하므로 더 빠르게 탐색하고 더 적은 데이터를 사용할 수 있습니다.

Volar 2

Vue 3 용으로 특별히 제작 된 VSCode 확장 입니다. Vue.js 용 언어 서버를 제공하며 TypeScript를 통한 Type-checking을 완벽하게 지원합니다. 이 확장 기능은 더 많은 기능을 포함하여 아직 개발 중입니다.

사 루니 5

JavaScript를 사용하는 풀 스택 웹 애플리케이션 프레임 워크. 인증, 이메일, 이미지 업로드 및 도구 (React, TypeScript, GraphQL 등)와 같은 기본 기능을 제공하여 앱을 개발하고 최신 워크 플로로 앱을 배포합니다.

WithFig 

Fig는 코드 편집기에있는 것과 유사한 터미널에 자동 완성 및 바로 가기를 추가하는 macOS 애플리케이션입니다. 개발자가 시간을 절약하고 생산성을 높이는 데 도움이됩니다. 작성 당시이 앱은 아직 초기 개발 단계에 있습니다. 직접 체험하고 싶다면 베타 사용자로 가입 할 수 있습니다 .

GrapeJS 13

GrapesJS는 코딩 할 필요없이 HTML 템플릿을 빌드하는 데 도움이되는 웹 레이아웃 빌더입니다. 버튼, 열, 이미지,지도 등과 같은 사전 제작 된 구성 요소가 함께 제공되며 사용자는 드래그 앤 드롭으로 원하는 레이아웃을 만들 수 있습니다. 크기 및 색상과 같은 스타일을 사용자 지정할 수도 있습니다. 또한 사용자 지정 구성 요소를 만들 수도 있습니다.

무지개 CSV 

CSV 콘텐츠를 쉽게 검색하고 요약 할 수 있도록 CSV에 구문 강조 표시를 제공하는 VSCode 확장입니다. 큰 이점이있는 일종의 작은 유틸리티입니다. 이것이 VSCode의 기본 기능에 추가되어야한다고 생각합니다.

텍스트 전동 공구 2

올인원 텍스트 조작을 제공하는 VSCode 확장입니다. 텍스트 대소 문자를 변환하고 RegEx를 사용하여 행과 문자열을 필터링하고 중복을 제거하고 행 번호, 타임 스탬프, 경로 등을 삽입 할 수 있습니다.

VSCode REST 클라이언트 2

URL에 요청을 보내고 편집기의 응답을 볼 수있는 VSCode 확장입니다. 이 확장은 매우 포괄적 인 기능을 제공합니다. 예를 들어 요청 취소, GraphQL 쿼리 요청, SOAP, 프록시 및 인증 지원 등을 보낼 수 있습니다.

지평선 6

1 년 동안의 Github 기여를 기반으로 3D 모델을 생성하는 Github의 멋진 도구입니다. 이 3D 모델을 소셜 미디어에서 공유하거나 인쇄하거나 VR로 볼 수 있습니다. 꽤 멋지죠?

스노우 팩 4

최신 웹 애플리케이션을 위해 설계된 JavaScript 번 들러는 Webpack과 같은 무거운 번 들러의 대안이되는 것을 목표로합니다. Snowpack은 더 나은 빌드 프로세스, 더 적은 구성, 더 최적화 된 출력을 제공하고 React 및 Preact와 같은 일부 프레임 워크를 즉시 지원합니다.

계몽 2

Laravel 애플리케이션의 성능 및 가능한 보안 문제를 검사하는 감사 도구입니다. 기본부터 고급 보안 검사, 모범 사례 검사 및 안정성 검사에 이르기까지 100 개 이상의 기본 제공 감사가 있습니다. 한 줄의 명령으로 실행하거나 Github bot 을 사용하여 저장소에서 자동 검사를 실행할 수 있습니다 .

사이트 검사자 8

사이트에서 오타, 문법 오류, 끊어진 링크 및 기타 오타 오류를 검사하는 감사 도구입니다. Ruby / Rails, Vue.js, PostgreSQL로 구축되었으며 완전한 오픈 소스입니다. 자신의 서버에서 호스팅 할 수 있습니다. (Source: hongkiat)

LIST