Test you Site

Here you will find some links that will be able to help you to test your site.

Google PageSpeed Insights

Here you will be able to plug the URL of your site and this Google tool will provide you with some recommendations: Link

Category: FED | Comments Off on Test you Site

React: Tools & Errors

Here you will find some of the Tools & Error that I encounter while working with React.JS

API

Here you can find a list the most important API’s or search for them: ProgrammableWeb.

Error: Cannot find module ‘../scripts/start’

The solution for this one is found in: Link or just type the following commands:

React Developer Tools

Manual for how to use the Chrome-React Dev Tools: Link 

This is a great Tool that will help you to do better development in React.JS.

.

Category: React | Comments Off on React: Tools & Errors

React Clock App

This is the code to create a basic React Clock, to start use the the INIT:”Create-React-App” – Bare Bones instructions, after that here is the code to utilize on the files.

The GitHub repository: React-Clock-App-1

 

 

Category: React | Comments Off on React Clock App

INIT: “Create-React-App” — Bare Bones

Hello here I will provide instructions in how to set up a basic bare-bones: Create-React-App  Template, this is the basic foundation for creating an application.

00 – Installing the Create-React-App  Library.

In case you don’t have installed the “Create-React-App” Pre-Build-Enviroment configuration library follow this: Link  There follow the instructions under the title: Installing:  Create-React-App.

01 – Initialization of Project:

On the Terminal: CD… to the Directory, where you want to create the React.js Application.

After testing and knowing all works, next DELETE the content of the “src” directory.  and create fresh new files on its place:

  • index.html  
  • index.js  
  • 01-Comp.jsx  
  • style.css

02 – Boiler-Plate Code:

Code to be placed on the Files to Link them and get them ready for DEVELOPMENT:

And this template is ready for a good Hack. ;-).

.

Category: React | Comments Off on INIT: “Create-React-App” — Bare Bones

INITIALIZE: “Create-React-App” + “BootStrap”

Hello here I will provide instructions in how to set up a basic bare-bones: Create-React-App  Template, this is the basic foundation for creating an application.

01 – Initialization of Project:

On the Terminal: CD… to the Directory, where you want to create the React.js Application.

After testing and knowing all works, next DELETE the content of the “src” directory.  and create fresh new files on its place:

  • index.html  
  • index.js  
  • App.jsx  
  • style.css

02 – Installation of basic Libraries:

Now lest install React Bootstrap:

Step 1. Install React Bootstrap and Bootstrap from NPM.

– –   – –  Note:  – –   – –

If you will use the code on the Boiler-Plate Code you can ignore steps: 2 & 3.

Step 2. Import Bootstrap CSS and optionally Bootstrap theme CSS in the “index.js” file:

Step 3. Import required React Bootstrap components within “App.jsx” file or your custom component file.

Now you are ready to use the imported React Bootstrap components within your component hierarchy defined in the render method.

03 – Boiler-Plate Code:

Code to be placed on the Files to Link them and get them ready for DEVELOPMENT:

And this template is ready for a good Hack. ;-).

.

Category: React | Comments Off on INITIALIZE: “Create-React-App” + “BootStrap”

Music-Master React.js App

Notes on the creation of the Music-Master React.js App

CD to the folder where you want to create the app and execute the commands:

Now DELETE the content of the “src” directory.  and create fresh new files on its place: index.html, index.js, App.jsx, style.css:

Stage: 1

Testing Bare Bones

Stage 2:

Basic: HTML + JSX structure, CSS.

 

.

Category: React | Comments Off on Music-Master React.js App

Utah JS – CLOSURES

So…  What is a Closure?

MDN: Closures are functions that refer to independent (free) variables (variables that are used locally, but defined in an enclosing scope). In other words, these functions ‘remember’ the environment in which they were created.

The way I see it: A closure is an “Individual Instance of Function withing a Function that refer to its own Independent variables” and those are “_Private variables” that  belong to this specific instance, those variables do not get Garbage Collected. This means that the closure remembers and have access to “its own instance of: Siblings-Variables and Environment” from where this closure was created, even after the “Outter: Function, variables, & Environment” was Garbage collected.

This closures are Inner Functions that have access to the Outer function, and global variables, the “Inner Closure function” can be “Named” or “Anonymous”.

Whit this information we can say that closures are” New, Secure, and Independient Instances of a Functin withing a Function that can remember the enviroment in which was created. Now lest do a little comparation with the last class of Prototype.

Things to keep in mind when using JS-Closures

  • They are secure (Notpads).
  • Not a Silver Bullet.
  • Heavy on the resources.

In JavaScript often there are few ways to do the same thing, so choose wisely if you need to use JS-Closures, the following are some examples of Closures in Action.

Jen Silva Taco-Truck

This example is about “Jen“, she grab her savings and purchase a Taco-Truck, in this enterprise she decide to use the power of JS-Closures to run the Payroll, click the following link to see a website with the live example:  Jen Taco-Truck.

This example provide a hypothetical example of one use of the JS-Closures.

OCTO-CATCH

For  “JS” Jen Silva taco business has been good and now she es branching out, she partner with the hotel HYATT ZIVA down in Puerto Vallarta Mexico, there she will run a side business where the guest of the hotel can Scuba-Dive to Catch Octopus. The following is an explanation of how the business work:

You Purchase a Diving Package:

  • 5 Dives.
  • 5 Oxygen Tanks, each tank last 1 hour ( 1/3 Rule ).
  • Number of Octopus allow to catch on each dive: Variate.
  • Morning Catch Free Game (at your own risk).

 

Here is the official website: OCTO-CATCH.

JS CENTURY BANK

