Why Sass is Awesome?

Why is sass awesome?

It makes css work way easier and faster. You have to have ruby on rails installed and the sass gem installed.

First install sass with this command (you only need to do it once)
gem install sass

Type in CLI first navigate to correct director with cd

sass – watch .

to compile .scss into .css

Below is to install the bourbon library for css
gem install bourbon

bourbon library

scss advanced code

@mixin box($size, $color, $display: block) {
	width: $size;
	height: $size;
	background: $color;
	display: $display;
}

a {
	@include box($size: 10px, $color: blue);
}

// for the list don't forget ... example below members... for a list /w out is static
@mixin band($name, $members...) {
	@each $member in $members {
		.#{$name}.#{$member} {
			background: url("images/#{$name}/#{$member}.jpg");
		}
	}
}

div {

	margin: 0px 0 0 10px;
}

@include band(radiohead,thom, jonny, colin, phil);
@include band(nin, cuties);

It compiles into .css:

a {
  width: 10px;
  height: 10px;
  background: blue;
  display: block; }

div {
  margin: 0px 0 0 10px; }

.radiohead.thom {
  background: url("images/radiohead/thom.jpg"); }

.radiohead.jonny {
  background: url("images/radiohead/jonny.jpg"); }

.radiohead.colin {
  background: url("images/radiohead/colin.jpg"); }

.radiohead.phil {
  background: url("images/radiohead/phil.jpg"); }

.nin.cuties {
  background: url("images/nin/cuties.jpg"); }

Hello World in React Js

This is hello word app created with react.js This is my first simple script. Yes, I know it’s easier to do this in html. But I wanted to do this in JSX to make thing more complicated.

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Jsx</title>
</head>
<body>
	
	<! – container node – >
	<div id="jsx">
		
	</div>
	<! – container node – >
	<div id="dom">
		
	</div>
	<script src="https://fb.me/react-0.11.1.js"></script>
	<script src="https://fb.me/JSXTransformer-0.11.1.js"></script>
	<script type="text/jsx">
	/** @jsx React.DOM */

	var MessageBox = React.createClass({

		render: function(){
			return (
				<div className="container">
				<h1>Hi</h1>
				<SubMessage />
				</div>

				);
		}
	});

	var SubMessage = React.createClass({
		render: function(){
			return (
			<small>Sub message</small>
			);
		}
	});

	var reactComponentJSX = React.renderComponent(
		<MessageBox />,
		document.getElementById('jsx')
		);
	</script>
</body>
</html>

This is Example Code of php Inheritance

This is example code of php inheritance parents and child. extend is the keyword to inherit from the parent class.

 

<?php 

abstract class Shape {

	protected $color;

	public function __construct($color = 'blue')
	{
		$this->color = $color;
	}

	public function getColor()
	{
		return $this->color;
	}

	abstract protected function getArea();
	
}

class Square extends Shape {
	
	protected $length = 4;

	public function getArea()
	{
		return pow($this->length, 2);
	}
}

class Triangle extends Shape {

	protected $base = 4;

	protected $height = 7;

	public function getArea()
	{
		return .5 * $this->base * $this->height;
	}
}

class Circle extends Shape {

	protected $radius = 5;

	public function getArea()
	{
		return M_PI * pow($this->radius, 2);
	}
}

// long hand methods
// $circle = new Circle;

// echo $circle->getArea();

//shorthand
echo (new Circle)->getArea();

Building a Calculator With Angular Js

index.html

Angular js Simple Calculator Example Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example68-production</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
  

  
</head>
<body ng-app="">
  First Num<input type="number" ng-model="number1">
Second Num<input type="number" ng-model="number2">
  <button ng-click="count = count + number1" ng-init="count=0">
  Add
</button>
<button ng-click="count = count - number2" ng-init="count=0">
  Subtract
</button>
<button ng-click="count = count * number2" ng-init="count=0">
  multiply
</button>
<button ng-click="count = count / number2" ng-init="count=0">
  divide
</button>
<button ng-click="count = 0" ng-init="count=0">
  clear
</button>
<span>
  count: {{count}}
