Autonomtech´s Logo
The Art of Technology
 

Experimental web page


My platform for web development!
Finds out the web technologies about performance timing, resource timing, performance timing marks and web page optimization. Also tests out new experimental technology for improving my web pages function and performance. And learn and get familiar with new standards / technologies, before I implement them one my web pages. Experimental web code.

 

Testing some font sizes for the body text:
|XX Font Size 20px XX||XX Normal Font Size XX||XX Font Size 18px XX||XX Large Size XX|
Your Body Text Is Too Small


Explores Performance Timing
Explores performance and navigation timing considering how it can be used for data tracking of the web pages. To be able to understand how my web pages work, to see what performance improvements I make and to see which things influenses the web performance, like hardware and downlink speed as well as the critical rendering path.


The differens of local client time and server time:
JS Diff time: Client - Server: ?
JS difference Local time - UTC/GMT: ? (s)
JS difference Local time - Europe/Berlin: ? (s)
Php difference EuBerlin - UTC/GMT time: 3600 (s)
Php Date RequestStart Europe/Berlin: 2019-03-22, 00:01:15.304

N.B. Server time stamps:
Different metods getting server time stamps:
REQUEST_TIME_FLOAT: 1553209275.304052
TheTimeStart: 1553209275.308745
gettimeofday(true): 1553209275.346076
microtime(true): 1553209275.346078

Server Time To Load Php-Script: 4.693 (ms)
Server processing time web page code: ?

N.B. Client time stamps:
JS Ping, Round Trip Time (RTT): ?
JS Ping2, Round Trip Time (RTT): ?
JS Navigation request start: ?
JS Time To First Byte (TTFB): ?
JS Diff time: Client - Server: ?

PerformanceTiming - Navigation Timing API
JS Time unload previous web page: ?
JS ∑ Time make connection: ?
JS App cache load time:
JS DNS Lookup time:
JS SSL handshake time:
JS Request response time: ?
JS Html document load time: ?
JS DOM rendering time: ?

Navigation Timings graph
JS Navigation start: ?
JS Navigation fetch start: ?
JS App Cache loaded: ?
JS DNS Lookup done: ?
JS SSL Done / Connect End: ?
JS Navigation request start: ?
JS Navigation response start: ?
JS DOM Loading start:
JS First-paint: ?
JS Time First-Contentful-Paint (TFCP): ?
JS DOM Time To Interactive (TTI): ?
JS DOM Loaded & Parsed Event: ?
JS DOM Rendered: ?
JS Page Load-Event: ?
JS Page Load-time: ? - loadEventEnd
JS Page Fully loaded: ? - last resource responseEnd or loadEventEnd

Time marks measured by performance.mark():
JS Main CSS stylsheet preload: ?
JS navigator.sendBeacon Queued: ?
JS Main CSS stylsheet loaded: ?
JS Main Pane web page begin: ?
JS Footer Text web page begin: ?
JS Navigation bar web page begin: ?
JS Menu Pane web page begin: ?
JS Footer bar web page begin: ?
JS JavaScript Section end body begin: ?
JS Body Tag web page end: ?
JS PhpTrackIT JSimg preload begin: ?
JS PhpTrackIT JSimg preload loaded: ?
JS PhpTrackIT JSimg preload duration: ?
JS First client interaction: ?

JS Resource Timing (delayed 1500ms): duration (responseEnd)
(Only CSS, beacon, fetch & my JSimg resources are displayed.)
( TotalTime = Sum of all time spent in parallell downloads.
)
?

More Events one can use to controle the critical rendering path:
(Interactive = DOM Interactive, Complete = DOM Rendered)
JS addEventListener-readystatechange: ?
JS document.onreadystatechange: ?




Navigator Object info:
JS Connection: ?
JS DownlinkMax: ?
JS Do Not Track: ?
JS send.Beacon: ?
JS localStorage: ?
JS Touch event: 0

Auxiliary Data:

Browser plugins installed:


Memory used: 1511 kbytes
Memory used: 2048 kbytes
Memory peak used: 1531 kbytes
Memory peak used: 2048 kbytes

Retrives a temp value string from temperatur.nu, by php file_get_contents():
To make my own async JavaScript using document.getElementById("demo").innerHTML

Test: return (temperature)value via Fetch API:
The temperatur data is cached (1) in client sessionStorage and (2) on web server, for 300s. Thus lowering the load at temperatur.nu.


Hide / show a menu by moving it out of the browser window

Test of new Menu function!



DIV-tag as display table-cell.
With vertical-align middle.

Table based Navigation bar test:
vertical-align:middle; height:calc(100% - 4px);


Below is the start page content of autonomtech, to have as reference when testing.

Web development tools

