Learn Clojure, Jquery and Svgo

In this course, we will dive into a number of different ways we can create, optimize and integrate an SVG icon set. There are pros and cons to each method, so we’ll dissect each approach so you can make an informed decision for your project. We will learn how to use build tools to automate the process of creating, manipulating and optimizing icons. We’ll take a look at how to use CSS to manipulate styles on an SVG and even how to integrate your SVG icons in a React project.

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files.

svgo

Create an SVG Icon System

Just like a bitmap image, you can compress an SVG by removing various pieces of code that aren’t necessary to it rendering properly. This reduces file size & download time, ultimately leading to a faster page load speed. You’ll learn how to automate the process of compressing your SVGs using `svgo` in the command line.

For a full list of options and plugins available to use with `svgo`, [check out their documentation](https://github.com/svg/svgo).

Note: This lesson assumes you have `npm` installed.

Optimize SVGs for Better Performance using svgo

In this lesson, we’ll explore the process of combining all of your SVG icons into one SVG sprite, to be included directly into markup. We’ll use the command line, along with the `svgo` and `svg-sprite-generator` npm packages to automate the process of compressing the SVGs and creating the sprite.

_Note:_ This lesson assumes you have `npm` installed.

Combine Multiple SVGs into an SVG Sprite

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

You can build single page applications with JQuery and/or AngularJS. In this lesson, John will look at some of the fundamental differences between the two approaches.

Application Wiring: JQuery vs AngularJS

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

jquery

There are many ways of animating stuff on the Web. For example we can use CSS animations, vanilla JavaScript or jQuery library.

In this lesson we are going to learn how to use jQuery `slideUp()`, `slideDown()` and `animate()` functions to animate elements on a webpage in an easy and efficient way.

Animate Elements on a Webpage with jQuery

Clojure is a dynamic, general-purpose programming language, combining the approachability and interactive development of a scripting language with an efficient and robust infrastructure for multithreaded programming. Clojure is a compiled language, yet remains completely dynamic – every feature supported by Clojure is supported at runtime. Clojure provides easy access to the Java frameworks, with optional type hints and type inference, to ensure that calls to Java can avoid reflection.

clojure

We'll use Lumo, a cross-platform standalone ClojureScript compiler and Node.js environment, to create Hello as a command-line application. 

In this lesson, I’ll show you how to install Lumo through NPM, invoke a function in ClojureScript, and use the println function from the core library.

Compile and Run a ClojureScript Command-line App on Node.js with Lumo

In this lesson I show what a Clojure keyword is and why we prefer them as keys in maps; and the three ways we can look up a value in a map.

Keywords and Map Lookup in Clojure and ClojureScript

Para iniciar con Clojure es necesario realizar algunas configuraciones e instalar algunas herramientas.
Lo primero es instalar [leiningen](https://leiningen.org) y configurar tu editor de código.
En este caso configuraremos VIM. Para esto instalaremos algunos ]plugins 

* [vim-fireplace](https://github.com/tpope/vim-fireplace)
* [vim-salve](https://github.com/tpope/vim-salve)
* [coc-conjure](https://github.com/jlesquembre/coc-conjure)

Configurar ambiente de desarrollo y VIM para Clojure

This lesson will focus on creating the checkbox styles for both the default and checked state. We'll make sure our styles are accessible and able to use our theme system.

We'll get started by adding an inline SVG to our input which we can style. I'll give you a tour of what is happening with the SVG and show you how to display it in the checkbox by providing a width. From there we will set the default state of the SVG to a `scale(0)` and set up a transition so when the checkbox is clicked to scale the SVG to 1.