-
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/
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