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.|
|Mime Types||MIME types described at Mozilla.
The Complete MIME Types List.
|Php Operators||All Php Operators:
Increment / Decrement Operators
Adding Strings and Numbers
|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.
|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.|
|PageSpeed Insights||Google analyzes the content of a web page, and gives suggestions on how the page can be made faster.|
|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.|
|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.|
|Web Page Test||"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."|
|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||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.|
|JPEGmini||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.|
|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."
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
|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.
|Blogs & Security|
|CSS-TRICKS||CSS blog, code snippets, forums and a CSS Almanac.
|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.|
|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.
|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.|
|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.|