electron / electron-api-demos Goto Github PK
View Code? Open in Web Editor NEWExplore the Electron APIs
Home Page: http://electronjs.org/#get-started
License: MIT License
Explore the Electron APIs
Home Page: http://electronjs.org/#get-started
License: MIT License
Loading the app on Windows 10 shows a scrollbar on the left hand side:
Maybe it should be styled explicitly or at least make the default height high enough to not show it?
/cc @simurai
First, to figure out how the app that runs in the specs is even storing this π
This list is an attempt to gather all the APIs listed at https://github.com/atom/electron/tree/master/docs/api that don't yet have a corresponding demo:
Perhaps we should filter and prioritize this list, then get to as many as we can in time for the 1.0 launch.
I've been thinking about this and sketching out how this may all be laid out and I am thinking rather than present it as just documentation that you can click on, that it can be structured by what you can do with Electron and in human-speak. Rather than needing to guess and search for the module name that you need, you can learn by wha you want to do.
So, for instance, the main view would pose these topics in bold sections, Do you want to:
ipc
messageremote
in renderer processprocess
, or os
moduleThe Guides section is one that can come after shipping the rest of the app and doesn't contain demos per say but rather best practices and tips.
Each of these (and there can be more) can be grouped/colored by category:
Each page, would demo the APIs and link to the code of the app (I've gone back and forth on if the code snippet should also be shown, but it seems hard to maintain this way should to app code change, then the sample code has to be too)
There would be some shared UI elements within each page:
This is just an initial brain dump based on the stuff I've been experimenting with and I'll likely update/refine it as I keep working on it.
We talked (at mini-summit) about potentially creating CSS that Electron app builders could include in order to give them a starting point for making their Electron app feel more native and not website-y.
I'd like to do at least some level of this for the demo app (it could later be expanded on and moved into its own repo to accomplish βοΈ). It would be awesome to π some with you @simurai on this. Do you have time in the next couple of weeks to work on this?
Various things to not forget about:
ipc
modules=>
(nah);
sSquirrel installers allow for a loading gif.
Currently it is configured to use: https://github.com/electron/electron-api-demos/blob/master/assets/img/loading.gif
We don't necessarily need an animated one but I wanted to see if people thought we needed something more than the current one.
For comparison, Atom uses this:
/cc @simurai
So that we have our tests run with Travis β¨
@simurai and I chatted today about keeping this app away from pure documentation styles, to make it more of a story, more about... recipes.
He shared this cookbook that he worked on previously which is similar. It shares examples for how to do x, y, z.
I like this though I think the word "cookbook" feels odd paired with "Electron" and isn't commonly used enough that people would get it. But maybe there is a science-y, space-y word that is similar that would work better?
I want to create an about/welcome page that is the first page people see when they open the app.
This page will be brief but explain a little about what the app is and how to use it. π
A followup to #79
To quote @lee-dohm
So it sounds like there are multiple potential groups that have conflicting sets of things that are "unclear". Could we use this as an opportunity to educate people? Perhaps for anything that isn't typical ES5 (or anything we want/have to use that we feel might be confusing to one camp or another) we have a section in the demo for, "Hey, what's this strange syntax?" with links to relevant documentation?
@jlord and I discussed this today and decided we should preface the demo with a blurb about electron's support for ES2015, and cover the specific new language features that will be used throughout the demo app: template strings, const
, and let
.
A rough list of ideas I had while going through the app:
process.version
and only display one of: (CMD + V or CTRL + V)This app will be lightweight, a few pages based on Electron API categories, which demonstrate the API.
A lot of will be figured out as this is put together, like perhaps each module has its own page and perhaps there is a page explaining the two process types. And likely some static site generating happening, too.
https://github.com/hokein/electron-sample-apps has lots of goodies:
Some of these are already covered in our demo. Others not. Thoughts?
I was thinking of having a pro tip on the menus page about different naming conventions for menu items on different OSes. Like Preferences : Settings for OS X : Win.
Our docs have some OS X tips but not a table like this so I'm trying to pick y'alls brains:
βAre there enough of these to warrant a pro-tip?
βIf there are enough, what are they?
βIf not this as a pro tip, any other menu pro tip ideas?
/cc @kevinsawicki @zcbenz and @amytruong because you visit Windowsland.
What are the ways we can give the Quick Start App more ⨫ synergy ⨬ with the Demo App?
(many of these changes will happen in the quick start app but since that one is open/public right now I felt it better to talk it through over here)
/ place your main process code here
js
file from index.html
Should we set it up on this repo?
Did we settle on the name "Electron Demos"? See #3
If so, we could have an icon in a shape of a big D
. Like
β― npm i
npm WARN deprecated [email protected]: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.
npm WARN deprecated [email protected]: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible.
This is kind of a wild goose chase, as the dependency is pretty deep in the tree in some spots. The two top-level offenders are mocha
and eletron-packager
.
β― npm ls graceful-fs@'<4'
[email protected] /Users/zeke/atom/electron-api-demos
βββ¬ [email protected]
β βββ¬ [email protected]
β βββ¬ [email protected]
β βββ¬ [email protected]
β βββ [email protected]
βββ¬ [email protected]
βββ¬ [email protected]
βββ [email protected]
@jlord and I are thinking it would be good for demo users to use electron-quick-start as their sandbox app while working through the demo. We should add an introductory section that covers the basics of getting the app up and running:
git clone https://github.com/atom/electron-quick-start
cd electron-quick-start
atom .
npm install
npm start
Might wanna also mention that git
and node
are required. We could use https://github.com/jlord/git-it-electron as a starting point for that content. I like that it recommends using GitHub Desktop as a simple way to install git.
@jlord pointed out that once we open-source this app, we'll likely be getting contributions from the community. It would be aweome if the demo app we release on launch day is able to update itself automatically, so anyone who has ever downloaded it will always have an up-to-date version.
@kevinsawicki we would need your help on this one!
Before we launch lets cover the bases with accessibility to set a good example and to help us better document anything we come across during the process.
Self-assigning but happy to π I'll be pinging @maun a lot on this π
I'm going to jot down notes here of questions around language and phrasing that I have as I'm going through this.
@jlord and I just had a quick call to give formal names to various parts of the app's UI hierarchy. We ended up with Category > Section > Demo
. This is not currently reflected in HTML and CSS class names, but maybe we can gradually move towards it as we continue developing.
Because now it has more sections β¨ Discussed in #139 and just opening an issue here to keep it on my radar.
I can't horizontally scroll in the code blocks. It's super weird because when I open DevTools and toggle off and then back on the overflow
and overflow-x
properties of .hljs
and pre
, then it works. Even though it's returned back to it's original CSS state... So that makes no sense.
Are you seeing this behavior @simurai?
On our 1:1 call today, @jlord and I decided to do away with the pro-tips in the app, and instead use "tasks" for everything. This will make the UI less busy and the codebase more consistent.
The extant tips, as of today:
These are development tasks to be done in the app:
electron
This is related to #121 but specifically about trying to get the Chrome Accessibility DevTools Extension working here (and in Electron).
Electron apps are websites in a sense, but not in the sense that they have urls that can use be used with online accessibility auditors. Getting this devtools extension working would be really helpful for Electron app developers in making their apps accessible to more people.
Not all of the chrome.*
APIs have been implemented so we need to compare what this extension uses against what is currently implemented, then we'll see how far we have to go.
π with @kevinsawicki
chrome.*
APIs used in extension #126 (comment)chrome.*
APIsIn order to automate the runtime setup of this demo, each demo's main
process code is wrapped in a module.exports
function:
var ipc = require('electron').ipcMain
var dialog = require('electron').dialog
module.exports.setup = function () {
ipc.on('open-error-dialog', function (event) {
dialog.showErrorBox('An Error Message', 'Demonstrating an error message.')
})
}
Then each file is require
d and its function invoked:
// Require and setup each JS file in the main-process dir
glob(__dirname + '/main-process/**/*.js', function (error, files) {
if (error) return console.log(error)
files.forEach(function (file) {
require(file).setup()
})
})
However, most users wouldn't write an electron app this way. They would just write:
var ipc = require('electron').ipcMain
var dialog = require('electron').dialog
ipc.on('open-error-dialog', function (event) {
dialog.showErrorBox('An Error Message', 'Demonstrating an error message.')
})
It would be great if we could write the main process files as a user would, then figure out a way to eval
them at runtime. Something like this:
// Require and setup each JS file in the main-process dir
glob(__dirname + '/main-process/**/*.js', function (error, files) {
if (error) return console.log(error)
files.forEach(function (file) {
eval(fs.readFileSync(file, 'utf8'))
})
})
I'm not sure anymore about the navigation. I think it's fine if you try to find something, but if you try to look at each demo, one by one, it takes some effort to:
So maybe at the bottom of each "page", there could be a "next" button to keep going forward and not having to go back all the time.
I've got things wired up for a minimal demo of how it would be with one section, the dialog, section fleshed out. All of the colors/design stuff is just placeholder.
It would be good to maybe have a π with @simurai and @benogle this week if possible to take a look at it?
main page (all of the categories aren't built out yet, just dialogs one)
dialogs page with collapsed sections
expanded section
So that this app auto updates β¨
Reminder to self: At some point I probably should go through all the styles and do some cleanup/refactoring.
Things like this: https://github.com/atom/electron-api-demos/blob/master/assets/css/content.css#L297-L299
@simurai how do you feel about using a small octicon along side external links to signal that they are external? I think I like it, but I defer to you!
I have a quick mock up of it on exlinks
branch.
It's almost that time! I need to set up the packaging npm
scripts π¦
π #49
Putting this in its own issue, ported from #81β
Detect the user's OS with process.version and only display one of: (CMD + V or CTRL + V)
During the installer run we should add the app to the start menu.
We started using the const
, let
and string templates in places but we don't use them everywhere. It makes sense to be consistent all over, right? Just wanted to check because I can go through and do a sweet to make this so π
On master
when I click to change sections in the sidebar I'm getting this text pileup:
I think the gif removes some frames which makes it appear like it doesn't happen at every click, but it does.
cc @simurai
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.