Quill WYSIWYG Rich Text Editor

Quill: An API Driven Rich Text Editor

Content creation has been at the core of the web since its beginning. The <textarea> provides a native and essential solution to almost any web application. But at some point, you may need to add formatting to text input. This is where rich text editors come in. There are many solutions to choose from, but QuillJs brings a few modern ideas to consider.

Quill Rich Text Editor DasJs
Quill Rich Text Editor DasJs

The best way to get started is by trying a simple example. It is initialized with a DOM element to contain the editor. The contents of that element will become the initial contents of it.

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor">
<p>Hello World!</p>
<p>Some initial <strong>bold</strong> text</p>
<p><br></p>
</div>

<!-- Include the  library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize editor -->
<script>
var quill = new Quill('#editor', {
theme: 'snow'
});
</script>

And that's all there is to it!

Next Steps
The real magic of this library comes in its flexibility and extensibility.

SelectizeJs hybrid of text field and select dropdown

SelectizeJs is a combination of Text field and Select dropdown. It depends on Jquery and it has an input field with autocomplete feature. You can use it for tagging dropdown data. It is very small in size about 7KB.

The objective is to offer a stable & usable expertise with a clear and highly effective API.

SelectizeJs hybrid of text field and select dropdown
SelectizeJs hybrid of the text field and select dropdown

In order to use Selectize Js, You need to include jQuery and jQuery UI along with selectize.js in your project.

How to use SelectizeJs in the project:

Add jQuery and selectizejs before closing tag of 'body' (</body>): 

When you adding jquery in your project. Make sure that any version of jquery is not added before in your project. If it exists then don't include jquery library. In this case, only include selectize file.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/selectize.js"></script>

Add CSS file before closing tag of 'head' (</head>)

<link rel="stylesheet" href="selectize.css">

Add Input field in HTML

Now add input field inside the body where you want this feature.

<input type="text" id="input-tags" class="demo-default" value="awesome,neat">

 

Enable selectizeJs feature in this input field

Use id ("input-tags")  of the input field as a reference.

$('#input-tags').selectize({

  // An array of the initial options available to select; array of objects. 
  // By default this is populated from the original input element. 
  // If your element is a <select> with <option>s specified this property gets populated automatically. 
  // Setting this property is convenient if you have your data as an array and want to automatically generate the <option>s.
  options: [],

  // Initial selected values.
  items: []

  // Option groups that options will be bucketed into. 
  // If your element is a <select> with <optgroup>s this property gets populated automatically. 
  // Make sure each object in the array has a property named whatever optgroupValueField is set to.
  optgroups: [],

  // Custom delimiter character to separate items
  delimiter: ',',
  splitOn: null, // regexp or string for splitting up values from a paste command

  // If false, items created by the user will not show up as available options once they are unselected.
  persist: true,

  // Enable or disable international character support.
  diacritics: true,

  // Allows the user to create new items that aren't in the initial list of options. 
  // This setting can be any of the following: true, false (disabled), or a function to process input. 
  // The function can take one of two forms: synchronous (with signature function(input){} or asynchronous (with signature function(input, callback). 
  // In the synchronous case, the function should return an object for the options (eg, with defaults: return { 'value': value, 'text': text };). 
  // The asynchronous version should invoke the callback with the result in the same format as the object above (eg, callback( { 'value': value, 'text': text});)
  create: false,

  // If true, when user exits the field (clicks outside of input), a new option is created and selected (if create setting is enabled).
  createOnBlur: false,

  // Specifies a RegExp or a string containing a regular expression that the current search filter must match to be allowed to be created. 
  // May also be a predicate function that takes the filter text and returns whether it is allowed.
  createFilter: null,

  // Toggles match highlighting within the dropdown menu.
  highlight: true,

  // Show the dropdown immediately when the control receives focus.
  openOnFocus: true,

  // The max number of items to render at once in the dropdown list of options.
  maxOptions: 1000,

  // The max number of items the user can select. Null allows an unlimited number of items
  maxItems: 1,

  // If true, the items that are currently selected will not be shown in the dropdown list of available options.
  hideSelected: false,

  // If true, the "Add..." option is the default selection in the dropdown.
  addPrecedence: false,

  // If true, the tab key will choose the currently selected item.
  selectOnTab: false,

  // If true, the load function will be called upon control initialization (with an empty search). Alternatively it can be set to 'focus' to call the load function when control receives focus.
  preload: false,

  // Allows empty options.
  allowEmptyOption: false,

  // If true, the dropdown will be closed after a selection is made.
  closeAfterSelect: false,

  // The animation duration (in milliseconds) of the scroll animation triggered when going [up] and [down] in the options dropdown.
  scrollDuration: 60,

  // The number of milliseconds to wait before requesting options from the server or null. 
  // If null, throttling is disabled. Useful when loading options dynamically while the user types a search / filter expression.
  loadThrottle: 300,

  // The class name added to the wrapper element while awaiting the fulfillment of load requests.
  loadingClass: 'loading',

  // The placeholder of the control (displayed when nothing is selected / typed). 
  // Defaults to input element's placeholder, unless this one is specified.
  placeholder: undefined,

  // The <option> attribute from which to read JSON data about the option.
  dataAttr: 'data-data',

  // The name of the property to group items by.
  optgroupField: 'optgroup',

  // The name of the property to use as the value when an item is selected.
  valueField: 'value',

  // The name of the property to render as an option / item label (not needed when custom rendering functions are defined).
  labelField: 'text',

  // The name of the property to disabled option and optgroup.
  disabledField: 'disabled',

  // The name of the property to render as an option group label (not needed when custom rendering functions are defined).
  optgroupLabelField: 'label',

  // The name of the option group property that serves as its unique identifier.
  optgroupValueField: 'value',

  // If truthy, Selectize will make all optgroups be in the same order as they were added (by the `$order` property). 
  // Otherwise, it will order based on the score of the results in each.
  lockOptgroupOrder: false,

  // A single field or an array of fields to sort by. 
  // Each item in the array should be an object containing at least a field property. 
  // Optionally, direction can be set to 'asc' or 'desc'. 
  // The order of the array defines the sort precedence.
  sortField: '$order',

  // An array of property names to analyze when filtering options.
  searchField: ['text'],

  // When searching for multiple terms (separated by space), this is the operator used. Can be 'and' or 'or' .
  searchConjunction: 'and',

  // multi or single
  mode: null,

  // Default classes
  wrapperClass: 'selectize-control',
  inputClass: 'selectize-input',
  dropdownClass: 'selectize-dropdown',
  dropdownContentClass: 'selectize-dropdown-content',

  // The element the dropdown menu is appended to. This should be 'body' or null. If null, the dropdown will be appended as a child of the Selectize control.
  dropdownParent: null,

  // Copy the original input classes to the dropdown element.
  copyClassesToDropdown: true,

  //  Custom rendering functions. Each function should accept two arguments: data and escape and return HTML (string or DOM element) with a single root element. 
  // The escape argument is a function that takes a string and escapes all special HTML characters. This is very important to use to prevent XSS vulnerabilities.
  render: {
    /*
    item: null,
    optgroup: null,
    optgroup_header: null,
    option: null,
    option_create: null
    */
  }

});



