Imran Latif – SitePointhttps://www.sitepoint.com
Learn CSS | HTML5 | JavaScript | Wordpress | Tutorials-Web Development | Reference | Books and MoreTue, 26 Sep 2017 17:00:02 +0000en-UShourly1https://wordpress.org/?v=4.8.1Custom PDF Rendering in JavaScript with Mozilla’s PDF.Jshttps://www.sitepoint.com/custom-pdf-rendering/
https://www.sitepoint.com/custom-pdf-rendering/#commentsMon, 16 May 2016 20:00:23 +0000http://www.sitepoint.com/?p=129984When it comes to the Web, almost every modern browser supports viewing of PDF documents natively. But, that native component is outside of the developer's control. Imagine that because of some business rule in your web app, you wanted to disable the Print button, or display only few pages while others require paid membership. You can use browser's native PDF rendering capability by using the embed tag, but since you don't have programmatic access you can't control the rendering phase to suit your needs.

Luckily, there now exists such a tool, PDF.js, created by Mozilla Labs, which can render PDF documents in your browser. Most importantly, you as a developer have full control over rendering the PDF document's pages as per your requirements. Isn't this cool? Yes, it is!

Let's see what PDF.js actually is.

What Is PDF.js

PDF.js is Portable Document Format (PDF) built around HTML5-based technologies, which means it can be used in modern browsers without installing any third-party plugins.

PDF.js is already in use at many different places including some online file sharing services like Dropbox, CloudUp, and Jumpshare to let users view PDF documents online without relying on browser's native PDF rendering capability.

PDF.js is without any doubt an awesome and essential tool to have in your web app, but integrating it isn't as straightforward as it might seem. There is little to no documentation available on how to integrate certain features like rendering text-layers or annotations (external/internal links), and supporting password protected files.

In this article, we will be exploring PDF.js, and looking at how we can integrate different features. Some of the topics which we will cover are:

Basic Integration

Rendering Using SVG

Rendering Text-Layers

Zooming in/Out

Basic Integration

Downloading the Necessary Files

PDF.js, as it's name states is a JavaScript library which can be used in browser to render PDF documents. The first step is to fetch necessary JavaScript files required by PDF.js to work properly. Following are two main files required by PDF.js:

pdf.js

pdf.worker.js

To fetch aforementioned files, if you are a Node.js user, you can follow these steps as mentioned on the GitHub repo. After you are done with the gulp generic command, you will have those necessary files.

If, like me, you don't feel comfortable with Node.js there is an easier way. You can use following URLs to download necessary files:

The above mentioned URLs point to Mozilla's live demo of PDF.js. By downloading files this way, you will always have latest version of the library.

Web Workers and PDF.js

The two files you downloaded contain methods to fetch, parse and render a PDF document. pdf.js is the main library, which essentially has methods to fetch a PDF document from some URL. But parsing and rendering PDF is not a simple task. In fact, depending on the nature of the PDF, the parsing and rendering phases might take a bit longer which might result in the blocking of other JavaScript functions.

HTML5 introduced Web Workers, which are used to run code in a separate thread from that of browser's JavaScript thread. PDF.js relies heavily on Web Workers to provide a performance boost by moving CPU-heavy operations, like parsing and rendering, off of the main thread. Running processing expensive code in Web Workers is the default in PDF.js but can be turned off if necessary.

Promises in PDF.js

The JavaScript API of PDF.js is quite elegant and easy to use and is heavily based on Promises. Every call to the API returns a Promise, which allows asynchronous operations to be handled cleanly.

Hello World!

Create a project under your local web-server such that it can be accessed using http://localhost/pdfjs_learning/index.html. PDF.js makes Ajax calls to fetch documents in chunks, so in order to make the Ajax call work locally we need to place PDF.js files in a local web-server. After creating the pdfjs_learning folder on your local web-server, place the files (pdf.js, pdf.worker.js) in it that you downloaded above. Place the following code in index.html:

As you can see, we've included a link to the main library file, pdf.js. PDF.js automatically detects whether your browser supports Web Workers, and if it does, it will attempt to load pdf.worker.js from the same location as pdf.js. If the file is in another location, you can configure it using PDFJS.workerSrc property right after including the main library:

