Resources for Web Developers in 2022

These are some of my egghead.io lessons that are focused on JavaScript.

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

JavaScript from Kent

This collection of videos teaches you how to use [KeystoneJS](https://v5.keystonejs.com) to build a CRUD-ready GraphQL API, coming with an automatically generated Admin UI. 

Starting with a blank file, we will create an API by:
- defining "Lists" as content types
- adding fields (Select, Text, Checkbox, ...) to our lists
- customising access control to define what users can (and cannot!) do with our API.

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

graphql

Build a CRUD-ready GraphQL API + Admin UI with KeystoneJS

A collection of CSS tricks to tackle various problems.

Cascading Style Sheets bring order and beauty to our applications.

CSS Tips and Tricks

AngularJS is an incredibly powerful framework but sometimes it can be confusing and frustrating trying to figure out how all of these amazing features actually fit together. In this series, you will learn how to build a non-trivial AngularJS application from the ground up through a series of small, digestible lessons. 

As we build out our sample application, Eggly, you will quickly start to identify useful techniques that you can apply to your own projects.  The videos series is broken out into three series so that you can start at whatever level is most appropriate for you.

### Getting Started

In this first series, we are going to focus on the absolute essentials for getting an AngularJS application up and running. We will start with a static HTML page and learn how to bootstrap an AngularJS application and add in functionality using AngularJS views and controllers. When we complete this section, you will have a functioning Eggly application where you can create, update and delete bookmarks and filter them based on the selected bookmark category. 

Don't miss **[Part 2: Application Architecture](https://egghead.io/course/angularjs-application-architecture)**!



AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

AngularJS Fundamentals

Dendron is a Visual Studio Code extension that allows you to easily manage your personal notes. 

You can use it to track your daily todos or reference notes. 

Features Dendron ships with:

- markdown
- markdown preview
- fast note navigation
- fast note creation
- backlinks
- opt-in note schemas
- note graph

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

vscode

Upgrade your note taking workflow with VS Code and Dendron

Learn how to use the [AWS Cloud Development Kit (CDK)](https://docs.aws.amazon.com/cdk/latest/guide/getting_started.html#getting_started_install) to create and deploy a [DynamoDB table](https://aws.amazon.com/dynamodb/) with [Next.js](https://nextjs.org).

- 🛠 API Route to handle CRUD actions
- 📦 AWS CDK for Infrastructure as Code
- 🔓 IAM role to restrict permissions
- 🚀 Deploy instantly to [Vercel](https://vercel.com)

You can view the completed code [here](https://github.com/leerob/nextjs-aws-dynamodb). 

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

Using DynamoDB with Next.js

VSCode ships with quite a few features that aren’t immediately apparent. This playlist will guide you through some of the features VSCode has to offer and get you comfortable navigating and editing files in it.

Learn: 
- VSCode Command Palette
- Configuration
- Navigation
- Custimization

VSCode Basics 

Bite-size video tutorials for badass web developers.

egghead

Gatsby Docs

In any programming language or JavaScript framework, you’ll find yourself writing certain lines of code over, and over… and over again. That can be automated. VSCode uses the idea of snippets to do this. Snippets allow you to define templates that write the boilerplate for you in whenever you need.

You can define your own snippets, download them as a package from the Marketplace or use Emmet (pre-installed) to save time and avoid writing boilerplate or commonly used patterns.

Code Generation in VSCode 

**Note:** This is recorded with an older version of React and many things have changed. The core concepts are still accurate, but there are some technical differences you’ll need to work through. 

**This course serves as an excellent reference for React Class Components.** This can be very useful for legacy code bases.

React is a "javascript library for building user interfaces" from the fine folks at Facebook & Instagram. It strictly focuses on the "V" in your MVC applications, and touts a blazing fast virtual DOM diff implementation.

This series will explore the basic fundamentals of React to get you started.

When you've finished with this series, be sure to check out [React: Flux Architecture (ES6)](https://egghead.io/courses/react-flux-architecture-es6) for real-world React application development.


React with Class Components Fundamentals

Anything related to JavaScript performance

Javascript Performance

Theming using TailwindCSS and CSS Variables

In these lessons you’ll learn how to create a collection of primitive components that will allow you to create complex user interfaces, which are responsive, consistent, and maintainable. All without writing any custom styles. We’ll create components to manage layouts and whitespace, text and headings, basic user interface elements, and learn how to compose complex user interfaces from primitive components. 


Component-driven development in React

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

La nueva API de React Hooks permite utilizar diferentes patrones de forma sencilla, directa y funcional.

En esta colección encontrarás un paso a paso para construir un componente complejo utilizando diferentes patrones de diseño implementados gracias al uso de la API Hooks.

Comenzaremos con un sencillo componente `<Wizard>` que hace uso del hook `useState` y en cada lección iremos mejorando la implementación mediante el uso de diferentes estrategias.

En la última lección tendremos un componente Wizard completamente flexible al uso del usuario y habrás aprendido el uso de los hooks `useState`, `useReducer`, `useContext` y `useEffect` junto con algunos patrones de diseño populares en la construcción de aplicaciones con React.

Podrás encontrar el código y notas para cada una de las lecciones en el [repositorio en github](https://github.com/matiasfha/egghead-build-wizard-with-hooks-collection).

Cada lección tiene un directorio asociado dentro de `src`, 101, 102, 103, etc. Dentro de cada directorio encontrarás el archivo fuente para el componente `Wizard.js` y un archivo `App.js` con el código que utiliza el componente además de algunas notas extra en el archivo `Readme.md`


Construye Componentes Avanzados con React Hooks y Patrones de Diseño

Learn how to create tuples in Python. The videos in this collection will also cover more advanced features of tuples

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

The Ins and Outs of Python Tuples

Next.js is a React framework that provides a solutions to problems such as:

- 🌟 bundling & transpiling your React code
- 🌟 code splitting
- 🌟 being able to switch between client side rendering & server side rendering depending on the page (e.g. landing page vs. settings page)
- 🌟 client-side routing

In this collection we're going to learn how to harness the power of Next.js + TypeScript and how to work with Netlify in order to deploy our site for others to enjoy!

Learn how to:
- 🔥 Create a new Next.js project
- 🔥 Add TypeScript support
- 🔥 Create styled components with Emotion
- 🔥 Use both static and dynamic routes
- 🔥 Generate fully typed static pages
- 🔥 Set up Netlify deployments
- 🔥 Add a Netlify Form to our site
- 🔥 and more!

Next.js is a minimalistic framework for server-rendered React applications.

Build a site from scratch with Next.js, TypeScript, Emotion and Netlify

Crea Temas con TailwindCSS y Variables CSS

As developers, we're often working closely with APIs to make requests in the browser or on the backend with a server, but we might not always know exactly how those requests work or how they should look.

Postman is a tool that lets us create, manage, and test API endpoints all within a UI so we can wrangle our APIs and understand how they work.

The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed, collaborative, hypermedia information systems. It is a generic, stateless, protocol which can be used for many tasks beyond its use for hypertext, such as name servers and distributed object management systems, through extension of its request methods, error codes and headers.

http

Create, Manage, and Test API Requests with Postman

Amazon Web Services (AWS) is a powerful expansive cloud infrastructure platform for building modern web applications.

AWS provides services for data, presentation, authentication, security, video encoding, and much more. Offering over 175 fully-featured services from data centers globally, AWS powers a large percentage of the internet.

Learn Amazon S3 from scratch

In this collection, we explore creating CSS art and illustrations by walking through creating the Egghead.io logo with CSS.

We walk through everything from planning and creating a responsive foundation, to creating shading effects with `box-shadow`.