podcast Archives ⋆ Schaffen Creative

By Tom Norman

Make. Manage. Achieve.... more

Download on the App Store

Download on the App Store

Get it on Google Play

FAQs about podcast Archives ⋆ Schaffen Creative:

How many episodes does podcast Archives ⋆ Schaffen Creative have?

The podcast currently has 45 episodes available.

podcast Archives ⋆ Schaffen Creative episodes:

April 03, 2018Eps 33: Testing Sites
Importance of a testing site
You never want to put your code out on an active website if it hasn’t been tested first.
Most importantly – Can break any or all aspects of what is already out
May not show up
Content may not be ready to go live, but you still want to see what it’s going to look like or stage it for release
A couple different ways
Use a subdomain as your testing site ideal for hand-coded websites as well as wordpress sites (hand-coded sites is easier to transfer via ftp vs redoing the work for wordpress sites)
Schaffencreative.com would have a subdomain of testing.schaffencreative.com
Do everything on the testing site while using a “coming soon” page or plugin on the real domain
Use GitHub to manage hand-coded work (useful links below)
Using GIT to Manage a Live Website
What is GITHub And Why Should Your Digital Team Use It.
Use a WordPress Plugin
I’ve never explored this option
Use your local machine (computer) to create and test your site
Should be for more experienced developers only
Labor intensive to set up and get running
Resources;
Set up a local server
How to create a local WordPress site using XAMPP
Other excellent resource: How to Create a WordPress Staging Site for All Your WordPress Testing Needs
To sum up: ALWAYS TEST YOUR CODE FIRST
Twitter
@SchaffenCreate
@tommnorman
Website:
https://www.schaffencreative.com

The post Eps 33: Testing Sites appeared first on Schaffen Creative.
...more
8min
March 20, 2018Eps 32: Custom WordPress Homepage
Steps:
1.)    Login via FTP
2.)    Find the main index page of your theme
3.)    Download via FTP
SAVE THE ORIGINAL COPY AS A SEPARATE FILE SO YOU CAN EASILY REPLACE ANY CHANGES/ERRORS
4.) Edit page accordingly. For example:
      Remove sidebar code
     Remove main page code
      Add new sections using html – basic HTML, Bootstrap or any other framework compatible with WordPress
     Test your changes, experiment with removing different sections
     Search online for tutorials on how to utilize WordPress code to its fullest extent
5.)    Save document as front-page.php
      Wordpress looks for front-page.php if it exists and uses that as home
6.)    Upload new front-page document to the root of your wordpress site where index.php lives
7.)    Login to wordpress
8.)    Go to pages
Create a new page
Call it whatever you want
9.) Go to your settings section.
In settings there is an option to select a specific home page and a specific blog page.
10.) Select whatever page you created as your specific home page
11.) DON’T FORGET TO SAVE YOUR SETTINGS
12.) You are now ready to go to your created page and add content.
Next week I’ll discuss how to add multiple editable sections to your page editor so you can work around custom content, or simply just have separate chunks of content/code.
Twitter
@SchaffenCreate
@tommnorm
Website:
https://www.schaffencreative.com
The post Eps 32: Custom WordPress Homepage appeared first on Schaffen Creative.
...more
7min
March 20, 2018 Podcast Update
This is a brief update on the future of the podcast, my brand (TNPW Design) and projects coming down the road.
The post Podcast Update appeared first on Schaffen Creative.
...more
6min
March 06, 2017 Eps 31: SASS MixIn – Talking HTML
A mixin allows developers to create reusable CSS blocks. This helps avoiding writing repetitive code. Also allows to make quick changes without searching code for every instance.

@mixin image-rotate {
margin: 20px auto 0 auto;
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

@mixin image-rotate-hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

img#norm {
@include image-rotate;
}

img#norm:hover{
@include image-rotate-hover;
}
Sitepoint example
A mixin can take Sass data values as arguments. These values are specified when you define the mixin and given when you @include the mixin. The arguments are then passed to the mixin as variables. Arguments are included in a comma separated list enclosed in parentheses after the mixin name.

@mixin headline ($color, $size) {
color: $color;
font-size: $size;
}

