FAIR ADVISE: Be sure to follow the steps provided in the video, This will help internalize your knowledge on a deeper level.

What did you think of the video?
Comment Below

 

Video Transcript, Enjoy 🙂

Hello and welcome to another lesson of iLoveCoding.

In this lesson, we are going to shatter your fear of code.

If you are afraid that coding is very complex, it’s very difficult, it’s for people smarter than you, and you have a mentality that I’ll never be able to write gibberish words on computer and instruct it to make something practical and useful in the world.

If you think you have to learn so much stuff before you’re ready to be any productive and build real applications, I’m going to shatter all those thoughts that you have.

So in this demonstration, the only thing you need is a browser named Google Chrome, most likely you already have it and that is it.

In the process, we are going to actually do a mini hack YouTube, and we’re going to write one piece of line of code and you’re going to easily be able to tell how simple coding can be, if you know what you’re doing. That’s pretty much it.

So let’s get started.

Head over to YouTube and open any video, for the sake of this demonstration, I have Steve Jobs Stanford Commencement speech open. You can open any video it doesn’t matter.

When you’re on the video page, right click and go to inspect as shown below

It will open a tool that Google Chrome has built in, it’s called web developer tools as you can see below

shatter-your-fear-of-code

An alternate way to open the developer tools is you go to the menu on top in chrome and select more tools and then open developer tools like such

shatter-the-fear-of-code3

The next step is to go to the console tab in web developer tools, simply click on the console tab
shatter-your-fear-of-code4

The console is a window into the Javascript world. Now I’m going to write one piece of code like such $(‘video’) the $ and the brackets in the code are to grab the video element on the web page.

shatter-the-fear-of-code5

Hit enter and it’s going to grab the entire video and if I hover over the code, it hovers the video like such

shatter-the-fear-of-code6

Now I’m going to write the same code once again and this time I’m going to add .playbackRate like such $(‘video’).playbackRate make sure the ‘R’ in playbackRate is capital. Hit enter and it’s going to give the value of 1 playbackRate is the rate at which the video is running, So 1 means the play back rate is normal.

shatter-the-fear-of-code7

Here’s the fun part, you can actually change the play back speed by adding the value 2 like such $(‘video’).playbackRate = 2  hit enter and the video will start playing faster. You can actually change the speed to 3 as well by writing $(‘video’).playbackRate = 3  and the video will start playing faster.

shatter-the-fear-of-code-8

If you change the play back rate to normal you can simply write $(‘video’).playbackRate = 1 and the video will go back at normal speed. See it yourself in the video above and then do it yourself and see how cool it actually is.

Now this is the extreme simplification of course you have to write tremandous amount of code, you have to know far many concepts but this is a very simple demonstration where you have certain elements and elements have certain properties, you set and get certain states that it has, and you can manipulate those states which in return produces a web page or produces a feature or produces the application that you’re trying to create.

Make sure you copy these steps on your computer so you internalize the knowledge you just have got.

If you are serious about web development, if you want to become a Front-End developer, let it be known that this tool that I just showed you is used by all web developers, all Front-End developers on a daily basis.

So get yourself a gift of a head start into the world of development and play around with the techniques that I just showed you.

If you have a question, leave your comments below and I’m going to talk to you in the comments.

Author:

