- css/code-block.html
- css/img-table-vertical-center.html
- css/viewport-height.html: a div that is a tall as the viewport, and does not generate a toplevel scrollbar
- css/responsive-image-max-height.html: here we try to create an image that is never wider than the screen. If the screen is less wide than the image, then the image scales down proportionally. Otherwise, the image has a user determined fixed by the CSS or the HTML
heightproperty. Related:TODO I'm unable to do this....... stackoverflow.com/questions/69964332/how-to-set-the-default-height-of-responsive-images-when-screen-is-wide-and-have The objective was to implement: github.com/ourbigbook/ourbigbook/issues/168 - css/top-navigation.html
Other examples include:
- css/flex-fill-vertical.html: minimal setup for a editor: docs.ourbigbook.com/editor
That example calculates and displays the final widths via JavaScript, making it easier to understand the calculations being done.
The more of their syntax gets merged into mainline Cascading Style Sheets, the better the world will be.
- js/confirm-close.html: stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes
- web-cheat/js-image-load.html: load an image from JavaScript dynamically: stackoverflow.com/questions/226847/what-is-the-best-javascript-code-to-create-an-img-element
- web-cheat/js-image-load-viewport.html: load an image from JavaScript dynamically when it would become visible on the viewport: stackoverflow.com/questions/2321907/how-do-you-make-images-load-only-when-they-are-in-the-viewport
- html/img-load-lazy.html: stackoverflow.com/questions/2321907/how-do-you-make-images-load-lazily-only-when-they-are-in-the-viewport/57389607#57389607
- web-cheat/esm.html: ESM modules
- js/keydown.html: stackoverflow.com/questions/16006583/capturing-ctrlz-key-combination-in-javascript
External libraries
- Text editors
- Interactive HTML table sorting
../webpack/template contains a reasonable starter template.
This will produce, under
dist/ the following minimized files:dist/index.html: from ../webpack/template/index.html. You can open it to see:show on the browser. This was added from JavaScript.Hello webpackdist/index.js: from ../webpack/template/index.js and anything in its import tree, e.g.:- ../webpack/template/main.scss: sass source. It gets embedded the the JavaScript output as a string, and the JavaScript then applies it to the page, making the font blue
lodashthird party library
You can also run this test with the development server on localhost:9000:which uses unminimized outptus, and automatically push reloads the page whenever you change any of the input files!
npm startThis example shows how you could manually include the
dist/index.js that is output from webpack into your index.html.This is generally not what you want to do, because what you actually want to do is to use a Js output name with a hash in it, so that browsers only need to refetch when the name changes.
And to do that, we have to let webpack dynamically inject that unpredictable hash as done in webpack/template with:
new HtmlWebpackPlugin({
filename: 'index.html',
// Inject the include to our hashed filename,
// since it is not deterministic due to the hash.
inject: true,
template: path.resolve(__dirname, 'index.html'),
}),This shows how to produce a minimized fully embedded CSS file with webpack from a sass:That example produces a
cd webpack/sass
npm install
npm run build
xdg-open index.htmldist/main.css file which is a compresesd combination of:- webpack/sass/main.scss
- normalize.css, added to the project as a regular
node_modulespackage
Lol it is note possible what a joke. Notably this makes it harder to have of a superior third party password manager like Proton Pass (though there seems to be an autocomplete app as an alternative path), and an ad blocker. Fuck Google.
Also, Chromium is not available on Google Play by default, you can install the apk, but you will miss updates:
Pinned article: Introduction to the OurBigBook Project
Welcome to the OurBigBook Project! Our goal is to create the perfect publishing platform for STEM subjects, and get university-level students to write the best free STEM tutorials ever.
Everyone is welcome to create an account and play with the site: ourbigbook.com/go/register. We belive that students themselves can write amazing tutorials, but teachers are welcome too. You can write about anything you want, it doesn't have to be STEM or even educational. Silly test content is very welcome and you won't be penalized in any way. Just keep it legal!
Intro to OurBigBook
. Source. We have two killer features:
- topics: topics group articles by different users with the same title, e.g. here is the topic for the "Fundamental Theorem of Calculus" ourbigbook.com/go/topic/fundamental-theorem-of-calculusArticles of different users are sorted by upvote within each article page. This feature is a bit like:
- a Wikipedia where each user can have their own version of each article
- a Q&A website like Stack Overflow, where multiple people can give their views on a given topic, and the best ones are sorted by upvote. Except you don't need to wait for someone to ask first, and any topic goes, no matter how narrow or broad
This feature makes it possible for readers to find better explanations of any topic created by other writers. And it allows writers to create an explanation in a place that readers might actually find it.
Figure 1. Screenshot of the "Derivative" topic page. View it live at: ourbigbook.com/go/topic/derivativeVideo 2. OurBigBook Web topics demo. Source. - local editing: you can store all your personal knowledge base content locally in a plaintext markup format that can be edited locally and published either:This way you can be sure that even if OurBigBook.com were to go down one day (which we have no plans to do as it is quite cheap to host!), your content will still be perfectly readable as a static site.
- to OurBigBook.com to get awesome multi-user features like topics and likes
- as HTML files to a static website, which you can host yourself for free on many external providers like GitHub Pages, and remain in full control
Figure 3. Visual Studio Code extension installation.
Figure 4. Visual Studio Code extension tree navigation.
Figure 5. Web editor. You can also edit articles on the Web editor without installing anything locally.Video 3. Edit locally and publish demo. Source. This shows editing OurBigBook Markup and publishing it using the Visual Studio Code extension.Video 4. OurBigBook Visual Studio Code extension editing and navigation demo. Source. 
- Infinitely deep tables of contents:
All our software is open source and hosted at: github.com/ourbigbook/ourbigbook
Further documentation can be found at: docs.ourbigbook.com
Feel free to reach our to us for any help or suggestions: docs.ourbigbook.com/#contact