Tag Archives: javascript

What is Minification?

css minification

Web browsers aren’t concerned about the readability of code, when it comes to generating a page or running a script. In order for the file to be executed, minification strips a code file of all data that isn’t required. With minified files, you don’t need to be decompressed before they can be read, modified or executed. This is so much different from traditional compression techniques. If you are a web developer or web designer, you may need to know further information about CSS minification.

After the code for a web application is written, and before the application is deployed, minification is performed. Minification can result in faster response times and lower bandwidth costs, as it sends the minified version instead of the full version. Nowadays, minification can be widely used in many websites ranging from small personal blogs to multi-million user services.

Minification Techniques and Tools

Minify is one of the more comprehensive minification tools. Minify handles minification, caching, and compression of CSS, HTML and JavaScript files. Minify also offers integration with popular web applications and frameworks including WordPress and the Zend Framework.

HTML minification

If you are looking for performance improvements to websites, you can find the PageSpeed Insights Chrome extension in Google. PageSpeed Insights provides a “Minify HTML” rule which generates a minified version of the open website.

CSS minification

Several online tools provide instant CSS minification, since CSS is less likely to change frequently. To get a quick and simple way to minify CSS, Refresh-SF uses multiple tools to minify CSS, HTML and JavaScript.

JavaScript minification

To create a more efficient copy of any JavaScript file, you can use Google’s JavaScript optimization tool, the Closure Compiler. Usually, a developer will use the Closure Compiler to minify the code and make change to a JavaScript file. For a user’s web browser, they can access the new file in the web server.

Example of Minification

The following code block shows an example of plain HTML and CSS:

<html>
       <head>
               <style>
                 #myContent { font-family: Arial }
                #myContent { font-size: 90% }
</style>
</head>

        <body>

                 <!– start myContent –>
                       <div id=”myContent”>
                       <p>Hello world!</p>
                       </div>
                 <!– end myContent –>

        </body>
</html>

Here are the same codes after minification:

<html><head><style>#myContent{font-family:Arial;font-size:90%}</style></head><body><div id=”myContent”><p>Hello world!</p></div></body></html>

Benefits of Minification

  1. As less unnecessary data needs to be downloaded, users can load content faster. Users experience identical service without the additional overhead.
  2. Lower bandwidth costs as less data is transmitted over the network. Developers no longer send the extra content that users don’t care about.
  3. Lower resource usage since less data needs to be processed for each request. The minified content need to be generated once, but can be used for an unlimited number of requests.

Setting Up Vim for Modern JavaScript Development

setting-up-vim-for-modern-javascript-development

Now, you can do all of your JavaScript editing in Vim. Vim is a text editor. If you’re used to using Notepad (Windows), Sublime Text (Windows / Mac), Atom (Windows / Mac), Nano (Linux), or any text editor, Vim is just another program that allows you to write and edit text. But, it helps your JavaScript work gets better. In this tutorial, we will tell you how to set up vim for modern JavaScript development. If you are a web developer, this article is certainly for you.

JavaScript Syntax

The main plugin that is used is pangloss/vim-javascript. You can find many types of JS highlighting in Vim but this one is the most reliable. This plugin has support for flow and its types and you can enable that by turning it on in your vimrc:

let g:javascript_plugin_flow = 1

In addition, to add syntax support for JSX to my JavaScript files, I use mxw/vim-jsx. But, this plugin requires your JSX files to have a .jsx extension, even though I usually stick with .js. If you have the same situation, the below config is for you:

let g:jsx_ext_required = 0

Finding Files and Navigating

There are two options among so many options for fuzzy finding; they are FZF and the corresponding FZF.vim plugin. This lets me quickly navigate through projects to find the files I’m after. Not JS specific, but definitely worth a mention.

ESLint + Flow Integration

ESLint and Flow are the two command line tools that are usually used. These tools will check my code to ensure that everything typed correctly, or formatted correctly based on ESLint.

Until recently, integrating these with Vim was far from ideal, for two reasons:

  1. If you often install command line tools locally instead of globally, npm puts the executable in ./node_modules/.bin. This can break editor integrations, because they expect to have the executable available, so try running eslint, rather than ./node_modules/.bin/eslint./node_modules/.bin/eslint , for example.
  2. Vim didn’t have support for async, background jobs, up until the release of Vim 8. This causes the editor would be unresponsive for a second or two when you saved your file, and ESLint ran, until ESLint returned. This is only a small amount of lag but it’s really noticeable.

With Vim 8, all of those problems have been solved recently. Ale is a linting plugin that comes out the box with support for a variety of linting tools for different filetypes and languages, and most importantly for me that includes ESLint and Flow. Moreover, it can automatically detect which linters to run and you really don’t need to configure it all.

3 JavaScript Libraries to Look Up for in 2017

3-javascript-libraries-to-look-up-for-in-2017

