Aug 31, 2016

A Better Method for Embedding YouTube Videos on your Website

It is easy to embed a YouTube video but you’ll be surprised to know how much extra weight that embedded YouTube video can add to your web pages. The browser has to download about half a Mb of extra JavaScript files (see screenshot) for rendering the YouTube video player alone. And these files are downloaded even if the visitor never plays the embedded video.

The embedded video not only increases the byte size of your web pages but the browser has to make multiple HTTP requests to render the video player. This increases the overall loading time of your page thus affecting the page speed score. The other drawback with the default YouTube embed code is that it isn’t responsive. If people view your website on a mobile phone, the video player may not resize properly for the small screen.

Embed YouTube Videos without Increasing Page Size

Google+ uses a clever technique for embedding YouTube videos – it just embeds the thumbnail image of a YouTube video and the actual video player is loaded only when the user manually clicks the thumbnail.

YouTube thumbnail images are about 15 kB in size so we are able to reduce the byte size of web pages by 500+ kb. That’s huge!

The video above is embedded using the same on-demand technique (demo).

When a visitor clicks the play button, the thumbnail image is replaced with the standard YouTube video player with autoplay set to 1 so the plays the video instantly. The advantage is that the extra YouTube JavaScript gets loaded only when someone decides to watch the embedded video and not otherwise.

Light and Responsive YouTube Embeds

The standard embed code for YouTube uses the IFRAME tag and the width and height of the video player are hard-coded thus making the player non-responsive.

The new on-demand embed code for YouTube is slightly different. You need not specify the player size as we are now embedding the video responsively. Also, the IFRAME is replaced with a DIV tag and the IFRAME is added to the page only when the visitor clicks the play button.

YouTube Embed Code

Embed YouTube Videos Responsively – Tutorial

Copy-paste the following snippet anywhere in your web page where you would like the YouTube video to appear. Remember to replace VIDEO_ID with the actual ID of the YouTube video.

<div class="youtube-player" data-id="VIDEO_ID"></div>

We will not assign height and width since the video player will automatically occupy the width of the parent while the height is auto-calculated. You can paste multiple DIV blocks with different video IDs if you need to embed multiple videos on the same page.

Next, place the JavaScript anywhere in your web template. It finds all embedded videos on a web page and then replaces the DIV elements with the video thumbnails.

<script>

    /* Light YouTube Embeds by @labnol */
    /* Web: http://ift.tt/2bGFoam */

    document.addEventListener("DOMContentLoaded",
        function() {
            var div, n,
                v = document.getElementsByClassName("youtube-player");
            for (n = 0; n < v.length; n++) {
                div = document.createElement("div");
                div.setAttribute("data-id", v[n].dataset.id);
                div.innerHTML = labnolThumb(v[n].dataset.id);
                div.onclick = labnolIframe;
                v[n].appendChild(div);
            }
        });

    function labnolThumb(id) {
        var thumb = '<img src="http://ift.tt/2bGFpex;,
            play = '<div class="play"></div>';
        return thumb.replace("ID", id) + play;
    }

    function labnolIframe() {
        var iframe = document.createElement("iframe");
        var embed = "https://www.youtube.com/embed/ID?autoplay=1";
        iframe.setAttribute("src", embed.replace("ID", this.dataset.id);
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("allowfullscreen", "1");
        this.parentNode.replaceChild(iframe, this);
    }

</script>

Finally, paste the CSS before the closing head tag of your web template.

This method will reduce the size of your web pages by 500 KB while making your site mobile friendly. You may refer to the annotated code to understanding how on-demand embedding works.

<style>
    .youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        margin: 5px;
    }
    
    .youtube-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }
    
    .youtube-player img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }
    
    .youtube-player img:hover {
        -webkit-filter: brightness(75%);
    }
    
    .youtube-player .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("//i.imgur.com/TxzC70f.png") no-repeat;
        cursor: pointer;
    }

</style>

