디자이너와 개발자를 위한 상위 15개 개발 가이드

개발자와 디자이너는 몇 가지 공통점이 있습니다. 둘 다 적어도 한 번은 서로 작업해야 하며, 특히 앱 및 프론트 엔드 웹 개발에 집중하는 사람들은 더욱 그렇습니다. 앱 디자인에서 타이포그래피를 사용하는 방법을 배우는 것이든 웹사이트를 구축해야 하는 장치의 종류를 결정하는 것이든 둘 다 여러 가지 방법으로 서로 배울 수 있습니다.

웹 디자이너는 디자인을 완벽하게 하기 위해 HTML5 및 CSS3와 같은 기술을 사용해야 하는 경우가 많으며, 개발자는 구축 중인 소프트웨어가 두 표준의 표준 요구 사항에 부합하는지 확인하기 위해 사용자 경험 및 사용자 인터페이스에 대해 더 많이 탐색하기를 원할 것입니다. 그리고 브라우저는 어떻습니까? 디자이너와 개발자 모두 브라우저에 크게 관여하며 해당 영역에 대한 지침과 통찰력을 얻는 데 도움이 됩니다.

다음 개발 가이드 리소스에서는 가장 널리 사용되는 스크립팅 언어의 기본 사항을 설명하고 사용 편의성 때문에 새로 선호하게 될 도구에 대해 설명합니다.

웹 표준 셰르파

웹은 큰 개념을 수반하므로 개발자 및/또는 디자이너의 관점에서 웹 작업 방법에 대한 좋은 콘텐츠를 찾기 어려울 수 있습니다. Web Standards Sherpa 리소스는 CSS, 디자인, 콘텐츠, JavaScript, 웹 성능, 웹용 구축의 비즈니스 측면에 대해 설명하는 기사 및 가이드 목록과 다른 많은 주제 및 카테고리 중에서 워크플로를 완벽하게 만드는 방법에 대한 팁입니다. 프론트 엔드 담당자로서 모범 사례가 필요한 경우 여기에서 얻을 수 있습니다.

UX 신화

UX Myths는 사용자 경험에 대한 잘못된 믿음을 폭로하고 독자들에게 앱, 웹사이트 및 소프트웨어에서 UX에 접근하는 방법에 대한 신선하고 통찰력 있는 관점을 얻을 수 있는 기회를 제공합니다. 각 요점은 철저하게 설명되고 반대 가능성을 보여주기 위해 많은 예가 제공됩니다.

오타 포켓 가이드

타이포그래피를 위한 이 포켓 가이드는 타이포그래피의 기술적인 부분과 내용을 배우고자 하는 디자이너에게 완벽한 동반자입니다. 이 특정 가이드는 대시, 아포스트로피, 서체, 글꼴 등의 기본 사항을 다룹니다.

웹 유형의 상태

타이포그래피는 항상 진화하지만 브라우저는 그렇지 않습니다. 이것은 때때로 우리가 각 브라우저에서 개별적으로 각 기능의 기능을 탐색해야 한다는 것을 의미하며, 이 리소스를 사용하면 특히 쉽습니다. 작업하려는 기능 유형을 선택하고 다양한 브라우저에서 해당 기능을 탐색하십시오.

쿼크 모드

QuirksMode는 인터넷의 브라우저 호환성 정보에 대한 놀라운 가이드입니다. 서면 콘텐츠의 형태로 많은 정보를 얻지는 못하지만 웹용으로 개발할 때 배우는 데 유용할 수 있는 많은 사실이 있습니다. 호환성 표를 통해 누구나 JavaScript, CSS 및 HTML과 같은 기술의 브라우저 기능을 탐색할 수 있습니다.

포토샵 에티켓

Photoshop은 의심할 여지 없이 디자이너들 사이에서 가장 인기 있는 그래픽 디자인 도구이며, 지난 몇 년 동안 Photoshop을 사용해 왔다 하더라도 항상 배우고 탐색할 새로운 것이 있습니다. Photoshop 에티켓 가이드는 레이어, 효과 및 디자인 품질과 같은 영역을 포함하여 Photoshop 모범 사례의 여러 측면에 대해 설명하는 6장 가이드입니다. 모든 챕터의 크기가 적당하므로 새로운 것을 배우는 데 몇 시간씩 걸리지 않을 것입니다.

나의 기기

장치의 화면 해상도 크기를 찾는 데 문제가 있습니까? 이 작은 플랫폼은 장치 크기와 브라우저에서 실행할 수 있는 기능의 종류에 대해 알아야 할 모든 세부 정보를 정확하게 알려줍니다. 끊임없이 이동하는 개발자에게 적합합니다.

화면 크기

