Americans with Disabilities Act
Application Programming Interface
Chemical Abstracts Service
Code of Federal Regulations
Chemical Markup Langauge
Cascading Style Sheets
Document Object Model
European Computer Manufacturers Association
Euclidean Distance Transform
Electronic Laboratory Notebook
General Data Protection Regulation
GNU’s Not Unix!
Google Web Toolkit
General Public License
Graphical User Interface
Integrated Development Environment
Immediately Invoked Function Expression
International Organization for Standardization
Hypertext Markup Language
Version 5 of HTML
Hypertext Transfer Protocol encrypted using Transport Layer Security
Macromolecular Transmission Format
Object Oriented Programming
Open Graphics Library
- OpenGL ES
OpenGL for Embedded Systems
Protein Data Bank
Progressive Web Application
Research Collaboratory for Structural Bioinformatics
Secure Sockets Layer
Scalable Vector Graphics
Web Content Accessibility Guidelines
Web Graphics Library
Extensible Markup Language
Yahoo! User Interface
Computer literacy is an essential skill for scientists. Computers can execute the same operations humans can perform, but far more consistently and at rates far beyond human capability, allowing researchers to investigate numerous hypotheses in short order. Programmers have even more advantages, as they can directly communicate with the computer to achieve their desired goals, as opposed to relying on software someone else has created for another purpose.
Many programming languages have been developed to facilitate instructions to the computer. Each has its advantages, which is why they each exist. Each programming language also has its disadvantages, which is why the rest exist.
HTML5 is a moniker describing the most recent iteration of these internet technologies, namely it is the current version (version 5) of HTML. HTML4 defined most of the history of the Internet. HTML4 provided only limited functionality to website authors; therefore solutions like Flash and Java applets came into existence. HTML5 defines features previously only available in plug-ins, directly through native browser functionality while providing extensibility not possible with previous versions of HTML.
For security reasons, AJAX requests were limited to contacting the host origin, but HTML5 brought XHR2, which provided a new protocol to allow XMLHTTPRequest to contact and validate connections to external origins.
Scalable Vector Graphics (SVG)  is a complementary graphical feature in HTML5. SVG is an XML protocol defining 2D drawing instructions for graphics, but lacks capability for defining 3D objects. HTML5 <canvas> is based on a bitmap buffer, so the scale and resolution of the screen or device must be properly taken into account for clear graphics. SVG rendering is independent of the resolution or scale of the device. Creating dynamic applications with SVG is more difficult as any changes require DOM manipulation.
At the time of this writing, the latest version of ECMAScript is version 9, also known as ECMAScript 2018 . Technologies evolve rapidly and information herein may become obsolete as changes are made.
Reinforcing the basics
Integrated Development Environment
As HTML5 continues to evolve, new features continue to be invented and extensions to old features are introduced. Each of the browsers is developed independently on its own schedule, so implementation of HTML5 features is far from synchronized. Polyfills can be used to inject behavior before features are natively implemented, and removed when the features are universally available. For instance, requestAnimationFrame() is recommended for WebGL animations, while setTimeout() is the traditional function for working with timers. A polyfill can check if requestAnimationFrame() exists, and if not, create one using the setTimeout() function.
The const keyword declares an unchangeable variable, similar to the final modifier in Java. If a const variable is assigned to an object, the object’s properties can be changed, while the variable pointer to the object cannot. This technique is useful when creating a value that should remain consistent throughout the lifetime of the application, such as core bond order variables in cheminformatics toolkits.
If no keyword is used when declaring a variable, the visibility of the variable becomes global regardless of the scope it is in, polluting the global namespace and potentially causing issues. This should never be done.
In addition to exposing implementation, the global scope can become a hindrance to programming, as care is needed to avoid name clashes that would overwrite previously defined variables. As multiple libraries are included into a webpage, such conflicts are inevitable. In chemistry, every library will undoubtedly contain a “Molecule” class. The increased probability of conflict caused by creating global variables is called global namespace pollution. Avoiding pollution is a requirement for any usable scientific library. Techniques for doing so are discussed in the "Object Oriented Programming" section.
The created function is now an object in its enclosing scope. The function can be accessed as an object by using the function name and can be executed by using the function name followed by an invoking pair of parentheses.
Object Oriented Programming
The new keyword is used to instantiate an object from the class definition as shown on line 12 of Listing 8. Once instantiated, associated class functions are accessible from the object. Functions declared inside of the constructor are called privileged functions and can access private variables defined in the constructor scope, but will be created anew for each instance.
In the global namespace, this refers to the window object. In any functions created outside of objects, this also refers to the window object, unless the source is being interpreted in strict mode, vide infra, in which case this is undefined. There is an exception if the function acts as an event handler set through the addEventListener() function or through an inline on-event handler, and in these cases this refers to the DOM object firing the event.
Immediately invoked function expression
The final pair of parentheses used for invoking the function can be included inside or outside of the closing parenthesis of the grouping operator; its positioning makes no difference to the behavior.
A library written in a single IIFE would quickly become unmanageable, and so several IIFEs can be used to link individual segments of logic, referred to as modules, into a single library utilizing parameter imports. Listing 14 shows how the module pattern can be used to organize discrete classes. Classes can then be easily added and removed.
The module design pattern aids developers in writing more organized source code, where individual classes can be independent, allowing for extensible and sustainable libraries. By creating a linked library based on IIFEs, controlled access can be provided through a single variable placed in the global namespace. This is the best practice for avoiding global namespace pollution. While development is facilitated by this pattern, care must be taken when considering the dependencies linked into each module and their order in source.
Reading the PDB entry 3CC2 into a data structure in memory from a string
Runtimes for perceiving the Euler facet ring set for C60 fullerene
Runtimes for perceiving the Euler facet ring set for the unit cell of the LTA zeolite ignoring periodicity
KJT is the sole author. The author read and approved the final manuscript.
The author wishes to thank Clinton McFeely, Dr. Noel O’Boyle, Professor Heinz D. Roth, Dr. Joseph W. Walsh and Dr. Wendy A. Warr, for reading the entire manuscript and making valuable suggestions. This work is dedicated to my loving parents, Gerard and Karen.
The author declares he has no competing interests.
Availability of data and materials
Consent for publication
Ethics approval and consent to participate
This review was not funded by any external funding agency.
Springer Nature remains neutral with regard to jurisdictional claims in published maps and institutional affiliations.
- 1.Java.com: Java + You. https://www.java.com/. Accessed 29 Jan 2019
- 3.Adobe Flash Player. https://www.adobe.com/products/flashplayer.html. Accessed 29 Jan 2019
- 4.JEP 289: Deprecate the Applet API. http://openjdk.java.net/jeps/289. Accessed 29 Jan 2019
- 5.Microsoft Silverlight. https://www.microsoft.com/silverlight/. Accessed 29 Jan 2019
- 6.Microsoft Embraces ECMA Internet Scripting Standard; Delivers Industry’s First ECMA-Compliant Scripting Language, JScript 3.0, In Key Microsoft Products. https://web.archive.org/web/20090112221530/http://www.microsoft.com/presspass/press/1997/Jun97/jecmapr.mspx. Accessed 29 Jan 2019
- 8.Dart Programming Language. https://www.dartlang.org. Accessed 29 Jan 2019
- 9.Welcome to Ecma International. https://www.ecma-international.org. Accessed 29 Jan 2019
- 10.ECMAScript 2018 Language Specification. https://www.ecma-international.org/ecma-262/9.0/index.html. Accessed 29 Jan 2019
- 11.HTML Canvas 2D Context. https://www.w3.org/TR/2dcontext/. Accessed 29 Jan 2019
- 12.WebGL Specifications. https://www.khronos.org/registry/webgl/specs/latest/. Accessed 29 Jan 2019
- 13.Node.js. https://nodejs.org/. Accessed 29 Jan 2019
- 14.ActionScript Technology Center. https://www.adobe.com/devnet/actionscript.html. Accessed 29 Jan 2019
- 15.Rhino M |MDN. https://developer.mozilla.org/en-US/docs/Mozilla/Projects/Rhino. Accessed 29 Jan 2019
- 17.Extensible Markup Language (XML) 1.0, 5th edn. https://www.w3.org/TR/xml/. Accessed 29 Jan 2019
- 22.Welcome to Python.org. https://www.python.org. Accessed 29 Jan 2019
- 23.Kernighan B, Ritchie DM (1988) The C programming language. Prentice Hall, WestfordGoogle Scholar
- 25.Actelion/openchemlib: Open source Java-based chemistry library. https://github.com/actelion/openchemlib. Accessed 29 Jan 2019
- 28.PhoneGap. https://phonegap.com. Accessed 29 Jan 2019
- 29.Apache Cordova. https://cordova.apache.org. Accessed 29 Jan 2019
- 30.Progressive web apps: escaping tabs without losing our soul. https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/. Accessed 29 Jan 2019
- 31.The GNU General Public License V3.0. https://www.gnu.org/licenses/gpl-3.0.en.html. Accessed 29 Jan 2019
- 32.Closure compiler. https://developers.google.com/closure/compiler/. Accessed 29 Jan 2019
- 33.YUI Library. https://yuilibrary.com. Accessed 29 Jan 2019
- 35.EU GDPR information portal. https://www.eugdpr.org. Accessed 29 Jan 2019
- 36.CFR—code of federal regulations title 21. https://www.accessdata.fda.gov/scripts/cdrh/cfdocs/cfcfr/CFRSearch.cfm?fr=11.1. Accessed 29 Jan 2019
- 37.RFC 2818—HTTP Over TLS. https://tools.ietf.org/html/rfc2818. Accessed 29 Jan 2019
- 38.About Native XMLHTTP (Internet Explorer). https://msdn.microsoft.com/en-us/library/ms537505(v=vs.85).aspx. Accessed 29 Jan 2019
- 40.Kernighan B, Ritchie DM (2017) Standard ECMA-404: the JSON data interchange syntax. Ecma International, GenevaGoogle Scholar
- 41.ChemDoodle JSON Format. https://web.chemdoodle.com/docs/chemdoodle-json-format/. Accessed 29 Jan 2019
- 42.Open Chemistry. https://www.openchemistry.org. Accessed 29 Jan 2019
- 43.Development of the chemical JSON data representation. https://github.com/OpenChemistry/chemicaljson. Accessed 29 Jan 2019
- 46.GWT. http://www.gwtproject.org/?csw=1. Accessed 29 Jan 2019
- 49.SwingJS. https://chemapps.stolaf.edu/swingjs/site/swingjs/examples/. Accessed 29 Jan 2019
- 50.The periodic table of the elements by WebElements. http://www.webelements.com/. Accessed 29 Jan 2019
- 51.Dynamic periodic table. https://ptable.com. Accessed 29 Jan 2019
- 52.3D rotating molecules on the iPhone/iPad. http://jackadam.github.io/2010/3d-rotating-molecules-on-the-iphoneipad/. Accessed 29 Jan 2019
- 53.CanvasMol. https://alteredqualia.com/canvasmol/. Accessed 29 Jan 2019
- 54.TwirlyMol. https://baoilleach.blogspot.com/2009/01/twistymol-is-dead-long-live-twirlymol.html. Accessed 29 Jan 2019
- 55.Jolecule: the protein viewer in the cloud. https://jolecule.appspot.com. Accessed 29 Jan 2019
- 56.CWC: protein ribbon models. https://www.macinchem.org/reviews/protein-ribbon-models.php. Accessed 29 Jan 2019
- 60.Scalable vector graphics (SVG) 2. https://www.w3.org/TR/SVG/. Accessed 29 Jan 2019
- 62.Sketcher Canvas | ChemDoodle Web Components. https://web.chemdoodle.com/tutorial/2d-structure-canvases/sketcher-canvas/. Accessed 29 Jan 2019
- 63.Ketcher. http://lifescience.opensource.epam.com/ketcher/. Accessed 29 Jan 2019
- 64.2010 ADA Standards for Accessible Design. https://www.ada.gov/regs2010/2010ADAStandards/2010ADAstandards.htm. Accessed 29 Jan 2019
- 65.W3C Web content accessibility guidelines (WCAG) 2.0. https://www.iso.org/standard/58625.html. Accessed 29 Jan 2019
- 66.SciFinder-n | CAS. https://www.cas.org/products/scifinder-n. Accessed 29 Jan 2019
- 67.Web storage, 2nd edn. https://www.w3.org/TR/webstorage/. Accessed 29 Jan 2019
- 68.Web Workers. https://www.w3.org/TR/workers/. Accessed 29 Jan 2019
- 69.Web Audio API. https://www.w3.org/TR/webaudio/. Accessed 29 Jan 2019
- 70.The WebSocket API. https://www.w3.org/TR/websockets/. Accessed 29 Jan 2019
- 71.jQuery. https://jquery.com. Accessed 29 Jan 2019
- 72.Enterprise web apps: design, develop, and test—Sencha. https://www.sencha.com. Accessed 29 Jan 2019
- 74.Browserify. http://browserify.org. Accessed 29 Jan 2019
- 75.Webpack module bundler. http://webpack.github.io. Accessed 29 Jan 2019
Open AccessThis article is distributed under the terms of the Creative Commons Attribution 4.0 International License (http://creativecommons.org/licenses/by/4.0/), which permits unrestricted use, distribution, and reproduction in any medium, provided you give appropriate credit to the original author(s) and the source, provide a link to the Creative Commons license, and indicate if changes were made. The Creative Commons Public Domain Dedication waiver (http://creativecommons.org/publicdomain/zero/1.0/) applies to the data made available in this article, unless otherwise stated.