Link Library Link Library:
A link library of useful quality links within web coding:
  • Code References
  • Test, Verify & Optimize
  • Coding Hints, Tips & Help
  • Blogs & Security
  • IDE, Integrated Development Environment
  • Free Resources
  • Code Frameworks & Libraries
Tool Responsisualizer Responsisualizer, device screen simulator:
 Free tool to use. 
  • A responsive web page multi-device screen simulator.
    Visualizes a web page in 18 different screen resolutions simultaneously, in live functional simulated device views.
  • Views pages in real world restricted browser viewports.
  • Magnifies a device screen to scale 1:1 in lightbox mode.
  • Uses 18 popular browser viewports from real world tracked visitor data!
  • Useful both for a check of the responsive action and for verify the design layout of the web page at different screen sizes.

Live Demos

  1. Demo GuestBook Guest Book: A captcha free, user friendly and robot spam safe guestbook! You can try it out and see a demo of it here.
    (And write a message to me, if you want :-) or just test it!)
    With emoticons gallery, where one can add more own emoticons.
  2. Demo PhpTrackIT PhpTrackIT visit logger - explore my demo of it, tracking this site!
    Distinguish between Human and Robot visits, with high accuracy!
    Focuses on visualising trends of numerous visits! Gives facts and figures of your visitors logged tracks on your website!
    Shows statistics details of the hardware used at the client sida.
    Is an efficient tool for evaluating and visualizing the website.
    N.B. In the PhpTrackIT demo is not all tracked details displyed when not logged in, because I care about some privacy aspects of my website!
  3. Demo Responsisualizer Responsisualizer: A responsive web page multi-unit screen simulator. Visualizes a web page in 18 different screen resolutions simultaneously. View your web pages in real world restricted browser viewports. Free tool to use.
  4. Demo PhpGallery PhpGallery: A photo gallery script.
    Automatically crop photos to thumbnails and large photos, and creates image text files. Also creates an index file of the photos display order and the page pagination.
    View thumbnails in a gallery style layout, with small captions to the photos, clickable into larger photo in lightbox mode.
 

For the moment I code:

  • A Guest Book script called Guest FootPrint IT - GfpIT Guest Book.
  • An advanced visit tracking software - PhpTrackIT.
  • A responsive web multi-screen simulator - Responsisualizer.
  • A photo gallery script - PhpGallery.
  • My "Sinunomous" Web Platform, which I use for this site. From Sinus & Autonomous.

Which all are planned to be released as free open source software in the future.


 

Technical links

Current operational situation of electricity in Scandinavia - Map: Production & consumption



Visa BesöksStatistik:
BesöksStatistik

Loggat av: PhpTrackIT 0.9.3.8beta
(max 1 besök loggas per 3.0 hr per unik besökare¹ och webbsida)

Hela webbplatsen:
- Webbsidor¹ senaste 30 dygnen: 179 av personer² & 1084 av robotar²
- Webbsidor¹ senaste 24hr: 5 av personer² & 48 av robotar²

- Unika besökare¹ senaste 24hr: 1 personer², 18 robotar²
- Webbsidor per unik besökare senaste 24hr: 5.0/person², 2.7/robot²

- Unika besökare¹ senaste 30 dygnen: 31 personer², 295 robotar²
- Webbsidor per unik besökare senaste 30 dygnen: 5.8/person², 3.7/robot²

- Snitt senaste 30 dygnen (webbsidor/24hr): 6 av personer² & 36 av robotar²
- Snitt senaste 30 dygnen (unika besökare/24hr): 1.0 personer² & 9.8 robotar²
- Robotar utgör 85.8% av besöken senaste 30 dygnen

- Max webbsidor/24hr: 621 av personer, 2017-02-21
- Max unika besökare/24hr: 113 personer, 2018-08-14
- Max webbsidor/30dygn: 1046 av personer, 2017-02-24
- Max unika besökare/30dygn: 175 personer, 2018-08-15
  Max statistik loggad sedan: 2017-01-18

- Server time uses for PhpTrackIT logging:
- Primary log: 33.7 ms (log time part affecting webpage load time)
- Secondary log: XXX ms (asynchronous log time not affecting webpage load time)
- Ping time (Server-Browser-Server Internet round-trip time, via Php/Ajax): XXX ms
- ServertimeThis: 15.8 (ms), inclusive Includetime: 2.1 (ms)

¹ Enligt en anonym unik virtuell besökare algoritm (UVV, Unique Virtual Visitor).
² Enligt en robot-igenkännande algorithm som effektivt skiljer på robot- och person-besök.

 
.....
Autonomtech
Webpage: server time: 59.9 ms, (incl. log: 50.7 ms) ||