top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

Overview about jade?

0 votes
290 views

What is Jade?

Jade can be used just as a short hand for HTML

Jade is an elegant templating language focused on enabling quick HTML coding. No more XML situps and percent prefixes for tags.

Jade is whitespace sensitive, so there's no need to close your tags; Jade does that for you. You can also nest tags within other tags just by indenting them.

Jade Code Structure

pageTitle = "Jade Rocks!"
doctype 5
html(lang="en")
    head
        title= pageTitle 
        script
            console.log("hi");
    body
        p.greeting Hello, World!

Html Code Structure   


 <!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade Rocks!</title>
    <script>console.log("hi");
</script>
  </head>
  <body>
    <p class="greeting">Hello, World!</p>
  </body>
</html>

 Video about Jade

posted Aug 26, 2016 by Parampreet Kaur

  Promote This Article
Facebook Share Button Twitter Share Button LinkedIn Share Button


Related Articles

What is EJS?
EJS is a simple templating language that lets you generate HTML markup with plain JavaScript.
EJS combines data and a template to produce HTML. 

<%= EJS %>

EJS Stands for Effective JavaScript templating.

Like ERB, JavaScript between <% %> is executed. JavaScript between <%= %> adds HTML to the result.

Features:

  • Fast compilation and rendering
  • Simple template tags: <% %>
  • Custom delimiters (e.g., use <? ?> instead of <% %>)
  • Includes
  • Both server JS and browser support
  • Static caching of intermediate JavaScript
  • Static caching of templates
  • Complies with the Express view system

 

Install EJS with NPM

$ npm install ejs
Video for EJS
https://www.youtube.com/watch?v=3Jz18kXCLwg
 
 
 
READ MORE

What is Pug?

The general rendering process of Pug is simple. pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “ locals ”) as an argument. Call that resultant function with your data, and voilà!, it will return a string of HTML rendered with your data.
Pug is a high performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. For bug reports, feature requests and questions, open an issue. For discussion join the chat room.

Node Command

npm install pug

Pug also provides the pug.render() family of functions that combine compiling and rendering into one step. However, the template function will be re-compiled every time render is called, which might impact performance. Alternatively, you can use the cache option with render, which will automatically store the compiled function into an internal cache.

Example:

p #{name}'s Pug source code!

const pug = require('pug');

// Compile the source code
const compiledFunction = pug.compileFile('template.pug');

// Render a set of data
console.log(compiledFunction({
  name: 'Timothy'
}));
// "<p>Timothy's Pug source code!</p>"

// Render another set of data
console.log(compiledFunction({
  name: 'Forbes'
}));
// "<p>Forbes's Pug source code!</p>"

 

Video for Pug Getting Started

https://www.youtube.com/watch?v=leilVbK0xQc

 

READ MORE

What is Macchina?

Macchina is an open source software toolkit for quickly building embedded applications for the Internet of Things that run on Linux-based IoT gateways and devices like the Raspberry Pi, Beaglebone, RED Brick or Galileo/Edison. 

Macchina implements a web-enabled, modular and extensible JavaScript and C++ runtime environment and provides easy to use building blocks that enable applications to talk to various sensors and devices, as well as cloud services.

Rapidly build IoT device applications in JavaScript and/or C++. Reliable and rock-solid, based on industry proven components like the POCO C++ Libraries and the V8 JavaScript engine. Implemented in C++ for maximum efficiency. 

Runs on Embedded Linux devices with as little as 32 MB of RAM, as well as desktop Linux and OS X. Develop and test on desktop machine, then easily deploy to embedded device.

It runs on Linux-based devices, including IoT gateways, industrial computing devices, and prototyping platforms like the Raspberry Pi, Beaglebone and MangOH.

It is based on the POCO C++ Libraries and uses the V8 JavaScript engine.

Video for Macchina 

https://www.youtube.com/watch?v=vhfu38AyMPU​

READ MORE

What is Expo CLI?

