html

Introduction to Git and GitGUB

Posted on Updated on

On 3/6/19 at 10:30am, I attended the North Carolina Computer Instructor Association Conference Session Introduction to Git and GitHUB at East Carolina University’s SCITech Building in Greenville, NC. This was presented by Michael Schore of Wake Technical Community College.

 

Introduction to Git and GitGUB

  • Without VCS (a version control system), there are problems when you overwrite a file.
  • Why is it good, why use it and what is it?
  • Who should use it?

 

What is a version control system

  • It Tracks changes to files, especially text files
  • Source code for every piece of software or code library is written or has been written in some form of text
  • VCS is also called source code management (SCM)

A version control system is really just a way to take care of added text and then to catalog and understand what text was added, when, and by whom.

History of GIT

Version Control Systems really got their start as coding back in 1972 – SCCS (AT&T). Any participants in the class working then? A few. At the time, attendants were using fortran or punch cards.

1982 RCS much higher performance.

1986 –cvs concurrent use was an issue though

2000 – apache tracked as a subdirectory

2005 – linus torval. Replaced proprietary bitkeeper SCM

 

 

What is a version control system (VCS) Good For?

Think about the tracking required for software or web environment. How many files might be in a basic bootstrap environment? 10? 30?

Initializer.com will assist you in making a basic website with GRID, BOOTSTRAP, etc. Choose one, and it will spit out the basics needed to begin that type of website. Easy, but if you don’t know how to code this, not helpful. Many students may feel initially that using a system like this is smart, helpful, and saves them time, but unfortunately if they do not understand the coding it takes to see, use, change, and adjust this material, they don’t really know how to upkeep the websites they’ve started. In the end, they feel disheartened, upset, and as if they’ve wasted valuable time. Many will choose to have failed rather than put in the time end effort to learn what they have missed.

Without version control in the classroom, students do not always have the steps that many employers would like to have from new employees. Students with an understanding of version control software can quickly and easily move into a software or coding environment, while those without the experience may find themselves having to learn on the job.

Students have excuses, but an online version control system bypasses many of these. If the dog ate their flash drive, the computer fell from the table, etc., anecdotal evidence notwithstanding, having versions of materials available online allow them to go anywhere. They can go to the school lab and work on their materials. They can go directly to the classroom and begin working on it without pause.

 

 

Are Our Students Prepared? Are We Preparing Them?

Modern workflow options require us to ask: Are we really preparing students for jobs in the workplace? If we are teaching students to work on local machines, is this really the industry standard anymore? This opens us up to problems like those noted above. Transportation issues, mechanical and electronic failure, home wi-fi or general connection issues, windows and software updates, etc., can all be blamed without a cloud-based server or version control system. If the students cannot produce the class files at class time, its a real problem

Using GIT and GITHUB is something which can be used to assist students in job availability and preparedness. Employers in coding or web design & development can learn a great deal from a GitHUB. They can see how many updates the students have made, how many active files students are using, how many adjustments they’ve made to existing pieces and how timely the responses are to requests. It allows them to see the technical writing and explanations shown, and many other pieces of material. Imagine the increase in employability this could bring to the table.

Its not all a bed of roses though. An issue with this can be some learned helplessness on the part of our younger, or online students. We need to generate students who break out of their shells and learn to solve problems for themselves. If students don’t feel they have been given a number-by-number, step-by-step approach, many will check out and simply say that they cannot fulfill the project. We need to teach them to rely on themselves and prepare themselves to solve real-world solutions.

Watch this learned helplessness video at: youtube https://www.youtube.com/watch?v=TU7RBqTndJ8

 

What is GIT

Starting in the fall this will be taught in the classrooms at Wake Technical Community College. Git is distributed version control available via the internet or any online connection.

  • No communication requirement with a central server
    • Faster
    • No single point of failure
  • Encourages programmer involvement and “forking” of projects
    • Developers can work independently
    • Can submit change sets for inclusion or rejection