</span>
</body>
</html>

app.js

it('should check ng-click', function() {
  expect(element(by.binding('count')).getText()).toMatch('0');
  element(by.css('button')).click();
  expect(element(by.binding('count')).getText()).toMatch('1');
});

Gulp To Create One Javascript File to Speed Up Your Production Server

First install node.js
Type this in commandline

npm install gulp
npm install gulp-concat –save-dev
npm install gulp-uglify –save-dev
npm install gulp-rename –save-dev

'use strick';

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename');

gulp.task("concatScripts", function(){
	//combine all these scripts
	gulp.src([
		'js/jquery.js', 
		'js/sticky/jquery.stick.js', 
		'js/main.js'])
	//create file
	.pipe(concat("app.js"))
	// put in folder destination
	.pipe(gulp.dest("js"));

});

gulp.task("minify", function(){
	gulp.src("js/app.js")
		.pipe(uglify())
		.pipe(rename("app.min.js"))
		.pipe(gulp.dest("js"));

});

gulp.task("default", ["hello"], function(){
	console.log("this is the default task");
});

Then type in gulp “task or functions”

https://github.com/osscafe/gulp-cheatsheet

Sticky Navigation Bar Souce Code

Demo

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Stick Nav</title>
	<style>
body {
	margin: 0 0 0 0 !important;
	padding: 0; 
}
.header {
	padding: 20px 0;
	background-color: #333;
}
.nav {
	padding: 5px 0;
	background-color: slategrey;
	position: -webkit-sticky;
	top: 0px;
	z-index: 1;
}
ul {
	list-style: none;
}
li {
	display: inline;
}
.header, .nav {
	text-align: center;
	color: #fff;

}
.content {
	width: 600px;
	margin: 10px auto 100px;
}
.sticky {
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 100;
	border-top: 0;
}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script>
	$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
 
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
      
if (scrollTop > stickyNavTop) { 
    $('.nav').addClass('sticky');
} else {
    $('.nav').removeClass('sticky'); 
}
};
 
stickyNav();
 
$(window).scroll(function() {
    stickyNav();
});
});
</script>
</head>
<body>
<div class="wrapper">
	<div class="header">
		Header
	</div>
	<div class="nav">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">About Me</a></li>
		</ul>
	</div>
	<div class="content">
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, ad, facilis. Ut vero ab molestias totam, excepturi, at repellendus doloribus, nam vitae non optio obcaecati sequi ipsum, eaque impedit magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis laboriosam error voluptas laudantium repellendus earum blanditiis, tempora delectus dignissimos deleniti, ratione quas doloribus quia. Vel tempore iure est, eligendi sed.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio rem, accusantium expedita dignissimos eligendi quidem vero facilis consequatur eos similique, culpa laudantium voluptatum. Ex tempore soluta adipisci veritatis animi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate eum beatae, omnis maiores consequatur similique impedit porro aliquam cupiditate, tenetur, at dolore in ex doloribus. Omnis iure aut rem vitae.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, ad, facilis. Ut vero ab molestias totam, excepturi, at repellendus doloribus, nam vitae non optio obcaecati sequi ipsum, eaque impedit magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis laboriosam error voluptas laudantium repellendus earum blanditiis, tempora delectus dignissimos deleniti, ratione quas doloribus quia. Vel tempore iure est, eligendi sed.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio rem, accusantium expedita dignissimos eligendi quidem vero facilis consequatur eos similique, culpa laudantium voluptatum. Ex tempore soluta adipisci veritatis animi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate eum beatae, omnis maiores consequatur similique impedit porro aliquam cupiditate, tenetur, at dolore in ex doloribus. Omnis iure aut rem vitae.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, ad, facilis. Ut vero ab molestias totam, excepturi, at repellendus doloribus, nam vitae non optio obcaecati sequi ipsum, eaque impedit magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis laboriosam error voluptas laudantium repellendus earum blanditiis, tempora delectus dignissimos deleniti, ratione quas doloribus quia. Vel tempore iure est, eligendi sed.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio rem, accusantium expedita dignissimos eligendi quidem vero facilis consequatur eos similique, culpa laudantium voluptatum. Ex tempore soluta adipisci veritatis animi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate eum beatae, omnis maiores consequatur similique impedit porro aliquam cupiditate, tenetur, at dolore in ex doloribus. Omnis iure aut rem vitae.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, ad, facilis. Ut vero ab molestias totam, excepturi, at repellendus doloribus, nam vitae non optio obcaecati sequi ipsum, eaque impedit magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis laboriosam error voluptas laudantium repellendus earum blanditiis, tempora delectus dignissimos deleniti, ratione quas doloribus quia. Vel tempore iure est, eligendi sed.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio rem, accusantium expedita dignissimos eligendi quidem vero facilis consequatur eos similique, culpa laudantium voluptatum. Ex tempore soluta adipisci veritatis animi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate eum beatae, omnis maiores consequatur similique impedit porro aliquam cupiditate, tenetur, at dolore in ex doloribus. Omnis iure aut rem vitae.</p>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, ad, facilis. Ut vero ab molestias totam, excepturi, at repellendus doloribus, nam vitae non optio obcaecati sequi ipsum, eaque impedit magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis laboriosam error voluptas laudantium repellendus earum blanditiis, tempora delectus dignissimos deleniti, ratione quas doloribus quia. Vel tempore iure est, eligendi sed.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio rem, accusantium expedita dignissimos eligendi quidem vero facilis consequatur eos similique, culpa laudantium voluptatum. Ex tempore soluta adipisci veritatis animi!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate eum beatae, omnis maiores consequatur similique impedit porro aliquam cupiditate, tenetur, at dolore in ex doloribus. Omnis iure aut rem vitae.</p>
	</div>
