sadeghbarati

Pure ESM package

The package linked to from here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

1. Use ESM yourself. (preferred)
   Use import foo from 'foo' instead of const foo = require('foo') to import the package. Follow the below guide.
2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
3. Stay on the existing version of the package until you can move to ESM.

sadeghbarati

// my-app/webpack.config.js
{
  externals: {
    'jquery': 'jQuery',
    /* ↑ With this line, Webpack will replace every
     *    import $ from 'jquery';
     *
     * in your code with approximately
     *    const $ = window.jQuery;
     *

sadeghbarati

Storybook for HTML

Storybook is all about writing stories. A story usually contains a single state of one component, almost like a visual test case.

Typically you see Storybook used for React or other frameworks, but the library has recently introduced the option to use HTML for your Storybook projects. As a prototyping tool or playground this is great! No larger scale knowledge of other frameworks needed.

Install Storybook HTML

sadeghbarati

// This file is based on the code from the ASP.NET Core repository
// https://github.com/aspnet/AspNetCore/tree/master/src/Middleware/SpaServices.Extensions/src
// Copyright (c) .NET Foundation. All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.IO;
using System.Net;

sadeghbarati

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

sadeghbarati

/* Ultra lightweight Github REST Client */
// original inspiration via https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb
const token = 'github-token-here'
const githubClient = generateAPI('https://api.github.com', {
  headers: {
    'User-Agent': 'xyz',
    'Authorization': `bearer ${token}`
  }
})

sadeghbarati

const fetch = (...args) => console.log(...args) // mock
function httpRequest(url, method, data) {
    const init = { method }
    switch (method) {
        case 'GET':
            if (data) url = `${url}?${new URLSearchParams(data)}`
            break
        case 'POST':
        case 'PUT':
        case 'PATCH':

sadeghbarati

// Add on element with overflow
-webkit-mask-image: -webkit-radial-gradient(white, black);

sadeghbarati

JavaScript GUI libraries

These libraries can be used to quickly create a GUI for configureable parameters using sliders, checkboxes, colors pickers etc

1. Tweakpane https://github.com/cocopon/tweakpane Demo: https://cocopon.github.io/tweakpane/
2. control-panel https://github.com/freeman-lab/control-panel
3. ControlKit https://github.com/automat/controlkit.js
4. guify https://github.com/colejd/guify Main site is down, here is the demo https://jons.website/projects/guify/index
5. oui https://github.com/wearekuva/oui
6. Palette.js https://github.com/lehni/palette.js

sadeghbarati

• Update package.json, set version to a prerelease version, e.g. 2.0.0-rc1, 3.1.5-rc4, ...
• Run npm pack to create package
• Run npm publish <package>.tgz --tag next to publish the package under the next tag
• Run npm install --save package@next to install prerelease package