From ad702e237683c8049dbda38de392dd8203e299eb Mon Sep 17 00:00:00 2001 From: Jessica Lord Date: Tue, 16 Aug 2016 19:16:39 -0700 Subject: [PATCH] Begin all the things\! --- .gitignore | 1 + footer.html | 3 +++ header.html | 14 ++++++++++++ index.html | 48 +++++++++++++++++++++++++++++++++++++++ index.js | 12 ++++++++++ index.md | 41 ++++++++++++++++++++++++++++++++++ package.json | 15 +++++++++++++ style.css | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 8 files changed, 197 insertions(+) create mode 100644 .gitignore create mode 100644 footer.html create mode 100644 header.html create mode 100644 index.html create mode 100644 index.js create mode 100644 index.md create mode 100644 package.json create mode 100644 style.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3c3629e --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/footer.html b/footer.html new file mode 100644 index 0000000..5b6e2d6 --- /dev/null +++ b/footer.html @@ -0,0 +1,3 @@ + + + diff --git a/header.html b/header.html new file mode 100644 index 0000000..3cfb551 --- /dev/null +++ b/header.html @@ -0,0 +1,14 @@ + + + + + + + + + Essential Electron + + + + +
diff --git a/index.html b/index.html new file mode 100644 index 0000000..2e02351 --- /dev/null +++ b/index.html @@ -0,0 +1,48 @@ + + + + + + + + + Essential Electron + + + + +
+

Essential Electron

+

Below you'll (hopefully) find questions about Electron answered, words defined and resources linked. And concisely!

+

What is Electron?

+

Electron is a library you can use to build desktop applications with JavaScript, HTML and CSS. These applications can be packaged to run on Mac, Windows and Linux computers.

+

Next

+ +

Definitions:

+
    +
  • JavaScript, HTML and CSS Are web languages, meaning they are the building blocks of websites and web browsers like Chrome and Safari know how to turn this code into the visual graphics you see.
    • +
  • Electron is a library Electron is code that you can re-use and not have to write yourself. You can use it to write your project on top of.
    • +
+

Why is this important?

+

Typically, desktop applications for each operating system are written in that operating systems native language. That can mean having three teams writing your app three times to work on each kind of system. With Electron, you can write your app just once and using the common web languages (HTML, CSS and JavaScript) which makes app development more

+

Next

+ +

How

+

Electron itself is mostly C++. It's a combination of Chromium (the open source version of Google Chrome), Node.js (server-side JavaScript language) and a set of APIs (Application Program Interface) for native operating system functions like open file dialogs, notifications, icons and more.

+

More

+ +

How are Chrome and Node combined

+

Chromium and Node.js projects are both built on the same JavaScript rendering engine, V8 (built first for Chromium). In Electron they share one version of V8, the one in Chrome. Sometimes Electron's Node needs to be patched to make this work, sometimes not.

+

img of 3 parts

+

What are the trade offs?

+

What are the perks?

+

What is developing on Electron like?

+
+ + diff --git a/index.js b/index.js new file mode 100644 index 0000000..9132df5 --- /dev/null +++ b/index.js @@ -0,0 +1,12 @@ +var fs = require('fs') +var marked = require('marked') + +var markdown = fs.readFileSync('index.md').toString() +var header = fs.readFileSync('header.html').toString() +var footer = fs.readFileSync('footer.html').toString() + +var html = marked(markdown) + +fs.writeFileSync('index.html', header + html + footer) + +console.log('(•◡•)/\n') diff --git a/index.md b/index.md new file mode 100644 index 0000000..a5021de --- /dev/null +++ b/index.md @@ -0,0 +1,41 @@ +# Essential Electron + +Below you'll (hopefully) find questions about Electron answered, words defined and resources linked. And concisely! + +## What is Electron? + +Electron is a library you can use to build desktop applications with JavaScript, HTML and CSS. These applications can be packaged to run on Mac, Windows and Linux computers. + +### Next +- [Why is this important?](#why-is-this-important) + +#### Definitions: +- **JavaScript, HTML and CSS** Are web languages, meaning they are the building blocks of websites and web browsers like Chrome and Safari know how to turn this code into the visual graphics you see. +- **Electron is a library** Electron is code that you can re-use and not have to write yourself. You can use it to write your project on top of. + +## Why is this important? + +Typically, desktop applications for each operating system are written in that operating systems native language. That can mean having three teams writing your app three times to work on each kind of system. With Electron, you can write your app just once and using the common web languages (HTML, CSS and JavaScript) which makes app development more + +### Next + +- [How](#how) + +## How + +Electron itself is mostly C++. It's a combination of [Chromium]() (the open source version of Google Chrome), [Node.js]() (server-side JavaScript language) and a set of APIs (Application Program Interface) for native operating system functions like open file dialogs, notifications, icons and more. + +### More +- [How are Chrome and Node combined?](#how-are-chrome-and-node-combined) + +## How are Chrome and Node combined + +[Chromium]() and [Node.js]() projects are both built on the same JavaScript rendering engine, [V8]() (built first for Chromium). In Electron they share one version of V8, the one in Chrome. Sometimes Electron's Node needs to be patched to make this work, sometimes not. + +![img of 3 parts]() + +## What are the trade offs? + +## What are the perks? + +## What is developing on Electron like? diff --git a/package.json b/package.json new file mode 100644 index 0000000..15d83d3 --- /dev/null +++ b/package.json @@ -0,0 +1,15 @@ +{ + "name": "essential-electron", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "start": "node index.js", + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "", + "license": "ISC", + "dependencies": { + "marked": "^0.3.6" + } +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..01c3215 --- /dev/null +++ b/style.css @@ -0,0 +1,63 @@ +body { + font-family: Source Sans Pro; + color: #333; + font-size: 1.3em; + line-height: 1.5em; +} + +h1 { + font-size: 4em; +} + +h1 + p { + padding-bottom: 40px; +} + +h2 { + font-size: 3em; + line-height: 1.5em; +} + +h1 +p, +h2 + p { + font-size: 2em; + line-height: 1.5em; +} + +h2 { + border-top: 2px solid #333; + padding-top: 40px; +} + +h3, +h3 + p { + /*color: rgb(161, 247, 234);*/ +} + +h4, +h4 + ul { +} + +h2, h3, h4, h5, h6 { + padding-top: 20px; + margin-bottom: 0; +} + + +a { + color: #333; + text-decoration: none; + padding-bottom: 2px; + border-bottom: 2px solid #333; +} + +.wrapper { + max-width: 900px; + min-width: 300px; + margin: 0 auto; +} + +.def, +h4 + ul strong { + color: #569efe; +}