</div>

</body>
</html>

How to Setup a squid3 proxy with username and password

This is a tutorial on how to set up a username and password on your squid 3 proxy for ubuntu.

How this proxy useful. It’s to tunnel all the though to your network to usa for example skype or anything in your native country while your in foreign country. Plus you can visit american websites with the ip ranges here.

Squid uses

Cache — The SQUID Proxy Server can Cache web files from all eb Requests and then transefer those chaced files locally if another host requests the same file
ACL Control — Access Control Lists allow you to specify whether certain websites can be accessed.
Bypass Web filters — You can connect to a Proxy Server on a different network to bypass Web Filers on your LAN

Squid Configuration Setup on Server Setup (Note: These steps are shown using Ubuntu 14.04 Server Edition. The basic steps are the same on all Linux distributions, but the actual commands may be slightly different. Please just use Google to find the correct commands if these do not work for you.):
To Install SQUID:

sudo apt-get install squid

To edit SQUID Configuration File:

sudo nano /etc/squid3/squid.conf

To Allow Access to the SQUID Server from Hosts Change:

http_access deny all

http_access allow all

Restart SQUID Service after any configuration changes: sudo service squid3 restart

To Configure Internet Explorer (Note: Proxy Server Configurations are set within Internet Explorer for the Entire System. Even if you use Chrome you still need to change the settings in IE) :
Open Internet Explorer and Go to Tools
Select Internet Options
Select Connections Tab
Click LAN Settings Button
Type in username and password if there is one.
Select Checkbox under Proxy Server Settings and enter the Proxy Servers IP Address, and the port number SQUID is using. (The port number default is 3128)
Click OK

Basic squid conf

sudo nano /etc/squid3/squid.conf instead of the super bloated default config file

auth_param basic program /usr/lib/squid3/basic_ncsa_auth /etc/squid3/passwords
auth_param basic realm proxy
acl authenticated proxy_auth REQUIRED
http_access allow authenticated
http_port 3128 # or whatever you like

Please note the basic_ncsa_auth program instead of the old ncsa_auth

Setting up a user

sudo htdigest -c /etc/squid3/passwords realm_you_like username_you_like

and enter a password twice for the chosen username then

sudo service squid3 restart

How to create a simple calculator program with javascript

This is a tutorial about how to create a simple calculator program with javascript, css, and html.

