Quite some time ago I implemented a neural network multi-class classifier using raw JavaScript. The implementation had a single hidden layer of nodes…
Implementing a Neural Network Using Raw JavaScript
Category: Uncategorized
Tips for Parents Returning to College Before Reentering the Workforce
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 theitemscope(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!
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!
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!
Get Your Daily Stripe Balance Using Laravel Task Scheduler
[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]
Laravel Task Scheduler
I create many apps that use the Uber business model for paying out contractors using Stripe, and I make money by using application fees. I like to get my daily account available and pending balances from Stripe. Using Laravel’s built in task scheduler this is trivial. Laravel provides a way to define all of your application’s scheduled jobs within Laravel itself, so that you only have to manage one cron tab * * * * * php /path/to/artisan schedule:run >> /dev/null 2>&1
it’s pretty awesome!
Install Dependencies
I will assume you have created a new Laravel install. I need the Stripe PHP composer module for this to work. Go to the root of your application and type the following command composer require stripe/stripe-php now you have all the necessary components installed.
Define Schedule
All schedules are defined in schedule() method of the App\Console\Kernel located at app/console/kernel.php. I want to make a stripe call to retrieve my balance, both available and pending.
<?php
namespace App\Console;
use Mail;
use Carbon\Carbon;
use DB;
use Illuminate\Console\Scheduling\Schedule;
use Illuminate\Foundation\Console\Kernel as ConsoleKernel;
class Kernel extends ConsoleKernel
{
/**
* The Artisan commands provided by your application.
*
* @var array
*/
protected $commands = [
\App\Console\Commands\Inspire::class,
];
/**
* Define the application's command schedule.
*
* @param \Illuminate\Console\Scheduling\Schedule $schedule
* @return void
*/
protected function schedule(Schedule $schedule)
{
$schedule->call(function () {
\Stripe\Stripe::setApiKey(env('STRIPE_SECRET'));
$balance = \Stripe\Balance::retrieve();
$emailText = "As of {Carbon::today()->toDayDateTimeString()} your available balance is {$balance->available->amount} and your pending balance is {$balance->pending->amount}";
Mail::raw('Text to e-mail', function ($message) {
//
$message->from('financial@app.com', 'Your Application');
$message->to(env('EMAIL_ADDRESS'),env('EMAIL_NAME'))->subject('Your Daily Stripe Balance!');
}); })->daily(); } }
With this piece of code I am now getting daily emails with the date, my available balance, and my pending balance. If you liked this please share and subscribe to my blog posts via email to the right!
API Authentication In Laravel 5.2
[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]
Hours Saved!
Token based API authentication is something you are inevitably going to encounter if you plan on working with web/mobile apps (unless you are coding under a rock). The benefits are great, in fact here are six of them; However it can be a nightmare if you need to create your own token authentication server. As of Laravel 5.2, there is a new auth guard called conveniently api
this guard allows us to check an api_token
parameter against an api_token
field on our users table in our database.
API Configuration
Almost everything is configured right out of the box, open up config/auth.php
and you will see this block of code
/*
|--------------------------------------------------------------------------
| Authentication Guards
|--------------------------------------------------------------------------
|
| Next, you may define every authentication guard for your application.
| Of course, a great default configuration has been defined for you
| here which uses session storage and the Eloquent user provider.
|
| All authentication drivers have a user provider. This defines how the
| users are actually retrieved out of your database or other storage
| mechanisms used by this application to persist your user's data.
|
| Supported: "session", "token"
|
*/
'guards' => [
'web' => [
'driver' => 'session',
'provider' => 'users',
],
'api' => [
'driver' => 'token',
'provider' => 'users',
],
],
By default Laravel 5.2 uses the web
guard, which is the traditional session based model. This model is great for a traditional web application but not suitable for API architecture. The next guard is the api
this guard is suitable for routes that need to be consumed by mobile apps and the like. The reason why you would want to do this is because when you are making request from your client-side app, each request is mutually exclusive of the requests before and after it, thus each one requires authentication. In the traditional session based flow, user data is saved on the server and that session data is used in every request, not only is this approach not scalable, it isn’t efficient or as secure as one might think. API token authentication is faster, scalable, and more secure. The biggest benefit of all is that you can now use this token in other applications to access your own API if you so choose. If you would like to see an example leave a comment of what kind of app you would like to see this implemented in and I will write it, record it, and blog it!
Write An Charity App With Laravel and Stripe – Models
[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]
Laravel Models
In this segment we will focus on creating the model needed for the application. If you remember in the last post on migrations, we created one migration to represent the charities. Now we will utilize Laravel’s powerful Eloquent ORM, which will allow us to represent our database using PHP objects.
Creating Laravel models is actually very simple when done via Artisan. Head to the project root in the command line and enter the following command
php artisan make:model Charity
afterwards open the newly created file app/Charity.php
and add the following contents
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Charity extends Model
{
//
protected $table = 'charities';
protected $fillable = [
'user_id',
'name',
'description',
'monthly_amount'
];
}
The $table
variable let’s Eloquent know which table to associate the model with; It is usually not needed, however I prefer to put it in. Next is a $fillable
array that holds every attribute needed on a POST request to create a new record. If you look, you will see that there are 2 more Laravel models in the app/ directory. Check them out and read them over and get a good understanding of what’s going on.
app/User.php
<?php
namespace App;
use Laravel\Cashier\Billable;
use Laravel\Spark\Teams\CanJoinTeams;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Foundation\Auth\User as BaseUser;
use Laravel\Spark\Auth\TwoFactor\Authenticatable as TwoFactorAuthenticatable;
use Laravel\Spark\Contracts\Auth\TwoFactor\Authenticatable as TwoFactorAuthenticatableContract;
class User extends BaseUser implements TwoFactorAuthenticatableContract
{
use Billable, TwoFactorAuthenticatable;
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'email',
'name',
'password',
];
/**
* The accessors to append to the model's array form.
*
* @var array
*/
protected $appends = [
'using_two_factor_auth'
];
/**
* The attributes excluded from the model's JSON form.
*
* @var array
*/
protected $hidden = [
'card_brand',
'card_last_four',
'extra_billing_info',
'password',
'remember_token',
'stripe_id',
'stripe_subscription',
'two_factor_options',
];
}
app/Team.php
<?php
namespace App;
use Laravel\Spark\Teams\Team as SparkTeam;
class Team extends SparkTeam
{
//
}
Learning Laravel – Installation
[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]
Getting Started Learning Laravel
So you have decided that learning Laravel is worth your time, GOOD FOR YOU! Now you have to go through the task of actually installing and configuring the software on your machine. If you use Laravel Homestead, then all of your system requirements are handled out of the box (I highly recommend this approach), if you choose not to use the VM, make sure your machine satisfies the following requirements:
- PHP >= 5.5.9
- OpenSSL PHP Extension
- PDO PHP Extension
- Mbstring PHP Extension
- Tokenizer PHP Extension
Utilizing Composer
Laravel leverages Composer for all of it’s PHP dependency management. You may ask what is dependency management? Laravel utilizes a plethora of different components in order to make it function. It would be a nightmare if you as the developer is left in charge on managing all of these dependencies, with updates and patches and whatnot. This is where Composer comes in and makes your life pleasant. Composer keeps everything up-to-date, if a package requires other packages then Composer will handle all of the downloads. It’s like gem for Ruby or NPM for Node. If you don’t already have it installed it is quite easy, go to your command line and enter the following command.
curl -sS https://getcomposer.org/installer | php
mv composer.phar /usr/local/bin/composer
This will install composer globally so you can just type
composer <command>
if you run into any errors, then try running with the sudo command
.
The first thing that we will do is install the Laravel installer with composer:
composer global require "laravel/installer"
Before you do anything else, make sure you put ~/.composer/vendor/bin
in your PATH . Now you can start a new Laravel application by issuing the command
laravel new <app>
doing so will create a new Laravel app creating a folder in the process where is your application’s name.
Write An Charity App With Laravel and Stripe – Migrations
[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]
Laravel Migrations
In this segment we are going to focus on prepping our database. Migrations are a way for you as a developer to manage the schemas for your application’s database tables. This is also where you define the skeleton of your Eloquent models, since their attributes are based off the table they correspond to. For a more in depth understanding of migrations and how they work, go through my Learning Laravel posts.
Command Line Time
Head to the command line and go to the root of the project we created in the last post. Using the artisan CLI tool, we will generate some migrations. Enter the following command
php artisan make:migration create_charities_table --create=charities
This will create a new migration file in the database/migrations folder. Open it up and copy the following code
<?php
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateCharitiesTable extends Migration {
/**
* Run the migrations.
*
* @return void */
public function up() {
Schema::create('charities', function (Blueprint $table) {
$table->increments('id');
$table->integer('user_id')->unsigned();
$table->foreign('user_id')->references('id')->on('users');
$table->string('name');
$table->string('description');
$table->decimal('monthly_amount',5,2);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::drop('charities');
}
}
The first thing we add is a foreign key constraint, so that we can easily identify which charities belong to which user, this will become more apparent in the models post. The next three should be self explanatory; We are collecting the name, description and monthly donation amount for the charity. The monthly_amount will also serve as the amount that is charged for one-time donations. If you noticed there are multiple migrations in the database/migrations folder. We can leave these alone for now, but it would be well worth the time to go through and really understand what those files are doing. In any case when you are ready head back to your command line and issue the following command:
php artisan migrate
Your database is now migrated. If you received any error, make sure your database details are correct in your .env file located at the root of your project directory. Next we will build our Eloquent models. Stay tuned, and remember if you like what you read SHARE IT, and follow me on Twitter @mastashake08