Add Two Numbes

In this class we will learn how to add two numbers and display the result using JavaScript, in order to do this easy for every one, here are some videos that show the process from beginning to end of this project.

01 – Explanation of Project:

 

Here is a short explanation of the scope of the project:

02 – Set-Up Project:

Steps to setup the files and environment for the project:

03 – Index.html File:

Here is the HTML code:

04 – Style.css File:

Here is the CSS code:

 

05 – JavaScript code.js File:

Here is the JAVASCRIPT code:

 

This is a very simple example of JavaScript DOM Manipulation, please email me if you have any questions.

Edmundo Rubio.

 

Category: Web-Dev-Training | Comments Off on Add Two Numbes

Hosting a Website

By now you know how to create websites, now it time to get them LIVE on the internet for everyone to see what you just created, this little tutorial will guide you in how to take the file that you created and put it live in the internet.

in this case we will use the following example as our website.

This is a website about fitness without a GYM. and the code can be found on GitHub: Hosting-Example.

 

****************************************************************************************

Now is time to get this site LIVE on the INTERNET:

To do this we need to host it, on a server. and here are the instructions of how to do this, using a Free Hosting service.

01 – Go to the site: www.biz.nf

 

****************************************************************************************

Next are two videos that teach step by step how to upload a website to a free hosting:

Note: watch the videos “Full Screen”.

****************************************************************

01 – Instructions in how to create an account:

****************************************************************

02 – How to Upload the files to the server.

****************************************************************************************

And here is the link to our new website: www.nogym.co.nf

****************************************************************************************

Here are some examples made for some of the students.

Camila (Spain): www.doolaylay.co.nf

Worakarn Rojjanawat (Thailand): www.myfavsinger.co.nf

knomjean (Thailand): www.singerknomjean.co.nf

 

Category: FED, Web-Dev-Training | Comments Off on Hosting a Website

What is the Internet

When building houses is important to have the blueprints, another thing that can provide important information is where the house will be constructed, knowing more about the location, can help us to make the home better.

We like to build Websites, and knowing more about where those websites will located is important, we know they will be on the internet, but what exactly is the internet??

The following are some videos that I found on Youtube, I did not create this videos, but they give a good explanation about this topics.

Now lets study a little more about DNS. or Domain Name System. (what is the name of your website and how to get there).

This knowledge can help you to understand the environment where the websites will be deploy, this are just the basics, there are much more to learn but is a good beginning.

Category: Web-Dev-Training | Comments Off on What is the Internet

3 Pilar Lay-Out – Pandorum

 

This site do not use any JavaScript, and will take time to load because some Images are not optimize for web, and other reasons, this site was created to create the “3 Pillars Lay-Out” using React.js and explore some other ways that I can create future apps.

In my HTML show sites you can find a website that I create for Ender’s Game with almost same Lay-Out and I want it to be able to replicate the same Lay-Out but using React.js.

first I create the: Bare-Bones App and then we start the modifications.

Then we create the site see the code in: GitHub

And see the live app in Heroku: PANDORUM

Category: React | Comments Off on 3 Pilar Lay-Out – Pandorum

ES6

Here are some links and information that will help us in the learning and implementation of the JavaScript 2015-ES6, some of the new features do the same that old ones do but in many cases the code running under the hood has been upgrade to be less taxing on the hardware and system requirements, in some other cases make it so we do the same but using less code and making it less redundant, and in some other cases it give us new features that previously exist only in our wishlist.

Whit no more delay, here are the links and examples for ES6.

  • Exploring ES6 (online book): LInk  —  Link2
  • ES6 New Features (online guide): LInk
  • Top 10 ES6 Features Every Busy JavaScript Developer Must Know: Link
  • How to learn ES6: Link
  • ES6 CheatSheets: LINK   —   Link2

Variables:

Template Literals:

