angular-idle-preload - :soon: Angular Idle Preload for preloading async routes via @TipeIO

  •        28

Scheduling non-essential work yourself is very difficult to do. It’s impossible to figure out exactly how much frame time remains because after requestAnimationFrame callbacks execute there are style calculations, layout, paint, and other browser internals that need to run. A home-rolled solution can’t account for any of those. In order to be sure that a user isn’t interacting in some way you would also need to attach listeners to every kind of interaction event (scroll, touch, click), even if you don’t need them for functionality, just so that you can be absolutely sure that the user isn’t interacting. The browser, on the other hand, knows exactly how much time is available at the end of the frame, and if the user is interacting, and so through requestIdleCallback we gain an API that allows us to make use of any spare time in the most efficient way possible.

https://github.com/gdi2290/angular-idle-preload#readme
https://github.com/gdi2290/angular-idle-preload

Tags
Implementation
License
Platform

   




Related Projects

ng-idle - Responding to idle users in AngularJS applications.

  •    Javascript

Angular 2 Developers: This module is for Angular 1 only. Check out ng2-idle for the Angular 2 version. You may wish to detect idle users and respond, for example, to log them out so their sensitive data is protected, or taunt them, or whatever. I don't care.

react-idle - Notifies your app when the user is idle.

  •    HTML

Notifies your app when the user is idle.When the user is idle you can do things like preload some code-split bundles, download images that haven't been scrolled to, etc. Also useful to automatically log them out of a sensitive website.

angular-starter - :tada: An Angular Starter kit featuring Angular (Router, Http, Forms, Services, Tests, E2E, Dev/Prod, HMR, Async/Lazy Routes, AoT via ngc), Karma, Protractor, Jasmine, Istanbul, TypeScript, TsLint, Codelyzer, Hot Module Replacement, @types, and Webpack by @TipeIO

  •    Javascript

An Angular starter kit featuring Angular 5, Ahead of Time Compile, Router, Forms, Http, Services, Tests, E2E), Karma, Protractor, Jasmine, Istanbul, TypeScript, @types, TsLint, Codelyzer, Hot Module Replacement, and Webpack by AngularClass.This seed repo serves as an Angular starter for anyone looking to get up and running with Angular and TypeScript fast. Using a Webpack 3 for building our files and assisting with boilerplate. We're also using Protractor for our end-to-end story and Karma for our unit tests.

idlize - Helper classes and methods for implementing the idle-until-urgent pattern

  •    Javascript

Helper classes and methods make it easier for developers to implement the idle-until-urgent pattern and leverage the requestIdleCallback() API. This library is a collection of helper methods and classes (not a single bundle). As such, each helper should be imported separately. All public helpers are released at the level of the project, so they can be imported by directly referencing the helper's .mjs file.


angular-hmr - :fire: Angular Hot Module Replacement for Hot Module Reloading via @TipeIO

  •    TypeScript

Please see repository AngularClass/angular-seed for a working example.bootloader is only needed to detect that the dom is ready before bootstraping otherwise bootstrap. This is needed because that dom is already ready during reloading.

awesome-angular - :page_facing_up: A curated list of awesome Angular resources by @TipeIO

  •    HTML

Awesome list of Angular seed repos, starters, boilerplates, examples, tutorials, components, modules, videos, and anything else in the Angular ecosystem. View as github page.Angular is a development platform for building mobile and desktop web applications.

preload-webpack-plugin - A webpack plugin for injecting <link rel='preload|prefecth'> into HtmlWebpackPlugin pages, with async chunk support

  •    Javascript

A Webpack plugin for automatically wiring up asynchronous (and other types) of JavaScript chunks using <link rel='preload'>. This helps with lazy-loading. Note: This is an extension plugin for html-webpack-plugin - a plugin that simplifies the creation of HTML files to serve your webpack bundles.

loadCSS - A function for loading CSS asynchronously

  •    Javascript

Referencing CSS stylesheets with link[rel=stylesheet] or @import causes browsers to delay page rendering while a stylesheet loads. When loading stylesheets that are not critical to the initial rendering of a page, this blocking behavior is undesirable. The new <link rel="preload"> standard enables us to load stylesheets asynchronously, without blocking rendering, and loadCSS provides a JavaScript polyfill for that feature to allow it to work across browsers. Additionally, loadCSS offers a separate (and optional) JavaScript function for loading stylesheets dynamically. The standard markup pattern for loading files asynchronously is: <link rel="preload"> (W3C Spec). We recommend using this markup pattern to reference your non-critical CSS files. loadCSS's rel=preload polyfill is designed to enable this markup to work in browsers that don't yet support this feature (view link rel="preload" support status).

NG6-starter - :ng: An AngularJS Starter repo for AngularJS + ES6 + Webpack by @AngularClass a @OneSpeed-io company

  •    Javascript

Check out the JSPM version--an alternative to Webpack as an ES6 build system.If you're looking for a preliminary Angular 2 build, please use the angular2-webpack-starter.

retain-app - 📓 Free Angular 2 (and Angular 4) Fundamentals Course by @AngularClass

  •    CSS

📓 Free Angular 2 (and Angular 4) Fundamentals Course by @AngularClass

angular2-materialize - Angular 2 support for Materialize CSS framework.

  •    TypeScript

This library adds support for the Materialize CSS framework in Angular 2. It is needed to add the dynamic behavior of Materialize CSS that is using JavaScript rather than plain CSS. To use the library you need to import it once per project and then use its MaterializeDirective directive for binding it to any component that needs a dynamic behavior, like collapsible panels, tooltips, etc.

babel-angular2-app - A super-simple skeleton Angular 2 app built with Babel and Browserify.

  •    Javascript

A skeleton Angular 2 app built with Babel and Browserify. Back in the time of angular2 alpha.18, angular/quickstart provided us to try Angular 2 app with on-the-fly transpilation and lazy-loading, which resulted in long waiting time for each file change. Also, I was not familiar with the Traceur tool stack and its output. angular2 npm package said The files under /es6 are es6 compatible files that can be transpiled to es5 using any transpiler. So I gave it a shot.

merchant.js - 💰 A Javascript framework for creating idle games

  •    Javascript

Merchant is a system for creating programs that manage changing numbers over time. It's especially useful for creating idle games (sometimes called incremental games), but could potentially be used in other games or programs. If you're not sure what an idle game is, click here to find out. Note: If you're trying to be productive right now, that link may not be for you.

swarm - Swarm Simulator, an idle game with lots of bugs.

  •    CoffeeScript

Starting with only a few larvae and a small pile of meat, build a merciless swarm of trillions of giant alien bugs. Built with love by Evan Rosson using Coffeescript, AngularJS, Yeoman's generator-angular, Evan's own swarm-numberformat, and other libraries packaged by Bower. Inspired by the best Starcraft race.

ng2-nvd3 - Angular2 component for nvd3

  •    TypeScript

Angular component for nvd3 (uses d3 v3!). It has similar technique as angular-nvd3 for angular 1, but designed for angular 2+ and without extra features (like extended mode) you won't need.it requires angular2+, d3 (v3.5.17) and nvd3 as dependencies.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.