Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/earizon/single-page-book

Pragmatical way to create cheat-sheets, bookmarks, full-books in a single page. (Zettlekasten the web!)
https://github.com/earizon/single-page-book

cms learning mindmap notebooks notes wiki zettelkasten

Last synced: 4 days ago
JSON representation

Pragmatical way to create cheat-sheets, bookmarks, full-books in a single page. (Zettlekasten the web!)

Awesome Lists containing this project

README 

        



   



h1, h2, h3, body { font-family: sans-serif; /*text-shadow: 0px 0px 1px #555;*/ line-height:1.4; 

}

body { 

  max-width: 50em;

  margin-left:3%;

  padding-left:1rem;

  padding-right:1rem;

  padding-top:1rem;

  box-shadow: -10px 0px 10px 10px #aaaaaa; 

}

*[green] {background-color: #AFA; text-align:center; }

*[red]   {background-color: #FAA; text-align:center; }

td { width: 10em; }

pre { font-size: 1.2em; }



function onPageLoaded() {

  const html = '' 

      + '<image style="height:0; width:0; size:0;" '

      + ' src="http://www.oficina24x7.com/visited/'+escape(document.location)+'" ></image>'

  document.getElementById("afterEndMark").insertAdjacentHTML('afterend', html)

}

window.addEventListener('load', onPageLoaded )





    





About SPB 


    

        
  • SPB stands for Single Page Book. It aims at unifying books,

           mind-maps, cheat-sheet contents creation in a single web page

           that can be created and updated "a la Zettelkasten" 

           

             1,

             2

               

            in order to keep notes organized and improving throughout years/decades.
    

           
    

            As an indirect (not initially planned) consequence, it also provides for

            a light-weight alternative to Content Management Systems (WordPress, Confluence, Plone,

            Sharepoint, ...) and Project tracking systems ("Jira", "Bugzilla", ...).    

           
    

        
    • 

        
  • SPB offers a pragmatical replacement for "heavy-weight"

           Content Management Systems running on complex server setups,

           by using just pure HTML/CSS consumed by web-browsers running

           on a laptop or mobile.

        
    • 

        
  • Content data is moved from "always online" databases

          to plain safe HTML files easy to manage and backup without

          complex IT administration skills.

        
    • 

        
  • Extra information about How SPB compares with some other content 

            publication and management tools can be read here.

        
    • 






    SPB promotes a "best-patterns" approach to  Documentation by:

    
    

          
  •  ✓ Putting related info close to each other.
    • 

          
  •  ✓ Don't repeat twice. 
    • 

          
  •  ✓ Use your hard disk to save classified information, not documents:
    

              Don't keep information spread ("hidden" or "lost") amongst hundred of emails,

              posts, chats, words, custom databases, excels and binary files of

              random nature. Internet standard Hypertext Markup Language (HTML) and a

              text editor (notepad, ultraedit, vim,...) is all you need.

          
    • 


          
  •  ✓ Avoid using (expensive and complex to setup and maintain) search engines

              to find for lost information:
    

              With SPS information is never lost!!!.
    

              (Remember: Take control of the information before

                   the information takes control of you!    )

          
    • 

          
  •  ✓ Don't use proprietary formats for important documentation: 
    

          HTML will be well supported in any electronic platform and by many

          different working groups for always, proprietary formats will not.

          
    • 


        



Use-cases


    

      
  • Advanced notebooks
    • 

      
  • Cheat-sheets with steroids.
    • 

      
  • "Ever growing" mind-maps (make them evolve the way your brain likes it).
    • 

      
  • Brain-to-brain synchronization: make multiple brains work like a team.
    • 

      
  • Project management, canvas and issue-track management.
    • 

      
  • "Light" weight database.
    • 

      
  • (add your own here)
    • 




Micro "How-To"


    

        
  1. Install a light-weight web (HTML) server on your PC.
    

            An simple way is to download

           and install python 3. Then from the terminal (Linux/Mac) or the command

           prompt (Windows) execute next 3 commands and press Enter key( ⏎ ) to confirm.

           

    Command to execute:                          Explanation

    C:\users\myUser > mkdir project01⏎     ←···· [m]a[k]e (or create) new [dir]ectory

                                                 where the page will be stored

                                                

    C:\users\myUser > cd    project01⏎     ←···· [c]hange [d]irectory
    


    C:\users\myUser > python3 -m http.server⏎  ← Execute safe web server pointing

                                                 (only our computer will be able to

                                                  access the content server)

           
    

        
    2. 

        
  2. Copy next files to the directory where pages will be placed:

            

            map_template.html

            map_v1.css

            map_v1.js

            custom.js

            
    

            Rename map_template.html to provide a sensible name. All others files just need to be 

            downloaded once. They will be reused again and again.
    

            "map_v1.js" contains the minimum Javascript code used to navigate and react 

            to user actions.
    

            "map_v1.css" contains the Cascading Style Sheets to "beautify" the content.
    

            "custom.js" allows advanced customization. Just leave it next to the other files

            and forget.

        
    3. 

        
  3. Point your browser to http://localhost:8000 and

            click in you renamed template html file.
    

            Note that localhost is an special safe and private address pointing to your local computer.
    

            Nobody outside your computer can access it.
     

            More info [here].

        
    4. 

        
  4. Congratulations! You are done. Now it's time to add notes by just adding some html blocks 

            tagged with zoom and labels attributes.
    

              Reload your web page to see the results. Play around until you feel comfortable 

            and get ready to take control of your information Forever!!!.
    

        
    5. 




Next steps


    

        
  • At some point you may be interested in sharing you information with your team or make it

            public. If that's the case you can just upload your files to any web hosting provider.
    

            Or you can start your server with the option --bind 0.0.0.0 like:


    C:\users\myUser > python3 -m http.server --bind 0.0.0.0

    

           Now your local web server is accessible to your local (WiFi, Ethernet or VPN) network 

           through the local IP of your PC but nobody outside in the "World WideWild Web" can

           reach it.
    

        
    • 

        
  • It could be the case that you need to collaborate with people and take 

            control of even the smallest changes or you need to apply some workflow 

            before considering the documentation valid or rollback latest changes, or

            create different versions of the content....
    

             Them it is time for you to learn Git. It could be a little bit 

            scaring to get used to Git for the first time and the step learning

            curve is relatively high (about 5-15 days) but the time spent is worth

            the effort if you plan to take control of your information for the

            rest of your life.
    

              Git will surprise you with all its "goodies". In fact Git is the

            tool used by the "big ones" of the Internet (Google, Apple, Microsoft,

            AWS, ...). It allows to work offline and merge change among team groups

            with easy, see changes from current version to a previous one, alert 

            about conflicts when two different users edit the same information in

            parallel and helps to fix them with easy. It lets you come back to 

            past version without loosing the latest changes, create different 

            versions (branches) of the same document and merge those versions 

            later on (or just discard one of them, or part of one of them).

            
    

             And if Git scares you or you don't have time to learn it, don't worry!. 

            You can still deal with your documents as standard text files. Copy to 

            a backup or version folder, send as e-mail attachments, or zip with a 

            password. Leave Git apart until you have time to learn it.

        
    • 




Features


    

        
  • ✓ No coding skills needed, just familiarity with HTML.
    • 

        
  • ✓ Navigate notes "a la Google maps" by zooming in/out, or 

            "a la Zettlekasten way" by showing related notes by topic and/or direct-link.

        
    • 

        

             (rollbacks, pull requests, versioning, branching, ...)

        

        
  • ✓ Print to paper support:

          print-paper CSS support, useful for first-lectures (start-to-end) of content

          Ex: Two views of the same content:

          -  Map: https://singlepagebookproject.github.io/IT_notes/Blockchain/ethereum_map.html

          - book: http://www.oficina24x7.com/Blockchain/ethereum_map.pdf

        
    • 

        
  • ✓ All information available one click away, and related pages can be

             displayed close to each other.

        
    • 

        
  • ✓ save searches/sub-books classified by by-topic/text as URL bookmarks.

        
    • 

        
  • ✓ Quick classification/search/heat-map using topics.
    • 

        
  •  ✓ Designed to avoid the dangerous "UNKNOWN UNKNOWNS":
    

             SPB is designed to show all related information as close as possible to 

             each other as to avoid missing unknown-unknowns. 
    

              As an example, this is how Google presents QA (Quality Assurance) when

              search for 

              JAVA QA related results     and this is how SPB presents the same

              JAVA QA related results.
    

             Even if Google has access to millions of different pages, it tends to

                 be biased toward just an very small subset of content    . In particular,

             that related to automated acceptance tests.
    

               This probably explain why Java newbies guided by Google results tend to

             do buggy JAVA applications and, since Google page-rank favors most linked 

             pages the biased search mechanism feeds ad infinitum. 
    

               SPB JAVA notes, manually collected& classified throughout the time,

             will always present all QA related information with no bias. 

               There are no reasons to suppose that automated testing is less or 

             more important than other QA topics related to async.programming, internal 

             data collection management or persistence tools. By presenting them all 

             in parallel we decrease the danger of unknown-unknowns.

           

        
    • 

        
  • ✓ Easy backup: Copy your files somewhere else, attach to an e-mail, That's all!!!

        
    • 

        
  • ✓ Offline navigation.
    • 




Gallery of SPB Books





Planned Features


    

      
  • Predefined documentation topics (TODO, draft, important, review,

          1min/10min/... lecture time,...)
    • 

      
  • minimal WYSIWYG support for newcomers.
    • 

      
  • Enhanced support for topics providing best pattern to taxonomy

          classification. 
    • 

      
  • Allow to reuse third party ontologies already developed

          by experts to classify content.
    • 

      
  • Better support for diagrams using Mermaid.
    • 

      
  • Advanced "nearby" algorithms to search for related content.
    • 

      
  •  
    • 



Planned (far) Features


    

      
  • IA help system to automatically tag notes by topics.
    • 




  

Apropos


    

      
  • This is a hobby project with zero commercial support. 
    • 

      
  • If you are interested on its development don't forget to 

        

        star it on Github     or contribute with pull-requests or 

         bug-reports .

      
    •