Please do note that Chrome and Safari browsers on iPhone and Android only allow playback of HTML5 video when initiated by a user interaction. They block embedded media from automatic playback to prevent unsolicited downloads over cellular networks.

YouTube Embed Tutorials

  1. Embed a YouTube Video with Sound Muted
  2. Place YouTube Video as your Webpage Background
  3. Embed Just a Portion of a YouTube Video

The story, A Better Method for Embedding YouTube Videos on your Website, was originally published at Digital Inspiration by Amit Agarwal on 31/08/2016 under Embed, YouTube, Internet.

via Digital Inspiration Technology Blog http://ift.tt/10LvFUi

Aug 30, 2016

How to Create Forms that allow File Uploads

Google Forms are probably the best service for creating online forms but they miss a few key features found in commercial web form builders. Google Forms do not allow file uploads, there’s no option for adding CAPTCHA in forms to prevent spam and, what may be of interest to the legal and retail industry, Google Forms cannot capture electronic signatures.

A school teacher may want a Google Form where students can upload assignments and the files are automatically saved to her Google Drive but in separate student folders. A company may want to build an online form where job applicants can upload their resumes in PDF or Word format. You cannot upload file attachments in Google Forms but there’s a workaround.

google-forms-file-uploads.png

Form with File Uploads – Demo | Buy License

Open this sample web form and you’ll find that it has all the fields found  in native Google Forms but a few extra ones. There’s a file upload button (demo), an area for visitors to e-sign the form (demo) and a CAPTCHA.

The form looks exactly like a Google Form and when you press the submit button, the files are sent to the form owner’s Google Drive while the entered data is saved in a Google Spreadsheet.

The form is integrated with Google Analytics so you can also track how many people opened your form, what browser they used and more. You can even choose to receive email notifications when people submit the form.

Add File Uploads to Forms with Google Script

The forms are built using Google Apps Script and you too can build one in minutes with absolutely zero coding. Watch the video tutorial to get started.

You’ll need to buy a license to use the form upload script.

Configure & Install your File Upload Form

The first step is to create the form. If you know a bit of HTML, you can design the form yourself or use forms.studio. This is WYSIWYG form builder where you can drag and drop fields to build your form. Save the form and copy the embed code to your clipboard.

Now that you have the form code ready, you need to configure the Google Spreadsheet that will store your form responses.

Open your Google Spreadsheet and go to Tools -> Script Editor. Click the forms.html file and paste the form embed code. Save the file.

  1. Go to Resources -> Developer Console Project and enable the Google Picker API. This will allow the form visitors to upload files directly to your Google Drive.
  2. Open the install.gs file and specify the Drive folder where files would be stored, your time zone and the email address.
  3. Go to Run -> Install to apply your configuration. You may have to authorize the first time you install the Google script.
  4. Go to Publish -> Deploy as Web App, choose Me form Execute the app as and choose Anonymous under Who has access to the web app.

deploy-google-form.png

We are almost done.

Click the Deploy button and you’ll be presented with the public URL of your form. You can use Gmail Mail Merge to send the form to all your contacts in a personalized email.

Things to Know – File Upload Forms

  • If you wish to restrict the forms to users inside your Google Apps organization, choose your domain under Who has access to the app.
  • Unlike Google Forms, file upload forms cannot be embedded on other websites due to some restrictions around web apps made with Google Scripts.
  • If you later change any parameters in the install.gs file, you need to go to Run->Install to apply the new configuration.
  • To stop accepting new responses, go to Publish -> Deploy as web app menu and click the Disable link. Or change the Who has access option to Myself.

The story, How to Create Forms that allow File Uploads, was originally published at Digital Inspiration by Amit Agarwal on 30/08/2016 under Google Drive, Google Forms, Internet.

via Digital Inspiration Technology Blog http://ift.tt/2bGLlWj

Multiload-ng 1.2.0 Released With Color Schemes Support, More

Multiload-ng, a graphical system monitor for Xfce, LXDE, and MATE panels, was updated to version 1.2.0 recently, getting color schemes support, a redesigned preferences window, and more.

