open-index/open-npm huggingface dataset:
npm package: @joelgullander/redux-serviceworker
Description: A redux middleware to handle serviceworker actions
Author: Joel Gullander
Latest version: 0.0.1

# redux-serviceworker

## Summary

A Redux middleware for managing serviceWorker related stuff.

This middleware uses actions, dispatched with Redux such as actions to interact with a broadcastChannel ----- more to be added


## Installation

```bash
$ npm install @joelgullander/redux-serviceworker --save
```

## Middleware Installation

Once you have installed the library via npm, you can add it to your Redux middleware stack just like you would any other middleware.

```javascript
// ... other imports
import serviceWorker from '@joelgullander/redux-serviceworker'

const app = combineReducers(reducers)
const store = createStore(
  app,
  applyMiddleware(
    serviceWorker,
    ...
  )
)
```

## //TODO: prefix examples

## Available Action Types

The following types are available.

```javascript
// Action types to be dispatched by the user
BROADCASTER_CONNECT

// Action types dispatched by the BROADCASTER implementation.
// These would be caught by reducers or other middleware.
BROADCASTER_MESSAGE
```

They can be imported from the standard package and used like so

```javascript
import { BROADCASTER_CONNECT } from '@joelgullander/redux-serviceworker'

store.dispatch({
  type: BROADCASTER_CONNECT,
  payload: {
    name: 'my_api_broadcastchannel'
  }
})
```

## Actions

### BROADCASTER_CONNECT

Declares a connection to the serviceworker broadcast message-queue based of a name identifier

```javascript
{
  type: BROADCASTER_CONNECT,
  payload: {
    name: string 
  }
}
```

## Tips

### Broadcast DEBUGGING

```javascript
const debugBroadcast = new BroadcastChannel('DESIREDQUEUE')
debugBroadcast.postMessage("testing")
```

This can be done in console in browser aswell.
npm package: @joelhc/tmdb-ts
Description: TMDB v3 library wrapper
Author: Blake Joynes
Latest version: 0.0.23

# tmdb-ts


