New Videos Every Day

Main menu

For the past few months, I have been on a learning spree looking to enhance my existing coding skills and also learn new programming languages and frameworks. In this process, I have watched a countless number of video tutorials and online courses that pertain to programming and, specifically, web development.

In my quest to become a better developer, I’ve come across several awesome “teachers” who aren’t just excellent programmers but awesome educators and have the art of explaining complex and difficult concepts.

Learn Modern Web Programming with the Best Online Teachers

This is an attempt to highlight the best instructors on the Internet for JavaScript, React, Redux, Node.js, Firebase (database and storage), Docker, Google Golang, Typescript, Flutter (for mobile app development), Dart, Git, Webpack and Parcel bundler.

I’ve taken courses by every single instructor mentioned here (PDF) and recommend them highly.

Google Forms are the best tool for creating online polls, surveys, quizzes, and questionnaires. The form submissions are automatically stored in Google Spreadsheets, making it easier for you to analyse the submissions, and your forms can receive an unlimited number of responses.

When a user submits your Google Form, a row is added to the destination Google Sheet with all the answers. The tutorial explains how you can save your Google Form responses in a customized PDF file in Google Drive and have it emailed automatically to one or more recipients via Gmail.

For this example, we are building an event registration form with Google Forms. The attendees fill the form, select the session(s) they wish to attend and an email confirmation is sent to them instantly. A PDF document is attached and it contains the form answers and also a dynamic QR Code that can be scanned at the event venue.

Create PDFs with Google Forms – DEMO

Before we get into the implementation details, please try the live workflow so you have a better idea of what we are building.

First, fill-in this Google Form and submit. Your form response is saved in this Google Sheet and, within a few seconds, you’ll receive a personalized email with a PDF attachment. It contains a QR code and a unique registration ID that is generated automatically with the =QRCODE() formula.

Internally, the workflow is using this Google Document to merge the Google Forms data into a PDF file. We picked PDF for this example but you can generate documents in any format including Word documents, Excel Spreadsheets, PowerPoint Slides, ePub and more.

How to Create PDF Documents with Google Form Responses

To get started, create a new Google Form and choose a destination Google Spreadsheet where the responses would get saved.

Next, create a template in either Google Docs, Google Slides or Google Sheets. In your template, the variable fields should be enclosed inside double curly braces and the field name should exactly match the question title in your Google Form.

For example, if your Google Form question is “Full Name”, the marker in your document template would be {{Full Name}} and it will be automatically replaced with the answer submitted by the form submitter.

Next, install Document Studio for Google Sheets and authorize the add-on. Now open the Google Spreadsheet that is storing your Google Form responses, go to the Add-ons menu, choose Document Studio and open the sidebar to build the workflow.

First, expand the Document Merge section and choose the document template from Google Drive that you have created in the previous step. Choose a file name of the exported file – it can be a fixed name – like event.pdf – or a dynamic name like {{full name}}.pdf where the file name is customized based on file answers.

Next, expand the Mail Merge section in Document Studio’s sidebar, turn on the “Send Emails” option and create an email template using the built-in WYSIWYG editor.

You can customize the template by adding variable placeholders, like {{First Name}}, in the email subject and message body for personalized emails. Choose the field where you asking for the submitter’s email address to send them an email when they submit the form. You can add more emails (comma-separated) in the “Email Specific People” to notify more people when forms are submitted.

If you would like to add markers to the merged document that aren’t present in the Google Form, you can use the help of Google Sheets array formulas.

For instance, if your Google Form question is Full Name, you can add a new column in the Google Sheet for First Name and use the following formula to automatically get the first name from Google Form submissions that can be used in the email and document template.

Finally, expand the “Finish and Merge” section and check the option Merge on Form Submit. Click Save to turn the workflow and submit a test entry in your Google Form.

You should find a personalized email with the merged document as a PDF attachment in your Gmail sent items. A copy of the PDF file is saved in your Google Drive that you can use to automatically print the Google Form response via Google Cloud Print.

You’ve sent an important email to a colleague but it is lost in the deluge of emails they receive every day, buried and forgotten. They can obviously use Gmail search operators, like FROM: or SUBJECT:, to locate that email later but wouldn’t it be useful if there were a way to directly locate that one missing email in their mailbox.

Well, there’s an alternate search trick and the sender can actually help the recipient find any specific email message that they have sent in the past.

When you send an email through Gmail, a unique Message ID is added to the email header as per the RFC 822 specification. To know the ID of your message, open the email inside Gmail, go to 3-dot menu and choose Show Original. The Message-ID will be displayed in the first line of the header as shown the screenshot.

The Message ID of a particular email message is exactly the same for both the sender and the recipient. That means if the recipient opens the header of your email in their mailbox, the message ID will match that of the message in your Gmail sent folder.

So if our message ID is xyz@mail.gmail.com, a simple search like rfc8222msgid:xyz@mail.gmail.com will return the exact email in search results.

And that’s the trick. This search query will work for both the recipient and the email sender. So if you pass the message ID to the recipient, they can simply use the rfc822msgid operator to locate a specific email from you in their own mailbox.