h1 {
@include headline(green, 12px);
}

h1 {
color: green;
font-size: 12px;
}

h2 {
@include headline(red, 10px);
}

h2 {
color: red;
font-size: 10px;
}

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
Compiling program & link (Koala)
Where to learn about SASS – http://sass-lang.com/
Codeacademy has a SASS class
@tommnorman
@tnpwdesign
TNPWDesign.com
WebDevPod.com

The post Eps 31: SASS MixIn – Talking HTML appeared first on Schaffen Creative.
...more
23min
February 28, 2017Eps 30: SASS Basics – Talking HTML
What is SASS?
Considered an extension of CSS. I consider it a streamlined version of CSS.
How it works
Set up on your personal system – I use Koala to compile my code
Done locally then uploaded to the server via Filezilla
Create a .SCSS file
Write ANY CSS code as you normally would
Add the SASS styling code as you see fit
variables
mixins
Code Nesting
Putting code inside of code
imports
Get into it in a future eps
Save file
Compile code
may do so automatically once SCSS file is saved.
Compiling transforms your SCSS file into a CSS file
Benefits
Streamline CSS writing – The one change will be distributed accross to all the corresponding instances of whatever it is you changed.
Negatives
You have to learn how to use SASS
You have to figure out how to get it to work on your computer, which can be a feat if you aren’t Computer savvy
Variables
Not usable in standard CSS
SASS integrates a way to create variables which then translates to regular CSS when compiled

$primary-color: #113e6d; /* BREWER BLUE */
$secondary-color: #c1c4c4; /* COWBOY GRAY */
$tertiary-color: #ffbf00; /* PACKER GOLD */
$quaternary-color: #294239; /* PACKER GREEN */
$quinary-color: #b70101; /* BADGER RED */
$font-stack1: 'Merienda One', cursive;
$font-stack2: 'Kite One', sans-serif;
$font-stack3: 'Sintony', sans-serif;
body {
background-color: $primary-color;
font-family: $font-stack3;
font-size: 62.5%;
}
#center {
margin: 0 auto;
background-color: $secondary-color;
width: 800px;
}
Compiling program & link (Koala)
Where to learn about SASS – http://sass-lang.com/
Codeacademy has a class
@tommnorman
@tnpwdesign
TNPWDesign.com
WebDevPod.com
The post Eps 30: SASS Basics – Talking HTML appeared first on Schaffen Creative.
...more
20min
February 20, 2017Eps 29: Back to Basics – Talking HTML
Check your workflow
Review EVERYTHING.
Look at where you work
Desk setup
Are you in an external office or do you sit in your living room at home
Do you need to find a new spot
What are you sitting in
Type of chair matters
How many monitors are you using
Do you need a new one?
Do you need to add another?
You can’t be productive if you are distracted or uncomfortable
How do you work
What is your text editor of choice
Does it access FTP?
Do you work off of your local machine and upload via an FTP client like Filezilla?
How often are you checking your results.
Upload changes often and make minor tweaks along the way vs doing giant loads of work and fine tuning later
How much time do you waste sweating the small problems vs waiting until the end of the day – or even the project – to move pixels
Are you taking time to update your software?
Very important, especially if you are using wordpress
Checking for theme and plugin updates can be the difference between a hacked site and a site that loads quickly and efficiently
Biggest question
ARE YOU USING YOUR TIME WELL
Biggest distractions:
In home
Kids
Pets
Technology
Tv or phone
Office setting
Co-workers
Technology
Disorganized business
Random meetings
Too much watercooler talk
How do you fix the issues
Force yourself to take time – maybe 5 minutes a day – to organize your desk, clean up your computer desktop, reorganize files and folders
On top of basic housekeeping ask yourself this: Can I improve myself
Are you keeping up on current topics in design and development
Are you trying new resources
@tommnorman
@tnpwdesign
TNPWDesign.com
WebDevPod.com
The post Eps 29: Back to Basics – Talking HTML appeared first on Schaffen Creative.
...more
20min
January 30, 2017 The Update Episode – Talking HTML
This episode is being used as an update to what is to come in the near future.SASS, Bootstrap and JavaScript for starters.
Also a giant thank you to everyone who has downloaded, listened or rated this podcast. I have read the comments and I appreciate the nice words. Come back again for more episodes coming soon.
@tommnorman
@tnpwdesign
TNPWDesign.com
WebDevPod.com
The post The Update Episode – Talking HTML appeared first on Schaffen Creative.
...more
5min
March 03, 2016 CSS Float – Talking HTML
A float allows an element to be moved/placed on the webpage
Float event:
elements are removed from the flow of the website. Will cause issues with non floated elements.
Use:
Float: left, right, none
Clear: left, right, both
ORDER MATTERS!!!
Items in the first position will be placed first.
Go to itunes, stitcher, or wherever you get your podcasts and leave the show a rating and a comment. Ratings get listeners! If you don’t leave a rating/comment then please tell a friend.
@tommnorman
@TNPWDesign
Link to the Youtube video: https://youtu.be/vD3hA5xh7lA
webdevpod.com
CODE
body {
   Width: 980px;
}
#box1 {
   height: 400px;
   width: 300px;
   margin: 10px;
   background: #000;
}
#box2 {
   height: 300px;
   width: 300px;
   margin: 10px;
   background: #F00;
}
#box3 {
   height: 200px;
   width: 300px;
   margin: 10px;
   background: #0F0;
}
footer {
   height: 200px;
   width: 300px;
   margin: 10px;
   background: #00F;
}

