Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

lockandload

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

lockandload

Minimalist AMD-compliant Javascript and CSS loader

1.1.1
Source
npm

Version published: 6 years ago

Weekly downloads: 8; decreased by-20%

Maintainers: 1

Weekly downloads

Created: 6 years ago

Source

lockandload

Lockandload is a minimal AMD-loader-compatible boilerplate to kickstart your website/single-page-app.

Gzipped, the essential script content amounts to roughly 1KB of code. Without compression it blows up to just under 2KB. Further minifying this code does not result in any significant gains, it would just hinder readability.

Features

Less filling: 1KB of gzipped script content.
Handminified to retain readable and maintainable code.
It's so small, it can and should be inlined on your HTML page (which is also one of the reasons to handminify it only).
Because it is inlined, it is faster than all other loaders.
Fully asynchronous script loader: AMD-compatible.
Supports anonymous define() calls.
Supports local require() calls (with one and two arguments).
Supports implicit and explicit ['require'] dependencies.
Does not support implicit nor explicit exports/module dependencies.
Circular dependencies will silently hang in unresolved state (or put differently: do not do that).
No extra diagnostic code to minimise code weight and optimise loading speed.
Fully event driven, no polling timers.
Standard event: domready.
Both high and low priority asynchronous loading of Javascript and CSS files.
Leverages native browser speed for high priority loading (by getting out of the way).
Legacy support for $(...) jquery riddled synchronous code.
Legacy support for loading synchronous Javascript.
Single-page-app support using $$(...) page refresh callbacks.
Supports IE10 and up and all other webbrowsers.
No config file, means: no syntax to learn, no config file parser code.

Requirements

It runs inside any webbrowser environment (starting at IE10 and up).

Usage

Copy index.html, main.js and css/main.css boilerplate files to your own new website, and start adjusting them to taste. The index.html contains two <script> sections. The first section should not be preceded by any other <script> tags. The second section should be placed at or close to the end of the <head>, and should not precede any direct <link type="stylesheet"> tags.

The basic structure of a page should be:

html
- head
  - Charset declaration.
  - Inline lockandload master script.
  - High priority async external scripts.
  - Viewport declaration.
  - High priority CSS scripts.
  - <title>.
  - All other tags that should go in the <head>.
  - Inline lockandload 'headready' script.
    - Low priority CSS scripts.
    - Low priority async Javascript scripts.
    - Low priority synchronous Javascript scripts.
- body
  - All other inline scripts (if you must).

The index.html file is a production-stripped version of annotated.html. Look at annotated.html to understand the code and read additional inline documentation.

API

Globally:

define()
The standard AMD global entrypoint. To figure out module ids of all the modules that you are trying to load, uncomment some debugging code in the primary load script and inspect your console-pane in the browser.

Locally in the secondary localandload 'headready' script; all path arguments are used verbatim in <link href="path"> or <script src="path"> tags:

css(path)
Loads additional low priority ordered css files asynchronously.
js(path)
Loads additional low priority unordered Javascript files asynchronously.
sjs(path)
Loads additional low priority ordered Javascript files sequentially yet asynchronously (as a group).

References

To install it use the npm repository.
source repository.
Asynchronous Module Definition (AMD).
Inspired by Curiosity-Driven's minimal loader: reducing the featureset of lockandload to that what that loader supports, we end up with 320 bytes for reduced-lockandload and 386 bytes for that loader.

Other loaders:

RequireJS.
curl.

Keywords

FAQs

What is lockandload?

Is lockandload popular?

Is lockandload well maintained?

Package last updated on 23 Aug 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

lockandload

lockandload

Features

Requirements

Usage

API

References

Keywords

Related posts

Risky Business Podcast: Why Open Source Software Needs Better Malware Tracking

Threat Actor Exposes Playbook for Exploiting npm to Build Blockchain-Powered Botnets