Autonomtech´s Logo
The Art of Technology

Link Library

A link library of useful quality links within web coding.

Code References
Main link Description and further information.
Can I use Check the cross-browser support of HTML and CSS tags, and SVG and JS API commands - as CSS inline-block.
PWA Is serviceworker ready? - Yes! Info about which browsers has implemented the serviceworker and the other functions needed for PWA.
W3School Html5, CSS, JavaScript, XML, Character Sets, Php, SQL & ASP referenses, syntax, tags, code examples and tutorials.
HTML Entity, aliases for special characters, as for & is & used WDG Intities is very detailed and with both Latin symbols and Greek characters.
EntityCode shows probably the most special characters in the ISO Latin character set and its HTML entities, clearly divided into categories.
Freeformatter HTML Entity List, Complete list of HTML entities with their numbers and names. - html5 charref, graphical with a lot of arrow symbols, etc.
HTML Named Special Symbols Aliases for: Characters with Special Meaning in HTML, Punctuation, Interesting Characters and Symbols, Foreign Characters, Card Suits, Mathematical Symbols, Arrows & Greek Alphabet.
Javascript Key Codes Javascript Key Codes, Interactive Demonstration and Lookup Table.
KeyCodes, what keyboard events report based on what keys are pressed. KeyboardEvent Value (keyCodes, metaKey, etc).
HTML DOM Element Object In the HTML DOM (Document Object Model), everything is a node. In the HTML DOM, the Element object represents an HTML element. (JavaScript) - W3Schools
HTML DOM Events HTML DOM events allow JavaScript to register different event handlers on elements in an HTML document. Events are normally used in combination with functions, and the function will not be executed before the event occurs (such as when a user clicks a button). - W3Schools
HTML DOM Style Object The Style object represents an individual style statement. (JavaScript) - W3Schools
HTML5 Semantic Elements HTML5 offers new semantic elements (tags) to define different parts of a web page (SEO). Semantics is the study of the meanings of words and phrases in a language. Semantic elements = elements with a meaning.
HTML <link> rel Attribute The required rel attribute specifies the relationship between the current document and the linked document/resource. - W3Schools
As: <link rel="icon" href="/favicon.ico" type="image/x-icon">
Window Object The window object represents an open window in a browser.
Window Object Properties
Window Object Methods
(JavaScript). - W3Schools
Top 100 PHP functions The 100 PHP functions that you have to know. Here is the top 100 PHP functions : it is the list of the most often used PHP native functions. The functions are named, and ranked from 1 to 100. The other 4500 functions are not ranked now.
Php header header() is used to send a raw HTTP header. See the HTTP/1.1 specification for more information on HTTP headers. A tutorial about HTTP Headers and the PHP header() Function.
HTTP Header Information Which headers does your browser send? When communicating with the webserver, your browser sends a list of headers. These headers can contain information about which type of images are supported, which kind of documents are supported, the character sets that are acceptable, cookies etc. Wikipedia: List of HTTP header fields.
Secure PHP Sessions The Fast Track to Safe and Secure PHP Sessions. Most modern web applications use some form of session management system to link multiple HTTP requests to the same user. Every web application that has some concept of authentication relies on a session management system. Typically, session management involves some sort of unique identifier stored in a cookie.
"Remember Me" - Long-Term Persistent Authentication, via cookies.
Moz://a Web Security Guidelines, with Web Security Cheat Sheet: "The goal of this document is to help operational teams with creating secure web applications. All Mozilla sites and deployments are expected to follow the recommendations below. Use of these recommendations by the public is strongly encouraged. The Enterprise Information Security (Infosec) team maintains this document as a reference guide."
HttpOnly, Secure, SameSite, __Secure-, __Host- :
Content Security Policy Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware.
Php: header("Content-Security-Policy: default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self'; form-action 'self'; frame-src 'self'; frame-ancestors 'self'; prefetch-src 'self';");
Php: header("Feature-Policy: fullscreen 'self';");
Referrer Policy A new security header: Referrer Policy. Referrer Policy will allow a site to control the value of the referer header in links away from their pages.
Subresource Integrity Subresource Integrity (SRI) is a security feature that enables browsers to verify that files they fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched file must match.
You use the Subresource Integrity feature by specifying a base64-encoded cryptographic hash of a resource (file) you're telling the browser to fetch, in the value of the integrity attribute of any <script> or <link> element.
X-Content-Type X-Content-Type-Options stops a browser from trying to MIME-sniff the content type and forces it to stick with the declared content-type. This helps to reduce the danger of drive-by downloads. The only valid value for this header is "X-Content-Type-Options: nosniff".
What is ´X-Content-Type-Options=nosniff´?
Php: header("X-Content-Type-Options: nosniff");
X-Frame-Options X-Frame-Options tells the browser whether you want to allow your site to be framed or not. By preventing a browser from framing your site you can defend against attacks like clickjacking.
Php: header("X-Frame-Options: deny");
X-XSS-Protection X-XSS-Protection sets the configuration for the cross-site scripting filters built into most browsers. The best configuration is "X-XSS-Protection: 1; mode=block".
What is the http-header ´X-XSS-Protection´?
Php: header("X-XSS-Protection: 1; mode=block");
Strict-Transport-Security HTTP Strict Transport Security (HSTS) is an excellent feature to support on your site and strengthens your implementation of SSL/TLS by getting the User Agent to enforce the use of HTTPS.
  • N.B. Important! Read thoroughly about the "preload" directive before you apply it for the Strict-Transport-Security header at your website. It can lock in a website for "https://" for a long time.
    This website gives hints on a strategi how to gradually step by step apply the Strict-Transport-Security header before adding the "preload" directive. Start with only max-age=300 (5 min) and ramp it up.
    Has also a "Check HSTS preload status and eligibility" for a website, which is a form to submit domains for inclusion in Chrome´s HTTP Strict Transport Security (HSTS) preload list.
    Sending the preload directive from your site can have PERMANENT CONSEQUENCES and prevent users from accessing your site and any of its subdomains if you find you need to switch back to HTTP.
  • To enable HTTP Strict Transport Security via PHP use the following code. This should be included at the head of all your sites PHP files. The preferred method is to add the header using Apache [htaccess] or server configs rather than PHP directly.
    N.B. A Strict Transport Security header shall only be sent on a HTTPS response! According to standards, and to be safe.
    HTTP Strict Transport Security: PHP || How To enable HSTS for your Drupal site (PHP)
      //Tell browser site should only be loaded over https
      header("Strict-Transport-Security: max-age=63072000; includeSubDomains");

    How to in Php get which protocol is used:
      $HttpProtocol = ($_SERVER['HTTPS'] == "" || $_SERVER['HTTPS'] == "off") ? 'http://' : 'https://';
  • Setting max-age=0 is the correct way to cancel HSTS for a site.
  • HTTP Strict Transport Security (HSTS) in Apache .htaccess file, etc: How to set HSTS header from .htaccess only on HTTPS
    N.B. Read about the "preload" directive above!
    <IfModule mod_headers.c>
      Header always set Strict-Transport-Security "max-age=63072000; includeSubDomains; preload" env=HTTPS

    The "always" have I only seen in half of the descriptions.
  • Can I Use: Strict Transport Security
  • Wikipedia: HTTP Strict Transport Security
  • Preloading Strict Transport Security
  • OWASP: HTTP Strict Transport Security Cheat Sheet - Eg: Cookies can be manipulated from sub-domains, so omitting the "includeSubDomains" option permits a broad range of cookie-related attacks that HSTS would otherwise prevent by requiring a valid certificate for a subdomain. Ensuring the "Secure Flag" is set on all cookies will also prevent, some, but not all, of the same attacks.
  • Check the security of a web page at: Webbkoll -
