-
Notifications
You must be signed in to change notification settings - Fork 0
3. Research
- 3.1 JavaScript Research (FDw1)
- 3.2 Progressive Enhancement (FDw2)
- 3.3 Progressive Disclosure (FDw3)
- 3.4 Technical (NPM) Research (PTw3)
- 3.5 More JavaScript Research (FDw4)
- 3.6 Coding Standards (PTw4)
The scope dictates whether or not variables are accessible.
In JavaScript there's a global and a local scope. Generally, local scopes can only access variables from the global or its own local scope. It's like a supermarket; you can only take groceries from the shelves (global scope) or your own cart (local scope) and taking from other carts isn't allowed. Every function in JavaScript creates its own local scope. This means that variables created inside a function will only be accessible inside this function. An example:
var globalScope = "global";
function example() {
var localScope = "local";
console.log(globalScope, localScope)
}
example()
console.log(globalScope, localScope)
Will first log global local and then throw a Uncaught ReferenceError on line 6: localScope is not defined because the localScope variable declared inside the function is inaccessible from the global scope where the console.log() function is called.
Sources
JavaScript Scope. (n.d.). Retrieved May 11, 2020, from https://www.w3schools.com/js/js_scope.asp
The context refers to the current value of the this keyword.
The this keyword contains the object that holds the code that's currently executing.
Sources
Gupta, D. (2019, January 6). Understanding Javascript ‘this’ keyword (Context). Retrieved May 11, 2020, from https://towardsdatascience.com/javascript-context-this-keyword-9a78a19d5786
Closures control what's inside and what's outside of a scope.
When a JavaScript function is created, the closures describe the bounds of the of the newly created function. By using these closures you can "hide" variables from the outside scope. This can thus be used for data privacy and other implementations.
Sources
Elliott, E. (2019, December 19). Master the JavaScript Interview: What is a Closure? Retrieved May 11, 2020, from https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36
Hoisting is JavaScript's behaviour of finding every declaration and storing them into memory before execution.
Because of JavaScript's Hoisting behaviour you can, for example, use a function before its declaration. Like so:
example("Slim Shady");
function example(name) {
console.log("Hi! My name is..." + name);
}
Possibly against your expectations, this will execute properly and output Hi! My name is...Slim Shady. JavaScript hoists the function declaration and stores this before moving on to the function call on the first line.
Sources
Hoisting. (2020, March 27). Retrieved May 11, 2020, from https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
Progressive Enhancement is the act of building a web app starting from the foundational functionalities and progressively building upon this foundation for clients with higher capabilities. This allows users on a low-end device or connection to still use the core functionalities of the web app, while high-end clients can utilise the full spectrum of the web app's services.
Just like Mobile First design, Progressive Enhancement forces you to think about what the core functionalities of your web app are. This reduces clutter in your design and creates a much stronger foundation for future additions. It also means that, by focusing solely on the most important aspects of your web app, you'll have a working prototype finished early, fitting in effectively with the ever-growing Agile business landscape. But most importantly: web apps built with Progressive Enhancement in mind allow every type of visitor to use the web app's most basic functionalities. This means more clients will be able to use your web app which in turn means more money, but we're not here for that, of course. We're just here to improve the user experience of our beloved visitors.
The first step is to separate the different web technologies (HTML/CSS/JS) into layers. The first layer will be Markup (HTML), the second is Styling (CSS) and the third is Behaviour (JS). With these layers in mind, we can establish the requirements for Progressive Enhancement.
The first step is writing rigorously structured and semantically correct HTML. A well thought-out structure allows users to understand the application, even without styling. Semantically correct HTML also improves screen reader and SEO engine capabilities.
The next step is creating the Styling layer: the presentation of the page. It is common practice to break this layer down into individual layers, according to browser capabilities. For example, the first layer contains very basic CSS like colors, fundamental shapes, typography and other styling options supported by virtually any browser. The second layer includes more advanced properties that aren't as universally supported but improve the user's experience. This way, every browser is able to display your app with basic styling at least.
The last step is correctly making use of JavaScript in the Behaviour layer. There are users who disable JS, screen readers without JS support, mobile browsers with barely functional JS support and other situations where JavaScript can't or won't be used. So in an effort to include those users, it is important that your web app works without JavaScript.
And that's all there is to Progressive Enhancement in a basic web environment. Although the implementation of the principles described above will differ between developer preferences and project requirements, abiding by these principles will always reward your clients with a highly functional user experience.
Sources
Craig, W. (n.d.). Progressive Enhancement 101: Overview and Best Practices. Retrieved May 11, 2020, from https://www.webfx.com/blog/web-design/progressive-enhancement/
Dwyer, S. (2009, April 22). Progressive Enhancement: What It Is, And How To Use It? Retrieved May 11, 2020, from https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/
WDD STAFF. (2018, February 7). A Complete Guide to Progressive Enhancement. Retrieved May 11, 2020, from https://www.webdesignerdepot.com/2010/08/a-complete-guide-to-progressive-enhancement/
In short: Progressive Disclose is a design pattern that distributes information and possible actions between multiple screens instead of displaying everything in a single view. This makes it easier for the user to parse all the possibilities and information, making the application effortless to use and understand. Progressive Disclosure is achieved by only displaying essential parts of an application and hiding secondary tasks on a different screen. Implementing this properly means new users will have an easier time navigating the applications while experienced users have unhindered access to all functionalities. In contrast, applications like Photoshop are notoriously hard to learn for new users as it attempts to show as much information at once, allowing easy access to the full spectrum of functionality specifically for experienced users.
The first step is knowing what to hide and what to show. It's important to know your users before making this decision.
Make sure your users know where to find what they're looking for. Progressive Disclosure will hinder your users if it's not clear where they can find specific functionalities.
Avoid implementing too many layers of Progressive Disclosure. Having multiple layers of Progressive Disclosure will make it harder for users to find the functionality or information they're looking for. Additionally, it will hinder experienced users who know where to look but have to navigate through multiple screens or menu's to get there.
Sources
Interaction Design Foundation. (n.d.). What is Progressive Disclosure? Retrieved May 18, 2020, from https://www.interaction-design.org/literature/topics/progressive-disclosure
Babich, N. (2019, August 6). Progressive Disclosure: Simplifying the Complexity. Retrieved May 18, 2020, from https://www.shopify.com/partners/blog/progressive-disclosure
EJS templating allows you to write plain JavaScript in HTML formats, meaning you don't have to learn a new syntax to get started with EJS. EJS uses Includes allowing the user to separate different parts of the whole application. EJS expressions generally start with <% and end with %>.
Handlebars is a slightly more popular templating language. An example of Handlebars' embedded expressions looks like <p>{{firstname}} {{lastname}}</p>. The expressions get replaced by a data object. Handlebars allows code reuse (like EJS' Includes) with Partials.
EJS' way of just writing plain JavaScript straight into the HTML page really intrigued me and became the main reason why I chose for EJS over Handlebars. Because this project is relatively fast-paced, I hope not having to learn a new syntax will speed up the process of realising my feature.
scotch.io suggests the following file structure:
- views
----- partials
---------- footer.ejs
---------- head.ejs
---------- header.ejs
----- pages
---------- index.ejs
---------- about.ejs
- package.json
- server.js
I will follow this basic structure and see if I need to modify anything according to project needs.
Multer is useful for handling multipart/form-data (file uploads).
Bodyparser is middleware for parsing request bodies.
Formidable is parses form data, including file uploads.
Slick Carousel is used for creating carousels.
Swing recreates the tinder-like swiping interaction.
Sources
Eernisse, M. (n.d.). Embedded JavaScript templating. Retrieved May 17, 2020, from https://ejs.co/
Katz, Y. (n.d.). Handlebars. Retrieved May 17, 2020, from https://handlebarsjs.com/
Use EJS to Template Your Node Application. (2014, July 31). Retrieved May 17, 2020, from https://scotch.io/tutorials/use-ejs-to-template-your-node-application
JavaScript contains two kinds of looping functions: While & For loops. They both specialise in repeating pieces of code but have different uses and niches.
While loops are useful for repeating while a condition is met. While loops generally look like this:
while (i < 5) {
i += 1;
console.log(i);
}
There's also a Do... While loop. They always execute once and then continue as a regular while loop. They look like this:
do {
i += 1;
console.log(i);
} while (i < 5);
For loops are most useful for looping through arrays of data. There are 3 different kinds of For loops:
for (var i = 0; i < array.length; i++) {
console.log(array[i])
}
for (element in array) {
console.log(array[element])
}
for (element of array) {
console.log(element)
}
Although these loops all do the same in this example, it's important to note the difference in which they can be used.
JavaScript also offers some Higher Order Functions for looping over arrays. These include: Array.prototype.map(), Array.prototype.reduce() and Array.prototype.filter(). Examples of these can be found on my Wiki here.
-
Array.prototype.map()creates a new array and populates it by calling a function on every element in the original array. -
Array.prototype.reduce()returns a single value containing the result of the reduce function, called on every element in the original array. -
Array.prototype.filter()creates a new array and populates it with the elements in the original array that pass the filter function.
Sources
Loops and iteration. (2020, January 30). Retrieved May 23, 2020, from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration
Array.prototype.map(). (2020, May 20). Retrieved May 27, 2020, from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
Array.prototype.reduce(). (2020, May 20). Retrieved May 27, 2020, from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
Array.prototype.filter(). (2020, May 23). Retrieved May 27, 2020, from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
Higher Order Functions are functions that either takes a function as an argument or returns a function. In the chapter above, I briefly discussed builtin functions like Array.prototype.filter() and linked an example. These functions are a good example of higher order functions as they take a function as an argument.
Sources
Haverbeke, M. (n.d.). Higher-Order Functions :: Eloquent JavaScript. Retrieved May 23, 2020, from https://eloquentjavascript.net/05_higher_order.html
Elliott, E. (2019a, January 10). Higher Order Functions (Composing Software). Retrieved May 26, 2020, from https://medium.com/javascript-scene/higher-order-functions-composing-software-5365cf2cbe99
Like needing paper to write text, you need a code editor to write code. There are many different Code Editors, each one specialised in filling a different niche or providing extra support for a specific language. Of course, there are also a few that are inferior in every way. A few Code Editors popular for writing NodeJS applications are:
Homepage: https://code.visualstudio.com/ Visual Studio Code is the most popular Code Editor around right now and has become the standard for Web Development and offers a lot of functionality out of the box.
Homepage: https://atom.io/ Atom is a very plugin-based Code Editor. As such, it's completely customisable but you'll have to install a bunch of plugins to personalise Atom.
Homepage: https://www.sublimetext.com/ Sublime Text is a solid text editor with an easy to use interface. Just like Atom and VSCode it offers a large library of packages to customise your user experience.
Extensions, or packages, can be installed for most Code Editors to personalise your workflow and user experience. As an Atom user, here are some extensions that I use:
- atom-beautify: One click beautifying for a wide variety of languages.
- atom-live-server: Simple localhost server that automatically updates on code change.
- drag-relative-path: Useful for dragging the relative path of a file into the code.
- line-count: Counts your lines... duh
- linter-eslint: Automatic linter for JavaScript.
- minimap: Shows a preview of the full code to improve navigation.
- pigment: Displays color in projects and files.
A linter analyses code, checking for functional and/or stylistic errors. Linters are therefore very useful for detecting errors, especially in less strict languages like JavaScript. They can also help enforce a specific code style while working in a team of developers.
Linters can be completely customised to support the needs of your project and team. There are also preset configurations available. For example, Airbnb has a config file (.eslintrc) available for ESLint, a popular linter for JavaScript.
Linters can be installed to run before running the test application, but it is often more helpful to install a Linter for your Code Editor so its runs after saving or while writing to get instant feedback.
Sources
Wouk, K. (2019, December 9). Visual Studio Code vs. Atom: Which Text Editor Is Right for You? Retrieved May 27, 2020, from https://www.makeuseof.com/tag/visual-studio-code-vs-atom/
Keeton, B. J. (2019, February 26). The 11 Best Code Editors for 2019. Retrieved May 27, 2020, from https://www.elegantthemes.com/blog/resources/best-code-editors