Add extensions additional tutorials links to learnsidebar

files/en-us/_redirects.txt

@@ -5596,7 +5596,7 @@
 /en-US/docs/Learn/Performance/Perceived_performance	/en-US/docs/Learn_web_development/Extensions/Performance/Perceived_performance
 /en-US/docs/Learn/Performance/Populating_the_page:_how_browsers_work	/en-US/docs/Web/Performance/Guides/How_browsers_work
 /en-US/docs/Learn/Performance/Understanding_latency	/en-US/docs/Web/Performance/Guides/Understanding_latency
-/en-US/docs/Learn/Performance/Web_Performance_Basics	/en-US/docs/Learn_web_development/Extensions/Performance/Web_Performance_Basics
+/en-US/docs/Learn/Performance/Web_Performance_Basics	/en-US/docs/Learn_web_development/Extensions/Performance/Best_practices
 /en-US/docs/Learn/Performance/Web_performance_overview	/en-US/docs/Learn_web_development/Extensions/Performance/What_is_web_performance
 /en-US/docs/Learn/Performance/What_is_web_performance	/en-US/docs/Learn_web_development/Extensions/Performance/What_is_web_performance
 /en-US/docs/Learn/Performance/business_case_for_performance	/en-US/docs/Learn_web_development/Extensions/Performance/business_case_for_performance
@@ -5841,6 +5841,8 @@
 /en-US/docs/Learn_web_development/Extensions/Forms/Test_your_skills:_HTML5_controls	/en-US/docs/Learn_web_development/Extensions/Forms
 /en-US/docs/Learn_web_development/Extensions/Forms/Test_your_skills:_Other_controls	/en-US/docs/Learn_web_development/Extensions/Forms
 /en-US/docs/Learn_web_development/Extensions/Forms/Test_your_skills:_Styling_basics	/en-US/docs/Learn_web_development/Extensions/Forms
+/en-US/docs/Learn_web_development/Extensions/Performance/Resources	/en-US/docs/Learn_web_development/Extensions/Performance/Best_practices
+/en-US/docs/Learn_web_development/Extensions/Performance/Web_Performance_Basics	/en-US/docs/Learn_web_development/Extensions/Performance/Best_practices
 /en-US/docs/Learn_web_development/Extensions/Security_privacy	/en-US/docs/Web/Security
 /en-US/docs/Learn_web_development/Extensions/Transform_animate	/en-US/docs/Learn_web_development/Extensions
 /en-US/docs/Learn_web_development/Getting_started/Basic_setup	/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software

files/en-us/_wikihistory.json

@@ -8793,6 +8793,17 @@
       "malchata"
     ]
   },
+  "Learn_web_development/Extensions/Performance/Best_practices": {
+    "modified": "2020-07-16T22:40:42.703Z",
+    "contributors": [
+      "Sheppy",
+      "estelle",
+      "jdmerriman",
+      "verde79",
+      "PickensC",
+      "santoshjoseph99"
+    ]
+  },
   "Learn_web_development/Extensions/Performance/CSS": {
     "modified": "2020-11-11T15:16:18.377Z",
     "contributors": ["chrisdavidmills", "estelle"]
@@ -8832,17 +8843,6 @@
     "modified": "2020-07-16T22:40:43.307Z",
     "contributors": ["wilsotobianco", "estelle", "mhilko", "ottoetc"]
   },