If your browser doesn't support Web Workers there's no need to worry as pdf.js contains all the code necessary to parse and render PDF documents without using Web Workers, but depending on your PDF documents it might halt your main JavaScript execution thread.

Let's write some code to render the 'Hello World!' PDF document. Place the following code in a script tag, below the pdf.js tag.

Ruby's philosophy is based on a strong primitive which is programmer happiness. Ruby strongly believes in programmer happiness and it has provided many different ways to make it so. Its metaprogramming capabilities allow programmers to write dynamic code at runtime. It's threading abilities give programmers an elegant way to write multithreaded code. It's hook methods help programmers extend behavior of programs at runtime.

The aforementioned features, along with some other cool language aspects, make Ruby one of the preferred choices for writing code. This post will explore some important hook methods in Ruby. We will discuss different aspects about hook methods, such as what they are, what are they used for, and how we can use them to solve different problems. We will also look at how popular Ruby frameworks/gems/libraries use them to provide pretty cool features.

Let's get started.

What is a Hook Method?

Hook methods provide a way to extend behavior of programs at runtime. Imagine having the ability to get notified whenever a child class inherits from some particular parent class or handling non-callable methods on objects elegantly without allowing the compiler to raise exceptions. These are some of the use cases for hook methods, but their usage is not limited to this. Different frameworks/libraries have used different hook methods to achieve their desired functionality.

In the previous article we created a gem from scratch that pulls in a jQuery plugin and adds it to a Rails application. In this post, let's look into some advanced concepts to make our gem even better.

We will be using same gem and Rails application used in the previous post.

]]>https://www.sitepoint.com/create-ruby-gem-jquery-plugin-advanced/feed/0Create a Ruby Gem for a jQuery Plugin: Basicshttps://www.sitepoint.com/create-ruby-gem-jquery-plugin-basics/
https://www.sitepoint.com/create-ruby-gem-jquery-plugin-basics/#commentsMon, 13 Oct 2014 14:00:53 +0000http://www.sitepoint.com/?p=92385In this post, we will create a gem from scratch. The gem we are building is based on a jQuery plugin. You might be wondering: Why bother developing a gem for jQuery plugin when we can simply grab it's source code and start using it? The reason is Rails. Rails provides developers with a way to do things in a systematic way and that's part of the beauty that separates it from other frameworks. By developing a gem, we will no longer have to ask the developer to manually write JavaScript code. Instead, our gem will do the right thing automatically, thus saving developer time.

]]>https://www.sitepoint.com/create-ruby-gem-jquery-plugin-basics/feed/6PHP Streaming and Output Buffering Explainedhttps://www.sitepoint.com/php-streaming-output-buffering-explained/
https://www.sitepoint.com/php-streaming-output-buffering-explained/#commentsWed, 03 Sep 2014 16:00:30 +0000http://www.sitepoint.com/?p=88719Recently, Rails launched a feature called Streaming. Even though streaming is not a new concept, having it built into the framework to let developers build rapidly responding applications easily is definitely a huge step. As a PHP developer, I was wondering whether we can have something similar in our favorite language? The answer is yes - we can easily have streaming in PHP applications with little effort, but in order to get this right we have to become familiar with some underlying concepts.

In this article, we will see what streaming is, what output_buffering is and how to get our desired result under different webservers (Apache, Nginx) and PHP configurations (CGI, mod_php, FastCGI).

Streaming and Output Buffering

Streaming

Streaming in web refers to the mechanism of sending responses in chunks rather than sending them at once. In the traditional HTTP request / response cycle, a response is not transferred to the browser until it is fully prepared which makes users wait. This limitation is a remnant of the weak software and hardware of the past, but everything has changed a lot since then. Network systems and browsers are now powerful enough to handle transmission of content in a fast and efficient way. Imagine trying to watch a video and not being able to watch it until it’s fully downloaded into the player’s buffer. With the help of streaming, we can watch videos or listen to our favorite music quite efficiently as content is being loaded instantly while the rest of the data is being downloaded behind the scenes.