Expo CLI is a command line interface for developing Expo apps. It also includes a web-based interface (Expo Dev Tools) for using some of the most often used features also from a quick to use graphical interface.

Expo apps are React Native apps which contain the Expo SDK. The SDK is a native-and-JS library which provides access to the device's system functionality (things like the camera, contacts, local storage, and other hardware). That means you don't need to use Xcode or Android Studio or write any native code, and it also makes your pure-JS project very portable because it can run in any native environment containing the Expo SDK.

Expo also provides UI components to handle a variety of use-cases that almost all apps will cover but are not baked into React Native core, e.g. icons, blur views, and more.

Finally, the Expo SDK provides access to services which typically are a pain to manage but are required by almost every app. Most popular among these: Expo can manage your Assets for you, it can take care of Push Notifications for you, and it can build native binaries which are ready to deploy to the app store.

Video for Expo CLI

https://www.youtube.com/watch?v=cWZHjuKTg7g

READ MORE

What is Vue Native?     

Vue Native is a framework to build cross-platform native mobile apps using JavaScript. Vue Native is a mobile framework to build a truly native mobile app using Vue.js. It is designed to connect React Native and Vue.js.

Vue Native is a wrapper around React Native APIs, which allows you to use Vue.js and compose rich mobile User Interface.

Vue 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 easy to pick up and integrate with other libraries or existing projects.​

Features

  • Declarative rendering
  • Two-way binding
  • The goodness of Vue ecosystem
  • Compiles to React Native
  • Completeness of React Native ecosystem

A video for Vue Native 

https://www.youtube.com/watch?v=8e0XHPylhj0

READ MORE

What is Mezzanine?

Mezzanine is a powerful, consistent, and flexible content management platform. Built using the Django framework, Mezzanine provides a simple yet highly extensible architecture that encourages diving in and hacking on the code. Mezzanine is BSD licensed and supported by a diverse and active community.

In some ways, Mezzanine resembles tools such as Wordpress, providing an intuitive interface for managing pages, blog posts, form data, store products, and other types of content. But Mezzanine is also different. Unlike many other platforms that make extensive use of modules or reusable applications, Mezzanine provides most of its functionality by default. This approach yields a more integrated and efficient platform.

Features

  • Hierarchical page navigation
  • Save as draft and preview on site
  • Scheduled publishing
  • Drag-and-drop page ordering
  • WYSIWYG editing
  • In-line page editing
  • Drag-and-drop HTML5 forms builder with CSV export
  • SEO friendly URLs and metadata
  • E-commerce / Shopping cart module (Cartridge)
  • Configurable dashboard widgets
  • Blog engine
  • Tagging
  • Free Themes, and a Premium Themes Marketplace
  • User accounts and profiles with email verification
  • Translated to over 35 languages
  • Sharing via Facebook or Twitter
  • Multi-lingual sites
  • Custom templates per page or blog post
  • Twitter Bootstrap integration
  • API for custom content types
  • Search engine and API

Mezzanine is an open source project managed using both the Git and Mercurial version control systems.

Video for Mezzanine blogging

https://www.youtube.com/watch?v=3I5nrcsy7RI

READ MORE

What is Jest?

Jest is an open JavaScript testing library from Facebook. Its slogan is "Delightful JavaScript Testing". While Jest can be used to test any JavaScript library, it shines when it comes to React and React Native. 

Main Benefits

     1) Developer Ready

             Complete and ready to set-up JavaScript testing solution. Works out of the box for any React project.

      2) Instant Feedback 

                Fast interactive watch mode runs only test files related to changed files and is optimized to give signal quickly.

      3) Snapshot Testing

               Capture snapshots of React trees or other serializable values to simplify testing and to analyze how state changes over time.

Jest is used by Facebook to test all JavaScript code including React applications. One of Jest's philosophies is to provide an integrated "zero-configuration" experience. 

NPM and Yarn Command for Installation.

npm install --save-dev jest

yarn add --dev jest

Video for JEST Library

https://www.youtube.com/watch?v=7r4xVDI2vho

READ MORE
...