Public-Key-Pins HTTP Public Key Pinning protects your site from MiTM attacks using rogue X.509 certificates. By whitelisting only the identities that the browser should trust, your users are protected in the event a certificate authority is compromised. Mozilla: Public-Key-Pins
(Note that Public-Key-Pins can brick your site if something goes wrong and should only be used with great caution, if at all. See: 1, 2, 3.)
Link Preload
& Lazy Loading
Prefetching, preloading, prebrowsing, preconnect DNS, dns-prefetch DNS/TCP/SSL/TLS, of different resource for faster web pages. One can prefetches images, and even websites (using rel="prefetch" or rel="next").
By preload the web page graphic design image resources before the CSS they can be loaded in parallel with the CSS-file by the browser, otherwise the CSS-loading is a render blocking resource blocking the load of these img-resources. Preload shortens the loadtime of the web page.
Same goes for dns-prefetch, which shortens loadtime of external resources by making the DNS-lookup and SSL-handshake in parallel, when the browser has time, before the resurces are needed in the html-code.
All the .png-files in this diagram are preloaded before the .css-file:
Waterfall diagram
Waterfall diagram of web page loading.
Mime Types MIME types described at Mozilla.
The Complete MIME Types List.
Metatags All about meta tags, and a free website analyzer. "In SEO (Search Engine Optimization) meta tags still play an important role. Especially the use of the meta description is very important. This tag is shown by search engines as a small text item in the search results. Make sure that the meta tags on your website are unique for each and every page and try to make them as attractive as possible. Both a relevant title tag and the description tag will have to persuade a visitor to click on the link in the search results."
Link Relations Link Relation Types. All the relations types for links, as rel="nofollow" or rel="author".
Microformats Microformats are a simple way to add more meaning to your HTML. Search engines can make sense of your HTML which allows them to display a better version in their search results. Browser extensions can enable your readers to download information to their contacts, calendar, and maps apps. Meaningful HTML
The Open Graph protocol The Open Graph protocol. The OpenGraph protocol enables any web page to become a rich object in a social graph.
Status Code Definitions Each Status-Code is described here, including a description of which method(s) it can follow and any metainformation required in the response.
Atom feed Atom Syndication Format: Atom is the name of an XML-based Web content and metadata syndication format, and an application-level protocol for publishing and editing Web resources belonging to periodically updated websites. This document focuses on The Atom Syndication Format produced by the IETF AtomPub Working Group. Describes the elements of an Atom <feed>. Coding an Atom feed.
W3C Atom & RSS feed validator
ASCII Table ASCII Table and Description, with values in Dec, Hex, Oct & Html.
Pointer Events Pointer events are scriptable input actions which may be made using mouse, touch, or pen-tablet actions to manipulate the user interface of the device.
Pointing the Way Forward: Pointer events unify the pointer input model for the browser, bringing touch, pens, and mice together into a single set of events. CanIuse: Pointer.
Pointer events are confusingly unrelated to the pointer-events CSS property. Stuff you can do with CSS pointer events.
Php Operators All Php Operators:
Arithmetic Operators
Assignment Operators
Comparison Operators
Increment / Decrement Operators
Logical Operators
String Operators
Array Operators
JavaScript Operators All JavaScript Operators:
Arithmetic Operators
Assignment Operators
String Operators
Adding Strings and Numbers
Comparison Operators
Logical Operators
Bitwise Operators
JavaScript URLSearch­Params The URLSearchParams interface defines utility methods to work with the query string of an URL.
JavaScript doNotTrack Returns the user´s do-not-track setting. This is "1" if the user has requested not to be tracked by web sites, content, or advertising., about Universal Web Tracking Opt Out.
How we handle Do Not Track requests on Medium.
JavaScript get­Computed­Style() The getComputedStyle() method gets all the actual (computed) CSS property and values of the specified element.
The computed style is the style actually used in displaying the element, after "stylings" from multiple sources have been applied.
Style sources can include: internal style sheets, external style sheets, inherited styles and browser default styles.
JavaScript Canvas measure­Text() The CanvasRenderingContext2D.measureText() method returns a TextMetrics object that contains information about the rendered measured text (such as its width for example). Can be used for adaptiv text font-sizing for a string to fit within a given width.
HTML canvas measureText() Method || HTML5 Canvas Text Metrics Tutorial || Example: function getTextWidth(text, font) || Html5CanvasTutorials