This allows us (both workers such as students and observers such as faculty, bosses, and the general public) to see who checked out individual files, how many lines of code were removed, as well as how many lines of code were added into the environment. It adds accountability into the online group project environment, because there is no way to mask the amount of work done, and code from one update can be checked against code from earlier updates (avoiding duplication and/or copying) as well as against later versions (avoiding duplication and reprinting materials, or having useless code removed later by others..

Who Should Use Git?

  • Anyone needing to track edits in text files
  • Anyone working with appropriate files in a collaborative setting
  • Anyone not afraid to use command-line tools
  • Types of files being worked on
    • Web files (html, css, JS…)
    • Web Programming (PHP, Python, Ruby,Perl, ASP…)
    • Programming (JAVA, C, C++, C#, Objective C…)
    • Offshoots of web languages (like coffeeScript, ActionScript…)
  • Can track other types of files, but not as useful- think images, sound files, etc.

Installing GIT

Nothing difficult about installation. It runs anywhere.

Bash, Apple and unix flavors come with Bash. Windows version installation is an option (GitBash). Having the right-click option to open GitBash from any windows explorer location is a great thing.

Configuring GIT

Systems have all been going to GUI over the years.  Students are afraid of command line. This really allows us to go back to basics and add in another level of professionalism and base-level working knowledge into our classes earlier. Configuring Git is as easy as using the .gitconfig file in the configuration folder.

  • Local Git config file… request slides

Editing GIT

Visual studio code can be used as the visual editor for github. You can also use color output of git.

Repositories

What is a repository? How do you create one? A repository is a place to save and store files. In a VCS, you’re trying to have a backup in case something stupid happens. If you have set up GITHUB and a repository, you can give it some information and choose a day and time to commit to those changes.

How safe is my data? How easily is it destroyed?

At its most basic, its just a file location, created on your development system.

Local repository can be set up, where your development is taking place so you can monitor and record its history.

Remote repository can also be set up, a place where your files can be saved as above, but offsite.

 

Creating A Repository

There is no free lunch. Once git is installed on your computer, its pretty simple to do. Looking at a typical website:

  • Using Git, initialize the project
  • Looking at the directory, we now see a .git file added and a (master) line added.

  

 

At this point in the lecture, we did some hands-on work with GIT to use the materials firsthand. It was a little technical, so I have included the slides as I was not able to type during this time.


  

Best Practices

  • Commit chmessage in example was very simple
  • Commit messages should be a descriptive message about the changes
    • Start with simple single line – 40 to  50 characters
    • Add more lines as needed but less than 70 characters
    • Keep messages in the present tense, not past tense
    • Bullet points using asterisks
    • Add bug number and tracking numbers in the material to be ready for business standards

 

 

Understanding GIT Architecture

Repository >> working >> git add file.html ?? staging >> git commit file.html >> repository

Again, this example was pretty hands-on, so I didn’t have much time for notes and notation.

 

 

GITHUB Training

Find some introductory GIT training and walk though it a few times. Teacher training  to master GIT and Git GUB training via https://education.github.com

Push the workflow ideas on the students. A student who understands GIT can easily understand and pickup the other repository functions. Whatever system suits the company Is the one they’ll use. Think it might be a passing phase? Microsoft bought GITHUB for 7.5 Billion last year.

Where will this go? We’ve recently added in educational contracts with GITHUB and Wake Tech. This allows us a bit of flexibility but can be difficult as it requires schools to work alongside an entity like Microsoft which is itself incredibly large.

 

GITHUB Campus Advisor program

  • As a Github Campus Advisor, you’re not only a master, but a champion of real-world tools at the School.
    • Unlock benefits provided by Github, including a free Github package to meet the needs of your school?
    • Event support, workshop kits and fresh swag delivery every semester
    • Early access to new education features and materials from GitHub education
    • Special invitations to github education events
    • Github camps advisors-only gear and special swag

  

Getting Up To Speed With GULP.js

Posted on Updated on

At 10:30am on 3/6/2019, I attended Getting Up To Speed With GULP.js presented by Michael Schore, at the 2019 North Carolina Computer Instruction Association Conference in the SciTech Building At East Carolina University in Greenville, NC.

Getting Up To Speed With GULP.js

What its used for

Installation process and requirements

Basic usage

What its used for

GULP is a task runner, and its used to automate the processes you have. There are all kinds of helpers out there that help us streamline. Mainly NODE and NODE JS and NPM, Node Package Manager.

Bootstrap connection

Bootstrap is the material components that begin when a computer opens. Babel, browserfly, grunt, bauer, yeoman, all helpful. Most of these sprouted up as open source products, and still are. Starting in the web, everything was proprietary, but now many things are open.

PURPOSE OF GULP

It is often used to do front end tasks such as spinning up a web server, reloading the browser automatically whenever a file is saved. Using preprocessors like SASS or LESS (style systems to overcome CSS problems or inabilities), but also allow you to use global variables. Also it allows for optimizing assets like CSS, JS, and Images.

Installation process and requirements

Node.js requires node, npx, npm. Sass requires Ruby.

GIT from git-scm.com. Get Node.js from nodejs.org. Ruby from Rubyinstaller.org

Installation

Installers are pretty straightforward. With NPM installed, we can simply execute a global installation command. Command line can be overwhelming and difficult to understand for GUI-minded individuals. Powershell and CMD or BASH are great to work with.

Installing and verifying GULP

Install GULP into your dev dependencies. Check the versions of the install, and now we’re ready to start GULPing!

Basic usage

To create our first file, it should be in the root directory of your project.

Which yields…

Basic Useful Plugins

Found on the github website: http://github.com.gulpjs

Gulp-util https://github.com/gulpjs/gulptili

Running out of the box

Bash will note that an error occurs out of the box. We didn’t give it anything to do, and we didn’t make it local

Be cautious of the node_modules directory. This will grow as time goes on.

WALKTHROUGH

Lets add the gulp-less module. This adds the ability to conver LESS to CSS. Less is a backwards-compatible language extension for CSS. This is the official documentation file for LESS. This will be another hands-on bit, so I may only show slides here…

BASICS

Used to actually automate your tasks. Simple ones like the example just run a goup of tasks when called

Var gulp = require(‘gulp’)

Var uglify = require(‘gulp-uglify’)

 

Gulp.task(‘uglify’,   … Hands-on…

Going to devhint.io you can get to a treasure trove of examples using GULP. Items like EMCAscript6 (newest version of javascript at this time) can be found, used and massaged, it can be found. IF your legal department requires you to update the header for the document automatically every time you work with the file, GULP and set that up.

The biggest thing GULP is used for is to watch yourself and run functions when changes are made. It automatically generates javascript or copyscript or typescript files when files are adjusted if needed. It can compile different script files into backward compatible javascript files. Think of the time this would save!

When we as humans find a mind-numbing, repetitive task to do, we find a machine to do it. If there isn’t one, we (historically at least) find a peon, subject, or slave to do the task.

Gulp.js files are used to cover several items- Pipe is a movement command, and its heavily used in an example we cover during class time. This is a different way of setting up tasks and subroutines (or functions) to cover different tasks.

When running the script on your computer, the WATCH function comes into play. When anything happens which affects the files/functions being WATCHED, it updates the materials in the folder. Because items are updated and fixed when changes are made to WATCHED files, this is a major upgrade to workflow on items.

 

What are some good files to WATCH?

Well, if you’re working with HTML, CSS files, HTML files, IMG files, JS files, etc. As new files are added to a folder, they can be added to the server, PHP plugins are also good. At the corporate level, teams get together  to talk about code and workflow to find out how much they can write, use, and test. This is especially good for items with our students, and to add productivity for workers making high 5 or 6 figure salaries.

Is everything safe?

Dig into it. On the surface it may sound good, but read what people are saying, and you might find that its not what its cracked up to be. It depends on the workflow, variables, and items you’re using. Be vigilant and don’t just take part because everyone else is.

How is SAS acting with all the opensource products?

Who owns github? Microsoft. Corporations use enterprise solutions with them, having their entire software library in their storage. The entire .NET framework is now available as open source code. They are hoping to gain a better product and enhanced usability with the open products. SAS is in a weird position as they are very proprietary in nature. IBM in true IBM fashion, will give things, but try to take things with their other hand.

There is more movement to OS involvement. You cannot add so many proprietary things. Its good to have other eyes looking at your work with and eye to improvement. Our students need to know what is happening in the working world, but they must also take that on themselves.

If we push students all the time, they don’t learn to push themselves. Michael teaches them that this is not the end of the line, this is the beginning of the line. We are giving our students tools that they can use. This is not the end all be all. The tools may be inadequate later, but the skills will take you far. We focus on solving problems, not following steps 1,2,3.

 

Microsoft Technology Associate (MTA) status in Introduction to Programming Using HTML and CSS Achieved!

Posted on Updated on

At 10:45am On 3/22/18 I attended the Certiport certification lab presented by Certiport at the 2018 NCCIA Conference located at Asheville-Buncomb Technical Community College in Asheville, NC.

MTA-Introduction-to-Programming-using-HTML-and-CSS-2018Tyler Dockery Achieves MTA status in Introduction to Programming Using HTML and CSS

MTA status in Introduction to Programming Using HTML and CSS Achieved!

I chose to attempt this exam because I felt I could validate the skills and knowledge to recognize and write syntactically correct HTML and CSS, structure data using HTML elements, and create and apply styles using CSS. Since I was trained on HTML in 1996 and certified with CSS in 2001, and had been working with HTML and CSS with clients for 18 years at this point, I’m familiar with their features and capabilities, and understand how to write, debug, and maintain well-formed HTML and CSS code.

The Official Breakdown of Subject Matter

Microsoft’s official exam page for this test: MTA EXAM 98-338 outlines the following fundamentals will possibly be covered:

 

Understand HTML Fundamentals (10-15%)
  • Construct markup that uses metadata elements
    • Script; noscript; style; link; meta tags, including encoding, keywords, viewport, and translate
  • Construct well-formed markup that conforms to industry best practices
    • DOCTYPE declaration; HTML; head; body; proper syntax, including closing tags and commonly used symbols; comments
Understand CSS Fundamentals (15-20%)
  • Analyze the impact of using inline styles, internal style sheets, and external style sheets
    • When to use inline styles; when to use internal style sheets; when to use external style sheets; precedence when using a combination of inline styles and style sheets
  • Construct and analyze rule sets
    • Valid syntax for the CSS rule set; selectors, including class, id, elements and pseudo-class
  • Construct well-formed style sheets that conform to industry best practices
    • Reusing rules and rule sets; commenting; testing on multiple browsers; web safe fonts
Structure Documents Using HTML (30-35%)
  • Construct and analyze markup to structure content and organize data
    • Table tags; h1-h6; p; br; hr; div; span; ul; ol; li
  • Construct and analyze markup that uses HTML5 semantic elements
    • Semantic tags; header; nav; section; article; aside; footer; details; summary; figure; caption
  • Construct and analyze markup that implements navigation
    • Image links; a; target; bookmark; relative versus absolute links; navigating simple folder hierarchies
  • Construct and analyze markup that uses form elements
    • Form attributes; action; method; submission methods; accessibility; input types and restrictions; select; textarea; button; output; option; datalist; fieldset
 Present Multimedia Using HTML (10-15%)
  • Construct and analyze markup that displays images
    • img and picture elements and their attributes
  • Describe the appropriate use of the img, svg, and canvas elements
  • Construct and analyze markup that plays video and audio
    • Video; audio; track; source; simple iframe implementations
Style Web Pages Using CSS (20-25%)
  • Construct and analyze styles that position content
    • Positioning, including float, relative, absolute, max-width, overflow, height, width, and align; inline versus block; visibility; box model, including margins and padding
  • Construct and analyze styles that format text
    • Font-family; color; font-style; font-size; font-weight; link colors; text formatting, including text alignment, text decoration, and indentation
  • Construct and analyze styles that format backgrounds and borders
    • Border-color; border-style; border-width; backgrounds; divs; colors
  • Analyze styles that implement a simple responsive layout
    • Units of measure; responsive effects with CSS, including viewport and media query; percentages versus pixels; frameworks and templates; max width

Conclusion

All in all, this test was well worth the time and effort. The materials covered had a good amount of in-depth knowledge requirement, and I was able to break through with a score in the mid 900s. It was a good challenge, and I felt it will be helpful to me to show students that the MTA exams are a fine choice to showcase their abilities.

Alison.com — Diploma in Web Design Achieved!

Posted on Updated on

On October 27th, 2014 I completed the Diploma in Web Design provided by Alison.com

Alison_CoursewareIntro_256

Alison.com — Diploma in Web Design Achieved!

This coursework was completed over several weeks. This course goes beyond knowing how to create a HTML page and add content, title, entities, anchor tags, encompassing inserting images, present tags, links, tables, lists and uploading web pages. Coursework included a strong understanding and demonstration of the meaning of inheritance, cascade, pseudoclasses, pseudoelements and selectors … the concepts that are commonly used in web pages.

This required the demonstrated familiarity with using font, background styles and style sheets. This course help you to use Dreamweaver to create a website with HTML, CSS, JavaScript, and Flash. It requires the understanding of naming conventions, index files, welcome screens, landing pages, GUI and many more settings that are extremely useful when creating a website successfully. This course also required an understanding of advanced features such as CSS structures, embedded style sheets and much more. Final requirements demand a knowledge of how a web page works as well as a deep knowledge of hosting, domain names and nameservers.

This coursework was originally based on Russell Stannard’s teaching and research experience – and the feedback of his many thousands of students.

GDA Lecture: Responsive Web Design, a Hands-on Approach

Posted on Updated on

On Wednesday, February 13th, Tyler Dockery gave an hour-long discussion and hands-on training on responsive web design to the FDA.
Learn about responsive web design with Tyler Dockery

GDA Lecture: Responsive Web Design, a Hands-on Approach

The talk outlined the basics of responsive design, how it differed from adaptive design, and was concluded with a hands-on demonstration in which students could create their own responsive page from a template [ code provided below ].

The Mac Lab was filled and several students remained without computers to discuss the materials and observe the lecture. Q&A after the session covered numerous topics, such as how to use media calls in CSS to reconfigure your responsive pages, and how to organize your content for mobile devices.

He provided two files for the discussion:

First, a word document outlining the basics of responsive design, and giving some great links to websites which students can use to learn more of responsive design basics. The DocX can be downloaded below:

Responsive Discussion Document

Second, a Dreamweaver file with a basic website already coded. Additional CSS has been added BELOW the HTML which will make the page adapt if the screen size becomes 600px or smaller. Cut the commented CSS and add it within the bottom of the <style> tag.

 As this version of wordpress will NOT allow .html files to be uploaded, AND .zip files with .html files insider are also banned, the entire source code will be posted below for those interested.


<html><head><title>Responsive</title>
<style>
body {
background-color:grey;
width: 1024px;
}
.container {
width: 93.75%; /* 960 / 1024 = 93.75% */
height:auto;
margin: 0px auto;
background-color: white;
}
.head {
width: 100%; /* 100% */
height:80px;
background-color: lightgray;
}
.nav {
width: 31.25%; /* 300 / 960 = 31.25% */
height: auto;
float: left;
}
.nav a {
display:block;
}
.content {
width: 66.66666667%; /* 640 / 960 = 66.6666666666667% */
margin-left: 10px;
margin-right:10px;
background-color: lightblue;
height:auto%;
float:right;
}
.footer {
width: 100%; /* 100% */
background-color: pink;
height:80px;
clear: both;
}/* Media Screens Below */</style>
</head><body>
<div class=”container”>
<div class=”head”></div>
<div class=”nav”>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
<a href=”#”>Link</a>
</div>
<div class=”content”>Whole biggity-bunch of content</div>
<div class=”footer”></div>
</div><!–@media (max-width:600px) {
.nav, .content {
float: none;
width: 100%;
Height: auto;
clear:both;
margin: none;
}
.nav a {
float: left;
margin-right: 10px;
display: inline;
}}
–>
</body></html>

If you’re interested in learning more about Responsive Web Design, please feel free to come and visit with me in my office, 321C in the ETB building. If you enjoyed this or any presentations, please let us know and let us know what you’d like us to present on in the future!

CSS3 Certification Acheived!

Posted on Updated on

CSS3 certification is one of three certifications I a working on at this time… and it will be the last time I do this again- its just too much work to study for so many and still pass! I have been using CSS in my web design since the year 2000, and I must say that I see some great potential for typography on the web with this newer version. Shadows, rounded corners, I think this stuff is gonna be great! So now, when will IE step up to the plate and allow it to REALLY WORK?? Testing 3 examinations in one day… whew! BrainBench, what was I thinking?

css3

HTML5 Certification Achieved!

Posted on Updated on

I learned HTML initially in East Carolina University (ECU) and University of North Carolina at Greensboro (UNCG), emerging in 1994 with a minor smattering of understanding. In 2000, I took classes at the University of Georgia (UGA) to get HTML and CSS firmly under my belt. HTML5 is a new and emerging standard for web designer. Since I teach a little of this, my HTML5 learning has all been self-taught. Getting this certification is a reflection of study and understanding of the newest upgrade to HTML. So, I determined to get my certifications with BrainBench

html5