Since the recipient ID is too complex, you can simply copy of the URL of the Gmail search page and pass them to the recipient. The URL will work for them as well since the Message ID is the same for them as well.

Are you looking for responsive, beautiful and professional looking HTML templates for your next website but don’t have the budget? Well, here are a couple of free resources on the Internet where you can regularly find good templates for use in your web projects without restrictions.

Dribble is a popular community of designers for them to showcase their work online. In addition to posting screenshots of their work, designers also upload the HTML / CSS version of their projects for anyone to use. You should bookmark the freebie and the freebies tag on Dribble to never miss these projects.

Creative Market is a marketplace for website templates, themes, fonts and other design assets. It is a paid store but if you join their email newsletter, they’ll send you free design stuff every week in your inbox that can be downloaded directly to your Dropbox. And they are mostly good.

HTML5 UP is created by the same developer that built Carrd, one of the most useful websites on the Internet. HTML5 UP is a treasure house of beautiful templates built sans the heavy Bootstrap or Material framework. All web templates are available in the Creative Commons license so can you can use them in any way with attribution.

Envato’s Themes Forest is a premium marketplace for website templates but if create a free account with them, you get to download all the freebies that are published on their homepage every few weeks. These are paid items that the authors have made free only during the duration of the promotion to gain visibility in the marketplace.

OnePageLove is a curated directory of single page websites and they have a dedicated section for HTML templates that are free to download.

UpLabs is another online marketplace and community where creative designers share their work. The “web” section offers a variety of HTML templates that are free for both personal and commercial use.

Manoela Ilic’s Codrops houses the most creative collection of work for web designers as well as developers. Every single project on this site, be it an image slider or a checkout page, is unlike anything you’ve seen before and the source code is up for grabs on Github.

Freebiesbug, as the name suggests, curates web freebies including fonts, PSD designs, stock photos and, of course, HTML templates. Look for the “exclusive” tag and you’ll discover HTML/CSS templates that the designers have chosen to share exclusively on this website.

And the final resource in my list that is worth adding to your bookmarks is Codepen. Chris Coyier started Codepen as a playground for writing HTML, CSS and JavaScript in the web browser but the project has evolved into a huge community of front-end developers that are putting the code in public which are free to fork and download.

PS: If you are aware of any good resource for free web templates that we missed in the above list, please let me know at amit@labnol.org – thanks!

Saregama Carvaan, a digital music player that looks like an old-fashioned transistor radio and targets the non-millennial generation, has become a hugehitin India. The company analysed data from online music streaming sites like Saavn, Gaana and YouTube, came up with a catalogue of 5000+ “greatest” Hindi movie songs and pre-loaded them into Carvaan, classified by artists and moods.

Like a radio station, Saregama Carvaan mixes nostalgia with an element of surprise – the player’s algorithm plays music in a random sequence so the listener would never know which song is coming up next. Can the Carvaan experience be recreated with YouTube? Let’s find out.

1. The Songs List

A quick Google search on the Saregama website led me to this PDF document – it contains a complete list of every song that’s bundled into the Carvaan player. I imported the songs PDF into a Google Spreadsheet so the data could be easily filtered by movie names or artistes.

2. The YouTube Database

The YouTube API lets you query the video database by keywords. I wrote a simple Google Script that reads the song titles from the Google Spreadsheet and finds the corresponding video on YouTube. The YouTube API returns the video link, the description, the channel of the video uploader and the thumbnail image (source code).

3. The Spreadsheet Formulae

Google Spreadsheet provides the IMAGE formula that helped me embed the YouTube thumbnail URLs as images into the spreadsheet cells. I used Array Formulas to apply the same formula to the entire column in the spreadsheet.

The YouTube video IDs were converted to the YouTube URLs again with the help of a simple array formula.

=ArrayFormula(CONCAT("https://youtu.be/",D2:D))

4. The YouTube Playlist

Now the spreadsheet was populated with a list of songs that are preloaded into Carvaan and their corresponding YouTube videos.

The next task was to create a YouTube playlist with all the videos. I had earlier built a tool for copying YouTube playlists and the same API was used here for building the playlist inside the spreadsheet (source code).

The Final Result

And here’s the final result – a YouTube playlist with 5000 songs that come bundled with Carvaan. Press the “Shuffle” icon and the songs would play in random sequence continuously.

Introducing Email Studio, our new open-source Gmail add-on that brings powerful capabilities like mail merge, email scheduler, copier and more to your Gmail mailbox. Unlike other solutions, Email Studio works directly in Gmail and you can even use it inside the Gmail App on your Android phone (with support for iPhone coming soon).

Whether you need to send personalized emails to your Google Contacts, schedule emails in Gmail for sending at a later date, auto-forward emails to another address, you can do it all and more with Email Studio. Watch the video tutorial series on YouTube to get started.

Email Studio for Gmail – Features

Here’s a complete list of modules that are bundled with Email Studio.

Mail Merge – Create a Gmail draft, choose one or more Google Contacts and personalized emails will go out to each recipient with having to use CC or BCC.

Send Later – Compose an email now and the add-on will automatically send it later at preferred date and time later. You can also set up recurring schedules that will send the same email to the same recipients but multiple times on different dates.