For some web developers, JavaScript’s ecosystem can be fatigue. Especially this year where there is a lot of tooling and configuring is required. So, to make your work easier, we submit a list of 3 generic libraries/frameworks for front-end development.

Vue.js

If you haven’t put any attention on Vue.js before, now you have to keep your eyes on. It is a tiny JavaScript framework which seems to primarily focus on views and give you only a handful of tools to regulate data for those views. Moreover, Vue.js is also good for a change as it doesn’t get stuffed with programming design pattern and limitations.

There are two types of Vue.js. A stand-alone version that includes the template compiler and the runtime version that doesn’t. You can see its simplicity, through an example of a component that shows a message and brings interactivity to a button to reverse the message.

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
import Vue from 'vue'

new Vue({
  el: '#app',
  data: {
    message: 'Hello World!',
  },
  methods: {
    reverseMessage: function () {
      const reversedMessage = this.message
        .split('')
        .reverse()
        .join('');

      this.message = reversedMessage;
    },
  },
});

Don’t you worry about the existence of other plugins, as you still can find them on Vue.js. In fact, several guides are available to use there. This framework will be suitable for you, especially if you wish to have productive fast. It also scales well as the project grows.

Svelte

Svelte must be the latest JavaScript Libraries as it has been released in mid-November 2016. At some point, it may looks similar to Vue.js, but leaves a smaller footprint. “Traditional” frameworks need runtime code to define and execute modules; keeps state, update the views and do whatever frameworks do. Moreover, with Svelte you can dissolve into clean JavaScript code as of you didn’t use a framework at all. The big advantages that you can get is that its file size.

Svelte has plugins so you can compile the source code using Webpack, Browserify, Rollup or Gulp.

You can use the below example of creating the Vue.js example with Svelte as a comparison:

<p>{{ message }}</p>
<button on:click="reverseMessage()">Reverse Message</button>

<script>
export default {
  data () {
    return {
      message: 'Hello World!',
    }
  },
  methods: {
    reverseMessage () {
      const reversedMessage = this.get('message')
          .split('')
          .reverse()
          .join('');

      this.set({
        message: reversedMessage,
      });
    }
  }
};
</script>

The very same module created with Vue.js produces a 7kb bundle. Svelte produces a 2kb file.

In terms of performance, Svelte competes with Inferno. This makes Svelte becomes a good choice if you care about your application’s footprint. At the time of writing, Svelte either doesn’t have its plugin system documented, or doesn’t have one at all. The TODO indicates that Svelte will support plugins and might have an API to hook into the framework.

The compatibility of the compiled code depends on your build workflow stack, so it’s hard to say what its default compatibility is. Technically you should be able to achieve pre-ES% support by including ES5 shims.

To conditionally load and invoke modules, Conditioner.js is one of the good choices. The difference from other module loaders is that conditioner.js allows you define conditions under which to load and/or show a module. This results in reducing loading time and saving bandwidth.

However, you better already have functional components in place that are enhanced with a given JavaScript module. How those modules are defined is entirely up to you. You could even make it load modules from your favorite framework.

To get started, you can install it via npm: npm install conditioner-js.

The demo is unlike previous ones to better illustrate Conditioner.js’ features. Imagine we wish to show the time remaining to an event. A module is shown like this:

import moment from 'moment';

export default class RelativeTime {
  /**
   * Enhance given element to show relative time.
   * @param {HTMLElement} element - The element to enhance.
   */
  constructor(element) {
    this.startTime = moment(element.datetime);

    // Update every second
    setInterval(() => this.update(), 1000);
    this.update();
  }

  /**
   * Update displayed relative time.
   */
  update() {
    element.innerHTML = this.startDate.toNow();
  }
}

It is so simple to initialize the module:

<time datetime="2017-01-01" data-module="ui/RelativeTime">2017</time>

Conditioner will then load the ui/RelativeTime module at this location in the DOM. Note the content is already present and in an acceptable format and the module only enhances that.

If you want a module to initialize only when it’s visible to a user, you can do so with conditions:

<!-- Show RelativeTime only if it is visible to the user -->
<time datetime="2017-01-01" data-module="ui/RelativeTime" data-conditions="element:{visible}">2017</time>
<!-- Keep showing RelativeTime after it was visible to the user -->
<time datetime="2017-01-01" data-module="ui/RelativeTime" data-conditions="element:{was visible}">2017</time>

Conditioner.js has quite an extensive list of monitors, which you use to define conditions. Don’t fret! You only have to include those you need, preventing the inclusion of unnecessary code.

You can also pass along options as a JSON string or a slightly more readable JSON variant.

<!-- JSON variant -->
<div data-module="ui/RelativeTime" data-options='unit:"seconds"'>...</div>
<!-- Or good old JSON -->
<div data-module="ui/RelativeTime" data-options='{"unit":"seconds"}'>...</div>