Multiload-ng

The latest Multiload-ng 1.2.0 includes color schemes support, and ships with 18 buil-in color schemes, including Solarized Light and Dark, Ubuntu Ambiance and Radiance, Linux Mint, Arc, Numix Dark and Light, and more. Here are a few of these color schemes in action:

Multiload-ng

Multiload-ng

Multiload-ng


Other changes in Multiload-ng 1.2.0:
  • redesigned preferences window;
  • each graph can now have its own custom size, tooltip style, update interval, and double click action;
  • the double click action can now parse arguments;
  • fixed temperature graph behavior under some circumstances;
  • fixed LXDE panel applet not saving settings on some occasions;
  • minor UI improvements;
  • various other fixes and new supported languages (French, German, and Russian).

Here's the new preferences window:

Multiload-ng

Multiload-ng

The latest Multiload-ng 1.2.0 also includes an experimental Unity AppIndicator. I didn't enable it for the PPA packages yet since this is still experimental - I'll enable it once it's considered stable -, but you can use it if you build Multiload-ng yourself.

Also, since our initial article, Multiload-ng has seen yet another release, which brought GTK3 support for all Multiload-ng applets. Since Ubuntu MATE 16.10 includes MATE built with GTK3, I built the Multiload-ng MATE panel applet for 16.10 with GTK3. The other applets are built with GTK2.

Here's the Multiload-ng MATE applet built with GTK3 running under Ubuntu MATE 16.10 Yakkety Yak:

Multiload-ng


Install Multiload-ng


Arch Linux users can install Multiload-ng via AUR: stable | git.

Note that Multiload-ng can't be built on Lubuntu 14.04 due to its dependencies.

Multiload-ng is available in the main WebUpd8 PPA. To add the PPA and update the software sources, use the following commands:
sudo add-apt-repository ppa:nilarimogard/webupd8
sudo apt update
Then, install the applet using the following command:
- for MATE (Ubuntu MATE, Linux Mint MATE):
sudo apt install mate-multiload-ng-applet
- for Xfce (Xubuntu, Linux Mint Xfce):
sudo apt install xfce4-multiload-ng-plugin
- for LXDE (Lubuntu; not available for Lubuntu 14.04):
sudo apt install lxpanel-multiload-ng-plugin
- standalone app:
sudo apt install multiload-ng-standalone

After installing the applet, add it to the panel for your desktop environment, like any other applet. 

In LXDE, you'll need to restart the session or the panel for Multiload-ng to show up in the panel applet list. You can restart the LXDE panel by using the following command:
lxpanelctl restart
Multiload-ng Standalone can be launched from the menu, like a regular application.

To download the source, report bugs, etc., see the Multiload-ng GitHub page.


via Web Upd8 - Ubuntu / Linux blog http://ift.tt/2bP2Nv9

How To Install And Configure Bumblebee In Ubuntu 16.04 (With Nvidia-361 Or Nvidia-370)

Bumblebee logo


The Bumblebee package available in the official Ubuntu 16.04 repositories needs a tweak to work with Nvidia 361 graphics drivers. Furthermore, if you want to use a newer Nvidia graphics drivers version, such as 370, the discrete card is not turned off, resulting in it being used all the time, and not just when running apps or games with "optirun", as it should.

So here's how to properly install and configure Bumblebee in Ubuntu 16.04, to get it to work with nvidia-361 and nvidia-370 (the latter from the Graphics Drivers PPA).

Bumblebee is a daemon for managing Optimus hybrid graphics chipsets. It allows running applications and games using the discrete GPU (on demand - e.g. using "optirun some-game").

Ubuntu already provides a way of switching between Intel and Nvidia GPUs, by using Nvidia Prime (with Nvidia Prime installed, you can select which GPU to use from Nvidia Settings > PRIME Profiles), but this sets the GPU for the whole desktop, and not just for specific applications and games. For instance, if you select Nvidia, the desktop and every application you run will use the Nvidia GPU.

