▲

GN⁺: 리액티브 HTML 노트북

 (maxbo.me)
1P by neo 9일전 | favorite | 댓글 1개

  • 반응형 HTML 노트북

    • HTML을 과학 출판 플랫폼으로 활용하는 것의 중요성을 강조함.
    • HTML 파일을 데이터 탐색, 분석, 시각화, 출판의 모든 단계에서 사용할 수 있는 가능성을 제시함.
    • 기존의 다양한 도구와 플랫폼을 사용하는 대신, HTML을 통해 통합된 작업 흐름을 제공할 수 있음.

  • 셀

    • CSS 클래스 echo를 사용하여 스타일과 스크립트 요소를 인라인으로 표시하는 방법을 설명함.
    • contenteditable 속성을 사용하여 기본 코드 편집기를 생성함.
    • 스크립트가 blur 이벤트에서 다시 평가되도록 설정함.

  • Observable 라이브러리 및 런타임

    • Observable 표준 라이브러리와 런타임을 가져와 window에 바인딩함.
    • cell 함수를 통해 셀을 정의하고, Observable Inspector를 사용하여 셀의 출력을 표시함.

  • 셀 예제

    • counter 셀을 선언하여 매초 숫자를 출력함.
    • fizzbuzz 셀을 생성하여 counter 값에 따라 다른 출력을 생성함.
    • silent 함수를 사용하여 출력을 표시하지 않는 셀을 생성함.

  • 복잡한 출력

    • Hypertext Literal을 사용하여 counter 값을 포맷함.
    • Observable Plot을 사용하여 counter 값을 플롯에 사용함.

  • TeX, Markdown, Graphviz

    • 셀에서 DOM 요소를 반환하여 다양한 형식의 출력을 생성함.
    • TeX, Markdown, Graphviz를 사용하여 수식, 표, 그래프를 생성함.

  • 셀 상태

    • 셀에서 Promise 또는 Error를 반환할 수 있으며, Observable의 Inspector가 셀의 외부 div 요소에 클래스를 적용함.

  • SQLite

    • WASM 기반 SQLite 클라이언트를 사용하여 데이터베이스 쿼리를 수행함.
    • SQL 쿼리를 통해 트랙 길이 분포를 시각화함.

  • Python 및 R

    • Pyodide와 WebR을 사용하여 Python과 R 코드를 실행하고, 시각화를 생성함.
    • Python의 sqlite3 모듈과 Matplotlib을 사용하여 플롯을 생성함.

  • 입력

    • Observable Inputs를 사용하여 입력을 생성하고, 셀과 연결함.
    • viewof 함수를 사용하여 입력 요소를 셀 위에 표시함.

  • 가변성

    • mutable 함수를 사용하여 상태를 변경할 수 있는 객체를 생성함.
    • 상태가 변경될 때마다 새로운 Generator 값을 생성함.

  • 향후 계획

    • 모든 내용을 라이브러리로 통합하고 적절한 문서를 제공할 계획임.
    • 라이브러리 이름은 @celine/celine으로 결정됨.

  • 슬라이드 인프라

    • 문서를 슬라이드쇼로 변환하는 코드를 제공함.
    • 키보드 단축키를 사용하여 슬라이드를 탐색할 수 있음.
▲
neo 9일전  [-]
Hacker News 의견

  • HTML이 계산 노트북의 훌륭한 기초가 될 수 있다는 기사에 동의함. 그러나 구현 방식은 마음에 들지 않음. Observable은 멋지지만 표준 JS에서 벗어남. Heximal이라는 반응형 HTML 시스템을 개발 중이며, 이는 HTML 템플릿과 사용자 정의 요소를 기반으로 함.

    • Heximal은 HTMX, Tangle, Curvenote, Polymer의 혼합물과 같음. 그래픽 편집과 노트북 사용자 사례에 잘 맞을 것임.

  • 이 접근 방식의 사용성은 끔찍하다고 생각함. 탐색적 데이터 분석을 할 때 스타일 요소에 신경 쓸 이유가 없음. Jupyter 노트북이 뛰어난 이유임. 그래도 호기심과 대안 아이디어 구현에 대한 찬사를 보냄.

  • Python과 SQLite 데모가 특히 인상적임. 웹을 통한 편집 루프를 시작한 점이 흥미로움. 지속성 문제는 TidlyWiki와 유사하며, 파일 시스템을 사용해 문제를 피할 수 있음. 내장 스크립트에서 내보내기를 할 수 없는 점은 개선이 필요함.

  • Raku에서 HTML 노트북을 지원하려는 시도를 곧 할 예정임. 현재 Raku의 노트북 솔루션은 Jupyter 또는 Mathematica 기반임.

  • 이 게시물의 형식이 마음에 듦. 많은 종속성과 프레임워크 없이 흥미로운 결과로 이어짐. 주어진 코드 조각을 복사하여 단계별로 이해할 수 있음. 문서화된 프로그래밍을 사용하여 HTML로 내보내 블로그 게시물을 작성할 것임.

  • 반응형 HTML이지만 거의 전적으로 JavaScript인 것 같음.

  • pyodide 편집을 시도했으나 휴대폰에서 충돌하고 페이지가 다시 로드됨.

  • 작성자가 질문을 받을 준비가 되어 있음.

  • Raku 코드 예제를 호스팅하고 문서화된 프로그래밍을 위해 유사한 것을 구축하려고 함. Jupyter Chatbooks의 Raku 플러그인이 있지만 Python을 필요로 하는 것이 부자연스러움. 서버 측 코드를 사용하여 원격 언어 커널에 연결할 수 있는 메시지 레이어가 있으면 좋겠음.

  • Windows XP 공룡 커서가 많은 추억을 떠올리게 함.

답변달기