App.js features - Githubissues

sc0ttj commented 5 years ago

Something like:

[x] feature detection (add various classes to <body>, see issue 54)
[x] remove a 'no-js' class from body
[x] dynamic page/site search (uses Jets)
[x] query string parser
[x] a jQuery .load() alternative for loading pages or page fragments
[ ] simple redirect thing (can be used in 404.html to have custom URLs)
[ ] a simple 'trigger animate on scroll into view' thing
[ ] loadCSS, loadJS (from filament group)
[ ] lazy load images
[ ] data setter/getter (like dataPres.setData() and dataPres.getData())
[ ] load Disqus below post footer
[ ] detect slow network speeds, show more lightweight content (fallbacks, imgs, vids, etc)
[ ] generic table filter/sorter thing: look for .sortable-items class, make their contents filterable/sortable.. add a little form above the table/content
[x] a shopping cart

Advanced:

PWA-esque thing:

download various assets to localStorage
- css
- svg icons
- google fonts css
download site content to localStorage
- ?
show/hide "You are Offline" popup
when offline:
- use JS to handle links
- gets content of link
- updates page with new content
- updates url to chosen link

sc0ttj commented 5 years ago

About lazy loading, see this: https://addyosmani.com/blog/lazy-loading/

TLDR: Chrome will support it natively, so any lazy loading implementation could use that ....

Or just use lazySizes, from https://github.com/aFarkas/lazysizes

decent cross browser support
loads all kinds of stuff (not just images)
supports <picture> and srcset
other stuff

sc0ttj commented 4 years ago

better touchscreen detection:

        touch: function () {
            if (
                ('ontouchstart' in window) ||
                (window.DocumentTouch && document instanceof DocumentTouch) ||
                (window.hasOwnProperty &&
                    (
                        window.hasOwnProperty('ontouchstart') ||
                        (window.DocumentTouch && document instanceof DocumentTouch) ||
                        navigator.msMaxTouchPoints
                        )
                    )
                ) {
                return true;
            }
            // Fallback for certain samsung devices that fail above but pass below... :/
            if ('ontouchstart' in window) {
                return true;
            }
            return false;
        },

sc0ttj commented 4 years ago

For handling data on the page, passing it around between different javascripts, while not polluting global vars ... (all data must be accessed using window.DataManager.getData('name-of-dataset'))

<script>
window.DataManager && !window.DataManager.setData && (
    window.DataManager._internal={
        data:{}
    }, 
    window.DataManager.setData=function(a,t){
        return window.DataManager._internal.data[a]=t,t
    },
    window.DataManager.getData=function(a){
        return window.DataManager._internal.data[a]
    }
)
</script>

sc0ttj commented 4 years ago

Also needs a simple shopping cart built-in .. See https://github.com/sc0ttj/mdsh/issues/88

sc0ttj / mdsh

App.js features #7