Times has bee good and “JS” decide to branch out again and now she has open a Bank. Yes you heard it right, one of those financial institutions where we deposit our money for safe keeping and other reasons, and she decide to use JavaScript Closures to handle the Account Information required in such enterprise.

The mechanics are simple, when a new customer desires to open an account an employee uses the company portal to create the account make deposits and print information about the Accounts.

Here is the official website: JS CENTURY BANK.

Wrap-Up

JavaScript Closures is one great tool you should have in your tool box, we already know that this is Not a Silver Bullet but it is a bullet, and under right circumstances you can use it, and Kill IT, just remember that tools are as good as the hands that use them, so we need to keep growing at our craft, and practice.

I hope this article on JS-Closures was of help to you, now is time for a call to ACTION.

  1. Study Closures.
  2. Thanks event organizers.
  3. Add me to LinkedIn: Edmundo Rubio.

All code is Live in the websites and the following: GitHub Repo.

I leave you with a philosophical thought:

Coding is when we take time to find and develop solutions for every day problems, combining the computing power of machines and the far reach of the internet, to create TOOLS that are easily available and a solution to those every day problems.

“First we build tools, then they build us”  Marshall McLuhan.

Category: JS | Comments Off on Utah JS – CLOSURES

Regular Expressions

A regular expression (regex or regexp for short) is a special text string for describing a search pattern. You can think of regular expressions as wildcards on steroids. You are probably familiar with wildcard notations such as *.txt to find all text files in a file manager. The regex equivalent is ^.*\.txt$.

And here is an example in how to use them:

a second diagram of the same case with different explanations:

for more information: Link-1  —  Link2  —  Link3  —  MDN

Regular expression playground/testers:   regexr.com   —  regex101.com  —  regexpal.com

Or you can use this link to go to another page with a complete cheat-sheet: LINK

This is an example that I use in one Kata:


In this blog post I keep the flavor or Regex to a JavaScript tone.

Now lest review some of the basics of RegEx:

  • Literal characters: a
  • MetaCharacters: wild card

Meta Characters:

 

 

To use a regular expression in a IF( … ) statement we can use the methods:

x.match( regex )    — String type

x.test( regex )   —  Method in the RegExp prototype.

and an example code would be:

 

.

Category: Miscellaneous | Comments Off on Regular Expressions

Consepts & Definitions

Here we will create a little place were I will be posting, new, interesting, challenging, important, etc…  Consepts and Definitions of React:

  • React Components – re-usable and independent pieces of React code that comprise the User Interface.
  • ES6 importing and exporting – a new syntax for sharing code between separate files. Used in cases like import React from ‘react’
  • State – the pertinent data to an application. Each component has its local state as long as you declare add the constructor to a Component and declare its state object.
  • Updating State – When updating state, make sure to never mutate state directly. Doing so will lead to fatal errors in your application. Instead, re-declare new instances of state arrays or objects and use the setState() function to update state.
  • Props – similar to state, except this data inherits from parent component specifying pieces of state as properties.
  • LifeCycle Methods – events in React components that trigger in cases such as rendering on or off the screen, or during state updates. One example is the componentDidMount() lifeCycle hook.
Category: React | Comments Off on Consepts & Definitions

React 1rst App: Countdown + Installs

In this example we will use tools like: Node.js and NPM   so if you dont have them install you should get them now.

Installing:  Create-React-App

Also to make the typing easier install the following packages for Atom: emmet, language-babel,  now  Enable-Tab-Completion-for-JSX-with-Emmet-in-Atom.

Install React-Bootstrap: Link

This is a fast way to create apps that utilize a GitHub Repo call: Create-App  first you need to install it using:

After that create the development folder where you will be creating your projects. and cd .. to that folder, then when you are ready to create the directory that will contain the app, type:

It will take a little time but in the end yo will see the installation lines ending with the following information and commands:

Now lest test the app that was just created, cd to the directory newly created:  ” cd 02-countdown ” and then lest start the server:

And you should see the app running and working, with the rotating react logo, this is just a template and now is time to build our app, lest begin wit deleting all the files ins the Directory ” src ” because here is where we want to create our own, files. but we will keep the: index.html and the other folders for now.

Now on the same folder ” src ” create a new file name: “index.js” and that file is the one where we will create the app.

1rst lest test the server with our code, in the ” index.js ” file type, the following code and refresh the browser.

If you see the text in the browser, congrats, now is time to start, the app, to do this we need to create a new file call ” App.jsx ” where we will be coding the on JSX, and we will be exporting the components to our ” index.js ” to be render to the ” index.html “.  to do that we will have the following files:

Stage 1:

Now lest create a STATIC page with the elements that we want, latter we will make them DYNAMIC, you will also notice that we add, the files: “index.html”  &  “style.css“:

State 2:

Reading from the Input box and Updating the Tittle with that info.  No changes to: index.html  –  style.css  –  index.js

Stage 3:

Here we have a functional App, that is capable of taking new dates and rendering the remaining time automatically every second. there were No changes to: ” index.html  style.css  index.js ”  in the other hand we have changes in ” App.jsx ”  and we add a new file ” Clock.jsx “, but I will post all files here.

Stage 4:

Adding React-Bootstrap, and other minor changes.

Stage 5:   Build App in Static Files

Stop the server by:  [ Ctrl + C ]  then type the command:

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

Stage 6: Deployment:

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 on Terminal:

The URL that I got is:  https://fierce-beyond-38072.herokuapp.com/

Video with deployment: Link

State 7: Update Live app

Make changes on local files, 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 Previous URL and Refresh.

.

Category: React | Comments Off on React 1rst App: Countdown + Installs