22 February 2016

How to Make Org Charts with Google Sheets


Do you need a quick organization chart to show the hierarchy of employees in your business? Well, just open a blank Google Spreadsheet, put the employee names in a column and your org charge should be ready in minutes. Here’s a sample org chart created with nothing but Google Sheets.

Org Charts with Google Sheets

Create Organizational Charts with Google Spreadsheets

Here’s how you can put together an org chart in Google Sheets. It will be a live chart meaning as you update the employee names or hierarchy in the spreadsheet, the org chart would update itself. Let’s get started.

Step 1. Open a Google Sheet and put the employee names in column A and the names of the immediate managers in Column B.

Step 2. Select the cells that you’ve just entered and choose Chart from the Insert menu in the spreadsheet.

Step 3. The Chart Editor will open inside Google Sheets. Switch to the Chart Types tab and uncheck the option that says “Aggregate Column A.” Then scroll down the list of available chart types, choose “Organizational Chart” and click Insert to add the chart into your spreadsheet.

Organization Charts

Unlike flowcharting tools like Visio, you don’t have enough formatting options for org charts in Google Sheets except for changing the background and fill colors of various nodes in the chart. And if you hit the little drop-down arrow in the chart box, you’ll see an option to download the charge as a PNG image for embedding on other websites.


The story, How to Make Org Charts with Google Sheets, was originally published at Digital Inspiration by Amit Agarwal on 22/02/2016 under Charts, Google Docs, Internet.

How to Use Github for Hosting Files


Github, in simple English, is a website for hosting source code. The site is built for programmers and, if you are not one, it is highly unlikely that you have ever used Github. Repositories and Forks, the basic building blocks of Github, may seem like second-nature to developers but, for everyone else, Github continues to be a complicated beast.

Github isn’t just a place for developers though. The site can be used a writing platform. It can host HTML websites. You can use Github to visually compare the content of two text files. The site’s Gist service can used for anonymous publishing and as a tasklist. There’re so many things do on Github already and you can how use it as a free file hosting service as well.

How to Host Files on Github

It takes few easy steps to turn your Github into a file repository. You can upload files from the browser and you can add collaborators so they can also upload files to a common repository (similar to shared folders in Google Drive). The files are public so anyone can download them with a direct link. The one limitation is that the individual files cannot be larger than 25 MB each. There are no known bandwidth limits though.

Step 1: Go to github.com and sign-up for a free account, if you don’t have one. Choose the free plan as that’s all we need for hosting our files.

Step 2: Click the “New Repository” button, or go to github.com/new, to create a new repository for hosting your files. You can think of a repository as a folder on your computer.

Github for File Hosting
Step 3: Give your repository a name and a description and click the Create button. It helps to have a description as it will help others discover your files on the web. You can have Private repositories too but that requires a monthly subscription.

Step 4: Your repository will initially be empty. click the Import Code button on the next screen to initialize the repository.

Import code into Github
Step 5: Paste the URL http://ift.tt/1OpAlq3 into the repository field and click Begin Import to create your Github repository for hosting files.

Upload Files to Github

Your Github repository is now ready. Click the Upload Files files button and begin uploading files. You can drag one or more files from the desktop and then click Commit Changes to publish the files on the web. Github will accept any file as long as the size is within the 25 MB limit.

Github has a built-in previewer for PDF, text and image files (including animated GIFs) so anyone can view them without downloading the actual file. Else there’s a simple URL hack to get the raw (downloadable) version of any file hosted on Github.

Upload Files to Github

Direct URLs for Github Files

After the file has been uploaded to Github, click the filename in the list and you’ll get the file’s URL in the browser’s address. Append ?raw=true to the URL and you get a downloadable / embeddable version.

For instance, if the file URL is http://ift.tt/1OpAn0V, the direct link to the same file would be http://ift.tt/1KDmLEG. If the uploaded file is an image, you can even embed it in your website using the standard img tag.

Here’s a sample file repository on Github. The T-Rex image is here and the direct link is here. You can go to the Repository settings and add one or more collaborators. They’ll get write access to your repository and can then add or delete files.


The story, How to Use Github for Hosting Files, was originally published at Digital Inspiration by Amit Agarwal on 22/02/2016 under Embed, Upload, Internet.

19 February 2016

How to Add Speech Recognition to your Website


