Web technologies
The technologies used to build Surfer Dude Studios.
Presentation of web-based content is a dynamic field. The means and methods of delivering it are fluid and change constantly to suit new hardware, accesibility, ergonomics, goals and technologies.
Web technologies is a general term, referring to the languages and resources that are used with one another, to produce web driven content. Taken individualy each technology is fairly limited, dedicated to a few limited goals, making them interdependent on one another.
Equally important as the build though, is testing and validation of any code written. There are several various options for testing and validating code.
Below, is the list of technologies used to build the current version of Surfer Dude Studios, and to test and validate it.
- Axure RP
- Axure RP Pro is a wireframing, rapid prototyping, documentation and specification software tool. It is used to design not just the branding and layout of a website, but to demonstrate its responsive states, and user flows or journeys. Projects can be cross collaborated accross a variety of browsers using Axure share on the cloud. For more information visit the Axure website (External site - opens in a new window).
- HTML 5
- HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current major version of the HTML standard. In the traditional HTML / CSS / JavaScript model this is the content - what message a website, page or app is delivering and its semantic structure. For more information visit the World Wide Web Consortium (W3C) (External site - opens in a new window).
- CSS 3
- Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Separation of formatting and content makes it possible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. It can also display the web page differently depending on the screen size or viewing device. For more information visit the section on CSS at the World Wide Web Consortium (W3C) (External site - opens in a new window).
- JavaScript
- JavaScript is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. One of the three core technologies of World Wide Web content engineering (the other two being HTML and CSS) JavaScript provides interactivity to sites and apps. Initially only implemented client-side in web browsers, JavaScript engines are now embedded in many other types of host software, including server-side in web servers. For more information visit the JavaScript website (External site - opens in a new window).
- Bootstrap 4
- Bootstrap is a free and open-source front-end library for designing websites and web applications. It contains HTML and CSS based design templates for layouts, typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Unlike many web frameworks, it concerns itself with front-end development only. For more information visit the Bootstrap website (External site - opens in a new window).
- JQuery 3.5.1
- jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. The jQuery library is a single JavaScript file containing all of its common DOM, event, effects, and Ajax functions. It can be included within a Web page by linking to a local copy or to one of the many copies available from public servers. For more information visit the JQuery website (External site - opens in a new window).
- Font Awesome 5
- Font Awesome is an icon and font toolkit. Bootstrap 4 dropped support for its own glyphicon library, to enable users to choose a more appropriate resource suited to their needs. Font Awesome is the second most popular third-party font provider behind Google Fonts. Font Awesome 5 can be downloaded and readily compiled in a SASS format, and is available in a free, or paid for version. For more information visit the Font Awesome website (External site - opens in a new window).
- PHP
- PHP is a server-side scripting language designed for web development but also used as a general-purpose programming language. PHP code may be embedded into HTML code, or it can be used in combination with various web template systems, web content management systems, and web frameworks. PHP code is usually processed by a PHP interpreter implemented as a module in the web server or as a Common Gateway Interface (CGI) executable. The web server combines the results of the interpreted and executed PHP code, which may be any type of data, including images, with the generated web page. For more information visit the php website (External site - opens in a new window).
- SASS 3.5.5
- Sass is a scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). Sass extends CSS by providing several mechanisms available in more traditional programming languages, particularly object-oriented languages, but that are not available to CSS3 itself. When SassScript is interpreted, it creates blocks of CSS rules for various selectors as defined by the Sass file. For more information visit the SASS website (External site - opens in a new window).
Although more commonly associated with the MEAN or MERN stack (MongoDB, Express.js, AngularJS (or Angular) / React, and Node.js), NodeJS offers a good range of extras that can be used and incorporated into any web project.
- NodeJS
- Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. Node.js lets developers use JavaScript to write Command Line tools and for server-side scripting, running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser. Consequently, Node.js represents a "JavaScript everywhere" paradigm, unifying web application development around a single programming language. For more information visit the NodeJS website (External site - opens in a new window).
- NPM
- NPM is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js. It consists of a command line client, also called npm, and an online database of public and paid-for private packages, called the npm registry. For more information visit the NPM website (External site - opens in a new window).
- Gulp
- Gulp is an open-source JavaScript toolkit by Fractal Innovations and the open source community at GitHub, used as a streaming build system in front-end web development. It is a task runner built on Node.js and npm, used for automation of time-consuming and repetitive tasks involved in web development like minification, concatenation, cache busting, unit testing, linting, optimization, etc. On Surfer Dude Studios it is used to compile the SCSS partials into CSS, and JavaScript libraries and Coffeescript into JS files. For more information visit the Gulp website (External site - opens in a new window).
- CoffeeScript
- CoffeeScript is a programming language that transcompiles to JavaScript. It adds syntactic sugar inspired by Ruby, Python and Haskell in an effort to enhance JavaScript's brevity and readability. Specific additional features include list comprehension and pattern matching. For more information visit the CoffeScript website (External site - opens in a new window).
- W3C Markup Validator
- This is a free, online mark up validation tool provided by the W3C. This allows mark up to be validated by uri, uploading a file, or by cutting and pasting code. For more information visit the mark up validation tool site (External site - opens in a new window).
- W3C CSS Validator
- Like its mark up equivalent, this is a free, online mark up validation tool provided by the W3C. This allows mark up to be validated by uri, uploading a file, or by cutting and pasting code. For more information visit the CSS validation tool site (External site - opens in a new window).
- Chrome DevTools
- The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome. The DevTools provide web developers deep access into the internals of the browser and their web application. For more information visit the Chrome DevTools site (External site - opens in a new window)
- BrowserStack
- Cross browser compatability testing that enables developers to test websites across various browsers on different operating systems and mobile devices, without the need to install virtual machines or emulators. For more information visit the BrowserStack site (External site - opens in a new window)
- Adobe Edge Inspect CC
- An app to allow quick previewing of a web design on mobile platforms, without publishing the associated files to a server. It allows iOS and Android mobile devices to be paired to a computer, and each device will display the same site using its native render and presentation modes. For more information visit the Adobe Edge Inspect CC (External site - opens in a new window).
- Google Analytics
- Google Analytics is a freemium web analytics service offered by Google that tracks and reports website traffic, currently as a platform inside the Google Marketing Platform brand. For more information visit the Google analytics website (External site - opens in a new window).
- Git
- Git is a version-control system for tracking changes in computer files and coordinating work on those files among multiple people. It is primarily used for source-code management in software development, but it can be used to keep track of changes in any set of files. For more information visit the Git website (External site - opens in a new window).