Learn Github, Postgres and Scss

 Every developer who has attempted to demystify OAuth 2.0 must be presented with mind-bugging complicated flow diagrams. It becomes worse when you try to understand all the terminologies of OAuth 2.0 and Open ID protocols.

There is no getting around the OAuth 2.0 flow being complicated with back and forth between your browser, the service you are authenticating with, and the application you want to access. 

This course gets straight to the point without any application code distracting you from the core takeaway -- You will learn how to authenticate and authorize yourself using GitHub as your Auth Server.

We'll first cover the OAuth 2.0 flow for authentication and then integrate the Open ID protocol for authorization.

[**LIVE EVENT**: Register here for a live webinar with Christian on OAuth.](https://egghead.zoom.us/webinar/register/WN_Sxy1FEcoTea8UA6F7EDzLw) Bring any questions you have from taking this course!

JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties.

Add Github Login to Your Web App with OAuth 2.0

GitHub is one of the most popular places for a developer to store their code. There are a lot of benefits that come with using GitHub such as easy collaboration on code with other programmers and developers and version control for your repositories. 

These help you to have a productive workflow but there are a lot more tools that are built into GitHub that you might not know about!

Dive into the weeds with Joe Previte as he provides for you some helpful tips and tricks you’ll need to run a productive repository with your team. 

He teaches you how to setup PR Templates to make sure your team doesn’t leave out vital information. You’ll learn about auto-assigning reviewers to your PR’s so that they don’t get missed. You’ll even get to learn a little about the GitHub CLI!

Joe teaches you how to:

- Creating issue templates
- Automatically delete branches after merging PR’s
- Open repositories in your browser using the GitHub CLI

... And more! 

So take your productivity up a notch when using GitHub and take Joe’s course today!

GitHub fosters a fast, flexible, and collaborative development process that lets you work on your own or with others.

github

GitHub Tips & Tricks

It's tempting to pick up a framework which has preselected flexbox or grid as the layout tool of choice, but it's important to learn when and why to use each method. This leads to slimmer stylesheets which results in better site performance, and less likelihood for "hacks" to make one method do what the other does inherently better. 

Throughout this collection, we will be progressively styling a responsive landing page template while building your knowledge on when to select grid or flexbox for any layout scenario. Spoiler alert: sometimes the best solution is using both!

The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent.

flexbox

Create a Landing Page with CSS Grid and Flexbox

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

SSH provides a secure way for your to [connect to and authenticate with GitHub's servers](https://help.github.com/en/github/authenticating-to-github/about-ssh). While HTTPS connections use usernames and passwords as credentials, SSH instead uses public and private key pairs. These can be generated on your system using a CLI like [`ssh-keygen`](https://help.github.com/en/github/authenticating-to-github/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent) and then associated with your GitHub account using the public key.

In some cases, you may need to connect to more than one GitHub account from the same system. For example, you may have [separate accounts for personal and professional projects](https://ryanharris.dev/managing-ssh-keys-for-github/), which can be difficult to manage manually. Using `ssh-agent` and a SSH configuration file, you can alleviate this pain point by automatically determining which key to use based on your GitHub repository's `git` URL.

Bash is a Unix shell and command language written by Brian Fox for the GNU Project as a free software replacement for the Bourne shell. Bash is a command processor that typically runs in a text window, where the user types commands that cause actions. Bash can also read and execute commands from a file, called a shell script.

bash

Secure GitHub connections with SSH

Github Actions are an awesome tool from Github that allows us to automate tasks using code-based workflow configuration files. There's also a large marketplace that comes stocked with many useful tools that are ready out of the box.

But sometimes the options available don't completely solve our needs or maybe we're working with a new technology that's simply not available as an Action yet. Luckily, Github allows anyone to create their own Actions using common technologies like Javascript via Node.

We'll learn how to create a new Javascript-based Github Action running on Node. We'll first walk through a simple Hello World example, learn how to test it locally, version control it, use it in the wild, and move on to more advanced solutions that include using packages from npm!

Create a New Github Action to Automate Code Tasks with Javascript

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

CSS uses a global namespace for CSS Selectors that can easily result in style conflicts throughout your application when building an application using modern web components. You can avoid this problem by nesting CSS selectors or use a styling convention like BEM but this becomes complicated quickly and won’t scale.

CSS-in-JS avoids these problems entirely by generating unique class names when styles are converted to CSS. This allows you to think about styles on a component level with out worrying about styles defined elsewhere.

In this course, you will learn how to express popular SCSS (Sass) language features using latest JavaScript features. We will convert simple examples from SCSS to CSS-in-JS. As a designer or (S)CSS developer, you should be able to follow without extensive JavaScript knowledge, understanding SCSS is required though. We will not be using any particular CSSinJS libraries. Instead, we will focus on a base knowledge you need later if you use any CSSinJS library.

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

scss

Convert SCSS (Sass) to CSS-in-JS

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

Publishing a JavaScript library for public use requires some extra steps. You need to think about how people will use the library. From end users, to contributors your library now has a variety of people outside of yourself potentially making use of the code that you've released into the wild.

From Github and npm, to releasing beta versions, semantic versioning, code coverage, continuous integration, and providing your library with a solid set of unit tests, there are a ton of things to learn.

This series will guide you through a set of steps to publish a JavaScript open source library.

You might also enjoy [this article about contributing to open source](https://egghead.io/articles/get-started-contributing-to-javascript-open-source).

How to Write an Open Source JavaScript Library

Have you ever wished for access to conditionals or iteration when writing styles? How cool would it be to use functions to write styles? SCSS has that and more! SCSS is a superset of CSS. Any valid CSS is SCSS, they even have the same syntax. SCSS borrows features from other languages to write smarter, reusable and more readable styles. This course will focus on how to use SCSS’s more useful features, compare them against each other and assess when their usage is appropriate.

Learn the Best and Most Useful SCSS

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

Web accessibility (also referred to as a11y) is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages.

React fully supports building accessible websites, often by using standard HTML techniques.

Erin Doyle is an expert in creating accessible React applications and has developed a course that will give you a concrete process for auditing react apps for accessibility. In this course, you will go through different tools and libraries to audit components in a React app.

Fast, easy and reliable testing for anything that runs in a browser.

cypress

Auditing React Apps for Accessibility 

Techniques to improve your CSS, Sass, and HTML implementations for everyday scenarios. 

Learn the Fundamentals of CSS and Sass to Create Modern and Responsive Layouts 

Supabase is an open-source tool for rapidly building application backends with real-time data and authentication. In this course, you'll learn the fundamentals of Supabase. You'll learn how to model complex data using PostgreSQL and SQL, build authentication flows with Oauth, and add real-time data to a Next.js application to build a fully-featured chat application, similar to Discord.

The chat app will have different "channels," which will be powered by data inside of Supabase. Users can visit these channels and write messages, which will be sent in real-time to other current users of the platform.

After this course, you will be able to model real-world scenarios in actual relational databases, understand how to manage real-time data, and leverage key functionality provided by Supabase, such as authentication, instant APIs, and real-time subscriptions.

Supabase is an open source Firebase alternative. A service to:

- Listen to database changes.
- Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).
- Create, update, and delete rows.
- Manage your users and their permissions.
- Interact with your database using a simple UI.

Supabase is not a 1-to-1 mapping of Firebase. Most notably, Supabase uses Postgres rather than a NoSQL store. 

supabase

Build a Real-Time Data Syncing Chat Application with Supabase and Next.js

“Feel free to submit a PR!” - words often found in GitHub issues, but met with confusion and fear by many. Getting started with contributing open source is not always straightforward and can be tricky. With this series, you’ll be equipped with the the tools, knowledge, and understanding you need to be productive and contribute to the wonderful world of open source projects. Much of this series speaks about GitHub, but most of the concepts are generally applicable to contributing to any open source project, regardless of where it’s hosted.

So enjoy the course and start contributing to the projects you use and love today!

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

How to Contribute to an Open Source Project on GitHub

Copy/pasting the same code is redundant and updating copy/pasted code slows development velocity. Mixins are reusable chunks of code that are included, similar to calling a function, instead of copy/pasted.

Mixins have some nice features:
- Arguments just like functions.
- Arguments can have default values and optional values.
- Named arguments allow us to use optional and default arguments when the mixin is included.
- Variable arguments allow us to have a dynamic number of arguments when the mixin is included.
- The @content directive allow us to add additional styles when the mixin is included.

In this lesson we learn how to DRY up the code with the SCSS @mixin directive and make copy/paste a thing of the past.

Reuse Styles with the SCSS @mixin Directive

Updating the same color or metric multiple times is no fun. SCSS variables improve maintainability by allowing one name to represent a value that can be used anywhere. SCSS variables also give us the power of creating our own naming conventions to express the intent of specific values. In this lesson we learn how to use SCSS variables to assign user friendly names to colors/metrics so one value change will update that value in all the right places.

Use SCSS Variables for Readable and Maintainable Stylesheets

SCSS nesting can produce DRYer code by targeting child elements without having to write the parent class. Nesting up to 3 levels deep can help us understand relationships between styles. The SCSS parent selector represents the parent class, so it can DRY up targeting pseudo-elements/classes and be an asset for naming conventions. In this lesson we learn how to remove the redundancy of targeting pseudo-elements/classes, and child elements by taking advantage of SCSS’s nesting and parent selectors.

Organize Styles with SCSS Nesting and the Parent Selector

In this lesson we learn how to set up SCSS  and transpile your SCSS code into CSS with node-sass.

Search

Search Results