Learn Grunt, Jq and Tachyons

jq is a lightweight and flexible command-line JSON processor.

jq can help you quickly filter massive amounts of JSON data, but how can you turn it into a CSV, so you can process it quickly with a database or spreadsheet application?

This lesson shows how to select the data you want for your CSV with jq, and uses the helper utility linked below to output as CSV.

https://github.com/joelpurra/jq-hopkok/tree/master/src/tabular

Convert JSON to CSV with jq

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

You can easily add CSS libraries to Nuxt using `yarn` or `npm` to install them, then simply adding them to the `nuxt.config.js` so they're included in each page. Then all the classes will be available for use in all of your templates. This lesson walks your through installing a library then adding it to your `nuxt.config.js`.

Add CSS Libraries to Nuxt

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

Task automation is critical for any AngularJS single-page application. Grunt gets the job done.

Introduction to Grunt for Angular

grunt

GruntJS allows you to use underscore/erb style templates to reduce repetition and create variables. This is commonly used to point at build folders and files within your application's structure.

Template

In this lesson John will show you how to start using Grunt Uglify to compress your javascript for production deployment.

Uglify

jq is a lightweight and flexible command-line JSON processor. It is extremely useful for processing data from APIs to better understand the data your code will be consuming, before you write the code. In this lesson I introduce you to jq and show you the basic features it provides using the Star Wars API (http://swapi.co) as our data source. Topics covered include filtering, piping, object construction and data manipulation.

Using jq to parse the Star Wars API

Grunt Multitask allows you to write complex tasks that run multiple targets. In this lesson, John will show you how to use Multitask in your GruntJS builds.

Multitask

You can use Grunt to combine all of your Javascript files into a single concatenated file.

Concatenating Your Javascript with grunt-contrib-concat

Functional css for humans.

Quickly build and design new UI without writing css.

tachyons

Tachyons provides extensions (-ns, -m, and -l) to many of its classes to help you design for responsive layouts. This lesson walks you through designing for mobile first then adding a design for desktop.

Design for Mobile First with Tachyons

For production we want to use minified javascript to reduce the payload that is sent from the server. This can easily be accomplished with grunt-uglify.

Minifying your output with grunt-uglify

In this lesson John will show you how to get started with grunt-contrib-watch. Watch is an essential component of any Grunt build, and you will find yourself using it in almost every project. 

Grunt Watch

Grunt will clean up your build with the grunt-contrib-clean to make sure that no artifacts from previous builds are hanging around.

Cleaning your build folder with grunt-contrib-clean

With Grunt you can automate core tasks for your AngularJS project. In this lesson we will take a look at converting Stylus files to CSS, and add a watch task to convert those files automatically whenever a change is detected.

Development Automation Tasks with Grunt

Building responsive css layouts is critical in any modern website. Tachyons makes this easy by designing for mobile first then enabling you to switch directions and positions of elements when the site scales up to desktop sizes. This lesson walks you through using Tachyons with flexbox and leveraging the `flex-column` and `flex-row` classes to respond to mobile and desktop sizes.

Build Responsive CSS Layouts with Tachyons

Build and watch ECMAscript 6 using traceur compiler and Grunt.

traceur compiler and Grunt

In this lesson John will show you how to create a simple external config file for your GruntJS build.

External Config

In this lesson you will install GruntJS and get up and running with your first task, initial configuration, and how to get Grunt methods auto-completing in WebStorm.

Introduction to Grunt

Bash, unfortunately, doesn’t ship with a command that can work with JSON natively. In this lesson, we’ll learn how to read and do basic queries on JSON with `jq`, an installable command line tool that makes working with JSON in bash really easy. We'll pipe the JSON output of the Github API to jq to extract values. 

Note: jq has to be installed. On macOS, the easiest way to do this is to run `brew install jq`.  To view install instructions for all platforms, see https://stedolan.github.io/jq/download/. 

Read and Use JSON in Bash with jq

In this lesson, we'll apply our `jq` skills and write a script that gets a list of dependencies from package.json and greps for usages of every package. If a package is unused, it's marked for removal. 

Topics

Instructors

Content Type