The first step would be to correctly detect the preffered languages from The Client...either done on the front-end (with navigator.language) or server-side (with the Accept-Language request header). The next step would be to identify which language the application supports based on The Client's order of preference. Then you would use a library/package to assist with the configuration of localization settings for the site, and also storing the data for different languages in an easy to use format, such as JSON. One popular library to assist with this is the i18n npm package. The last step would be to use a view engine to inject the correct strings into the html.
- It helps prove that individual components of the application behave as expected, in isolation from their larger parts, or the application as a whole. This is the premise behind unit testing...testing code in isolation.
- Ensures that any refactoring or additions to the codebase have an avenue to be immediately tested for any affects it may have on the rest of the codebase and in general the stability of the application
-
Provide fallback support when a browser doesn't support the particular HTML tag. This could involve attempting to serve an HTML5 tag, but with fallback support to a more verbose HTML4 solution. Similarly, in CSS, you can use Vendor Prefixes to provide fallback support.
-
IE Conditionals. These are specifically for Internet Explorer (and older versions at that), which provide a way to specify particular css or javascript files in the HTML for which only IE would need to serve the client.
-
Polyfills & Shims. These allow you to bring a 3rd party library or API into the application in order to support cross browser compatibility.
-
Continuous Integration tools such as Travis or Circle CI. These ensure that a series of tests pass before the code is deployed (integrated) into the designated environment.
-
Unit Testing. With a well written test suite, much of the sites functionality, especially around the middle-tier can be checked nearly instantanously at any time. This is why testing has become so crucial in solving this problem.
-
Linting. While typically only related to non-functional syntax issues, linting can be a great way to ensure the developer is conforming to the company's standards and best practices.
-
Testing / Staging Environments. With environments targeted at testing the fully deployed application, with an attempt to create a staging environment that as closely mirrors production as possible, this can eliminate any issues with the actual deployment process, and also give the QA team a place to test the UI/UX functionality before the change hits production.
What factors influence whether you’ll take a progressive enhancement vs. graceful degradation approach to building an application?
Graceful Degradation is the idea that you would target your application to provide a certain user experience in a more modern browser, with the ability to fallback or degrade gracefully to a lower level of user experience in older browsers. While at the same time, maintaining complete functionality of the application, but in a less ideal UX/UI experience for the user.
Progressive Enhancement is essential the opposite of this approach. In that you would start by establishing a base level of user experience that all browsers would be able to support. Upon which you would add a more rich experience for more modern browsers while maintaining consistant functionality with older browsers.
MVC = Model View Controller. This is an architectural setup or blueprint for your application which dictates how responsibilities should be divided between the different working parts of the application, and how they communicate with one another.
-
Model: Defines the structure of the data within the application. This is typically an abstraction over the actual database, such as using an ORM tool.
-
View: Defines how the application should look, and how the data is displayed to the client.
-
Controller: Dictates how the data or view should be updated in response to a client action or other type listener.
Cross-Origin Resource Sharing: When a user makes a request for a resource from another domain, proticol, or port, they are making a cross-origin http request. The browser restricts these requests from occuring an scripts, for security reasons. CORS is a standard that can be implemented by all browsers to support cross-domain requests. It defines a set of headers which the browser and server use to determine what requests are (and are not) allowed.
border-radius. As someone who knows the pain and struggles web developers have went through to get a graceful solution to rounding box corners, this simple 1 liner that we can add to any css property is AMAZING.
Text and Box Shadows. Similarly to the border-radius, having this functionality baked into standard css rules is fantastic.
The Flexible Box Model and also the Grid Layout. These are a great set of properties that can be added to a nested layout in order to help with layout and positioning...no more floats and aboslute positioning.
Responsive design involves deliberately creating a style or layout for your application which would be supported on multiple screen sizes and resolutions. This would typically involve the use of media queries in css which would trigger breakpoints in the screen-size, at which a new set of styles would be applied to the html, in a way that re-formats the content to the appropriate screen size.
inline-block elements behave similarly to inline elements, in that text flows around them. The major difference is that inline-block elements can have a width and height value (which is honored).
A keyword added to a css selector which indicates styles for a special state of the element. For instance, if the element is in a hover state, or has a link been visited.
For elements which are positioned, meanging Absolute, Fixed, or Relative, a z-index property can be specified, which indicates which elements appear on-top-of or below other elements, in the z-plane. The z-index has no apparent upper bound (is this true?) and can also be a negative number. Elements with a higher z-index are displayed on top of those with a lower z-index.
If you have two elements inside of an outer containing element, one with float: left; and the other with float: right, how can you ensure that the containing element expands around the floated elements and does not collapse?
-
Set the parent containing element to overflow:auto or overflow:hidden
-
You could float the parent containing element, although this may not be disired.
-
Create a spacer element within the parent container, below the 2 divs with a clear:both property.
-
Give the parent container a specific height.
Because these days, code is very modularized. We use npm packages and 3rd party libraries in plethera (SP). Because of this, any global scopped variables or functions would be accessible to these libraries, and could create conflicts with their code, as they would not expect or even be able to anticipate what global variables may be present. this answer needs some rework
Prevents scoping?? maybe not Error handling