내 사이트를 재설계하면서 배운 경험과 교훈

몇 달 전에 업데이트하기로 했습니다https://www.danvega.dev.나는 보통 몇 년마다 이런 느낌을 가지지만 이번에는 다르다.나는 그것의 외관과 느낌을 좋아하지만, 내가 개선하고 싶은 일련의 점이 있다.

영역 개선

설계

CSS 프레임워크 삭제

홈 레이아웃

암흑 모드

응답 설계

등대 득점

설계

나는 디자이너가 아니지만, 나는 때때로 이 모자를 쓰고 내가 디자이너인 척하는 것을 좋아한다.나는 Adobe XD에 끌렸고, 최근에 나는 많은 항목에서 그것을 사용했다.나는 그것이 매우 사용하기 쉽고 응용 프로그램의 원형을 신속하게 만들 수 있다는 것을 발견했다.일단 내가 좋아하는 것이 생기면 색깔, 글씨체, 자원을 쉽게 파악하고 HTML과 CSS로 디자인을 구축할 수 있다.다음은 몇 달 전에 내가 사이트를 재설계하기로 결정했을 때의 그림판들이다.

얻은 교훈

앉아서 디자인을 생각해 내는 것은 별도의 일인 것 같지만, 장기적으로는 가치가 있다.내가 무엇을 구축해야 하는지 알았을 때, 나는 개발에 걸리는 시간이 매우 적었다.디자인을 보면 어떤 내용이 필요한지 알기 때문에 저는 HTML 구조부터 시작합니다.내 내용과 의미 구조가 자리를 잡은 후에 나는 CSS를 사용하여 나의 외관과 느낌을 나의 디자인과 일치하게 했다.

CSS 프레임워크 삭제

내 사이트의 이전 버전은 Bulma라는 CSS 프레임워크를 사용했다.똑똑히 말해야겠어. 난 부르마에게 절대 나쁠 게 없어.Tailwind CSS Bulma라는 이름이 없는 CSS 프레임워크를 선택해야 한다면 선택하겠습니다.내가 Bluma를 사용하기 시작했을 때, 나는 그것을 몰랐다. 이것은 나에게 많은 문제를 가져왔다.게다가 CSS 기초 지식이 부족하다면, 나의 코드 라이브러리는 상당히 혼란스럽다.
이제 CSS의 레이아웃과 어떻게 서로 다른 디자인을 완성하는지 알게 되었고 구성 요소를 바탕으로 하는 프레임워크의 쓸모가 크지 않다는 것을 알게 되었다.지난 몇 년 동안 나의 전단 기술이 향상되었는데, 나는 이것이 그것들을 사용하기에 매우 좋은 시간이라고 생각한다.나의 재설계는 각종 도구를 사용하여 전단 개발을 매우 재미있게 했다

CSS 변수

Flexbox

CSS 메쉬

응답 설계

얻은 교훈

HTML 및 CSS의 기초를 학습합니다.나는 이미 사이트를 설립한 지 20여 년이 되었는데, 지난 5년 동안 많은 변화가 생겼다.나는 다른 개발자들도 이렇게 말하는 것을 자주 들었다. 그들은 이미 오랫동안 해 왔다.Flexbox와 CSS 격자 같은 현대 기술을 배우는 것은 모두 훌륭하고 사용하기에 정말 즐겁다.

홈 레이아웃

나의 이전 홈페이지는 정말 지루했다. 나는 단지 그것에 스타일을 추가하고 싶었을 뿐이다.나는 다른 디자인을 하기 시작했다. 항상 나로 하여금 매우 멋있다고 느끼게 하는 것이 하나 있다. 그것은 바로 약간의 파도나 대각선 디자인의 구조이다.나는 홈페이지에서 웨이브를 제기했는데, 지금은 그것을 실시할 때가 되었다.
나는 스스로 이 문제를 해결하려고 시도했지만, 몇 차례 실패했다.XD에서 내보낸 이미지를 배경 이미지로 사용하려고 했지만 응답이 없고 어두운 모드에서 잘 작동하지 않습니다.마지막으로 나는 발굴을 좀 해서 이것great tutorial by Richard Zimerman을 발견했다.

경험과 교훈

여기서 기술은 SVG를 사용하여 display:block로 설정하는 것입니다.나는 SVG 이미지를 사용하는 것이 아직 낯설지만, 그것들이 정말 유용하다는 것을 발견했다.이 예에서 저는 CSS 사용자 정의 속성을 SVG와 결합시켰습니다. 현재 저는 홈페이지의 제목이 생겼습니다. 이것은 보기에 좋고 응답이 빠르며 어두운 모드에서 보기 좋습니다!

.wave-container {
  position: relative;
  background: var(--home-header-background);
  color: #4a4a4a;
  overflow: hidden;
}
.wave-container > svg {
  display: block;
}

암흑 모드

나는 줄곧 나의 사이트에 어두운 패턴이 있다는 생각을 매우 좋아했다.나는 나의 독자가 얼마나 요구하는지 모르겠지만, 이것은 나의 사이트이며, 나는 그것을 추가하고 싶다🤷‍♂️. 나는 이전에 CSS 사용자 정의 속성(변수)을 사용한 적이 있지만, 이렇게 대규모적이지는 않을 것이다.그 작업 방식은 :root 에 사용자 정의 속성을 설정하는 것입니다. 이것은 기본 조명 테마가 될 것입니다.생성한 각 속성에 대해서도 짙은 색 테마 속성을 생성합니다.

