Docker tutorial for beginners - part 1: Free Digital Ocean Credit! Docker is amazing, and it doesn't have to be difficult to understand. In these tutorials, I'll be breaking down exactly what a Docker container is and how to use it. I've found a lot of Docker container tutorials on the web, but I still hear from developers that it's hard to grasp exactly what Docker is and how to work with Docker images & containers. In this video, I'll compare Docker to Vagrant and explain the differences, then in the next video, we'll do our first miniature deployment with Docker by creating a Digital Ocean machine with Docker installed and then running a Docker web server container on the machine. Later on, we'll get into docker machine, docker compose (fig) and a whole mess of other fun tooling. Next up: how to run your first Docker web server - High-Availability Docker 1: - Cluster computing - CoreOS is our solution here. CoreOS allows us to make an expandable cluster of computers so we can add more computers should our application need more power to scale. CoreOS also allows us to run services on any machine in the cluster and they can all communicate with each other. High-Availability Docker 2: - Scheduling: we shouldn't manually choose which app runs on which machine - this idea doesn't work at scale. Fleet will be our scheduler that decides where our apps/services run. If a CoreOS machine goes down, fleet will reschedule any services that it was running onto a new machine. High-Availability Docker 3: - Service Registration Since we never know what ip address or port a service will be running on, we need to register that service so other services can find it and communicate with it. We'll use Etcd and Flannel for this High-Availability Docker 4: - Service Discovery: Now that services have registered, we can discover them and load balance between them with a generic docker nginx container High-Availability Docker 5: - Public DNS: Once the app is working, we need a fixed way for the outside world to access it. We'll use Nginx and Confd for this. Confd will watch Etcd for service registration and when services come/go, it will build a new configuration file for Nginx and reload Nginx.
Not using a build system/task runner? You're missing out. A build tool like Grunt, Gulp, Brunch, etc will drastically improve your local development workflow as well as your deployed website. After watching this, checkout the next video on building your first system with Grunt: In this video, I'm going to cover: - What a build system does for you - Why you need one - What a task runner can do for your local development workflow - How to improve performance for your website in production The bottom line is, a good build system will take your web development to a whole new level. It can feel like a lot of setup, but you only code it once.then use it for the life of your project. It's well worth the effort!
A big question in React JS is State vs Props. State is essentially any data that relates to the internals of a React component, but has nothing to do with the outside world. Props are data that the React.js component depends on to function and render correctly. GET THE SOURCE CODE: React JS 1: Intro & Workspace Setup (Coming Tues, Feb 2@11CST) React JS 2: Anatomy of a Component (Coming Wed, Feb 3@11CST) React JS 3: Composing Multiple Components (Coming Thurs, Feb 4@11CST) React JS 4: State, Props & Data (Coming Fri, Feb 5@11CST) React JS 5: Events & Data Changes (Coming Mon, Feb 8@11CST) React JS 6: React Router & Intro to Single Page Apps (Coming Tues, Feb 9@11CST) React JS 7: React Router Params & Queries
MobX is AWESOME. It makes React.js programming fun and it.just.works. GET THE CODE: THERE ARE 2 BRANCHES: master for where we end up and start for where we start. MobX builds on the concept of observable values. When React observes a value, it can automatically update the UI whenever the value changes. This makes programming with MobX and Reactjs extremely simple. All it takes to begin is to install mobx and mobx-react and make sure that you are transforming class properties and decorators in Babel. Now, you simply add @observable to your MobX class and you've successfully built a MobX observable store. To observe the store, you pass in a MobX store as a prop and you decorate your React component with the @observer decorator. Voila.you're reacting to store changes in React.
Yarn is the hot new drop-in NPM replacement utility for projects using node.js packages. It's way faster, more stable, and more secure than NPM and you can use it with zero configuration on your end. In the sample for this video, the NPM install takes between 20 and 30 seconds for just a few packages, while the yarn install takes 4-10 seconds to install all of the node packages. Yarn is also more predictable across environments, so you don't need to npm-shrinkswrap anything, because Yarn manages the dependency tree with a yarn.lock file automatically.
Redux middleware is awesome, it allows you to keep the simplicity of Redux, yet extend it's functionality. Adding global things like loggers, error handlers, etc are incredibly simple. In this react redux tutorial, we're going to create a redux logger middleware and error handling middleware that intercept every redux action in our react.js app. As you see, adding redux middleware to our react app is incredibly easy.
In under 10 minutes, we'll have a production and staging server running on AWS Lambda using Serverless. This AWS Lambda tutorial shows how powerful functions as a service are and how easy it is to get up and running with them. The Serverless framework helps you get up and running in production in 3 commands. (2 if you already have the AWS CLI installed!)
Free RESTful API to use for practice!: In this jQuery AJAX Tutorial for beginners, we're going to be covering an introduction to using jQuery to access a JSON API (Application Programming Interface) to get data and populate it into the document. jQuery AJAX is powerful and is the first step to making dynamic websites that respond to the user actions as they happen. The first part of using jQuery AJAX to access a JSON API is to make a GET request, so this jQuery lesson covers how to make AJAX Get Requests with jQuery & JSON. Lesson 1: jQuery Tutorial for Beginners Lesson 2: Listen to user events and respond with jQuery actions! Lesson 3: Clean up the jQuery by putting some data in the HTML Lesson 4: DOM Traversal with jQuery Lesson 5: Building a jQuery Tab Panel Widget Lesson 6: Building a jQuery Slider / DOM Caching Lesson 8: Ajax Pt 2 - posting data to the backend
Get your site online as cheap and quick as possible! Tons of people have asked me how do I get my site online ? And here's how. I recommend HostGator (), since they have the best customer service as well as the best price. For $6/mo, you get unlimited domains/websites, so if you're building websites for other people, you can bill them monthly and not have any expenses increase. All you need is a Domain Name: $12/yr Webhost: $5-10/mo I recommend HostGator () Free FTP Program: I recommend Cyberduck () We're going to get a webhost & domain, open an FTP connection to it, upload our files to our webhost, and then we're done!
Get the code here! Many Node.js developers don't know that Node by default only uses one core of your processor. It's intentional and it's a great move. It just means that you have to run cluster to get the full capacity out of your server. When cluster.js runs, it spins up one copy (fork) of your application for each core on your machine, and balances the traffic between them. It also listens to each fork, so if one dies, it spins up a new one in it's place. Clustering is a great way to add stability to your application and drastically increase it's load capacity.
Nginx ROCKS! In this Nginx Tutorial, we're going to setup Nginx to receive http requests to our domain name (port 80), then proxy to our Express.js Node.js App, which is running on port 3000. View Nginx Configuration Code here: We're also going to set it up Nginx load balancing, so the http requests will get evenly distributed between all of our servers. See full documentation on Load Balancing (upstream) here: Lastly, we're going to setup static file caching on Nginx, so our css, js and image files are only served from our Node.js application the first time.this DRASTICALLY improves application performance.
Vagrant and VM's can RADICALLY shape your development workflow. Instead of every developer working on their own local server with their own configuration, you can configure a portable local environment that exactly mirrors your staging and production environments. Now developers can spin up this environment on their machine and work completely locally without having to change their machine configuration to accommodate the project they're working on. Also, each project they work on can have it's own VM running it's own configuration that they can spin up. Also, Vagrant provides an easy-to-destroy environment to practice your Linux server administration skills! Here's the Gist on how to follow along:
Let's build a Flux app with React. Flux is a pattern that Facebook created for building consistent, stable web apps with React. React really doesn't give us a way to manage data, it simple accepts data through props or state. So, when it comes to data, there are many ways you can do it. Flux is a great, proven pattern for building apps with React. GET THE SOURCE CODE: React JS 1: Intro & Workspace Setup (Coming Tues, Feb 2@11CST) React JS 2: Anatomy of a Component (Coming Wed, Feb 3@11CST) React JS 3: Composing Multiple Components (Coming Thurs, Feb 4@11CST) React JS 4: State, Props & Data (Coming Fri, Feb 5@11CST) React JS 5: Events & Data Changes (Coming Mon, Feb 8@11CST) React JS 6: React Router & Intro to Single Page Apps (Coming Tues, Feb 9@11CST) React JS 7: React Router Params & Queries React JS 8 - React Inline Styles & Component Arrays React JS Flux 9 - React Flux Tutorial React JS Flux 10 - Flux Store Events (Coming Mon, Feb 22@11CST)
This Redux tutorial series will show you the schematics of a Redux application. Redux is AWESOME, but it takes a bit to get it setup. There really aren't a lot of moving parts, but there are a lot of ways that you can configure it - namely - configure the store. Redux is like Flux in several ways, but it's different as well. It has these pieces: - Provider: wraps your application, injecting the store - Store: one large store that contains the state for your entire application - Reducers: reducers listen to actions and make changes on the store values. They also cannot mutate the data on the store in any way, but must return a new set of data. - Actions: pretty much just like flux actions, the only difference is that async can be handled in multiple different ways depending on store middleware - Components: React components can be injected with various pieces of store data. React components also trigger Redux actions. This is what makes it all come together.
Let's build a bare-bones Redux app to help you understand how simple it can be. Redux is incredibly simple once you understand where everything goes and what's happening under the hood. GET THE CODE! In this React Redux tutorial, I'll give you a Redux Introduction that shows the bare-minimum requirements to get a Redux app started. You'll notice that there isn't even a React application that I'm using. That's because Redux is not based on React, although it plays beautifully with a React ecosystem. Redux is an elegantly simple way to manage state for your applications. React, Angular.almost any app can plug into a Redux store.
Github Tutorial For Beginners - learn Github for Mac or Github for windows If you've been wanting to learn Github, now's the perfect time! Github is seen as a big requirement by most employers these days and is very critical to business workflow. This Github tutorial will cover the basics of how to use Github and the command line. Lesson 2: Pull requests, Branching merging Other Videos: jQuery rapid-learning Course
Everyone keeps saying how great web development is, but how do you get that first job? This video is a response to the questions I've been getting about how to land that first web development job and how to know when you're ready to take the leap and look for one. The first thing you have to know is that you don't have to be a seasoned pro to get a job as a full-time web developer. There are LOTS of companies looking for web developers that don't have much experience. Also, there are a lot of things you can do to prepare your resume to really stick out to a prospective employer. This video will give you a feel for what an employer will be looking for and what they'll be grading you on as you look for a job in this industry. Github Intro: Github Pull Requests: jQuery Course: _
With jQuery is easy to make things happen, but easy doesn't always mean right! In this lesson, we're gonna make our 20 lines of code compact into 4 lines of code.and it will be better code This will involve selecting HTML elements by classname and getting a custom HTML5 attribute value with jQuery. Lesson 1: Lesson 2: Lesson 4:
If you're not using a task runner/build system like Grunt or Gulp, you probably need to! Build systems make your websites load faster, code faster, deploy better.it's like a cocktail bomb for coder happiness. Before watching this video: - what is a build system? - what is node.js? So what is Grunt? It's a task runner. It runs tasks - things you have to do every day, or don't do every day because it would take too much effort. With Grunt, instead of spending your time DOING the tasks, you spend your time AUTOMATING the tasks once, then run them in no time for the rest of the project.
Once your store is in place, you'll want to set up multiple Redux reducers to act on parts of your data store. Redux reducers are great in that they are only aware of part of your data, and the rest of the data is neither reachable nor able to be mutated by your reducer. GET THE CODE! Reducers are a great concept in Redux, because they allow your react application to have specific pieces of data that all update synchronously. All reducers run against your Redux store, and then the store triggers a change event and your entire React.js application re-renders. The biggest thing to keep in mind with Redux reducers is you don't want to mutate your state. ALWAYS return a new state rather than mutating the old state values.
If you deploy websites with FTP STOP! There are much better ways to deploy a website, much more stable, reliable ways, faster ways. In this tutorial, I'll show you how to deploy a website with one command with flightplan in just one quick lesson. Here's the Gist from this video: I HAVE HOSTGATOR COUPONS!* () drop25perc (25% off) drop10bucks ($10 off) What is Node.js?: What is GitHub?: SSH Tutorial: * I recommend Hostgator so often that I became an affiliate.if you don't like that idea, feel free to use hostgator without the coupons or use any other host you like.as long as they allow SSH!
React Virtual DOM helps you avoid a lot of memory leaks, but they still can happen. Here's what memory leaks are, how they show up in a React JS Flux application and how to solve them when they happen. GET THE SOURCE CODE: . React JS 1: Intro & Workspace Setup (Coming Tues, Feb 2@11CST) React JS 2: Anatomy of a Component (Coming Wed, Feb 3@11CST) React JS 3: Composing Multiple Components (Coming Thurs, Feb 4@11CST) React JS 4: State, Props & Data (Coming Fri, Feb 5@11CST) React JS 5: Events & Data Changes (Coming Mon, Feb 8@11CST) React JS 6: React Router & Intro to Single Page Apps (Coming Tues, Feb 9@11CST) React JS 7: React Router Params & Queries React JS 8 - React Inline Styles & Component Arrays React JS Flux 9 - React Flux Tutorial React JS Flux 10 - Flux Store Events (Coming Mon, Feb 22@11CST) React JS Flux 11 - The Flux Dispatcher (Coming Tues, Feb 23@11CST) React JS Flux 12 - Flux Actions (Coming Wed, Feb 24@11CST) React JS Flux 13 - Async Flux Actions React JS Flux 14 - React Flux Memory Leaks
This video covers how to compose a complete React.js application component structure by building multiple components that all work together to build our application. GET THE SOURCE CODE: React JS 1: Intro & Workspace Setup (Coming Tues, Feb 2@11CST) React JS 2: Anatomy of a Component (Coming Wed, Feb 3@11CST) React JS 3: Composing Multiple Components (Coming Thurs, Feb 4@11CST) React JS 4: State, Props & Data (Coming Fri, Feb 5@11CST) React JS 5: Events & Data Changes (Coming Mon, Feb 8@11CST) React JS 6: React Router & Intro to Single Page Apps (Coming Tues, Feb 9@11CST) React JS 7: React Router Params & Queries
This 3-part series covers deployment of nodejs applications. - You'll spin up and provision a server on digital ocean Promo Link for $10 server credits: - Setup automated deployment - Then refine the deployment of your app to run as an upstart service Prerequisite video! - SSH Tutorial: What we're doing in these videos is called automated-deployment. It's a part of devOps. DevOps is a set of tools/practices that focus on having a streamlined, heavily automated and reliable strategy development, deployment & monitoring of web applications. We're going to setup a way to deploy our node app with a single command.
React Router has great and simple features for accessing route params and query params. Let's get into them. GET THE SOURCE CODE: React JS 1: Intro & Workspace Setup (Coming Tues, Feb 2@11CST) React JS 2: Anatomy of a Component (Coming Wed, Feb 3@11CST) React JS 3: Composing Multiple Components (Coming Thurs, Feb 4@11CST) React JS 4: State, Props & Data (Coming Fri, Feb 5@11CST) React JS 5: Events & Data Changes (Coming Mon, Feb 8@11CST) React JS 6: React Router & Intro to Single Page Apps (Coming Tues, Feb 9@11CST) React JS 7: React Router Params & Queries React JS 8 - React Inline Styles & Component Arrays