183 Matching Annotations
  1. Last 7 days
    1. 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.


  2. Jun 2019
    1. 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...

    2. 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!

    3. 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

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

      important thing to do in modern browser to stop it from interfering with our own drag&drop handling

    1. Children are ignored.

      key point! notice the demo...

    2. 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!

    3. 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!

    1. 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)

    1. 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

    1. 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

    1. 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

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


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


    1. 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...

    2. 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...

    1. 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.

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


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


    4. 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

  3. May 2019
    1. 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

    2. 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!

    3. 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

    1. 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()

    2. 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.

    3. 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

    1. 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

    2. elements

      that's the key point here...

    3. 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!

    1. 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

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

      including HTML comments

    1. 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

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

      interesting example on a default action

    2. 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

    3. 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.

    1. 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!

    2. 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...)

    1. 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

    1. 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

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

      key point

    1. 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.

    1. 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

    2. 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'

    3. 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

  4. Mar 2019
    1. 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.

    2. 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

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

      key point about the usage style of error boundaries

    4. 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

    5. an uncontrolled component keeps the source of truth in the DOM

      key point

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

      key point

    7. 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

    8. 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

    9. 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

    10. 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!

    11. 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

    12. 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

    13. 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()... :-(

    14. 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)

    15. 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

    16. 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...)

    17. 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

    18. 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

    19. 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)

    20. 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!

    21. 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

    22. 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.

    23. Using the array index as a key is problematic when trying to re-order a list’s items or inserting/removing list items. Explicitly passing key={i} silences the warning but has the same problems as array indices and is not recommended in most cases


    24. Avoiding direct data mutation lets us keep previous versions of the game’s history intact, and reuse them later

      one need/reasoning why data immutability is good/useful

    25. 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...

    1. 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

    1. 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

    1. 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!

  5. Feb 2019
    1. 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!

  6. Jan 2019
    1. 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.

    2. 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

    1. create a custom legend from scratch.


    2. 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.

    3. 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

    1. 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);

    1. 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

    1. 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

    1. 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.

    1. 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

    2. 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.

    3. 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.

    4. 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

    1. 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.

    1. 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.

  7. Dec 2018
    1. 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

    1. 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

    1. 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

    2. 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

    1. 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.

    2. 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)

    1. 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

  8. Nov 2018
    1. 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

    1. 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

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

      key point - what is angular testbed? (ATB)

    1. 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

    1. 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.

  9. Oct 2018
    1. 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.

  10. Sep 2018
    1. This is known as the entry file.

      Key point

    2. 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.

    1. 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

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

      Very important note - useful!

  11. Aug 2018
    1. 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()

    2. 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?...

    1. 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

    1. 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

    2. 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.

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

      key point!

    4. 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",

  12. getbootstrap.com getbootstrap.com
    1. Place various form controls and components within a navbar with .form-inline.

      Useful exactly as demonstrated here: search input in the navbar...

  13. getbootstrap.com getbootstrap.com
    1. 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...

    1. 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.

    2. d-none

      cool - this causes along with other classes here, that in width narrower than 'md', this is 'gone' - display: none...

    3. 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

    4. 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.

    5. 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)

    6. 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

    7. 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

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

      This is a change from past versions of bootstrap

    1. 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.

  14. Jul 2018
    1. 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

    1. 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

    1. 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?...

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


    1. 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

    1. _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!

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

      now that differs from RDBMs

    2. 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

    1. 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

    1. 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

    1. 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

    2. 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... :)

    3. 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?

    4. 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!

    5. 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

    1. 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)

    1. 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.

    1. 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

    1. 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!

    1. 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.

      important as this is used a lot

    2. important

    3. app.use(a_middleware_function)

      useful for cases like authorization/authentication

    4. or the request will be left hanging)


  16. May 2018
    1. For...in doesn't only enumerate the array declaration above, it also looks for inherited non-enumerable properties from the constructor's prototype, in this case newArr and anotherNewArr and prints them out also

      Beautiful example/demonstration about the difference (see code sample above it)

    1. (the extra + before the first "2" is treated as a unary operator). Thus, JavaScript converts the type of "2" to numeric and then applies the unary + sign to it (i.e., treats it as a positive number).
    2. function sum(x) { if (arguments.length == 2) { return arguments[0] + arguments[1]; } else { return function(y) { return x + y; }; } }

      this combines 'regular' access of function arguments (shown in usage of argument 'x') and using 'arguments' array, in parallel. nice

    3. order of operations
    4. Then, "12" + "2" yields "122"

      probably, since operator precedence is the same across all statement, its performed from left to right with no 'jumps' to preform some operations earlier than others

    5. Since one of the operands ("2") is a string, JavaScript assumes it needs to perform string concatenation and therefore converts the type of 1 to "1"

      this is a basic rule when it needs to decide if coercing of an operand is needed

    6. This behavior also argues for following the convention of placing an opening curly brace at the end of a line in JavaScript, rather than on the beginning of a new line. As shown here, this becomes more than just a stylistic preference in JavaScript.

      I was on the righteous side all those years! Yey!

    7. automatically inserted

      Read all about it here

    8. although omitting them is generally really bad form

      and that's a good example/reason why to always us semicolons

    1. The reversed array.

      Important - it returns a reference to the original array, which is reversed too (as noted in the example above). Its crucial to understand to prevent bugs...

    1. Put each entity in its own file

      component, module, etc

    2. In AngularJS, the view is a projection of the model through the HTML template

      Definition of 'VIEW' in AngularJS terms

    3. Once an application is bootstrapped, it will then wait for incoming browser events (such as mouse clicks, key presses or incoming HTTP responses) that might change the model. Once such an event occurs, AngularJS detects if it caused any model changes and if changes are found, AngularJS will reflect them in the view by updating all of the affected bindings

      This is probably the famous digest cycle that is triggered automatically on changes detected.

    1. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies

      This explains how the extra space is divided/distributed

    2. By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed with this property.

      if not wrapped and not enough space in the container, there will be an overflow on the container (handle it with 'overflow' CSS property to determine if things should be visible is not enough space, scroll exists or not, etc...)

  17. developer.mozilla.org developer.mozilla.org
    1. To avoid this problem (to prevent ASI), you could use parentheses

      nice work around to the ASI done by JS, if you need new lines on the return statement

    2. No line terminator is allowed between the return keyword and the expression


    1. Now that’s a really powerful JavaScript pattern that you have learned. It combines the power of both IIFEs and closures.This is a very basic variation on the module pattern. There are more patterns, but almost all of them use an IIFE to create a private closure scope.

      summary of the importance of the IIFE + closures, to create the module pattern

    2. Remember this! You need a function expression to form an IIFE. Function statements/definitions are never used for creating IIFEs

      key point, but if you've read above it, that's not a surprise

    3. The above stylistic variation can be used by replacing “!” with “+”, “-”, or even “~” as well. Basically any unary operator can be used

      examples of operators that can be used for the evaluation of the function declaration as an expression. Also, wrapping the entire statement with parenthesis (meaning: (function() {...}()); ) will also do the same trick

    4. As we saw before, a function statement always starts with the function keyword. Whenever JavaScript sees function keyword as the first word in a valid statement, it expects that a function definition is going to take place. So to stop this from happening, we are prefixing “!” in-front of the function keyword on line 1. This basically enforces JavaScript to treat whatever that’s coming after “!” as an expression.

      Why they used the '!' in the beginning of the statement

    5. So the difference here is that the function expression has a name “fibonacci” that can be used inside that function expression to call itself recursively

      cool tip: named function expression is useful if the function expression needs to be called from within itself - such as in the case of recursion

    6. They are anonymous because they don’t have a name following the function keyword

      definition of an anonymous function

  18. developer.mozilla.org developer.mozilla.org
    1. // use Array.isArray or Object.prototype.toString.call // to differentiate regular objects from arrays


    1. The __proto__ of an object created by calling a function with new is equal to the prototype of that function The __proto__ of a function’s prototype is equal to Object.prototype The __proto__ of Object.prototype is null

      Key points in understanding OO & inheritance in JS

    1. ng-repeat="message in emails.messages"

      declerative HTML

    2. inside Controllers or as a defined method. Here’s the method usage,

      he probably means not the usage of a defined filter, but using the filters feature, which requires defining as a method that is used later.

    3. There are various ways to define Directives in the DOM, these could look like so

      in short:

      • as an attribute
      • custom element
      • css class
      • as html comment