STYLE SWITCHER

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
Lazy Load Images for Website Performance

Lazy Load Images for Website Performance

Lazy loading images means loading images on websites asynchronously — that is, after the above-the-fold content is fully loaded, or even conditionally, only when they appear in the browser’s viewport. This means that if users don’t scroll all the way down, images placed at the bottom of the page won’t even be loaded.

Why Should You Care About Lazy Loading Images?

There are at least a couple of excellent reasons why you should consider lazy loading images for your website:
  • If your website uses JavaScript to display content or provide some kind of functionality to users, loading the DOM quickly becomes critical. It’s common for scripts to wait until the DOM has completely loaded before they start running. On a site with a significant number of images, lazy loading — or loading images asynchronously — could make the difference between users staying or leaving your website.
  • Since most lazy loading solutions work by loading images only if the user has scrolled to the location where images would be visible inside the viewport, those images will never be loaded if users never get to that point. This means considerable savings in bandwidth, for which most users, especially those accessing the web on mobile devices and slow-connections, will be thanking you.
<img data-src="image.jpg" alt="test image">
img {
  opacity: 1;
  transition: opacity 0.3s;
}

img[data-src] {
  opacity: 0;
}
JavaScript then adds the src attribute to each img element and gives it the value of their respective data-src attributes. Once images have finished loading, the script removes the data-src attribute from img elements altogether:
[].forEach.call(document.querySelectorAll('img[data-src]'),    function(img) {
  img.setAttribute('src', img.getAttribute('data-src'));
  img.onload = function() {
    img.removeAttribute('data-src');
  };
});
Website
More