Using the Rails scaffold generator edutechional 2016-01-31 | Watch how to run the Rails scaffold generator to build out the CRUD functionality for the application. Go through the full Scaffold guide here: http://rails.devcamp.com/rails-project-photo-uploader-tutorial/ruby-on-rails-application-creation/how-to-use-the-scaffold-generator-in-rails
Live Event! ReacHire and Bottega University! edutechional 2022-04-21 | Join Now! Live Event Happening! 8:00pm EST
Live Event! Build Animated Components that Render on Scroll! edutechional 2022-04-07 | Join Now! Live Event Happening! 8:00pm EST
Live Event! Build Animated Components that Render on Scroll! edutechional 2022-04-06 | Join Now! Live Event Happening! 8:00pm EST
Live Event! Finding Success By Creating It! Join Bottega University as we go live! edutechional 2022-03-17 | Join Now! Live Event Happening! 8:00pm EST
Live Event! Learn how to Build a Dark Theme Style Generator in React! edutechional 2022-03-03 | Join Now! Live Event Happening! 8:00pm EST
Live Event! Learn How To Build Out Web Applications with Bottega University! edutechional 2022-02-17 | Join Now! Live Event Happening! 8:00pm EST
How to Implement an Animated Sliding Pane in React JS edutechional 2022-02-04 | In this guide you will learn how to build out an animated sliding pane in React, including the ability to manage the pane's visibility state, passing data to the pane and customizing how the pane is styled.Objectives:- Install the React Sliding Pane library- Utilize React hooks to manage the pane’s visibility- Implement CSS overrides to customize the styles for the sliding pane- Configure the React Sliding Pane size to dynamically change based on screen sizeCode:github.com/bottega-code-school/workshop-react-sliding-pane
HTML/CSS Coding Workshop: Animate Text with HTML SVGs & CSS edutechional 2022-01-06 | After completing this workshop, you'll be able to:- Generate text based SVGs in HTML- Build animations for text based SVGs- Apply custom colors to SVGs with CSS- Work with the viewport values for SVGs in HTMLSource code:github.com/bottega-code-school/workshop-html-animated-textSVG Documentation:developer.mozilla.org/en-US/docs/Web/SVG/Element/svgdigitalocean.com/community/tutorials/svg-svg-viewboxdeveloper.mozilla.org/en-US/docs/Web/SVG/Element/defs
How to Utilize Reacts Context API to Build a Login Form edutechional 2021-12-02 | After completing this workshop, you will be able to:- Create React Context and Provider components to share data throughout an application.- Render the pages a user can access based on a user’s login status.- Build a login form that communicates with an API server to create a secure authentication session.Source code:github.com/bottega-code-school/workshop-react-context-auth
React Hooks Workshop: Build Mouse and Viewport Based React Hooks edutechional 2021-11-04 | Learn about mouse and viewport events in React by building an image spider with a customer cursor and see how you can access the exact positions of page elements and the user's cursor to create dynamic views.After completing this workshop, you'll be able to:- Implement React hooks to keep track of mouse and page element position values- Build a React component with the ability to override the default browser cursor- Integrate a custom cursor in an image sliderSource code:github.com/bottega-code-school/workshop-react-mouse-screen-hooks
Building a Dynamic Layout in React edutechional 2021-10-07 | Learn how to create a re-usable list component in React that allows for rendering grid and list based data along with filtering data.After completing this React tutorial, you'll be able to:- Model a React component that can take a collection of child components.- Build React state behavior that allows for toggling between different layout types.- Utilize React Router to keep track of a page's state- Implement click handlers that auto filter data- Configure a select field in React to communicate with a component’s local stateSource code:github.com/bottega-code-school/workshop-react-dynamic-list
Build a QR Code Generator in React + TypeScript edutechional 2021-09-02 | In this live coding session, we'll walk through how to build out a QR Code Generator in React with TypeScript.After going through this videos, you will be able to:- Work with the qrcode.react library- Build a component that generates QR codes that point to URLs- Customize a generated QR code's styles- Implement the ability to embed images into a QR code- Create a function that programmatically downloads the QR code using HTML canvas tags and JavaScript's toDataURL functionStarter code:github.com/bottega-code-school/workshop-qr-code/tree/starterFinal version:github.com/bottega-code-school/workshop-qr-code
Build a Drag and Drop Interface in an Hour with React Beautiful DND edutechional 2021-08-05 | In this live coding workshop you'll learn how to build out a drag and drop interface in React by implementing the React Beautiful DND library.After completing this workshop, you will be able to:- Configure a React application to utilize drag and drop tooling- Work with an array of objects in React and render them to the screen- Build out drag and drop components that update the position of page components- Model how a position change could communicate with a server via an API call- Utilize React hooks to update data on the page- Work with React refs and the context API- Use TypeScript in a React applicationStarter code:github.com/bottega-code-school/coding-workshop-react-drag-and-drop/tree/starterFinal version code:github.com/bottega-code-school/coding-workshop-react-drag-and-drop/tree/master
Deep Dive into Website Animations with Scss edutechional 2021-07-08 | In the workshop, you will learn how to build out multiple types of animations for websites, along with building tools to call the animations throughout an application.After going through this Scss coding workshop, you will be able to:- Create CSS keyframes to define animation rules- Build Scss mixins that allow for calling the animations throughout an application- Implement CSS classes that call Scss animation mixins- Integrate the animations into a React JS applicationSource code:github.com/bottega-code-school/workshop-scss-animationsCSS animation documentation:developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animationsAnimation generator:animista.net
How to Call and Render API Data in React edutechional 2021-06-03 | In this React JS live coding workshop, you'll learn how to:- Build a function that retrieves data from an API- Implement a JSON parsing system for extracting data from an API- Populate API data into a component's state using React hooks- Render API data onto the screenYou can access the source code here:github.com/bottega-code-school/workshop-api-introductionThis coding workshop was performed for students of Bottega University:https://bottega.edu/
Create a Custom React Hook to Add Responsive Features to an Application edutechional 2021-05-06 | In this live coding workshop you will be able to learn about React JS hooks completely from scratch (or extend your knowledge if you already work with them)- Integrate JavaScript Listeners- Utilize the useState hook to keep track of component’s state- Work with the useEffect hook to dynamically update a component’s state- Build a custom hook that enables responsive behavior in ReactStarter code:github.com/bottega-code-school/workshop-react-hooks-introduction/tree/starterFinal version:github.com/bottega-code-school/workshop-react-hooks-introduction
Automate your Development Workflow with Terminal Shortcuts edutechional 2021-05-04 | In this guide you'll learn how to utilize aliases in the Unix terminal using Zsh or Bash to automate a number of tasks, including:- Quickly navigating to specific directories- Automatically creating or accessing files from anywhere on your system- Startup servers- Easily access data that you need to access on a regular basis
Capitalize Every Word with JavaScript / TypeScript edutechional 2021-04-17 | In this tutorial, you'll learn how to build a function that capitalizes every word in a sentence using JavaScript / TypeScript. We break the problem down into two functions:- A function to capitalize a single word- A function that splits a sentence up into separate elements, capitalizes each word and then returns the formatted stringSource code:github.com/jordanhudgens/typescript-4-course/blob/main/capitalize.ts
Build a QR Code Generator in Ruby edutechional 2021-04-14 | In this Ruby coding tutorial, you'll learn how to build a QR Code generator script that allows you to create PNG QR Codes that direct users to a URL. Additionally, you'll learn how to utilize ARGV which allows you to pass data to Ruby Scripts.Source code:github.com/jordanhudgens/ruby-3/blob/master/qr_generator.rb
Live Coding Workshop: Build Website Tooltips using HTML and CSS edutechional 2021-04-13 | In this live coding workshop, you'll learn how to:- Design a pricing table- Utilize object-fit to get images of varied sizes to fit in a layout- Utilize advanced techniques for managing border radius styles- Implement media queries for mobile responsive behavior- Build a tooltip feature using HTML and CSSSource code:github.com/bottega-code-school/workshop-html-css-tooltip
How to Access the URL Params in React with React Routers useParams Hook edutechional 2021-04-13 | This guide walks through how to utilize React Router's useParams hook to get access to the URL params data for a route, such as a dynamic ID in a route.Source code: github.com/jordanhudgens/react-client-dashboard/tree/260f740bcf5ae4dcd532dc20ce274431bea02541
How to Navigate Between Pages in React with React Router edutechional 2021-04-12 | This comprehensive guide walks through how to get started with routing in React applications, including how to:- Upgrade to the latest versions of React Router and React Router Dom- Create React functional components that can be used as pages- Define routes- Work with the Link tag to link between pages- Organize components and call them from separate filesReact router documentation: reactrouter.com/web/guides/quick-startSource code: github.com/jordanhudgens/react-client-dashboard/tree/79348d358e6e4a3dd10eea43d41f3acd6fa4e956
How to Create a Custom Cursor in HTML and CSS edutechional 2021-04-10 | This deep dive on HTML/CSS cursors explains how to work with the various cursor options in websites, along with how you can create and implement your own custom cursor.Cursor generator: cursor.ccHTML and CSS Cursor documentation: developer.mozilla.org/en-US/docs/Web/CSS/cursor
Practical Stack Data Structure Example: Reverse a String in Python edutechional 2021-04-10 | This data structure guide walks through a practical example use case for the Stack structure. In the lesson you'll learn how to reverse a string, which illustrates the behavior of the Stack data structure.Video where I show how to build the Stack class: youtube.com/watch?v=LDVg4m2PpTg&t=7sSource code:github.com/jordanhudgens/algorithms-in-python/blob/master/stacks/reverse_string_with_stack.py
Easy Way to Understand How Optional Chaining Works in JavaScript and TypeScript Applications edutechional 2021-04-08 | This TypeScript programming tutorial goes into detail on how optional chaining can be utilized to streamline conditionals in an application. Practical ways that optional chaining can be used:- Ensuring that data render attempts are only attempted after an application receives data from an API- Allows for cleaner, more maintainable code since the conditionals can be built directly into the program instead of having to build 'guard' based conditionals.- Preventing errors from occurring when a server sends unexpected dataSource code:gist.github.com/jordanhudgens/594f96cfd50475331eedde28e2be3edb
Comprehensive Guide to Modules in Ruby 3 edutechional 2021-04-06 | Ruby modules can appear to be very similar to Ruby classes. After going through this you'll be able to:- Understand the difference between Classes and Modules in Ruby- Build out Ruby modules- Work with nested modules- Combine Classes and Modules- See how modules can be used in large-scale, production Rails applicationsSource code:github.com/jordanhudgens/ruby-3/blob/master/ruby_modules.rb
Comprehensive Guide to Rendering an Array in React with TypeScript Types and Interfaces edutechional 2021-04-03 | This React tutorial explains how to iterate over an array and render each item on the screen. It teaches:- How to render an array of items with React- The importance of the key prop and React's performance based diffing engine- How to define a set of types and interfaces with TypeScript to describe the rules that the application needs to follow- How to implement inline styles with ReactSource code:github.com/jordanhudgens/introduction-react-typescript-applications/tree/046c12a459de5fb79e52770362bcb31d9a9ef10c
How to Build a React Component with TypeScript Interfaces edutechional 2021-04-01 | This guide walks through how to build React components that utilize TypeScript interfaces. This illustrates the power of using TypeScript with tools such as React since they can help guide the development process and document the rules that the application should follow.Source code:github.com/jordanhudgens/introduction-react-typescript-applications/tree/57747ec707f03b8c0a0dd0b397b1d2da55843e68
How to Generate a React Application that Uses TypeScript edutechional 2021-03-30 | Configuring a React application that utilizes TypeScript can be challenging if you have never done it before. For that reason, I built out a node module that you can use that will generate a fully functional React application that already has TypeScript integrated. Some of the key features of the module are:- Automatically configured to run TypeScript 4+ code- Example React components that utilize hooks- Webpack setup for development and production environments- Loader integration for TypeScript, React, assets and Scss compilation- Pre-configured to allow for deploying to React applications to HerokuHere is the NPM page with the installation instructions:npmjs.com/package/devcamp-js-builder
How to Work with Required and Optional Keyword Arguments in Ruby 3 edutechional 2021-03-19 | Ruby offers multiple ways to work with keyword arguments, including setting a list of required, named arguments, along with optional arguments. In this guide we'll walk through how to work with both options.Source code: github.com/jordanhudgens/ruby-3/blob/master/keyword_arguments.rb
Code Implementation of the Stack Data Structure in Python edutechional 2021-03-17 | This Python coding tutorial walks through how to implement the Stack data structure in Python. This includes:- Building out the initial data structure- Creating the push method to add an item to the stack- Creating the pop method to pull an item from the stack- Along with showing the difference between the push and peek processesSource code: github.com/jordanhudgens/algorithms-in-python/blob/7f902d5dbadd3f34c8cef4c8f7b1451d232b116e/stacks/stack.pyOnline python coding environment: https://repl.it/
How to Use GitHub for Automated Kanban Project Management edutechional 2021-03-16 | In this guide I walk through how to utilize GitHub as a project management tool. In the project management tutorial I show:- How to create a Kanban based project management board on GitHub- Automation tools for marking tasks as complete- How to utilize checklists for sub tasks- Utilizing labels for filtering project topics
How to Build Animated Flipping Cards Using Just CSS edutechional 2021-03-04 | Learn how to build animated flipping cards using only HTML and CSS.After going through this code tutorial, you'll be able to:- Implement a website layout using both Flexbox and CSS Grid elements- Work with CSS variables- Build animated styles into websitesStarter code: github.com/jordanhudgens/workshop-html-css-flipping-cards/tree/starterFinished project: github.com/jordanhudgens/workshop-html-css-flipping-cardsThis is a recording from a live workshop for the Bottega Code School, go to https://bottega.edu for more information.
Easy way to Understand the Gemfile in a Ruby on Rails Application edutechional 2020-08-10 | This Ruby on Rails tutorial walks through an overview of how to work with the Gemfile. I also demonstrate how to install a RubyGem dependency, along with showing how to manage the Gem version.Gemfiles can actually be used by any type of Ruby application so, it's not specific to Rails. But what we're going to walk through in this lesson is going be specific to a Rails app, and we'll walk through exactly what a Gemfile does. And then we're gonna see how we can use it by installing an actual dependency into the project.
Mobile Development with React Native edutechional 2020-05-06 | Jordan Hudgen's explains how to build immersive mobile apps for Android and IOS
Mobile Development with React Native edutechional 2020-05-06 | Jordan Hudgen's explains how to build immersive mobile apps for Android and IOS
Difference Between React Native and Native Programming Languages edutechional 2020-04-28 | In this guide, we are going to focus on the key differences between a tool like React Native and the other mobile native programming languages that are out there, such as Swift or Android Studio/Java/Kotlin. If you're relatively new to the space, especially the space of mobile development, all of these terms and these languages and these frameworks can all get a little bit confusing, so I will walk through the key differences between them, which will hopefully help you understand which option is gonna be the best one for you, either to learn or to build with.What we're gonna look at are the tools like React Native, the Expo.io framework, the Swift programming language, and then Java and Android Studio. We'll look at code examples, and at the very end of the guide, we're gonna through a pro and con list between those two options.If you want to learn React Native from the ground up, you can go through it with me in the comprehensive mobile development training track from the Bottega Code School, you can learn more here: https://bottega.tech/mobile-development/
How to Fix the Postgres Gem BuildError edutechional 2020-04-19 | This guide walks through how to fix the pg gem install error that says:Gem::Ext::BuildError: ERROR: Failed to build gem native extension.We'll walk through how to find the version of postgres installed on your machine along with the pg_config file. We'll also run the gem install pg command with the pg_config path flag.
Example of How to Build a Vim Macro edutechional 2019-05-20 | This guide shows you how to create a macro in Vim to help automate tasks when it comes to editing files. In the example, I show how to remove the lines for a 600+ line text file to remove the meta data and format the content.You can checkout my full Vim course on Udemy:udemy.com/user/jordanhudgens
Implementing the Logout Functionality in React edutechional 2019-05-04 | This final guide in the Ruby on Rails + React JS authentication course walks through how to build a logout feature in React that will communicate with the Rails API and log the user out of the application by deleting the session cookie.This is tutorial 10 out of 10 in the course, please check out the React + Rails API Authentication playlist for the full course, all for free!Source code:github.com/jordanhudgens/react-auth-app
How to Check if a User is Logged In with React edutechional 2019-05-03 | This React JS tutorial shows how to check to see if a user is logged in each time they access the application. We also examine how to pass the logged in status through render props to child components.Source code:github.com/jordanhudgens/react-auth-app
Building the Login Component in React JS edutechional 2019-05-02 | This React JS tutorial explains how to build a login component that will allow the application to communicate with the Ruby on Rails API authentication and verify that a user is authenticated or not.This will utilize tools such as Axios, HTTP requests, React JS, and Ruby on Rails.This guide is 8 of 10 in the Ruby on Rails + React JS authentication course.Source code:github.com/jordanhudgens/react-auth-app
React JS Render Props for Managing the Logged In State and Redirecting Users edutechional 2019-05-01 | In this React JS tutorial, we're going to see how render props work so that our React application can manage the login state for the authentication process. This will tie into the registration and login component and allows for our components to know if a user is signed in or not.This is part 7 out of 10 in the Ruby on Rails + React JS authentication course.Source code:github.com/jordanhudgens/react-auth-app
Building the React Registration Component edutechional 2019-04-30 | In this episode in the course, we will build out a registration component in the React application and connect it to the Ruby on Rails authentication API.This is part 5 of 10 in the Ruby on Rails + React Authentication course. Checkout the playlist for all of the course videos.GitHub course code:github.com/jordanhudgens/react-auth-app
Generating and Configuring the React JS Authentication Application edutechional 2019-04-30 | In this guide we will generate and perform the initial configuration for the React JS application. This will provide the foundation for the registration, login, and sign out features that we will be building in the next few guides. This is part 5 of 8 in the Ruby on Rails + React JS authentication course.Resources:Application source code: github.com/jordanhudgens/react-auth-appReact app generator library: npmjs.com/package/devcamp-js-builder
Configuring the Rails API Session Store to Work in All Environments edutechional 2019-04-28 | This is part 4 of 8 in the mini course where we walk through how to build Ruby on Rails + React authentication applications. In this guide we complete the Rails API application and update the session store so that we can use different stores for development and production environments.The full source code can be found here:github.com/dev-guides/rails-api-authentication
Implementing the Registration Controller and Final Authentication Features in Rails edutechional 2019-04-27 | This is part 3 of 8 for the Ruby on Rails API + React authentication course.In this guide we are gonna build out the registrations controller so users can create accounts in our system via the Ruby on Rails API. This will enable the the React application to create user accounts in the Ruby on Rails app.
Building the User Model and Session Controller for the Rails API Authentication App edutechional 2019-04-26 | In the last guide in this playlist (youtube.com/watch?v=z18zLCAg7UU) we built out the initial Ruby on Rails API authentication app.In this guide we're going to extend the Rails API application and build out the User model so that it can securely create a username and password that users will be able to work with to sign in, register, and logout.Full guide here:crondose.com/2019/04/building-the-user-model-and-session-controller-for-the-rails-api-authentication-app
Ruby on Rails App Creation and Initial Configuration edutechional 2019-04-24 | Hi, and welcome to this course where we are going to learn how we can create a Rails API application that uses authentication and works with a React JS app. So the use case for this is if you want to built out your own authentication from scratch, especially if you're building out authentication for a front end application. So if you want to add a registration and a sign in component to react or to angular or Vue JS, then this will walk through exactly how to do that.Now we are going to be implementing HTTP only cookie authentication. There are two popular types of authentication. One is to use HTTP only cookies. The other is to use what are called JWT tokens. Now I prefer to use HTTP only cookies, mainly because it leads to a much more straight forward interface.With JWT tokens, you generate these randomized encrypted tokens and then both sides of the application have to do quite a bit of work to one, make sure that the tokens are still accurate and that they're still matching, that they haven't been hijacked and the front end application has to store it in local storage or something like that.And then the back end constantly has to check that, and it feels like that's not really the best fit, especially if you're a rails developer. With rails, you have the ability to utilize the session and so what the session does, if you're familiar with MVC applications, you can store anything you want in a session, such as if a user's logged in or not, and what we can do with an API can actually take advantage of this same exact set of features. So we can use the session the same way we would with a traditional MVC app, even though it's an API.So we're gonna walk through all of the steps needed in order to do that. In this guide, we're going to generate a Rails API application from scratch, and we're going to add the dependencies needed for building our own authentication.Full guide here:crondose.com/2019/04/ruby-on-rails-app-creation-and-initial-configuration
Easy Way to Understand the VueJS Component Lifecycle Hooks edutechional 2018-10-06 | In this Vue.js tutorial, we are gonna take a deep dive and look at the lifecycle hooks provided from the Vue framework.Now, we're going to analyze the lifecycle diagram, and then go and implement this into a Vue application. We're also going to extend it, because this lifecycle set of hooks and what they list in the documentation is helpful for understanding, because it's a helpful visual. But I think that it's missing a couple of elements that I personally have had to implement into my own production Vue applications, and so I think it will help for you to see those as well. So we're gonna walk through quite a bit of material in this guide.So I have a Vue application running right here in the background, and we're going to be looking primarily just at a few different components. So we're going to be looking at a dashboard component, a Vue component right here, and then that has the nested login component. And so what we're gonna be doing isn't as much building in this guide, we're instead gonna be looking and analyzing to see how exactly the lifecycle process works.If you are not aware of this, if you've never heard of the lifecycle, or if you're just trying to understand it for the first time, the best analogy that helped me is trying to compare a Vue component to us humans.So as a human, we are born, we go through different stages in life, and then, even though it may seem dark, we all die at some point. Well, that's the way a Vue component works too. A Vue component is born. We say that a Vue component is created, then it has a number of things happen. It has changes go on, such as data changes, and updates, and those kinds of. And then at a certain time, it also dies, or we say that it is destroyed.So what we can do with Vue is we can actually listen for and capture those events, each one of those, from created all the way through destroyed, and then update the application based on the state of the component.So hopefully that starts to make sense. But what really help understand the lifecycle hooks and the entire process was really just getting in and implementing each one of the methods.I'll provide in the show notes a link to this documentation, 'cause that can help to have a visual. But I think what helps the most is just going in and writing the code.So I'm going to switch back to our application here, and then opening up Visual Studio code here, you can see that we have our homepage component, which is just rendering out some content, and then our login component. And that's pretty much it. That's pretty basic right now.So we're gonna start in the dashboard, and I'm gonna go out, and I'm gonna start listing some of these hooks. Now, right now we have a pretty basic setup where we have our data function, then we have a list of the components that we are registering, and then we have one custom method. I usually by convention place these lifecycle hooks right above the methods, I like to have my methods at the very bottom, so I know exactly where they're at. But you could technically put these anywhere inside of the script tag, as long as it's right after the default curly braces.Now, I'm going to just list off a couple basic ones here first. So I'm gonna say beforeCreate(), and it is a regular method, so you have to have the parens right after it. And then I'm going to console.log and then say beforeCreate, just so we know exactly what's happening here. And then for this one, I'm also gonna say this afterwards, 'cause this can be really helpful in understanding what we're referencing. And then make sure you put a comma there. And then after that say created.Now, unlike some other methods or names inside of Vue, these are reserved words. So before create is something provided by Vue directly. Created is something provided by Vue. So these are reserved and they are names and functions that are built directly into the Vue source code.I'm going to copy this console log here, and then change this to say created. And I'm not gonna pass in this or else it'll make the output a little bit messy, and you'll notice that the this that it's referencing is gonna be the same for all these elements. So let's just start with these two, and then we'll get into some of the other ones after this. So switching back to the browser, I'm going to clear the output, hit refresh, and now you can see that we have some console log statements here. We have before create, and then created. So both of these worked. So they were triggered. Notice that we didn't do anything. All we did was we listed them out inside of the component.#vuejs #javascriptFull guide and code:crondose.com/2018/10/comprehensive-guide-to-the-vue-js-component-lifecycle-hooksFollow me:Twitter: twitter.com/jordanhudgensInstagram: instagram.com/jordanhudgensGitHub: http://github.com/jordanhudgens