Typescript library wrapper of [TMDB API](https://developers.themoviedb.org/) v3 .


[![Version npm](https://img.shields.io/npm/v/tmdb-ts.svg?style=flat-square)](https://www.npmjs.com/package/tmdb-ts)[![npm Downloads](https://img.shields.io/npm/dm/tmdb-ts.svg?style=flat-square)](https://npmcharts.com/compare/tmdb-ts?minimal=true)

This uses new jwt authentication token for requests so there is no need to append api key to the url. 
Once you have registered for access to the api you can use your access token as follows:

Installation:
``
npm install --save tmdb-ts
``

```js
import TMDB from 'tmdb-ts';

const tmdb = new TMDB('accessToken');

try {
   const movies = await tmdb.search.movies({ query: 'American Pie' });
    console.log(movies);
} catch(err) {
   // handle error
}
```
npm package: @joellesenne/modern.css
Description: A modern CSS for your project
Author: Joël Lesenne
Latest version: 1.0.4

# modern.css

A modern CSS for your project

[Demo](https://codepen.io/joellesenne/full/NPKEeNq)

## Installation

```sh
npm install --save-dev @joellesenne/modern.css

# or  
pnpm install -D @joellesenne/modern.css

# or
yarn add @joellesenne/modern.css
```

## Usage 

```sh
import modern.css from "@joellesenne/modern.css"
```
or 

Unpkg CDN:

```html
<link rel="stylesheet" href="https://unpkg.com/@joellesenne/modern.css" />
```

jsDelivr CDN:

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@joellesenne/modern.css" />
```

If you'd like the font [Inter](https://rsms.me/inter) as well (recommended), add this line as well:

```html
<link rel="stylesheet" href="https://fonts.xz.style/serve/inter.css">
```

## Author

👤 **Joël Lesenne**

* Website : [https://joellesenne.dev](https://joellesenne.dev)
* Mastodon : [@joellesenne](https://mastodon.social/@joellesenne)
* Bluesky : [@joellesenne.bsky.social](https://bsky.app/profile/joellesenne.bsky.social)
* Github : [@joellesenne](https://github.com/joellesenne)
* Codepen : [@joellesenne](https://codepen.io/joellesenne)
* LinkedIn : [@joellesenne](https://linkedin.com/in/joellesenne)

## 🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check [issues page](https://github.com/joellesenne/modern.css/issues). You can also take a look at the [contributing guide](https://github.com/joellesenne/modern.css/blob/main/CONTRIBUTING.md).

## Show your support

Give a ⭐️ if this project helped you!

<a href="https://www.patreon.com/joellesenne">
  <img alt="Become a patron" src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" width="160">
</a>

## 📝 License

Copyright © 2025 [Joël Lesenne](https://github.com/joellesenne). <br />
This project is [MIT](LICENSE) licensed.

## Acknowledgments

- [web.dev](https://web.dev/)
- [CSS One-Liners to Improve](https://dev.to/alvaromontoro/css-one-liners-to-improve-almost-every-project-18m)
- [A (more) Modern CSS Reset - Andy Bell](https://andy-bell.co.uk/a-more-modern-css-reset/)
- [A Modern CSS Reset](https://www.joshwcomeau.com/css/custom-css-reset/#digit-font-smoothing)
- [new.css](https://newcss.net/)
- [reset.css](https://danburzo.ro/snippets/css-reset/)
- [Dark Mode](https://mybrowseraddon.com/dark-mode.html?v=0.5.3&p=0.5.1&type=update)
- [Lorem Ipsum](https://www.lipsum.com/feed/html)
npm package: @joellord/utm-generator
Description: UTM Generator === A CLI tool to build a URL with some utm codes.
Author: Joel Lord
Latest version: 1.0.3

UTM Generator
===
A CLI tool to build a URL with some utm codes.

All UTM codes descriptions are from [AgencyAnalytics](https://agencyanalytics.com/blog/utm-tracking).

Usage
===
utg-generator [args] <TARGET_URL>

Options:
---
--help (boolean) - Show help
--version - Show version number
-s, --source (string) The source parameter allows you to track where the traffic originated from. The parameter added to your url is utm_source. Sources you may track could be facebook, google, bing, inbound.org, or the name of an email list.
-c, --campaign (string) The campaign name parameter allows you to track the performance of a specific campaign. For example, you can use the campaign parameter to differentiate traffic between different Facebook Ad campaigns or email campaigns. The parameter is utm_campaign.
-m, --medium (string) The medium parameter tracks what type of traffic the visitor originated from – cpc, email, social, referral, display, etc. The parameter is utm_medium.
-n, --content (string) In case you have multiple links pointing to the same URL (such as an email with two CTA buttons), this code will help you track which link was clicked. The parameter is utm_content.
-t, --term (string) The keyword parameter allows you to track which keyword term awebsite visitor came from. This parameter is specifically used for paid search ads. The parameter is utm_term.
npm package: @joelnet/deconstruct
Description: For those that prefer using Functions over Classes.
Author: Joel Thoms
Latest version: 1.0.0

# deconstruct

For those that prefer using Functions over Classes.

## Install

```
npm i https://github.com/joelnet/deconstruct.git
```

## Usage

Given a Class:

```javascript
class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
  }

  getFullName() {
    return `${this.firstName} ${this.lastName}`
  }
}
```

Pass your Class to `deconstruct`. Use destructuring to access the `constructor` and any methods attached to the Class.

```javascript
// deconstruct and destructure the Person Class
const { constructor: createPerson, getFullName } = deconstruct(Person)

// create a new Person
const person = createPerson('Akira', 'Kurosawa')
//=> { firstName: 'Akira', lastName: 'Kurosawa' }

// call the getFullName function with our person
const fullName = getFullName(person)
//=> "Akira Kurosawa"
```

## Benefits

- No more problems with `this` being assigned to something else.

- Functions can be used by other parts of the application, not just the Class.

- Encourages composition over inheritance.

## Caveats

This cannot be used with code that relies on `instanceof`. Because the deconstructed objects are Plain Old JavaScript Objects, `instanceof` will always be `Object`.

## ES5 Classes

Works the same with ES5 Classes

```javascript
function Person() {
  this.firstName = firstName
  this.lastName = lastName
}

Person.prototype.getFullName = function getFullName() {
  return `${this.firstName} ${this.lastName}`
}

// deconstruct and destructure the Person Class
const { constructor: createPerson, getFullName } = deconstruct(Person)
```

## Static Methods

Static methods are already functions, just use them.

```javascript
class Person {
  static getType() {
    return 'Person'
  }
}

Person.getType()
//=> 'Person'
```

## Ideas

### Export Functions not Classes

have more control over how your Classes are used. Export Functions and not the Class.

```javascript
class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
  }

  getFullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

// deconstruct and destructure the Person Class
const { constructor: createPerson, getFullName } = deconstruct(Person)

module.exports = {
  createPerson,
  getFullName
}
```

### Prevent `this` bugs

Typical `this` bug:

```javascript
// destructuring changes the `this` context.
const logFullName = ({ getFullName }) => console.log(`fullname: ${getFullName()}`)

const person = new Person('Akira', 'Kurosawa')
logFullName(person)
//=> Cannot read property 'firstName' of undefined
```

Instead write:

```javascript
// no more bugs with `this`
const logFullName = context => console.log(`fullname: ${getFullName(context)}`)

const person = createPerson('Akira', 'Kurosawa')
logFullName(person)
//=> fullname: Akira Kurosawa
```