![](\"https://cdn-images-1.medium.com/max/1200/1*t3UQh848ndt4rgr_fDToaw.png\")
\nThe static import statement is used to import read only live bindings which are exported by another module.
Imported modules are in strict mode whether you declare them as such or not. The import statement cannot be used in embedded scripts unless such script has a type=\"module\". Bindings imported are called live bindings because they are updated by the module that exported the binding.
There is also a function-like dynamic import(), which does not require scripts of type=\"module\".
Backward compatibility can be ensured using attribute nomodule on the <script> tag.
//\n import defaultExport from \"module-name\";\n import * as name from \"module-name\";\n import { export1 } from \"module-name\";\n import { export1 as alias1 } from \"module-name\";\n import { export1 , export2 } from \"module-name\";\n import { foo , bar } from \"module-name/path/to/specific/un-exported/file\";\n import { export1 , export2 as alias2 , [...] } from \"module-name\";\n import defaultExport, { export1 [ , [...] ] } from \"module-name\";\n import defaultExport, * as name from \"module-name\";\n import \"module-name\";\n var promise = import(\"module-name\");defaultExport\nName that will refer to the default export from the module.
module-name\nThe module to import from. This is often a relative or absolute path name to the .js file containing the module. Certain bundlers may permit or require the use of the extension; check your environment. Only single quoted and double quoted Strings are allowed.
name\nName of the module object that will be used as a kind of namespace when referring to the imports.
exportN\nName of the exports to be imported.
aliasN\nNames that will refer to the named imports.
The name parameter is the name of the \"module object\" which will be used as a kind of namespace to refer to the exports. The export parameters specify individual named exports, while the import * as name syntax imports all of them. Below are examples to clarify the syntax.
This inserts myModule into the current scope, containing all the exports from the module in the file located in /modules/my-module.js.
import * as myModule from '/modules/my-module.js';Here, accessing the exports means using the module name (\"myModule\" in this case) as a namespace. For example, if the module imported above includes an export doAllTheAmazingThings(), you would call it like this:
myModule.doAllTheAmazingThings();Given an object or value named myExport which has been exported from the module my-module either implicitly (because the entire module is exported, for example using export * from 'another.js') or explicitly (using the export statement), this inserts myExport into the current scope.
import {myExport} from '/modules/my-module.js';This inserts both foo and bar into the current scope.
import {foo, bar} from '/modules/my-module.js';You can rename an export when importing it. For example, this inserts shortName into the current scope.
import {reallyReallyLongModuleExportName as shortName}\n from '/modules/my-module.js';Import multiple exports from a module with convenient aliases.
\nimport {\n reallyReallyLongModuleExportName as shortName,\n anotherLongModuleName as short\n} from '/modules/my-module.js';Import an entire module for side effects only, without importing anything. This runs the module's global code, but doesn't actually import any values.
\nimport '/modules/my-module.js';This works with dynamic imports as well:
\n(async () => {\n if (somethingIsTrue) {\n // import module for side effects\n await import('/modules/my-module.js');\n }\n})();If your project uses packages that export ESM, you can also import them for side effects only. This will run the code in the package entry point file (and any files it imports) only.
\nIt is possible to have a default export (whether it is an object, a function, a class, etc.). The import statement may then be used to import such defaults.
The simplest version directly imports the default:
\nimport myDefault from '/modules/my-module.js';It is also possible to use the default syntax with the ones seen above (namespace imports or named imports). In such cases, the default import will have to be declared first. For instance:
\nimport myDefault, * as myModule from '/modules/my-module.js';\n// myModule used as a namespaceor
\nimport myDefault, {foo, bar} from '/modules/my-module.js';\n// specific, named importsWhen importing a default export with dynamic imports, it works a bit differently. You need to destructure and rename the \"default\" key from the returned object.
\n(async () => {\n if (somethingIsTrue) {\n const { default: myDefault, foo, bar } = await import('/modules/my-module.js');\n }\n})();The standard import syntax is static and will always result in all code in the imported module being evaluated at load time. In situations where you wish to load a module conditionally or on demand, you can use a dynamic import instead. The following are some reasons why you might need to use dynamic import:
\nUse dynamic import only when necessary. The static form is preferable for loading initial dependencies, and can benefit more readily from static analysis tools and tree shaking.
\nTo dynamically import a module, the import keyword may be called as a function. When used this way, it returns a promise.
import('/modules/my-module.js')\n .then((module) => {\n // Do something with the module.\n });This form also supports the await keyword.
let module = await import('/modules/my-module.js');The code below shows how to import from a secondary module to assist in processing an AJAX JSON request.
\nfunction getJSON(url, callback) {\n let xhr = new XMLHttpRequest();\n xhr.onload = function () {\n callback(this.responseText)\n };\n xhr.open('GET', url, true);\n xhr.send();\n}\n\nexport function getUsefulContents(url, callback) {\n getJSON(url, data => callback(JSON.parse(data)));\n}import { getUsefulContents } from '/modules/file.js';\n\ngetUsefulContents('http://www.example.com',\n data => { doSomethingUseful(data); });This example shows how to load functionality on to a page based on a user action, in this case a button click, and then call a function within that module. This is not the only way to implement this functionality. The import() function also supports await.
const main = document.querySelector(\"main\");\nfor (const link of document.querySelectorAll(\"nav > a\")) {\n link.addEventListener(\"click\", e => {\n e.preventDefault();\n\n import('/modules/my-module.js')\n .then(module => {\n module.loadPageInto(main);\n })\n .catch(err => {\n main.textContent = err.message;\n });\n });\n}Accessibility is everyone’s responsibility, and the purpose of this document is to provide general accessibility guidelines to developers and designers.
\nOur products should be accessible to all. At minimum, features should comply to the requirements listed in 508 Reference Guide - 1194.22 from the US Access Board, and conform to Web Content Accessibility Guidelines 2.0 at Level AA.
\nMaking our products accessible benefits everyone, not just people with disabilities. Below are some examples of use cases in which accessibility is important:
\nAlways use semantic HTML elements, like button, ul, nav. Most modern browsers implement the accessibility features outlined in the specs for these elements; without them, elements will need additional ARIA attributes and roles to be recognized by assistive technologies.
Elements like h1-h6, nav, footer, header have meaningful roles assigned, so use them carefully. This can help assistive technologies read the page better and help users find information quicker.
Only use a div or a span to markup up content when there isn't another HTML element that would semantically be more appropriate, or when an element is needed exclusively for applying CSS styles or JS behaviors.
<!-- Do: Button can be focused and tabbed to. -->\n<button type=\"button\" class=\"btn\">Send</button><!-- Don't: Button can't be focused and tabbed to. -->\n<span class=\"btn\">Send</span>\n\nMore on semantic markup:
\n\n
Make sure elements can be reached via tabbing, and actions can be triggered with a keyboard. Using semantic markup is especially important in this case as it ensures that actionable elements are tabbable and triggerable without a mouse. Note that elements positioned off-screen are still tabbable, but those hidden with display: none or visibility: hidden are effectively removed from content since they are neither read by screen readers nor reachable by keyboard.
Tab order is determined by the order of elements in the DOM, and not by their visual positioning on the page after CSS is applied. CSS properties float and order for flex items are two common sources for disconnection between visual and DOM order.
The tabindex attribute should only be used when absolutely necessary.
tabindex=0/-1 makes an element focusable, while tabindex=0 also includes the element in the normal tab order. In both cases, keyboard triggers of the element still require scripting, so where possible, use interactive content instead.tabindex=1+ takes an element to the very front of the default tab order. When it's applied, the element's visual positioning is no longer indicative of its tab order, and the only way to find out where an element is would be by tabbing through the page. Therefore, unless a page is carefully designed around elements with positive tabindex, it is very error-proned, and thus currently prohibited in github.com.Finally, bear in mind that some assistive technologies have keyboard combinations of their own that will override the combination on the web page, so don't rely on keyboard shortcuts as the only alternative to mouse actions.
\n<!-- Do: Tab order can be guessed. -->\n<button type=\"button\" class=\"btn\">1</button>\n<button type=\"button\" class=\"btn\">2</button>\n<button type=\"button\" class=\"btn\">3</button><!-- Don't: The second button's tab order is unexpected. -->\n<button type=\"button\" class=\"btn\">1</button>\n<button type=\"button\" class=\"btn\" tabindex=\"1\">2</button>\n<button type=\"button\" class=\"btn\">3</button>\n\nMore on keyboard accessibility:
\n\n
Be mindful when using small font size, thin font weight, low contrast colors in designs as it can severely affect usability.
\nInstead of relying solely on color to communicate information, always combine color with another factor, like shape or position change. This is important because some colors can be hard to tell apart due to color blindness or weak eyesight.
\n\n\nMore on visual accessibility:
\n\n
Make sure text-based alternative is always available when using icons, images, and graphs, and that the text by itself presents meaningful information.
\n<!-- Do: Link text communicates destination. -->\n<p>Find out more about <a href=\"#url\">GitHub Enterprise pricing</a>.<br /></p><!-- Don't: \"Click here\" is not meaningful. -->\n<p>\n To find out more about GitHub Enterprise pricing,\n <a href=\"#url\">click here</a>.\n</p>Use aria-label when there is no text.
<a href=\"https://help.github.com/\"><%= octicon(\"question\", :\"aria-label\" => \"Help\") %></a>Navigating from a list of all the links on a given web page is very common for assistive technology users. We should make sure that the link text itself is meaningful and unique, and there should be as few duplicated references as possible.
\n\n\nMore on link responsibly:
\n\n
When using JavaScript to change the content on the page, always make sure that screen reader users are informed about the change. This can be done with aria-live, or focus management.
\n\nMore on dynamic content:
\n\n
Focus management is useful for informing users about updated content, and for making sure users land on the next useful section after performing an action. This means using scripts to change user’s currently focused element, and when focus changes, screen readers will read out change.
\nIt is common for assistive technology users to jump straight to a form when using a website, so make sure most relevant information is in the form and is labelled properly. Labels and inputs should be associated with the label[for] and input[id], and help texts should either be part of the label or be associated with aria-describedby.
<!-- Do: Click \"Email\" label to focus on the input, and help text is read out by screen readers when focusing on the input. -->\n<label for=\"test_input\">Email</label><br />\n<input id=\"test_input\" aria-describedby=\"test_input_help_good\" class=\"width-full my-1\" type=\"email\" />\n<div id=\"test_input_help_good\" class=\"f6\">Please enter an email ending with @github.com.</div><!-- Don't: Input and label are not associated, and help text is not read out by screen reader when focusing on the input. -->\n<label>Email</label><br />\n<input type=\"email\" class=\"width-full my-1\" />\n<div id=\"test_input_help_bad\" class=\"f6\">Please enter an email ending with @github.com.</div>We currently run basic linting against positive tabindex and anchor links with href=\"#\".
We do client side scanning of inaccessible elements in development environment. The inaccessible elements will be styled with red borders with an onclick alert and console warnings.
\nTo use VoiceOver, the built-in screen reader for Mac, just hit ⌘ + F5. This will start voice narration and display most of the spoken information in a text box.
\nUse alt + control + left/right to navigate a web page. alt + control + space to click on an element. For more help with VoiceOver, check out the built-in tutorial in System Preferences > Accessibility > VoiceOver > Open VoiceOver Training.
Keep in mind that behaviors in different screen readers can differ when navigating the same web page; just like designing for different browsers, when it comes to accessibility, it is not just the implementation of the browsers that can be different, but also the ones of assistive softwares.
\nAccessibility is a priority for us, if you ever encounter accessibility related issues when using github.com, please don’t hesitate to reach out to us via the contact page or email us at support@github.com, we will try our best to assist.
\nFor information about the accessibility compliance of GitHub products, please refer to our VPAT report, outlining §508 accessibility information for GitHub.com, GitHub Enterprise, and GitHub Desktop.
"},{"url":"/blog/10-essential-react-interview-questions/","relativePath":"blog/10-essential-react-interview-questions.md","relativeDir":"blog","base":"10-essential-react-interview-questions.md","name":"10-essential-react-interview-questions","frontmatter":{"title":"10 Essential React Interview Questions","template":"post","subtitle":"For Aspiring Frontend Developers","excerpt":"Comprehensive React Cheatsheet included at the bottom of this article!","date":"2022-05-08T18:44:35.533Z","image":"https://d585tldpucybw.cloudfront.net/sfimages/default-source/blogs/templates/social/reactt-light_1200x628.png?sfvrsn=43eb5f2a_2","thumb_image":"https://d585tldpucybw.cloudfront.net/sfimages/default-source/blogs/templates/social/reactt-light_1200x628.png?sfvrsn=43eb5f2a_2","image_position":"right","author":"src/data/authors/bgoonz.yaml","categories":["src/data/categories/react.yaml","src/data/categories/js.yaml"],"tags":["src/data/tags/react.yaml","src/data/tags/javascript.yaml"],"show_author_bio":true,"related_posts":["src/pages/blog/react-semantics.md","src/pages/blog/react-state.md"],"cmseditable":true},"html":"Comprehensive React Cheatsheet included at the bottom of this article!
\nAll of the code examples below will be included a second time at the bottom of this article as an embedded gist.javascript.plainenglish.io
\n\n\n\nBeginner's Guide To React Part 2\nAs I learn to build web applications in React I will blog about it in this series in an attempt to capture the…\n\n
\n\nbgoonz/React_Notes_V3\nA JavaScript library for building user interfaces Declarative React makes it painless to create interactive UIs. Design…github.com
\n\n\n\nGetting Started - React\nA JavaScript library for building user interfacesreactjs.org
\n\n\nhttps://bgoonz-blog.netlify.app/
\n\n![\"Photo](\"https://cdn-images-1.medium.com/max/800/0*39weCjnVdDf0Kuzj\")
\nPros
\nCons
\nMany developers and aspiring students misinterpret React to be a fully functional framework. It is because we often compare React with major frameworks such as Angular and Ember. This comparison is not to compare the best frameworks but to focus on the differences and similarities of React and Angular's approach that makes their offerings worth studying. Angular works on the MVC model to support the Model, View, and Controller layers of an app. React focuses only on the 'V,' which is the view layer of an application and how to make handling it easier to integrate smoothly into a project.
\nReact uses a Virtual DOM, which is essentially a tree of JavaScript objects representing the actual browser DOM. The advantage of using this for the developers is that they don't manipulate the DOM directly as developers do with jQuery when they write React apps. Instead, they would tell React how they want the DOM to make changes to the state object and allow React to make the necessary updates to the browser DOM. This helps create a comprehensive development model for developers as they don't need to track all DOM changes. They can modify the state object, and React would use its algorithms to understand what part of UI changed compared to the previous DOM. Using this information updates the actual browser DOM. Virtual DOM provides an excellent API for creating UI and minimizes the update count to be made on the browser DOM.
\nHowever, it is not faster than the actual DOM. You just read that it needs to pull extra strings to figure out what part of UI needs to be updated before actually performing those updates. Hence, Virtual DOM is beneficial for many things, but it isn't faster than DOM.
\n\n\nThe virtual DOM is a copy of the actual DOM tree. Updates in React are made to the virtual DOM. React uses a diffing algorithm to reconcile the changes and send the to the DOM to commit and paint.
\n
\n\nHere, the JavaScript hello variable is set to a React virtual DOM h1 element with the text \"Hello World!\".
\n
\n\nYou can also nest virtual DOM nodes in each other just like how you do it in HTML with the real DOM.
\n
![](\"https://cdn-images-1.medium.com/max/800/0*jf3yl4GKDHpxmPJk.gif\")
\n![](\"https://cdn-images-1.medium.com/max/600/0*hBOo6hfwhKwS5UDM.jpg\")
\nReactDOM.render method to have React render your virtual DOM nodes under an actual DOM nodeThe virtual DOM (VDOM) is a programming concept where an ideal, or \"virtual\", representation of a UI is kept in memory and synced with the \"real\" DOM by a library such as ReactDOM. This process is called reconciliation.
\nThis approach enables the declarative API of React: You tell React what state you want the UI to be in, and it makes sure the DOM matches that state. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app.
\nSince \"virtual DOM\" is more of a pattern than a specific technology, people sometimes say it to mean different things. In React world, the term \"virtual DOM\" is usually associated with React elements since they are the objects representing the user interface. React, however, also uses internal objects called \"fibers\" to hold additional information about the component tree. They may also be considered a part of \"virtual DOM\" implementation in React.
\nNo, they are different. The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. The virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs.
\ncreate-react-app to initialize a new React app and import required dependenciesnpm (node package manager) is the dependency/package manager you get out of the box when you install Node.js. It provides a way for developers to install packages both globally and locally.
\nSometimes you might want to take a look at a specific package and try out some commands. But you cannot do that without installing the dependencies in your local node_modules folder.
npm is a couple of things. First and foremost, it is an online repository for the publishing of open-source Node.js projects.
\nSecond, it is a CLI tool that aids you to install those packages and manage their versions and dependencies. There are hundreds of thousands of Node.js libraries and applications on npm and many more are added every day.
\nnpm by itself doesn't run any packages. If you want to run a package using npm, you must specify that package in your package.json file.
When executables are installed via npm packages, npm creates links to them:
\n./node_modules/.bin/ directorybin/ directory (for example: /usr/local/bin on Linux or at %AppData%/npm on Windows)To execute a package with npm you either have to type the local path, like this:
\n$ ./node_modules/.bin/your-packageor you can run a locally installed package by adding it into your package.json file in the scripts section, like this:
{\n \"name\": \"your-application\",\n \"version\": \"1.0.0\",\n \"scripts\": {\n \"your-package\": \"your-package\"\n }\n}Then you can run the script using npm run:
npm run your-packageYou can see that running a package with plain npm requires quite a bit of ceremony.
\nFortunately, this is where npx comes in handy.
\nSince npm version 5.2.0 npx is pre-bundled with npm. So it's pretty much a standard nowadays.
\nnpx is also a CLI tool whose purpose is to make it easy to install and manage dependencies hosted in the npm registry.
\nIt's now very easy to run any sort of Node.js-based executable that you would normally install via npm.
\nYou can run the following command to see if it is already installed for your current npm version:
\n$ which npxIf it's not, you can install it like this:
\n$ npm install -g npxOnce you make sure you have it installed, let's see a few of the use cases that make npx extremely helpful.
\nIf you wish to execute a locally installed package, all you need to do is type:
\n$ npx your-packagenpx will check whether <command> or <package> exists in $PATH, or in the local project binaries, and if so it will execute it.
Another major advantage is the ability to execute a package that wasn't previously installed.
\nSometimes you just want to use some CLI tools but you don't want to install them globally just to test them out. This means you can save some disk space and simply run them only when you need them. This also means your global variables will be less polluted.
\n\n\nNow, where were we?
\n
npx create-react-app <name of app> --use-npm
--use-npm just means to use npm instead of yarn or some other package managerprops is an object that gets passed down from the parent component to the child component. The values can be of any data structure including a function (which is an object)\n\nAccessing props:
\n
To access our props object in another component we pass it the props argument and React will invoke the functional component with the props object.
\nConceptually, components are like JavaScript functions. They accept arbitrary inputs (called \"props\") and return React elements describing what should appear on the screen.
\nThe simplest way to define a component is to write a JavaScript function:
\nfunction Welcome(props) {\n return <h1>Hello, {props.name}</h1>;\n}This function is a valid React component because it accepts a single \"props\" (which stands for properties) object argument with data and returns a React element. We call such components \"function components\" because they are literally JavaScript functions.
\nYou can also use an ES6 class to define a component:
\nclass Welcome extends React.Component {\n render() {\n return <h1>Hello, {this.props.name}</h1>;\n }\n}The above two components are equivalent from React's point of view.
\n\n\nYou can destructure the props object in the function component's parameter.
\n
a. Import the react-router-dom package:
\nnpm i react-router-dom\n\nIn your index.js:
\n
Memoization, Tabulation, and Sorting Algorithms by Example Why is looking at runtime not a reliable method of…bgoonz-blog.netlify.app
\n\n\nMore content at \nplainenglish.io\n
\nBy Bryan Guner on June 11, 2021.
\n\nAugust 31, 2021.
"},{"url":"/blog/adding-css-to-your-html/","relativePath":"blog/adding-css-to-your-html.md","relativeDir":"blog","base":"adding-css-to-your-html.md","name":"adding-css-to-your-html","frontmatter":{"title":"Adding CSS to your Html","template":"post","subtitle":"Html &Css for beginners ","excerpt":"Add css to your html","date":"2022-04-10T11:11:00.257Z","image":"https://imgs.search.brave.com/cehHw-ilYRSegAPhZiwKPGsYmFyN_HiDBO9xjfzxlTM/rs:fit:1200:720:1/g:ce/aHR0cHM6Ly9zYWJl/LmlvL2NsYXNzZXMv/Y3NzL2hlcm8ucG5n","thumb_image":"https://imgs.search.brave.com/cehHw-ilYRSegAPhZiwKPGsYmFyN_HiDBO9xjfzxlTM/rs:fit:1200:720:1/g:ce/aHR0cHM6Ly9zYWJl/LmlvL2NsYXNzZXMv/Y3NzL2hlcm8ucG5n","image_position":"right","author":"src/data/authors/bgoonz.yaml","categories":["src/data/categories/html.yaml","src/data/categories/css.yaml"],"tags":["src/data/tags/resources.yaml"],"show_author_bio":true,"related_posts":["src/pages/blog/adding-css-to-your-html.md","src/pages/blog/using-the-dom.md","src/pages/blog/front-end-interview-questions-part-2.md"],"cmseditable":true},"html":"For beginners … very picture heavy since CSS is such a visual discipline!
\n![](\"https://cdn-images-1.medium.com/max/800/1*3hnCIyXstRSHgYO5-z-51g.png\")
\n<!-- example.html -->\n<!DOCTYPE html>\n<html>\n <head>\n <link\n rel=\"stylesheet\"\n href=\"https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css\"\n />\n <link rel=\"stylesheet\" href=\"/styles/site.css\" />\n </head>\n <body>