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 9:45am on 10/28/2017, I attended the 1-day Opening Keynote session: Bring In The Cavalry: Design in Open Source, presented by Una Kravets of the Bustle Digital Group, at the All Things Open Coference at the Raleigh Convention Center in Raleigh, NC
Opening Keynote: Bring In The Cavalry: Design in Open Source
How important is design in open source
How important is design in open source? Its a good question since many people seem focused on the creation and updating of the service. The users in many cases are not involved with simple concerns such as “Does it work”, they often wonder if it works as well as it can, whether it is intuitive, or whether it can be done simply and effectivley.
So how do general populations feel?
- 69% design is key
- 27% a little could be nice
- 4% meh. Just has to work.
How many people at this opening keynote of 2,000 people were paid to design the look and feel of end-user materials? Only 2 people in the room were paid to design the look and feel. There were no full time independent designers.
This is a 2-part problem.
- Many people have an outdated problem with what design and development is.
- People are unaware of how to meld and create a time when open source develpers can be designers.
Design is mathematical and measureable. Design systems drive growth, it is not a silver bullet solution.
Gain Inspiration (specifically the ideas of empathising with users, understand their uses and methods, observe their current uses as well as what they are looking for, consider things from their Point Of View), define the problem(s), ideate on workable solutions, prototype and create working versions (paper form, drawings, wireframes,models), and then test these, knowing it may require adjustments and changes in an Agile methodology.
Every employee in an example she showed had a 3 month training in the product lifecycle system— specifically how to inject design into every step of the process to improve the product or item.
What Does This Mean For Us?
In the opensource community, we work mainly on the last 2 steps—prototyping and testing. But, when you do not take or promote time for the first three steps, you limit the creative scope of what can be done and improved up.
Design systems are a clear and consistent way to make an item more performance-based, more streamlined, cheaper, easier to understand and connect with. reduce problems, errors, and miscommunications.
Design Defends the user
Designers see how we can be inclusive and give them the best uses possible. FIrst, ensuring accessibility. Begin with accessibility, documentation, ease of use. how easy is it to get started? How easy to build upon once started? How easy is the documentation to get started anyway?
Design Is What Drives Adoption
design drives adoption and increases use. The iPhone is a more popular interface for users. While it is more expensive, less effective, etc. However, the experience is almost always a more smooth and easier approach. Because more people feel that the iPhone is a more user-friendly experience, it is an industry standard even though the Android items are cheaper, have more usability available, and are available for user adjustments.
Sass is another easy way to process. It is the most popular because it conforms to people’s needs. You can write an existing css file with SASS mixed in so that you didn’t have to rewrite. Design is not visual, its how your product works. Its experience.
Design is delightlful
It helps us, Learn more about it at:
We Need Design
It is use, workflow, from every angle it is about the user. Its psychological, mathematical, silly and fun. We need more designers. If you’re one, we need you.
We need to bring in the cavalry.
while you may think its you, its not just you’ ideate, bring in the process. be open, welcoming, and understand their experience is different than yours. Designing opensource is a chicken egg problem. It the design not here because the developers run the show, or do the developers run the show because not enough design was brought to bear.
We can bring in more, teach each other and make a more diverse community available.