Linux Related

Here you will found information about different topics that are helpful to the successful use of LINUX, right below are some of the links with useful information.

How to use Linux: Link1

Youtube Channels:

 

Basic Software that I use:

  • Synergy
  • Dropbox
  • Simple Screen Recorder: Link
  • Cheese (webcam): LInk
  • VLC Player
  • QMMP Audio Player
  • Clip Grab: Link
  • Skype 4.3 for Linux: Link
  • Kden Live (Video Editing): LInk    Uninstall
  • Atom: Link

 

Make LInux Faster:

Chromium:

Chrome eats up your memory(RAM) so much. You have to disable hardware acceleration in chrome settings

Steps A:

  • Go to chrome://settings
  • Untick “use hardware acceleration when available”

Steps B:

  • Go to chrome://flags
  • Disable “GPU Rasterization”

also check how chrome uses memory ( Shift + Escape )
–Because extensions uses more memory too. If you find high memory usage in extensions (Adblockers are memory hogs), remove them too. That would help.

This would reduce the memory usage significantly.

 

– – – – – – –

LInux Hard-Drive Memory Swaping:

Note: before you execute the following make sure to install “gedit” => sudo apt-get install gedit

How do I make my Ubuntu – Mint faster. (Applies for Desktop, Laptop and Note Book)
By default, Ubuntu, unfortunately too much tendency to start using the swap (virtual memory on the hard disk). Useful for servers, but not for normal use.
This speaks Ubuntu, especially with 512 MB of RAM or less, the swap too quickly. Who writes on the hard drive slow ubuntu considerably. Virtual memory on the hard disk is simply much slower than the “real” RAM.
The swap tendency may have a value of 0 (fully off) to 100 (swap is constantly used).

First check the current tendency of your Ubuntu swap:

 

Probably the tendency to swap 60, which is only for servers is a good value. For normal home use is far too high.
Reduce the swap tendency therefore as follows:

 

The previous command will open the file in gedit.
Add at the bottom of that text file, the following lines (copy and paste):

  • Save the text file and exit Gedit.
  • Restart Your Computer: And now it’s done at 10.

Home rule is a workable example Ram = 1 GB or more 10.
Less than 1 GB Ram = 1.
So I gave him 10 standing.

 

Installing Flash on FireFox for VUDU.COM

LInk with instructions: LINK

 

Using “SOLAAR” as a substitute of “Logitech Unify”

Once again the Open Source community to the rescue, with the creation of Solaar. an opensource solution for paring Logitech Wireless devises with the receivers, the address of the project: Solaar.

To take advantage of this software use the following commands:

after that you can open the graphical interface to do the paring, you might need to unplug and re-plug the receiver. Once again thanks to the Linux Community for this.

Printer Installation:

I got this instructions from the following: Link

 

01- Installing CUPS

To Install CUPS open the terminal and type:  sudo apt-get install cups

 

02- Downloading the Drivers:

Go to the official Brother page Link and download the .deb version of the CUPSWRAPPER and LPR.

To make my life easy I save those files in my GitHub. you can download from there: MFC-7360N

 

03- Installing the printer drivers

Open the terminal, CD to the folder whit the files, type the following commands one at the time:

and the printer is install.

 

04- Change the printer to be Network.

Click: Menu / Control Center / Printers

There Right click to the printer: MFC7360N / select “Properties”

in the line: “Device URI:” click the button “Change”

in the following window from the options select from the list in “Network Printer” (if not populate wait a minute)

Select: Brother MFC-7360N  the option that says: AppSocket/JetDirect network printer via DNS-SD.

apply and save the changes.

 

—  — — — — — —

For more information see this link: Link  –  Link2

 

Manual Installation using Cups Local Host

01- In a browser type in the address bar:  localhost:631  to open CUPS.

02- Click “Addint printers and classes”

03- Use the menu to install the Printer.

 

Need to know space available in your computer?

Basically use the command

For more information use df command + one of this options:

Installing MFC-7360N Network Scanner

Here a page with some Free Scanning Software for Linux: Link

Well I did so many thing and follow so many instructions in internet, and finally I found the following instructions:

Note: I do not know if some of the other things I did are actually required for this to work, so, follow this instructions and if this do not work well “GOOGLE IT” Good Luck.

. . . . . . . . .

MFC-7360N Network Scanner

Go to the official website to get drivers: Link

On the Download Page select: OS: Linux(deb)   &   Scanner driver 64bit (deb package)  there press “Agree to the EULA and Download” 

For Instructions in how to Install driver and Set-Up Network Scanner: Link

After this just reinstall Simple-Scan to make sure that is updated and will recognize the Scanner

Here is another site with some information: Link, Link2.

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

Acouple of thing that I did that I do not know if it was helpful, do this after the previous instructions fail:

install xsane
http://www.xsane.org/
sudo apt-get install xsane

more instructions; (go to the scanner section down in the page)
Ctrl + F (Configuring a Network Scanner)

