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:
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 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: ?
Explores Navigator Object
Explores the navigator object data, for which data is suitable to track as a resource for the web development, and which data could be used to adapt det resource loading of the website.
It´s still (Mars 2019) a somewhat experimental data not available on all webbrowsers and not fully interpreted the same. But still, it now provides useful information to collect for better understanding of the use and the prerequisites for the computer surfing of visitors.
By having it on this web page one can check this data on the mobile in different location and observe how it influences the data. I start in that way, before I decide which data to track.
For the moment the Chrome webbrowser has most of the navigator objects data of browsers.
Navigator Object info:
JS Connection: ?
JS Do Not Track: ?
JS send.Beacon: ?
JS localStorage: ?
JS Touch event: 0
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():
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 windowTest of new Menu function!
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
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
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.
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.
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!
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.
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.