sadeghbarati

Using barba.js with Sage starter theme

Barba.js is a library using pushState and AJAX allowing websites to load pages asynchronously while still maintaining browser states and history.

Combining it with some JavaScript animations libraries can help craft some memorable browsing experiences.

source

In this guide, we will try to find an optimal way to integrate Barba with our beloved Sage theme !

sadeghbarati

<form id="form">
  <input type="name" name="full_name" />
  <input type="file" name="image" />
  <button type="submit">Submit</button>    
</form>

// Fetch

sadeghbarati

<?php // You need to add server side validation and better error handling here

$data = array();

if(isset($_GET['files']))
{  
	$error = false;
	$files = array();

	$uploaddir = './uploads/';

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") )

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

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

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

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

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

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.