• Home

Category: Tutorial

Helpful Vue Videos!

Written by agrublev on . Posted in External Resources, Free Resource, JS, Recording From Class, Tutorial. Leave a Comment

Intro To JS Videos – IMPORTANT

Written by agrublev on . Posted in JS, Recording From Class, Tutorial. Leave a Comment

Some videos appear to be down, you can watch entire playlist here now:

http://ucsbvideos.surge.sh

[yotuwp type=”videos” id=”2ahJfySx27E,c9PWP0bMP8E,X3wLnrcien0,4qbl1pCnYXw,_SYr5EXM4s0,wOqVvC-jvb8,xACizOMX5OE,F5sfjyW4CW4,0h-JK1XeFek,6R3sfTdiI2g,GrB7gSf5zxw,Hp5DxHt8wSk,PWEclSU_6w4,xWnHVqjNpd0,UK9DzUw4Ako,xwmRSDwOXuo,RAeV1LimC0c,OjouB6h1XOU,FrFwABULxSY,3B7h4TReqSg,bM6RjhZFLuI,odjMw1hXxEs,xJrCMp3gHPY,uF4xn-V9q3U,Fqhx_gr-QZ0″ description=”off” duration=”on” player=”autonext=1&showinfo=0&thumbnails=1″]

You can also watch playlist on youtube here https://www.youtube.com/watch?v=2ahJfySx27E&list=PL9-ILeqAP0n_4joVMTXWFsblxf4UWXici

Setting up Visual Studio Code

Written by agrublev on . Posted in Class Reference, Tutorial. Leave a Comment

For students who already set up visual studio scroll to the bottom of this post!

Watch the video here if you need visual instructions https://my.pcloud.com/publink/show?code=XZYzg97ZUQI88fjJP3HSQlYxyr2rzFRMbTqk

The first thing you need to do is download the application from the following link:

https://code.visualstudio.com/download

After you install the app by dragging it into the Applications folder, open it.

Now navigate to this link to install the Settings Sync extension https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync  and click the Install button

Once you install the extension you will need to click the Reload to Activate button

Once the app reloads follow these steps:

  1. Use keyboard shortcut Cmd + Shift + P to open the command palette
  2. Type Sync and go down with the arrow keys to the Sync: Advanced Options and click Enter
  3. Use arrow keys to go down to Sync: Download Settings from Public GIST and click Enter
  4. Use keyboard shortcut Cmd + Shift + P to open the command palette again
  5. Type Sync: and go down to Sync: Download Settings then click Enter
  6. It should ask you to enter a GIST ID enter the following 846a59831c3a903c311ea25354694cae

It will take a few minutes for all the Extensions to load, once they are done it will ask you to reload. Reload and you are done!

Already followed this guide and just need to update:

  1. Type Cmd + Shift + P and type “Download” find/select “Sync: Download Settings“
  2. A popup will ask you to reload click Yes

Suggested extensions:

Contact Form with PHP/ReCaptcha

Written by agrublev on . Posted in Free Resource, HTML, Tutorial. Leave a Comment

A great script I bought here

https://codecanyon.net/item/contactme-responsive-ajax-contact-form-html5-php/20256608

You can download from here.

After download, I had to change the following fields:

  1. from_name
  2. from_address
  3. to_address

If you want to enable human validation (prevent bots from submitting) there are instructions in index.html you can follow.

Visit https://www.google.com/recaptcha/admin

Fill out the following items

It will provide you with all the needed info here

Update the configs.php file

Change the html as needed to enter the sitekey (this occurs for each form on index.html so you need to copy paste a few times)

Uncomment script near the bottom of the page!

You end up with

Which submits and sends an email like this!

Pretty awesome! Check out final product http://myfinalprojectrocks.com/contact/

Setting up Firebase

Written by agrublev on . Posted in JS, Tutorial. Leave a Comment

Go to https://firebase.google.com/ and click SIGN IN

Then go to https://console.firebase.google.com/u/0/ and click Add Project

Enter a name and Create Project

Navigate to DEVELOP -> Authentication then click Set Up Sign In Method

Enable the ones you want to use

Remember that later you will need to add the domain of your website so it works!

Now select DEVELOP->Database

Then Firestore Get Started

Set it in Test Mode and Enable

Finally, let’s enable storage

Now go to rules tab

Change to

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write
    }
  }
}

Then publish.

 

Get authnetication information

Click the COG on top right and select project settings

Now select

This will give you the code you need to add inside your project!

 

