첫 번째 프런트엔드 - 문서 편~

"PORT" 추가 캘린더 첫날.
전 엔지니어 후쿠다입니다.
취미는 느슨한 캔버스, 사진, 자전거, 스케이트보드 등이다.나는 캠핑 출발 당일 아침에 급하게 쓴 것이 생각났다.

TL;DR

회사 내 엔지니어와 졸업생을 대상으로 "추천하는 전위 기술 서적이 있습니까?"할 때, 우선 당신에게 줄 명세서입니다.
질문을 받으면'요즘 책을 안 읽었구나'싶을 거예요.갑자기 떠오르는 건 아마 CSS 비밀 혹은 사스의 교과서일 거예요.틀의 HowTo 같은 것은 우선 정부의 강좌를 접해야 한다고 생각합니다.기본적으로 스타일MDN을 확인하시면 됩니다.하고 싶은 거 알고 조사하고 싶은 거면 충분하지...
따라서 어디서부터 손을 대야 할지 모르는 초보자에게는 먼저 전체 리스트를 망라(수시 업데이트)했다.그게 이거야.

일반

HTML, CSS, JS 주위의 문서는 MDN으로 찾는 습관을 기르는 것이 좋다.
그래도 최소한 2년은 걸러야 한다(웹의 진화는 빠르다!)
개인 블로그의 보도는 참고로 입장이 어떤 사람이 쓰는지 주의하세요.
MDN Web Doc
Mozilla 공식 참고집.웹의 공개 규격의 문서가 이곳에 모여있기 때문에 마음에 들면 이곳에서 검색할 수 있다.
Web Fundamentals
Google의 주장을 요약한 참조 모음
액세스 가능성, 이미지 압축, 애니메이션, 성능, SEO, 보안...etc
Can I use...
브라우저별 지원 웹 사이트를 탐색할 수 있습니다.auto-Prefixer 등에도 사용된다.

HTML

<div> 이외의 표기를 잘 사용해서 의미 있는 표기를 하세요.
파일의 의미를 잘 고려하면 최소한의 기능성과 가용성을 확보해야 한다.
모두가 좋아하는 SEO(Seo)의 간섭을 막기 위해 반드시 습득해야 할 지식.
HTML5 문서의 영역 및 아웃라인
구조화의 기본.먼저 컨투어부터 시작합니다.이해가 된다면 말뜻대로 진행됐으면 좋겠어요.
일반 HTML 쓰기
롱아일랜드 선생과 문도 선생을 중심으로 추진된 HTML 모범 사례.대체로 옳기 때문에 좌우가 모두 불분명할 때는 뇌사로 따르는 게 좋다.
Google Developer Documentation Style Guide Google이 실제로 사용하는 공식 스타일 가이드문장의 장르와 인용부호의 사용 방법은 주요하지만 HTML 주위의 항목도 있다.
HTML의 일본어 번역
HTML5 이후의 HTML 규격은 각각 W3C와 WHATWG로 미묘한 차이가 있다.기존의 W3C는 WHATWG의 동작을 따라가지 못했고, WHATWG는 설치를 담당하는 브라우저 단체여서 참고로 여기에 두어야 한다.

CSS

CSS 주위는 BEM, 모듈 디자인 등 방법론에 자주 현혹된다. 어쨌든 처음과 끝이 일치하면 되기 때문에 린은 매우 중요하다.이름은 고육계이지 은탄이 아니다.
상세도 - MDN
간결한 선택의 이유.BEM이나 FLOCSS라는 이름으로 해결하고 싶은 이유라면서 Sass의 네스트를 얕게 해야 한다.
position - MDN
상대적 구성과 절대적 구성(기준 상자)의 차이는 항상 사용하면 오류가 발생하기 쉽다고 생각하는 주의점이다.
Idiomatic CSS
일관된 기술 방침.아이디오매틱(상습적인) 어감처럼 업계 표준의 규칙이 모여있기 때문에 이를 훑어본 뒤 추가stylelint-config-standard하면 된다.일본어 번역도 있는데 업데이트가 안 돼서 영어판을 추천합니다.
공룡을 가르치는 현대 CSS – Part1
공룡을 가르치는 현대 CSS – Part2
공룡을 가르치는 현대 CSS – Part3
역사의 상하문으로 현대 CSS의 변천을 설명하였다.인라인 CSS, 프리 프로세서, BEM을 대표하는 디자인 방법 등.
INTRODUCTION TO CSS GRID LAYOUT
명확한 CSS Grid
Front-end Job Interview Questions CSS Questions의 응답 세트
뒤에 또 다른 분이 ver 답변을 해주셨어요.

JS

