Experiment: 100kB limited frontend library RevolveR micro

Dmitry — Wed, 31 Oct 2018 13:03:33 +0000

An experiment

For my small CMS RevolveR I was need a frontend library thats can do Fetch requests and animate 3D CSS with modules for HTML markup editor and HTML form beautifer.

So. I took the mountain of my old snippets and rewrote everything in the same style on ES7.

What is Revolver

Front-End JavaScript library Revolver micro -- is a simple, powerfull and lightweight(only 95Kb of uncompressed code) solution with no dependencies to work with DOM elements and their properties including a lot of modules to make posible using tabs, slider, modal windows, fetch requests and other things.

Connecting a script

Revolver core includes an auto initialization modules. To run library under the document you'll need to connect bootstrap and place a code in #revolver script tag. Example:

<script src="./app/revolver.js?prod=1.0.8" async id="revolver"> // charging weapons with namespace const revolver = new Revolver('$'); // now you cant shout with $ let element = $.dom('.someclass:first-child'); </script>

You can use any namespace for better code style.

CSS mobile schema

Revolver automatically connect a bootstrap css from library and listen window size changes to switch it into mobile mode.

mobile.css: schema for screens less then 320px to 1920px and mobile browser UA;

Variables

library keeps some variables in self namespace:

$.isM() - if mobile browser this code returns true.

$.sizes[] - static window sizes contains [width,height].

$.currentSizes[] - actual document sizes automatically refreshed in time contains [width,height].

$.curxy - actual mouse position with x and y statements.

$.curOffset - actual scroll position in offsets x and y.

$.startIndex - first opened page title(used only for correct work of location module)

Location API

Revolver provides a correct work with browsers history API using location module. For example:

$.location('Page Title','http://somedomain.com/index.html', function(){console.log(this)})

You can write you own fetch router using this module to correct switching of page title and url. This module not mean that document will be reloaded it's only provide interface changes.

Form styler

This module decorates the all defined in core form elements such as selects or labels.

$.formStyler();

Markup editor for textareas

This is a simple HTML markup editor thats should be atomaticaly switched to all textareas in forms uncluding basic markup buttons.

$.markupEditor();

DOM engine

There are few methods to do something with DOM elements.

$.dom('selector') returns a stack of suitable HTML elements. Avalible simple selectors like #obj .class tag and prefixes to finding last and first elements in document - '$.dom('#tabs .tabactive code:first-child') or $.dom('body p:last-child, ul li:first-child'); DOM engine supports a multiple selectors.

To creating new DOM element you can use 'new' instruction with syntax in example:

$.dom('dfn',"new|before|footer:first-child", { html: '<a style="color:#b06400" href="#">version 0.5 alpha</a>', attr: { style: "color:#b06400; text-align:center; display:block" }

To deleting an element you can use 'del' instruction:

$.dom('.prost, div', "del");

To instert html or text data into element you can use:

$.insert($.dom('h1'),'<b>test</b>');

To wrap elements:
$.dom('span', 'wrap', 'section')

To unwrap elements:
$.dom('section', 'unwrap',)

To replace:
$.dom('span','replace','<div>hey</div>')

DOM Styles and attributes

Revolver can set attributes of html elements or manipulate with style atribute. In example to setting, getting or deleting attributes you'll need to use next syntax:

$.attr('h1', {'data-test': 'some value'}); - set attribute or attributes.

$.attr('h1', {'data-test': null}); - delete the attribute.

$.attr('h1', 'data-test, style, etc'); - get attributes values.

To styling a CSS you can use:

$.dom("html","style",['background:rgba(233,246,255,.8)','color:#111']);

There are some methods for manipulate with Class attribute:

$.addClass('#some','class-test');

$.removeClass('#some', 'class-test');

$.hasClass('#some', 'class1 class2 class3'); //returns true if all classes defined for element #some

and

$.toggleClass('#some', 'class-test');

Animations

Animation engine allows to animate some of CSS properties like width, height, colors, margins, padding, font-sizes and CSS3 transforms like rotate, skewX, skewY, translateX, translateY and scale:

$.dom("#mainContents","animate",['border-radius:25px 0px:100:pulse']);

$.dom("a:first-child", "animate", ['transform:rotate(360deg) scale(0.7):2000']);

$.dom("h1:first-child", "animate", ['color:brown:3000:pulse'])

Every propertie have a different duration time and different easings.

Availible effects: easeIn, easeOut, easeOutQuad, easeOutCubic, easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint, easeOutQuint, easeInOutQuint, elastic, easeInElastic, easeOutElastic, easeInOutElastic, easeInSin, easeOutSin, easeInOutSin, easeInCirc, easeOutCirc, easeInOutCirc, easeInQuad, easeInExpo, easeOutExpo, easeInOutExpo, easeOutBounce, bouncePast, bounce, radical, harmony, back, expo, easeOutStrong, easeInBack, easeOutBack, swingTo, swingFrom, spring, blink, pulse, wobble, sinusoidal, flicker, mirror.

Show and Hide modules

Ещ showing and hiding elements with height animation Revolver contains functions $.hide() and $.show():

$.show('#elem', 800);

$.hide('#elem', 1300);

Tabs module

To styling contents like tabs:

$.tabs('#tabs li', '#tabs div', function() { });

Rotate module

Rotate module is a simple slider.

$.rotate('#presentation p', function(){}, 1500);

Modal box API

TO creation a modal windows you can use GrayBox API.

$.modal('Get FE Revolver Micro','<a target="_blank" style="color:#b06400" href="./app/Revolver.js">version 1.5</a>',[500,200]);

Where first argument is title, second argument is content and third argument contain array of sizes [width,height].

Hint API

Intended to showing a hints thats contains text from setted attribute. Example:

$.hint('a', 'data-title');

FETCH module

Fetch module allow you application to receive content asynchronously with different methods and types of сontent.

$.event('input[type="submit"]', 'click', function(e) { e.preventDefault(); let data = new FormData(); let form = $.dom('#test input[type="text"]'); for(var j in form) { data.append( form[j].name, form[j].value ); } $.fetch('http://test:88/post.php','POST','text', data, function(){ $.log(this) }); });

Fetch submit module

This module alows you to submit form data automaticaly using fetch

$.fetchSubmit('form', 'text', function(){ $.modal('Form API test :: sended variables', $.findHTMLByTag('pre', this)[0].outerHTML, [800, 300]); });

Avalible methods POST and GET.
Avalible content types text, json.

Third argument contains POST or GET query variables.

findHTMLByTag module

This module allow you to find some HTML content inside some HTML content by using tag or CSS selector.

$.findHTMLByTag('#root', rootHTMLElement)

Storage module

Storage module provides a simple API to use local storage.

$.storage(['Revolver={"js library": "1.0.8"}'],'set'); - set a values.

$.storage('data-test', 'get'); - get value.

$.storage(['data','testing'], 'del');- delete values.

Cookie module

Storage module provides a simple API to use cookies.

$.cookie(['Revolver={"js library": "1.0.8"}'],'set'); - set a values.

$.cookie('data-test', 'get'); - get value.

$.cookie(['data','testing'], 'del');- delete values.

ExternalJS

To connecting external JS file in async mode you can use next API:

$.externalJS('http://domain.com');

Scroll

You can use smooth scroll animation to a targen element using api

$.scroll() // sets position to top of page with smooth and opacity animation

$.scroll('#target_element') // set screen position to target element and animate opacity of target

Events API

Events API supports all registered events for add event listener. An example of click event adding:

$.click('aside h3', 'click', function(e){ e.preventDefault(); }); - click event;

FireEvents

Events API gives you to simulate events like click or submit using API:

$.fireEvent('aside h3', 'click', function(e){ e.preventDefault() })

Helpers

Revolver core contains a lot of helpers to improve and simplify development of your own modules and API. You can see it in plain code.

Conclusion and source

So. As an experiment, I was able to tamp everything down with 95kB of code and even a bit more from jQuery and get rid of the UI dependency on the bootstrap.

Sources: RevolveR on GitHub.
Project site: CyberX.

Writing RevolveR CMS just for fun

Dmitry — Thu, 18 Oct 2018 15:36:49 +0000

RevolveR CMS is a fast, simple and powerfull contents management system based on PHP 7 language with MySQL DataBase used file cache intended to create news sites, blogs and forums writed just for fun at 6 month of coding.

RevolveR CMS is secure and mobile friendly system with perfect SEO compability. It have full dynamic load pages support, Google AMP and Yandex Turbo pages solutions.

In a case I don't like to use any third party components and write all code self( including Data Base Wrapper X and frontend library Revolver used ES7 solutions so this CMS not intended to use with browsers older than IE Edge).

I was pushed into implementation by slowly Drupal 8 realisation with very hard and dificulty simphony sources. I want to use CMS fast and simple and want to be it payments free for me and other peoples.

Few days I'am looking at WP and other CMSes and lets write my own condition. That's what happened:

1). No dependencies and server requirements(minimal PHP modules requirements).

2). Speedy, lightweight, simple.

3). Self database engine with structures based queries.

4). Self frontend library RevolveR coded in ES 7 JavaScript.

5). Full fetch support of dynamic forms and interfaces.

6). Support of user accounts.

7). Support user points.

8). Full humanity, secure and powerful router(good links for contents).

9). Self developed very simple captcha secure front-end crypted.

10). Support of contents creating with range of categories.

11.) Commenting support.

12). Uploads support.

13). SEO friendly.

14). Self contents editor.

15). Friendly installer.

16). Private messages support.

17). Email notifications support.

18). Twilio SMS notify support

19). Simple forum.

20). Roles support.

21). Internal SEO statistics and tics counters with detailed information about what pages users like more.

Performance is a strong side of RevolveR CMS:

1). 0.5 Mb memory needed with clean website;
2). only one query to DB needed to render cached site;

For a winter time I plane to do some reconstruction of core and add an ecommerce shop module.

Requirements: any Linux Apache, PHP 7, MySQL webhosting. I am not recomend to install it to Windows hosts because all developments was done under Mac OS + MAMP.

All critics are welcome.

Sources github
Devel website and demo

DEV Community: Dmitry