JavaScript Snippets Prototypically Inherited

A zero dependency package that keeps helper methods usable and exposed.

|||| |:-:|:-:|:-:| ||| ||

No more searching through bookmarked webpages or markdown files looking for that snippet you found six months ago. The one you remember had something to do with an array, but have no clue where you put it.

Proto-Snips is a curated open source snippet manager where the saved snippets are added to javascript primitives as soon as the package is run.

example:

• Load and call proto-snips
  • const ProtoSnips = require('@downquark/proto-snips').Defaults();
• Use the snippet as if it were a native method
  • [1,2,3,4].shuffle(); // [3,4,2,1]

Table of contents

• JavaScript Snippets Prototypically Inherited - A zero dependency package that keeps helper methods usable and exposed.
  • Table of contents
  • Common usage
  • Installation
  • Local Build Process
    • Setup
    • Build
    • Test
    • Iterate
    • Submit
  • Current Modules & Methods
    • Prior to removing npm prerelease semver
  • Mini-Roadmap

Common usage

Using CommonJS for these to help differentiate between AMD/RequireJS modules commonly reused in projects. Any prototypes being used should be imported and instantiated a single time. You will be able to specify which prototypes you wish to by importing the Default set of the modules, handpicking using the include method, or importing everything with the ALL getter.

Installation

$ npm i @downquark/proto-snips

• or $ yarn add @downquark/proto-snips

Then import and init the default snippets with:

• const ProtoSnips = require('@downquark/proto-snips').Defaults() Or every snippet with:
• const ProtoSnips = require('@downquark/proto-snips').ALL

NOTE: Due to the possibility of this package becoming large the ALL option is intentionally set as a getter. Using a different access type just cuts down on certain IDEs suggesting alphabetically sorted methods.

To select and initialize non-default methods:

const {konsole, date} = require('@downquark/proto-snips').include
date.Defaults() // <-- to include the modules defaults
konsole.include.consoleDev() // <-- specific OR non-default methods

Single line import and init examples for or non-default methods from

const _ = require('@downquark/proto-snips').include.date.include.calendar()
const _2 = require('@downquark/proto-snips').include.date.Defaults()

This way of handling prototypes allows for easy scalability. We can create as many methods as we like without concern of package size or code bloat because we only import what is needed per project. e.g.:

const multi-level-nested-prototype =
  require('@downquark/proto-snips')
    .include.date
      .include.calendar
        .include.moonCycles
          .include.waxing()

We will continue to update this library with helpful snippets - while ensuring that we keep 100% code coverage

Local Build Process

Setup

• Fork the repository
• Install dependencies
  • $ yarn
• Functional Code changes should only be made in the src directory
• There should be a 1:1 mapping between files and primitives being extended
  • Create a new file if needed
  • Update an existing file if not
• Create the prototype which will be called as a non-default method within: src/js/<PRIMITIVE>.js
• Create the tests within: src/spec/<PRIMITIVE>.js
• If you created a NEW primitive file
  • require and include the file as a non-default object within: src/index.js
• For flow's typing to allow protoype updates the new methods / vars / etc will need to be updated at: flow-typed/downquark/core.js
  • If declarations have no direct impact on the prototype please create/re-use a file that follows the same mapping created for the spec files above, only in the flow-typed/downquark directory

Build

Due to flow's handling of core.js classes and prototypes each time you start the server you must do so in the following order:

• $ yarn build
• $ yarn flow:init
  • Once flow server has started you can continue to run it normally with $ yarn flow

Test

• $ yarn test
  • The tests will reference the dist directory files

Iterate

• To view your work locally
  • $ yarn build:dev create a development build
  • $ yarn linkit
    • Only needs to be run once.
      • Run yarn dev for subsequent builds.
    • The proto-snips package is loaded and initialized as it will be for the end user
    • If a browser does not automatically open, navigate to http://0.0.0.0:1313
      • Verify working code using your normal processes

Submit

• Continue testing until there is 100% coverage
  • Any PR that fails to comply with The TAP 100 will not be able to be accepted
• Add the new prototypical method to the Current Modules & Methods list
• Create a PR with a quick description explaining:
  • The new method's purpose
  • An example piece of code showing how to use it
  • Any other information you wish to pass along

Current Modules & Methods

View the current snippets on github pages

method|description| -|-:| last| Returns the last element of the array without modifying the original array| len| Returns the 0 index based length of the array Example:|array.last === array[array.len]| | | | shuffle| Shuffles elements in original array and returns modified data| Example:|[1,2,3].shuffle() // [3,1,2]| unique| _Returns array with duplicate elements removed without modifying original array| Example:|[1,1,2,3].unique() // [1,2,3]|

method|description| -|-:| consoleDev| A more concise version of qonsole| NOTE:|Quite a bit going on here. Please see tests for usage information.

method|description| -|-:| stringFormats| Returns date in specified format| Example:|new Date().STANDARD.formatDate() // '07 / 01 / 2020'| makeReadable| Returns human readable values for days and months| Example:|new Date().getNamedDay(3) // 'Wed'| Example:|new Date().getNamedDay(3,true) // 'Wednesday'| ranged| Formats and returns requested data for use with date ranges| Example:|new Date().getEpochRange('jan 2020','feb 2020') // [1577854800000, 1580533200000]| Example:|new Date().getRandomDate() // defaults to a 30 day range with _new Date()_ as mid-point| calendar| Returns all information needed to render a calendar grid| Example:|new Date().getFullCalendarDates(CALENDAR_STARTING_POINT)|

method|description| -|-:| msInDay| Returns the number of miliseconds in a 24 hour period| Example:|Math.msInDay // 86400000| TODO:|move this to Number

method|description| -|-:| msOffset| Returns timestamp of a date specified by an offset| Example:|new Date(dateTime).getTime().msOffset('-13M') // timestamp for a day 13 months previous: 86400000| TODO:|move this to Math

method|description| -|-:| endsWith| Returns boolean based on end of string search criteria and optional specified offset| Example:|'I have a question.'.endsWith('question.') // true| Example:|'I have a question.'.endsWith('have',6)' // true| padStart| Returns string with leading padding of spaced or optional specified character(s)| Example:|'abc'.padStart('10') // ' abc'| Example:|'abc'.padStart('10', "foo") // 'foofoofabc'|

Prior to removing npm prerelease semver

• [ ] Create method to import all snippets
• [ ] Include all Snippets within Sandbox
• ~~Incorporate MDN's polyfills~~
• Decided to make this package sans-dependencies. Recommend to utilize https://github.com/msn0/mdn-polyfills

Mini-Roadmap

• [ ] Port relevant snippets from:
  • [ ] 30 seconds of code
  • [ ] [web dev]https://web.dev/web-animations/
  • [ ] https://1loc.dev/
• [ ] Only import required snippets
  • allows for full library without having to worry about file size
• [ ] Enable snippet management via a config / rc file
  • [ ] Enable snippet management via a GUI
• [ ] Enable option to collect anonymous data about usage of snippets
• [ ] Enable pattern matching to allow suggestion tooltips within the IDE
  • e.g. Developer writes something similar to () => arr.length-1 and the IDE gives prompt to include array.len and a usage example [1,2,3].len // 2
• [ ] Extend to include multiple languages
• [ ] Ability to submit snippets from within ProtoSnippet package
• [ ] Ability to create and locally store snippets that will autobind when ProtoSnips is called