JS 주변에서는 상세히 쓰는 것보다 실행 시기(load와 DOM ContentLoaded의 차별화 사용 등), 요소의 획득 방법을 따른다.
어 교과서 자바스크립트 편.
초보자가 처음 읽으면 좋은 녀석.간단한 JQuery 표기법이 있어 중급자 이상도 먼저 볼 수 있다.
js-primer
Jser.info의 사이트도 azu씨의 핵심으로 진행된 온라인 문서[WIP]
clean-code-javascript
Google 엔지니어의 Best Pactice 집합
RunKit
코드 슬라이스에서 디버깅하는 동안 Protoype을 만드는 목적은 무엇입니까
JavaScript Promise의 책
JavaScript의 Promise: 개요
ES6 사양에는 특별히 직관적인 Promise 요약이 없습니다.
Airbnb JavaScript Style Guide() {
아마도 세계에서 가장 많이 사용되는 JS 규칙일 겁니다.규칙의 의미를 잘 설명하는 점에서 매우 귀중하다.

SEO

SEO와 관련된 도시 전설이 많은데 공식적인 첫 번째 정보만 참고하고 기본적으로 HTML 규격을 따라야 한다.
업자 블로그는 그들이 시행착오를 일으킨 결과로, 지금은 단지 정확해 보일 뿐, 5분 후에는 날아갈 수도 있다.그리고 D와 SEO점이 잘 말하지 않는'구글의 친구가 말한 것'도 주의해야 한다.Google은 그 자체가 거대한 조직이기 때문에 그 안에 있는 사람들도 많다.그 사람이 어떤 입장에서
Google 웹 스타를 위한 공식 블로그
T/O
해외 SEO 정보 블로그
Google의 공식 방송 및 SEO 담당자의 의견은 일본어로 빠르게 귀결되는 블로그로 번역됩니다.
구글 사이트 도움말 포럼
정부 도움 포럼.어쨌든 일단 여기서 검색을 해보면 될 것 같습니다.
GoogleSearch > Structure Data > Feature Guide > Breadcrumbs
Google의 공식적인 구조적 표시 가이드보조 기능이라기보다는 입체적인 반려동물을 상대하기 위해 UI의 표기법을 몇 개 적었다.단지 힌트일 뿐, 반드시 반영될 수 있는 것은 아니다.검사는 Google 구조화된 데이터 테스트 도구에서 진행된다.

보조 기능

표기가 적절하면 어느 정도 보조력을 확보했다는 입장에선 초~단계에서 작은 테크닉에 너무 의존해서는 안 되지만.키보드 형식으로 조작하는 것은 만인이 사용하는 것이기 때문에 거기서 조금씩 배우면 된다.
HTML5 Accessibility
주요 브라우저의 가용성 실현 상황을 보여 줍니다.
Inclusive Components
잉크 소스 HTML+CSS & JavaScript 의 저자인 Heydon Pickering이 정리한 그래픽 라이브러리입니다.영어지만 실제 상황은 적어 참고할 만하다.책도 좋은 책이라 읽을 수 있다. 고속화 사이트의 고속화는 주로 자산 분배이기 때문에 단독으로 전단을 사용할 수 있는 경우는 드물다...나도 이런 시절이 있었다.요즘은 ServiceWorker나 prefetch 같은 열풍이 불고 있습니다.1차~등급이면 JS의 논리적 변경 속도가 크게 달라질 것 같다.특히 애니메이션.요소의 취득과 처리 순서, 사건의 접착 방법 등. 컨텐츠 효율성 최적화
JavaScript 실행 속도
번역을 조금 따라잡지 못하긴 하지만 구글이 공개한 통합 문서는 소중하기 때문에 PageSpeed Insights를 신경 쓰면 한번 보는 게 좋다.
Webpagetest에서 시작하여 지속적인 성능 개선
처음이라고~ 너무 프로답겠지만 신자료니까 꼭 봐주세요.
PageSpeed Insights
오랫동안 시장 부문의 KPI 기준이 이렇듯 고통스러웠지만 최근 내용이 Lighthouse로 바뀌면서 평가가 완전히 바뀌었다.순수한 속도를 볼 수 있어서 좋아요.

WordPress

WordPress에서의 디버깅

Developer Resources: Dashicons

WP-CLI Commands

동작 갈고리 목록

편리한 도구

Flexbox Properties Demonstration
CodePen 데모Flexbox의 속성을 가지고 각종 테스트를 할 수 있습니다.속성을 잊을 때 그런 거.
IcoMoon
여러 아이콘 글꼴을 통합하거나 SVG에서 웹 글꼴로 변환할 수 있는 생성기입니다.
Icons - Material Design
Material Design의 무료 공개 아이콘입니다.Apache license version 2.0.
HTML Entities
Character Entities
Unicode Characters
문자 인코딩 주위.CSS의 콘텐츠에 그림을 사용하지 않고 아이콘을 꺼내려고 할 때.

Conclusion

너는 영어에 익숙해질 수 있다.
본문을 읽지 않아도 코드를 읽어도 대체로 알 수 있다!들을 필요도 없고 말할 필요도 없어!