This would be a new way for Concatenation and String-Interpolation, using “Backtics” [ ` ] <– key left of key [ 1 ]

The Spread Operator:

This provide a way to manipulate Arrays and Objects.

Another example would be:

The spread operator is an Array, and you can use any of the array methods. on it.

Destructuring Assignment – Arrays

This allow to extract data from arrays and objects into separate variables.

Destructuring Assignment – Objects

Arrow Functions:

On Arrow functions () => {}   the word “this” is not bind to the function but to the object where the function is encapsulated.


Build-In Methods

Map() Method:

This calls a function on each element on the array,

Filter() Method:

Returns a new array based on the original:

repeat()

startWith()  endsWith()  includes()

isFinite()

 

arr.reduce(…)

The “.reduce” method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

—————————————————–

Adding values from an array or numbers (next two code examples):

Note: the accumulator:

The accumulator is the first parameter: arr.reduce( ( accum, cval ) => { return accum += cval }, Accumulator );

and the Accumulator can have an initial value.

 

—————————————————–

Array to Object, with number or occurances:

The result will be:

—————————————————–

Adding values from an array of objects:

—————————————————–

Average of an Array of numbers:

—————————————————–

Concatenation of sub arrays: 

—————————————————–

Function Composition:

—————————————————–

Array of names to array of names.length:

Note:  you can do this easier with .map(…) just want to use .push(..) inside of .reduce(…) this case.

—————————————————–

Array of names to Object of name: length  

 

 

Other Methods:

There are lots of methods that can help you in your code, Here is list of Array methods from MDN: Link

And here is a list of Object Methods from MDN: Link


Modules:

Modules allow to spread data among different files, using “Export & Import” and works with: Fuctions, Objects, Primitive variables. as “let or const

The next code is an example of a regular way

Default Exports

Now the next code is based on the last one but will use the default method.

Classes

Example of a basic Class:

Inheritance in ES6 Classes or “extends” —> Example 1

In this example we are using the inherited “ greet() ” function but if you want to have one different you just need to write one and that will overwrite the one inherited.

Then we can add more data to make the Class Snake more unique. and we will overwrite the “greet()” method

** Static Methods in Classes:

This allows you access to use the methods of a class without need to create a “NEW” instance of the class.

** Classes & Prototypes

Data Structures

Maps:

Maps have Keys & Values just like an Object, the difference is that in objects we can not use some words as a key because is a “reserve word” and the key in an object are primarily strings, however in Maps you can use any kind of “data type” as a key, like: numbers, objects, and even functions.

Converting a two dimensional Array to a Map

Application, we will count how many times a character repeats on a string.

 

Closures

This tool allow us to create function factories here is one example:

Closures:  Private Methods

Generators

This new feature allow a function to Pause, return the current state of the Generator, then resume from it left it. To create ” function* ” to pause use “yield” and to resume “.next()” and we DO NOT use the word “new”  when creating instances of the generator.

I encounter several problems here find solution to WebPack

 

Asynchronous Programming

Promises:

Promises can exist in one of the three following states:

  1. pending.
  2. fulfilled.
  3. rejected.

HTTP & Fetch:

  • GET: retrives data and has no secondary effect.
  • POST: sends data to a server to add resources.
  • HEAD: ask for metadata information.
  • DELETE: removes a specify resource.
  • PATCH: partially modify the resource.

To practice go to:  jsonplaceholder.typicode.com this is a tool that simulates an API, for testing.

Scroll down and click the link: ” GET    /post/1 ” this will take you to a page were you will find some return JSON data.

But what we really want is to have this data in our program so we can manipulate it, to do this we use the following code:

But what we really want is the data, to do that we will go to the: “ __proto__: Response” and the method: ” json ”  which will convert this data into a pure JSON Object.

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –

Now lest do another example using the free API for Books from Google:

in this case we got the information for a book: “ title:Harry Potter 1 and the Philosopher’s Stone

 

 

.

Category: JS | Comments Off on ES6

GIMP

Free Image Manipulation Software.

when creating Websites and Apps there is almost always the need for Images, so far I has bee able to get away with Google and the images that I can find there, but some times there is a Image that I want in a specific size, format, or in other cases I just don’t find the image that I want, this is a small tutorial that teach how to produce images when we did not got so lucky in our Google Search.

Installation:

First we need to install it:

Now lest learn ho to use it.

Quick Tutorials:

Here are a few resources that will get you up an running, and give you some basic knoledge so you know the software, and have the skills to create some basic projects,  this will not make you a master but will give you the basic skills so you can be a little more Auto-Sufficient whit the images on your Web-Development.

***- – – – – – – – – – – – – – – -*** – – – – – – – – – – – – – – – – – ***

Getting Started with Gimp 2.8 ~ Tutorials for Beginners

***- – – – – – – – – – – – – – – -*** – – – – – – – – – – – – – – – – – ***

GIMP 101 Tutorial for Beginners: Learning the Basics: Video

***- – – – – – – – – – – – – – – -*** – – – – – – – – – – – – – – – – – ***

How to Remove Anything from a Photo in GIMP – Tutorial

***- – – – – – – – – – – – – – – -*** – – – – – – – – – – – – – – – – – ***

GIMP Tutorial – How to change Background/background removal

***- – – – – – – – – – – – – – – -*** – – – – – – – – – – – – – – – – – ***

GIMP Tutorial – How to cut out a person

***- – – – – – – – – – – – – – – -*** – – – – – – – – – – – – – – – – – ***

 

20 fantastic GIMP tutorials to get you from beginner to pro

Here are some other quick tutorials that will teach you some specific skills that will help you to create new Images. Link

***- – – – – – – – – – – – – – – -*** – – – – – – – – – – – – – – – – – ***

How to add Layers in GIMP: Link

GIMP: Quickies: LInk

 

 

Category: FED | Comments Off on GIMP

React.JS Utilities

Here is where I place some resources, articles, and other tools that can help in future React.JS projects.


/create-react-app

Original Docs. Link — Updated Link


Using Bootstrap with create-react-app

This article is very detail in how to do the integration: Link


Introducing Glamorous

A new library to Style components in React.js: Link


.

Category: React | Comments Off on React.JS Utilities

Music App 2

Hello here we will create a React.js Music App.

First create the Bare-Bones skeleton: Link

Next install BootStrap.

 

Stage 1: Build the Frame.

Here we will create a basic skeleton of the App.

Stage 2: Query Functions

Now lest add CSS. First inset the React-Bootstrap Link (in the tab Getting Started) copy the code, then go tho “index.html” and paste above the Title Tag:

Time for Styling, here you can get creative and use the colors and lay-out you like better.

Here is where I will be importing some parts from the Boot-Strap Library, one example is as follows

there are other parts that need to be imported, and also we add the functions to run the Query. the whole code:

Stage 3: API Conection

Time to bring data from the API of Spotify:

  1. Google: “spotify api”  Then select the one more similar to: “Web API – Spotify Developer” and click.
  2. Click on: Web API / API Endpoin Reference,  or click Link
  3. Search: “Search” and select “Search for an Album”
  4. Copy the text after the GET “https://api.spotify.com/v1/search” and paste inside of the Search Function. + “?“.

Note this is how it looks before we add the batics and change the syn-taxis to ES6:

During this Stage we add: console.log(“FETCH_URL: “, FETCH_URL); you can copy the URL from the console and paste it in the Browser to see the data that we are getting from Spotify.

The code for this stage:

Stage 4: Fetching Data

To acomplish this there is a very little change need, in the “01-Comp.jsx” inside of the “search()” function we add a little code.

Stage 5: Using API Data to Build Singer Profile.

Here is where we use the data from the API to create a basic “Profile” for the singer we search, with:

  • Picture
  • Followers
  • Generes.

This is how the code should look at this point:

Stage 6: Using API Data 2 Build Gallery.

Here we need to go back tot the API Website to get more data:

  1. Go back to the API: Link
  2. Click on: Web API / API Endpoin Reference
  3. Search: “Search” and select “Top Tracks”  or click: Link
  4. Copy the text after the GET “https://api.spotify.com/v1/artists/{id}/top-tracks” and paste as in the ALBUM_URL =.

In this part we will create the Image Gallery whit the pictures that we get from the API. The main change will be the creation of the Component: “Gallery.jsx” and this is the code.

If you notice there are some “className” you can see the final style.css file or just style as you like it.

Stage 7: Final Coding Steps.

Here we will make the Tracks playable using JavaScript and then we will add some CSS to make it Pretty, the final code can be found in GitHub: Music-App-2 and the app looks like:

 

Stage 8: Deployment.

After the app is DONE and no more changes are required, stop the sever [Ctrl] + [c], then is time to build the files, in the terminal type:

This will take some time and will create a directory with the name of: ” build ” with the static files inside.

 

Create a repository for the app on: Git & GitHub, push.

Log-in to Heroku:  and go to the documentation: Deploying React with Zero Conf.

Run command on Terminal:

Now is time to Push the files to Heroku, in the Terminal type the following steps.

Then you will the URL where the App is hosted, in this case I got this Link: https://salty-oasis-41018.herokuapp.com/

and you app should be live, click the Image to go to this app live.

If you need more help here is a link with a video with deployment: Link I found in YouTube.

State 9: Update Live App

If you need to make changes on to your already deploy App well, do the changes on the files on you Local Repository then:

This push should take less time because all the Node modules were install in the first release (git push heroku master).

Now go to the App URL, refresh and see the changes done.

Category: React | Comments Off on Music App 2