Open the Google website on your desktop computer and you’ll find a little microphone icon embedded inside the search box. Click the icon, say something and your voice is quickly transcribed into words. Unlike earlier speech recognition products, you no longer have to train the browser to understand your speech and, for those who don’t know touch typing, speech is often a faster mode of input than the keyboard.

Sounds like magic, right? Well, did you know that you can also include similar speech recognition capabilities to your own website with a few lines of code. Visitors can search your website, or even fill forms, using just their voice. Both Google Chrome and Firefox browsers support the speech recognition API.

Web Speech Recognition

Before we dive into the actual implementation, let’s play with a working demo. If you are viewing this page inside Google Chrome (desktop or mobile), click the voice icon inside the search box and say a search query. You may have allow the browser to access your microphone. When you are done speaking, the search results page will open automatically.

Add Voice Recognition to your Website

The HTML5 Web Speech API has been around for few years now but it takes slightly more work now to include it in your website.

Earlier, you could add the attribute x-webkit-speech to any form input field and it would become voice capable. The x-webkit-speech attribute has however been deprecated and you are now required to use the JavaScript API to include speech recognition. Here’s the updated code:

<!-- CSS Styles -->
<style>
  .speech {border: 1px solid #DDD; width: 300px; padding: 0; margin: 0}
  .speech input {border: 0; width: 240px; display: inline-block; height: 30px;}
  .speech img {float: right; width: 40px }
</style>

<!-- Search Form -->
<form id="labnol" method="get" action="http://ift.tt/1gKlIhB;
  <div class="speech">
    <input type="text" name="q" id="transcript" placeholder="Speak" />
    <img onclick="startDictation()" src="//i.imgur.com/cHidSVu.gif" />
  </div>
</form>

<!-- HTML5 Speech Recognition API -->
<script>
  function startDictation() {

    if (window.hasOwnProperty('webkitSpeechRecognition')) {

      var recognition = new webkitSpeechRecognition();

      recognition.continuous = false;
      recognition.interimResults = false;

      recognition.lang = "en-US";
      recognition.start();

      recognition.onresult = function(e) {
        document.getElementById('transcript').value
                                 = e.results[0][0].transcript;
        recognition.stop();
        document.getElementById('labnol').submit();
      };

      recognition.onerror = function(e) {
        recognition.stop();
      }

    }
  }
</script>

We have the CSS to place the microphone image inside the input box, the form code containing the input button and the JavaScript that does all the heavy work.

When the user click the mic image inside the search box, the JavaScript checks if the user’s browser supports speech recognition. If so, it waits for the transcribed text to arrive from Google servers and then submits the form.

The Dictation App also uses the speech recognition API though it writes the transcribed text to textarea field instead of an input box.

Some notes:

  1. If the HTML form / search box is embedded inside an HTTPS website, the browser will not repeatedly ask for permission to use the microphone.
  2. You can change the value of the recognition.lang property from ‘en-US’ to another language (like hi-In for Hindi or fr-FR for Français). See the complete list of supported languages.

The story, How to Add Speech Recognition to your Website, was originally published at Digital Inspiration by Amit Agarwal on 19/02/2016 under Speech Recognition, Software.

18 February 2016

Export Google Fit Data


Google Takeout has recently added support for exporting Google Fit data. You'll be able to download some CSV and TCX files that include your activities and daly aggregations.

* TCX (Training Center XML) is a common file format for fitness activity data that can be imported to many fitness tracking tools such as Garmin Connect and Strava. By default, Fit samples location data with low accuracy and frequency to reduce device battery consumption. These Activities are exported into the Low Accuracy folder. Activities recorded with Fit's active mode will contain more detailed location paths and more accurate data.

* CSV files are easily read by spreadsheet software or parsed programmatically but may not be easy to import into fitness tracking software.




Gmailify


Gmail's app for Android is more than a mobile app for Gmail, it's also a general-purpose mail client. You can add IMAP, POP3 or Exchange accounts and use the Gmail app to read, compose and organize your mail. Now Google added the option to Gmailify your email accounts, which means bringing Gmail features without having to switch to a Gmail account.

"Gmailify links your existing account to Gmail so that you get all the bells and whistles — spam protection, inbox organization and even Google Now cards based on your mail — without having to leave your current address behind. All you need to do is open the Gmail app, sign in to your email account(s), and enable Gmailify," informs Google.


Which features are available? Spam protection, automatic categorization, labels, better search with support for advanced search operators, travel and hotel reservations appearing automatically in Google Now, better mobile notifications and all the other Gmail features.

How does it work? You can link your non-Gmail address (Yahoo Mail, Outlook.com, AOL Mail, etc.) to an existing Gmail account or to a new Gmail account. "When you sign in to the linked Gmail address, you'll see your messages from the other email provider in your mailbox. You'll be able to read, reply, and organize them just like you do in Gmail." The Gmail app keeps everything in sync, so a read email will be marked as read in the original account, archived messages will be added to a new Archive folder, while Gmail labels will be treated like folders.


12 February 2016

Google Tweaks Mobile Search UI


Google tweaked the mobile search interface. There's now a menu that lets you view the original image, open the list of saved images, search by image and send feedback. There's also a redundant "visit page" link below the image.


Google brought back the title of the page and that's a good thing because you can find more details about the image. Hopefully, Google will also bring back the snippets.



You can find some screenshots for the old interface in this post.

03 February 2016

How to Use Animated GIF Images as your Mac Wallpaper


You may have seen web pages with video backgrounds but did you know that it is also possible to use videos and animated GIF images as backgrounds for your Mac desktop. OS X natively supports only static wallpaper images but there’s a little Mac utility called GIFPaper that adds support for animated live backgrounds to your desktop.

Animated GIF as Mac Desktop Background

Animated GIFs as Mac Background

It takes a few easy steps to inject some life in your Mac background.

Step 1. Download a GIF image. You can use Giphy for readymade GIFs, or create your own cinemagraphs with Photoshop or, if you are trying to use a video, convert to GIF using FFMpeg.

Step 2. Download the GIFPaper app from Dropbox (link found via Reddit) and extract the content to a local folder.

Step 3. Double-click the GIFPaperPrefs.prefPane file inside the extracted folder to install the preferences pane. Go to your Mac’s System Preferences and double-click GIFPaperPref to launch the actual app.

GIF Desktop for Mac

Step 4. Browse the computer, locate the GIF, set the Scaling to “Axes Independently” and the GIF will be set as the background of your Mac desktop. If you have a multiple virtual desktops, only the current screen will be changed.

You can place add GIFPaperAgent to your Mac login items to preserve your wallpaper preferences. Also, it might not be a good idea to use animated on older Macs since it does consume system resources.


The story, How to Use Animated GIF Images as your Mac Wallpaper, was originally published at Digital Inspiration by Amit Agarwal on 03/02/2016 under Apple Mac, GIF, Internet.

The Directory of Twitter News Feeds


Twitter is the best source of news on the Internet but there’s no denying the fact that Twitter is both complex and confusing for most people. Unlike a newspaper website where you just open the homepage and read the news, you need to follow the right set of people before understanding the true potential of Twitter.

Twitter realises this problem and they are now trying to capture the audience that stumble upon Twitter just for catching up with news but may not be inclined to traverse the complex universe of Likes and RTs. Now when you open the Twitter homepage, they will show you to the top tweets across various categories without requiring you to sign up. The tweets are grouped in categories like Sports, Music, Food, etc. so it is easier than ever before to follow your interests.

Twitter News Source

See the Top Tweets for any Category

The Twitter news feeds surface the top tweets for any category but, for some unknown reason, they have made these available only to users who are not logged into Twitter.

Not a problem as here are direct URLs (links) that will help you access all the Twitter category feeds without having to log out of your Twitter account. The list covers both US and India specific Twitter news categories. You can bookmark the pages that pique your interest and access them anytime, anywhere.

Also see: The Best Twitter Tools

Twitter News Feeds (US)

General news sources Business news Journalists & pundits
World news Weather news & meteorologists Financial news & analysts
Tech blogs & reporters Tech CEOs, investors & startups Space news, Nonprofits & foundations
Designers & architects Authors, critics & publishers Photographers & photo agencies
NFL players, teams & personalities NBA players, teams & personalities College basketball teams & fans
MLB players, teams & personalities Soccer players, teams & fans NHL players, teams & personalities
NASCAR drivers & teams WWE wrestlers & personalities MMA fighters & personalities
Golfers, tours & commentators College football teams & personalities Celebrity news
TV shows & stars Actors & actresses Reality TV shows & stars
TV talent shows & contestants Industry news, film critics & festivals Video games & gamers
Science news & journalists Celebrity chefs & personalities Parenting experts & opinion
Home design & decorators Food, drinks & entertainment guides Travel guides, airlines & hotels
Health & fitness Automakers & reviewers Wedding guides
Inspiration & motivation Pop artists Hip hop \/ rap artists
Country artists Latino artists R&B soul artists
Classic rock groups Dance electronic artists Metal groups
Comedians, writers & late-night hosts Cute animals Cool & interesting photos
Art museums & publications Beauty & cosmetics brands Clothing brands & retailers
High-end fashion labels Politicians, pundits & parties US federal agencies

Twitter News Feeds (India)

Entertainment Sports Government and Politics
Music News Cricketers and Commentators
Youth and Music Women Comedy and Humour
South Indian NGOs and Social Good CEOs
Bollywood and Celebrities Food Hindi Music
Fashion Breaking News Indian Athletes
Politicians and Pol Parties Business and Financial News Punjabi Music
Government & Public Utilities Books & Authors Entertainment Channels
TV Personalities Leagues and Teams Sports News, TV and Scores
Journalists Indie & Electronic Music Brands

These semi-curated Twitter News Feeds are probably the best thing to have happened to Twitter in recent times. Content discovery has always been an issue in the world of Twitter but now you can easily find the top tweets for your favourite category without the chaos.

If you are curious to know how I found these Twitter feeds, the answer is web scraping and some trial-n-error. Also, I think Twitter is using geo-location to tailor the news feeds so if you are, say, in UK, your news feed links will be different from mine.


The story, The Directory of Twitter News Feeds, was originally published at Digital Inspiration by Amit Agarwal on 03/02/2016 under Twitter, Internet.

02 February 2016

How to Find and Replace Text in Gmail and other Web Pages


Web pages were essentially meant for reading and thus vendors never cared to include “find and replace” functionality in their web browsers. Websites have however evolved and they are no longer just blocks of static content. You can write lengthy emails or even dictate text inside web pages but if you are to fix those embarrassing spelling mistakes, you’ll have to correct them one-by-one.

You cannot automatically replace a word or phrase with another inside a web page without using browser extensions. The following tutorial discusses a simple technique that will help you search and replace text in web pages using the built-in Chrome Developer Tools but without any extensions.

Also see: How to Edit Web Pages

Search and Replace for any Webpage

We’ll take a popular Wikipedia page for this example and show you how to replace all instances of one word with another.

While you are on the web page, press Ctrl+Shift+J on Windows or Cmd+Opt+J on Mac to open the Console window inside Chrome Developer tools. Now enter the following command to replace all occurrences of the word ABC with XYZ.

document.body.innerHTML = document.body.innerHTML.replace(/ABC/g, "XYZ")

You can use Regular Expressions for more complex substitutions. For instance, if you wish to replace all common misspellings of occurrence, you could use either of these:

 document.body.innerHTML.replace(/(ocurrance|occurrance|occurance)/g, "occurrence")
 document.body.innerHTML.replace(/oc[\w]+nce/g, "occurrence")

The same technique can be used to format words inside a page as well. For instance, the next command will bold all instances of the word Hello on a page.

 document.body.innerHTML.replace(/Hello/g, "<b>Hello</b>")

Search and Replace Text in Gmail

Your changes aren’t preserved when you close the browser tab so you could be wondering why would anyone perform search and replace on a web page? Well, take the case of Gmail. You may have written a lengthy email but just when you were about to hit Send, you come across some spelling errors.

To fix the errors in Gmail, you can either copy the email message into notepad, perform search and replace and then paste the edited text back into Gmail. Or you can directly use Chrome Dev Tools.

In our previous example, we performed search and replace on document.body which in the entire web pages. However, in Gmail, we only need to replace text that’s inside the compose window.

The first step is to find the element on page where the search & replace should be done. This is easy as shown in the video above. Select the Gmail text, right-click and choose Inspect Element and make a note of the DIV ID that contains the editable textarea. It is “:h7” for Gmail.

Now all we need to is run the substitution command inside the Console window to replace word ABC with XYZ everywhere.

document.getElementById(':h7').innerHTML = 
  document.getElementById(':h7').innerHTML.replace(/ABC/g, "XYZ");

And your changes won’t be lost as Gmail will auto-save your Draft.

Also see: How to Learn Coding Online


The story, How to Find and Replace Text in Gmail and other Web Pages, was originally published at Digital Inspiration by Amit Agarwal on 01/02/2016 under GMail, Google Chrome, Internet.

01 February 2016

Access your Passwords from Anywhere with Google Password Manager


Google Chrome has a built-in password manager that offers to save your username and password whenever you sign-in to a website using Chrome. The stored passwords are synced with your Google Account and thus are available across all devices where you have signed in using the same Google Account.

Google Chrome is available for all platforms, including iOS and Android phones, and thus you always have access to your saved passwords. However, if you prefer using a different browser, like Safari on iPhone or Microsoft Edge on Windows 10, you can still access all your account passwords saved inside Chrome via passwords.google.com.

Google Password manager

Open the Google Passwords website, sign-in in with your existing Google Account that you are using on Chrome and you’ll find a list of every single account (and the associated password) that you’ve used to sign-in in Chrome.

The passwords are hidden with asterisks but they can be easily revealed by clicking the corresponding eye icon. You can also remove any saved password from the list but there’s no option to edit passwords.

How to Hide Your Passwords

This is another strong reason why you should to enable 2-factor authorization for your Google Account. If someone gains access to your main Google account password, they likely have access to your entire library of passwords through the Google Passwords website.

If you are not comfortable seeing your passwords inside the Google Passwords website, you have two options. Either don’t save your passwords in Chrome at all or just make them inaccessible from the Google website as explained here.

Open Google Chrome on desktop and go to Settings – Advanced Sync Settings. Alternatively, type chrome://settings/syncSetup in the browser address bar and hit Enter. Under the Encryption Options, choose “Encrypt all synced data with your own sync passphrase”, enter a passphrase and save the settings.

Disable Google Passwords

After a minute or two, your passwords will no longer be available through the Google Passwords website. If you have later change your mood, simply reset to default settings.

Also see: 10 Important Google URLs


The story, Access your Passwords from Anywhere with Google Password Manager, was originally published at Digital Inspiration by Amit Agarwal on 01/02/2016 under Google Chrome, Password, Internet.

How to Make ASCII Art with Photos on Facebook and Instagram


ASCII art was a phenomenon in the Unix days much before Emojis and GIFs took over the Internet. These are pictures drawn using the characters on a keyboard and, because everything is in plain text, you can view the ASCII image in your browser or even inside a text editor.

You don’t have to have to be an artist to create ASCII pictures. There are readymade tools to help you convert regular images into ASCII art or, if you are on Mac, just launch the terminal window and say “banner {{text}}” to convert the text into ASCII.

There’s an even better way. Upload your photograph to either Facebook or Instagram, set the privacy to public, and you’ll have an ASCII version of the picture ready instantly. Thank you @Mathias for the discovery.

Convert Photos to Text with Facebook

Step 1: Go to Facebook.com on your desktop and open any photo that has the privacy set to public. I am using a picture of the Taj Mahal by @AshuMittal for this example.

Open Facebook Image

Step 2: Right-click anywhere inside the photo and choose “Open Image in new tab” – this will open the standalone image in a new browser tab outside the Facebook website.

Step 3: Go to the browser address bar and add .html to the photo URL. Press Enter and voila! Facebook will render a HTML version of the image (see example). You can press Ctrl+S in your browser to save the HTML image to your desktop.

ASCII to HTML Image

Make ASCII Art with Instagram Photos

Instagram, which is also owned by Facebook, too supports image to text conversion. It however requires more work to get the photo URL since Instagram blocks right-click contextual menu. You can either use Chrome Developer Tools to get the URL or there’s a simple trick.

Step 1. Open any Instagram photo page. You should open the standalone photo page (like this one) and not an Instagram profile.

Step 2: Append “media” to the Instagram photo URL (example) to get the direct link to the JPG image. For instance, if the photo URL is http://ift.tt/1PPdhZ5, append /media and the URL http://ift.tt/1nyVlFc will point to the direct image.

Step 3. Once you have the direct link, append .html and the Instagram photo will be converted into colored ASCII HTML. Or append .text for plain ASCII text version of the image.

This trick will only work on “public” photos. If the URL of a photo doesn’t end with a .jpg, it is likely that the picture is not public and thus the ASCII conversion will not work. Also, the generated ASCII images are big in size (few MBs) so if you open a couple of them in your browser, it may begin crawling.


The story, How to Make ASCII Art with Photos on Facebook and Instagram, was originally published at Digital Inspiration by Amit Agarwal on 01/02/2016 under Ascii, Facebook, Instagram, Internet.