Reactstrap – Linkin Park

Here is some documentation in how to use a library call: “REACTSTRAP

This library can be help with fast creation of: “COMPONENTS

Fast creation of: Menus, Forms, Buttons, Navs, Pagination, Tables, etc….

for more information about what version of BootStrap: Link  –  Vid1 – GitHub

 

STYLING COMPONENTS

  1. Styled-components
  2. Glamorus

 

Here is a basic Responsive layout created with Create-React-App + Bootstrap

File Tree

Here is the code:

This is just a quick hack that I did to use BootStrap in React.js

 

Category: React | Comments Off on Reactstrap – Linkin Park

React Basics

Here is a place were I will put some of the basic building block for React.js

The most basic React.js App

Basic App + Stateless Component

Class Components:

Basic CSS Stailing:

The following code will render:

Code:

REACT STYLING

In the previous Styling exmple use use a external file and is ok under the “Separation of Concers” but in React if you want to create a real independent COMPONENTS, all the code should be inside the component that included the CSS. Using this technique we should get the following results:

And here is the code:

That is how you do it.

Complex Components Practice

In this exercise I create the following design:

To create this I use the Create-React-App Bare-Bones. Then create the following File Tree:

And here is the code:

For More details see the GigHub Repo: LINK

Category: React | Comments Off on React Basics

Layouts

LayOuts for a quick start

Layout 1 – Basic Responsive

This is for an app created using: Node.js Express.js EJS BootStrap Font Awesome, this is what should look like:

To see more details about the PARTS, app.js, etc see the GitHub this is page-10: LINK

Here is some of the CODE.

Make sure to see the code in the “parts” folder

Category: Node | Comments Off on Layouts

Deploy Node.js to Heroku

Create a GitHub Repository and add the GIT in your Local Machine (Even if is a subfolder of a Git).

  • git init
  • git add .
  • git commit -m”Adding Files”
  • git remote add origin https://github.com/Edxael/…..
  • git push origin master

 

Follow Instructions in Documentation: LINK

Create the files:

 

Update file “package.json” add missing data, compare to This File: LINK

 

Install: “Heroku CLI”  –> LINK  example in how to do it below:

 

Mega GOTCHA:  

 

Open the terminal in your PWD for your app:

Deploying to HEROKU

 

 

 

Category: Node | Comments Off on Deploy Node.js to Heroku

Postman + mlab

Here is the code from my study notes while working with Postman to add “Documents” to the “Collection” in a database hosted online in mlab. Here is also code to pull the data from the database and show it the browser and the “Terminal Console”.

File Tree:

Here is the PostMan Google Chrome configuration to add documents to Collection:

Now Here is the code of the Files:

SERVER.JS

01-TEMP1.JS

PACKAGE.JSON

Using this code I was able to add documents to my DataBase on mlab.

Here is the PostMan Google Chrome configuration to UPDATE documents FROM Collection:

Here is the PostMan Google Chrome configuration to DELETE documents FROM Collection:

.

Category: Node | Comments Off on Postman + mlab

Web Dev Class – Content Creation Documentation

Hello this post is intended to provide guidance in how to add content to the classes for the Utah Department of Work Services – Refugee Division Classes.

The following is the basic documentation of how to contribute in the content creation.

Content Creation Info

 

Target Audience:

This class will be to complete beginners with no programming background, Mostly High School Students, and some adults too.

 

Due Date:

There is no a hard date yet but the center is shooting for the 1rst week of October 2017. and that is our due date.

 

Class Schedule:

Saturdays 2 hrs. class, and the program will run for 25 weeks time, the program is composed of 3 separated blocks:

  1. Web-Design Intro
  2. JavaScript Intro
  3. WordPress Intro

NOTE: 

  • JavaScript & Web-Design Block each section should be 1-hr content.
  • WordPress Block each section should be 2-hrs content.

For the 1rst part of the class we will have two blocks (Web-Design & JavaScript) taking 1 Hr. each. those will be teach one after the other the same day, until week 16,

Then during the 2nd part, the word-press block will run for a single two hrs class for the next 6 weeks.

There are 3 more weeks leave as a buffer for holidays or extra projects. at the end.

The following image show how the 3 blocks of the class will run.

In the example picture before, we are supposing that the Web Development Course run from 1:00 pm to 3:00 pm, as right now the coordinatosr do not know the real schedule but they confirm that will be a two hrs class each Saturday.

if yo have any questions about this let me know, is very important that you understand this, so keep in mind that when creating content if you are creating a section for Web-Design or JavaScript you should create enough content to cover 1 hour, but if you are creating one section for WordPress, each section must have enough material to last 2 Hrs of teaching in class.

 

Online Portal:

The students and Instructors will be using the portal actually located: class.mycode.website   We will be creating the content material for this site, this is a word press site, this is the place where you will be adding the content.

Currently the site is hosted in my sever, in the near future this site will be migrated to the Refugee Center Server, the URL will change, I will let you know when that happens.

 

Content Creation Work:

Most work will be online, so we do not have to meet to work, I will be providing Usernames and Passwords so yo can add content any time and any where you have time. but if you want to meet or just hang out let me know, and we can go for a burger.

For more instructions in how to add the content to the Online Portal, see the video below where I do an example.

NOTE: Try to incorporate videos from Plural Sight in the homework or during class, for one example see: Block JavaScript Section 5.2.

All students have access to Plural-Sight, and the center will provide you with an account to each of you, I will send you login Credentials soon.

 

What to do:

To have order, we need to know who is doing what, other wise we run the risk of two or more people working on the same section, and that would be BAD, to avoid that we will be using a Google doc spread sheet with a color code that shows what parts are in done, what parts are in development and by who, and what sections no one has work on and you can take one and do it, the color code is is in Column J.

  • The spreadsheet: LINK

 

Communication:

The official way to communicate will be using the existing Slack URETC Tech Classes for that class, we can use email and phone too, but Slack is better, to see the general discussion on that channel follow this LINK

To be more specific we will be using a sub-channel call: ” content_creation ” and here is the LINK 

 

Teaching:

After completion of the content creation, if you or someone you know would like to teach one class one Saturday or more than just one, sing you name in the Schedule. Link

Note: I will create the schedule once I have the dates.

How to Add Content:

The following video is an example in how to add content.

 

 

For questions, send me a message in Slack, or you can E-Mail Me.

We truly

Category: Miscellaneous | Comments Off on Web Dev Class – Content Creation Documentation