Here is the example of online schedule, where one can track vacations, sickleave or absent days of employees.

Schedule can be easily administered through back office form, which stores date into mySQL

Application allows to read the amount of work, sickleave and no-show days within the selected period. Just click firstly start and then end date to see the result. To see working example load application and select 2024 in select box. All demo entries refer to this year.

Replies   1

If you put aside all huge buzz around AI, you will stay with a simple case, when object , moving along its path, encounters obstacle or similar problem, and tries to solve it, find way around, using algirithms it has on board. This 'reactive machine' type of behaviour can be easily demonstrated with an example below.

It's not serious, really. But one can see how interesting and realistic natural simulations can look like, being achieved with simple methods

You can drag obstacles to make it difficult for the rocket to avoid them

Start/Stop Rocket

Rocket moves around it's space, changing angle and direction each time it meets bounaries.
Random motion is simulated through the piece of code, which allows rocket to find a way around each time it approaches obstacle

Rocket loops through array of obstacles coordinates and calculate distance from each of them.
If it gets too close to one of obstacles, angle will be calculated.

To avoid obstacle mutual attraction formula will be used.
If mutual attraction will be calculated as follows:

F = (G m_1 m_2 / r^2)* r For repellence simulation we do not need G constant and masses, but take negative value, while we need change direction of rocket. Translated into code repellence formula can be written as simple as that:

var force = -1 * someModulator/ (mag * mag);

After that BC -normalized vector, multiplied by 'force', will be subtracted from velocity vector AB. Result -vector AC safely takes rocket away from obstacle. Picture displays general approach-for our purpuses we need normalized vectors.

This a very simple simulation example. More interesting version is 3d space for rocket. Anyway it s interesting how many ideas can be realized with rather simple methods. Lots of inspiring ideas could be found in 'Nature of Code'- book by Daniel Shiffman

Usind css 3d to create rotating menu

One can achieve interesting effect using css perspective and 3d to build rotating selector image, to let user select the service or topic. Click on the image to rotate it.

I have added a couple of layers on front and back side, which contain clouds, air balloon, airplane and their shadows to make 3d effect more realistic.

After selector image makes it 180 deg turn after user clicks it, the new set of links will be displayed beneath.

Links are displayed in random order and are turned to random angle.

Start/Stop morphing

English

English

Replies   2

Animated blocks of web-pages belong to history. One reason for that is that Adobe Flash was not supported for several years and most popular browsers excluded it's plugin for good

Another reason for that could be lack of demand for the animated content-public was more interested in flat, easily undersood pages.

Web turned into market place in last decade-and customers should get shortest way to 'pay' button. Any distraction here was not welcome.

Though one can still experiment with CSS, canvas and Javascript to achieve most interesting effects. You can select the image you want to be morphed, clicking on thumbs below. Slider range changes the size of grain.

Start/Stop

Using SVG can add considerable advantage to the looks of your webpage. Vector graphic instruments allow to add visual elements to page to enhance its visual performance

More interesting could be to use SVG filters and even animate properties of these filters.

One of mostly interesting filters is Perlin Noise. Though one should keep usage of such elements limited.

Below is the example of such animated filter. Flag blowing in the wind is most trivial way to illustrate Perlin Noise in action.

Start/Stop morphing

Firstly you need to define filter. Add filter id to css definition of element

<svg xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" id="svgNoise" class="u-svg-none">
<defs>
    <filter id="noiseEffect" 
    filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">
      <feTurbulence type="fractalNoise" 
      baseFrequency="0.003" numOctaves="1" seed="1" 
      stitchTiles="stitch" result="particle">
      <feDisplacementMap scale="80" 
      in="SourceGraphic" in2="particle" 
      xChannelSelector="R" yChannelSelector="G">
        
      </feDisplacementMap>

	</defs>  
    
  </svg>

Set js function to animate filter. Filter is just part of DOM and you can assign JS variable name to it

const filter = document.querySelector("#noiseEffect");
let bf=0.001;
let runs=false;
var sd=1;
let sc=80;
  const filterElement = filter.querySelector('feTurbulence');
  const filterElement1 = filter.querySelector('feDisplacementMap');
  document.getElementById('btn').addEventListener("change", function () {
if(!runs){
interVal=setInterval(step, 200);
runs=true;
}
else{
clearInterval(interVal);
 runs=false;}
  });

To animate filter call function step() each 200 msc to change filter attributes. It requires sertain effort to ajust interval and attribute range to modify for the final result to look good. Here is a quick and rough solution, but it is place to start.

To achieve 'flag in the wind' effect i modify base frequency within 0.004 and 0.008, scale within 80 to 110. Exeeding these valued leed to distortion of image.

let bfi=1;
let sci=1;

