Learn Chrome-devtools, Postgres and Xstream

You've got some practice with using SQL to select, update, and join database tables.

But perhaps you've found yourself with a sneaking suspicion that you could be more efficient with your PostgreSQL.

Does your query seem slow?

A lesson on how to profile queries will point you in the direction of a fix.

Are you performing multi-step operations one at a time that are susceptible to errors?

The "all or nothing" transaction is the cure.

These are just a couple of examples of the techniques, tips, and tricks that Tyler Clark has learned in his years of experience working on large scale production applications.

Other topics in this course include working with CSV files, different techniques for aggregating & filtering, and more!

Watch Tyler's course, and continue your journey toward SQL mastery.

Check out the [**Community Notes for this course.**](https://github.com/eggheadio-projects/advanced-sql-for-professional-developers)

PostgreSQL is a powerful, open source object-relational database system.

postgres

Advanced SQL for Professional Developers

Most applications rely on databases to store data. Understanding how to create a database and communicate with it unlocks a critical power in your web development career. 

In this course, Tyler presents all the building blocks of creating and interacting with a PostgreSQL database. From creating a brand new table, up through organizing and aggregating data across multiple tables, you will learn the fundamental skills of SQL — and you’ll be prepared to apply them right away.

After completing this course, you’ll be ready to tackle more challenging SQL topics like proper data modeling, normalizing data, and exploring different database types.


Check out the [**Community Notes for this course.**](https://github.com/eggheadio-projects/sql-fundamentals)

SQL Fundamentals

Frontend runtime optimization is heavily impacted by rendering.  Understanding the way the JS engine and the browser work is crucial for optimizing applications and understading how to avoid performance pitfalls.
This collection explains about the Critical Rendering Path, performance bottlenecks and practical solutions.

JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Critical Rendering Path

Chrome DevTools are incredibly useful for a frontend developer, sometimes we spend more time using them than our text editor of choice.

That's why it's so important to understand this tool better - those quick lessons will teach you things that will help you to become a more effective developer.

You will learn how to:

- **Use (experimental) CSS Overview to learn all about CSS used on a page in a minute**
- **Style console.log messages with CSS** - a _crucial_ skill for any senior developer (j/k)
- **Debug your code (on production and local environment) with logpoints**
- **Run a Lighthouse audit of your site**
- **Choose accessible colors for your website that have an AAA contrast ratio rating**
- **Force a DOM element state in Chrome DevTools**
- **Use Console utilities to make debugging easier**
- **Copy a network request as fetch or cURL with Chrome DevTools**

Have fun!

The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built into Google Chrome.

chrome-devtools

Chrome DevTools tips & tricks

You know the basics of Postgres, but most meaningful queries will require you to combine tables in novel ways to ask questions you couldn't ask with a single table alone. Joins and unions come up over and over again in interview questions -- because of how fundamental they are. This course will make you a master of your tables, and give you the power to answer questions you couldn't before. 

Understand Joins and Unions in Postgres

In this course we will show you how to wield the power behind the elusive window function. Which five movies were the highest grossing each year? Who are the highest performers in each department relative to their peers? These questions ask us to partition records into subgroups and answer questions about those groups -- that’s the power of a window function. 

Many programmers will reach for their favorite scripting language to solve problems like these, but window functions allow you to answer them with the speed and efficiency of the Postgres query planner.

Plus, with the power to further slice and dice this derivative information, there’s no limit to the questions you can answer with raw SQL.

If you’re interested in the Postgres client that is used in this course you can [download it here](https://macpostgresclient.com/?source=brett) to check it out and follow along.

Using Postgres Window Functions

It’s amazing how much you can accomplish with a basic knowledge of SQL. In this course we’ll learn how to store lots of information (many millions of things!) and answer nearly any question we might have about that information (on the order of milliseconds!) 

We’ll learn enough to make you say you “know SQL” -- table creation, inserts, selects, updates, deletes, aggregations, indexes, joins, and constraints. Along the way we’ll model real world problems so that you can see just how powerful SQL will make you!

If you’re interested in the Postgres client that is used in this course you can [download it here](https://macpostgresclient.com/?source=brett) to check it out and follow along.

Get Started With PostgreSQL

In this course we’ll take a deep look at the Elements panel in the chrome devtools. We’ll step through each button and tab on this panel and discuss how to use them to interact with your web application as it runs.

Debug the DOM in Chrome with the Devtools Elements Panel

This course examines the Sources panel in the Chrome DevTools, which allows you to see what files are responsible for the various things on the screen. Bundled into this panel, though, is the single most useful tool for any JavaScript developer - the JavaScript Debugger. We’ll use the Debugger to inspect JavaScript as it runs, allowing you to watch (and even interact with) the state of your application as it runs in ways that’ll blow your mind if you’ve mostly used console.log to debug your applications to this point. 

Debug JavaScript in Chrome with DevTool Sources

This course will examine the Network panel in Chrome DevTools. We’ll step through the request log, examining the various properties exposed. We’ll talk about timing, filtering, throttling and generally using the network panel to better understand the ways in which our applications exist within a connected context.

Debug HTTP with Chrome DevTools Network Panel

If you are developing JavaScript applications you are likely using logging as an integral part of your development process. Did you know that you aren't limited to simple `console.log` statements? Modern browsers give you a lot more logging options to work with!

This course will explore those options and give you some new logging tools for your professional toolbox.

Advanced Logging with the JavaScript Console

Miscellaneous one-off lessons on debugging, productivity hacks, and JavaScript tricks.

Tips and Tricks

This is a small collection of videos to help you get familiar with Chrome browser's performance oriented developer tools.
In this collection, learn how to record a performance profile, tweak the settings to get the most relevant profile and finally a look into the different sections of the performance data visualisation.

Basics of Chrome's Performance Devtools

Anything related to JavaScript performance

Javascript Performance

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Progressive Web Apps can speed up app loading times, and even allow you to run your web app offline, and install it on a mobile device!  However, setting up a PWA correctly can be tricky.

In this course, we'll create a PWA from start to finish, using create-react-app.  We'll create a custom service worker, and use different caching strategies for different types of assets.

Finally, we'll look at how to install the app on both iOS and Android devices, and how to customize the app name, icon, and splash screen.

Course Introduction: Progressive Web Apps in React with create-react-app

Your page is showing high CPU usage and spinning up your laptop fan, but nothing is visibly happening. What is it doing, and why is it so slow?

This lesson is a real-world performance diagnosis of this very page, right here on egghead. Two infinite (but hidden) animations were causing CPU usage to spike, and Chrome's Task Manager and Performance tools helped uncover the elements causing the problem. You'll see how to use the profiler to record a snapshot, and learn a trick for discovering animations running in the background.

Diagnose a Slow Page Using Developer Tools

Sometimes we'd like to ensure that some `console.log` are *really* visible one someone opens dev tools window. For instance, we could want to warn our less tech-savvy users that they shouldn't paste anything someone else send them to console, because their account might get stolen.

In this lesson we are going to learn how to style `console.log` messages with CSS properties so we can make our messages stand out from the crowd.

Style console.log messages with CSS

What's in a name? In this lesson, I'll explain the concept of naming interactive elements for screen reader users, including forms, buttons, and links. You'll learn how to debug accessible names and descriptions using the Chrome Accessibility Developer Tools (previously a Canary experiment, now in Chrome), using multiple labeling techniques. We'll also listen to the effects of proper accessible names and descriptions in Voiceover and Safari.

For more information and the nitty-gritty browser implementation algorithm, refer to WAI-ARIA 1.1: 
- https://www.w3.org/TR/wai-aria-1.1/#namecalculation
- https://www.w3.org/TR/accname-1.1/

What is Accessible Name Calculation?

Chrome DevTools provide many handy utility functions that we can use to make debugging faster and easier so we can fix the bug and move on.

In this lesson we are going to learn how to use `$`, `$$` utilities built-in in Chrome DevTools to get references to single and many DOM elements and how to use `$0 - $4` variables to reference object selected using Inspect Element tool.

Use Chrome DevTools console utilities to make debugging easier

Creating tables is actually quite simple. However before we go creating tables we need to first understand the data we want to store. To make sure our data scales appropriately we need to break down the data into its smallest form so we can easily add data and read from it. 

### Other DB Types
https://dev.mysql.com/doc/refman/8.0/en/data-types.html
https://docs.oracle.com/cd/B28359_01/server.111/b28318/datatype.htm
https://docs.microsoft.com/en-us/sql/t-sql/data-types/data-types-transact-sql?view=sql-server-2017
https://www.postgresql.org/docs/9.5/datatype.html

Create a Table with SQL Create

Tables in databases are not worth much value if they do not actually hold data. In this lesson we will use the insert statement to add rows of data to our table. We'll break down each component of the statement and review what is required for a successful insert. 


Topics

Instructors

Content Type