A link library of useful quality links within web coding.
|Can I use||Check the cross-browser support of HTML and CSS tags, and SVG and JS API commands - as CSS inline-block.|
|HTML Entity, aliases for special characters, as for & is & used||WDG Intities is very detailed and with both Latin symbols and Greek characters.
HTML Character Entities shows probably the most special characters in the ISO Latin character set and its HTML entities, clearly divided into categories.
|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.|
KeyCodes, what keyboard events report based on what keys are pressed. KeyboardEvent Value (keyCodes, metaKey, etc).
|Window Object||The window object represents an open window in a browser.
Window Object Properties
Window Object Methods
|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.|
|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".|
|Link Preload||Smashing Magazine: Preload: What Is It Good For?
Medium: Preload, Prefetch And Priorities in Chrome.
Can I Use - Preload?
|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.|
|Php Operators||All Php Operators:
Increment / Decrement Operators
Adding Strings and Numbers
|CSS Reference||An extensive CSS reference with all the important properties and info to learn CSS from the basics.|
|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.|
|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|
|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.
|Test, Verify & Optimize|
|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.|
|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."
|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."|
|Observatory by Mozilla||Observatory by Mozilla is a project designed to help developers, system administrators, and security professionals configure their sites safely and securely.|
|SSL Server Test||This free online service performs a deep analysis of the configuration of any SSL web server on the public Internet.|
|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 accessibility 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."
|Jpeg.io is a free online interface for rapidly and conveniently converting your images into highly optimized JPEGs using Kraken.io'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!|
|Compressor.io 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.|
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.
|HTTP Web-Sniffer||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.|
|Coding Hints, Tips & Help|
|Front End Web Help||"Front End Web Help is a voluntary website dedicated to helping front end web developers solve everyday technical problems and challenges. The posts may seem random, but they are all technical issues us front end developers have come up against in our professional experience and have solved. All material on this website is free to use for anyone to use on personal and commercial websites.
We hope to help others, just as we got help from others during our careers as front end developers."
|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.
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.|
|CSS Layout: CSS Flexbox & CSS Grid||The two new approaches to create web layouts by CSS:
CSS Grid Layout (Mars 2017):
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.
|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."|
|Webbriktlinjer||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.
|Web Color Management|
|.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 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. Mozilla: Using the Web Storage API || Medium: HTML5: Storage APIs || Can I use: Web Storage.|
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.)
|Blogs & Security|
|CSS-TRICKS||CSS blog, code snippets, forums and a CSS Almanac.
|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 edgeofmyseat.com. 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||Simplesecurity: 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
Securing a PHP Application in 2016: The Pocket Guide
On the (in)security of popular open source Content Management Systems written in PHP
|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.
For purchase with a one-time fee.
|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.
Free, Open source that Runs everywhere.
|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.
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."
|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 - 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 edgeofmyseat.com. 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