얼마 전 나는 Apple 컬렉션을 시작했습니다. 저는 십대 때부터 Apple 하드웨어(및 그 미학)를 따라왔지만 그 당시에는 Mac을 소유할 돈이 없었습니다.
나는 19살 때 처음으로 Mac을 얻었습니다. 그것은 iBook 700Mhz였으며, 브라질의 eBay와 같은 웹사이트에서 구입했습니다. 그 돈은 Flash 프로젝트에서 나왔습니다.
캐나다에서 몇 년 동안 살면서 취미 생활에 쓸 돈이 조금 생겼습니다. 대부분의 경우 Craigslist에 있는 사람들에게서 장치를 구입합니다.
몇 대의 랩톱과 iDevices를 사용한 후 iThings에 대한 정보 수집을 시작해야 한다고 결정했습니다. 처음에는 모델, 일련 번호, 장치를 얻은 방법, 최소/최대 OS 등을 포함하는 Gist를 만들었습니다.
목록은 점점 더 커지고 내용은 지저분해 보이기 시작했습니다. 웹사이트에 이 콘텐츠를 보여주는 것이 완벽할 것이라고 생각했고 개발자를 고용할 필요가 없었습니다 :D
처음에는 정보가 다른 열과 테이블에 분산되어 있는 SQL 데이터베이스에 데이터를 구성하기로 결정했습니다. 그 후, 저는 제 UI를 채우는 데 필요한 데이터를 제공하기 위해 graphQL API를 만들 것입니다. 아마도 React로 작성되고 Babel로 컴파일되고 Webpack으로 포장되었을 것입니다.
이전 단락을 소리 내어 읽으면 많은 기술이 있음을 알 수 있으며 SASS 또는 styled-components와 같은 백엔드 언어 및 UI 세부 정보도 무시했습니다. 내 궁극적인 목표가 멋진 디자인으로 항목 목록을 표시하는 것이었을 때 모든 것이 다소 압도적으로 들렸습니다.
즉, 다음 없이 이 콘텐츠를 전달할 수 있는 방법에 대해 생각했습니다.
- API 또는 백엔드 작업
- 모든 JS 프레임워크/라이브러리
- 모든 JS 도구(Webpack, Babel 등)
- 모든 CSS 작업
이러한 제약 외에도 몇 가지 확장 목표가 있었습니다.
- 접근성이 좋은 웹사이트 만들기
- Mac OS 9.2를 실행하는 컴퓨터와 iOS 3을 실행하는 iDevice가 있으므로 이전 브라우저에서 작동하는 웹사이트를 만드세요.
도전이 수락되었습니다. 하나의 index.html, 몇 개의 바닐라 JS 파일, 사용자 정의 CSS 없음. 사이트 구축 경험을 여러분과 공유하고 싶습니다.
TL,DR:
- 최종 웹사이트
- 소스 코드
제약 조건에 대해 하나씩 이야기해 보겠습니다.
API 또는 백엔드 작업 없음
얼마 전에 Stein이라는 SaaS 제품을 보았습니다. Google 스프레드시트 문서 내에서 데이터를 만들고 데이터가 있는 끝점을 제공합니다. 그들의 라이브러리는 핸들바처럼 작동하며 제 사용 사례에 완벽해 보였습니다.
<div data-stein-url="https://api.steinhq.com/v1/storages/5cc158079ec99a2f484dcb40/Sheet1" data-stein-limit="2">
<div>
<h1>{{title}}</h1>
<h6>By {{author}}</h6>
{{content}}
Read on <a href="{{link}}">Medium</a>
</div>
</div>
JS 프레임워크/라이브러리 및 도구 없음
사용 사례에 프레임워크나 라이브러리가 필요하지 않았기 때문에 이 프로젝트에 프레임워크나 라이브러리를 추가하지 않기로 결정했습니다. 이 페이지의 모든 JS 상호 작용은 매우 간단합니다(메뉴 표시/숨기기, 모달 화면 열기, 영구 링크 처리).
프레임워크/라이브러리를 사용하지 않았기 때문에 Webpack과 Babel을 추가하는 것을 피할 수 있었습니다. 사전 설정과 로더를 파헤칠 필요가 없습니다.
추신 내가 create-react-app 또는 Next.js를 선택하고 이 모든 문제를 해결할 수 있었다고 주장할 수 있지만, 그렇지 않습니다.
CSS 작업 없음
특히 SASS를 사용할 수 있을 때 CSS를 작성하는 것을 좋아하지만 여기에 CSS를 작성하지 않기로 결정했습니다. 그렇게 하지 말아야 할 몇 가지 이유가 있습니다.
- 디자인을 염두에 두지 않았고, 멋지게 보일 수 있음에도 불구하고 시간과 에너지를 투자하고 싶지 않았습니다.
- Tailwind CSS를 사용하고 싶었습니다.
Tailwind CSS에 대해 들어본 적이 없다면 "이것은 Bootstrap의 대안일 뿐"이라고 생각하지 마십시오. 다음은 웹사이트에서 가져온 좋은 간단한 설명입니다.
<블록 인용>
대부분의 CSS 프레임워크는 너무 많은 작업을 수행합니다.
…
사전 설계된 독창적인 구성 요소 대신 Tailwind는 HTML을 벗어나지 않고도 완전히 사용자 지정 디자인을 구축할 수 있는 저수준 유틸리티 클래스를 제공합니다.
이것은 거의 사실입니다. 빠른 검색을 통해 Tailwind CSS로 "재구축된" 많은 웹 앱을 얻을 수 있습니다.
- 왓츠앱
- 텔레그램
- 페이스북
- 레딧
- 유튜브
- 슬랙
- 코인베이스
- 깃허브
- 트렐로
- 트위터
- 넷플리파이
접근성이 좋은 웹사이트 만들기
지난 달에 Deque University에서 접근성 과정을 수강하기 시작했습니다. 콘텐츠가 훌륭하고 기본적으로 HTML에 액세스할 수 있음이 생각났습니다. . 시맨틱 HTML 구조를 사용하고 키보드 탐색 및 색상 대비와 같은 기본 사항을 테스트함으로써 장애가 있는 사람들을 콘텐츠에서 멀어지게 하는 여러 장벽을 제거할 수 있습니다.
저는 접근성 전문가는 아니지만 이 웹사이트에서 작업한 몇 가지 접근성 관련 작업을 소개합니다.
- 스타일시트 비활성화:스타일시트를 비활성화하면 콘텐츠가 논리적/구조적 방식을 따르도록 할 수 있습니다.
- VoiceOver:VoiceOver는 macOS 및 iOS에 포함되어 있습니다. 사용이 매우 간단하며 실험을 통해 사람들이 이 기능을 사용하는 방식을 더 잘 이해할 수 있습니다.
- 모달:모달은 문제가 될 수 있습니다. 나는 Ire Aderinokun의 접근 방식을 따르기로 결정했습니다.
- axe:확장 프로그램은 WCAG 2 및 섹션 508 접근성 규칙에 대한 접근성 검사기입니다.
완벽하지 않습니다. 기본 콘텐츠에 건너뛰기 링크를 추가하는 것과 같이 내 사이트에서 작업하지 않은 몇 가지 사항이 있습니다. 궁금하시다면 여기 모든 변경 사항이 포함된 풀 리퀘스트가 있습니다.
이전 브라우저에서 작동하는 웹사이트 만들기
스크립트와 스타일을 제어할 수 없었기 때문에 이 목표를 달성할 수 없었습니다. 그러나 불가능하지는 않은 것 같습니다. 내가 알아차린 몇 가지 사항:
- Expedite(Stein 클라이언트)는 Safari 10에만 추가된 fetch를 사용합니다. 서버에 대한 요청은 아마도 XMLHttpRequest로 대체될 수 있습니다.
- Tailwind는 많은 요소에서 Flexbox를 사용합니다. Safari는 iOS 7에서 Flexbox를 지원하기 시작했습니다. 보기 좋게 보기 위해 기존 요소에 대한 몇 가지 속성을 작성할 수 있습니다.
- SSL 인증서는 구형 브라우저에서 문제가 될 수 있습니다.
결론
이 웹사이트를 만드는 것은 매우 재미있었습니다. 이런 종류의 애완동물 프로젝트를 하는 것은 제 직업에서 사용하지 않는 기술과 함께 일할 좋은 이유가 되었습니다. 아마도 미래에는 Stein 및/또는 TailwindCSS가 기능을 프로토타입하거나 해커톤 프로젝트를 구축하는 데 유용할 것입니다.
내 프로젝트에 "제약"을 추가했다는 사실은 저를 상자 밖에서 생각하게 만들었습니다. 비록 모든 목표를 달성하지는 못했지만 모든 부분이 어떻게 연결되어 있는지에 대해 더 많이 이해하는 데 도움이 되었습니다.
다른 기술로 플레이할 수 있는 기회를 제공하기 위해 이와 같은 작업을 수행하는 것이 좋습니다. Apple 컬렉션일 필요는 없습니다. 좋아하는 책이나 최고의 하이킹을 나열하는 사이트를 만들 수 있습니다. 이 경우 목표보다 여정이 더 중요합니다.
호기심에 나는 Clockify를 사용하여 코딩, 데이터 생성, 테스트 및 이 게시물 작성 사이에 13시간 동안 작업한 시간을 추적했습니다.
내 블로그에도 게시되었습니다. Twitter에서 나를 팔로우하세요.