:root {
  --background: white;
}

[data-theme="dark"] {
  --background: black;
}

이제 CSS에서는 배경색을 흰색이나 검은색으로 설정하는 대신 사용자 정의 속성을 참조합니다.

body {
  margin: 0;
  padding: 0;
  background-color: var(--background);
  border-top: 8px solid var(--bright-blue);
  font-family: "Roboto Slab", serif;
}

다음은 글꼴 Awesome을 사용하여 아이콘을 설정합니다. 기본적으로 달이 표시됩니다.이 아이콘을 눌렀을 때 어두운 모드를 사용하고 있습니다.사용자 정의 JavaScript 한 점이 data-theme 를 짙은 색으로 설정합니다.

if (document.documentElement.getAttribute("data-theme") === null) {
  document.documentElement.setAttribute("data-theme", "dark");
}

경험과 교훈

만약 네가 어둠의 패턴 같은 것을 실현하려면 처음부터 해야 한다.만약 당신이 CSS 속성을 사용하지 않는 곳에서 색을 정의하는 것을 발견한다면, 이렇게 하는 것을 고려해야 할 수도 있습니다.이것은 내가 돌아가서 해결해야 할 문제다.나는 내가 너무 많은 속성을 정의해서 농축할 수 있다고 생각한다.

응답성 설계

나는 나 자신과 나의 관중들이 모두 각종 형식에서 나의 사이트를 사용하기 때문에 나의 디자인이 호응성을 확보하는 것이 매우 중요하다는 것을 안다.XD 디자인에서 알 수 있듯이 나는 이동을 우선시하는 방법이 없다. 이것은 나에게 약간의 문제를 가져왔다.레이아웃이나 디자인 요소가 어떻게 확대되거나 축소될지 시종 생각하는 것이 중요하다.Flexbox와 CSS Grid 같은 도구들이 응답성 디자인을 만드는 데 정말 도움이 되어 주셔서 감사합니다.

경험과 교훈

Adobe XD에서 레이아웃을 설계할 때 설계에 응답할 계획이 있는지 확인해야 합니다.'이동 우선'이라는 단어는 당신의 배치가 이동 배치에서 시작하여 위로 확장된다는 것을 의미한다.이는 모바일 디자인이 사후에만 고려되는 것이 아니라는 것을 확보했다.방문자가 사용하는 장치를 파악하기 위해 분석을 보는 데 시간이 좀 걸립니다.

등대 감사

나는 내가 내 사이트를 완성하면 Lighthouse Audits을 보고 점수를 높이려고 노력할 수 있다는 것을 안다.Google Developer Tools에 Audits라는 탭이 있는지 모르는 경우 웹 사이트를 확인할 수 있습니다.

성능

액세스 가능성

모범 사례

검색 엔진 최적화

현재 이 사이트는 일부 페이지에서 좋은 모습을 보이고 있지만, 다른 페이지에서는 여전히 약간의 업무가 필요하다.나의 건의는 이 회계 감사들이 당신의 사이트를 개선하도록 유도하는 것이지만, 그것들에 빠지지 않도록 하는 것이다.

경험과 교훈

내가 여기서 배운 첫 번째 중요한 교훈은 <10개의 아이콘을 전체 글꼴 라이브러리에 끌어들이는 것은 매우 큰 금기이다. 내 말은, 나는 이 점을 알고 있지만, 나는 이 문제를 해결할 방법을 찾아야 한다는 것이다. 감사는 나에게 매우 큰 격려를 주었다.나는 단지 내가 필요로 하는 아이콘을 잡고 싶을 뿐이다. 그러나 만약 내가 미래에 더 많이 사용하고 싶다면 무슨 일이 일어날까?제가 필요로 하는 아이콘을 도입하는 방법이 있어야 합니다. Gridsome 문서 덕분에 저는 Vue에서 좋은 글꼴library from Fort Awesome을 사용했습니다.
나는 여전히 해야 할 일이 좀 있지만, 그것에 푹 빠지지 않고 내 건의를 받아들여 보려고 한다.나는 진정으로 나를 도울 수 있는 두 가지 일이 있다고 생각한다.현재 홈페이지에서 최근 게시물의 모든 사진은 GraphQL에서 나온 것입니다.크기를 조정할 수 있는 방법이 하나 있지만, <g-image> 표시를 사용할 때와는 달리 게으르게 그림을 불러오는 것이 아니기 때문에 해결 방법을 찾아야 합니다.또 다른 문제는 나의 모든 ConvertKit 폼이 자바스크립트를 통해 들어왔다는 것이다.나는 단지 스스로 이 폼들을 만들고 싶을 뿐이다. 이렇게 하면 나는 그것들이 접근할 수 있는 것을 확보할 수 있을 뿐만 아니라, 페이지의 무게도 줄일 수 있다.

결론

나는 나의 사이트를 새롭게 디자인하는 과정에서 많은 즐거움을 얻었고, 나는 그것이 나타날 수 있기를 바란다.만약 당신이 내가 여기서 한 어떤 일에 대해 의문이 있다면, 여기서 보십시오source code.만약 제가 어떤 일을 더 상세하게 설명하기를 원한다면, 아래에 저에게 메시지를 남기거나 연락 주세요.