-  "Learn_web_development/Extensions/Performance/Web_Performance_Basics": {
-    "modified": "2020-07-16T22:40:42.703Z",
-    "contributors": [
-      "Sheppy",
-      "estelle",
-      "jdmerriman",
-      "verde79",
-      "PickensC",
-      "santoshjoseph99"
-    ]
-  },
   "Learn_web_development/Extensions/Performance/What_is_web_performance": {
     "modified": "2020-07-16T22:40:40.542Z",
     "contributors": [

files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/index.md

@@ -1,5 +1,6 @@
 ---
 title: How to build custom form controls
+short-title: Custom form controls
 slug: Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls
 page-type: learn-module-chapter
 sidebar: learnsidebar

files/en-us/learn_web_development/extensions/forms/html_forms_in_legacy_browsers/index.md

@@ -1,5 +1,6 @@
 ---
 title: HTML forms in legacy browsers
+short-title: Forms in legacy browsers
 slug: Learn_web_development/Extensions/Forms/HTML_forms_in_legacy_browsers
 page-type: guide
 sidebar: learnsidebar
@@ -86,17 +87,15 @@ input[type="button"] {
 }
 ```
 
-### Let go of CSS
+### Limit styling in legacy browsers
 
-One of the big issues with HTML Forms is styling form widgets with CSS. Form controls appearance is browser and operating system specific. For example, the input of color type looks different in Safari, Chrome and Firefox browser, but the color picker widget is the same in all browsers on a device as it opens up the operating system's native color picker.
+One of the big issues with HTML forms in legacy browsers is styling them with CSS. As covered elsewhere, you can declare {{cssxref('appearance', 'appearance: none;')}} to remove the default styles and build your own on top. However, legacy browsers are less likely than modern browsers to support the styling techniques covered earlier in the module. It might be better to just leave form controls unstyled in legacy browsers, if you need to support them. See the next section for advice on detecting support for specific input types.
 
-It's generally a good idea to not alter the default appearance of form control because altering one CSS property value may alter some input types but not others. For example, if you declare `input { font-size: 2rem; }`, it will impact `number`, `date`, and `text`, but not `color` or `range`. If you alter a property, that may impact the appearance of the widget in unexpected ways. For example, `[value] { background-color: #cccccc; }` may have been used to target every {{HTMLElement("input")}} with a `value` attribute, but changing the background-color or border radius on a {{HTMLElement("meter")}} will lead to likely unexpected results that differ across browsers. You can declare {{cssxref('appearance', 'appearance: none;')}} to remove the browser styles, but that generally defeats the purpose: as you lose all styling, removing the default look and feel your visitors are used to.
-
-To summarize, when it comes to styling form control widgets, the side effects of styling them with CSS can be unpredictable. So don't. Even if it's still possible to do a few adjustments on text elements (such as sizing or font color), there are always side effects. The best approach remains to not style HTML Form widgets at all. But you can still apply styles to all the surrounding items. And, if you must alter the default styles of your form widgets, define a style guide to ensure consistency among all your form controls so user experience is not destroyed. You can also investigate some hard techniques such as [rebuilding widgets with JavaScript](/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls). But in that case, do not hesitate to [charge your client for such foolishness](https://www.smashingmagazine.com/2011/11/but-the-client-wants-ie-6-support/).
+If you must alter the default styles of your form widgets in legacy browsers, define a style guide to ensure consistency among all your form controls so user experience is not destroyed. You could also investigate some hard techniques such as [rebuilding widgets with JavaScript](/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls), but it might be more trouble than it's worth.
 
 ## Feature detection and polyfills
 
-CSS and JavaScript are awesome technologies, but it's important to ensure you don't break legacy browsers. Before using features that aren't fully supported in the browsers your targeting, you should feature detect:
+CSS and JavaScript are awesome technologies, but it's important to ensure you don't break legacy browsers. Before using features that aren't fully supported in the browsers your targeting, you should feature detect.
 
 ### CSS feature detection
 
@@ -113,14 +112,42 @@ Before styling a replaced form control widget, you can check to see if the brows
 
 The {{cssxref('appearance')}} property can be used to display an element using platform-native styling, or, as is done with the value of `none`, remove default platform-native based styling.
 
+### JavaScript form input detection
+
+You can use JavaScript to detect whether a particular input type is supported. This is based on the fact we mentioned before — that every input type falls back to `<input type="text">` in non-supporting browsers.
+
+1. Define a test function. The first line of the function body should create a test `<input>` element:
+
+   ```js
+   function testDatetimeLocalSupport() {
+     const testInput = document.createElement("input");
+   ```
+
+2. Next, set its `type` attribute to the type you want to test:
+
+   ```js-nolint
+     testInput.setAttribute("type", "datetime-local");
+   ```
+
+3. Now test the `type` attribute value. In browsers that don't support that input type, the last line will have no effect and the `type` will be returned as `text`. In the below line we are inverting the return value using the negation operator (`!`) because if the `type` isn't `text`, then the type is supported, so we want to return `true`:
+
+   ```js
+     return testInput.type !== "text";
+   }
+   ```
+
+The above example shows the basic idea behind such tests. Instead of reinventing the wheel, however, you should use a feature detection library such as [Modernizr](https://modernizr.com/) to handle such tests.
+
+Based on the results of that test, you could then for example choose to use JavaScript to build a custom replacement for the non-supported type, or not apply a stylesheet that styles the non-supported type because you want to provide simple default styles to legacy browsers.
+
 ### Unobtrusive JavaScript
 
 One of the biggest problems is the availability of APIs. For that reason, it's considered best practice to work with "unobtrusive" JavaScript. It's a development pattern that defines two requirements:
 
 - A strict separation between structure and behaviors.
 - If the code breaks, the content and the basic functionalities must remain accessible and usable.
 
-[The principles of unobtrusive JavaScript](https://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript) (originally written by Peter-Paul Koch for Dev.Opera.com) describes these ideas very well.
+[The principles of unobtrusive JavaScript](https://www.w3.org/wiki/The_principles_of_unobtrusive_JavaScript) (originally written by Peter-Paul Koch for dev.opera.com) describes these ideas very well.
 
 ### Pay attention to performance
 

files/en-us/learn_web_development/extensions/forms/index.md

@@ -54,22 +54,23 @@ The above text is a good indicator as to why we've put web forms into its own st
 - [Sending form data](/en-US/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data)
   - : This article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there? We also look at some of the security concerns associated with sending form data.
 
-## Additional articles
+## Additional tutorials
 
 The following articles aren't included in the learning pathway, but they'll prove interesting and useful when you've mastered the above techniques and want to know more.
 
 - [How to build custom form controls](/en-US/docs/Learn_web_development/Extensions/Forms/How_to_build_custom_form_controls)
   - : You'll come across some cases where the native form widgets just don't provide what you need, e.g., because of styling or functionality. In such cases, you may need to build your own form widget out of raw HTML. This article explains how you'd do this and the considerations you need to be aware of when doing so, with a practical case study.
 - [Sending forms through JavaScript](/en-US/docs/Learn_web_development/Extensions/Forms/Sending_forms_through_JavaScript)
   - : This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also [Using FormData objects](/en-US/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects).)
-- [Customizable select elements](/en-US/docs/Learn_web_development/Extensions/Forms/Customizable_select)
-  - : This article explains how to use dedicated, modern HTML and CSS features together to create fully-customized {{htmlelement("select")}} elements.
+- [HTML forms in legacy browsers](/en-US/docs/Learn_web_development/Extensions/Forms/HTML_forms_in_legacy_browsers)
+  - : This article provides tips and tricks to help ease the pain if, and when, you need to support legacy browsers with your HTML forms.
+- [User input methods and controls](/en-US/docs/Learn_web_development/Extensions/Forms/User_input_methods)
+  - : This article shows the different ways that users interact with forms and other web content, and provides recommendations for managing user input, real-world examples, and links to further information.
 
 ## See also
 
 - [HTML forms element reference](/en-US/docs/Web/HTML/Reference/Elements#forms)
 - [HTML \<input> types reference](/en-US/docs/Web/HTML/Reference/Elements/input)
 - [HTML attribute reference](/en-US/docs/Web/HTML/Reference/Attributes)
-- [User input methods and controls](/en-US/docs/Learn_web_development/Extensions/Forms/User_input_methods)
 
 {{NextMenu("Learn_web_development/Extensions/Forms/Your_first_form", "Learn_web_development/Extensions")}}

files/en-us/learn_web_development/extensions/forms/sending_forms_through_javascript/index.md

@@ -1,5 +1,6 @@
 ---
 title: Sending forms through JavaScript
+short-title: JS form submission
 slug: Learn_web_development/Extensions/Forms/Sending_forms_through_JavaScript
 page-type: learn-module-chapter
 sidebar: learnsidebar

files/en-us/learn_web_development/extensions/forms/user_input_methods/index.md

@@ -1,5 +1,6 @@
 ---
 title: User input methods and controls
+short-title: UI methods & controls
 slug: Learn_web_development/Extensions/Forms/User_input_methods
 page-type: guide
 sidebar: learnsidebar

files/en-us/learn_web_development/extensions/performance/web_performance_basics/index.md → files/en-us/learn_web_development/extensions/performance/best_practices/index.md

@@ -1,6 +1,7 @@
 ---
-title: Web performance resources
-slug: Learn_web_development/Extensions/Performance/Web_Performance_Basics
+title: Web Performance best practices & tips
+short-title: Best practices & tips
+slug: Learn_web_development/Extensions/Performance/Best_practices
 page-type: learn-module-chapter
 sidebar: learnsidebar
 ---

files/en-us/learn_web_development/extensions/performance/business_case_for_performance/index.md

@@ -6,7 +6,7 @@ page-type: learn-module-chapter
 sidebar: learnsidebar
 ---
 
-{{PreviousMenuNext("Learn_web_development/Extensions/Performance/CSS", "Learn_web_development/Extensions/Performance/Web_Performance_Basics", "Learn_web_development/Extensions/Performance")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Performance/CSS", "Learn_web_development/Extensions/Performance/Best_practices", "Learn_web_development/Extensions/Performance")}}
 
 We've discussed the importance of web performance. You've learned what you need to do to optimize for web performance. But how do you convince your clients and/or management to prioritize and invest in performance? In this section, we discuss creating a clear business case to convince decision-makers to make the investment.
 
@@ -55,4 +55,4 @@ Setting key performance indicators (KPI) as objectives can highlight performance
 
 Setting conversion rate, time on site, and/or net promotion scores as KPIs give financial and other business goal value to the web performance efforts, and get help boost buy-in, with metrics to prove the efforts worth.
 
-{{PreviousMenu("Learn_web_development/Extensions/Performance/CSS", "Learn_web_development/Extensions/Performance")}}
+{{PreviousMenuNext("Learn_web_development/Extensions/Performance/CSS", "Learn_web_development/Extensions/Performance/Best_practices", "Learn_web_development/Extensions/Performance")}}

files/en-us/learn_web_development/extensions/performance/index.md

@@ -43,11 +43,11 @@ It would also be helpful to go a bit deeper into these topics, with modules such
   - : CSS may be a less important optimization focus for improved performance, but there are some CSS features that impact performance more than others. In this article we look at some CSS properties that impact performance and suggested ways of handling styles to ensure performance is not negatively impacted.
 - [The business case for web performance](/en-US/docs/Learn_web_development/Extensions/Performance/business_case_for_performance)
   - : There are many things a developer can do to improve performance, but how fast is fast enough? How can you convince powers that be of the importance of these efforts? Once optimized, how can you ensure bloat doesn't come back? In this article we look at convincing management, developing a performance culture and performance budget, and introduce ways to ensure regressions don't sneak into your code base.
+- [Web Performance best practices & tips](/en-US/docs/Learn_web_development/Extensions/Performance/Best_practices)
+  - : This article covers several topics at a basic level and provides links to deeper dives to improve performance for each topic. In addition to front-end topics such as HTML, CSS, JavaScript, and media files, it also covers APIs, developer tools, best practices, and bad practices relating to web performance.
 
 ## See also
 
-- [Web performance resources](/en-US/docs/Learn_web_development/Extensions/Performance/Web_Performance_Basics)
-  - : In addition to the front end components of HTML, CSS, JavaScript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. There are many APIs, developer tools, best practices, and bad practices relating to web performance. Here we'll introduce many of these features at the basic level and provide links to deeper dives to improve performance for each topic.
 - [Responsive images](/en-US/docs/Web/HTML/Guides/Responsive_images)
   - : In this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools HTML provides to help implement them. This helps to improve performance across different devices. Responsive images are just one part of [responsive design](/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design), a future CSS topic for you to learn.
 - [Main web performance section on MDN](/en-US/docs/Web/Performance)

files/en-us/learn_web_development/extensions/server-side/apache_configuration_htaccess/index.md

@@ -1,5 +1,6 @@
 ---
 title: "Apache Configuration: .htaccess"
+short-title: Apache .htaccess
 slug: Learn_web_development/Extensions/Server-side/Apache_Configuration_htaccess
 page-type: guide
 sidebar: learnsidebar

files/en-us/learn_web_development/extensions/server-side/configuring_server_mime_types/index.md

@@ -1,5 +1,6 @@
 ---
 title: Properly configuring server MIME types
+short-title: Server MIME type config
 slug: Learn_web_development/Extensions/Server-side/Configuring_server_MIME_types
 page-type: guide
 sidebar: learnsidebar

files/en-us/learn_web_development/extensions/server-side/node_server_without_framework/index.md

@@ -1,5 +1,6 @@
 ---
 title: Node.js server without a framework
+short-title: Plain Node.js server
 slug: Learn_web_development/Extensions/Server-side/Node_server_without_framework
 page-type: guide
 sidebar: learnsidebar

files/en-us/web/performance/guides/performance_budgets/index.md

@@ -32,7 +32,7 @@ The warning level allows you to be proactive and plan any tech debt, while not b
 
 The error level is an upper bound limit, where changes will have a negative and noticeable impact.
 
-In order to begin, you need to first measure the devices and connection speeds where your users are coming from (e.g., A \~$_200_ Android device over a 3G connection), using multiple [tools](/en-US/docs/Learn_web_development/Extensions/Performance/Web_Performance_Basics). These time-based metrics will translate into file-size budgets.
+The first step is to measure the devices and connection speeds where your users are coming from (e.g., A \~$_200_ Android device over a 3G connection), using multiple [tools](/en-US/docs/Learn_web_development/Extensions/Performance/Best_practices). These time-based metrics will translate into file-size budgets.
 
 A default baseline to reduce bounce rate is to achieve [Time to Interactive under 5 seconds in 3G/4G, and under 2 seconds for subsequent loads](https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/). However, based on the specific goals and content of your site, you might choose to focus on other metrics.