원활한 웹 개발을 위한 15가지 편리한 도구

우리는 고정 관념에 집착하는 사람이 아니지만 (스테레오) 일반적인 웹 개발자가 망할 수염을 밀거나, 옷을 갈아 입거나, 목욕을하거나, 그 망할 수염을 면도 한 지 꽤 오래되었을 것입니다.

당신은 정말로 그들을 비난할 수 없습니다. 모든 개발자가 숨을 쉰지 오래입니다. 2015년은 웹 개발 기술의 비약적인 발전과 함께 좋은 해였습니다. 그러나 더 이상 개발자는 여가 시간에 자신의 랩톱/MAC(상사처럼)와 플랫폼용 코드를 분리할 수 없습니다.

이제 다중 플랫폼 지원, HTML5, 올해 조금 더 출시될 PHP7, 모든 버그를 멈추지 않는 IE와 같은 브라우저로 반응형 디자인을 관리해야 합니다. 사물 인터넷 자체의 매트릭스와 같은 수준.

우리 개발자들이 따라잡기 위해 할 수 있는 일은 이것뿐입니다. 그러나 우리는 대부분 이러한 멋진 도구로 인해 그렇게 합니다.

구경하다.

1. 코모도 편집

모든 것은 개발자를 위한 코드에서 시작되므로 찾을 수 있는 최고의 편집 도구로 시작하는 것이 당연합니다. Komodo Edit는 이 모든 면에서 매우 정결합니다. 코드를 작성하고 편집할 수 있는 멋진 크로스 플랫폼, 다국어 텍스트 편집기입니다. 아, 무료입니다.

이 도구는 Windows, Mac, Linux/UNIX에서 작동하므로 땀을 흘리지 않아도 됩니다. 우리는 또한 HTML, CSS, JavaScript, Java, PHP, Ruby, Perl(전 세계 5명 정도) 등과 같은 언어에 대한 자동 코드 완성 기능을 좋아합니다. 그것은 하나의 스마트한 텍스트 편집기입니다.

파일 구성 및 추적을 위한 프로젝트 관리자 기능의 추가 편의성을 위한 보너스 포인트.

2. CSS 3.0 메이커

솔직히 말해서, CSS3에 대해 좋아하는 모든 것에도 불구하고 둥근 모서리와 같은 구문을 작성하는 데 있어서는 CSS3가 약간 싫을 수 밖에 없습니다. 잠을 잃는 것은 아주 사소한 세부 사항이지만 어쨌든 합니다. 100개 이상의 새 속성과 해당 접두어를 외울 수 없습니다. 그러므로 CSS 3.0 Maker와 같은 도구를 주신 주님께 감사드립니다.

이 작고 깔끔한 온라인 도구를 사용하면 까다로운 코드를 복사하여 스타일 시트에 붙여넣을 수 있습니다. 상자 반경, 그라디언트, 텍스트 및 상자 그림자, 변환, 전환 및 선택한 회전과 같은 스타일 세부 정보에 대한 코드를 생성합니다. 또한 이러한 스타일 속성을 지원하는 데스크톱 및 모바일 브라우저도 표시됩니다. 작은 미리보기 영역에 효과가 표시되며 보기 상자에서 코드를 복사하거나 HTML 파일 내에서 다운로드할 수 있습니다.

진부해 보이는 스타일 세부 사항에 너무 많은 시간을 할애할 수 없는 사람들에게 이 도구는 생명의 은인입니다.

3. -접두사 없음

“CSS 접두사 지옥에서 벗어나라!” – 접두사 없는 소개 페이지.

이것은 Github의 Lea Verou라는 천사가 '접두사 지옥'에서 우리를 구출하기 위해 가져온 말도 안되는 도구입니다. <link> 또는 <style> 요소의 스타일 시트에 공급업체 접두사(보이지 ​​않는 위치)를 추가합니다. 또한: 새로운 <link> 또는 <style> 요소, jQuery의 .css() 접두사 또는 변경 사항에 대해 걱정할 필요가 없습니다.

좋아하지 않는 것은 무엇입니까?

