An Accessible and Usable GitHub Repository

After adding a few repositories to GitHub, I realized I neglected to discuss README.md. This is a place where you can put notes about your project which will appear on the repository page. For example, here’s the README.md from my newest repository, promises-browser.

See [this article](https://ramonaridgewell.wordpress.com/2017/04/24/my-js-journey-a-promise-in-a-browser/) for a description of how to set up this project.

It shows up at the bottom of the GitHub page, after the list of files. It’s also a good practice to add a description, a link to a webpage, and topics (up near the top).

Screen Shot 2017-04-24 at 12.06.05

I’ve been linking to the articles in my blog for setup instructions, but you could include pertinent notes in the README.md, and they will show up there.

Copyright ©2014-17 Ramona Ridgewell. All rights reserved.

Posted in #Education, AmWriting, Coding, Education, GitHub, JavaScript, Science, Women, Writing | Tagged , , , , , , , , , | Leave a comment

My JS Journey: A Promise in a Browser

In this example, I’m going to explain how to fork a GitHub repository—or copy someone else’s—as well as implement a simple promises app. As an added bonus, I threw in using a Class. The code to fork is my JavaScript browser skeleton.

Forking a Repository

In GitHub:

In the upper right, Click the Fork.

In iTerm:

Once you have your local GitHub repository, you can follow the instructions for cloning I outlined in Promises. For more on forking, see this GitHub article.

To install all the node packages, run:

npm install

Then build:

npm run build

To see it run, open index.html. When you click the Get Message button, the Message should dislpay “Hello.”

Screen Shot 2017-04-03 at 09.37.37

Adding A Class

Because I like classes, I implemented one, so you can see how that works with respect to export.

First, implement the class by changing src/hello.js as follows:

class Hello {
  static hello(){
    return 'Hello';
  }
}

export default Hello;

Modify src/index.js to import the class:

import Hello from './hello.js';

var sayHello = function () {
  return Hello.hello();
}

document.getElementById('msgBtn').addEventListener('click', function () {
    var message = sayHello();
    document.getElementById("message").innerHTML = message;
});

Build the project.

npm run build

Load or refresh index.html:
Screen Shot 2017-04-03 at 09.37.37
Checkin the code.

Adding Promises

This example is basically the same as the CLI one I described in Promises. The major difference, of course, is this one is in the browser. Promises let you ensure the order of asynchronous events, such as file reading. In my example, I retrieve the text ” world” after a timeout, and append it to “Hello” from the origin example. It’s contrived, but it shows how a promise works.

Modify src/hello.js as follows:

class Hello {
  static getWorld() {
    return new Promise((resolve) => {
      setTimeout(() => resolve(' world'), 500);
    });
  }

  static hello(){
    return new Promise((resolve) => {
      this.getWorld().then(result => {
        resolve('Hello' + result);
      });
    });
  }
}

export default Hello;

Modify src/index.js to resolve the promise returned from Hello.hello():

import Hello from './hello.js';

const sayHello = (message) => {
document.getElementById("message").innerHTML = message;
};

document.getElementById('msgBtn').addEventListener('click', () => {
Hello.hello()
.then(res => sayHello(res));
});

Build the code and refresh index.html. It should now display “Hello world” instead of simply “Hello.” You might be able to see the half-second lag on getting the message. That’s the timeout.

Screen Shot 2017-04-21 at 12.59.10

Check the code in.

In Conclusion

Promises in ES6 are not difficult, although they can be cumbersome if there are a lot of nested Promises. The new—and, as of yet, not completely supported—ES7 feature, async/await, is meant to simplify nested Promises. I’ll write about that in a future post. You can find the Browser Promise code in my github repository, promises-browser.

Copyright ©2014-17 Ramona Ridgewell. All rights reserved.

Posted in #Education, AmWriting, Coding, Education, JavaScript, Programming, Science, Women, Writing | Tagged , , , , , , , , | 1 Comment

Seattle React.js April Meetup

I had the pleasure tonight to attend the Seattle React.js April Meetup. It was hosted by Textio, who have created an augmented writing platform for creating highly effective job listings and who provided a light dinner; and Galvanize, who provide a dynamic learning community for technology and who also provide space for the event.

Host Lee Ngo, from Galvanize, started the evening by introducing Stephan Prockow, the Seattle React.js Meetup organizer. After the greetings and salutations were complete, he introduced the first guest speaker, Max Winderbaum of Textio.

Winderbaum talked about how to create lovely rich-text editors using draft-js, a JavaScript rich text editor framework, built for React and backed by an immutable model. Textio began their text editor by trying to utilize the HTML tag < contenteditable> to highlight or do other rich text enhancements. After starting down the path of writing their own solution, they found Facebook was already providing something very close to what they were trying to accomplish. State becomes immutable and atomic. It renders to all browsers the same way. And, best of all, the state is separate from the view, which facilitates testing. draft-js nicely supports plugins like draft-js-plugins. Winderbaum warned us to keep an eye out for new kid, slatejs.org. There’s always something new on the horizon for JavaScript.

The second presentation was about using react-apollo with graphql. Presenter Greg Hardin, of IceBrg.io, offered as an example a lookup from a collection of books. He covered the details of how react-apollo is integrated into the code and also cited some tools that can help with setup, such as Scaphold. Hardin explained some benefits of react-apollo with less boilerplate, the ability to run multiple named queries in the same space, mutations that an be separated from queries, and the fact that it is already integrated with redux.

mobx is another alternative to working in react. High Seas Consulting‘s Bryan Brophy gave a compelling talk on the ease of use of mobx, whose goal is simple, scalable state management. In an entertaining demo that used the Beatles as an example for band members changing state over time, Brophy showed the basic usage of mobx, including injecting stores, actions, and observers to keep the state up-to-date. It is certainly something I will look at seriously before making my next major software updates.

I’m happy I was able to be present for this well-attended event. The speakers were well-versed in their respective technologies and I learned a lot. Thanks so much to the hosts, Galvanize and Textio, and the event organizers at Seattle React.js Meetup. When video of the talks is available, I’ll add a link to it here.

Copyright ©2014-17 Ramona Ridgewell. All rights reserved.

Posted in #Education, Coding, JavaScript, Programming, Science | Tagged , , , , , , | Leave a comment

Norwescon 2017

Over the weekend, I attended Norwescon 40: Over the Hills and Far Away. It was my first time attending. I had a great time in the writing panels and workshops. You can read more about it on my writing blog.

I spent all of April 14 in writer’s panels and workshops at Norwescon 40. It was intense and exhausting, but time well-spent.

via NorWesCon 40: Over the Hills and Far Away — thewolfdreambooks

Posted in #Education, AmWriting, AmWritingFantasy, Books, Education, Fantasy, Horror, Novel, Reading, Writing | Tagged , , , , , , , , | Leave a comment

My JS Journey: Promises

Promises

There are a lot of ES6 features that are not supported in ES5 browsers. Promises are among them. Your ES6 code may or may not work based on which Node.js or WebPack you are using, which browser version it is rendering in, etc. Here is a comprehensive chart that shows which features are supported in which environments. Here’s another more detailed one specific to Node.js.

Although Promises are supported by the most current versions of WebPack, babel-core and Node.js, in the past, babel-polyfill was a separate requirement. If you find that adding the Promise code doesn’t work, first update your WebPack or Node.js, or try installing polyfill. Its purpose is to add to the global scope as well as native prototypes like String to enable use of new built-ins until they are added to the core packages. For more information, read how it works here.

install --save babel-polyfill

For this example, I will show how to add a promise to my ES6 CLI Skeleton.

Get the Skeleton

If you have not already followed the instructions to create the ES6 CLI Skeleton, you should do that now (or follow the instructions for Forking that I will include in another blog soon). If you know how to copy one of your GitHub repositories, clone it, then skip this section.

Clone the Project

In GitHub:

Navigate to your CLI Skeleton.
On the right side, click the green Clone or Download button.
Copy the URL.

In the console:

Navigate to the directory where you want the project directory to exist.
Run the following command:

git clone https://github.com/YourRepo/skeleton-cli-js.git

Output:

Cloning into 'skeleton-cli-js'...
remote: Counting objects: 21, done.
remote: Compressing objects: 100% (11/11), done.
remote: Total 21 (delta 4), reused 21 (delta 4), pack-reused 0
Unpacking objects: 100% (21/21), done.
Checking connectivity... done.

Navigate to skeleton-cli-js (the project directory).
Run this command:

git remote show origin

Output:
remote origin
Fetch URL: https://github.com/RidgewellServices/skeleton-cli-js.git
Push URL: https://github.com/RidgewellServices/skeleton-cli-js.git
HEAD branch: master
Remote branch:
master tracked
Local branch configured for 'git pull':
master rebases onto remote master
Local ref configured for 'git push':
master pushes to master (up to date)

If you plan to submit pull requests to augment a repository, this is fine. Otherwise, to create your own project, but keep all the history from the original project, run the following commands.

This command disassociates the code from the original repository.

git remote remove origin

Create a new repository on GitHub, then run the next command to
associate the code with your new repository.

git remote add origin https://github.com/YourGitHub/your-new-repo.git

Now, when you show the origin, you are pointed to your new repo. In the project directory, run:

git remote show origin

Output:
remote origin
Fetch URL: https://github.com/YourGitHub/your-new-repo.git
Push URL: https://github.com/YourGitHub/your-new-repo.git
HEAD branch: (unknown)

When you checkin, it will go to your repository.
To install the package dependencies, from the command line, run:

npm install

Then, build to ensure everything is working:

npm run build

And, finally, run the code:

npm start

It should say “Hello.”

Add a Promise

Promises let you ensure the order of asynchronous events, such as file reading. In my example, I retrieve text after a timeout. It’s contrived, but it shows how a promise works.

Add Promises

Change the app code by adding some promises. Change src/hello.js as follows:

const getWorld = () => new Promise((resolve) => {
  setTimeout(() => resolve(' world'), 500);
});

const hello = () => new Promise((resolve) => {
  getWorld().then(result => {
    resolve('hello' + result);
  });
});

export default hello;

Change src/index.js to resolve the Promise, as follows:

import hello from './hello';

const sayHello = (message) => {
  console.log(message);
};

function main() {
    var args = process.argv;
    if (args[2] && args[2] === '--v' ) {
        console.log('Es6CliSkeleton - version 1.0.0');
    } else {
        hello().then(res => sayHello(res));
    }
}

main();

In the project directory, run:

npm run build

In the project directory, run:

npm start

Output:
node dist/index
hello world

If you want to do the same thing in the browser, download my ES6 Browser Skeleton instead. Change src/hello.js as above. Then, modify src/index.js to resolve the Promise, as follows:

import hello from './hello.js';

const sayHello = (message) => {
  document.getElementById("message").innerHTML = message;
};

document.getElementById('msgBtn').addEventListener('click', () => {
  hello()
  .then(res => sayHello(res));
});

Verify it works by building and refreshing index.html. It should say, “hello world.”

Check the code in.

In Conclusion

Promises in ES6 are not difficult, although they can be cumbersome if there are a lot of nested Promises. The new—and, as of yet, not completely supported—ES7 feature, async/await, is meant to simplify nested Promises. I’ll write about that in a future post. You can find the CLI Promise code in my github repository, promises.

Copyright ©2014-17 Ramona Ridgewell. All rights reserved.

Posted in #Education, AmWriting, Coding, Education, JavaScript, Programming, Software Development, Writing | Tagged , , , , , , | 1 Comment

My JavaScript Journey: Basic ES6 Browser Skeleton

In my last blog entry, I explained how to create a very basic ES6 CLI project. In this one, I will follow most of the same steps to create an ES6 browser project, instead. I’m not going to go into the same level of detail with respect to creating the project and checking in code in this article—see the first one if you have questions about those basics.

Add the App

After creating your project, add index.js to /src:

"use strict"

var sayHello = function () {
    return "Hello";
};

document.getElementById('msgBtn').addEventListener('click', function () {
    var message = sayHello();
    document.getElementById("message").innerHTML = message;
});

Create a new folder, /css, and add styles.css:

body {
    font-family: 'Arial';
    font-size: 16px;
    padding: 0;
    margin: 0;
}

header {
    background-color: #336666;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

h1, h2, h3 {
    font-weight: 200;
}

header > h1 {
    font-weight: 200;
    font-size: 18px;
    margin: 0;
    color: #FFFFFF;
}

h2 {
    font-size: 22px;
    margin: 20px 0 0 0;
}

h3 {
    margin: 10px 0 28px 0;
}

h3 > span {
    color: #0288D1;
}

label {
    display: inline-block;
    width: 80px;
    text-align: right;
    margin-right: 4px;
}

.content {
    padding: 20px;
}

.bar {
    display: inline-block;
    border: none;
    height: 8px;
}

.stretch {
    width: 100%;
    padding-left:0;
    padding-right:0;
}

.flex {
    display: -webkit-flex;
    display: flex;
}

.left {
    text-align: left;
}

.form > div {
    margin: 6px 0;
}

button {
    text-transform: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding: 12px 18px;
    border-radius: 10px;
    background: #F1F1F1;
    font-size: 16px;
    border: solid 2px #ddd;
    color: #444;
}

button:hover {
    background: #F6F6F6;
    border: solid 2px #ccc;
}

button:active {
    background: #FCFCFC;
    border: solid 2px #ddd;
}

button:focus {
    outline:0;
}

In the project folder, add index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
										<link href="css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>JavaScript ES6 Browser Skeleton</h1>
</header>
<div class="content">
<div class="form">
<div>
 <label htmlFor="msgBtn"></label>
 <button id="msgBtn">Get Message</button></div>
</div>
<h2>Message: <span id="message"></span></h2>
</div>
<script src="src/index.js"></script>
</body>
</html>

To see it work, open index.html in a browser (my example uses Chrome) and click the Get Message button: Screen Shot 2017-04-03 at 09.37.37 Checkin the code.

Add ES6 import/export Code

In /src, add hello.js:

const hello = 'Hello';
export default hello;

Modify index.js to import this module, then use it to get the text “hello.”

import hello from './hello.js';

var sayHello = function () {
    return hello;
};

document.getElementById('msgBtn').addEventListener('click', function () {
    var message = sayHello();
    document.getElementById("message").innerHTML = message;
});

If you run the code, you will get an error in the console (to open the console in Chrome, on a Mac, click ⌥⌘i). Output: Uncaught SyntaxError: Unexpected token import Screen Shot 2017-04-03 at 09.48.28 Do the next steps to fix it.

Add webpack

See https://www.npmjs.com/package/webpack/ webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser.

npm install webpack --save-dev

Modify index.html to run from webpack bundle: Replace:

<script src="src/index.js"></script>

with:

<script src="dist/bundle.js"></script>

To create the bundle, in the project folder, run:

./node_modules/.bin/webpack app/index.js dist/bundle.js

Output:

Hash: d65b6915dcad093cc77c
Version: webpack 2.3.3
Time: 109ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.31 kB       0  [emitted]  main
   [0] ./src/hello.js 45 bytes {0} [built]
   [1] ./src/index.js 251 bytes {0} [built]

webpack creates bundle.js in /dist. Compare this file to index.js to see how webpack replaces the ES6 instructions with ES5 compatible wrapper code.

Either refresh your browser window or open index.html from your project folder. The error will be gone.

Screen Shot 2017-04-03 at 09.37.37

Add .gitignore:

.DS_Store
dist
node_modules

Checkin the code.

Using webpack with node

To enable node to build the webpack bundle, in the project folder, add webpack.config.js. Notice: this code is written in ES5.

var path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

This can be run from the project directory to create dist/bundle.js (delete the existing dist/bundle.js first so you can see the new one get built):

./node_modules/.bin/webpack --config webpack.config.js

The final piece is to add a build script to package.json:

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

In the project directory, run:

npm run build

And, there you have it. The node script builds the webpack bundle, dist/bundle.js from which index.html gets the packaged html that it renders.

Checkin the code.

In Conclusion

Packaging a simple ES6 app with webpack transpiles the code into a bundle that can be run on any browser that supports ES5. You can find the code in my github repository, skeleton-browser-js.

Copyright ©2014-17 Ramona Ridgewell. All rights reserved.

Posted in #Education, Coding, JavaScript, Writing | Tagged , , , , , | 1 Comment

Tishta the Crystal Orb: Denalton

I’m also back to having fun writing the story.

My latest chapter, “Denalton,” in my novel, “Tishta the Crystal Orb,” is now complete. Five chapters to go on this edit. I’ll be looking for Beta Readers, so if you’re interested, give me a shout. Follow my progress on The Wolf Dream Books blog.

via Tishta the Crystal Orb: Denalton — thewolfdreambooks

Posted in AmWriting, AmWritingFantasy, Books, Fantasy, Horror, Novel, Writing | Tagged , , , , , , , , | Leave a comment