React Lazy Routing

React routing is pretty straightforward and well documented feature. The example of usage is here
https://jsfiddle.net/AndrewBuntsev/3n5rmL0o/

If we need to load components only when they are needed we can utilize the code splitting techique with lazy() function and Suspense component

lazy() function loads the component no earlier than it is required

  
const Users = React.lazy(() => import('./Users'));

Suspense displays a loading component

  
render(
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Users />
      </Suspense>
    </div>
  );

Upload Video in chunks with preview and progress bar using JavaScript

So, we have 3 following goals here:

1. Preview video before it is uploaded
2. Upload video file in small chunks
3. Display a progress bar

All these tasks are achievable with JS and jQuery without any other libraries.
For choosing a video file we will use the standard input element

<input type="file" id="uploadVideoFile" accept="video/*" />

So to access the chosen file we will call

var fileInput = document.getElementById("uploadVideoFile");

To display video we need a video element

div id="videoSourceWrapper">
   <video style="width: 100%;" controls>
      <source id="videoSource"/>
   </video>
</div>

The following snippet displays the video after it is chosen in the video element for preview

$('#uploadVideoFile').on('change',
    function() {
        var fileInput = document.getElementById("uploadVideoFile");
        console.log('Trying to upload the video file: %O', fileInput);

        if ('files' in fileInput) {
            if (fileInput.files.length === 0) {
                alert("Select a file to upload");
            } else {
                var $source = $('#videoSource');
                $source[0].src = URL.createObjectURL(this.files[0]);
                $source.parent()[0].load();
                $("#videoSourceWrapper").show();
            }
        } else {
            console.log('No found "files" property');
        }
    }
);

As you can see, you can watch any video file having all necessary controls in the video player. Now let's have a look how to upload the video on your server.

Sweet Alert Dynamic Content

Sweet Alert is really beautiful alternative for the boring javascript alert. And it is not just beautiful, it is very powerful popup that allows to do lots of awesome things. But in this post I will show just one feature how to change the popup content dynamically without opening a new popup or creating a popup queue. So let's start with the demo:



Let's have a look at the implementation.

CSS Heart beating

We can make a heart with just css even having the only div.

  
<div id="heart"></div>

The most tricky part is to draw a heart. Luckily, it is pretty simple - it can be composed of 3 shapes - square and 2 circles. Square will be described with main css class, and 2 circles with ::before and ::after pseudo classes

And beating will be implemented with css @keyframe animation

Now let's have a look at the whole css.

JavaScript private fields

There is no private keyword in ES5 and ES6, so to create a private field we need to make up a workaround

  
function MyObj(val){
   let _val = val;
  
   return{
      getVal: function() { return _val; },
      setVal: function(newVal) { _val = newVal; }
  };
}

The MyObj(..) function is a factory that returns a new object every time we call it, so no necessary to use a new keyword. The object has 2 methods - getter and setter so that we can manipulate with the _val value

  
var o = MyObj(5);
console.log(o.getVal()); //5
o.setVal(8);
console.log(o.getVal()); //8

As long as _val is declared with the let keyword, it's impossible to access it directly from a different context

  
o._val = 10;
console.log(o.getVal()); //_val is still 8

o._val = 10 creates a completely separate property _val inside the object o, you can update it independently from our private field.

If for some reason you cannot use ES6, there is another solution:

JavaScript Array groupBy method

Array.prototype doesn't have any grouping functionality, so let's add the groupBy() method. Let's say we have the following array example:

  
var movies = [
                 {  
                   "Title": "Inception",
                   "Year": "2010",
                   "Director": "Christopher Nolan"
                },
                {  
                   "Title": "Interstellar",
                   "Year": "2014",
                   "Director": "Christopher Nolan"
                },
                {
                   "Title": "Avatar",
                   "Year": "2009",
                   "Director": "James Cameron"
                },
                {
                   "Title": "The Dark Knight",
                   "Year": "2008",
                   "Director": "Christopher Nolan"
                },
                {  
                   "Title": "Batman Begins",
                   "Year": "2005",
                   "Director": "Christopher Nolan"
                }
];

console.table(movies.groupBy('Director'));

The groupBy('Director') method should return 2 groups - 1st "Christopher Nolan" group and 2nd "James Cameron" group. Every group should contain the list of associated movies.

Now let's have a look at the method implementation.

.NET Generic Configuration Section

If we need to extend an app.config file of .net application with a deep level configuration section like this

  
  <DevicesConfiguration>
    <devices>
      <device type="SM_G920I###6.0.1">
        <touchActivities>
          <touchActivity type="ToggleFlightMode">
            <points>
              <point x="500" y="1800" id="1"/>
              <point x="1300" y="430" id="2"/>
            </points>
          </touchActivity>
          <touchActivity type="ToggleVOLTE">
            <points>
              <point x="500" y="2400" id="1"/>
              <point x="1300" y="1000" id="2"/>
            </points>
          </touchActivity>
        </touchActivities>
      </device>
      <device type="SM_J510FN###7.1.1">
        <touchActivities>
          <touchActivity type="ToggleFlightMode">
            <points>
              <point x="340" y="220" id="1"/>
              <point x="340" y="610" id="2"/>
              <point x="640" y="200" id="3"/>
            </points>
          </touchActivity>
          <touchActivity type="Enable3G">
            <points>
              <point x="340" y="220" id="1"/>
              <point x="360" y="960" id="2"/>
              <point x="370" y="390" id="3"/>
              <point x="270" y="580" id="4"/>
            </points>
          </touchActivity>
        </touchActivities>
      </device>
    </devices>
  </DevicesConfiguration>

we have to create at least 3 classes inherited from ConfigurationElementCollection to incapsulate 'devices', 'touchActivities' and 'points' sections. It could be too much code unless we create generic ConfigurationElementCollection and use it everywhere instead of creation separate classes.