4. 블록체 폰트

'Lorem Ipsum'은 너무 오랫동안 자리 표시자 텍스트였습니다. 다행히도 이제 Blokk: 이해할 수 없는 라틴어의 '고통'을 비명을 지르며 멈추게 하는 글꼴이 있습니다.

Blokk는 모형 및 와이어프레임을 만드는 동안 자리 표시자로 사용할 블록 '텍스트'를 제공합니다. 또한 프레젠테이션 중에 웹에 익숙하지 않은 고객을 혼란스럽게 하지 않을 것입니다.

5. 폰텔로

아이콘 글꼴이 되기 전에 개발자는 확장 가능한 아이콘을 만들기 위해 디자이너의 도움을 받아야 했습니다. (그런데 생성, 추출, 구현 및 사용자 지정을 포함하는) 개발하는 데 걸린 시간은 '절대적으로 터무니없는' 수준이었습니다. 그러나 누군가 아이콘을 글꼴로 바꾸었고 모두가 행복하게 살았습니다. 가까운 미래에...

Fontello는 훌륭한 아이콘 글꼴 생성기입니다. 수천 개의 아이콘 중에서 선택하여 매핑을 사용자 지정하거나 이름을 편집하고 단일 글꼴 파일로 컴파일할 수 있습니다. 놀랍고 무료입니다.

우리는 Vitaly Puzrin에게 충분히 감사할 수 없습니다.

6. 타자기

브라우저의 JavaScript를 켜고 선택한 서체가 실제 사이트에서 어떻게 보일지 테스트를 시작하십시오.

Typetester는 복잡하지 않습니다. 다양한 글꼴을 입력 및 비교하고 모양을 테스트할 수 있습니다. 원하는 것을 얻을 때까지 크기, 추적, 색상 등을 가지고 놀 수도 있습니다. 한 번에 최대 36개의 서로 다른 서체를 비교할 수 있습니다. 이를 통해 절약할 수 있는 시간을 상상해 보십시오.

정말 멋지네요.

7. 더러운 마크업

코딩은 때때로 약간 피곤할 수 있지만 레벨: Utter Tedium에는 코드 정리가 있습니다. 그러나 오류를 방지하고 더 빠르게 로드하려면 필요합니다.

Dirty Markup을 사용하면 더 흥미로운 활동(베이컨 샌드위치, 누구?)을 추구하는 데 보낼 수 있는 시간을 절약할 수 있습니다. 이것은 다른 단일 구문 정리 도구의 결합된 기능과 함께 제공됩니다. HTML Tidy, CSS Tidy, JS Beautify 및 Ace Editor에 대해 이야기하고 있습니다. 그것은 하나의 포괄적 인 청소기입니다.

HTML, CSS 및 JavaScript를 정리하고 형식을 지정하기 위한 웹 기반 앱입니다. 우리는 더 이상 요청할 수 없습니다.

8. 버그허드

이 강력한 도구를 사용하면 버그를 제거하는 자경단원이 될 수 있습니다.

BugHerd는 'Keep it Short and Simple, Stupid'라는 오래된 격언을 따릅니다. 클라이언트 피드백을 캡처하고, 자체적으로 사소한 문제를 해결하고, 버그를 추적할 수 있습니다(당신이 근절하기 위해). 또한 비서 역할을 하고 프로젝트를 관리합니다.

사이트의 매우 쉬운 포인트 앤 클릭 UI를 통해 사용자는 문제를 보고할 수 있습니다. BugHerd는 필요한 모든 정보(예: 사용자의 브라우저 버전)가 포함된 보고서로 변환합니다. 설정하기 쉽고 사용하기 재미있으며 자동 스크린샷(브라우저 확장), 직접 링크, 첨부 파일, 전체 선택기 데이터 및 토론과 같은 기능이 있습니다.

월 29달러의 표준 구독으로, 그것은 캐치입니다.

9. 스크린플라이

반응형 웹 디자인은 계속 존재한다는 점에서 새로운 유행 이상입니다. 그러나 현재로서는 유동적인 레이아웃이 기껏해야 까다롭다는 것을 알게 될 것입니다. 또한 다양한 화면 크기에서 레이아웃을 테스트하려고 하는 격렬한 분노에 사로잡혀 있는 자신을 발견하게 될 것입니다.

다행히 Screenfly는 @media 쿼리를 테스트할 수 있는 멋진 웹 앱입니다. URL을 연결하면 쿼리가 상단 패널에서 클릭하는 장치 치수를 처리하는 방법을 보여줍니다.

브라우저 간의 렌더링 차이를 고려하지 않지만 이를 위해 Browser Shots를 사용할 수 있습니다. 그렇지 않으면 사이트가 다른 해상도에서 어떻게 보이는지 확인하는 간단하고 아름답게 조합된 방법입니다.

10. 재단

우리는 RWD에 대해 이야기하고 있으므로 이를 개발하기 위해 프레임워크에 대해 이야기하는 것이 좋습니다.

프론트엔드 프레임워크 중 부트스트랩과 파운데이션 중 어느 것이 더 나은지에 대한 인터넷 논쟁이 뜨겁습니다. 둘 중 하나를 사용할 수 있습니다. 그러나 Foundation은 그리드 시스템, 설계를 위한 비례 단위(Bootstrap 4.0 Alpha가 em 및 rem 단위로 이동했지만), 오른쪽에서 왼쪽 지원, 가격표, 둘러보기 및 캔버스 외 탐색과 관련하여 약간 더 중요합니다. .

우리가 재단을 선호하는 것은 분명합니다. SASS 및 CSS와 함께 작동하며 전체 기능 밴드로 가득 차 있으며 일반적으로 더 편리하고 유연합니다.

우리는 이것에 대해 Zurb의 의견에 동의합니다. '매우 빠릅니다'.

11. 어도비 엣지

코드보다 디자인을 우선시하는 10년 간의 소프트웨어 끝에 Adobe는 마침내 코더에게 Edge를 제공합니다.

솔직히 말해서 이 놀라운 도구 및 서비스 배열은 새로운 프론트 엔드 코딩 트렌드를 염두에 두고 만들어졌습니다. 그들은 우리에게 상당한 대접을 받았습니다. Edge Animate를 사용하면 코더가 애니메이션을 만드는 동시에 Flash의 모든 흔적을 제거할 수 있습니다. 죄송합니다 Adobe, Flash는 훌륭했습니다. 그러나 Animate는 표준 HTML과 JavaScript를 사용하며, 모두에게 적용되는 만능…

HTML 문서 내에서 CSS를 편집하기 위한 Edge Code가 있습니다. Inspect는 반응형 디자인을 위한 브라우저 테스트 및 장치 호환성 테스트를 통합하고 초고속 업데이트/사용자 지정을 위해 모두 동기화합니다. 엄청나게 인기 있는 Typekit은 이제 Edge 제품군의 일부입니다. Reflow는 아직 출시되지 않았지만 아마도 다른 프론트 엔드 CSS 그리드 제조업체를 물 밖으로 날려 버릴 것입니다. 그리고 아직 더 있습니다.

우린 알아. 우리도 바닥에서 턱을 뽑아야 했습니다.

12. 방랑자

Vagrant는 가상 개발 소프트웨어 그 이상입니다.

이러한 아름다움을 통해 휴대 가능하고 쉽게 재현 가능한 작업 환경을 만들 수 있습니다. 가상화 소프트웨어, 서버 베이스 박스 및 구성 도구를 하나의 강력한 패키지로 통합합니다. 기본적으로 더 이상 VirtualBox + Ubuntu + Chef가 필요하지 않습니다. Vagrant는 세 가지 작업을 모두 수행하고 수행하는 동안 공간을 덜 차지합니다. 고급 사용자는 다중 VM 네트워크를 쉽게 설정할 수 있는 방법도 알려줍니다.

Ruby로 작성되었지만 PHP, Java, JavaScript, Python 및 C#에서 작동합니다. Windows, Mac OSX, Linux 및 FreeBSD에서 Vagrant로 작업할 수 있습니다.