화면 크기는 다른 접근 방식을 취하고 대신 다른 화면 크기, 운영 체제 및 고유한 종횡비에 대한 하드 데이터를 출력합니다. 오른쪽 모서리에 있는 개별 아이콘을 클릭하면 태블릿과 컴퓨터에 대해 동일한 정보를 볼 수 있습니다. 웹 디자이너와 웹 개발자 모두에게 잘 작동합니다.

기기 측정항목

Google의 Device Metrics는 위의 두 사이트와 유사하지만 목록에 더 많은 장치를 추가하고 각 장치에 대한 몇 가지 중요한 개발 정보를 간략하게 설명합니다. 앱과 웹사이트를 구축하려는 기기의 종류를 알고 있다면 이 정보를 아는 것이 중요할 수 있습니다.

개발 도구의 비밀

오늘날 각 브라우저에는 개발자 도구라는 것이 미리 구축되어 있습니다. 누구나 개발자의 관점에서 각 웹사이트를 탐색할 수 있는 별도의 브라우저용 콘솔 패널입니다. JavaScript 콘솔을 사용하여 사용자 정의 클라이언트 측 코드를 실행할 수 있고, 웹 사이트 구조의 요소를 검사하고, 네트워크 및 파일 활동을 모니터링하는 등의 작업을 수행할 수 있습니다. 각 브라우저 개발자 도구는 다르며 이 리소스는 즐겨 사용하는 브라우저의 개발자 도구를 최대한 활용하는 방법에 대한 특정 기사 및 자습서 목록입니다.

CSS 지침

CSS는 웹의 코팅입니다. CSS가 없으면 웹은 알몸이 됩니다. 마치 우리 인간이 옷이 없는 것처럼 말입니다. 그리고 우리 주변에는 CSS가 너무 많기 때문에 웹에 게시하는 CSS가 최신 표준에 따라 최적화되고 최적화되도록 보장하는 매우 실용적인 기본 사항과 표준 규정을 이해하는 것이 중요합니다.

이 특정 스타일 가이드는 스타일 가이드가 아니라 표준화된 CSS가 작동하는 방식과 개발자와 디자이너가 생성하는 CSS가 가능한 한 최고의 품질이 되도록 하기 위해 다르게 할 수 있는 방법에 대한 통찰력을 제공하여 훨씬 쉽게 제작할 수 있도록 합니다. 대규모 유지뿐만 아니라.

CSS 치트 시트

CSS는 거대한 스크립팅 언어이며 매년 계속 성장하고 있습니다. 때때로 상황의 흐름 속에서 우리는 언어의 아주 기본적인 구문을 잊어버릴 수 있습니다. 이 CSS 치트 시트와 같은 사이트는 실제로 유용할 수 있으며, 한 번만 북마크하면 언제든지 돌아올 수 있습니다. 초보자에게 적극 권장됩니다.

브라우저 해킹

프론트 엔드 웹 개발자는 브라우저에서 실험, 코드 실행, 수정 등 많은 시간을 보내고 각 개발자가 수년에 걸쳐 발전함에 따라 누구나 쉽게 사용할 수 있는 흥미로운 스니펫과 트릭을 남겼습니다. 그들의 개발 워크플로. 미디어 쿼리에 대한 핵, 선택기 핵, 그리고 즐겨 사용하는 모든 브라우저에 대한 멋진 JavaScript 핵에 대해 알아보십시오. GitHub pull 요청을 사용하여 자신만의 팁과 트릭을 공유할 수도 있습니다.

브라우저 다이어트

웹 개발의 현재 추세는 성능에 관한 것입니다. 품질을 잃지 않고 가능한 최상의 성능을 위해 최적화하는 방법. 이것이 바로 브라우저 다이어트 가이드의 모든 것입니다. 웹에 최적화하는 방법입니다. 타협 없이 변경되거나 완전히 제거될 수 있는 다양한 JavaScript, HTML 및 CSS 기능을 문서화한 통찰력 있는 팁 및 경험 보고서 목록입니다.

&뭐라고 요;

amp-30,000개 이상의 HTML 문자 엔티티 및 일반 유니코드 문자, 8859-1 문자, 따옴표, 구두점, 악센트가 있는 문자, 기호, 수학 기호 및 그리스 문자, 아이콘 및 마크업에 중요한 & 국제화 문자. 작동 방식은 웹 사이트 상단의 로드 버튼을 클릭한 다음 검색 기능을 사용하여 프로젝트 또는 사용하려는 다른 곳에서 사용하려는 문자 종류를 찾는 것입니다. 앱과 디자인에 활기를 불어넣을 수 있는 고유한 아이콘과 캐릭터를 가지고 몇 시간을 보낼 수 있는 방대한 리소스입니다.