function step(){

sd+=1;

if(bf>=0.008){bfi=-1;}
if(bf<=0.004){bfi=1;}
if(sc>=110){sci=-1;}
if(sc<=80){sci=1;}
bf+=0.0002*bfi;
sc+=3*sci;
filterElement.setAttribute('seed', sd);
filterElement.setAttribute('baseFrequency', bf);
filterElement1.setAttribute('scale', sc);
} 

Replies   3

Whatever site you run, it is designed to generate conversions. People read articles, subscribe to news, download documents, checking out product descriptions before adding them to shopping cart -all that can be evaluated through conversion rate trackers.

It is important to know, what sections of web site or products are mostly interesting to your visitors, to add or remove them to increase conversion. There are lots of offers out there with heatmaps and session recordings plugins, where sophisticated software tracks users behaivoiur and offers solutions.

But sometimes things should not be that complicated. Especially when you run small business and do not need/can not afford complex conversion analytics

To find out what layout template on my templates page gets most views , I simply let function, attached to "View more" button, change variable, responsible for clicked product, from "0" to "1". I know now, that user viewed this product and is potentially interested in it. You, on your side, may have there product cards with videos, cats food, hand made mugs, bycicle spare parts etc..etc..on you page- as a result you will get list of products, that people would bue.

function linksTrack(variable responsible for particular product){
window['variable responsible for particular product']=1;
}

After visitor leaves page, I have an array of variables, indicating clicked/not clicked product cards. Using 'onbeforeunload' handler I send them to back end page, which calculates conversion.

window.addEventListener('beforeunload', (event) => {
navigator.sendBeacon("handleDuration.php", data);
delete event['returnValue'];
});

Conversion is calculated to following formula

Results will be stored and used later to build a nice diagram to display user preferences. Actually this simplified example represents general approach used im most complicated solutions.

To visualise the results , I used great collection of Google charts- very useful instrument to display on your web site any type of statisics data. Many thanks to Google team for their great work.

Replies   3

Example implements JSON. JSON is collection of name/value pairs in text format. Virtually all modern programming languages support them in one form or another.
1) Quiery string (default-"all") is sent to server php file
xmlhttp.send("x="+quiery string);
2) Php file addresses MySql database and fetches corresponding data.
Data ,received from database would be encoded as JSON
$JSONstring = json_encode($dataFromMySql);
3) XMLHttpRequest parses received data
JSON.parse(this.responseText);
4) Table would be built in a loop

Let header rotate

Text on Webpage

Website texts are the most important part of web sites. This is why user comes to site. These texts are created especially for use on the Internet.

Some specific features differentiate website texts from printed texts. One should implement specific HTML design and think on SEO optimization.

• The paragraphs should be short. Each paragraph deals with no more than one subject matter.
• The text must be divided into many subheadings.
• The text should include links.

Though sometimes you may be interested in some uncommon text display.Check web page template with rotating menu, to see how this approach can be implemented

Acctually there is no limit beside you imagination on how you display text on your page. One should be careful though and avoid approaches that can make it difficult to perceive the content

Heading with splitted text

Heading are the first point,where the content would be evaluated and visitor takes decision if he is interested to stay longer on page

Atrract attention here is an effort worth while. Below is splitted heading made with svg

Randomly scattered text

Such text block could be successful when it contributes to the user performing the desired conversion. These texts generally work according to a simple principle – first by arousing interest, and then by providing a quick and simple solution. Though you schould be careful about any text effects that can provide difficulties for user to read it quickly. Remember that any animation effects should be implemented only at the point, where they are appropriate.

Text around shapes

Sometimes you do not need rectangular forms of images on page, but may be interested in more natural, curved outlines. There is no better way to convey pleasant, informal, relaxing atmospere, as to use pictures, where background surfaces seem to be cut out and text floats accurately around the outlines of objects, depicted on photo. To achieve this effect CSS offers great tool-the whole collection of shape instruments. After you selected the picure and decided where you want to place it, you have to define polygon coordinates to let text float nicely around the image area. Select text with your mouse to see the image-polygon shape outlines.
Here is just the simples example, but imagine what individual note such approach can provide to web page. Padding and margin properties can be also set appropriately, if visual implementation demands it.

This is class definition in style section:.img1{ float:right; clip-path:polygon(51px 132px, 23.06% 27.06%, 13.79% 19.38%, 31.55% 11.10%, 35.77% -0.16%, 100.03% 0.02%, 100.4% 98.77%, 81.31% 86.61%, 72.12% 76.51%, 57.38% 75.78%, 44.93% 71.17%, 18.38% 70.93%, 0px 204px, -1.06% 43.03%); shape-outside:polygon(51px 132px, 23.06% 27.06%, 13.79% 19.38%, 31.55% 11.10%, 35.77% -0.16%, 100.03% 0.02%, 100.4% 98.77%, 81.31% 86.61%, 72.12% 76.51%, 57.38% 75.78%, 44.93% 71.17%, 18.38% 70.93%, 0px 204px, -1.06% 43.03%); }

More examples on custom text usage is on code snippets page on product cards

Scattered Text Example

Replies   1