Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
@patternslib/patternslib
Advanced tools
Patternslib is a JavaScript library that enables designers to build rich interactive prototypes without the need for writing any Javascript. All events are triggered by classes and other attributes in the HTML, without abusing the HTML as a programming la
Patterns is a toolkit that enables designers to build rich interactive prototypes without the need for writing any JavaScript. All functionality is triggered by classes and other attributes in the HTML, without abusing the HTML as a programming language. Accessibility, SEO and well structured HTML are core values of Patterns.
See the Changelog at GitHub.
Patterns aims to support at least the two latest major versions of all popular browsers:
Other browser version may work too, but are not actively tested against.
Additionally we do support Microsoft Internet Explorer 11 until a certain extend via optional polyfills loading.
For Internet Explorer 11 support we have included a src/polyfills.js
module.
You can inlcude it optionally via src/polyfills-loader.js
which injects the polyfills bundle only if the current browser is Internet Explorer.
For this to work, include the following in BEFORE you load the patternslib bundle:
<script src="/your-dist-directory/polyfills-loader.js" type="text/javascript"></script>
Note: this only works, if the bundle nor the polyfills-loader are not loaded asynchronously. The script loading order matters here and async loading has no deterministic loading order.
Make sure, you have these requirements installed:
- Node.js ( https://nodejs.org/en/ )
- yarn ( https://yarnpkg.com/ )
- make
- git
On OSX you need gnu-tar
instead of tar (GNU tar supports the --transform
option).
Please install it with e.g. brew install gnu-tar
.
The following commands will generate a bundle.min.js
file in the dist
directory
which contains Patterns and all its dependencies:
git clone git://github.com/Patternslib/Patterns.git
cd Patterns
make
Alternatively, you can download a bundle at patternslib.com.
The individual patterns are located in their own folders in ./src/pat/
.
Each pattern folder contains some or all of the following files:
To generate CSS files from the pattern's included Sass files, type make all_css
and the css files will be generated in the same location as the Sass files.
You'll need to have a Sass compiler installed.
To demo the patterns, simply type make serve
to install the necessary
dependencies and to start a simple Node.js HTTP server.
You can then visit http://localhost:4001 to see a site with demos.
Alternatively, patterns can also be demoed through the Patternslib.com website, which is open-source. The code and setup instructions are here.
To develop on Patterns, clone the repository and set it's push-url to your fork:
git remote set-url --push origin <url_to_your_fork>
Create a branch for the feature/bug you are working on:
git checkout -b <feature>
For inclusion use either a GitHub pull request or create a ticket with a url to your external repository.
Please read our contribution notes and read our code style guide.
The simplest way to run the tests are to use make:
make check
This will install all required npm and bower packages and run the tests.
Eventually add to tests:
import "core-js/stable";
import "regenerator-runtime/runtime";
Then:
node --inspect-brk node_modules/.bin/jest --runInBand ./src/pat/tooltip/tooltip.test.js
Connect in chrome via:
chrome://inspect
You can pass Jest any parameter it accepts, like -t TESTPATTERN
::
node --inspect-brk node_modules/.bin/jest --runInBand ./src/pat/tooltip/tooltip.test.js -t will.be.closed.when
To facilitate debugging you can change the default log level through the URL query string by adding loglevel
options.
http://www.example.com/?loglevel=DEBUG
changes the default log level to DEBUG
.http://www.example.com/?loglevel-inject=DEBUG
changes the log level for just the inject pattern to DEBUG
.http://www.example.com/?loglevel=ERROR&loglevel-inject=INFO
changes the standard log level error, but enables messages at the INFO
level for the inject pattern.https://survivejs.com/webpack/optimizing/build-analysis/ https://formidable.com/blog/2018/finding-webpack-duplicates-with-inspectpack-plugin/
Build the stats.json file:
yarn build:stats
Check dependency tree and why which package was included: https://www.npmjs.com/package/whybundled
whybundled stats.json
Visualize dependency tree and analyze bundle size: https://www.npmjs.com/package/webpack-bundle-analyzer
webpack-bundle-analyzer stats.json
FAQs
Patternslib is a JavaScript library that enables designers to build rich interactive prototypes without the need for writing any Javascript. All events are triggered by classes and other attributes in the HTML, without abusing the HTML as a programming la
The npm package @patternslib/patternslib receives a total of 281 weekly downloads. As such, @patternslib/patternslib popularity was classified as not popular.
We found that @patternslib/patternslib demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
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.
Security News
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.