Resources for Web Developers in 2021

A list of Python tidbits that I've used in projects so that I can remember them later.

Bite-size video tutorials for badass web developers.

egghead

Practical Python Pieces

Gatsby is a React-based, GraphQL powered static site generator. It combines together the best parts of React, Webpack, react-router, GraphQL, and other front-end tools to provide an excellent developer experience. 

This course takes you from initializing a Gatsby site via CLI to utilizing the Gatsby Ecosystem to source MDX files from your system. After tackling the file system you'll optimize for SEO as well as additional styles through ThemeUI that will support features like syntax highlighting in code snippets. Finally, you'll learn how to performantly process and render images. 

By the end of the course, you'll have a fully functioning developer blog that will serve as a base for larger production-grade applications.

You'll learn:

- Installing Gatsby and the Gatsby CLI, and adding them to package.json
- Using file system route API to create collection pages
- Use GraphiQL to make queries based on source plugins
- Creating a blog post listing page with links to every post
- Sourcing and transforming images
- Making the site SEO-friendly
- Built accessibly

Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.

gatsby

Build a Developer Blog with Gatsby

In this course, we will go through the concept of transducers and build them up from basic principles. We will go over the problems with regular composed transformations, and show how we end up with unnecessary data and intermediate collections. We go on to learn how we can use transducers for performance gains when operating on large data sets, as well as how they’re an excellent fit for processing other iterable data, like generators. Not just arrays.

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

Quickly Transform Data with Transducers

Client-server communication is at the heart of any modern web application. In this course we will take a look at how to communicate with your backend API in Angular, specifically with the new Http module(`@angular/common/http`) introduced and used in Angular  `4.3.1` and later.

We will learn how to configure the `HttpClientModule`, how to fetch and send data, customize HTTP headers that are being sent and how to properly handle error responses.

We will also take a look at some more advanced use cases such as listening to progress events and intercepting HTTP calls. Finally we will also learn how to isolate and mock HTTP calls in automated unit tests.

Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

Learn HTTP in Angular

Flexbox is a powerful way to layout HTML so that elements can grow to fit the size of their container.  It can also control how the elements are positioned within a flexed container.  

Once you start thinking in `rows` and `columns`, you can control almost any flexed layout with just a few simple flexbox layout primitives.

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

Get Started with Flexbox CSS Layouts

When we build forms, we know there’s a good chance that the data we want to collect may change. Dynamic Forms in Angular give us the ability to define the underlying object model before binding the form to the template. This lets our forms programmatically adjust to the underlying model so we don’t have to update each form manually as our data will eventually change.

In this course Google Developer Expert-led we will use Angular’s Reactive Forms and learn about the basics for dynamically rendering `FormControls`. We will also explore how more advanced input controls such as select boxes and radio button lists can be dynamically bound to our template. 

If you’re coming from AngularJS (v1.x) you may also be familiar with dynamic forms in the context of `Formly`, a library for automating dynamic forms. We will also quickly touch on `ng-formly`, which is the Angular (2+) equivalent.

Create Dynamic Forms in Angular

JavaScript’s `this` keyword is a source of confusion for new and experienced developers alike. It can be frustrating if, for some reason, `this` doesn’t point to the context that was intended. 

This course will help you understand JavaScript’s `this` mechanism in-depth. Marius will take us through all of the ways `this` will change its values, from why many libraries use "use strict" to how arrow functions take its outer execution context’s `this`. 

Over 8 lessons, you’ll learn:

- how JavaScript implicitly sets the `this` context, and how we can set it ourselves
- that the call-site of a function determines the `this` value of that function invocation 
- how to call a function with a specific `this` value
- how to create functions that always remain tied to a specific this context
- how `this` is treated within arrow functions and classes

Following the course, `this` will feel less frustrating, more intuitive, and far more useful in your day-to-day. 

Understand JavaScript's this Keyword in Depth

Learn how to make a fully functioning Tic Tac Toe game that doesn't need any client-side JavaScript!

For this course, we'll be using Pug and Stylus which are preprocessors for HTML and CSS respectively.

Learn how to:
- Generate markup with loops and template literals
- Leverage native HTML behavior
- Create SVG
- Use CSS variables and scope
- Implement game logic with HTML forms
- Animate SVG with CSS
- Use CSS Animation to provide motion
- Use Pug Mixins
- Disable motion when users don't want it
- Apply visual effects using CSS filter and backdrop-filter
- Generate random animations using Pug and CSS variables

Cascading Style Sheets bring order and beauty to our applications.

Tic Tac Toe with CSS and SVG

In Introduction to Python, we will start at the beginning: Installing python 3 and using virtual environments. With a working environment, we will learn how to manipulate strings and numbers, and gain working knowledge of data structures and flow control. We will build on that by introducing modules and classes and learn how to interact with our python applications using command line switches, console input and files.

At the end of this course, you’ll have a great working knowledge of Python, fully capable of creating your own Python projects from scratch or jumping into an existing application with the capability to read, understand, and contribute to the application.

