A closure refers to the lexical context a function was declared in and the variables it has access to.

The nx run cli command (or the shorthand versions) can be used to run executors. Copynx run [project]:[command] nx run cart:build As long as your command name doesn't conflict with an existing nx cli command, you can use this short hand: Copynx [command] [project] nx build cart

Type aliases and interfaces are very similar, and in many cases you can choose between them freely. Almost all features of an interface are available in type, the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.

{formik.touched.firstName && formik.errors.firstName ? (52 <div>{formik.errors.firstName}</div>

STEM

You want to write maintainable tests that give you high confidence that your components are working for your users. As a part of this goal, you want your tests to avoid including implementation details so refactors of your components (changes to implementation but not functionality) don't break your tests and slow you and your team down.

we are using RTL's findBy search variant to wait for element(s) which appear eventually.

For any element that isn't there yet but will be there eventually, use findBy over getBy or queryBy. If you assert for a missing element, use queryBy. Otherwise default to getBy

The neat thing about getByRole: it shows all the selectable roles if you provide a role that isn't available in the rendered component's HTML:

// recommended

Whereas the describe-block is the test suite, the test-block (which also can be named it instead of test) is the test case. A test suite can have multiple test cases and a test case doesn't have to be in a test suite. What you put into the test cases are called assertions (e.g. expect in Jest) which either turn out to be successful (green) or erroneous (red). Here we have two assertions which should turn out successful:

Mutations, subscriptions, timers, logging, and other side effects are not allowed inside the main body of a function component (referred to as React’s render phase). Doing so will lead to confusing bugs and inconsistencies in the UI.

What does useEffect do? By using this Hook, you tell React that your component needs to do something after render

In React class components, the render method itself shouldn’t cause side effects. It would be too early — we typically want to perform our effects after React has updated the DOM.

Custom Hooks are more of a convention than a feature. If a function’s name starts with ”use” and it calls other Hooks, we say it is a custom Hook. The useSomething naming convention is how our linter plugin is able to find bugs in the code using Hooks.

Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects

The state of these components is completely independent. Hooks are a way to reuse stateful logic,

Hooks let you organize side effects in a component by what pieces are related (such as adding and removing a subscription), rather than forcing a split based on lifecycle methods.

React needs a better primitive for sharing stateful logic

Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.

To share variables between Sass files, you can use Sass imports. For example, src/App.scss and other component style files could include @import "./shared.scss"; with variable definitions

To write an uncontrolled component, instead of writing an event handler for every state update, you can use a ref to get form values from the DOM.

Conceptually, React does work in two phases: The render phase determines what changes need to be made to e.g. the DOM. During this phase, React calls render and then compares the result to the previous render. The commit phase is when React applies any changes. (In the case of React DOM, this is when React inserts, updates, and removes DOM nodes.) React also calls lifecycles like componentDidMount and componentDidUpdate during this phase. The commit phase is usually very fast, but rendering can be slow. For this reason, the upcoming async mode (which is not enabled by default yet) breaks the rendering work into pieces, pausing and resuming the work to avoid blocking the browser. This means that React may invoke render phase lifecycles more than once before committing, or it may invoke them without committing at all (because of an error or a higher priority interruption). Render phase lifecycles include the following class component methods: constructor componentWillMount componentWillReceiveProps componentWillUpdate getDerivedStateFromProps shouldComponentUpdate render setState updater functions (the first argument) Because the above methods might be called more than once, it’s important that they do not contain side-effects. Ignoring this rule can lead to a variety of problems, including memory leaks and invalid application state. Unfortunately, it can be difficult to detect these problems as they can often be non-deterministic. Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following methods: Class component constructor method The render method setState updater functions (the first argument) The static getDerivedStateFromProps lifecycle

When a component updates, the instance stays the same, so that state is maintained across renders. React updates the props of the underlying component instance to match the new element, and calls componentWillReceiveProps() and componentWillUpdate() on the underlying instance.

One caveat is that some “falsy” values, such as the 0 number, are still rendered by React. For example, this code will not behave as you might expect because 0 will be printed when props.messages is an empty array: <div> {props.messages.length && <MessageList messages={props.messages} /> } </div> To fix this, make sure that the expression before && is always boolean: <div> {props.messages.length > 0 && <MessageList messages={props.messages} /> } </div>

When you pass a string literal, its value is HTML-unescaped. So these two JSX expressions are equivalent:

User-Defined Components Must Be Capitalized When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file. We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.

The most common signature for HOCs looks like this: // React Redux's `connect` const ConnectedComment = connect(commentSelector, commentActions)(CommentList); What?! If you break it apart, it’s easier to see what’s going on. // connect is a function that returns another function const enhance = connect(commentListSelector, commentListActions); // The returned function is a HOC, which returns a component that is connected // to the Redux store const ConnectedComment = enhance(CommentList); In other words, connect is a higher-order function that returns a higher-order component!

return class extends React.Component {

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature. Concretely, a higher-order component is a function that takes a component and returns a new component.

However, sometimes the same data needs to be accessible by many components in the tree, and at different nesting levels. Context lets you “broadcast” such data, and changes to it, to all components below

The same functionality can be achieved by using appropriate event handlers instead, such as onBlur and onFocus:

To build a static version of your app that renders your data model, you’ll want to build components that reuse other components and pass data using props. props are a way of passing data from parent to child. If you’re familiar with the concept of state, don’t use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don’t need it.

Anything inside the <FancyBorder> JSX tag gets passed into the FancyBorder component as a children prop. Since FancyBorder renders {props.children} inside a <div>, the passed elements appear in the final output.

into the changes in the Calculator, let’s recap our changes to the TemperatureInput component. We have removed the local state from it, and instead of reading this.state.temperature, we now read this.props.temperature.

Keys only make sense in the context of the surrounding array.

Thanks to the setState() call, React knows the state has changed, and calls the render() method again to learn what should be on the screen. This time, this.state.date in the render() method will be different, and so the render output will include the updated time. React updates the DOM accordingly.

Each JSX element is just syntactic sugar for calling React.createElement(component, props, ...children). So, anything you can do with JSX can also be done with just plain JavaScript.

.

The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text

Please note: we need to hide the ball before the call (*). Otherwise we’ll usually have a ball on these coordinates, as it’s the top element under the pointer: elemBelow=ball.

What’s the first idea? Probably to put onmouseover/mouseup handlers on potential droppables and detect when the mouse pointer appears over them. And then we know that we are dragging/dropping on that element. But that doesn’t work. The problem is that, while we’re dragging, the draggable element is always above other elements. And mouse events only happen on the top element, not on those below it.

Another important aspect – we track mousemove on document, not on ball. From the first sight it may seem that the mouse is always over the ball, and we can put mousemove on it. But as we remember, mousemove triggers often, but not for every pixel. So after swift move the cursor can jump from the ball somewhere in the middle of document (or even outside of the window). So we should listen on document to catch it.

ball.ondragstart = function() { return false; };

Children are ignored.

According to the browser logic, the mouse cursor may be only over a single element at any time – the most nested one (and top by z-index).

We should keep that possibility in mind when using event.relatedTarget in our code. If we access event.relatedTarget.tagName, then there will be an error.

A text selection is the default browser action on mousedown event. So the alternative solution would be to handle mousedown and prevent it, like this:

We should use them instead of new Event if we want to create such events. For instance, new MouseEvent("click"). The right constructor allows to specify standard properties for that type of event.

An alternative solution would be to check in the document handler if the default action was prevented? If it is so, then the event was handled, and we don’t need to react on it.

So, without scrollbar the content width would be 300px, but if the scrollbar is 16px wide (the width may vary between devices and browsers) then only 300 - 16 = 284px remains, and we should take it into account. That’s why examples from this chapter assume that there’s a scrollbar. If there’s no scrollbar, then things are just a bit simpler.

So nowadays getComputedStyle actually returns the resolved value of the property.

elem.classList.toggle("class") – if the class exists, then removes it, otherwise adds it.

The call to document.write only works while the page is loading.

node.append(...nodes or strings) – append nodes or strings at the end of node, node.prepend(...nodes or strings) – insert nodes or strings into the beginning of node, node.before(...nodes or strings) –- insert nodes or strings before the node, node.after(...nodes or strings) –- insert nodes or strings after the node, node.replaceWith(...nodes or strings) –- replaces node with the given nodes or strings.

Quite rarely, even if a DOM property type is a string, it may differ from the attribute. For instance, the href DOM property is always a full URL, even if the attribute contains a relative URL or just a #hash.

There are other examples. The style attribute is a string, but the style property is an object:

HTML attributes have the following features: Their name is case-insensitive (id is same as ID). Their values are always strings.

So when an element has id or another standard attribute, the corresponding property gets created. But that doesn’t happen if the attribute is non-standard.

In most cases, we expect the text from a user, and want to treat it as text. We don’t want unexpected HTML in our site. An assignment to textContent does exactly that.

If innerHTML inserts a <script> tag into the document – it doesn’t execute. It becomes a part of HTML, just as a script that has already run.

The innerHTML property allows to get the HTML inside the element as a string. We can also modify it. So it’s one of most powerful ways to change the page.

In the example below, there are two scripts. The first one creates a reference to the collection of <div>. As of now, its length is 1. The second scripts runs after the browser meets one more <div>, so its length is 2

elem.querySelectorAll(css) returns all elements inside elem matching the given CSS selector.

The behavior is described in the specification, but it is supported mainly for compatibility. The browser tries to help us by mixing namespaces of JS and DOM. Good for very simple scripts, but there may be name conflicts. Also, when we look in JS and don’t have HTML in view, it’s not obvious where the variable comes from. If we declare a variable with the same name, it takes precedence:

Please note an interesting detail here. If we run the example above, the last element shown is <script>. In fact, the document has more stuff below, but at the moment of the script execution the browser did not read it yet, so the script doesn’t see it.

elements

In the DOM world null means “doesn’t exist” In the DOM, the null value means “doesn’t exist” or “no such node”.

comments – sometimes we can put the information there, it won’t be shown, but JS can read it from the DOM.

there’s a rule – if something’s in HTML, then it also must be in the DOM tree

A function with an empty return or without it returns undefined If a function does not return a value, it is the same as if it returns undefined:

keydown – pressing a key may lead to adding a character into a field, or other actions.

Menu items are links <a>, not buttons. There are several benefits, for instance: Many people like to use “right click” – “open in a new window”. If we use <button> or <span>, that doesn’t work. Search engines follow <a href="..."> links while indexing.

If we handle an event in JavaScript, often we don’t want browser actions. Fortunately, it can be prevented.

One more example. A click on an element with the attribute data-toggle-id will show/hide the element with the given id:

When we assign an event handler to the document object, we should always use addEventListener, not document.onclick, because the latter will cause conflicts: new handlers overwrite old ones.

Note that while formally there are 3 phases, the 2nd phase (“target phase”: the event reached the element) is not handled separately: handlers on both capturing and bubbling phases trigger at that phase.

Element that handled the event. That’s exactly the same as this, unless the handler is an arrow function, or its this is bound to something else, then event.currentTarget becomes useful.

Please note – if we don’t store the function in a variable, then we can’t remove it.

The document object gives access to the page content

But like its usual in the case of Observable-based APIs, FRP techniques can help easily implement many use cases that would otherwise be rather hard to implement such as: pre-save the form in the background at each valid state, or even invalid (for example storing the invalid value in a cookie for later use) typical desktop features like undo/redo

This is why this is called template-driven forms, because both validation and binding are all setup in a declarative way at the level of the template.

You are probably wondering what we gained here. On the surface there is already a big gain: We can now unit test the form validation logic

React doesn’t need error boundaries to recover from errors in event handlers. Unlike the render method and lifecycle methods, the event handlers don’t happen during rendering. So if they throw, React still knows what to display on the screen.

As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree

Error boundaries work like a JavaScript catch {} block, but for components

Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components.

an uncontrolled component keeps the source of truth in the DOM

In a controlled component, form data is handled by a React component

Two elements of different types will produce different trees. The developer can hint at which child elements may be stable across different renders with a key prop.

React builds and maintains an internal representation of the rendered UI. It includes the React elements you return from your components. This representation lets React avoid creating DOM nodes and accessing existing ones beyond necessity, as that can be slower than operations on JavaScript objects. Sometimes it is referred to as a “virtual DOM”, but it works the same way on React Native.

Note that a HOC doesn’t modify the input component, nor does it use inheritance to copy its behavior. Rather, a HOC composes the original component by wrapping it in a container component. A HOC is a pure function with zero side-effects.

accessing their DOM nodes may be unavoidable for managing focus, selection, or animations.

Context is primarily used when some data needs to be accessible by many components at different nesting levels. Apply it sparingly because it makes component reuse more difficult. If you only want to avoid passing some props through many levels, component composition is often a simpler solution than context.

Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language

The dynamic import() syntax is a ECMAScript (JavaScript) proposal not currently part of the language standard. It is expected to be accepted in the near future.

If you can’t find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.

Simply ask three questions about each piece of data: Is it passed in from a parent via props? If so, it probably isn’t state. Does it remain unchanged over time? If so, it probably isn’t state. Can you compute it based on any other state or props in your component? If so, it isn’t state.

A good rule of thumb is that elements inside the map() call need keys.

When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort: const todoItems = todos.map((todo, index) =>

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:

In JavaScript, class methods are not bound by default

Because this.props and this.state may be updated asynchronously, you should not rely on their values for calculating the next state. For example, this code may fail to update the counter: // Wrong this.setState({ counter: this.state.counter + this.props.increment, }); To fix it, use a second form of setState() that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument: // Correct this.setState((state, props) => ({ counter: state.counter + props.increment }));

By default, React DOM escapes any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that’s not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent XSS (cross-site-scripting) attacks.

We split JSX over multiple lines for readability. While it isn’t required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of automatic semicolon insertion.

Most React developers use a special syntax called “JSX” which makes these structures easier to write. The <div /> syntax is transformed at build time to React.createElement('div')

test()

You can also add other assets to the public folder. Note that we normally encourage you to import assets in JavaScript files instead. For example, see the sections on adding a stylesheet and adding images and fonts. This mechanism provides a number of benefits: Scripts and stylesheets get minified and bundled together to avoid extra network requests. Missing files cause compilation errors instead of 404 errors for your users. Result filenames include content hashes so you don’t need to worry about browsers caching their old versions.

To reduce the number of requests to the server, importing images that are less than 10,000 bytes returns a data URI instead of a path

So I won't be covering the out of date IE syntax

used

Along with hovering and selecting of a number of points you can manage the current state of a single point. Use getPoint() method to get a point of a series

chart.title().listen("mouseOut", function() { series_1.unhover(); series_2.unhover([0, 1, 5, 16, 17]); });

create a custom legend from scratch.

Labels are text or image elements that can be placed anywhere on any chart (you can enable them on a whole series or in individual points). For text labels, font settings and text formatters are available.

In AnyChart, you always work with a series, no matter what chart type you create. It is the series type that determines what (and how) is drawn on a chart

Here is the full list of available settings: anychart.core.StateSettings. Please note that many of them work only with certain types of charts or series.

The main thing to remember is a time signature tells you: How many of what kind. That’s it. A time signature is the number of beats and the type of note the beat is.

A good rule of thumb (or finger?) is if you are constantly shifting around over more than 5 frets, there is probably a better way to play it without so much shifting.

the best performance is achieved by calling registerApplication immediately, but calling start after the AJAX request is completed.

When called, this function should look at the URL to determine the active route and then create DOM elements, DOM event listeners, etc. to render content to the user

except that it doesn't have an HTML page

A reference to the singleSpa instance, itself. This is intended to allow applications and helper libraries to call singleSpa APIs without having to import it.

pass a reference to a common event bus so each app may talk to each other

loadingFunction must be a function that returns a Promise (or an async function). The function will be called with no arguments when loading the application for the first time. The returned promise must resolve with the application code

A function to load the application's code

function sequenceSubscriber(observer) { // synchronously deliver 1, 2, and 3, then complete observer.next(1); observer.next(2); observer.next(3); observer.complete();  // unsubscribe function doesn't need to do anything in this // because values are delivered synchronously return {unsubscribe() {}};} // Create a new Observable that will deliver the above sequenceconst sequence = new Observable(sequenceSubscriber); 

As a publisher, you create an Observable instance that defines a subscriber function

By default, there is no loader available. You can add translations manually using setTranslation but it is better to use a loader. You can write your own loader, or import an existing one. For example you can use the TranslateHttpLoader that will load translations from files using HttpClient.

Then inject it inside a test by calling TestBed.get() with the service class as the argument. it('should use ValueService', () => { service = TestBed.get(ValueService); expect(service.getValue()).toBe('real value'); });

However, you almost always inject service into application classes using Angular dependency injection and you should have tests that reflect that usage pattern. Angular testing utilities make it easy to investigate how injected services behave.

We can even remove the AuthService import if we want, there really is no dependency on anything else. The LoginComponent is tested in isolation:

That’s not very isolated but also not too much to ask for in this scenario. However imagine if LoginComponent required a number of other dependencies in order to run, we would need to know the inner workings of a number of other classes just to test our LoginComponent. This results in Tight Coupling and our tests being very Brittle, i.e. likely to break easily. For example if the AuthService changed how it stored the token, from localStorage to cookies then the LoginComponent test would break since it would still be setting the token via localStorage.

In this setup, it is common to test app.js and want to either not call the actual math.js functions, or spy them to make sure they’re called as expected.

Mocking localStorage is optional, but without mocking getComputedStyle your test won’t run, as Angular checks in which browser it executes. We need to fake it.

Or inside the beforeEach() if you prefer to inject the service as part of your setup. beforeEach(() => { TestBed.configureTestingModule({ providers: [ValueService] }); service = TestBed.get(ValueService); });

The TestBed creates a dynamically-constructed Angular test module that emulates an Angular @NgModule.

Let’s take a couple of steps back, and ask ourselves if we want to test our library and our application at the same time? I don’t think this is what we want, right? We rather want to:test our librarybuild our library; when all the library tests are successfultest our application; when the library is built

As a package manager, a large part of npm's job when installing your dependencies is managing their versions. But its usual model, with a "dependencies" hash in package.json, clearly falls down for plugins. Most plugins never actually depend on their host package, i.e. grunt plugins never do require("grunt"), so even if plugins did put down their host package as a dependency, the downloaded copy would never be used. So we'd be back to square one, with your application possibly plugging in the plugin to a host package that it's incompatible with.

Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap’s Sass files.

This is known as the entry file.

When we use ng new the Angular CLI creates a new workspace for us.In our Angular workspace we are going to have two projects:A library projectThis is the library of components and services that we want to provide. This is the code that we could publish to npm for example.An application projectThis will be a test harness for our library. Sometimes this application is used as documentation and example usage of the library.

When we’ve generated the library (ng generate library tvmaze ) Angular CLI modified the tsconfig.json in the root of our project by adding tvmaze to the paths entry.

Why is that useful? It enables such service to be tree-shaken (removed form the production bundle if not used)

Then it gets the native element of the compiled HTML (the HTML rendered by the component).

We use an async before each. The purpose of the async is to let all the possible asynchronous code to finish before continuing.

The CLI takes care of Jasmine and karma configuration for you.

The custom id is persistent. The extractor tool does not change it when the translatable text changes. Therefore, you do not need to update the translation. This approach makes maintenance easier

The Angular extraction tool preserves both the meaning and the description in the translation source file to facilitate contextually-specific translations, but only the combination of meaning and text message are used to generate the specific id of a translation. If you have two similar text messages with different meanings, they are extracted separately. If you have two similar text messages with different descriptions (not different meanings), then they are extracted only once

You need to build and deploy a separate version of the app for each supported language

The CLI imports the locale data for you when you use the parameter --configuration with ng serve and ng build

We have an Angular project using Bootstrap and did not need to import JQuery to have the same behavior!

Place various form controls and components within a navbar with .form-inline.

As shown in the previous examples, our grid system allows you to place any number of .cols within a .row or .form-row. They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining .cols equally split the rest, with specific column classes like .col-7.

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

d-none

Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col.

justify-content-md-center

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it

For example, here are two grid layouts that apply to every device and viewport, from xs to xl. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

// No media query for `xs` since this is the default in Bootstrap

To define a class as a service in Angular, use the @Injectable() decorator to provide the metadata that allows Angular to inject it into a component as a dependency. Similarly, use the @Injectable() decorator to indicate that a component or other class (such as another service, a pipe, or an NgModule) has a dependency.

.

In production environment, each shard is a separate replica set

client application always interact with the primary node

Optional. Builds the index in the background so the operation does not block other database activities. Specify true to build in the background. The default value is false.

records

Strings, like all primitives, are immutable. For example concat() doesn’t modify the existing string but creates a new one.

Components have a well-defined lifecycle: Each component can implement "lifecycle hooks". These are methods that will be called at certain points in the life of the component. The following hook methods can be implemented:

filter() does not mutate the array on which it is called

_id is 12 bytes hexadecimal number unique for every document in a collection. 12 bytes are divided as follows − _id: ObjectId(4 bytes timestamp, 3 bytes machine id, 2 bytes process id, 3 bytes incrementer)

Duplicate the data (but limited) because disk space is cheap as compare to compute time.

Combine objects into one document if you will use them together. Otherwise separate them (but make sure there should not be need of joins).

These 12 bytes first 4 bytes for the current timestamp, next 3 bytes for machine id, next 2 bytes for process id of MongoDB server and remaining 3 bytes are simple incremental VALUE.

We've decided not to have a model for the BookInstance:status — we will hard code the acceptable values because we don't expect these to change

First it loads the express module, and uses it to get an express.Router object. Then it specifies a route on that object, and lastly exports the router from the module (this is what allows the file to be imported into app.js).

The last middleware in the file adds handler methods for errors and HTTP 404 responses.

app.use('/', indexRouter)

The next set of functions call app.use() to add the middleware libraries into the request handling chain

Then we require() modules from our routes directory

By default, the margins are null. Margins are only used in legacy charts as well as in situations where you want to make sure plot areas are align between multiple charts.

A donut chart is created by adding multiple pie series to the chart, setting the size and innerSize of each series to create concentric rings

All format string options have matching formatter callbacks. While formatter callbacks have greater flexibility, format strings are typically more compact, and they are JSON compatible.

npm install express-generator -g

f no flex-basis is specified, then the flex-basis falls back to the item’s width property. If no width is specified, then the flex-basis falls back to the computed width of the item’s contents.

A common convention for Node and Express is to use error-first callbacks. In this convention the first value in your callback functions is an error value, while subsequent arguments contain success data.

app.use(a_middleware_function)

or the request will be left hanging)

This is the “clever” solution