How to set up a USB network printer and scanner server on Debian

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

If after doing this is not working, well “GOOGLE IT”, and Good Luck.

To find out what Linux Distro and version is install in your machine, in the terminal type: cat /etc/*-release   also:    cat /etc/linuxmint/info

 

Reinstall Linux:

Get the ISO version that you want, the one that I use is:

RELEASE=18
CODENAME=sarah
EDITION=”MATE 64-bit”
DESCRIPTION=”Linux Mint 18 Sarah”
DESKTOP=MATE
TOOLKIT=GTK
NEW_FEATURES_URL=http://www.linuxmint.com/rel_sarah_mate_whatsnew.php
RELEASE_NOTES_URL=http://www.linuxmint.com/rel_sarah_mate.php
USER_GUIDE_URL=help:linuxmint
GRUB_TITLE=Linux Mint 18 MATE 64-bit

Then get the software to put it on a USB

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

Plug in the USB flash drive and determine the device it’s mounted on with the command:

sudo fdisk -l

This time around it was /dev/sdc1 for me, so I’ll use that as my example.

Umount the device

umount /dev/sdc1

The next step is to copy the iso. copy to the device not partition (i.e copy to sdc not sdc1) as shown below :

sudo dd if=filename.iso of=/dev/sdc bs=4M

NOTE:

  • For some distros that support making a bootable USB via DiskDump, you can use sudo dd if=/path/to/filename.iso of=/dev/sdX bs=4M to make USB installation media.

IMPORTANT: Make sure you replace sdX with whatever your USB drive corresponds to (you can find that using lsblk).

now perform final steps :

sync

sudo eject /dev/sdc

That’s all . 🙂

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

after this test your drive and it should work

How to find your IP Address:

in the terminal type: ifconfig

Audio & Microphone Manipulation

To use open the terminal and type: alsamixer

Instructions in how to use it: LINK

Format a USB

  1. Click Menu & search for: disks
  2. Select the USB & Click the Gears icon
  3. Select: “Format Partition”

Installing the USB-Monitor

how to install the driver:
http://support.displaylink.com/knowledgebase/articles/615714#ubuntu

I follow the instructions on the site above.
when installing the generc fail
sudo apt-get install linux-generic-lts-utopic xserver-xorg-lts-utopic libegl1-mesa-drivers-lts-utopic xserver-xorg-video-all-lts-utopic xserver-xorg-input-all-lts-utopic
after fail I read the error and and install
sudo apt-get install linux generic
then I run the previus command and it work.
then sudo apt-get install dkms
then Log in to the folder where I had the newest driver:
prepare the driver for installation by
01- open the visual folder right-click Properties/permisions/allow-files-execute-as-program
02- then in the terminal chmod +X displaylink-driver-1.3.52.run
03- install the driver: sudo ./displaylink-driver-1.3.52.run

then I restart the computer
then sudo apt-get update

and it worked

——————————————————————

How to uninstall DisplayLink Ubuntu software
http://support.displaylink.com/knowledgebase/articles/683699-how-to-uninstall-displaylink-ubuntu-software
sudo displaylink-installer uninstall

more trobleshouting
http://support.displaylink.com/knowledgebase/topics/103927-troubleshooting-ubuntu

—————————————
how to install the .run files
Right click on the file in the file manager and click ‘Properties’. Click the ‘Permissions’ tab and tick the box that says ‘Allow executing file as program’.

Terminal Method

Assume the file is called some-app.run and is in the folder /home/user/Downloads. You will need to modify these instructions to fit your situation.

Open a terminal (Applications->Accessories->Terminal).
enter cd /home/user/Downloads
enter chmod +x some-app.run
enter ./some-app.run
if step 4 fails with a message including ‘permission denied’, try entering sudo ./some-app.run (you will need to enter your password for this).
———————————–
testing — trobleshout
http://support.displaylink.com/knowledgebase/articles/683672-my-displaylink-device-does-not-work-on-ubuntu

to chekc the version of kernel and Xorg in Terminal:
‘Xorg -version’ for Xorg
‘uname -a’ fro the kernel

Installing Fire Fox Nightly

Official page for Download: LINK

For a slick installation using the Terminal:

  • sudo add-apt-repository ppa:ubuntu-mozilla-daily/ppa
  • sudo apt-get update
  • sudo apt-get install firefox-trunk

There is info on the packages here:

https://launchpad.net/~ubuntu-mozilla-daily/+archive/ppa/+packages

More information and instructions in how turn off the: xinstall.signatures.requred  to false so you can install unsigned add.ons jut type this in the browser:  about:config

or read more info about: LINK

Enjoy.

 

Installing MySQL in Linux

Site with Information: LINK

Video with Instructions: LINK

Installing LEMP stack: LINK

Increase Volume to Videos

This is a command line terminal software no user gui interface.
Name of software: FFMPG 
Software Page
http://www.ffmpeg.org/download.html
other links:
How to install:
https://www.faqforge.com/linux/how-to-install-ffmpeg-on-ubuntu-14-04/
How to use:
http://breakthebit.org/post/53570840966/how-to-increase-volume-in-a-video-without
Terminal Commands:

Few seconds latter you will have the new file with higher audio.

.

Category: Miscellaneous | Comments Off on Linux Related

Modify Terminal

Other Links: Colors   — link1  —  Link2  —  Link3  —  Link4  —  Link5  —  Link6

video links: V1   –   V2   –   V3     VA1  — VA2

 

To apply changes to the “.bashrc” file without closing and reopen the terminal:

 

Storage current: .bash_profile  &  .bashrc  files in a directory (DotFiles)

create new: .bash_profile  &  .bashrc

to make that the configuration on .bashrc  applies to .bash_profile type the following code on the newly created “.bash_profile” file

now time to work on the configuration, and lest start wit the “Text” that is before the blinking cursor on the Terminal with:    PS1=”Edxael: “;

 

.

Category: Miscellaneous | Comments Off on Modify Terminal

React Componets

This are the Real-Deal, because they can change state in response to “User-Events” and “Server-Events“, basically we can say:

React-Component  ===  Rreact-Element  +  State-Machine.

This are the Building blocks from the User Interfaces that we see online.

Example:

Using a variable to choose what component to Render.

this.props.abc

Passing Promps to Nested Components:

Passing Promps to CHILD Components:

The SPREAD-OPERATOR:

Very similar code the the one above.

Statics & Random Colors:

Validation with:   React.PropTypes.xyz

 

.

Category: React | Comments Off on React Componets

JSX

The syntax of React-JavaScript can be tricky and when writing long applications, almost impossible to maintain, for that reason we have JSX a JSX = Javascript Syntanx eXtension.  Tuturials: Link1  –  Link2  –  Link3  –  Link4

See Example:

The problems is that the BROWSER  do not understand JSX, for that reason we need a Transpiler, and in this case we will use Babel-JS. For a quick online Transpiler: Babel.io/repl .

There are two ways the JSX code can be Transpile to Pure-JavaScript,

  • On the Fly, in the Browser = Used on Development
  • Build Time: In Productions System.

Ok now, we are developing, so lest see how to use Babel on the Fly for Development.

To do this we point the browser to the Online Traspiler, this is very In-Efficient but is good for Dev.

First lest go to the GitHub Repo: babel-standalone  — Daniel15 , get the link and paste to the “index.html” below the <script> links for React-Library from Facebook.

Now your Files should look like:

index.html

code.js

And this a basic explanation in how to use JSX + Babel + HTTP.server develop React-Apps.

.

Category: React | Comments Off on JSX

React Basics

Enviroment:

Make sure that yo are in the HTTP-SERVER

to do this Terminla CD to the folder where you will be developing, there type: ”  http-server .  ” and leave the server runing

To access the working files, Open the browser and type:  ”   http://localhost:8080/index.html   ”  if the page is served, you are ready to develop.

Accessing React-JS Files

Google search: download react, chose the FaceBook link , there copy the links found under the “Using a CDN” title:

Note not forget to install Atom Packages for React.

“Hello React-JS”

This is an example of how to create a simple “Hello React-JS”, with: index.html  &  code.js files.

     index.html:

     code.js

Save the files and open the browser type:  ”   http://localhost:8080/index.html   “, the file should have been served, congratulations you just did your first React – App.

More information about React Syntax: link1

Nested Elements.  a.k.a.: Section

To be able to build more complex structures we need to be able to nest elements, see the following example:

Factory Functions:

this can be used to fast create an specific HTML element.

  • React.DOM.div()
  • React.DOM.span()
  • React.DOM.p()
  • React.DOM.li()
  • React.DOM.etc….

You will notice that using this syntax you can drop the HTML tag that goes inside of the parenthesis.

Example of creation an Unorder List <ul>

JSX

To see this topic go to my post on JSX.

This are the Bare Basics of how to get the Development Environment ruining and creating the most Basic-App.

.

Category: React | Comments Off on React Basics

NPM & HTTP Server

To find out where oes NPM is located type this on the console:

 

Installing the HTTP Server: Link

To run the server, Terminal, cd to the folder where your file.html is located and type:

Now in a browser addres bar type:   localhost:8080

Then you will see the files and directories, if you need to CD do so if not just click the file you want and will be Open.  we are ready to tackle “REACT”.

Atom Packages for React

Atom React Plugin: Link

 

.

Category: React | Comments Off on NPM & HTTP Server

JSON

JavaScript Object Notation === JSON

Link to validate JSON:   JSONLint

JSON is the standard way to manipulate and transfer data.

Here is a 30 minute video that teach the basics of JSON & AJAX: Link  –  Video

Using Handlebars.js : Video

For an extensive list of API from MDN: Link

myjson.com: Link

Create your own JSON files and hosted in the net, jsonblob.com : Link

. . . . . . . . . . . . . . .

Basic NPM Server

This server looks for changes and auto restart when changes are done similar to the Web-Pack Auto-Reload

After installation, to used, in the terminal type: ” nodemon  <file-name> ”

. . . . . . . . . . . . . . .

JSON

——————————————————————

Example: Js-Object  –> JSON  –>  Js-Object

Using an Object and Posting information in DOM.

Results of previous code on ” index.html ” :

——————————————————————

Here is one a little more fun:

It does the same that the one before but It gets it data from an external file: “data.json”, to make it work make sure that in the Indext.html you have a <div id=”root”>.

here is the configuration of the files:

Here is the code:

Results in the DOM:

 

.

Category: JS | Comments Off on JSON

JS Numbers

Things related to Numbers

The Object Number.  MDN  —  W3

The Object Math. W3  —  MDN


Round a Number to a Int.

Round to TWO Decimals   — Float —

Round Up  or Down a number:

Round Up or Down to (x) decimals. — String —

Is Integer?

String to Number:

 Number toString:

Square Root of a number:

How to get the Decimals form a Number

Random Numbers

 

 

Computing the least common multiple of an integer array from: LINK

ES5:

ES6:

sd

.

Category: JS | Comments Off on JS Numbers

Quotes

Hello, sometimes when reading I found a quote that is interesting and here is where I save it.

 

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” — Martin Fowler, “Refactoring: Improving the Design of Existing Code”

 

“Programs must be written for people to read, and only incidentally for machines to execute.” Harold Abelson, Structure and Interpretation of Computer Programs

 

Category: Miscellaneous | Comments Off on Quotes

JS Question

Hello I’m currently working in a simple “Vanilla JavaScript – To Do App” you can see the Work In Progress: todo.mycode.website

In the early stages I found a chrome behavior that raise a question about Plain-Vanilla JavaScript, lest start with the question first and then, the explanation(documentation) of the question:

“Why the results of console.log() in Chrome are modify BEFORE we call the function that will modify them.???”

Now the Explanation:
when I use Google Chrome “to console.log()” the “Console” display a modify Object before we get to the Function to modify the Object.

Scenario:

Im creating a basic Todo-App stored in a Object, with the following Code.

As you can see the property “td_obj.list” originally has two elements, then we execute 3 commands (functions):

  1. First we print it (on the console)
  2. Then we add a new task & print it.
  3. Finally we change an element & print it.

When runnign this code “Google Chrome Console” should print:

But Instead “Google Chrome Console” prints:

For more details see “print screen” below

 

But when I run the same code on JsBin the output if as expected (No modification before function is call), to see this code on JsBin –  Link

I also have the files that I use on Google Chrome in GitHub: Link

Finally I have this code in a live website:   test.mycode.website

  1. Open Chrome
  2. Open Dev-Tools
  3. Select Console

Why the results of console.log() in Chrome are modify BEFORE we call the function that will modify them.???
is this a BUG in Chrome???
why is doing this???
how can I avoid it???

.

Category: Miscellaneous | Comments Off on JS Question

How to Ask Questions to Programmers

People will be willing to help you with your questions, but is very important that you know how to ask the right question, so you can help the person that will answer your question to really understand what is what you are asking and he/she will be able to provide the correct answer.

here is an article that provide great information about this topic.:

How to be great at asking coding questions

z

Category: Miscellaneous | Comments Off on How to Ask Questions to Programmers

Closures Taco-Truck

So what is closure in javascript?

A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables.

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

One use for closures are creation of independent Instances of a specific algorithm.

For more documentation: MDN  —  medium  — JS-Blog

 

Example:

Taco-Truck

This is “Jennifer“, she grab her saivings and purchase a Taco-Truck, also hire two employees to run the enterprise: “Elena & Maria“, and some times her 17 year old brother “Hector” works few days, what you don’t know is that Jennifer also likes JavaScript and she decide to create a program to do the payroll using “JavaScript Closures

Elena and Maria both get paid $10.00 USD per hour and Hector $8.00, to keep the quality, and customer satisfaction HIGH she has a FaceBook page where costumes can give likes to the employee that give the best service, and whoever gets the most likes gets a $15.00 USD Bonus to be pay with next week check.

with the previous information “Jennifer” wrote the next code:

Then open the console and play with the following commands:

  • check;       -to see the function’s
  • maria();    -to run the “maria” instance of the function.
  • elena()      -to run the “elena” instance of the function.
  • console.dir(elena);    -to analize the current state of the “elena” instance function, and its variables (closures).

Here is an example of some of the commands:

There you will be able to see how you can create a new instance for each employee, also you can analize the current variables values by using the console.dir(elena); command. those variables are totally independent of each other, and they not get affected when another instances is modify.

Other Applications for CLOSURES:

Here is a real life example where a closures to update the DOM: JsBin

 

Articles & Examples from the Internet:

Articles with info in Closures: Bov  — medium  —  JERF

Example 1:

Example 2:

In the JavaScript (or any ECMAScript) language, in particular, closures are useful in hiding the implementation of functionality while still revealing the interface.

For example, imagine you are writing a class of date utility methods and you want to allow users to lookup weekday names by index but you don’t want them to be able to modify the array of names you use under the hood.

Note that the days array could simply be stored as a property of the dateUtil object but then it would be visible to users of the script and they could even change it if they wanted, without even needing your source code. However, since it’s enclosed by the anonymous function which returns the date lookup function it is only accessible by the lookup function so it is now tamper-proof.

 

x

Category: JS | Comments Off on Closures Taco-Truck

Higher Order Functions -or- Callback Functions

Higher Order Functions -or- Callback Functions

  • Functions that ACCEPT other functions as “Parameter ===  Call-Back-Function”.
  • Enhance the behavior of other functions.

Higher Order Functions Accept Call-Back-Function as parameter.

First let me start with a example of a call back, that shows why this was used for the connection to the API.

In JavaScript Function are: “Firs Class Objects” and you can pass: “Functions” into “Functions” as arguments.

Simple Example:

Simple Example to choose add or Multiply:

Before we dig into the Built-In Functions, lest study the Fat Arrow Function:

 

Specifying parameters:

Specifying a body:

Example of both:

 

for more information read the full article: LINK   –    LINK2

Wes Bos Explanation: LINK

Example using Traditional syntax and Arrow syntax:

Traditional Syntax:

Arrow Syntax:

 

Built-In Functions:

You can create your own functions, but there are few that some one already create for us, they are very useful and here is a list of those with examples, for a complete list see: LINK

01- arr.forEach();

Exactly like a For, but you no need to take the counter to access each element in the array

The callback receives three arguments:

  1. The current element value
  2. The current element index
  3. The array being traversed

02 – arr.filter();

this higher-order function returns a new subarray with every element from the original array that passes on the test provided by callback, i.e., if callback returns true for a particular element, then this element gets included in the subarray to be returned.

The callback receives three arguments:

  • The current element value
  • The current element index
  • The array being traversed

This is how it works:

1 – callback is applied to the 1st element of the original array, and if the result is true, then this element gets included in the new array to be returned.
2 – callback is applied to the 2nd element of the original array, and if the result is true, then this element gets included in the new array to be returned.
3 – And so on… until the last element of the array is processed, then the new array is returned as the result of fi

03- arr.map();

this returns a new array with the results of callback applied to every element from the original array, in the same order.

  • The callback receives three arguments:
  • The current element value
  • The current element index

The array being traversedThis is how it works:

1- callback is applied to the 1st element of the original array, and the result is stored as the 1st element of the new array to be returned.
2- callback is now applied to the 2nd element of the original array, and the result is stored as the 2nd element of the new array to be returned.
3- And so on… until the last element of the array is processed, then the new array is returned as the result of map.

Next we will modify again the program by mapping the calculation of civilians in a separated step, right after filter. This way, map will result in a new array containing the number of civilians, in the same order of the starships elements right after filter. Now, forEach can be called over the civilian numbers, simply to sum up the civilians total.

04- arr.reduce();

this higher-order function reduces an array into a single value, as explained in Understand Javascript Array Reduce in 1 Minute[7]. It first applies callback against initialValue and then consecutively on each value of the array, from left to right.

The callback receives four arguments:

  • The previous value
  • The current value
  • The current index
  • The array being traversed

This is how it works:

1- callback is applied to initialValue, which comes as the 2nd argument (the current value).
2- callback is now applied to the 1st element of the array (which comes as the 2nd argument, the current value), and the result of the previous step comes as the 1st argument, the previous value).
3- callback is now applied to the 2st element of the array (which comes as the 2nd argument, the current value), and the result of the previous step comes as the 1st argument, the previous value).
4- And so on… until the last element of the array is processed, and this final result is then returned as the result of reduce.

05- arr.some();

this higher-order function returns true if there is any element in the array that passes on the test provided by callback, and false otherwise.

The callback receives three arguments:

  • The current element value
  • The current element index
  • The array being traversed

This is how it works:

1- callback is applied to the 1st element of the array, and if the result is true, then somereturns true.
2- Otherwise, callback is applied to the 2nd element of the array, and again if the result is true, then some returns true.
3- And so on… until the last element of the array is processed, if true was never returned then some returns false.

06- arr.every();

This higher-order function returns true if every element in the array passes on the test provided by callback, and false otherwise.

The callback receives three arguments:

  • The current element value
  • The current element index
  • The array being traversed

This is how it works:

1- callback is applied to the 1st element of the array, and if the result is false, then every returns false.
2- Otherwise, callback is applied to the 2nd element of the array, and again if the result is false, then every returns false.
3- And so on… until the last element of the every is processed, if false was never returned then every returns true.

07- arr.finIndex();

this will provide the index of the first element in which the test is “True”, and ignore all the rest, but if none is true it will return ” -1 “:

The callback receives three arguments:

  • The current element value
  • The current element index
  • The array being traversed

This is how it works:

1- callback is applied to the 1st element of the original array, and if the result is true, then this element is returned as the result of find/findIndex.
2- Otherwise, callback is applied to the 2nd element of the original array, and again if the result is true, then this element is returned as the result of find/findIndex.
3- And so on… until the last element of the array is processed, if true was never returned then find returns undefined / findIndex returns -1.

07- arr.YOUR-OWN();

Here is where you can create your own function to fit your specific and unique needs.

x

Category: JS | Comments Off on Higher Order Functions -or- Callback Functions

JavaScript promises

To Read more about Promises: MDN – Link1

This is an alternative system for managing Async-Programming in JavaScript, alternative because we have other ways to do this like Call-Backs. a really good explanation is in this videos: Link – Link2 Art1 – Art2

A promise is always in one of the following staties:

  1. Pending: Initial state, not fulfilled nor rejected.
  2. Fulfilled: Successful operation.
  3. Rejected: Failed operation.
  4. Settled: The promise is either: Fulfilled or Rejected, but not pending

Here is another graphic of the structure of the promise:

In the following example we use the: ” setTimeout() ” to create a situation where we can decide if we want to resolve or reject our promise, depending in which is executed firs, change the values of the time to see how the promise is resolved or rejected using the the methods: then or catch.

You can handle multiple promises at once and wait until all have been “resolve” before continue with the code. again change the times in “myProm1” to see how it resolves or executes.

An this is how promises work.

3 Dallas Cowboys Promise examples:

Example: 1

Your uncle has PROMISE you that if the Dallas Cowboys wins tonight’s game, he will meet you at IN & OUT for a hamburgers dinner is on him. and here is the code.

 

Example: 2

Next week he PROMISE that if the Dallas Cowboys win you he will pay for the Hamburgers again, and he make another promise that if the N.Y. Giants lose he will pay the Tickets for the Movies. but if one of the conditions is not meet both PROMISES are off the table, is like all or nothing.

 

Example: 3

Dallas vs Packers games results for the Playoffs.

.

Category: JS | Comments Off on JavaScript promises

Set up local web server on Linux

 

 

Instructions in: Apache2  –  Linux-instructions  –  MDN

On the Terminal go to: /etc/apache2/sites-available and make a copy of the file 000-default.conf

then edit the file mysite.conf  if questions in how to use:  GEDIT Tutorial

Installing XAMPP

Download XAMPP: Link

link with instructions in how to install and Use: Link

On the visual interface go to the Directory with the Downloaded file:

right click / Properties / Permisions  (Click  “Allow executing file as program”)

In the terminal, CD to the folder with the executable then:

and the installation will begin.

  • – How to start XAMP

How open the Graphical Interface:

And this is what you should see:

 

 

 

The installation proof index.html is located:  ~/var/www  in the browser: 127.0.0.1

To install the default LAMP stack:  Link 

Start, Stop, Restart: Link1

To start Apache 2 web server, enter:

 

 

x

 

Category: Miscellaneous | Comments Off on Set up local web server on Linux

Debuger & Dev Tools

Links: Link-1

List of Console commands:

  • console.log(myVar, “String”);
  • console.info(myVar, “String”);
  • console.warn(myVar, “String”);
  • console.debug(myVar, “String”);
  • console.error(myVar, “String”);
  • console.log(‘%c I see smurfs!’, ‘color: green; font-weight: bold;’);
  • console.log(‘%c I see the sky!’, ‘background: blue; font-weight: bold;’);

Node Inspect –> debuging

This test will be executed running the Node.js environment, and first you need some code example:

Now in the terminal type the following commands.

Here you will get something like:

Here the code stops at the very beginning, and if you want to check any variables, you will get errors you need to CONTINUE to the 1st debugger statement. by entering: ” c ”

Before you start testing the variables you need to enter in REPL mode, by entering: ” repl ”

Now you can type any variable to see what is the value at this specific moment.

To move to the next DEBUGGER point you need to exit the REPL mode (  [Ctrl] + c  ) and then CONTINUE ( ” c ” ), then enter to REPL ( “repl” ) mode again

 

 

Applications (Resources) Panel:

  • local storage
  • Cookies
  • IndexDB
  • Session Storage
  • Cache
  • etc…

Udemy Lecture-6  3:55 min.

Test for Mobile Development (Elements):

In the top left corner there click the Icon that looks like a Phone in front of a Tablet “Toggle Device Toolbar” this should change the page view to a “Mobile Device”.

There you can choose what devise: Ipad, Iphone, Galaxy, etc…..   and you can also “Rotate” the view. to see how the site would be display when the user flips the phone.

 

Network Panel:

(dont forget to Disable Cache) Udemy Lecture-8  13:55 min.  Here you can

  • Record
  • Take Pictures.
  • See individual Files: Type, Size, Time to load.
  • Filter result by file type

Audits Panel

Makes an Audit of the Loading of the page, provide color Feed-Back and suggestions.

Go to the Audit Tabs. and select both Audits: “Network Utilization” and “Web Page Performance” then select: “Reload Page and Audit on Load” and click RUN and wait. Note: Make sure you dont have any Break-Points or those will stop the load and you will not be able to get your report.

You will get a Report with colors: Green, Yellow, Red and you know what each color mean.

  • When you see many files of the same type: “.css” “.js” etc.. you can combine some of those files to make the page rank better and faster.
  • You can also enable Compression (Uglify them) in some files to make them load faster.
  • Also you can Turn-On Browser Catching.
  • Check Un-Use CSS Rules and delete them

 

Google PageSpeed Insights

This might not be on the browser but definitely is a Developer Tool created by Google.

Go to this Link and paste the URL of the website that you want to analyze, this will add another way to Audit the page and find the recommendations provide by Google.

 


Notes in how to debug JavaScript Code

JSHint  /  JSLint  (“use strict”)

BREAK-POINTS:

  1. Standard Break Points.
  2. Conditional Break Points.

Open Dev-Tools / Sources

The standard Br-P’s: can be created and then play to review Variables at different times in the Code-Execution.

The Conditional Br-P’s: Create a regular Br-p. then Right-Click / Edit Break-Point.   then type your condition for this BR to be executed Example (  myNumber === 181 ) and “Enter”, it will look Yellow, this means is a “Conditional-BR”. Now Restart the Page: If the variable “myNumber” is not equal to “181” at the time of execution, the BR. will be skip.

—  —  —  —  —  —  —  —  —    Br-P Commands    —  —  —  —  —  —  —  —  —

Step Over: Create a Br-P. from were you want to go Line by Line. refresh and then press “Step Over” Note: (this will go line by line but will skip “FUNCTIONS“)

Step Into: Create a Br-P. from were you want to go Line by Line, refresh. You will notice that this goes Line by Line but: This will go Line by Line including “FUNCTIONS

Step Out: Same instructions  of “Step Into” but when you are done reviewing the FUNCTIONS click “Step Out” and it will go to the “Conventional Lines of Code

WATCHES:

   In the Right-Panel of the sources Tab.  is a “Watch Box” option. Go to the Center-Panel with the “file.js” and select the variable that you want to Watch, “Right-Click / Add Selected Tex to Watches“, also create a Br-P. and refresh the page, you also should create another Br-P, in the line of code that you would like to start reviewing the variable, and then use “Step Over” or “Step Into” to go line by line, but each time you can see the “Watch Box” the values of the the selected “Variable” at each specific line of code.

   Note:  You can “Add-Watch-Expressions” like: ” myArray” , ” myArray.length ” , “myArray[myArray.length-1]” ,  Etc….

SCOPE:

   Here you can find the values of many variables of that specific scope at that specific Br-P.

The CONSOLE:

You can use this commands in the Console and in your Code.js file

console.log(); Prinst to the Console

console.clear(); Clears the Console.

console.assert( expressions, “-m”); Custom-Made Errors:  Example: console.assert( arr.length >= 5, “Array length is: ” + arr.length);

console.table(var, [arr]); to see just specific items of a big “file.json” providing a array of Keys, and will print a “Table” Example:  Console.table(data, [“name”, “gender”, “email”]); x In the console you can see a very beautiful and sortable table. with the Colums: “Index”  –  “name”  –  “gender”  –  “email”.

Multi-Line Commands: We know that we can run JavaScript in the console, but evertytime you hit “Enter” it runs the code, so this keeps you coding one line at the time, if you want to type Two or more lines of code on the console before you execute them. To go to the following line without executing:  “Shift” + “Enter

 

Snippets:

Go to the Sources-Tab / Snippets-SubTab   (Video 42.08 mts)

You can write your own snippets to help you to run commands that help you.  Like STYLING an error in the console. Example: console.log(“%c Error”, “color: white; background red;”); or get the JQuery version.

 

Live Editing “file.js” :

Go to: Sources Tab / Sources SubTab: Select the “file.js” to Edit.  In the center pannel you will be able to edit the “file.js” you will see an Asterisk in the Name SubTab:  ” file.js* ” the asterisk meas it been changed, you can save that file by: Right-Click on the file “Save As…” give it a name, or you can Overwrite the current file by Clicking “Save” chose the location of your current file and click “Replace”

 

Call Stack:

Bottoms Up, something to be executed firs will be on the bottom of the stack.

This will not show all the variables like scope does, this will only show what functions have been call,

 

 

 

 


x 26.39

Category: JS | Comments Off on Debuger & Dev Tools

User Error Handling: Try, Throw, Catch.

Here we will learn how to handle the errors made for the User input.


Error Throw, Catch, Finally

Here is an example:

Imagine that you assign a new programmer in your team to handle the code for the response for the responses of a nonprofit organization, and just in case that there is an error in the code you wrap it in a TRY & CATCH statements, just in case that there is an error and to be able to catch it:

A secod code example:

 

x

 

Category: JS | Comments Off on User Error Handling: Try, Throw, Catch.

JQuery


Links: JQuery  –  GoogleHosted

JQuery allow: DOM Manipulation, Event Handling, and Animation.

x

Category: JS | Comments Off on JQuery

Event Listener

Notes:


Links: MDN  –  Tut1  –  W3

Example:

Adding a new line of Text to the body of the HTML document.

Example:  guestbook.mycode.website   –    ColorSquares

In the example GuestBook we add new paragraphs with customize text and color.

“Mouse Hover” + “window.onload”

In the calculator they use <p>  instead  of <li>     Udemy.com Video: Link  –  Github

x

Category: JS | Comments Off on Event Listener

Atom Tex-Editor

Install: Atom + Packages


Installing Athom: Link

if interested on Atom

Lay Out 2 Columns:  link1 , link2 , link3

Emmet: Link1 , Link2 , Link3

Other Plug-Ins: link1

File Type Icons: Link1 ,  link2

To Open HTML in Browser

Install: open-html-in-browser pakage


List of Packages that I use in Atom.

Atom Tutorials: Manual

Go to: Edit / Preferences  then: click Install:  search and install:

  • atom-runner
  • atom-save-all  // will save changes in all documents open in tabs. overwrite Ctrl + S
  • auto-indent
  • color-picker
  • emmet-atom
  • file-icons
  • javascrip-snipets  // Disabled for now
  • autocomplete-css
  • autocomplete-html
  • autocomplete-plus  // this needs autocomplete-snipets
  • autocomplete-snippets // this needs autocomplete-plus
  • jshint
  • linter-jscs

when I activate the package “react” I got a message of a conflict, with the package “language-babel” it requires to disable one or the other, I will disable “language-babel” to see if I can get the Auto-Complete feature that the package “react” offers.

Now on the same window click the tab: Packages

go to the settings of atom-runner, scroll to CONFIGURING there select and copy the following text:

now go to: Edit / config…

and at the end of the file paste the text, (with NO Indentation), now ( Ctrl + S ) to save it

now to test it: create a file and save it with extension “.py” , on that file write:

to run it press: (Alt + R)

to do this I use this: video


ATOM COMMANDS

To split screen: Ctrl + Shift + P.    link

To open other files on Project: Ctrlthen write the name of the file and press enter.

To go to a specific line: Ctrl + G

To select and (or) replace all the instances of a word: Ctrl + F

To find the next occurrence of a word: Ctrl + D  repeat until you select all the instances desired, and then you can change them.

To open Atom from the Terminal: ” atom .


Installing PIP3

To install I type the following commands in the terminal.


Installing Flask

To install Flask, get to the local working directory of the project and:


Find and Replace

This is really useful when you have a variable that repeat several times in the code and you want to change the name in all the ocurrances at once:

  • Ctrl+F – Search within a buffer
  • Ctrl+Shift+F – Search the entire project

for more information use this link:  Find and Replace


x

Category: FED | Comments Off on Atom Tex-Editor

Filezilla

How to setup and use Filezilla

To install FileZilla:

Configuration with BlueHos

Link with instructions: BlueHost

Video Instructions:

 

.


How to Use IT

  1. Subdomains: Create the domain to load Upload files.
  2. Open Filezilla, / open “Site Manager” / put password
  3. Select Directory with files to Upload.
  4. Double “click” in the files to Upload.
  5. Move the files from: “FTP”   to   “Domain-XYZ”

 

x

Category: FED | Comments Off on Filezilla

Post-CSS

Pospular new post-processor, fast to compile out of all pre/post-processors.

 

Category: FED | Comments Off on Post-CSS

Installing: Python in Linux

Python + Linux + Atom


Install: Python in Linux

The Installation of PYTHON was done using the instructions provided by: tecadmin.net

cd ~/usr/src/Python-3.4.5

To go, Terminal Pyton Enviroment:

  • Go home directory: cd + enter
  • Type: python3

Example:

To get out of the Python enviroment just type “exit()”

you can run your files the same way than ruby by going to the local directory of the file typing:

 

x

Category: Miscellaneous | Comments Off on Installing: Python in Linux

GULP


Gult is a build system or a build tool, this meas it will help us to automate things.

To install: there are two stages 01- Install Globally & 02- Install in local Project.

01- Installing Glup globally:

and to make sure is install check with:

02- Install Gulp Locally:

cd (to you project folder), there we want to add the Gulp to the “package.jason” file, to do that.

now open the “package.jason” file with a text editor and you will find out that a new area name “devDependencies” is created.

and just to make sure that the installation was completed, on your the terminal type: “gulp” and you should get the following error: “No gulpfile found”