Check out these [**community notes for this course on Github**](https://github.com/eggheadio-projects/introduction-to-the-python-3-programming-language-notes).

Python is a widely used dynamically typed programming language. It allows for many different programming paradigms including object-oriented, imperative, functional programming, and procedural styles.

python

Introduction to the Python 3 Programming Language

Dynamic data gives us the opportunity to build dynamic components. Dynamic components are reusable and make building large-scale applications so much easier. In this course, Juri Stumpflohner will take us through the specific use case of of creating a tabbed component which allows us to dynamically define new tabs.

On our journey of implementing this component we will learn about how we can dynamically instantiate components, leveraging the `ComponentFactoryResolver` and `ViewContainerRef`.

Furthermore we will explore how to define view templates, how to pass them to our dynamically instantiated components as well as how to pass data into those templates. All of this will be powered by `ngTemplateOutlet` and `ngTemplateOutletContext`.

Create Dynamic Components in Angular

Gain efficiency in navigating and manipulating text in VSCode. If all you’re using right now is your mouse, you’re leaving a lot on the table in terms of efficiency. 

VSCode gives you the ability to detect patterns in text and manipulate those patterns as you see fit. e.g. when you’re renaming a variable, you don’t want to rename just the declaration but all the uses of that variable in one file. Do so in just a few key presses.

Visual Studio Code is an integrated development environment (IDE) built and maintained by Microsoft. It is offered free of charge.

vscode

Text Manipulation in VSCode

Once you’ve nailed the fundamentals of React, that’s when things get really fun.

This course teaches you advanced patterns in React that you can use to make components that are simple, flexible, and enjoyable to work with. 

You'll start with a simple `<Toggle />` component that you'll progressively refactor to each of the patterns. Throughout the course, you’ll see the benefits of each pattern and how they can be mixed-and-matched to make your components more useful (and simple for everyone who comes across them).

Kent C. Dodds has built and shipped components using each of these patterns. Along the way, he will help you understand and weigh the trade-offs of each pattern so you’ll intuitively know where to apply each of them in your own components. 

You’ll finish the course with a list of actionable things you can do, right away, to rework the components that you're building. You’ll complete the course more knowledgeable about React components and equipped to make your components more simple.

Note: This course covers **class component patterns** and is still interesting and valuable for the serious React developer, but for most current apps you'll probably want to use [React Hooks](httsp://next.egghead.io/q/q=hooks).

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

React Class Component Patterns

A series of lessons to help you get more familiar with modern JavaScript syntax.

ES6 and Beyond

No matter what type of app you’re building, you're going to need to fetch data, display it to a user, and enable the user to interact with and update that data. This interaction and updating phase is often asynchronous by nature which presents you, the developer, an opportunity to provide a range of different experiences depending on the scenario.

In some instances, you can leverage what is known as optimistic UI updates for an improved, snappier user experience compared to a traditional “loading/waiting” experience. They aren’t suited for every use case, but selectively making use of optimistic UI updates throughout your application can have a significant impact on the quality of user experience for relatively little cost and complexity!

In this course, we’ll walk through implementing optimistic UI updates in the real world example of liking and unliking a tweet. We'll use React's built-in state and make use of extracting setState updater functions to help manage and better define our setState usages. 

Optimistic UI Updates in React

elm-ui is a novel iteration on declarative styling where you can use Elm types and functions to define your UI in a declarative way. The novel part is that it does not require you to know CSS to be used, you can start building layouts right away!

You'll learn how to:
- use a declarative mindset for building UIs
- position elements on the screen
- create layouts with rows and columns
- build a form with elm-ui

Elm is a programming language that provides a clean functional syntax for writing HTML web applications. It promises zero runtime exceptions, fast rendering, time-travel debugging, and much more.

Declarative UIs without CSS with elm-ui

VSCode can be used for almost any programming language or framework. That encompasses quite a few workflows. 

Through extensions and built-in features, you can customize VSCode to suit the workflow you need that will support your development.


Development Workflows in VSCode

A lot of the time, web apps are built primarily with the desktop layout in consideration, and the mobile layout suffers as a result. In this course we are going to discuss using features of user interface which are optimised for mobile devices.

We are going to discuss CSS features that make a big difference and build entire components that work great on mobile devices and browsers. We are going to take into account browser support to ensure our users are getting the experience we want them to.

More and more of our users depend on their mobile device to use our web apps. With this in mind, we are going to look at how to optimise the components we build for smaller viewports, and how to ensure our customer gets an optimised version of our web app for their device.

We are going to discuss different ways we can view, test, and debug our web app in a mobile setting so that we know what we are seeing is what our user is seeing, because sometimes a desktop browser emulating a mobile device just isn’t enough.


HTML 5 is the structure of our web pages. It is the markup that represents the DOM (document object model).

html

Optimize User Experience for Mobile Devices and Browsers

This playlist covers various aspects of CSS including different rules, selectors, and patterns

CSS Tips and Tricks

React hooks can be used to add state to functional components, as well as replace the lifecycle methods that only class methods had available until now.

This playlist goes through several different hooks available now in React, as well as how to make your own custom hooks!

React Hooks in Function Components

***Note: RxJS imports have changed since the publication of this course. Operators now must be passed into `.pipe` to be applied to an observable.***

In this course we will begin with nothing more than an empty directory & a text editor. Through small, focussed lessons we’ll learn how to setup a React project that uses Redux for state management and redux-observable for asynchronous actions. We’ll see how ‘epics’ are registered and how they each receive a ‘stream’ of actions from the store. 

With an understanding of how things work, we’ll move onto solving common problems such as Ajax cancellation, creating sequences of async actions, enabling code reuse through higher-order Observables and much more. 

## **UPDATE:** 
This course is outdated, view updated material here: [Asynchronous State Management with redux-observable v1](https://egghead.io/courses/asynchronous-state-management-with-redux-observable-v1)

Up and Running with redux-observable

React 16.8.1 was just released, and hooks are finally stable! If you have literally 12 minutes to spare, you can learn how to use hooks (useState, useEffect and useMemo) as well as brand new React features such as React.lazy and React.memo.

Enjoy!

Topics

Instructors

Content Type