I, Aziz Ali, am a Serial Entrepreneur, Geek and a Learn-a-holic. I went from someone who literally hated programming to someone who now loves to code. Aziz went from the mindset of “Coding is not me” to becoming a Great coder, and now I welcome any coding challenge. I have launch dozens of websites, Worked with 3 Fortune 1000 Companies; Developed the United Airlines Airport Terminal Application, Developer Mobile Web Apps for CVS Health – All via Javascript and its awesome frameworks.

  • Qazim Rama

    You are awesome. Your video were out right on time. You explanations are simple and easy to understand. Also your video aspect ratio/scale looks good on mobile screens.

    • Perfect, I am glad you liked it Qazim

  • Sang Nguyen Nhat

    Thank you for your video. I just wonder why when I inspect this page, I cannot find the $(‘video’) of you in order to set the playbackRate for it.

    • Do you mean you don’t see the auto complete like I did in the video?

      That’s because I had already done that in my computer to the browser remembered by entry.

      Since you did it for the first time, there was no browser history

  • I am glad you tried it here too. So on ILovecoding.org this does not work since the video is embedded inside an iframe.

    Which prevents the console to access the video tag.

  • Ynl ALkhalil

    Aziz joon
    can you provide videos with english subtitles ??
    for non english learners and hearing impaired ones ….
    and is there anyway to download each video for offline ??
    here in my country we have slow internet connection

    • That is a great suggestion. I will have this video Close Captioned Immediately,
      And look into ways to get it done for other videos as well.

      About the Download of video, we use Vimeo as our hosting platform, and it has a feature that it automatically streams a lower resolution version of the video if you have slower internet speed,
      that should suffice for you right?

    • Ameer

      The video has been close captioned. I’m sorry for the late response. Let me know what you think of it.

  • Cr38tive Spaces

    You’re awesome! Great start. Definitely looking forward to the remaining lessons. 🙂

  • Fadli Hidayatullah

    Hahaha. That makes me funny, cool way!

    • Awesome, I am glad you liked it

  • rashmi reddy

    Really awesome its pretty much easy i just love it 🙂

    • I am glad you liked it. Stay tuned for more

  • nidhi

    Whoopie!! Thanks Aziz , quiet easy to learn , understand & implement.

  • Sherief Yousri

    I really liked it, but i want to get into business ! 🙂 how to enroll or get all videos , one video a day is not enough

    by the way everyone don’t try to copy and paste the playbackRate part as it’s not going to work as it’s using $(‘video’) instead of $(‘video’) “the single quote is different”

    thanks again 🙂

    • Stay tuned Sherief, the invite will come on the date mentioned in your first email.

      About the single quotes, yes, people can use single or double quotes and both will work, and typically if you use a keyboard directly (instead of copy pasting) the console will input the right single quote format.

      So this should not be a challenge

  • Hirnesh

    This is just awesome 😀 Thanks for the inspiring video 😀

  • Pablo

    Thanks, very interesting and clearly presented

  • Marsil Bour

    you’re awesome thanks AZIZ than i’d like to say that the description of the course below the video it’s amazing too cause i’m beginner in english but with that thing it’s so easy to understand .
    $(‘thank you so much’) lol

  • Jay Nice

    love it! cant wait to learn more.

  • sanketssj5

    can you provide a link where I can find other such useful variables and their functionalities to use in the console tab?

    • I will give you even a better answer

      What is the console really?
      Console is window into Javascript engine, You write a complete application in it.
      Write functions, do calculations and everything else
      Action: Try it. type this in the console


      2*5-3

      and see what happens

      Since this Chrome Console is inside the browser, it gives you access to the Browser Features (AKA Browser APIs)

      So if you want to see the properties of the document (aka, the web page) or the window (aka, the browser instance) do this in the console


      document.URL

      or


      window.outerWidth

      Isn’t that awesome?

      Now about the video property.

      The video object that you capture has properties. and PlaybackRate is one of them.

      To see the full list of every property of everything do this

      type window. and a dropdown will appear with every possible property
      do the same thing for document or the video https://uploads.disquscdn.com/images/cfd148afe7cf36f2736f29a3c279238303558e97eb9e5cdbe22f5e1c76bab2a2.png

      Now note: No one knows about all the properties and what they all do, and its not a good thing for you to know everything.

      You learn things as you go.

      Hope that helps

      • sanketssj5

        Thank you aziz, fastidiously explained and easy to understand.

  • Rio Waller

    That is a fun way to start learning about code!!! DevTools are a fundamental skill!!!

    • I am glad you liked it Rio 🙂

  • Vinod Kumar

    This is my last hope…

  • Ben

    Lovely video

  • Sriram Krishnan

    i tried doing it for your video and the playbackrate works even if set to 1000 but the voice is not heard anymore.

    • Do you mean that the playbackRate does not work for for this video?

      Yes it should not, Vimeo players are embeded two levels deep, so the browser console, does not have access to the video, hence embedded vimeo videos dont work with this code.

      However this will work on Vimeo.com and Youtube.

      • Sriram Krishnan

        My bad i should have been clear.I meant the playbackrate does work for the video here too but when i set it to 1000 voice is not heard any more.I thought it would throw some error.

        • Yeah so when you set it to 1000 one or two things could be happening, The playback runs so fast that the clip ends in a few milliseconds, so you hear nothing

          Or maybe the browser limits how fast a clip can be played, so programming languages and its frameworks limit abuse of its code too.

          I do not know which one is the case here, but well we are here to play and break things, so i am glad you are playing around with different values.

  • Rishabh Bohra

    Thanks for this awesome introduction Aziz. Curiousness + learning = Your tutorials 🙂

  • Nikki Tapper

    every time I try and do this exercise it says Uncaught SyntaxError: Invalid or unexpected token??….

    • seems like there may be a typo in your code. No worries.

      Please share with me the screenshot of what you are typing and the results.
      I can help you further

  • Rahul Tandon

    Wow! A very nice and interesting example to set the tone. I will come back here and comment in a few months after learning Java script.

  • Leon Orlinski

    Cool , Thanls Aziz

  • atranaz

    thanks brother you doing very good job i wish i’ll make a part of it 🙂

  • Akash Marak

    Great one and atleast I’m not afraid of coding anymore. Thankyou very much Sir.

  • Trond E. Haveland

    Thumbs UP!

  • sai phanindra

    great work!

  • Naveen Chandra B

    Thank you sir, looking for more tips from you.

  • Naveen Chandra B

    Hello sir Im getting an error
    Uncaught TypeError: $ is not a function
    at :1:1

  • Aziz, great example! Most of the time the fear is just in your mind, but it’s just anxiety, b/c it’s not real FEAR. We let the anxiety get out of control and we let it paralyze us. This is a great way to let people slowly get their feet wet so that they start to recognize that programming isn’t that scary!


    http://www.friendlywisdom.com

  • anish mahadani

    I like it and eagerly waiting for the next lesson

  • Nishant Kabra

    good