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

sadeghbarati

• Update package.json by running yarn version --prerelease --preid=canary
• Run npm publish --tag canary to publish the package under the canary tag
• Run yarn add @artsy/reaction@canary to install canary package

Running npm dist-tag ls can be helpful to see what tagged packages are available