First create index.html file

<html>
<head>
    <title>Dice Simulator 2015</title>
    <link rel="stylesheet" href="style.css">
</head>  
<body>
  <h1>Calculator Example</h1>
  <p>Open the JavaScript developer console to interact.</p>
  <script src="calculator.js"></script>

</body>
</html>


Then create style.css file

* {
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
}


create calculator.js file

var calculator = {
  sum: 0,
  add: function(value) {
    this.sum += value;
  },
  subtract: function(value) {
  this.sum = this.sum - value;
  },
  multiply: function(value) {
  this.sum = this.sum * value;
  },
  divide: function(value) {
  this.sum = this.sum / value;
  },
  clear: function() {
    this.sum = 0;
  }, 
  equals: function() {
    return this.sum;
  }
}


After open javascript console
Type in commands example
calculator.add(1)
calculator.add(1)
calculator.equals() // 3

Create a Dice with HTML, CSS, and Javascript

We are going to create a html, css, and javascript die with this code. For every block of code create the coodinating file extension be it .js .html .css and etc. It should work. Happy coding.

First create index.html


<html>
<head>
    <title>Dice Simulator 2015</title>
    <link rel="stylesheet" href="style.css">
</head>  
<body>
  <p id="placeholder">
  
  </p>
  <button id="button">Roll Dice</button>
  <script src="dice.js"></script>
  <script src="ui.js"></script>
</body>
</html>

Second we are going to create style.css

* {
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
}
button {
  background-color: rgb(82, 186, 179);
  border-radius: 6px;
  border: none;
  color: rgb(255, 255, 255);
  padding: 10px;
  text-transform: uppercase;
  width: 200px;
  cursor: pointer;
}
#placeholder {
  height: 100px;
  width: 100px;
  padding: 50px;
  margin: 50px auto;
  border: 1px solid gray;
  border-radius: 10px;  
  font-size:80px;
}

3rd we are going to create the ui.js

function printNumber(number) {
  var placeholder = document.getElementById("placeholder");
  placeholder.innerHTML = number;
}

var button = document.getElementById("button");

button.onclick = function() {
  var result = dice.roll();
  printNumber(result);
};

Finally create the object lateral of the javascript file dice.js

var dice = {
sides: 6,
roll: function () {
  var sides = 6;
  var randomNumber = Math.floor(Math.random() * this.sides) + 1;
  return (randomNumber);
}
}

refactored for dice.js using prototype

function Dice(sides) {
  this.sides = sides;
}
Dice.prototype.roll = function diceRoll () {
  var randomNumber = Math.floor(Math.random() * this.sides) + 1;
    return randomNumber;
  }
var dice = new Dice(6);

In conclusion, I hope you learned something from my source code.

How to Setup Real Cron job on WordPress on your Shared Hosting Account

Why use Real Cron job vs the scripted one?

I’m writing this because I realized the dates on my posts were not updating. This scripted cronjob was not working, instead I would use a real linxu command line cron job. Cron jobs keep your linux machine clean, because they clear cache and freeup memory. The error logs get bigger and bigger. By using cron job one can clean their linux servers hard drive. Less reading for the linux server. Hence faster run website.
 

First open wp-config.php using ftp or file manager.

type in this line of code in the file:

define( 'DISABLE_WP_CRON', true );

Save and your done with this part. Next.

  1. Log into Cpanel
  2. Under Advanced, click on Cron Jobs
  3. Under Add New Cron Job, choose “Once an hour” for Common Settings
  4. Enter this command [replace yoursite with your own domain name]
    wget -q -O – http://yourwebsite.com/wp-cron.php?doing_wp_cron >/dev/null 2>&1
  5. click Add New Cron Job

cpanel-wp-cron

 
This part you may or may not have cron job email you if the cron job is successful or fails. I would recommend you put it one for a day. If it’s all fine and dandy. I would just turn it off because cron jobs are automatic.

Conclusion:

Be careful of using cron job less than 15 minute intervals your webhost might be against it. So read the rules  before you do too quick of cron jobs. Plus cron job are scheduled automatic tasks.