Posted on Leave a comment

Crash Course Into PHP – Data Types

[callaction url=”https://www.youtube.com/user/JPlaya01″ background_color=”#333333″ text_color=”#ffffff” button_text=”Go Now” button_background_color=”#e64429″]Subscribe To My Youtube Page[/callaction]

PHP Data Types

PHP variables can store several different data types. Different data types can perform different functions, the basic data types includ:

  • String.e
  • Integer.
  • Float (floating point numbers – also called double)
  • Boolean.
  • Array.
  • Object.
  • NULL.

String

A string is a series of characters wrapped in either single or double quotes, a few examples of strings include:

  • $x = 'Hello my name is Jyrone';
  • $x = "Programming is awesome!"
  • $x = 'The number 13 is very unlucky'

Integer

An integer is any NON-DECIMAL number between -2,147,483,648 and 2,147,483,647 some examples include

  • $x = 1234;
  • $x = -4567;

Float

A float (floating point number) is a number with a decimal point or a number in exponential form some examples include:

  • $x = 1.234
  • $x =1.2e3;
  • $x = 9E-10

Boolean

The boolean data type only has two possible states, true(1) or false(0) some examples include:

  • $x = true;
  • $x = false;

Array

The array data type maps several values to a single variable. Arrays can be initialized with the array() function or the [] shorthand syntax. Arrays can contain other arrays, some examples include:

  • $x = [
    "a" => 1,
    "b" => "xyz"
    ];
  • $x = [
    "a" => [
    "a1" => 2
    ],
    "b" =>345
    ];

Object

The object data type is arguably the most important data type. An object stores data in its properties, and manipulates that data using methods. Objects have to be declared explicitly using the class keyword, a class is a structure that contains methods and properties, an example would be:


class Person{
protected $height, $weight;
public function __construct( $height,$weight){
$this->height = $height;
$this->weight = $weight;
}
public function getWeight(){
return $this->weight;
}
public function getHeight(){
return $this->height;vb
}
public function setWeight($weight){
$this->weight = $weight;
}
public function setHeight($height){
$this->height = $height;
}
}
$person = new Person(70,163);
//returns 70
echo $person->getHeight();

Objects and classes will be covered more in depth as time goes on.

Null

The null data type can only be assigned one value, and that is you guessed it, null. You use null when no value has yet been assigned to a variable:

  • $x = null;

Conclusion

As you progress through my tutorials I will go deeper and deeper into each data type as the need arises in code. Next I will explain the basic operators of PHP. If you haven’t already please subscribe to my newsletter to get real time updates on my blog entries.

Posted on Leave a comment

Crash Course Into PHP – Syntax

[callaction url=”https://www.youtube.com/user/JPlaya01″ background_color=”#333333″ text_color=”#ffffff” button_text=”Go Now” button_background_color=”#e64429″]Subscribe To My Youtube Page[/callaction]

By now you guys should know

That I specialize in Laravel development, it’s what 90% of my blog content comprises of. I want to kick off 2017 with my new online coding classes, these will be Youtube series (mostly screen recordings, but a few face to camera as well you can subscribe to my channel here), designed to teach coding to beginners as well as advance methodologies for more seasoned programmers. The main concern I receive from newcomers coming to my site, is that they would like to see more basic PHP tutorials. As I thought about it, I couldn’t agree more, thus today starts the crash course in PHP lessons. I say crash course because I’m only going over the basic concepts, enough where the Laravel code will start making more sense to the n00bs.

What Is PHP?

PHP is a server-side scripting language designed primarily for web development but also used as a general-purpose programming language. It powers the majority of websites in the world (82.3%). The largest social media platform (Facebook) is powered by PHP, among others. It by far has the most support libraries than any other language. It is free to use and develop with both for personal and commercial applications, making it ideal for programmers with a low budget. PHP code can be directly embedded into HTML, making it ideal to create rich dynamic web pages (and apps).

How To Install PHP

Anyone who knows me, knows I love virtual machines! It makes installing software such as PHP and a full LEMP stack a breeze. Since learning Laravel is the ultimate goal, I will direct you to install the Laravel Homestead virtual machine on your computer, it has the following software already bundled in, meaning you won’t have to do a lick of package management:

  • Ubuntu 16.04
  • Git
  • PHP 7.0
  • Nginx
  • MySQL
  • MariaDB
  • Sqlite3
  • Postgres
  • Composer
  • Node (With PM2, Bower, Grunt, and Gulp)
  • Redis
  • Memcached
  • Beanstalkd

Mac users have the option of using Laravel Valet as well.

PHP Syntax

All PHP files end in .php which shouldn’t be too surprising. Do me a favor, open up your terminal (log into the virtual machine) and create a new php file

nano hello.php

Now paste in the following content and let’s break it down:


<?php
echo "Hello World!";
?>

The first and last parts of this script tell the preprocessor that PHP code needs to be interpreted


<?php
// PHP code goes here
?>

The middle part uses the built-in PHP function (we will get to functions later) echo to print the text “Hello World!” to the screen
The semicolon tells the preprocessor that the PHP statement is completed.
If you run the following command you should see the text “Hello World!” pop up.

php hello.php

The really cool thing about PHP is that you can embed it straight into your HTML, so if you wanted to show this same snippet of code in a webpage instead of the terminal you can simply do this:

HTML Embedding


<!DOCTYPE html>

 

<html>

 

<body>

 

<h1>My first PHP page</h1>

 

<?php echo “Hello World!”; ?>

 

</body>

 

</html>

PHP Comments

Often times when coding you need to leave a note to yourself or fellow programmers. In PHP there are two ways to leave comments in your code

  • // – Creates a SINGLE LINE comment
  • # – Creates a SINGLE LINE comment
  • /**/ – Creates a MULTILINE comment that spans several lines

<?php
// This is a single-line comment
# This is also a single-line comment
/*
This is a multiple-lines comment block
that spans over multiple
lines
*/
?>

This is the most basic syntax of PHP, next we will go over variables and data types. If you haven’t please subscribe to my newsletter to get real time updates when I push new material.
 

Posted on Leave a comment

Sending Twilio Notifications With Laravel 5.3

[callaction url=”https://www.youtube.com/user/JPlaya01″ background_color=”#333333″ text_color=”#ffffff” button_text=”Go Now” button_background_color=”#e64429″]Subscribe To My Youtube Page[/callaction]

Sending Twilio Notifications With Laravel 5.3

One of the greatest features added to Laravel 5.3 IMHO was the introduction of notifications. Notifications allow you to send messages to users over a variety of channels including mail, sms, and slack. You also have the option of storing them in the database. “THIS IS GREAT” I thought as I was reading up on it and contemplating how I was going to refactor my existing hoemebrew Twilio notification systems. There was just one problem. The Laravel notification system’s default SMS driver is for Nexmo, not Twilio! Luckily I found a solution, and I am going to share it with you today

The Application

The application I am going to walk you through writing a simple Laravel 5.3 app that signs users up and sends them daily inspirational quotes. The order of which the application will be written is thus:

  • Create App/Install dependencies
  • Prepare database/Registration
  • Create notification
  • Modify inspire console command

While this application won’t be very exciting, it will demonstrate the groundwork needed to get Twilio up and running in your web application.

Creating App/Installing Dependencies

First off we must create the application open up your terminal and use the following command

laravel new TwilioNotifications

Once the appcation has been scaffolded cd into the new directory and add the following composer package

composer require laravel-notification-channels/twilio

This will add the Twilio dependency we need to make SMS notifications. Now we need to add the following to the providers array in config/app.php

// config/app.php
'providers' => [
    ...
    NotificationChannels\Twilio\TwilioProvider::class,
],

Next we need to update our config/services.php file and add the Twilio credentials
 

// config/services.php
...
'twilio' => [
    'account_sid' => env('TWILIO_ACCOUNT_SID'),
    'auth_token' => env('TWILIO_AUTH_TOKEN'),
    'from' => env('TWILIO_FROM'), // optional
],
...

Make sure you update you .env file to suit, other than that we are ready to go onto the database/registration logic.

Database/Registration

Open up the default database migration. We just need to add a ‘phone_number’ attribute to the migration, add the following

$table->string('phone_number');

You can safely run your migration, nothing else to be done here. Now we need to scaffold the application of authentication logic, please enter the following command in your terminal.
php artisan make:auth
This command creates the views, controllers, and routes for registering users, we just need to add some logic to accommodate for phone_number. First open up resources/views/auth/register.blade.php and underneath the email block of HTML add the following:


<div class="form-group{{ $errors->has('phone_number') ? ' has-error' : '' }}">
<label for="phone" class="col-md-4 control-label">Phone</label>
<div class="col-md-6">
<input id="phone_number" type="tel" class="form-control" name="phone_number" value="{{ old('phone_number') }}" required>
@if ($errors->has('phone_number'))
<span class="help-block">
<strong>{{ $errors->first('phone_number') }}</strong>
</span>
@endif
</div>
</div>

Next open up app/Http/Controllers/Auth/RegisterController.php in your Validator array add the following rule:

'phone_number' => 'required'

In the create method simply add the following in the User::Create array:

'phone_number' => $data['phone_number'],

You should be able to register accounts now! On to the next part, creating the notification

Creating The Notification

Laravel provides an artisan command for creating notifications. Go to the terminal and enter the following

php artisan make:notification InspireUser

This will create a Notifications folder under app/, go there and open InspireUser.php file
In the constructor we are going to be passing in a quote string so we should grab and set it


public $quote;
/**
* Create a new notification instance.
*
* @return void
*/
public function __construct($quote)
{
//
$this->quote = $quote;
}

Look at the via($notifiable) method, notice is returns an array of channels to send the message to. Since we are not using mail in this example you can safely remove that and replace it with this


public function via($notifiable)
{
return [TwilioChannel::class];
}

Be sure to add the following use clauses at the top


use NotificationChannels\Twilio\TwilioChannel;
use NotificationChannels\Twilio\TwilioSmsMessage;

For every channel you want to broadcast on you must have a corresponding method toChannel($notifiable). So for Twilio we need a toTwilio($notifiable) where $notifiable is the class that is being notified.


public function toTwilio($notifiable)
{
return (new TwilioSmsMessage())
->content("Hello {$notifiable->name} here is your inspiring quote for the day: {$this->quote}");
}

That’s all we have to do, now on to the last part, modifying the inspire console command.

Modifying The Inspire Console Command

Laravel ships with a predefined console command called inspire, it simply echos an inspiring quote to the console. It’s located in routes/console.php delete everything and replace it with this


<?php
use Illuminate\Foundation\Inspiring;
use App\User;
use App\Notifications\InspireUser;
/*
|--------------------------------------------------------------------------
| Console Routes
|--------------------------------------------------------------------------
|
| This file is where you may define all of your Closure based console
| commands. Each Closure is bound to a command instance allowing a
| simple approach to interacting with each command's IO methods.
|
*/
Artisan::command('inspire', function () {
$users = User::all();
$users->each(function($item, $key){
$this->info("Notifying {$item->name}");
$item->notify(new InspireUser(Inspiring::quote()));
});
})->describe('Send an in inspiring quote to all your users');

This version of inspire grabs all the users and sends them a text message with the inspiring quote. You can go to the terminal and type

 php artisan inspire

and all your users will be notified. That’s it in a nutshell, although I would advise putting this command on a daily schedule so you don’t have to manually go into the terminal everyday, but I will leave you to that. If you would like to see the source code, it is available here on Github.

Posted on Leave a comment

Adding Javascript To About Me Page

[callaction url=”https://www.youtube.com/user/JPlaya01″ background_color=”#333333″ text_color=”#ffffff” button_text=”Go Now” button_background_color=”#e64429″]Subscribe To My Youtube Page[/callaction]

Making About Me Interactive

If you have been following this series thus far then you should have an About Me page that looks similar to the following:

About Me Page Pre Javascript
About Me page before javascript implementation

So far we have added the HTML, integrated Bootstrap and added some custom CSS. This blog will serve as an introduction to Javascript. Javascript is the programmig language of the web. HTML defines the content, CSS defines the layout, Javascript defines the behavior. In this tutorial I will introduce you to the high level concepts of Javascript with fine tuned examples later to come.

Random Color Generator

To get you started on the basics of Javascript I will take you through creating a random color generator that will change the background color. This process will require adding a new button to the HTML as well as a new tag <script>. It will also involve an external script that contains the logic for changing the color. Below your phone number add the following HTML

<button id="color-change" class="btn btn-default">Change Background Color</button>

Nothing special the javascript will use this button later. Now create a new folder, call it js/ and inside create a new file called main.js. Inside this newly created file add the following contents.

window.onload = function(){
  document.getElementById('color-change').onclick = function(){
    /* In HTML colors are represented in a 6-digit hexadecimal string
    The values range from 0-9 and A-F*/
    var letters = '0123456789ABCDEF';
    //Colors in HTML are always prepended with a #
    var color = '#';
    //Loop 6 times and randomly select a character from the letters variable
    //Then concatanate to the color string
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    //set the background color of <body> to the random color
    document.body.style.backgroundColor = color;
  };
};

I’m going to break this down top to bottom:

  • window.onload – The window object represents an open window in a browser, onload is a javascript event that runs the specified function once everything on the page loads.
  • function() – A JavaScript function is a block of code designed to perform a particular task.
  • document.getElementById(‘color-change’)- get the button we just created based on it’s ID
  • .onclick = function(){ – onClick is a Javascript event that fires when an element is *WAIT FOR IT…..* CLICKED!
  • var letters = ‘0123456789ABCDEF’; – a variable called letters that holds all the possible values for a HTML color string
  • var color = ‘#’; – In HTML color strings always start with # followed by 6 characters. Here we initialize a color string.
  • for (var i = 0; i < 6; i++ ) { – A Javascript loop that runs 6 times and evaluates everything between {}
  • color += letters[Math.floor(Math.random() * 16)]; – Remember that color string and letters string? Here we add (concatenate) onto
    the color string and select a random character from the letters string
  • document.body.style.backgroundColor = color; – Set the background color of <body> to the newly generated color.

Your page should look similar to this:

About Me Page Newly Added Button
About Me Page Newly Added Button

If you click the button your background should change to a random color like so:
About Me Page Random Color
About Me Page Random Color

Conclusion

I know it isn’t terribly fancy but you just wrote your first web app! It’s not that difficult is it?! Continuing forth I will add more advanced features to teach more in-depth skills. If you haven’t already please subscribe to my blog via email and feel free to leave any comments below!

Posted on Leave a comment

Styling Our About Me Page With CSS

[callaction url=”https://www.youtube.com/user/JPlaya01″ background_color=”#333333″ text_color=”#ffffff” button_text=”Go Now” button_background_color=”#e64429″]Subscribe To My Youtube Page[/callaction]

Cascading Style Sheets

Cascading Style Sheets or CSS is the language that describes how HTML documents are displayed. In other words it is the language that styles the web. It is the 2nd cornerstone of web development, with the 3rd being javascript. Like with all my tutorials I will give you a brief introduction to the language and teach you the innerworks bit by bit over various demos.

Our Current Situation

If you have been following along then you should have a basic about me page built. Here is mine:

<!DOCTYPE html>
<html>
<head>
<title>About Jyrone Parker</title>
</head>
<body>
<h1>Hi I Am Jyrone Parker</h1>
<img src="https://en.gravatar.com/userimage/70717632/53adbdecac04d4ffbe3449993c901a73.jpg?size=200"/>
<audio loop autoplay>
<source src="http://freesound.org/data/previews/353/353234_3162775-lq.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p> I am CEO and lead engineer at J Computer Solutions LLC, a consultancy that places software and DevOps engineers at companies in need.
<div itemscope itemtype="http://schema.org/LocalBusiness">
<h1 itemprop="name">Contact Me</h1>
Phone: <span itemprop="telephone">
<a href="tel:+18594024863"> 859-402-4863</a>
</span>
</div>
</p>
</body>
</html> 

As it stands currently this page is UGLY! I’m going to import a CSS framework to start off with. A framework basically is a bunch a code that boilerplates stuff for you, so you can focus more on the core of what you are trying to accomplish. My framework of choice is Bootstrap the way you add CSS code to your HTML markup is via the <link> tag. In the head of your document add the following:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

This will load the latest bootstrap css into your webpage. Notice the href does not have to be a remote address. If you have a folder called css/ and downloaded the bootstrap code you can call it like href=”css/bootstrap.css”.

Prepping The HTML

Before we do any styling we need to add a few <meta> tags to the top of the <head> section for Bootstrap to work properly. Please add  the following right below the <head> tag:


<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

Elements, IDs & Classes

CSS can interact with the HTML document via elements, ids, and classes. An Element is a tag such as <body> or <h1>. An id points to one specific tag on an HTML document and ONLY one such as <title id=”about-me-page-title”>. A class applies a style to every element with that class AND everything in between that element such as


<div class="cool-section">
<p id="cool-paragraph">
Some text goes here
</p>
</div>

In this example both <div> AND  <p> have the class “cool-section” applied to it because <p> is a child of <div>; However <p> has addition styling that <div> does not because of its id.
 

Creating main.css

I know I said we would be using Bootstrap to do our styling, but I want to make one addition to the background color of the body. Create a folder called css and in that folder create a folder called main.css. In a CSS file the syntax is as follows


element{
property:value;
}

or


#id{
property:value;
}
.class{
property:value;
}

Since I want to change the body element and I want to change the background color to this nice gray I like I put in the following rule:<pre><code class=”language-css”>


body{
background-color: #667;
}

If you are wondering how #667 = gray, it’s because HTML uses hexadecimal for color, here is a good reference if you need it http://www.w3schools.com/colors/colors_picker.asp. Save the file and right below the Bootstrap link place this link

<link rel="stylesheet" href="css/main.css">

Navigation Bar

One of the bootstrap components is the nav bar. HTML5 added a <nav> tag that defines a set of navigation links for your document. Copying the example snippet from the Bootstrap website and removed what wasn’t needed.


<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Jyrone Parker</a>
</div>
</div><!-- /.container-fluid -->
</nav>

Ignore all of the data- attributes right now that’s javascript related, but notice all of the classes in this section these are pre-defined Bootstrap styles. I suggest getting familiar with the documentation. Add this nav bar right below your opening <body> tag refresh your page and notice the changes.
 

Styling Content

The first thing I want to do is make my content a fixed width, this will give it a consistent look across devices. To do this I will wrap all my content (minus nav) in a div with class container. I also want everything in this div to stand out. Luckily Bootstrap has a class for content you want to stand out it’s called jumbotron. Lastly we want all text to be centered, Bootstrap provides a text-center defintion.
<div class=”container jumbotron text-center”>
//previous code
</div>
The finishing touch will be preformed on our profile picture. Bootstrap offers some img classes to help us. On the <img> tag add the following classes:


<img class="img img-rounded" src="https://en.gravatar.com/userimage/70717632/53adbdecac04d4ffbe3449993c901a73.jpg?size=200"/>

Now save and refresh the page, notice how much better it looks? In case you missed anything here is what my page markup looks like:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<title>About Jyrone Parker</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body id="">
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Jyrone Parker</a>
    </div>
  </div><!-- /.container-fluid -->
</nav>
<div class="container">
	<div class="jumbotron text-center">
<h1>Hi I Am Jyrone Parker</h1>
<img class="img img-rounded" src="https://en.gravatar.com/userimage/70717632/53adbdecac04d4ffbe3449993c901a73.jpg?size=200"/>
<audio loop autoplay>
<source src="http://freesound.org/data/previews/353/353234_3162775-lq.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<p>
I am CEO and lead engineer at J Computer Solutions LLC, a consultancy that places software and DevOps engineers at companies in need.
<div itemscope itemtype="http://schema.org/LocalBusiness">
	<h1 itemprop="name">Contact Me</h1>
		Phone: <span itemprop="telephone"><a href="tel:+18594024863">
859-402-4863</a></span>
</div>
</div>
</p>
</div>
</body>
</html>

You can also see my latest code on Github. Next we are going to add some interactiveness with some javascript!! If you haven’t already please subscribe to my blog via email to get notifications on when I post. If you have any questions please leave them in the comments!d

Posted on 1 Comment

A Simple About Me Page

[callaction url=”https://www.youtube.com/user/JPlaya01″ background_color=”#333333″ text_color=”#ffffff” button_text=”Go Now” button_background_color=”#e64429″]Subscribe To My Youtube Page[/callaction]

About Me Refresher

In this next iteration of my HTML5 series, we are going to start out with a simple about me page. So let’s start off where we left shall we? Last time we spoke I left you all with this snippet:


<!DOCTYPE html>
<html>
<head>
<title>About Jyrone Parker</title>
</head>
<body>
<h1>Hi I Am Jyrone Parker</h1>
<img src="https://en.gravatar.com/userimage/70717632/53adbdecac04d4ffbe3449993c901a73.jpg?size=200"/>
<p>
I am CEO and lead engineer at J Computer Solutions LLC, a consultancy that places software and DevOps engineers at companies in need.
</p>
</body>
</html>

In a nutshell this is the basis for a web page but it’s not terribly exciting and even more so it’s ugly as all hell. So let’s change that. I’m a functionality guy before a design guy so I’m going to write all the components I want for my about page.

Adding Audio

Who doesn’t want a little background music? With HTML you can add links to local or remote audio files. I grabbed some cool beat from freesounds.org http://freesound.org/data/previews/353/353234_3162775-lq.mp3

<audio loop autoplay> <source src="http://freesound.org/data/previews/353/353234_3162775-lq.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>

Substitute the src link with whatever audio source you want and place the entire snippet above the <img> tag. If you load your page in the browser you will hear your song autoplay.

Add Phone Number

I want people to know how to get a hold of me and I want search engines to know me. We can achieve two in one. HTML5 introduced a new tel protocol, which enables devices such as Android and iOS to open their call applications and make the phone calls. Search engines also use the Schema.org to create rich results (if you don’t know what I mean Google a celebrity and see all the extra flashy stuff comes up) via microdata. Copy and modify the following snippet to fit your needs


<div itemscope itemtype="http://schema.org/LocalBusiness">
<h1 itemprop="name">Contact Me</h1>
Phone: <span itemprop="telephone"><a href="tel:+18594024863">
859-402-4863</a></span>
</div>

In the feature I plan on doing a comprehensive tutorial on microdata and schema.org tags, but for now if you want to read up on it click the link above. Here is a brief breakdown of the following tags and attributes:

  • <div> – tag defines a division or a section in an HTML document.
  • itemscope – By adding itemscope, you are specifying that the HTML contained in the <div>...</div> block is about a particular item (Schema.org).
  • itemtype – You can specify the type of item using the itemtype attribute immediately after the itemscope(Schema.org)
  • itemprop – To label properties of an item, use the itemprop attribute (Schema.org).
  • <h1> – tag defines a heading
  • <span> – tag is used to group inline-elements in a document
  • <a> – tag is used to define a link
  • href – attribute specifies the link’s destination:

*HINT: You can do the same thing with email just change the href link to mailto:<email>

Conclusion

That’s pretty much all of the content I want my about me page so this is where I am going to stop. HTML5 is easy to learn it’s 99.9999% learning the tags and attributes, which come with time and practice (and following my tutorials). The next tutorial will start the beginning of the meat of front end web development CSS (Cascading Style Sheets) which is the language that allows us to style our webpages (currently ours is boring). If you haven’t subscribe to my blog via email, and please share this with anyone who you believe would benefit! Be sure to see the updated code here!

Posted on Leave a comment

A Primer To HTML

[callaction url=”https://www.youtube.com/user/JPlaya01″ background_color=”#333333″ text_color=”#ffffff” button_text=”Go Now” button_background_color=”#e64429″]Subscribe To My Youtube Page[/callaction]

What Is HTML?

HTML is short for Hyper Text Markup Language. It is the language that describes web pages. Every web page is made up of HTML if you don’t believe me right-click on any webpage and select “view source”; You will see the HTML that makes up that particular page. HTML consists of tags usually in the form of <tag>CONTENT </tag>. Below is an example of a minimum HTML document or webpage


<!DOCTYPE html>


<html>


<head>
<title> My First Webpage! </title>
</head>
<body>
HELLO WORLD!
</body>
</html>

 

If you copy and paste that into an empty document and save it as index.html. Now launch your web browser of choice and open the file you just created. You should see the words “HELLO WORLD!” pop up on the screen with a title of “My First Webpage”. Now let’s break down what each tag means

  • The <!DOCTYPE html> declaration defines this document to be HTML5
  • The text between <html> and </html> describes an HTML document
  • The text between <head> and </head> provides information about the document
  • The text between <title> and </title> provides a title for the document
  • The text between <body> and </body> describes the visible page content

A simple way I like to think about it is the head section is used by the browser and search engines, where the content of the body is what the user of the browser will see and interact with.

Useful Tags

HTML has hundreds of tags, the vast majority of which you will probably never use, however here are a few you should get really familiar with.

  • <p> – Defines a paragraph
  • <h1> to <h6> – Define headings with h1 being the most important heading, to h6 being the least
  • <a href=”http://someurl”> – Defines a link tag where href= the remote link
  • <img src=”/link/to/image”> – Defines an image
  • <video src=”/link/to/video”> – Defines a video
  • <audio src=”/link/to/audio”> – Defines an audio source

Of course you have full range to look at all the tag definitions here. Next we will create a simple about me page, utilizing git in the process! So if you aren’t familiar with git you should start here. Also don’t forget if you haven’t already subscribe to my blog via email to get real-time updates on whenever I post! Be sure to leave comments below they are greatly appreciated!

Posted on 2 Comments

Installing Git

What Is Git?

Before we actually get to installing git, allow me to tell you what it is and why it is so useful to know it. Git is a distributed version control system, used to create small and large applications. It allows multiple people, whether they are developers, designers, or who else to work on the project simultaneously without interfering with each other’s work. It’s even useful for solo projects as you can track your progress and revert back if you ever need to. Let’s take the following example:

Git has a concept of every one having their own local git repository. This means there is a main project somewhere on a remote server. When it comes time for a new developer to come onto the project they “clone” the remote repository onto their local machine. This allows everyone to work on the same project without interfering with everyone else’s work. You then “commit” your changes, then “push” to the remote server, where your team mates can “pull” your changes. Make sense? If it doesn’t don’t worry I will be explaining all of the commands in detail in later tutorials.

Beyond that many companies look at software developer’s Github account when making hiring decisions so git serves as your CV. This tutorial will show you how to set up git on Linux operating systems as both Mac and Windows have visual installers here.

Installing Git From The Command Line Debian Linux

Open up the command line and type in the following commands (may have to run as sudo)

apt-get install git-all

Installing Git From The Command Line Fedora Linux

Open up the command line and type in the following commands (may have to run as sudo)

yum install git-all

There you are all set. You are now ready to begin your software journey with git in your tool belt. In the next series I will be showing you the process of starting a git repository and adding commits to it. If you haven’t already subscribe to my blog via email to get all the latest posts from my page.

Posted on 2 Comments

Treat Me At Home

[callaction url=”https://www.youtube.com/user/JPlaya01″ background_color=”#333333″ text_color=”#ffffff” button_text=”Go Now” button_background_color=”#e64429″]Subscribe To My Youtube Page[/callaction]

Treat Me At Home

My latest web application is out! Treat Me At Home is an on demand app that connects service providers with people who want services done at their home. This can be anything from requesting a massage or a pedicure, all the way to requesting a tutor or a personal trainer (BTW if you want to book individual programming learning sessions with me, you can book time here). The process is simple: browse providers, book time, pay (credit/debit, Alipay, and Bitcoin accepted), provider comes and perform service.

How Much Does It Cost To Sign Up?

Treat Me At Home is and will always be free to sign up as a service provider. Users who are simply purchasing services don’t need a login.

How Do I Make Money As A Service Provider?

When you sign up as a service provider on Treat Me At Home, you input what services you are offering, how much they costs, and a non-prepaid debit card. When someone books an appointment with you, and payment goes through 92% of the total value gets transferred to your debit card (in most cases instantly). Treat Me At Home retains 5% and there is a payment processor’s fee of ~3% .

Who Can Register As A Service Provider?

Anyone who is 18+ and is legally allowed to perform the services they offer in the state they practice.

Current State

Currently the app isn’t even version 1.0. I asked a few people to beta test the app for me (anyone reading this article feel free to!) Follow the app, recommend it to friends who would sign up and use it! Thank you all for following my endeavors and I appreciate all of you! Don’t forget to subscribe to my blog to get email notifications everytime I post!
 

Posted on 1 Comment

My Absence And News

[callaction url=”https://www.youtube.com/user/JPlaya01″ background_color=”#333333″ text_color=”#ffffff” button_text=”Go Now” button_background_color=”#e64429″]Subscribe To My Youtube Page[/callaction]
[divider style=”solid” color=”#eeeeee” width=”1px”]
I know it has been a while since I have posted and I apologize for that. My wife, son, and I moved back to Kentucky in February whilst awaiting for the arrival of our daughter Moriah to be born

Now that she’s here and settled I will be back on the grind with the tutorials. Which brings me to my next point, I would thoroughly appreciate feedback from you guys in regards to the types of applications you would like to see created on this site. Feel free to either comment on one of the blogs, or send me an email directly at jyrone.parker@gmail.com I am going to do some more Stripe apps since that is a hot topic in the field right now.
NEW LANGAUGE TUTORIALS
I will be adding Ruby and Swift, and MatLab tutorials to the site soon! More free tutorials to expand your knowledge base, subscribe to the blog now to get the latest updates.
WHEN CAN I EXPECT NEW CONTENT?!
Expect 1-2 tutorials coming by June 11, 2016.