Resources for Web Developers in 2022

These lessons cover converting a React app from using traditional CSS loaded from a file to styled components.

Bite-size video tutorials for badass web developers.

egghead

Styled Components

Dealing with forms in React can seem intimidating. This playlist is a work-on-progress compilation of short screencasts about the subject. (And, it uses hooks throughout!)

For the curious, I have also [wrote articles on forms in React](https://goshakkk.name/on-forms-react/) and even self-published an ebook, [The Missing Forms handbook of React](https://goshakkk.name/the-missing-forms-handbook-of-react/)

Working with Forms in React

ES2016 standardized only two new features: the exponentiation operator and the Array.protoype.includes method.

ECMAScript 2016

Watch Later

MDX has grown rapidly since the first commit two and a half years ago. We'd like to celebrate our accomplishments so far, and talk about what lies ahead. We've got lots of plans.
Learn how MDX increases developer productivity, improves educational content authoring, and even peek behind the curtains to see how MDX works.

MDX is an authorable format that lets you seamlessly use JSX in your markdown documents. You can import components, like interactive charts or notifications, and export metadata. This makes writing long-form content with components a blast.



MDX Conf 2020

Create an asymmetric promotional grid using CSS Grid. Then optimize it to make it much more readable for other devs (or your future self). 

- Future Lesson: Support older browsers

Cascading Style Sheets bring order and beauty to our applications.

Create and Optimize an Asymmetric Promotional Grid with CSS Grid

Learn how you can use ramda.js to bring functional programming concepts into your JavaScript code. Ramda offers composability and immutability right out of the box, so you can leave your imperative code behind and build cleaner, more maintainable code.

Learn Ramda.js

Learn how to style your app whether it's with standard CSS or with SASS. Also learn how to take full advantage of the default core theme to create your own custom themes.

NativeScript for Angular Styling Tips/Tricks

This playlist is designed to get you up and running from no node.js experience to developing your own applications as quickly as possible.

Jumpstart to Node.js

Now, from Zeit, is the best thing that's ever happened to deployment. Learn how to use this tool to launch your app to the world in moments.

Ridiculously Easy Deployment with Now

Bootstrap allows customization of its UI library at compile time using SASS variables. In React we can do better by theming at runtime using a context based theme. We also look at overriding component styles and styles that depend on component nesting.  

React Recompose: Theme UI Libraries at Runtime Using Context

These are all of my egghead.io lessons that are about webpack.

webpack from Kent

Get to know Javascript's Array. Learn to harness it. Learn to embrace it. Learn to love it.

Array Goodness

Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test.

redux

We’ll refactor our existing code and break the pieces of the application into their own stateless functional components. We’ll use these components to build up our UI. We’ll also see how we can use ES6 destructuring syntax to accept just the keys we need from props to keep our JSX clean.

Refactor JSX in React to Stateless Functional Components

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

We’ll define a simple state object in the entry point of our application. Once the state has been defined, we’ll pass it into our root component as props and replace the static elements in our rendered output with values from the component’s props. We’ll move from static items to an array, seeing how we can use functions like map to render our UI.

Render in React Based on a Global State Object

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

You can load resource based on the url using the a combination of `ActivatedRoute` and Angular’s `Http` service. Since the params and `Http` are both streams, you can use RxJS to get the data off the param then `switchMap` over to an `Http` request using that data.

Load Data Based on Angular Route Params

RxJS is a library for composing asynchronous and event-based programs by using observable sequences. 


rxjs

You often need to update the data flowing through the stream with custom logic based on what you need to output. This lesson covers how to use `scan` for collecting and updating the outputs as your stream progresses.

Updating Data with Scan

React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.

react-native

In React Native you utilize the NavigatorIOS component in order to implement routing. In this tutorial, we'll walk through the app we'll be building in this series as well as how to add routing to your app.

Set up Basic iOS Routing with React Native

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

We see three varied examples of where natural transformations come in handy.

Apply Natural Transformations in everyday work

Sometimes we want to test our Redux reducers to make sure they work as expected. In this lesson we will walk through setting up some Redux reducer tests for common situations and edge cases.

Styled Components

Working with Forms in React

ECMAScript 2016

Watch Later

MDX Conf 2020

Watch Later

Create and Optimize an Asymmetric Promotional Grid with CSS Grid

Learn Ramda.js

NativeScript for Angular Styling Tips/Tricks

Jumpstart to Node.js

Ridiculously Easy Deployment with Now

React Recompose: Theme UI Libraries at Runtime Using Context

webpack from Kent

Array Goodness

Refactor JSX in React to Stateless Functional Components

Render in React Based on a Global State Object

Load Data Based on Angular Route Params

Updating Data with Scan

Set up Basic iOS Routing with React Native

Apply Natural Transformations in everyday work

React Testing: Redux Reducers