What is MD5 Hash?

Basically, MD5 (technically called MD5 Message-Digest Algorithm) is a cryptographic hash function whose main purpose is to verify that a file has been unaltered.

loitools.com-md5-hash-generator-mobile
loitools.com-md5-hash-generator-mobile

Giving any text string, the output will be an encrypted text string that can not be decrypted (theorically, yes).

MD5 Pros and Cons

MD5 was invented by Ronald Rivest, the first hash function he developed was MD2 in 1989, which was built for 8-bit computers.

MD2 was then replaced by MD4 in 1990. MD4 was made for 32-bit machines and was a lot faster than MD2.

MD5 was released in 1992 and was also built for 32-bit machines. MD5 isn’t as fast as MD4, but it is considered to be more secure than the previous MDx implementations.

Other cryptographic hash functions, like SHA-1, have been suggested as an alternative, since MD5 has also been shown to have security flaws.

The difference between a minifier and an obfuscator

JS Minifier and JS Obfuscator are 2 terms you may face while surfing the internet or do some programming jobs. This post shows you the difference between them.

An obfuscator will transforms your original JavaScript source code into a new file that’s harder to understand, copy, re-use and modify. It’s like a way to hide or compile your source code to prevent someone else reusing/modifying it.

A minifier is a tool to transform your source code into a more lightweight version to save loading time and bandwidth between server and user’s browsers.

Most of time, it’s easy to re-format a minified text to a well-formed text. So basically, we do not use a minifier to hide our code.

An obfuscator rarely reduces the size of source code, but usually make it bigger.

So, both are tools to transform source code to another version without changing the functionalities of the code.

An obfuscator is to hide your source code, a minifier is to reduce the size of your source code.

4 reasons why you should use loitools.com’s Minifiers

Why do we need to minify our Javascript?

As I mentioned here, minify your assets like Javascript and Stylesheet files is an important task to improve your site speed hence increase your site’s SEO score.

Why loitools.com’s Minifiers?

See what you have just saved

Here in loitools.com, we want you to know how many Bytes you’ve just saved immediately in realtime.

You can see it clearly at the bottom of the output box.

Easy file saving & text copying

With 2 handful link at the bottom of the output box, you can easily save as a file your new minified text.

loitools.com-what-is-css-js-minifier
loitools.com-what-is-css-js-minifier

Working on mobile browsers

We tested both of those copy and save features in most of mobile browsers and it just works!

So, anywhere you want, any platform you are working with, you can use loitools.com to support your work.

Lighting fast

Not only JS Minifier or CSS Minifier, but all of loitools.com‘s tools are very lightweight and super fast.

What is First Contentful Paint (FCP) and How to reduce FCP time?

First Contentful Paint (FCP) is an indicator that is the time between the time when user start navigation (enter address and press GO) to the time when the browser render first bit of content.

FCP is a very important indicator that tell you about your server side in a reliable way.

Usually, a high value FCP, indicates that your server’s response time is high or some slow in network bandwidth between server and user’s browser.

Another reason is, you have some render blocking resources like external CSS and JS.

loitools.com-site-speed-optiomization-cfp
loitools.com-site-speed-optiomization-cfp

Here is loading analyze of inneka.com, a programming receipt site, with FCP = 1.62s.

How to reduce FCP time?

Fisrt of all, check your server to ensure it’s strong enough to process all requests at the same time. The two major factors are CPU and Memory (RAM).

Next is to check your network bandwidth, it’s usually a problem before as you have some limitations (1TB/month, …). Basically, the most expensive usage of bandwidth are BOTs. Yes, they are Google Bot, MSN Bot, Yandex, Semrush, Yahoo Bot, Facebook ExternalHit, Crawler, … especially if you have a lot of post.

One another thing to consider is to use CDN for your assets to reduce number of requests to your server hence reduce the load for the server. JQuery, Jquery Plugins, Bootstrap, CSS, JS, … Moving those assets as much as possible to the CDN.

Finally, move all your JS files to the end of the site. JS functions usually used for interactive action with human hence not affect to the display of the site. That’s why they should be placed at the end of the site.

5 best practices to speed your site up

Google will decrease your SEO rank if your site loads slow or drop by user because of waiting too long.

So, whatever we do, just make it load as fast as possible.

Those tricks are the most common best practices to speed your site up.

Minify your CSS/JS/HTML

To make your site’s size smaller, as I talk in the previous post, the easiest and fastest way is to use loitools.com’s CSS Minifier, JS Minifier and HTML Minifier.

It’s safe, lighting fast and easy to see the difference way.

Enable Gzip on your server side

Using Nginx or Apache, you should enable GZip compression on your server side to reduce files’ size transferred between server and browsers.

Remember, don’t use GZip on image files, instead, using Paint.net or Photoshop to reduce image files.

Reduce Redirect

What ever you do, just remove unnecessary redirect in your domain or server configuration.

Leverage the browser’s cache

Browser’s cache means reduce load js/css/images second time if already loaded in the first time.

Client’s browsers will cache all those media files hence your site will load faster.

Enable server cache

You can use Varnish Cache or Nginx FastCGI Cache to store visited sites and response to users next time.

This way require a lot of additional configuration at server side but it really reduces site loading time hence the server doesn’t need to connect to the database anymore.

Why we need to minify CSS and Javascript?

Short answer: it’s all because of the SEO.

Long answer:

Google is very strict when it comes to ranking websites.

If the site is slow, the visitor will drop from the website in search of a better website that loads fast and offers the same or better content. In other words, if your site loads faster then it will be preferred by Google.

So, the story became how to make your site load faster!

A normal site builds with HTML, CSS, JS, Images, Videos, Media, MySQL database, Server network bandwidth, … and all of them affect loading time.

Theoretically, if your CSS, JS, Images, HTML, … has smaller size, your site will load faster.

What is a Minifier?

Minifier is a software/process that reduce the size of the input (can be any of CSS/JS/Images/…) by removing any unnecessary parts which do not affect the running of the program.

While the output files have a smaller size, they can be load faster.

How to minify your CSS/JS

The fastest way is to use loitools.com‘s CSS Minifier & JS Minifier.

Those minifiers are built and tested strictly to make sure that your output files are the best in size.

Beside that, for your convenience, our Minifiers have realtime size of files in a compare for you to see how many Bytes saved.

loitools.com-what-is-css-js-minifier
loitools.com-what-is-css-js-minifier

Beside that, our tools are optimized super fast with in a second minifier, that makes you feel really comfortable using them.

More free online tools?

More and more tools will be available at loitools.com.

Understanding CSS Mixins

What is CSS Mixins?

Mixins allow document authors to define patterns of property value pairs, which can then be reused in other rulesets.

The mixin name is a class selector that identifies the mixin being declared. The @mixin keyword must be followed by the mixin name and a declaration block.

Mixins Examples

Take a look at those examples and you can see it clearly

@mixin .noborder {   
overflow: hidden;   
_overflow: visible;   
border: 0px solid #fff; 
}

Here, we defined a mixin called .nobody with some value pairs those can be reused anywhere.

Media Independent Mixins

Add media query AFTER the class name to specify the media query. Look at this example:

@mixin .noborder @media print{
  border: 1px solid #111;
}

This mixin will applied to @media print only.

Include/Add a mixins

You can use include command to use a mixins

.tablex {
  include: .noborder;
}

Include multiple mixins in one command

.tablex {
  include: .noborder .mixin2 .mixin3;
}