Tag Archives: html

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.

The Easiest Ways to Generate API Documentation

the-easiest-ways-to-generate-api-documentation

As a developer whether you are a web developer or app developer, you may be familiar enough with API documentation. API documentation is an important part of the product offering affordances to the developer community to help them understand exactly what an API offers and how to use it. Below are several hints that you can use to create API documentation easily:

What API Documentation Should Contain

You can create your own API Documentation as you like, since there are no standards on what API documentation should encompass. The important thing is makes it easy for them to understand an API is a good starting point. However, you can follow the list below from established providers in the API economy:

  • A list of the resources with an explanation of the purpose of each in the context of the product or service being offered via the API;
  • Examples of API calls in a variety of languages and tools (cURL, Postman Collections, etc.);
  • Do something meaningful in the context of the product or service the API offers, guides that detail the workflows implicit in using the API i.e. the sequence of API calls. For example, Dwolla offers several guides on how to send or receive money, with branches into different contexts throughout that explain the different aspects of their product offering;
  • An overview of the design principles adopted by the API provider and what that means for aspects adherence to REST (especially hypermedia), HTTP codes, etc.;
  • Information on authentication, including schemes that may be implemented such as OAuth or OpenID Connect;
  • General information on error handling with information on the HTTP return codes that will be returned;
  • User-specific contexts that help developers get to grips with the subject matter more easily. For example, Stripe automatically tailors their API documentation with your API key and secret (when you are logged in) so any code samples are immediately ready to use;
  • An interactive API explorer that allows the developer to readily bring all this information to life.

Interactive Explorers

It is a common thing to have an Interactive Explorers in API specification formats generated from the specification document itself, creating a means for consumers to both learn about and test API calls at the same time. With the help of interactive explorer in understanding a provider’s API, publishing API will be easier. The options are therefore largely dictated by the choice of API specification format, for example:

  • The OpenAPI Specification (aka Swagger) offers Swagger UI, which allows you to generate an interactive explorer with virtually no coding (depending on the completeness of your Swagger specification);
  • Apiary offers an explorer that is generated from API Blueprint and Swagger specifications. It mixes the features of an interactive explorer with a documentation suite as it renders the Markdown documentation in API Blueprint side-by-side with an interactive tool for making sample API calls;
  • Finally, an open-source explorer is offered for the RAML specification format that implements many of the same features as Swagger UI and Apiary.

By using these tools, we hope you can create an easy-to –use reference point for their developer community. However, static documentation may be required to accompany an interactive explorer, if the subject matter of the API is complex or requires high-level explanation not necessarily associated with a resource.

4 Modern Background Tricks to Try Out

4-modern-background-tricks-to-try-out

Sometimes, as a web designer, you find that it is difficult to find fresh inspiration, if you happen to face this problem, you can search new techniques and play around with the CSS3, HTML5, and JavaScript. Actually, there is a discernible trend of going for these options. But at least, you can find four different modern dynamic backgrounds that can help to inspire you, such as follows:

  1. Particle Animation

Particle animation is maybe one of the most popular choices right now. Many websites has successfully applied this elegant cosmos-inspired as their solution. Particle animation work best in combination with plain solid color canvas, illustration, vector drawings, and even photos.

You can also select vary animation that it offers. Range from a bundle of chaotically moving dots that are scattered throughout the entire page to imitate starry sky or rain of stars, or constellation-themed solution where you can connect circles with thin lines. Besides, some effects are paired with the effects triggered by mouse hover events. It aims to enable you drive the particles away, form swirls from them, attach them to cursor as a trail, etc.

  1. Waves of Particles

Different from the above example which mostly all the effects come from HTML5 and CSS3 and a pinch of JavaScript magic, waves of particles is an ingenious experiment with Three.js library. It easily reminds one of small tides, with its arched forms and smooth ripple-like movements and gives a feeling of a breathing canvas. To explore it horizontally and vertically, you can move the mouse cursor to rotate it in different directions.

  1. Mouse Hover Parallax

Another flourishing trend that you should know is Layered Parallax. It has a surprising way to transform a dull static background into a composition with a subtle 3D feeling along with particle animation. In fact, you only need to spruce it up a bit instead of ditch your favorite image choice.

It is pretty beneficial when you need to liven up the title, logotype, surreal scene, or illustration. It is also suitable for various abstract animations. This not only adds another dimension, but also allows the users to play with the environment which is triggered by standard mouse hover event.

  1. WEBGL Experiments

If you have pretty amount of money, you can choose WebGL experiments as your inspiration. It can be brilliant, awe-inspiring, and a bit pompous. You may find it is a bit expensive, but it worth every penny. However, you should adapt with the amount of resources that it consumes, and the lack of full browser compatibility.