Streaming seems ideal for giving users the perception that a web-app is loading fast. Streaming of HTTP responses, however, is quite different from streaming of media content. Streaming of HTTP responses simply means sending a response in fixed or variable size chunks to the browser while the webserver is preparing the remainder. For example, you want to display a list of Hollywood movies on a single page. If you prepare the full response first and then send it to browser, the end-user will definitely feel the delay. But if you send 100 movies in one chunk and display them in the browser while you are preparing the HTML for the next 100 movies, the content will feel like it’s loading quite fast.

HTTP responses don’t consist just of renderable items - there are plenty of other things such as response status code, HTTP headers, cookies etc. that are essential parts of a response, but go unnoticed by end-users because they’re never rendered. Without them, our content has no meaning at all. Instead of letting users wait, the bigger sites send the non-renderable information to the browser and once the browser starts receiving it, it starts rotating the loading indicator you’ve almost certainly seen when on slower connections. Stylesheet and JavaScript files remain unchanged for most of the time, so many sites also send them along with non-renderable content chunks, so that the browser starts fetching and executing them while the rest of the response is being prepared. This is quite a powerful technique for creating the illusion of speed. When the content of the body tag is generated, it is sent to the browser, and that content can be sent in chunks again, further propagating the illusion of speed.

]]>https://www.sitepoint.com/php-streaming-output-buffering-explained/feed/19Sprockets Dissected: Rack and Middlewarehttps://www.sitepoint.com/sprockets-dissected-rack-middleware/
https://www.sitepoint.com/sprockets-dissected-rack-middleware/#respondMon, 19 May 2014 14:00:49 +0000http://www.sitepoint.com/?p=81413In a previous article I explain how asset tags are inserted into HTML by Rails and Sprockets. Inserting asset tags into the HTML is the first step towards serving assets. In this post, I continue the journey, answering the remaining questions:

]]>https://www.sitepoint.com/sprockets-dissected-rack-middleware/feed/0Sprockets Dissected: Asset Tagshttps://www.sitepoint.com/sprockets-dissected-asset-tags/
https://www.sitepoint.com/sprockets-dissected-asset-tags/#respondMon, 12 May 2014 14:00:01 +0000http://www.sitepoint.com/?p=81021There is another component of Rails that is widely being used outside of Rails: the Asset Pipeline or, technically speaking, Sprockets. Sprockets is a Ruby gem developed by Sam Stephenson that provides support for asset compilation, asset minification, asset serving, and much more. In this article, we will discuss how Rails serves assets using Sprockets.

]]>https://www.sitepoint.com/sprockets-dissected-asset-tags/feed/0How Asset Precompile Works, Part IIhttps://www.sitepoint.com/asset-precompile-works-part-ii/
https://www.sitepoint.com/asset-precompile-works-part-ii/#respondThu, 26 Dec 2013 14:30:53 +0000http://www.sitepoint.com/?p=74636This is part 2 of How Asset Precompile works in Rails. In part 1 we started digging into Rails built-in support of packaging assets, how it compiles static assets (images), and how a digest is generated based on their content etc. This article contains a bit more in-depth coverage of the Rails asset pipeline. Types […]

]]>https://www.sitepoint.com/asset-precompile-works-part-ii/feed/0How Asset Precompile Works, Part Ihttps://www.sitepoint.com/asset-precompile-works-part/
https://www.sitepoint.com/asset-precompile-works-part/#commentsMon, 23 Dec 2013 14:30:27 +0000http://www.sitepoint.com/?p=74631Web applications are becoming faster and faster by each passing day. One of the most important features to keep users coming back is speed. If a web application is slow and takes too much time to load, then it will lose it’s users. If a web application is fast then its users will increase. Developing […]

]]>https://www.sitepoint.com/asset-precompile-works-part/feed/5Threads in Rubyhttps://www.sitepoint.com/threads-ruby/
https://www.sitepoint.com/threads-ruby/#respondMon, 14 Oct 2013 13:30:39 +0000http://www.sitepoint.com/?p=71564Ruby has many cool features which attract developers, such as the ability to create classes at runtime, alter behavior of any particular object, monitor the number of classes in memory using ObjectSpace, and an extensive list of test-suites. All these things make a developer’s life easier. Today we will discuss one of the most fundamental […]