STYLE SWITCHER

Slate – Customizable Framework for Building Rich Text Editors

Slate – Customizable Framework for Building Rich Text Editors

Slate is a customizable framework that lets you build rich, intuitive editors like in Medium, Dropbox Paper or Google Docs.

Slate lets you build rich, intuitive editors like those in Medium, Dropbox Paper or Google Docs—which are becoming table stakes for applications on the web—without your codebase getting mired in complexity. It can do this because all of its logic is implemented with a series of plugins, so you aren't ever constrained by what is or isn't in "core". You can think of it like a pluggable implementation of contenteditable built on top of React and Immutable. It was inspired by libraries like Draft.js, Prosemirror and Quill.

Website
More
Muuri

Muuri

For the ultimate in flexible layouts, Niklas Rämö's Muuri is well worth a look. Its layout system enables you to position grid items of assorted sizes within a container in pretty much any way imaginable, and it's responsive, sortable, filterable and draggable. By default it'll arrange everything in a 'fit first' manner, but you can add your own layout algorithm for a different layout style.

FEATURES

  • Customizable layout
  • Drag & drop
  • Extensive API
  • Fast animations
  • Good browser support
  • Fully open source
  Website
More
Getting the_content WordPress Text Only (Strip Out Image Tags)

Getting the_content WordPress Text Only (Strip Out Image Tags)

Simple, powerful way to strip out any tags you want from the_content() in wordpress, using regex:

Get the_content() in wordpress without image tags:

$content = get_the_content();
$content = preg_replace("/<img[^>]+\>/i", "(image) ", $content); 		  
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
echo $content;

Get the_content() in wordpress without image and video (iframe) tags:

$content = get_the_content();
$content = preg_replace("/<img[^>]+\>/i", "(image) ", $content); 		
$content = preg_replace("/<iframe[^>]+\>/i", "(video) ", $content);             
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
echo $content;

Strip out any html tags from the_content() wordpress:

$content = get_the_content();
$content = preg_replace("/<embed[^>]+\>/i", "(embed) ", $content); 		
$content = apply_filters('the_content', $content);
$content = str_replace(']]>', ']]>', $content);
echo $content;
More
TOAST UI Grid – Grid Component to Display and Edit Data

TOAST UI Grid – Grid Component to Display and Edit Data

TOAST UI Grid is a powerful grid component that allows you to visualize and edit data via its table representation.

Features

  • Custom cell formatter & converter
  • Various input types (checkbox, radio, select, password, etc)
  • Full keyboard navigation (move, select, copy, paste, delete, etc)
  • Virtual scrolling (Handling large dataset without performance loses)
  • Copy & Paste using clipboard with 3rd party application (Like MS-Excel or Google-spreadsheet)
  • Column resize & reorder & show & hide
  • Multi column headers
  • Inline Editing
  • Validation
  • Selection
  • Pagination
  • Picking date
  • Sorting
  • Merging cell
  • Frozen(Pinned) columns
  • Relation between each columns
  • Binding to remote data
  • Summarize all values of each column
  • Customizing styles (Three basic themes)
  • Representing tree data
Website
More
Sal.js – Lightweight Scroll Animation Library

Sal.js – Lightweight Scroll Animation Library

Sal.js (Scroll Animation Library) is a performance focused, lightweight scroll animation library, written in vanilla JavaScript. It's based on the Intersection Observer.

Performance focused, lightweight (less than 2.8 kb) scroll animation library, written in vanilla JavaScript. No dependencies!

Sal (Scroll Animation Library) was created to provide a performant and lightweight solution for animating elements on scroll. It's based on the Intersection Observer, which gives amazing performance in terms of checking the element's presence in the viewport.

Note: Intersection Observer API is an experimental technology so be sure to consult the browser compatibility table and consider using a polyfill.

Website
More