For some (like me), using the whole desktop on the Nvidia GPU can cause excessive heating, making Bumblebee a better option for running games.


Install and configure Bumblebee in Ubuntu 16.04


Please read the whole article very carefully, and follow the instructions exactly as mentioned in this article. Misconfiguring Bumblebee can have results the desktop not loading, or the display manager not showing up, and you'll have to recover from this via TTY. So use this at your own risk and only if you know how to debug it and recover from any issues that may occur!

The instructions below assume you've already installed some Nvidia graphics drivers (nvidia-361 or nvidia-370). 

I tested this on a Dell XPS L702x laptop running Ubuntu (w/ Unity) 16.04, with nvidia-361 from the official repositories (and Bumblebee from the official repositories), and with nvidia-370 from the Graphics Drivers PPA (with Bumblebee from the Bumblebee Development PPA).


1. Install Nvidia Prime and set it to "intel"

In my test under Ubuntu 16.04, not having Nvidia Prime installed and set to "intel" results in an xorg.conf file being created under /etc/X11/ upon each reboot (or LightDM restart), which causes a black login screen.

To install nvidia-prime and set it to use the Intel graphics card, use the following commands:
sudo apt install nvidia-prime
sudo prime-select intel

Do not use Nvidia Settings to set the Prime PROFILES to Nvidia, because it will cause issues after a reboot (in my test, it causes a black login screen)!

2. Install Bumblebee

In my test, I needed to edit a configuration file to get Bumblebee from the official repositories to work with nvidia-361 drivers (step 3).

For nvidia-370 from the Graphics Drivers PPA however, the Nvidia graphics card wasn't turned off (this can be checked with "cat /proc/acpi/bbswitch" - it should say "off" when no app is using the Nvidia graphics card, e.g. if you didn't run any app or game using "optirun") and I was unable to find a workaround for this.

I did get it to work though, by installing Bumblebee from its development PPA. So to get Bumblebee to work properly with nvidia-370 in Ubuntu 16.04, you'll need to install Bumblebee from THIS PPA.

If you want to use Bumblebee with nvidia-361, install Bumblebee from the official Ubuntu 16.04 repositories:
sudo apt install bumblebee

To get Bumblebee to work with nvidia-370, install it from the Bumblebee Development PPA (read the PPA description before adding it!):
sudo add-apt-repository ppa:bumblebee/testing
sudo apt update
sudo apt install bumblebee

3. Blacklist the the Nvidia driver you're using by adding it to /etc/modprobe.d/bumblebee.conf (bit via AskUbuntu)

Open /etc/modprobe.d/bumblebee.conf with a text editor (as root) - I'll use Gedit below:
gksu gedit /etc/modprobe.d/bumblebee.conf
And at the end of the file, add the following:

- for nvidia-361 (assuming you've installed Bumblebee from the official repositories; the Bumblebee package in the Bumblebee Development PPA already has this):
# 361
blacklist nvidia-361
blacklist nvidia-361-updates
blacklist nvidia-experimental-361
- for nvidia-370 (from the Graphics Drivers PPA):
# 370
blacklist nvidia-370
blacklist nvidia-370-updates
blacklist nvidia-experimental-370
... and save the file.

Important: if later on you install some newer Nvidia graphics drivers (e.g. nvidia-371, nvidia-372, etc.), you'll need to add them to /etc/modprobe.d/bumblebee.conf, in the same way as explained above, but for the new driver version.

4. Configure Bumblebee

Open the Bumblebee configuration file with a text editor (as root) - I'll use Gedit for the command below:
gksu gedit /etc/bumblebee/bumblebee.conf
... and in this file, change the following options so they look like below:

- for nvidia-361:
  • Driver=nvidia
  • KernelDriver=nvidia-361
  • LibraryPath=/usr/lib/nvidia-361:/usr/lib32/nvidia-361
  • XorgModulePath=/usr/lib/nvidia-361/xorg,/usr/lib/xorg/modules

- for nvidia-370:
  • Driver=nvidia
  • KernelDriver=nvidia-370
  • LibraryPath=/usr/lib/nvidia-370:/usr/lib32/nvidia-370
  • XorgModulePath=/usr/lib/nvidia-370/xorg,/usr/lib/xorg/modules

... and save the file.

Important: just like step 2, if later on you install some newer Nvidia graphics drivers (e.g. nvidia-371, nvidia-372, etc.), you'll need to change all "nvidia-xxx" occurances in /etc/bumblebee/bumblebee.conf with the new driver.

5. Reboot

That's it. After rebooting, the "cat /proc/acpi/bbswitch" command should display "OFF" as ouput, meaning that the discrete card is turned off by default.

To try out Bumblebee, use "optirun some_app_or_game". To configure the Nvidia settings for Bumblebee, launch the settings using the following command:
optirun -b none /usr/bin/nvidia-settings  -c :8

I should also mention that if you later want to remove Bumblebee, make sure to purge it ("sudo apt purge bumblebee"), to make sure its configuration files are removed, or else you'll experience issues, like the Nvidia drivers remaining blacklisted.

If you encounter issues, see the DEBIAN.readme file (/usr/share/doc/bumblebee/README.Debian on Debian/Ubuntu systems with Bumblebee installed) which explains some possible solutions, as well as the Bumblebee wiki.


via Web Upd8 - Ubuntu / Linux blog http://ift.tt/2bC3zqf

Aug 24, 2016

MATE Dock Applet Gets Unity-Like Progress Bar And Badge Support

MATE Dock Applet is a MATE Panel applet that displays running application windows as icons. The applet features options to pin applications to the dock, supports multiple workspaces, and can be added to any MATE Panel, regardless of size and orientation.

Mate Dock Applet Unity Badge Progress Bar Support

The latest MATE Dock Applet 0.74, released today, includes a feature requested by some of you: it can now display Unity-like progress bars and badges on top of the icons, for applications that support this. You can see this in action, in the screenshot above, for Transmission. 

Transmission doesn't come with Unity Launcher badge/progress bar support by default - if you want this feature for Transmission, see THIS article.

Other changes in MATE Dock Applet 0.74 include:
  • corrected position of window lists on non-expanded panels;
  • fixed window list flickering on bottom aligned panels on MATE built with GTK3;
  • increased the delay before window lists are shown when the mouse hovers over an app icon. It was 0.5 seconds, and is now 1 second;
  • fixed a bug that would cause Pin/Unpin actions to act upon previously highlighted app icons, rather than the one that is currently highlighted;
  • shortened pin/unpin window list text. It now says "Pin" rather than "Pin to the dock", and the Unpin text is similarly shortened;
  • when starting to drag an app icon, the window list is now hidden (note: MATE Dock Applet supports drag and drop for moving dock icons only if it's built with GTK3, like for Ubuntu MATE 16.10 Yakkety Yak, in both the official repositories and WebUpd8 MATE PPA).

Important: For window minimizing and maximizing to work correctly under Compiz, the Focus Prevention Level setting must be set to off (this can be done from CompizConfig Settings Manager, under General Options > Focus & Raise Behaviour).


Install MATE Dock Applet


MATE Dock Applet is available in the official Ubuntu MATE 16.04 and 16.10 repositories, but it's usually older than the version available in the WebUpd8 MATE (and Xfce) PPA. To install it from the official repositories, use:
sudo apt install mate-dock-applet

You can install the latest MATE Dock Applet in Ubuntu MATE or Linux Mint MATE by using the WebUpd8 MATE (and Xfce) PPA. To add the PPA and install MATE Dock Applet, use the following commands:
sudo add-apt-repository ppa:webupd8team/mate
sudo apt update
sudo apt install mate-dock-applet

The Ubuntu MATE 16.10 is not yet ready, because Launchapd is slow at building PPA packages today (it should be available in a few hours, hopefully).

For other Linux distributions, see the MATE Dock Applet installation page.


via Web Upd8 - Ubuntu / Linux blog http://ift.tt/2bipGXc