Download the example zip and then follow these steps:

  1. Extract zip
  2. Open the file js/initializeFirebase.js
  3. Replace its contents with the settings from above
  4. Open terminal and type “npm install”
  5. Every time you want to run the system type “gulp”
  6. Here are the links you can go to for the different examples
    1. / will have a full login/signup and list items example
    2. /items.html will have a full example for working with items (add/edit/delete)
    3. /upload.html has an example of uploading files
    4. /auth.html has an example for sign up and login

https://angelprivate.s3.amazonaws.com/teaching/additionalFun.zip

Getting your FTP information (from GoDaddy) – FileZilla/WebStorm Connection

Written by agrublev on . Posted in Tutorial. Leave a Comment

  1. Make sure you are logged in then visit https://account.godaddy.com/products/
  2. Under Web Hosting we click Manage

  3. Then select the cPanel button

  4. Now click the FTP Accounts button

  5. Here we fill out the information, make sure to change Directory to just public_html

  6. Click Create FTP Account

Now that we have the FTP account we can use FileZilla or WebStorm to connect. Let’s cover both.

Connecting with FileZilla

  1. Open FileZilla app (download from the link above)
  2. Click on the Site Manager icon from the top left
  3. Create a new Site from the icon on the bottom left

  4. Specify a host which should be your domain name

  5. For logon type choose normal

  6. Now enter the username you chose + @yourdomain.com and password you entered when setting up the FTP account

  7. That’s it, now select the Connect button on the bottom right

  8. You can either use the left side navigation to find your files to upload, or simply use Finder to go to the folder with your files and drag and drop them into the right side of FileZilla

WebStorm FTP Setup

  1. Either create a new project for your website files or use existing, the final result should be that you’ve opened the folder of your project in WebStorm
  2. Now you can simply browse the remote files via FTP by clicking on Tools -> Deployment -> Browse Remote host

  3. A new panel will appear on the right, click the 3 dots to open the settings

  4. Set a name for your web host (can be domain name) and then OK

  5. Set the FTP host to your domain, then your username + @domain.com and the password we set. Make sure to check the “Save password” checkbox to save us time in the future

  6. Now click ADVANCED OPTIONS and select Passive Mode

  7. No select the Mappings tab and just add “/” in the “Deployment path on the server…” input

  8. Click OK to complete adding the server. Now right click on your Project folder in the left side of WebStorm and select Deployment->Download from MyFinalProject or whatever name you chose for your server to get all your files from the server to your computer!

  9. Now click on Tools->Deployment->Automatic Upload so that when we edit a file and save it, it’s automatically uploaded

  10. Once the downloading is complete, we can edit any file or create a new file and it should automatically be uploaded to our server!

Increasing upload limits on GoDaddy

Written by agrublev on . Posted in Tutorial. Leave a Comment

Information i got and used from https://www.godaddy.com/community/Managing-WordPress/Uploading-WordPress-themes-and-PHP-Limit-How-to-increase/m-p/1860#M110

Login to GoDaddy and go to cPanel

Click the user icon on top right and in the dropdown choose Manage Hosting

Then under the name of your website click Settings

Select cPanel link

Open the file manager

Choose document root option

Click Upload

Now we need a file called php.ini that changes the limits for us. You can download it here or create a text file with the following text

memory_limit = 128M

upload_max_filesize = 100M

post_max_size = 128M

And save it as php.ini

Now upload the file called php.ini by clicking here

Almost done

Close all tabs until you get back to the cPanel tab that looks like this

Or you can follow the steps at the beginning to get back here!

Scroll down until you find

Click on it, and then click the “Kill Processes”

Whew, all done. You can now upload large themes and stuff!

 

Buying hosting/domain

Written by agrublev on . Posted in Tutorial. Leave a Comment

Navigate to the following link to purchase a plan

https://www.godaddy.com/hosting/web-hosting

Selecting a plan is based on how many websites you need and if you want any subdomains like forums.mydomain.com

For a single website you should be okay with the Economy!

Choose no thanks

Choose a domain

Change duration to 12months (can’t be less if you want free domain)

Create an account

Enter your details

Enter your billing address and credit card then purchase

For some reason, it took me to the sites page which was empty until I reloaded! So reload if needed

Click the little 3 dots to set up

Enter the domain you chose

Choose the server location

Only continue if you want them to install WordPress for you!!

If you want automatic installation of wordpress

Create an email if you need one

Now you can go to yourdomain.com/wp-admin and follow the wizard:

Now you can add some social/contact info

Choose any theme, as we’ll change it later

That’s about it for getting set up! The rest will be reviewed in class.

  • 1
  • 2