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

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

// 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

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

import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import replace from 'rollup-plugin-replace';

const env = process.env.NODE_ENV || 'development';

export default {
  input: [
    'src/index.js'

sadeghbarati

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

sadeghbarati

PDF Make Definitions

A list of all the properties for the Document Definition objects in PDF Make. Gathered from the examples source code. Up to date for version 0.1.38.

Basic definition

• The Document Definition is a javascript object: {}. It can contain the following.
• content: array. This defines the layout of your document. All your tags will be defined in there. You define tags using object (e.g. content: [{text: 'Hello World'}])
• styles: object. A dictionary of all the named styles in your document. You can then apply a style to any object using style: 'name' or style: ['name1', 'name2']
• defaultStyle: object. Defines a style to be applied to every element in the document.
• images: object. Another dictionary that you can use to specify all the images in your document.

sadeghbarati

// For the below to work with the escape key
// I needed to add data-keyboard="false" to the modal
// in the HTML so that the standard bootstrap function
// doesn't fire, the below fires instead

$('div.modal').on('show.bs.modal', function() {
    var modal = this;
    var hash = modal.id;
    window.location.hash = hash;
    window.onhashchange = function() {

sadeghbarati

$('div.modal').on('show', function() {
	var modal = this;
	var hash = modal.id;
	window.location.hash = hash;
	window.onhashchange = function() {
		if (!location.hash){
			$(modal).modal('hide');
		}
	}
});

sadeghbarati

var list = [];
document.querySelectorAll("body *")
   .forEach(function(elem){ 
    if(elem.getBoundingClientRect().width > document.body.getBoundingClientRect().width){ 
      list.push(elem.outerHTML.split('>')[0] + '>'); 
    } 
}); 
confirm( "these elements are wider than the viewport:\n\n " + list.join("\n") )