Auto-Forwarder – Gmail has a built-in forwarder too but it only works on new email and you can only forward emails to email accounts that are your own. Email Studio imposes no such restrictions and it just works.

Email AutoResponder – Gmail has Canned Responses but with Email Studio, you can send auto-replies to both old and new email. Your responses can also include attachments which are not supported in Gmail Canned responses.

Email Unsubscriber – Quickly remove yourself from unwanted newsletters and bulk emails. This open-source utility won the ProductHunt Lifehack of the Year award and is now bundled with Email Studio.

Draft Copier – Quickly create or more identical copies of any existing draft in your Gmail mailbox. If you want to send similar emails to a bunch of people manually but without using CC or BCC, you’ll love the copier.

Email Purge – You can set up rules to automatically delete emails that match certain criteria. For instance, I could set up a rule to automatically delete emails that contain “breaking news” in the subject and the message is older than 7 days.

Inside Email Studio

Email Studio inside Gmail Mobile App

Mail Merge with Email Studio

Draft Copier with Email Studio

Cleanup with Email Studio

* Email Studio is free for basic usage. If you need to send more than 25 emails per day with Email Studio, please upgrade to premium. It has a higher daily email quota and includes no branding.

** Email Studio includes a simple version of Mail Merge that recognizes {{First Name}} and {{Full Name}} fields of Google Contacts. If you need to include more personalized fields, track email opens or send separate attachments to different recipients, check out the more advanced Mail Merge with Attachments add-on for Google Sheets.

Ever since I added the Reliance Jio 4G SIM on my Android phone, I’ve been bombarded with fullscreen overlay ads. The ads appear intermittently but they’ll almost always show up after you disconnect a phone call or when you are charging the device.

I use a limited number of Android apps from known developers and was fairly certain that adware was related to the Jio phone service. After fiddling with every possible setting inside Android to disable the ads, I turned to Twitter for help.

Meanwhile, the Jio team contacted me after seeing the tweet and asked for the IMEI number of the phone. A week later, I got a call from the Jio support team saying that the problem should be resolved.

Yes, I was no longer getting any pop-up ads on my phone despite having all the Jio apps as before. What changed? It turned out, the Jio support representative told me, that these ads can only be disabled by Jio for the requested phone number on the server side.

In short, if you are also feeling annoyed with Jio related ads on your phone, send a tweet to @JioCare and they should be able to help. This also reminds me of Amazon – just ping their support team and they’ll happily remove ads from your Kindle.

Gmail has a built-in feature that reminds you of adding file attachments before the email is sent to the recipient. Gmail scans the text of your email and shows an alert if it thinks you intended to include a file attachment in the message but forgot to do so.

If you haven’t seen this earlier, compose a new email in Gmail, add “I’ve attached the file” in the body and hit send. Gmail will pop-up a warning saying – “it seems like you forgot to attach the file.”

How does the forgotten attachment detector work inside Gmail? I was looking at the source code of Gmail.com using Chrome Dev Tools and found an interesting snippet that bares it all.

When you hit the send button, Gmail scans the text of your outgoing message and looks for the following word combinations using regex.

Here are the most useful websites on the Internet that will make you smarter, increase productivity and help you learn new skills. These incredibly useful websites solve at least one problem really well. And they all have cool URLs that are easy to memorize thus saving you a trip to Google.

The Most Useful Websites and Web Apps

archive.is — take a snapshot of any web page and it will be exist forever even if the original page is gone.

Introducing Screenshot Guru, a new Twitter bot that will help you easily take high-resolution screenshots of tweets. There are a plethora of screen capture apps available, including the good old Print+Screen combo but with Screenshot Guru, you get crisp and beautiful screenshots sans the clutter.

Screenshot Guru offers 3 different options for screen capturing tweets. You have a web app for desktops, a Google Chrome extension and a Twitter bot @screenshotguru for people who are looking for a way to easily screenshot tweets on their Android or iPhone.

Let’s explore in more detail.

1. Web App – Go to screenshot.guru and type the URL of any web page or tweet that you would like to save as a PNG image. Solve the CAPTCHA and you’ll have a crisp retina screenshot ready in a second or two.

2. Chrome Extension – Install the Twitter Screenshots addon from the Google Chrome store and then switch to the Twitter website. You’ll see a little camera icon in every tweet – click the icon and it will instantly transform the tweet into a high-res PNG screenshot that will exist forever even if the original tweet is gone.

3. Twitter Bot – Screenshot Guru is available as a Twitter bot that works both on the Twitter website and mobile apps. You can DM tweets to the @screenshotguru bot and it will send a screenshot image back to you in a private DM.

Sending a tweet via DM is easy (watch video tutorial). Tap on the share icon from a tweet on your Twitter timeline and then tap “Send via Direct Message”. Type screenshotguru as recipient account and tap the Send icon.

The Screenshot Guru app is written in Node.js and hosted on the Google Cloud Platform. The screen captures are done through headless Chrome (Puppeteer) while the images are stored on Google Cloud Storage. The Twitter Bot is running on Google App Engine.