That's it. Now your input field works as autocomplete tag.

See the Pen Selectize JS Library Demo

VelocityJs a Javascript animation engine

VelocityJs is an animation engine with the identical API as jQuery's $.animate(). It really works with and without jQuery. It is extremely quick, and it options shade animation, transforms, loops, easings, SVG help, and scrolling. It's the better of jQuery and CSS transitions mixed.

Download Velocity, include it on your page, and replace all instances of jQuery's $.animate() with $.velocity(). You will immediately see a performance boost across all browsers and devices — especially on mobile.
Compatibility
VelocityJs works everywhere — back to IE8 and Android 2.3. Under the hood, it mimics jQuery's $.queue(), and thus interoperates seamlessly with jQuery's $.animate(), $.fade(), and $.delay(). Since Velocity's syntax is identical to $.animate(), your code doesn't need to change.

Velocity (CDN, choose one of them):

<script src="//cdn.jsdelivr.net/npm/[email protected]/velocity.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/2.0.3/velocity.min.js"></script>

Velocity UI pack (CDN, choose one of them):

<script src="//cdn.jsdelivr.net/npm/[email protected]/velocity.ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/2.0.3/velocity.ui.min.js"></script>

Please note that JSDelivr can automatically supply the latest release, while CloudFlare needs to ask for a specific version.

Automagic chaining:
If using the .velocity(...) chained function in libraries such as jQuery or Zepto you need to ensure that Velocity is loaded after them. If you wish to add it to anything loaded afterward then look at the Velocity.patch() method.

AnimeJs a Javascript animation engine

Animejs is a lightweight JavaScript animation engine library. It can be work with any CSS properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects.

How to use animejs DasJs

Creating animations with web technologies can be tricky however as there is a great deal to consider and numerous approaches to making them.
In this post, I will use anime.js, an incredible and exceptionally adaptable Javascript animation library written by Julian Garnier.

Adding Anime.js library is the same as including jquery or other javascript libraries. See Github section below for downloading and installation.

How to use History api in web development

First thing comes to our mind.   Why should we use History API? How to implement it in our web development?

I am explaining all these queries one by one.

What is the history API?

As its name, It stores URLs visited by the user. It only stores URL open on the browser not loaded by an asynchronous call. for example, it doesn't store URL requested by ajax.

What can we do with stored URLs by history object/API?

  • Suppose you want to make a single page application. It means if you want to show different sections. You will use the hash (#) tag in URL. For example:
    baseurl: http://localhost/history/index.php
    If you want to load the contact section. You use something like below
    http://localhost/history/index.php#contact
    Your purpose will be solved but it's not SEO friendly. History API will help you to change URL without refreshing page.
  • History API changes URLs and contents change by ajax request. So, the page loads quickly.

How to use History API.

It's very simple to implement. It has many methods. But we only have to concentrate on two methods.

1. pushState
2. replaceState

and one event: popState

These two methods control the browser history.

pushState: It adds history entries in the stack. For example,
suppose you have visited URL index.php then click on any link contact.php then visited how-to.php then contact.php then how-to.php then index.php

pushState store history in the same manner.
index.php >> contact.php >> how-to.php >> contact.php >> how-to.php >> index.php

If you click the navigation button, you will navigate in the same manner.

replaceState: It replaces existing history entry with current entry.
Every time you visited any URL, It replaces existing history with a new one.

popState event fired when you navigate from a page using the back button.

Our objective is to store the URL in history when visited any page. the pushState method will be used there.

Syntax:
history.pushState(state,title,url)

state:
This is a JSON object associated with new entry created by pushState. Its size limit is 640K characters on the serialized representation. If size is larger than this, pushState method throw exception.

title: In a modern browser, No need to use it. Set it as null
url: Which url you are going to store in history

I have explained everything by example. Please watch this video.