The post CSS Float – Talking HTML appeared first on Schaffen Creative.
...more
14min
February 24, 2016 Material Design: Expanding Circle – Talking HTML
A very basic tutorial on how to build a Material Design expanding circle as seen on Google products.
Smashing Magazine Transition article
Material Design Instructions
https://design.google.com/
HTML

–>

+

t

f

g+

CSS
.circle
{
width:60px;
height:60px;
box-shadow: 3px 3px 6px #333333;
border-radius:50%;
position: fixed;
bottom: 10px;
right: 10px;
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-ms-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.circle p {
margin: 0;
padding: 0;
font-size: 40px;
font-weight: bold;
}
.circle1
{
background-color:#db4531;
z-index: 4;
}
.circle2
{
background: #00aced;
z-index: 3;

background-size:cover;
}
.circle3
{
background: #3b5998;
z-index: 2;

background-size:cover;
}
.circle4
{
background: #dd4b39;
z-index: 1;

background-size:cover;
}
.container_circle:hover .circle2
{
bottom:75px;
}
.container_circle:hover .circle3
{
bottom:140px;
}
.container_circle:hover .circle4
{
bottom:205px;
}

The post Material Design: Expanding Circle – Talking HTML appeared first on Schaffen Creative.
...more
19min
February 17, 2016PHP Includes – Talking HTML
PHP includes are a vital aspect of websites and should be incorporated into every Web Developer’s workflow.
Code via Chris Coyier and the CSS Tricks website
Main reason for using a PHP include:
All code for a specific function is under 1 roof.
If you need to make a change you change it in 1 spot instead of going to each and every individual page
When using and creating includes the files need to have the php extension on the file.
Index.html turns into index.php
Popular includes to create:
Footer.php
Header.php
Navigation.php
Other examples:
Meta data/ stylesheets/ head information
Social media
Separate website tracking code if you don’t/can’t include it in the footer.
General include statement:
PHP include statement from root.

$path = $_SERVER[‘DOCUMENT_ROOT’];
$path .= “/common/header.php”;
include_once($path);
?>
DISCLAIMER: when using PHP includes you HAVE TO ensure ALL OF YOUR LINKS are sourced from the root.
All internal navigation
Direct links from 1 page to another that is not in the navigation
Image file locations
Generally speaking this is something to get into the habit of doing anyway, that way if you move something you don’t have to remember to fix the link. Also I do believe that this is a general web standard.
webdevpod.com
@tommnorman
@TNPWDesign
The post PHP Includes – Talking HTML appeared first on Schaffen Creative.
...more
16min

FAQs about podcast Archives ⋆ Schaffen Creative:

How many episodes does podcast Archives ⋆ Schaffen Creative have?

The podcast currently has 45 episodes available.