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 10:00am 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 status in HTML5 Application Development Fundamentals Achieved!
The Official Breakdown of Subject Matter
Microsoft’s official exam page for this test: MTA EXAM 98-375 outlines the following fundamentals will possibly be covered:
- Understand the platform fundamentals
- Packaging and the runtime environment: app package, app container, credentials/permission sets, host process, leverage existing HTML5 skills and content for slate/tablet applications
- Manage the state of an application
- Manage session state, app state, and persist state information; understand states of an application; understand the differences between local and session storage
- Debug and test an HTML5-based, touch-enabled application
- Touch gestures; understand which gestures you test on a device
- Choose and configure HTML5 tags to display text content
- Choose and configure HTML5 tags to display graphics
- When, why, and how to use Canvas; when, why, and how to use scalable vector graphics (SVG)
- Choose and configure HTML5 tags to play media
- Video and audio tags
- Choose and configure HTML5 tags to organize content and forms
- Tables, lists, sections; semantic HTML
- Choose and configure HTML5 tags for input and validation
- Creating user interface elements with Canvas or SVG
- Designing accessibility with HTML5
- Video element | video object
- Understand the core CSS concepts
- Separate presentation from content (create content with HTML and style content with CSS); manage content flow (inline versus block flow); manage positioning of individual elements( float versus absolute positioning); manage content overflow (scrolling, visible, and hidden); basic CSS styling
- Arrange UI content by using CSS
- Use flexible box and grid layouts to establish content alignment, direction, and orientation; proportional scaling and use of “free scale” for elements within a flexible box or grid; order and arrange content; concepts for using flex box for simple layouts and grid for complex layouts; grid content properties for rows and columns; use application templates
- Manage the flow of text content by using CSS
- Regions and using regions to flow text content between multiple sections (content source, content container, dynamic flow, flow-into, flow-from, msRegionUpdate, msRegionOverflow, msGetRegionContent); columns and hyphenation and using these CSS settings to optimize the readability of text; use “positioned floats” to create text flow around a floating object
- Manage the graphical interface by using CSS
- Graphics effects (rounded corners, shadows, transparency, background gradients, typography, and Web Open Font Format); two-dimensional (2-D) and three-dimensional (3-D) transformations (translate, scale, rotate, skew, and 3-D perspective transitions and animations); SVG filter effects; Canvas
- Create and use functions; jQuery and other third-party libraries
- Locate/access elements; listen and respond to events; show and hide elements; update the content of elements; add elements
- Use animation; manipulate the canvas; work with images, shapes, and other graphics
- Send and receive data; transmit complex objects and parsing; load and save files; App Cache; datatypes; forms; cookies; localStorage
- Respond to the touch interface
- Gestures, how to capture and respond to gestures
- Code additional HTML5 APIs
- GeoLocation, Web Workers, WebSocket; File API
- Access device and operating system resources
- In- memory resources, such as contact lists and calendar; hardware capabilities, such as GPS, accelerometer, and camera
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.
On October 27th, 2014 I completed the Diploma in Web Design provided by Alison.com
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 coursework was originally based on Russell Stannard’s teaching and research experience – and the feedback of his many thousands of students.