Example adaptive font-sizing to fit string in given element width:
  • <div id="idContainerPaneFixSize" style="width:12em; height:4em; font-size:30px;">
  • Fixed width container<br/>
  • <span id="idAdaptiveFontSizing1" style="font-size:100%;"></span><br/>
  • <span id="idAdaptiveFontSizing" style="font-size:100%;"></span>
  • </div>
  • <script>
  • function getTextWidth (text, idElement){
  • var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement('canvas'));
  • var context = canvas.getContext('2d');
  • var fontstyle = window.getComputedStyle(document.getElementById(idElement), null).getPropertyValue('font-style');
  • var fontsize = window.getComputedStyle(document.getElementById(idElement), null).getPropertyValue('font-size');
  • var fontfamily = window.getComputedStyle(document.getElementById(idElement), null).getPropertyValue('font-family');
  • var canvasfont = fontstyle + ' ' + fontsize + ' ' + fontfamily;
  • context.font = canvasfont;
  • var metrics = context.measureText(text);
  • return metrics.width;
  • }
  • var ReferenceTxt = "Reference Text that fit OK";
  • var TextToBeSized = "New text that should fit in the same width";
  • document.getElementById('idAdaptiveFontSizing').style.fontSize = Math.min(100.0 * getTextWidth(ReferenceTxt, 'idAdaptiveFontSizing') / getTextWidth(TextToBeSized, 'idAdaptiveFontSizing'), 100) + '%';
  • document.getElementById("idAdaptiveFontSizing1").innerHTML = ReferenceTxt;
  • document.getElementById("idAdaptiveFontSizing").innerHTML = TextToBeSized;
  • </script>
Fixed width container

fetch API One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn´t really made for what we´ve been using it for. We´ve done well to create elegant APIs around XHR but we know we can do better. Our effort to do better is the fetch API. Let´s have a basic look at the new window.fetch method.
Fetch API - Concepts and usage.
Using Fetch
Introduction to fetch()
CSS Reference An extensive CSS reference with all the important properties and info to learn CSS from the basics.
CSS table-layout border-collapse, border-spacing, caption-side, empty-cells, and table-layout. This page explains some of the new CSS2 declarations to be used with tables.
CSS Button Styles CSS-Tricks: Overriding Default Button Styles. One challenge is getting all button (like) elements to look and layout exactly the same. We´ll cover that a few ways.
CSS Lines Break CSS-Tricks: Where Lines Break is Complicated. Here´s all the Related CSS and HTML. Say you have a really long word within some text inside an element that isn´t wide enough to hold it. A common cause of that is a long URL finding it´s way into copy. What happens? It depends on the CSS. How that CSS is controlling the layout and what the CSS is telling the text to do.
CSS @Rules CSS-Tricks: The at-rule is a statement that provides CSS with instructions to perform or how to behave. Each statement begins with an @ followed directly by one of several available keywords that acts as the identifier for what CSS should do.
CSS @supports CSS-Tricks: Using Feature Detection, Conditionals, and Groups with Selectors. In some cases we would really like to use a modern CSS property or property value whose use differs significantly from its fallback. It´s when feature detection is necessary. In those cases, @supports comes to the rescue.
CSS prefers-reduced-motion The prefers-reduced-motion CSS media feature is used to detect if the user has requested that the system minimize the amount of animation or motion it uses.
CSS-Tricks: An Introduction to the Reduced Motion Media Query || Can I Use: prefers-reduced-motion media query
Finger-friendly numerical inputs with "inputmode" CSS-Tricks: Forms are often a nightmare on mobile. We can make the process as pain-free as possible by reacting to context. Input fields that expect numerical values should have a numerical UI. Bringing up a number keyboard on small screens is easy on most platforms - just use a <input type="number">.
CSS Environment Variables CSS-Tricks: We were all introduced to the env() function in CSS when all that drama about "The Notch" and the iPhone X was going down. The way that Apple landed on helping us move content away from those "unsafe" areas was to provide us essentially hard-coded variables to use. Uh ok! Weird! Now, nine months later, an "Unofficial Proposal Draft" for env() has landed.
SVG Icons vs Icon Fonts SVG Icons is the way to go in modern web. There are big advantages to vector icons: resizable up and down without losing quality, extra sharp on retina displays, and small file size among them. And not the problem with an icon font not loaded, replaced by other fonts or the trouble in text readers in assistive devices.
Measuring Element Dimension & Location Measuring Element Dimension and Location with CSSOM:
Understanding Properties That Measure Element Dimension and Location.
This topic is designed to help web developers understand how to access the dimension and location of elements on the page through the CSS Object Model (CSSOM).
Also: Determining the dimensions of elements.
Php 7.0 / 7.1
Php 7.2
CSS Round corner display The round corner and the notch of iPhone X display:
Navigator. sendBeacon() Navigator.­sendBeacon() method can be used to asynchronously transfer a small amount of data over HTTP to a web server. This method addresses the needs of analytics and diagnostics code that typically attempts to send data to a web server prior to the unloading of the document. Sending the data any sooner may result in a missed opportunity to gather data. SendBeacon() transmits the data asynchronously to the web server without delaying the unload or affecting the performance of the next navigation. SendBeacon can be used whenever on the web page for asynchronously background data transfer to the server and not only at page unload.
The amount of data that can be sent is limit to around 64KB in most browsers, either for a single transfer or for all queued sendBeacon transfers in total. It´s not regulated in the webb standard. The specification allows the browser to refuse to send the beacon data (thus returning false) if it deems you´re trying to send too much.
To be able to send data accessible via the php $_POST variable:
var fd = new FormData();
fd.append('ajax_data', 22);
navigator.sendBeacon('ajax.php', fd);

