iamakulov

deepCompare performs a deep comparison of two objects. It automatically unwraps JS Maps, Sets, and ImmutableJS objects.

Example

deepCompare(left, right)

// Will output:
// {
// isEqual: false,

iamakulov

What you should (and shouldn’t) enable in Cloudflare for web performance

Cloudflare is a web-performance-and-security-as-a-service company.

To configure your web app to run faster, you need to:

• sign up for Cloudflare
• connect it to your site (by moving DNS records and setting up proxying)
• enable a few toggles in the settings.

iamakulov

Imports and webpack contexts

This is an example to my article “How webpack’s ContextReplacementPlugin works”

Each time webpack encounters a dynamic import like this:

require('./locale/' + name + '.js')

iamakulov

// A copy-pasteable useWhyDidYouUpdate hook, adopted from the old & good usehooks.com (http://web.archive.org/web/20230203011511/https://usehooks.com/useWhyDidYouUpdate/).
//
// This hook will log whenever a component rerenders – and will print the props (or any other values
// you passed into it) that have changed between the rerenders.
//
// Usage:
//
// function MyComponent(props) {
//   useWhyDidYouUpdate('MyComponent', props)
//   

iamakulov

Here’s how to make api.my-app.com available under my-app.com/api, using CloudFront or Cloudflare.

CloudFront

If both my-app.com and api.my-app.com are hosted in AWS, you can route requests to these instances using the CloudFront CDN.

Here’s what you’ll need to do:

1. Create a CloudFront distribution

iamakulov

Analysis of passive: true

In 2017, Chrome, Firefox and Safari added support for passive event listeners. They help to make scrolling work smoother and are enabled by passing {passive: true} into addEventListener().

The explainer mentions that passive: true works for wheel and touch events. I practically analyzed when passive: true actually helps:

Event	Works better with passive: true	Is passive by default
wheel¹	Yes (Chrome), No (Firefox)	No (Chrome), No (Firefox)
touchstart	Yes (Chrome), ?² (Firefox)	Yes (Chrome), ?² (Firefox)

iamakulov

// my-app/webpack.config.js
{
  externals: {
    'jquery': 'jQuery',
    /* ↑ With this line, Webpack will replace every
     *    import $ from 'jquery';
     *
     * in your code with approximately
     *    const $ = window.jQuery;
     *

iamakulov

Webpack’s ContextReplacementPlugin examples

This is an example to my article “How webpack’s ContextReplacementPlugin works”

You have the moment.js library, and you have a dynamic import:

require('./locale/' + name + '.js')

iamakulov

babel-plugin-add-module-exports generates an incorrect bundle if you use ES modules in the latest versions of Webpack 2 (at least in 2.1.0-beta.27 and .28). Here’s what to do.

1. Remove the plugin:

{
  "plugins": [
-   "add-module-exports"
  ]
}

iamakulov

(Для канала про бизнес: @iamakulov_learning_biz)

1. Депозиты

Депозиты. Доходность на февраль 2018 года — 1...2% годовых. Это примерно равно или ниже инфляции доллара. Вклады чаще неотзывные (то есть забрать просто так не получится). На короткие вклады процент меньше, плюс нужно платить подоходный налог (если вклад до двух лет).

2. Облигации Беларуси в иностранной валюте

На примере выпуска №244: