1. Chrome Dev Tools: Summary

    01:56

    from Free Code Camp Added

    The most important things to learn as a beginner using Chrome Developer Tools, and a little info on Device Mode. 1.) Chrome Dev Tools are awesome, and the more you can dive in and try to use them, the faster your skill level will grow. 2.) Use the documentation, even if you've never read documentation before. https://developers.google.com/web/tools/chrome-devtools/ 3.) Once you start to get comfortable in one tab, stretch yourself. Working effectively with all of the tabs will serve you exponentially more than sticking in your comfort zone. Questions: Device mode allows you to view your page in different sizes of screens with different network connections. (True)

    + More details
    • Chrome Dev Tools: Console

      01:44

      from Free Code Camp Added

      Info and mini-lesson on the 'Console' tab of Chrome Dev Tools. Check out more in-depth documentation here: https://developers.google.com/web/tools/javascript/console/ The Console panel provides two primary functions: logging diagnostic information in the development process and providing a shell prompt which can be used to interact with the document and DevTools. When using the console, you can view raw or structured data by using standard JS statements and console-specific commands. An example of structured data would be the information returned from an API in JSON. I used this a lot when I was building my first ziplines for Free Code Camp. You should know that messages stack up, and you can clear them by typing and entering 'clear()'. You can also save the log by selecting 'Preserve Log'. There are different commands that will log differently, like console.log() for basic logging, console.error() & console.warn() for "eye catching stuff". The console can track exceptions, which basically means when something goes wrong. It can even pause the code during those exceptions, a function that you might remember from the 'Source' tab. Questions: The console in Chrome Dev Tools has many similarities to the console of a computer. (True) This video is in-depth and covers everything you need to know. (False. Please review the documentation linked in the description.)

      + More details
      • Chrome Dev Tools: Audits

        02:02

        from Free Code Camp Added

        Info and mini-lesson on the 'Audits' tab of Chrome Dev Tools. In this video, we do an audit of one of my Ziplines for Free Code Camp. The Audit tool walks you through how to improve your page step by step. That being said, none of these suggestions are required, but they definitely should be taken into consideration.

        + More details
        • Chrome Dev Tools: Resources

          01:02

          from Free Code Camp Added

          Info and mini-lesson on the 'Resources' tab of Chrome Dev Tools. Check out more in-depth documentation here: https://developers.google.com/web/tools/iterate/manage-data/index The Resources panel lets you inspect resources that are loaded in the inspected page including IndexedDB or Web SQL databases, local and session storage, cookies, Application Cache, images, fonts, and style sheets. You can view and edit all of this information within the browser. As you get into more advanced web building, play around with the resources panel and see how it can help you understand the requirements of your app and page in real time. Questions: The 'Resources' tab helps you view external resources such as SQL and cookies. (True)

          + More details
          • Chrome Dev Tools: Profiles

            03:19

            from Free Code Camp Added

            Info and mini-lesson on the 'Profiles' tab of Chrome Dev Tools. Check out more in-depth documentation here: https://developers.google.com/web/tools/profile-performance/rendering-tools/js-execution The Profiles panel lets you profile the execution time and memory usage of a web app or page. This primarily applies to the JavaScript running on your page or app. There are three types of profiles you can collect: CPU profile, HEAP snapshot, and HEAP profile. HEAP profiles have more to do with memory usage, while a CPU profile has more to do with JavaScript performance. A profiler called V8 is used while your code runs to pinpoint what in the JavaScript takes the most time, making it easy to optimize your code. Each of these profiles can be viewed on the left, and you can take multiple profiles of each. Overall, the profiles tab is helpful when optimizing code. Questions: When you take a profile or a snapshot, the information that's collected will be viewable in only one format. (False. Like all of the tabs in Chrome Dev Tools, there are multiple ways to view and interpret information.) After hitting 'record', consider refreshing the page depending on what data you are trying to capture. (True)

            + More details
            • Chrome Dev Tools: Timeline

              02:55

              from Free Code Camp Added

              Info and mini-lesson on the 'Timeline' tab of Chrome Dev Tools. Check out more in-depth documentation here: https://developers.google.com/web/tools/profile-performance/evaluate-performance/timeline-tool The Timeline panel lets you record and analyze all the activity in your application as it runs. It's the best place to start investigating perceived performance issues in your application. Just like you use network to find out how long things take to communicate with the internet and you use sources to find out where something's broken, you can use timeline to figure out what's going on and how long it takes in even more detail. With the timeline you record events using the small circle button. You can record (or capture) stacks, profile js, memory, and paint (css). When you record (capture) these, it sets them up in small, detailed logs that you can organize many ways to fit you. All of this will help you to better understand what's happening in the browser, particularly which events require more browser memory than others. When you're using timeline, remember to use this 'clear' button and to start recording before you load the page, depending on what you want to capture. You'll notice that when you record JS events, clicking on the title or "function call" on the left will take you to the document and line of that function using the resource panel. Questions: The 'Timeline' tab records how long it takes APIs to return information. (False, the 'Timeline' tab is best utilized as a starting place for performance issues that relate to speed and memory usage). You need to press 'record' to start capturing information when using the 'Timeline' tab. (True)

              + More details
              • Chrome Dev Tools: Sources

                01:39

                from Free Code Camp Added

                Info and mini-lesson on the 'Sources' tab of Chrome Dev Tools. Check out more in-depth documentation here: https://developers.google.com/web/tools/javascript/breakpoints/ The 'Sources' tab is most useful for debugging JavaScript. The bigger your project is, the harder it can be to find exactly where a problem occurs. You can select different parts of the code to be 'breakpoints', checkpoints that will stop the code at that exact moment. There are different breakpoints you can watch for, like for a specific line of code, on a DOM event, a server request called XMLHTTP request, or a javascript event. When you set a breakpoint, the browser pauses everything when it interprets that line of code or event. By slowing everything down and giving yourself a chance to examine what's happening at every spot you've set, you can keep track of exactly what's happening in the page or app. Once all of the breakpoints are set, you can step through the code and examine the state of your page or app at every breakpoint. Just like with elements, you can live-edit through dev tools, but remember to save those changes however you can so your progress isn't lost. Questions: Debugging can be done easily in the 'Sources' tab of Chrome Dev Tools. (True) These breakpoints are already established, but you can edit where they are in the code. (False, you set up all of the breakpoints in the debugger.)

                + More details
                • Chrome Dev Tools: Network

                  02:00

                  from Free Code Camp Added

                  Info and mini-lesson on the 'Network' tab of Chrome Dev Tools. Check out more in-depth documentation here: https://developers.google.com/web/tools/profile-performance/network-performance/resource-loading The network tab helps answer questions like "Which element or part of the page took the longest?" or "What initiated a request?". The network panel records detailed information about how long each element of your page or app takes to load. Every request is recorded in the log, which can be found lower in the network panel. If you look at the line on the side, you'll notice a pattern of colors. Those colors each represent a different type of content in the request. The longer the line is a certain color, the longer that type of content took in that request. Ultimately, you want short lines, and if any request has long lines, you know what may be slowing down the web page. If you click a request in the log, you can get even more detailed information. Questions: The Network tab is a good place to look to determine what requests are being made and how long they're taking. (True) Like all of the tabs in Chrome Developer tools, there are many ways to view and utilize the information it offers. (True)

                  + More details
                  • Chrome Dev Tools: Elements

                    03:57

                    from Free Code Camp Added

                    Info and mini-lesson on the Elements tab of Chrome Dev Tools. Check out more in-depth documentation here: https://developers.google.com/web/tools/iterate/inspect-styles/basics We will be using the webpage http://www.mckellen.com/ per suggestion of Free Code Camp user kmiasko. Please check out the Chrome Dev Tools documentation at https://developers.google.com/web/tools/chrome-devtools/ If you right click and select 'Inspect element', you can have access to the elements tab. You can change text, background color, text color, and any other CSS or HTML you'd like! These changes don't set up automatically, so don't use this as an IDE or a place to create or edit anything you want to save. You can set up something called "persistant authoring" to save. Cascade, inherit, and other css rules still apply, so keep that in mind as you play around. Additionally, overridden styles will be shown as having a strike through them. It should also be noted that all of the code you're seeing in this 'tree' is current HTML, not original onload. If you use javascript or jquery to change something, it will be updated on this tree. Padding, border, and margins are easily inspected and edited using the colorful box on the right or bottom side. Questions: The elements tab is where you should go if you want to edit HTML and CSS of an existing web page. (True) Any changes you make are saved, so it's safe to use as an editing tool. (False. These changes are temporary, so if you find a great fix or idea, put it into your own documents so you don't lose your progress!)

                    + More details
                    • JavaScript Lingo: Regular Expressions

                      01:11

                      from Free Code Camp Added

                      RegExp (Regular Expressions) in JavaScript RegExp is not formatted like anything else in JS, and can have a steep learning curve. RegExp can also be an incredibly useful and efficient tool. Using RegExp, you can match, replace, search, and split a string, one of the more difficult types of values to manipulate. Like with all of the other videos, we won't get into the nitty gritty, but I want to show you a few examples of where RegExp is useful. If you wanted to create a registration page that verified passwords contained at least a number and a capital letter, you could use RegExp. If you wanted to ensure that dates entered in a page were all valid dates in the future, you could use RegExp. While there are limitless ways to use RegExp, many of them include validating information that users input. Questions: RegExp can be a useful tool when working with strings. (True) RegExp can be intimidating, and if you don't like it, you can probably just avoid using it. (False! I am guilty of trying to avoid using RegExp at all costs, and I ended up writing way more (inefficient) code that I ended up throwing out to replace with RegExp. Be patient with yourself, because it can be a great tool.)

                      + More details

                      What are Tags?

                      Tags

                      Tags are keywords that describe videos. For example, a video of your Hawaiian vacation might be tagged with "Hawaii," "beach," "surfing," and "sunburn."