Beacon API & feature detection with fallback to an old method:
window.addEventListener('unload', function(event) {
var xhr,
  data = captureAnalyticsData(event);
var CanSendBeacon = false;
if (navigator.sendBeacon) {
  CanSendBeacon = navigator.sendBeacon('/log', data);}
if (CanSendBeacon == false) {
  xhr = new XMLHttpRequest();'post', '/log', false);
Performance Timing API Navigation Timing gives access to timing and navigation information for the overall document. Thus one can easily calculate where time is spent between the start of the navigation in the user agent until the end of the load event processing.
Having timing metrics for the main page is great, but to diagnose real world performance issues it´s often necessary to drill down into individual resources. Thus, we have the more recent Resource Timing spec. This JavaScript API provides similar timing information as Navigation Timing but it´s provided for each individual resource.
Resource Timing API The Resource Timing interfaces enable retrieving and analyzing detailed network timing data regarding the loading of an application´s resource(s). An application can use the timing metrics to determine, for example, the length of time it takes to load a specific resource, such as an XMLHttpRequest, <SVG>, image, or script.
The interface´s properties create a resource loading timeline with high-resolution timestamps for network events such as redirect start and end times, DNS lookup start and end times, request start, response start and end times, etc. The interface also includes other properties that provide data about the size of the fetched resource as well as the type of resource that initiated the fetch.
Paint Timing API Load is not a single moment in time - it's an experience that no one metric can fully capture. There are multiple moments during the load experience that can affect whether a user perceives it as "fast" or "slow".
First Paint (FP) is the first of these key moments, followed by First Contentful Paint (FCP). These metrics mark the points, immediately after navigation, when the browser renders pixels to the screen. This is important to the user because it answers the question: is it happening?
Test, Verify, Secure & Optimize
Coding links web security See Coding links & hints of web security above.
Respons-isualizer Free tool to use: A responsive web page multi-unit screen simulator.
Visualizes a web page in 18 different screen resolutions simultaneously.
Views web pages in real world restricted browser viewports, in scale 1:4.
Magnify a device screen to scale 1:1 in lightbox mode for detailed check.
Uses 18 popular browser viewports from real world tracked visitor data!
Mobile-Friendly Test Google analyzes whether a website is mobile friendly programmed, regarding responsive functionality and CSS media queries.
PageSpeed Insights Google analyzes the content of a web page, and gives suggestions on how the page can be made faster. At the end of the webpage Google offers a link to download the optimized images, JavaScript and CSS-resources of the web page for free, if any needs to be optimized!
Fetch as Google The Fetch as Google tool enables you to test how Google crawls or renders an URL on your site. You can use Fetch as Google to see whether Googlebot can access a page on your site, how it renders the page, and whether any page resources (such as images or scripts) are blocked to Googlebot. This tool simulates a crawl and render execution as done in Google´s normal crawling and rendering process, and is useful for debugging crawl issues on your site. Fetch as Google for websites || How To Use Fetch As Googlebot
Web Page Test Test a website´s performance - resource loading waterfall charts:
"Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements."
Pingdom Pingdom Website Speed Test:
"We built this Website Speed Test to help you analyze the load speed of your websites and learn how to make them faster. It lets you identify what about a web page is fast, slow, too big, what best practices you´re not following, and so on. We have tried to make it useful both to experts and novices alike.
In short, we wanted it to be an easy-to-use tool to help webmasters and web developers everywhere optimize the performance of their websites."
Dotcom Website speed test Instantly test your website speed in real browsers from 25 locations worldwide: "Let´s make the web a faster place. It´s important to analyze your website´s speed on a regular basis. Website speed increases ranking in search engines like Google and faster pages result in greater customer engagement, retention, and conversion."
Dotcom gives speed data från all places for both a first visit and a repeat cached visit, with associated waterfalls diagram of the download.
One can choose to test from several different browsers as well as several different mobile operating systems and mobile models.
Dotcom-tools has some more free tool on the web page.
webhint Use webhint to improve your website Webhint is a linting tool that will help you with your site´s accessibility, speed, security and more, by checking your code for best practices and common errors. Webhint´s development started inside the Microsoft Edge team.
I do not fully agree with all hints by webhint of my web pages, but it´s nice to have this hints to reflect on.
Website Speed Test Image Analysis Tool: Optimizing images can significantly improve Web page load time, resulting in improved user retention and satisfaction. This tool provides measurable and actionable information about how to go beyond simple compression: discover how changes to image size, format selection, quality and encoding can dramatically improve page load speed. Includes download av optimized images.
The tool explained (by Smashing Magazine).
GTmetrix, website performance analyze Everybody deserves a fast web experience. GTmetrix can help you develop a faster, more efficient, and all-around improved website experience for your users. Enter the address of any website and GTmetrix will give you a Performance Report.
HTML5 Test of Browser HTML5 Test: How well does your browser support HTML5?
"The HTML5 test score is an indication of how well your browser supports the HTML5 standard and related specifications. Find out which parts of HTML5 are supported by your browser today and compare the results with other browsers."
Detect my Browser Presents the Capabilities of your browser in: Plugins, HTML5 Audio, HTML5 Video, CSS3, Advanced HTML5 interfaces & HTML5 Forms.
security headers .io "There are services out there that will analyse the HTTP response headers of other sites but I also wanted to add a rating system to the results. The HTTP response headers that this site analayses provide huge levels of protection and it´s important that sites deploy them. Hopefully, by providing an easy mechanism to assess them, and further information on how to deploy missing headers, we can drive up the usage of security based headers across the web."
webbkoll | How privacy-friendly is your site?
This tool helps you check what data-protecting measures a site has taken to help you exercise control over your privacy.
"Web Privacy Check monitors privacy enhancing features on websites, and helps you find out who is letting you exercise control over your privacy. We check to what extent a website monitors your behaviour and how much they gossip about the monitoring to third parties. We´ve also compiled a set of recommendations for web designers and managers on how to not track or gossip in digital environments. We also suggest questions and feature requests from users of websites who want to alert webmasters to the opportunity of improvement."
Developed by Originally funded by Internetfonden / IIS.
CSP Evaluator Google CSP Evaluator allows developers and security experts to check if a Content Security Policy (CSP) serves as a strong mitigation against cross-site scripting attacks. It assists with the process of reviewing CSP policies, which is usually a manual task, and helps identify subtle CSP bypasses which undermine the value of a policy. CSP Evaluator checks are based on a large-scale study and are aimed to help developers to harden their CSP and improve the security of their applications.
SSL Server Test Qualys SSL Labs: This free online service performs a deep analysis of the configuration of any SSL web server on the public Internet. Please note that the information you submit here is used only to provide you the service. We don´t use the domain names or the test results, and we never will. SSL Pulse, a continuous and global dashboard for monitoring the quality of SSL / TLS support. More SSL tools.
Observ­atory by Mozilla Observatory by Mozilla is a project designed to help developers, system administrators, and security professionals configure their sites safely and securely. Scan your site.
Report URI REAL-TIME SECURITY REPORTING - Tools, has excellent (free) tools with which you can build or analyze a Content Security Policy.
PrivacyScore PrivacyScore is a website scanning tool that allows anyone to benchmark security and privacy features of websites. Rankings are public and can be configured to one´s preferences. PrivacyScore helps users, activists, and data protection authorities.
HTTP / HTTPS Header Check Shows the HTTP header information sent by a web page.
gzip test tool A simple online web page compression / deflate / gzip test tool. Shows if web page is compressed, and by how much. Shows the size of the markup uncompressed / compressed in (bytes), plus the response headers.
Lint, Validate, Minifier, Compressor, CSS Compare Some linters and validators for code quality check and optimization:
Building Secure PHP The 2018 Guide to Building Secure PHP Software - As the year 2018 approaches, technologists in general-and web developers in particular-must discard many of their old practices and beliefs about developing secure PHP applications. This is especially true for anyone who does not believe such a feat is even possible.
This guide should serve as a complement to the e-book, PHP: The Right Way, with a strong emphasis on security and not general PHP programmer topics (e.g. code style).
Color Contrast Checker "Simply select or enter a foreground and background color in RGB hexadecimal format (e.g., #f7da39). Select the lighten and darken options to modify the colors slightly. You can use the color picker to change colors or change luminosity.
WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text. Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
Hint: ColorZilla for Firefox is an excellent tool for extracting the color value from any page element."
WAVE access­ibility tool WAVE, web accessibility evaluation tool. Type in your web URL and get the result presented graphically on the web page.
Powered by WebAIM - "We have web accessibility in mind. Our mission is to empower organizations to make their web content accessible to people with disabilities."
The­Coding­Machine The technical blog of The­Coding­Machine. By developers, for developers.
jpeg io is a free online interface for rapidly and conveniently converting your images into highly optimized JPEGs using's proprietery JPEG optimization algorithms. It has been engineered with simplicity in mind: simply drop your image into the drop space and a short time later you'll get a progressive JPEG compressed to the smallest possible size without perceptible quality loss. Convert any major image format into a highly optimized JPEG.
TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!
Compress is a powerful online tool for reducing drastically the size of your images and photos whilst maintaining a high quality with almost no difference before and after compression.
JPEGmini is a patent-pending photo recompression technology, which significantly reduces the size of photographs without affecting their perceptual quality. The technology works in the domain of baseline JPEG, resulting in files that are fully compatible with any browser, photo software or device that support the standard JPEG format. There are free trials to download for the three different version, before buy.
PhantomJS PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.
For: Headless Website Testing || Screen Capture || Page Automation || Network Monitoring.
Reading: Understanding PhantomJS
YSlow YSlow analyzes web pages and why they´re slow based on Yahoo!´s rules for high performance web sites.
Availability browsers: Firefox, Safari, Chrome & Opera.
Free Web Tools Free Web Tools from set of SEO Tools & Search Engine Optimization Tools.
Coding Hints, Tips & Help
Composer Composer is an application-level package manager for the PHP programming language that provides a standard format for managing dependencies of PHP software and required libraries. Composer runs through the command line and installs dependencies (e.g. libraries) for an application.
Fluid Typography Using viewport units and calc(), we can have font-size (and other properties) adjust their size based on the size of the screen. So rather than always being the same size, or jumping from one size to the next at media queries, the size can be fluid. CSS-TRICKS
The original source at Mike Riethmuller:
Fluid type calc examples, with some really nices code examples!
A deeper description: Interpolation in CSS without animation.
More: Precise control over responsive typography
Individual CSS Transform A Trick: Individual CSS Transform Functions
We get a lot of power through the single transform property in CSS - allowing us to rotate, translate, scale, and more all at once. But allowing all of those different transform functions into one property can trip us up.
Detect touch device In the era of mobiles, tablets, 2-in-1 Laptops & Laptops with touch screens: "If you ask stack overflow "to detect touch with JavaScript" you´ll get a lot of answers that all have one thing in common: they have nothing to do with humans.
In my not-even-close-to-humble opinion, all of these answers are wrong, but it´s not the fault of the answerers. It´s the fault of the askerers. Why on earth would you want to know if your user is looking at a device that responds to the touch?
We want to detect human touch, not device touch. I reckon that´s important enough to be repeated in a big font."
The invisible parts of CSS The invisible parts of CSS, explain in depth:
Overview of the rendering process || Cascade || The Box Model || The Visual Formatting Model || Display types || Positioning schemes || Etc.
Methods to Organize CSS CSS-Tricks on CSS: Developer Ben Frain once remarked that it´s easy to write CSS code, but it is hard to scale and support it. This article describes the set of solutions out there to deal with this problem.
Box Alignment Cheatsheet This cheatsheet compares alignment in CSS Grid Layout and Flexbox. The box alignment specification details how items are aligned in the various layout methods. As different layout methods pose different constraints in terms of alignment, some of the behaviour of Box Alignment is layout method dependent.
Flexbox Cheat Sheet The Ultimate Flexbox Cheat Sheet, with code snippets and their graphical examples.
CSS Grid Layout Understanding the difference between grid-template and grid-auto. With all the new properties related to CSS Grid Layout, one of the distinctions that always confused me was the difference between the grid-template-* and grid-auto-* properties. Specifically the difference between grid-template-rows/columns and grid-auto-rows/columns. Although I knew they were to do with the explicit and implicit grid systems, at face value they seemed to be doing almost the same thing. In actual fact, they have little in common and are used to achieve different things.
CSS Layout: CSS Flexbox & CSS Grid The two new approaches to create web layouts by CSS:
CSS Grid Layout (Mars 2017): CSS Flexbox:
CSS Grid vs Flexbox:
CSS columns Property The columns CSS property sets the column width and column count of an element, like CSS3 responsive newspaper columns. It´s an alternative to Grid and Flexbox, with another functionality.
Browser Capability Detection Browser Capability Detection with JavaScript Although browser vendors have made a concerted effort to implement common interfaces, the fact remains that each browser presents its own capabilities and flaws. Browsers that are available cross-platform often have different issues, even though they are technically the same version. These differences force web developers to either design for the lowest common denominator or, more commonly, use various methods of client detection to work with or around limitations.
Feature Detection: State of the Art Browser Scripting The goal of feature detection in browser scripting with JavaScript is straight forward. Before our code uses an object or object reference we want to know that our use of it will execute without error and behavior as we are expecting. If we don´t know these things before we use the object or object reference then we don´t want to use it because using it would risk a broken page and ultimately an unsatisfactory user experience.
Building Apps with HTML5 - No Browser Left Behind: An HTML5 Adoption Strategy Today there are alternatives to UA sniffing, and one that´s growing in popularity—thanks in part to both jQuery and Modernizr—is called object or feature detection. These terms are mostly interchangeable, but I´ll stick to "feature detection" for this article.
Using feature detection to write CSS with cross-browser support When working with CSS, it seems that one of the top concerns always ends up being inconsistent feature support among browsers. This means that CSS styling might look perfect on my browsers of choice, but might be completely broken on another browser. Luckily, dealing with inconsistent browser support is trivial due to a key feature in the design of the CSS language itself. This behavior, called fault tolerance, means that browsers ignore CSS code they don´t understand.
PHP The Right Way PHP: The Right Way is an easy-to-read, quick reference for PHP popular coding standards, links to authoritative tutorials around the Web and what the contributors consider to be best practices at the present time.
Web Tips Design & UI Google Developers Web Fundamentals: Web design and UI encompasses a few broad areas. What does a page look like? How does it behave? How does it respond to different screen sizes, input types, and devices?
• Responsive design, • Basics of UX, • User input, • Animations, • Icons & browser colors
UTF-8 UTF-8: The Secret of Character Encoding. "Character encoding and character sets are not that difficult to understand, but so many people blithely stumble through the worlds of programming without knowing what to actually do about it, or say "Ah, it´s a job for those internationalization experts." No, it is not! This document will walk you through determining the encoding of your system and how you should handle this information. It will stay away from excessive discussion on the internals of character encoding."
Webb­rikt­linjer Vägledning för webbutveckling, PTS: De officiella riktlinjerna för hur man bör arbeta med webbplatser i offentlig sektor i Sverige.
Vägledningen (även kallad Webbriktlinjerna) sammanfattar erfarenheter från mer än ett decennium av webbutveckling. Därmed kan även den privata sektorn ha mycket att vinna på att följa riktlinjerna.
Performance of web page coding
Debouncing & Throttling Debouncing and Throttling Explained Through Examples: Debounce and throttle are two similar (but different!) techniques to control how many times we allow a function to be executed over time.
Having a debounced or throttled version of our function is especially useful when we are attaching the function to a DOM event. Why? Because we are giving ourselves a layer of control between the event and the execution of the function. Remember, we don´t control how often those DOM events are going to be emitted. It can vary. For example "onScroll" or "onResize".
Error Handling Errorhandling to catch coding faults or problems in JavaScript & Php:
Web Color Management
Web Components Web Components is a suite of different technologies allowing you to create reusable custom elements - with their functionality encapsulated away from the rest of your code - and utilize them in your web apps.
Shadow DOM An important aspect of web components is encapsulation - being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to attach a hidden separate DOM to an element.
Quackit Tutorials Tutorials & References about: Html. CSS & Design, Scripting, Database, XML and a "Popular" category, by Ian who has studied graphic design, marketing and IT.
.htaccess file What can I do with an .htaccess file? There are several things you can do with an .htaccess file to customize your site. Here are a few examples.
Scriptol Free tools for the webmaster: What software does a webmaster uses to create a website? Here is a selection of tools and online services for every stage of the creation and management of sites.
Web Authentication API The Web Authentication API is an extension of the Credential Management API that enables strong authentication with public key cryptography, enabling password-less authentication and / or secure second-factor authentication without SMS texts.
Dev Guide: Web Authentication and Windows Hello || Introducing Web Authentication in Microsoft Edge
JavaScript forces layout / reflow "All of the below properties or methods, when requested / called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck."
TypeScript TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. TypeScript starts from the same syntax and semantics that millions of JavaScript developers know today. Use existing JavaScript code, incorporate popular JavaScript libraries, and call TypeScript code from JavaScript. Types enable JavaScript developers to use highly-productive development tools and practices like static checking and code refactoring when developing JavaScript applications.
Announcing TypeScript 3.0 || Building a company around TypeScript || TypeScript Programming with Visual Studio Code
IndieWeb The IndieWeb is a people-focused alternative to the "web".
When you post something on the web, it should belong to you, not a corporation silo. Too many companies have gone out of business and lost all of their users´ data. By joining the IndieWeb, your content stays yours and in your control.
Your articles and status messages can go to all services, not just one, allowing you to engage with everyone. Even replies and likes on other services can come back to your site so they´re all in one place.
You can post anything you want, in any format you want, with no one monitoring you. In addition, you share simple readable links such as These links are permanent and will always work.
Keywords: The Federated Social Web, The Decentralized Social Web
Web Storage W3schools Html5 Cookies: The Web Storage API provides mechanisms by which browsers can securely store key/value pairs, in a much more intuitive fashion than using cookies. As either HTML localStorage or sessionStorage Object.

Links about web Cache

Unsorted web links abut caching data and web-content for web sites:
(Will go through this and clean them up soon.)
Security, References, OSS & Blogs
HTTP Archive The HTTP Archive Tracks How the Web is Built. It is a permanent repository of web performance information such as size of pages, failed requests, timing, SEO, and technologies utilized. This performance information allows us to see trends in how the Web is built and provides a common data set from which to conduct web performance research.
OWASP Cheat Sheet Series The OWASP Cheat Sheet Series was created to provide a concise collection of high value information on specific application security topics. These cheat sheets were created by various application security professionals who have expertise in specific topics. We hope that the OWASP Cheat Sheet Series provides you with excellent security guidance in an easy to read format.
WebRTC Leak Test WebRTC can expose your IP address despite VPN, which this tool can show if it does for you. If you got n/a for the IP Address´ it´s OK. Swedish blog post about it: WebRTC kan exponera din IP-adress trots VPN.
CSS-TRICKS CSS blog, code snippets, forums and a CSS Almanac.
Snippets for: HTML, CSS, Sass, htaccess, JavaScript, jQuery, WordPress & PHP.
YubiKey Modern two factor authentication via USB-hardware. No more reaching for your smartphone, or re-typing passcodes. Just plug in your YubiKey, tap, and it does the rest for you. With a simple touch, the YubiKey protects access to computers, networks, and online services. Touch to trigger FIDO2, WebAuthN, U2F, smart card (PIV), Yubico OTP, Code Signing, OpenPGP, OATH-TOTP, OATH, HOTP, and Challenge-Response. The YubiKey works with hundreds of enterprise, developer and consumer applications, out-of-the-box and with no client software.
Medium: Making the most out of your YubiKey 4
Web Fundamentals Former HTML5-Rocks.
Web Fundamentals
A List Apart A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices.
Mike Riethmuller Stuff I wrote: A range of unique and possibly interesting web development ideas of varying quality. Basically "I think stuff and sometimes I write it down".
Dan Wilson I´m looking to all things web and mobile. I love web standards, progressive enhancement, and anything that improves usability and accessibility for all users.
Rachel Andrew Managing Director and founder of web development company An Invited Expert to the CSS Working Group, a Google Developer Expert (GDE) and was a long-time Web Standards Project member until that organisation disbanded. "My professional skills range from front and back-end development to operations. My day can include planning a new marketing campaign, fixing a CSS issue on a site, writing a Puppet manifest and writing a Perch app in PHP."
CSS Layout News A weekly collection of tutorials, news and information on all things CSS Layout.
Sensedeep Simple­security: Web Developer Security Checklist.
Paragon Initiative Blog "Paragon Initiative Enterprises is the home of leading industry experts in secure PHP development. Our specialties include applied cryptography and web application security."
"Remember Me" - Long-Term Persistent Authentication, Cookie safety.
The Fast Track to Safe and Secure PHP Sessions
Securing a PHP Application in 2016: The Pocket Guide
On the (in)security of popular open source Content Management Systems written in PHP
The 2018 Guide to Building Secure PHP Software
PHP: The Right Way is an easy-to-read, quick reference for PHP popular coding standards, links to authoritative tutorials around the Web and what the contributors consider to be best practices at the present time.
The Quick Guide to Simple and Secure Automatic Updates
Introducing Ward: Web Application Realtime Defender - WAF, IDS, Automatic Security Updates for PHP Software
Open Source Aspects about OSS, Open Source Software development:
IDE, Integrated Development Environment
CodeLobster Our goal is to create a product which would simplify and speed up to the maximum process of developing full-featured web sites on php.
For now, it includes all standard abilities for operating with code and many advanced features for PHP developing.
In three versions: Free, Lite & Professional.
Visual Studio Code Code editing Redefined: Microsoft Visual Studio Code is a streamlined code editor with support for development operations like debugging, task running and version control. It aims to provide just the tools a developer needs for a quick code-build-debug cycle and leaves more complex workflows to fuller featured IDEs. Creating a VS Code Theme (CSS-Tricks).
Free, Open source that Runs everywhere.
Atom A hackable text editor for the 21st Century. Atom-IDE is a set of optional packages to bring IDE-like functionality to Atom and improve language integrations. Get smarter context-aware auto-completion, code navigation features such as an outline view, go to definition and find all references. You can also hover-to-reveal information, diagnostics (errors and warnings) and document formatting. Atom is a popular text editor within the GitHub developer community.
Free, Open source that Runs everywhere.
Rapid PHP Rapid PHP editor is a faster and more powerful PHP editor for Windows combining features of a fully-packed PHP IDE with the speed of the Notepad. Rapid PHP is the most complete all-in-one software for coding PHP, HTML, CSS, JavaScript and other web development languages with tools for debugging, validating, reusing, navigating and formatting your code. With Rapid PHP editor you can code smarter, save time and increase productivity.
For purchase with a one-time fee.
PhpStorm All PHP tools: The editor actually ´gets´ your code and deeply understands its structure, supporting all PHP language features for modern and legacy projects. It provides the best code completion, refactorings, on-the-fly error prevention, and more.
Available for purchase in commercial and personal licenses.
PhpDesigner PhpDesigner 8 is a lightning fast and powerful PHP IDE and PHP editor boosted with all the features to help you create amazing websites. Combine all your web-development into PhpDesigner 8 with built-in editors for PHP, HTML5-, CSS3- and JavaScript!
I have been using PhpDesigner 6 & 7 for more than 10 years and I am very happy with it! But unfortunately is its latest version 8.1.2 released 19 May 2013 (2017-02-26) and begins to be utdated. At mail-contact in February 2017 with Michael Pham, the man behind it, he says PhpDesigner still is alive and he is working on updating version 8. But I now tries out the CodeLobster IDE meanwhile.
PhpDesigner is only for purchase.
Best PHP IDE Comparison "The Best PHP IDE 2016 and 2017 Comparison - The Most Popular Editors for Development under Windows, Mac and Linux either Open Source, Free or Commercial."
"Most PHP developers use an IDE (Integrated Development Environment) to become more productive. There several PHP IDEs, some more advanced than others, some are commercial and others are free."
"Read this article to compare the features of some of the most popular IDEs being used by PHP developers, so you can decide which one suits you best."
"This is a live article. This means that the article will be updated once and republished here again once there are relevant updates to the features of the currently listed IDEs or others that may not yet be listed."
Free Resources
Icon Fonts IcoMoon - Pixel Perfect Icon Solutions.
SVG Editors Article 6 Free Web-Based SVG Editors Compared.
While SVG images may not be as common as our favorite bitmap formats like PNG or JPG, the advantages of vectors has more and more designers looking to bring them into their projects.
In the past, we´ve usually looked at desktop applications like Adobe Illustrator and Inkscape - but in 2017 you don´t have to leave your web browser to design in vectors. So, if you´re looking for a free SVG editor, these 6 free Web-based SVG editors are a good start.
Some of them are both desktop and web-based: Vectr || RollApp || BoxySVG || Janvas || DrawSVG || SVG-edit || Inkscape
Code Frameworks & Libraries
CMS Airship CMS Airship - Secure Content Management for the Modern Web
CMS Airship is a secure-by-default content management system, blog engine, and application development framework written for PHP 7.
CMS Airship is Free Software (GPL 3) developed and maintained by Paragon Initiative Enterprises.
Commercial license are available for purchase if your company requires an alternative to the GNU Public License.
PHP CMS Out-of-the-Box Security Comparison Chart: CMSAirship, WordPress, Drupal, Joomla!
Blog of news of CMS Airship
Joomla! Joomla! is an award-winning content management system (CMS), which enables you to build Web sites and powerful online applications. Many aspects, including its ease-of-use and extensibility, have made Joomla! the most popular Web site software available. Best of all, Joomla! is an open source solution that is freely available to everyone.
Perch The really little content management system. Perch is a product developed by We launched Perch in 2009 with an idea that content management shouldn´t be complicated, expensive or time-consuming to implement on existing websites. We wanted a drop-in CMS, but one that didn´t force you to compromise your front-end development.
Almost eight years later Perch is still based upon that idea, and has developed to stay right up to date with modern web development. What Matters
Visa BesöksStatistik:

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

Hela webbplatsen:
- Webbsidor¹ senaste 30 dygnen: 77 av personer² & 1392 av robotar²
- Webbsidor¹ senaste 24hr: 5 av personer² & 67 av robotar²

- Unika besökare¹ senaste 24hr: 2 personer², 8 robotar²
- Webbsidor per unik besökare senaste 24hr: 2.5/person², 8.4/robot²

- Unika besökare¹ senaste 30 dygnen: 23 personer², 187 robotar²
- Webbsidor per unik besökare senaste 30 dygnen: 3.3/person², 7.4/robot²

- Snitt senaste 30 dygnen (webbsidor/24hr): 3 av personer² & 46 av robotar²
- Snitt senaste 30 dygnen (unika besökare/24hr): 0.8 personer² & 6.2 robotar²
- Robotar utgör 94.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: 36.2 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.9 (ms), inclusive Includetime: 8.0 (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.

Webpage: server time: 105 ms, (incl. log: 53.8 ms) || Autonomtech