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
- 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.
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.
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
Visual studio code can be used as the visual editor for github. You can also use color output of git.
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.
- 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.
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
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
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 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
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!
To create our first file, it should be in the root directory of your project.
Basic Useful Plugins
Found on the github website: http://github.com.gulpjs
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.
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…
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…
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.
At 1:45pm on 3/21/2018, I attended A New Direction For Teaching Web Technologies, presented by Michael Schore, at the 2018 North Carolina Computer Instruction Association Conference in At Asheville-Buncomb Technical Community College in Asheville, NC.
Time to Leave Dreamweaver Behind
Sometimes working into what the modern developers wish to use is a bit like dropping down the rabbit hole. Every twist and turn brings a new style and way of approaching web technologies. Its cool, but a whole different mindset is required.
Code generates money. The less time which is required to generate the code translates directly into more money.
purpose of the Presentation
Why are we looking for a new direction? Our advisory committee has been telling us we need to change our tools as taught in our program at WTCC. We, the teaching community needs to model our teaching and methods to mimic and prepare students for the real world.
They have a concern: Security issues. It has been our experience than many students entering our WEB program don’t have much experience installing software and they are leery of doing so. PHP installation can still be daunting for many students since manual installation is still the preferred method. They are unaware, and need very closely to have hands held
CSS And It’s Issues
CSS can be difficult to work with, but it also has some programming abilities. While CSS is really like the skin and muscles’ the HTML’s skeleton, it is often difficult for programmers to grasp and play with. Why? CSS has no variables.
A Look At Git
Git is an easy version control system students can use to their projects. Rather than seeing a project accidentally go bust, GIT is a version control system to allow them to restore an older version. Git is available at: https://git-scm.com/
Git is currently available for any user in windows, MacOSX, or Linux.
The installer for Git comes with Git Bash, a command line environment. we like graphic interfaces because its all drag and drop. We don’t have to type. We don’t need menus. We’ll need to remember the syntax, order, etc. So this may be a hurdle.
GIT should be introduced to students early on. Because it focuses on version control, it would avoid issues with overwrites, different versions, etc. Its Open Source, and widely used VCS. You can save periodically (at your discretion). Git is populat because it meets so many people’s needs. However, Git helps with project file management whether in team of individual environments. We then went through several common Git commands and how they’re used.
It is run on a local computer, and should not be confused with GitHub.
At this time GitHub has over 80 Million repositories worldwide. Imagine how many lines of code that must be! There are currently 27 Million developers worldwide. GitHub’s users create and maintain influential technologies alongside the world’s largest open source community. Developers use GitHub for personal projects, from experimenting with new programming languages to hosting their life’s work. There are also 1.8 Million businesses and organizations worldwide using GitHub. Businesses of all sizes use GitHub to support their development process and to securely build software.
A Look At Node.js
A Look at Gulp
Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something. It can be visited at: https://gulpjs.com/. By preferring code over configuration, node best practices, and a minimal API surface – gulp makes things simple to use. Using the power of node streams, gulp gives student the ability for fast builds that don’t write intermediary files to disk. By enforcing strict guidelines, plugins stay simple and work as expected.
Have you introduced your students into SoloLearn? It jumps your students directly into coding.It can be visited at:https://www.sololearn.com/ While there are free versions, you can get examples for C++, JAVA, and Python3. It encourages everyone to be the top dog in their group. Could be great for CSC students.
At 12:30am on 4/13/2017, I attended the GRD/WEB, presented by Alison Consol, at the 2017 Spring Faculty Professional Development conference in Raleigh, NC.
GRD & WEB Department Meeting
Attended by Gregg Wallace, Michael Schore, George Tsai, Alison Consol, Carla Osborne, Julie Evans, Marsha Mills, and Tyler Dockery.
skillscommons.org ( http://www.skillscommons.org will open in a new window )
THere may be some great material in here or older projects to zoom through. Some of these may be canvas packs, but there could also be BB materials.
Course >> Tools >> NCLOR object
These are some great resources, but they may be old.
Some of these sources can help us so that we don’t have to reinvent the wheel.
Google academy, hubspot, codeschool, are great places we can also grab materials from. If this introduces something we don’t have time to working with, or something which may inspire a different kind of learner. If you see anything out there which has some relevance, grab it and see what you can bring to the table.
If you find little snippets created that cannot be covered in the class, but the materials already exist, run those as small, one-shot deals
Brackets in the lab
Brackets will be put in the lab. Brackets runs for free. Sublime is roughly $50 per license. We cannot use a cost program when we could also have a free resource. Our hope is to have a cradle-to-grave system of consistent program usage in WEB technologies.
GRD142 seems to miss its pace and GRD241 finds many students falling flat.
GRD110 seems to have lots of issues with retention.
WEB140 seem to run into the perrenial problem with retention. Design students seem to split- both top and bottom tier students are graphic design students
Summer faculty will need to have a single day of the week. Any issues needed by Alison can be fixed by Cindy if needed
Julie’s secret sauce may stop working. Datatel may be able to be updated in a few extra months. Datatel does not like edge
On March 9th 2016, I attended NCCIA presentation at 9am with Michael Schore, Assitant Professor of Web Technologies at Wake Technical Community College, in RM235 in the 600 building at Rowan Cabarrus Community College in Salisbury, NC.
Adventures in Angular JS
- State of the web
- State of JS
- Demand-driven offerings
- The angular JS story
- Changes on the horizon
After a brief overview, Michael Schore gave us a brief rundown of Wake Tech’s journey toward offering Angular JS.
At Wake Tech, we taught JQuery. It was successful, but we are always on the lookout to ensure our programs are up to speed if not at the cutting edge. Through school-driven benchmarking activities, we set out to determine: Are we were offering the proper programs?
He began by meeting with local headhunters in the Raleigh area. They are a great resource to use because those placement agencies see what the current needs and trends are in the workplace. Our college also participates in an advisory committee for each department to keep constant tabs on, but those businesses are small companies. The headhunters have tentacles everywhere, a great resource for the hiring world. After discussing with them the current needs in the workplace coupled with what we could create and provide, the need for Angular JS made it a clear choice.
NOTE: On The Horizon: Coming soon, we will see the birth and adoption of Angular JS 2.0. Just as with any 2.0 technology, the tech is adopted for major changes to take place. Google owns it: sponsoring, developing, etc. Angular 2.0 will be major force for changes in the future.
State of the Web
state of the web: adobe marketing cloud: woo woo
As this video demonstrates, there is a very fluid environment on the web. Its like watching a flock of birds and trying to prepare for the ebb and flow. The current state of the web is being heavily driven by mobile and personal devices. Wifi is everywhere, and don’t need a massive connection to access the internet. Many devices need only receive a carrier signal to access the internet.
IF you had told me 10 years ago that JS would become a sought-after skill, I would have laughed in your face. MYSQL is usually relegated to the one-man, one-woman shop that picks up odd jobs and small clients.
Angular JS in the classroom began with Advisory Committee Requests. Through Benchmarking, Michale looked at how the local market needs were. He expanded by interviewing 3 prominent tech staffing firms. After providing them with an overview of our current programs, he sat down at length to discuss their current staffing needs. They then agreed to take it to the next level by discussing their vision of future needs.
Regardless of the base technology, angular JS was part of the mix. ASP.NET has made it almost mandarory to use ANGULAR JS. Java and Angular JS have a lot in common, but Angular JS alone is on the rise.
By changing Wake Tech’s advanced scripting course to Angular JS, we’ve begun filling our classes to the brim. This has brought with it the arrival of numerous new students.
Libraries slot themselves into your existing architecture. frameworks give you an architecture (file structure, etc.) that you are meant to follow, and if you are intended to handle all common requirements you must use it.
Angular JS is arguably somewhere in betweeen library and framework. It doesn’t require a particular layout of files at development time (library-like), but at runtime it provides an “app lifecycle” that you fit your code in (framework-like).
Common JS frameworks include:
Where Is It Used?
If you know what you’re looking for, you can see the use of Angular JS in the code of several different websites. Of course, its JS-based, and you can see the markings in the code. If you’re building proprietary code, you wouldn’t want it to show, but that’s another issue. Visit madewithangular.com you can see items. OLDNAVY.com MSNBC.com and Cars.com are some good examples.
They all show lots of graphics, clean design, lots of white – know why? Because they’re ready for mobile phones! The common practice in business today – big business – is to develop for mobile devices first, and then the rest will be easy. Get past mobile issues and you can easily adjust your website for full size desktop models.
Where Is Angular JS Going?
Current payscale for users of Angular JS is very positive. That really helps. many times, students and web practicioners look at a new way of coding and find themselves saying: Is it really worth it? At this time it is, and down the line it looks like it will only get better.
Created in 2009 by Hevery and Abrons, Angular JS is an open source, client-side JS framework. While 2009 may not seem that far way, in internet time that was a long time ago. It was created as a declarative means to program, making it better for business logic. Hevery reworked the project in TROUBLE using Angular JS when hired by Google. As of now, Angular JS is in use at Google in over 100 projects.
Angular JS is based on a Model-View-Controller (MVC) pattern. In demand by employers across the board, MVC continues to be the popular approach within the software development industry.
Actual implementation of MVC will vary depending on: language, platform, purpose. The benefits of this system is the clear separation between application layers, modular use of features, flexibility and testability of the pieces involved.
Also called “template”. Written entirely in HTML (surprise surprise!). Think web designers and JS programmers working side by side. Uses a directives mechanism.
Contains the business logic for the page. For very large apps some logic moved to services scope very important idea the aconnectys the view nad the controller login. Allows for exchanges
Starting Angular JS is very simple, requiring only the reference to the Angular JS file. Import is allowed over the network, it can be stored locally, or bring the code to your app (this is the standard mechanism for frameworks).
CODING Angular JS
Rather than get into the nuances, just follow: attach nagular directives to a given behavior. NG-app: responsible for bootstrapping your app defining its scope. NG-controller: defined which contrller will be in chage of your view. NG-references clue you in to the inclusion of Angular JS.
Where Is It Going?
Angular 2.0 probably coming by summer.
The new angular will be focused on the develoment of maople apps. in 2009 it was not a big players. it is easy to handle desktop, the challenge in mobile
Various modules will be removed so you can pick and choose, resulting in better performance.
angular 2.0 will target ES6 and “evergreen” modern (etmascript – javascrip on steroids). Building for these browsers means that various hacks and workaround that make angular herder to develop can be eliminated allowing developer to focus on the code related to their business domain.
Progress is impossible with out change and those who cannot change their minds cannot change anything.
-George bernard shaw.