나는 이 프로젝트가 매우 마음에 들며, 소스 코드를 보니 바닐라 JS로 코딩하고 있는 것이 멋지다고 생각함. 요즘은 라이브러리나 프레임워크 없이도 상호작용 웹 앱을 얼마나 많이 만들 수 있는지 과소평가되고 있음
나도 단일 HTML 페이지로 간단한 로컬 웹 앱을 만드는 아이디어를 정말 좋아함. 얼마 전 아이와 과학 박물관을 방문하여 간단한 스톱 모션 애니메이터를 사용해 보았음. 그와 같은 웹 앱을 만들기로 결심하고 단일 HTML 페이지로 만들어 아이의 노트북에 복사하여 인터넷 없이 사용할 수 있게 했음. 나는 바닐라 JS를 작성하기 귀찮아서 React와 번들러를 사용했음. 그것은 단일 HTML 파일로 번들링됨. 언젠가 Show HN에 게시할지도 모름
많은 무거운 작업이 이 간단하지만 강력한 속성에 의해 수행됨. 놀랍게도 많은 개발자들이 이 속성을 잘 모르는 것 같음. 꽤 오래전부터 존재해 왔음
<div id="editor" contenteditable="true">
훌륭한 작업임
페이지가 로컬 디스크에서 브라우저로 열릴 때 자동으로 편집 모드로 열리도록 하고, 누군가의 웹사이트에 게시되어 열린 웹에서 접근할 때는 일반적인 읽기 전용 보기로 변경하는 것을 고려해 보길 바람 (주소가 http/https인지 확인)
물론:
이를 무시할 수 있는 방법이 있어야 함 (쿼리 문자열 매개변수나 마법의 URL 조각) 그래서 편집 모드로도 볼 수 있어야 함
특정 도메인/URL 접두사에 대한 예외가 있어야 함—기본적으로 keepworking.github.io (또는 https://keepworking.github.io/nash/)—그래서 그 사이트에서도 편집 모드가 활성화됨. 이는 개인적으로 데모를 작동시키기 위해 특별한 작업을 할 필요가 없음을 의미함 (이 예외는 사용자 수정 가능해야 함. 그래서 다른 사람도 #1의 트릭을 사용하지 않고 동일한 동작을 얻을 수 있음)
이것은 멋짐. 우리는 (또는 아마도 나만) 웹사이트의 JS 부분을 실제 HTML 외부에서 작성하는 것에 익숙해져 있어서, 이것을 보고 "와우, 이것이 단지 HTML로만 가능하다는 것이 미쳤다"라고 생각했음. 그리고 소스를 보고 모든 JS가 오래된 스크립트 태그에 있는 것을 보고 그것이 가능한 일이라는 것을 다시 기억하게 됨
Hacker News 의견
<div id="editor" contenteditable="true">onbeforeunload핸들러를 추가하는 것을 고려해 보길 바람