-
Notifications
You must be signed in to change notification settings - Fork 0
3. Research
This page contains...
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...");
}
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 Markup Layer:
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 Styling Layer:
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 Behaviour Layer:
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/