U 친화적 인 것이 없기 때문에 초고속입니다. 멋지게 보이지만 많이 필요한 공간을 차지합니다. 개발자를 위한 테스트 환경으로 잘 작동합니다.

그것은 우리가 얻을 수 있는 성배에 가깝습니다.

13. PageSpeed ​​인사이트

Google의 PageSpeed ​​Insights는 정확한 정보를 제공합니다. 페이지의 프런트 엔드 성능에 대한 통찰력을 제공합니다. 이는 많은 저명한 개발자들에게 놀라운 일이 될 것입니다. 그래서 초틀 페스트를 가지고 당겨질 모든 머리카락에서 가속 대머리를 시작하십시오.

요청과 스크롤 없이 볼 수 있는 콘텐츠 렌더링, 요청 및 전체 페이지 렌더링 사이의 경과 시간을 측정하기만 하면 됩니다.

서버 구성, HTML 구조, JavaScript, CSS 및 이미지와 같은 네트워크 독립적인 측면을 확인하여 페이지의 성능을 계산합니다.

그것은 면도날처럼 날카롭고 무자비하게 빠릅니다. 그래서 그것은 확실히 당신의 감정을 상하게 할 것이고 당신이 낮은 점수를 받으면 아마도 당신을 울게 만들 것입니다. 그것은 또한 오만한 부모처럼 당신의 성과를 향상시키기 위해 뾰족한 제안을 함으로써 그것을 만회하려고 할 것입니다.

그리고 우리는 그것을 좋아합니다.

14. 힘내

대부분의 현대 개발자는 이미 그것에 익숙합니다. 그것이 결국 GitHub와 같은 커뮤니티의 존재를 설명하는 방법입니다.

Git은 저장소에서 프로젝트 기록을 추적하는 오픈 소스 개정 관리 및 소스 코드 관리 시스템입니다. 기본적으로 매우 빠르고 매우 효율적인 PA입니다.

모든 것을 망칠 염려 없이 자유롭게 실험할 수 있습니다. 또한 여러 리포지토리를 만들고 분기/병합을 사용하여 개별 기능을 사용할 수 있습니다. 공동 작업에 특히 유용한 도구입니다.

완전히 분산되어 있으므로 (설계 또는 사고로 인해) 오프라인 상태일 때 악몽 같은 것을 두려워할 필요가 없습니다. 주 리포지토리에 업데이트를 추가하기만 하면 참을성 있게 온라인으로 돌아올 수 있습니다.

15. W3C 마크업 검증

이것이 마지막 통과의례입니다.

W3C 마크업 유효성 검사는 매우 간단하고 필요합니다. W3C가 말했듯이 유효성 검사는 디버그를 돕고 사이트의 미래를 보장하며(브라우저는 W3C 표준을 기반으로 구축됨) 유지 관리에 도움이 됩니다.

또한 방법의 '오류'를 보여줌으로써 표준을 준수하는 방법을 알려줍니다.

마크업 유효성 검사는 억압적인 것으로 생각되어서는 안 됩니다. 실제로는 그렇지 않기 때문입니다. 더 나은 코드를 작성하는 방법을 배우는 데 도움이 될 것입니다…

전문가처럼.

결론

물론 개발을 더 쉽게 만드는 도구, 플러그인, 추가 기능, 리소스 및 커뮤니티가 일반적으로 더 많이 있습니다. 그리고 더 많은 것이 지금 개발되고 있습니다. HTML, CSS 및 JavaScript를 실시간으로 모니터링하고 편집할 수 있는 Firefox용 Firebug 애드온이 있습니다. PixelDropr은 최소한의 번거로움으로 사이트를 위한 사랑스러운 버튼과 아이콘을 만들 수 있는 Photoshop 추가 기능입니다.

모든 전문 개발자는 결국 더 빠르고 효율적으로 작업하기 위해 의존하는 자신만의 '도구 키트' 앱과 소프트웨어를 갖게 됩니다. 일부는 무료이고 일부는 비용을 지불해야 합니다.

하지만 누가 편리함에 가격을 매길 수 있겠습니까?