- Dec 2021
-
www.educative.io www.educative.io
-
A closure refers to the lexical context a function was declared in and the variables it has access to.
key point!
-
- Sep 2021
-
nx.dev nx.dev
-
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
different syntaxes for running commands/builders/executors
-
- Aug 2021
-
www.typescriptlang.org www.typescriptlang.org
-
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.
key point
-
- Jul 2021
-
formik.org formik.orgTutorial1
-
{formik.touched.firstName && formik.errors.firstName ? (52 <div>{formik.errors.firstName}</div>
error handling code hasn't changed but the presentation of the errors is being updated here
-
- Apr 2021
-
newsroom.ibm.com newsroom.ibm.com
-
STEM
science, technology, engineering and mathematics
-
- Oct 2020
-
testing-library.com testing-library.com
-
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.
key point. I think that this also means that NOT using data-testid is better since this is "testing library" specific attribute and 'binds' us to testin-library
-
-
www.robinwieruch.de www.robinwieruch.de
-
we are using RTL's findBy search variant to wait for element(s) which appear eventually.
see above - this is how you'd wait async to grab the element you need
-
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
key point: summary of getBy, queryBy and findBy
-
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:
pass no arguments and it will list all available roles in the element you passed to it (including implicit roles)
-
// recommended
notice that this is the recommended practice
-
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:
Key point explaining key basic terms in React testign world
Tags
Annotators
URL
-
- Dec 2019
-
reactjs.org reactjs.org
-
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.
key point!
-
What does useEffect do? By using this Hook, you tell React that your component needs to do something after render
key point!
-
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.
key point!
-
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.
as can be seen above, indeed nothing explicetly tells that the function is a special kind of hook. its just a function...
Tags
Annotators
URL
-
-
reactjs.org reactjs.org
-
Data fetching, setting up a subscription, and manually changing the DOM in React components are all examples of side effects
key point. this means that all those small messing of variables in code that gets rendered into the template of the component? this is all 'side effects', and of course we do this all the time...
Tags
Annotators
URL
-
-
reactjs.org reactjs.org
-
The state of these components is completely independent. Hooks are a way to reuse stateful logic,
meaning, both components use some data from the shared custom hook but with that data they set some internal, privately managed state.
-
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.
key point. not that i can judge the effectiveness (pun intended) of this approach as a newcomer to hooks, but it does seem like a key point. let me contemplate it some more...
-
React needs a better primitive for sharing stateful logic
key point. not that it means much yet, but that's the take from the text up to now.
-
- Nov 2019
-
create-react-app.dev create-react-app.dev
-
Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.
key point, for security reasons
-
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
just like we do in other project, say an Angular app. So the React components will use composition but in the sass files, we can use import() and @extends
Tags
Annotators
URL
-
-
legacy.reactjs.org legacy.reactjs.org
-
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.
key point that summarizes it all
-
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
key point! This isn't just relevant for StrictMode but also gives some high level summary of React
-
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.
this is a key point: that's why on React apps you'll see UI updated but notice there was no real teardown and re instantiation of the component. Also, this is how state is kept but the UI is updated
-
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>
This is important for bug prevention and fixing!
-
When you pass a string literal, its value is HTML-unescaped. So these two JSX expressions are equivalent:
which probably means that is better to use literals as we get escaping for free and that's a good practice.
-
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.
this is the 'why' explanation on why a capital letter is required with user-defined components. In other words - passed as string or as the type to React.createElement():
React.createElement(MyComp) vs React.createElement('div')
-
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!
probably a common and useful example that is used with Redux
-
return class extends React.Component {
Cool! anonymous/unnamed classes used here
-
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.
Key point. The compositional nature of React guides us in this pattern's direction
-
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
key point - this is the differentiator consideration to choose context or "passing down" a ready made component from upper level component
-
The same functionality can be achieved by using appropriate event handlers instead, such as onBlur and onFocus:
cool! also read above to understand more. basically, this means that "blurring focus" on an element will programatically close some other element
-
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.
key point: state is used when data changes over time. If there's no such need, don't introduce state - keep it simple
-
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.
key point - the 'magic' of 'children'
-
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.
effectively injecting change handler by the parent, that will take care of state syncing between all participating parties
-
Keys only make sense in the context of the surrounding array.
see example below...
-
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.
key point: using setState() "notes" React of a... state change and it triggers change detection and re-rendering of the component.
Tags
Annotators
URL
-
-
reactjs.org reactjs.org
-
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.
key point (repeated elsewhere in React documentation, but important nevertheless).
-
-
reactjs.org reactjs.org
-
.
The example below is a very nice basic 'modal' example. Many libraries use such 'portal' implementations
-
- Oct 2019
-
developer.mozilla.org developer.mozilla.org
-
The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text
I find this unclear. As stated in the resource linked below, "The line-height CSS property defines the space between two inline elements". Notice next sentence (here) on what it does on block elements.
Tags
Annotators
URL
-
- Jun 2019
-
javascript.info javascript.info
-
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.
but the method is supposed to return the most nested one. why did we need to hide the ball? cause its the most nested one in the DOM structure? didn't get it...
-
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.
key point!
-
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.
if not, some mouseMove events we think are triggered on the ball will actually be triggered on other elements - hence the need to track those events on document
-
ball.ondragstart = function() { return false; };
important thing to do in modern browser to stop it from interfering with our own drag&drop handling
-
-
javascript.info javascript.info
-
Children are ignored.
key point! notice the demo...
-
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).
key point!
-
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.
key point!
-
-
javascript.info javascript.info
-
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:
an alternative to preventing the selection of text on double click (see "user-select" CSS usage above)
-
-
javascript.info javascript.info
-
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.
important, if you wish/need to generate custom events
-
-
javascript.info javascript.info
-
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.
instead of stopPropagation, we can preventDefault() in the child and check if it was prevented in a parent event listener
-
-
javascript.info javascript.info
-
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.
in other words, "width" contains the border, scrollbar and padding
-
-
javascript.info javascript.info
-
So nowadays getComputedStyle actually returns the resolved value of the property.
important
-
elem.classList.toggle("class") – if the class exists, then removes it, otherwise adds it.
cool!
-
-
javascript.info javascript.info
-
The call to document.write only works while the page is loading.
key point! don't use this method. create elements instead and embed them...
-
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.
note: the string inserted is treated as string and is 'escaped'. for methods that allow inserting string as html, see below...
-
-
javascript.info javascript.info
-
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.
so not only the type is different between the attribute and the DOM property, but also their content might differ.
-
There are other examples. The style attribute is a string, but the style property is an object:
interesting!
-
HTML attributes have the following features: Their name is case-insensitive (id is same as ID). Their values are always strings.
important
-
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.
key point
Tags
Annotators
URL
-
- May 2019
-
javascript.info javascript.info
-
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.
key point - sanitation at courtesy of the browser itself
-
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.
key point!
-
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.
key point. compare this with innerText
Tags
Annotators
URL
-
-
javascript.info javascript.info
-
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
now that's confusing! see line below on contrasting with querySelector()
-
elem.querySelectorAll(css) returns all elements inside elem matching the given CSS selector.
notice that it returns all elements inside 'elem', meaning it works on a subset of the document, not its entirety. Much more effective, wise and useful to limit your searches like this.
-
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:
in other words - don't use JS variables for elements on the page with specific ID
-
-
javascript.info javascript.info
-
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.
because the last thing available to the browser when the script run is the script code itself... . This is a key point and a reason why its usually recommended to add all script tags at the end of the body - so the whole DOM will be loaded before the scripts run
-
elements
that's the key point here...
-
In the DOM world null means “doesn’t exist” In the DOM, the null value means “doesn’t exist” or “no such node”.
key point!
-
-
javascript.info javascript.infoDOM tree2
-
comments – sometimes we can put the information there, it won’t be shown, but JS can read it from the DOM.
key point - i wonder if Angular uses this capability as I do know that it introduces some comments into the DOM
-
there’s a rule – if something’s in HTML, then it also must be in the DOM tree
including HTML comments
-
-
javascript.info javascript.info
-
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:
This differs from how PHP works, if you're coming from PHP. In PHP, there is an implicit return statement at the end of the function and its value is the value of the last executed statement of the function
-
-
javascript.info javascript.info
-
keydown – pressing a key may lead to adding a character into a field, or other actions.
interesting example on a default action
-
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.
key point on why use 'a' tag instead of buttons for navigation purposes
-
If we handle an event in JavaScript, often we don’t want browser actions. Fortunately, it can be prevented.
like for example if a link is used in a SPA. We don't want page reload... so we need to tell the browser not to handle the event.
-
-
javascript.info javascript.info
-
One more example. A click on an element with the attribute data-toggle-id will show/hide the element with the given id:
now that's a nice useful example. In many cases you have a page in which several items are concealable in this fashion. cool!
-
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.
key point (and a logical one...)
-
-
javascript.info javascript.info
-
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.
the example below is really useful in understanding this
-
-
javascript.info javascript.info
-
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.
key point, as using arrow functions is quite common these days, to have lexical binding of this, without confusion
-
Please note – if we don’t store the function in a variable, then we can’t remove it.
key point
Tags
Annotators
URL
-
-
javascript.info javascript.info
-
The document object gives access to the page content
note: page content, not other functional areas of the browser. Read on to see other parts of the browser.
Tags
Annotators
URL
-
-
blog.angular-university.io blog.angular-university.io
-
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
key point on why FRP is good: misc usages on each 'state' change in the form - record and save state for 'undo' feature, save to local storage to be recovered later, etc
-
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.
key point on naming of 'template-driven forms'
-
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
key point - advantage of reactive forms is the testability of its validation
-
- Mar 2019
-
legacy.reactjs.org legacy.reactjs.org
-
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.
key point. since event handlers are async by nature, they are on a different 'job' (in the browser queue) and therefore even if crashing - the render cycle is not touched.
-
As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree
key point
-
Error boundaries work like a JavaScript catch {} block, but for components
key point about the usage style of error boundaries
-
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.
a good example for justification to use uncontrolled components
-
an uncontrolled component keeps the source of truth in the DOM
key point
-
In a controlled component, form data is handled by a React component
key point
-
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.
key point: this is the algorithm React uses to detect changes
-
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.
This is another definition/description for virtual DOM
-
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.
key point
-
accessing their DOM nodes may be unavoidable for managing focus, selection, or animations.
to make a long story short - consider a FancyButton component that actually wraps a native button element. Sometimes, the internal element - button - needs to be accessed from a client of FancyButton (such as to manage focus etc). This feature allows this. Handle with care - encapsulation is good and desired. Don't break it without careful thought!
-
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.
key point
-
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
key point
-
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.
this mean, folks, that if you need to support IE - forget about import()... :-(
-
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.
see also dumb/smart components (it has another name for this)
-
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.
determining if the data should be 'state' or not
-
A good rule of thumb is that elements inside the map() call need keys.
key point. see above that the key is needed in the immediate child level in the array.map() usage, not its own child within... (see just above...)
-
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) =>
the 'index' is a part of map() function
-
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:
meaning, the key should be given to the element being iterated over
-
In JavaScript, class methods are not bound by default
key point and i highly recommend those not familiar with what 'this' is in JS and how it is determined to have a quick visit on guide on the internet. I recommend an online course, which is very good IMHO, but its a paid one (and covers much more than 'this' explanation)
-
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 }));
key point!
-
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.
key point on security concerns
-
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.
key point.
-
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')
This is a key point. Its not mandatory to use JSX. One can use React.createElement() instead...
Tags
Annotators
URL
-
-
facebook.github.io facebook.github.io
-
test()
Jest documentation speaks in 'test()' so I guess its better to go with this official syntax. 'it()' is an older syntax shared with other testing systems
Tags
Annotators
URL
-
-
facebook.github.io facebook.github.io
-
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.
great summary of why the import() in JS is better than manually handling all those
-
-
facebook.github.io facebook.github.io
-
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
nice - powerful!
-
- Feb 2019
-
css-tricks.com css-tricks.com
-
So I won't be covering the out of date IE syntax
See other resources for this, among which: https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/ and cheer up! IE support for CSS Grid is good and definitely work-able!
Tags
Annotators
URL
-
-
medium.freecodecamp.org medium.freecodecamp.org
-
used
should be 'user'
-
- Jan 2019
-
docs.anychart.com docs.anychart.com
-
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
seems useless as we just passed the data to anychart, but it is useful to dynamically change the point attributes responding on events. for example, changing colors to custom colors fed by user.
-
chart.title().listen("mouseOut", function() { series_1.unhover(); series_2.unhover([0, 1, 5, 16, 17]); });
nice example of having an event listener on the chart title
-
-
docs.anychart.com docs.anychart.com
-
create a custom legend from scratch.
important
-
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.
Labels are dependent on chart type - on bar chart they are on top. On pie - aside the pie or inside.
-
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
key point - different series type will change the visualization of the chart, regardless of the chart type
Tags
Annotators
URL
-
-
docs.anychart.com docs.anychart.com
-
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.
For example, enlarge font size only when hovered: chart.hovered().labels().fontSize(22);
-
-
www.studybass.com www.studybass.com
-
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.
Key points
Tags
Annotators
URL
-
-
www.studybass.com www.studybass.com
-
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.
obviously, excluding artists intents to have this big change of note pitch
-
-
single-spa.js.org single-spa.js.org
-
the best performance is achieved by calling registerApplication immediately, but calling start after the AJAX request is completed.
important note (and including paragraph) regarding how to achieve best performance when loading multiple apps (which is what single spa does...). Basically, registerApplication() first, but start() only after doing some other work, maybe like painting initial stuff on the web page.
Tags
Annotators
URL
-
-
single-spa.js.org single-spa.js.org
-
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
this is the purpose of the mount function
-
except that it doesn't have an HTML page
I think they mean that it doesn't have its own html page with head and body section. Instead, it has only its own section of the DOM, without those 'upstream' parts.
-
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.
important. can it be useful to share information between different apps called by single-spa? I know there are other recommended mechanisms for this in single-spa world but just a thought - could be useful for that.
-
pass a reference to a common event bus so each app may talk to each other
this seems like a recommended way to share events and data between multiple apps in one single-spa instance. i wonder how technically this should be implemented
-
-
single-spa.js.org single-spa.js.org
-
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
even more explanation on the 'loading function' when registering apps in single spa.
-
-
single-spa.js.org single-spa.js.org
-
A function to load the application's code
for lazy loading of the app
-
-
angular.io angular.io
-
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);
key point as this is a 'classical' implementation of the Observable.
-
- Dec 2018
-
angular.io angular.io
-
As a publisher, you create an Observable instance that defines a subscriber function
this is how you create an observable others can observe and get updates from
-
-
github.com github.com
-
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.
this library is working by loading translations at runtime. so a 'loader' is needed to fetch and provide those translation files
-
-
angular.io angular.io
-
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'); });
this is for testing the service, directly
-
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.
key point
-
-
-
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 a key point - isolating stuff. remember this is unit testing, not integration tests. we wish to have as little as dependencies as possible.
-
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.
key points - this shows the benefits (easy) of this kind of testing and its disadvantages (coupled, easy to break if a service changes its implementation)
-
-
-
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.
key point about what spies are
-
- Nov 2018
-
www.xfive.co www.xfive.co
-
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.
key point
Tags
Annotators
URL
-
-
angular.io angular.io
-
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); });
this corresponds with the option mentioned above - inject it inside a single test
-
The TestBed creates a dynamically-constructed Angular test module that emulates an Angular @NgModule.
key point - what is angular testbed? (ATB)
-
-
blog.angularindepth.com blog.angularindepth.com
-
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
Key point
-
-
nodejs.org nodejs.org
-
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.
in other words, a peer dependency enables a kind of reverse dependency. so a plugin to appA can this way 'require' that appA would be of a specific version, not as its own dependency but rather as a neighbour or parent package.
Tags
Annotators
URL
-
- Oct 2018
-
getbootstrap.com getbootstrap.com
-
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.
so import your custom stuff first, then bootstrap. this is how !default works (probably at sass level). this is demonstrated in the lines below this one... . And the reason is how !default is working, which is sass feature, so the default values come/included AFTER you've set your default values.
-
- Sep 2018
-
blog.angularindepth.com blog.angularindepth.com
-
This is known as the entry file.
Key point
-
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.
Good ideas about what to do with the needed 'application' that we are forced to create just to create 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.
Read - this is how to fake a local library to be imported by TS as if it was in node_modules
-
Why is that useful? It enables such service to be tree-shaken (removed form the production bundle if not used)
Very important note - useful!
-
- Aug 2018
-
-
Then it gets the native element of the compiled HTML (the HTML rendered by the component).
This explains what 'native element' is, at least in this case. Its the outcome HTML after the detectChanges()
-
We use an async before each. The purpose of the async is to let all the possible asynchronous code to finish before continuing.
Is this like putting your code in setTimeout() just to push it into the event loop task queue?...
-
-
angular.io angular.io
-
The CLI takes care of Jasmine and karma configuration for you.
meaning, creating a new app using ng new will create the needed mentioned (below) config files
Tags
Annotators
URL
-
-
angular.io angular.io
-
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
key point! it allows English speaking site without worrying about translations at all, and keeping translation unit keys constant over time even if the English text is changing
-
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
important - this is how the 'keys' for the translation person are extracted - what determines the singularity of the translation item.
-
You need to build and deploy a separate version of the app for each supported language
key point!
-
The CLI imports the locale data for you when you use the parameter --configuration with ng serve and ng build
See sample i18n app (link in the beginning of this document). Basically, in package.json: "scripts": { "start": "ng serve", "start:fr": "ng serve --configuration=fr", "build": "ng build --prod", "build:fr": "ng build --configuration=production-fr",
-
-
loiane.com loiane.com
-
We have an Angular project using Bootstrap and did not need to import JQuery to have the same behavior!
Key point!
-
-
getbootstrap.com getbootstrap.comNavbar1
-
Place various form controls and components within a navbar with .form-inline.
Useful exactly as demonstrated here: search input in the navbar...
Tags
Annotators
URL
-
-
getbootstrap.com getbootstrap.comForms1
-
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.
useful - one column width is specified but the rest not. This achieved perfect distribution of the other columns, in finer accuracy than 1/12 of available width...
-
-
getbootstrap.com getbootstrap.com
-
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).
This is handy to achieve divisions to grids in resolutions finer than 12 columns, and the possibilities are practically endless with this technique.
-
d-none
cool - this causes along with other classes here, that in width narrower than 'md', this is 'gone' - display: 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.
very good examples of determining column widths
-
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.
important gist of when to specific width of column, when not to.
-
justify-content-md-center
justify flex container content to the center, in md and above only (change to xl and reduce browser width to see this in action, applies only for XL widths)
-
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
Cool and handy. Again, achieved using flex-basis and flex-grow
-
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.
Handy and useful. This is achieved using flex-basis and flex-grow
Tags
Annotators
URL
-
-
getbootstrap.com getbootstrap.comOverview1
-
// No media query for `xs` since this is the default in Bootstrap
This is a change from past versions of bootstrap
Tags
Annotators
URL
-
-
angular.io angular.io
-
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.
This means that the 'injectable' decorator has two meanings and two usages. I think this wasn't so in the past.
-
- Jul 2018
-
www.educative.io www.educative.io
-
.
That's the key point
-
-
www.tutorialspoint.com www.tutorialspoint.com
-
In production environment, each shard is a separate replica set
this (probably) means that each such 'Shard' server is actually multiple servers, in a replica set
Tags
Annotators
URL
-
-
www.tutorialspoint.com www.tutorialspoint.com
-
client application always interact with the primary node
Is it always like this? If so, this ensures only high-availability, but not scaling by LB or the like
Tags
Annotators
URL
-
-
docs.mongodb.com docs.mongodb.com
-
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.
I don't get it - what's the point of not having this set to true by default? Would anyone like to block his DB?...
-
-
www.tutorialspoint.com www.tutorialspoint.com
-
records
returned...
Tags
Annotators
URL
-
-
-
Strings, like all primitives, are immutable. For example concat() doesn’t modify the existing string but creates a new one.
Important!
-
-
docs.angularjs.org docs.angularjs.org
-
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:
Important point - component's lifecycle, a-la Angular v2/4/5/6
-
-
developer.mozilla.org developer.mozilla.org
-
filter() does not mutate the array on which it is called
Array.filter() is therefore pure.
-
-
www.tutorialspoint.com www.tutorialspoint.com
-
_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)
The specifications of the 'ID' of a document in MongoDB - important!
-
- Jun 2018
-
www.tutorialspoint.com www.tutorialspoint.com
-
Duplicate the data (but limited) because disk space is cheap as compare to compute time.
now that differs from RDBMs
-
Combine objects into one document if you will use them together. Otherwise separate them (but make sure there should not be need of joins).
Important consideration, similar to normalization done in RDBMs, when designing collections/schema
Tags
Annotators
URL
-
-
www.tutorialspoint.com www.tutorialspoint.com
-
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.
mongo DB document _id is comprised of 12 hexadecimal characters, and this is the break down of its meaning
Tags
Annotators
URL
-
-
developer.mozilla.org developer.mozilla.org
-
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
the consideration here not to have this as a model is the unlikelihood that the values will change over time
-
-
developer.mozilla.org developer.mozilla.org
-
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).
This is how a route file is recommended to be written by them. Possibly other ways exists
-
The last middleware in the file adds handler methods for errors and HTTP 404 responses.
since its the last, it means no prior middleware caught and 'handled' this requests, therefore its considered for an unknown url/resource - meaning 404... :)
-
app.use('/', indexRouter)
The difference in this app.use() usage from here to the above usages is that in the above cases, its used to add middleware, where here its used to setup routing. If called with one parameter its as described above and if called with two its for routing?
-
The next set of functions call app.use() to add the middleware libraries into the request handling chain
This is how you'd add middlewares!
-
Then we require() modules from our routes directory
Routes are also a module. This 'module' is nothing more than a way to 'include' other file, so to speak in PHP terms. Its the ability to split code/functionality across multiple manageable files
-
-
www.highcharts.com www.highcharts.com
-
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.
important note on why and when to use 'margins' (and when not to)
-
-
www.highcharts.com www.highcharts.com
-
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
But as I saw, using series.innerSize allows using one series without needing two series... not clear.
-
-
highcharts.com highcharts.com
-
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.
Important - this means that in simple cases where formatting options are possible, they are better than a formatter method as they are simpler to maintain
-
-
developer.mozilla.org developer.mozilla.org
-
npm install express-generator -g
Referencing 'express generator' app.
-
-
-
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.
key point!
-