npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

browser-lessons

v1.3.2

Published

This is a module which can be used for workshops or lessons based on browsers

Downloads

8

Readme

browser-lessons

experimental

browser-lessons

This is a module which can be used for workshops or lessons based on browsers.

browser-lessons creates a structure which can be used to teach concepts within the browser similar to the way the workshopper module does.

browser-lessons does two things:

  1. It copies files from your module which are solution and lesson files the user will work through
  2. It will spin a server on a random port and serve tutorial files.

Usage

NPM

Ensure you add the following to your package.json:

"bin": {
  "nameOfYourLessonApp": "index.js"
}

The following will make a binary command line application which users can run to view your lesson. Add the following to the top of your bin js file:

#!/usr/bin/env node

This is how you'd use browser-lessons to create your own lesson applications. All options sent to the browserLessons are option but are documented here:

#!/usr/bin/env node

var path = require('path');
var browserLessons = require('browser-lessons');

browserLessons( {

  // pathLessons is required it should point to the folder
  // where lesson files live. default: './lessons/'
  pathLessons: path.resolve('lessons'),

  // name of your lesson it will be used on the index page
  name: 'name of your lesson',

  // a description of your lesson it will be used on the index page
  description: 'description for what you want to teach',

  // if you don't want browser-lessons to automatically open the
  // lesson in the browser pass false
  doOpen: true,

  // if you want to add special handling for files you can do it
  // here
  routes: {

    '/somethingSpecial': function(req, res) {
        res.send('something special');
    }
  },

  // if you want to override colours which browser-lessons uses
  // pass in a styles object
  styles: {
    colorBG: '#121018',
    colorText: '#7c7491',
    colorBGHeading: '#1E1A29',
    colorHeading: '#9d93b6',
    colorBold: '#f191ae',

    colorInlineCode: '#e1f191',
    colorBGInlineCode: '#3d3451',
    
    colorBGMenu: '#121018',
    colorMenu: '#9D93B6',

    colorBorderMenuEven: '#94F0D9',
    colorBorderMenuOdd: '#94F0D9',
    colorBorderHeadingMenu: '#94F0D9',

    colorBorderPracticeOdd: '#E1F096',
    colorBorderPracticeEven: '#E1F096',
    colorBorderHeadingPractice: '#E1F096',
    
    colorBGPre: '#1e1a28',
    colorBorderPre: '#EF92AE'
  }
});

Lesson Files

You will need to create some lessons folders and files. Typically it would look something like this:

/lessons
--/1- Folder For First Part Of Lesson
----index.md or index.html
----practice.js
----solution.js
----/practice
--------index.html
--------index.js
----/solution
--------index.html
--------index.js

--/2- Folder For Second Part Of Lesson
----index.md or index.html
----/practice
--------index.html
--------index.js
----/solution
--------index.html
--------index.js

/lessons

Your lesson folder will contain all the lesson parts. For instance if you were teaching about jQuery your lesson folders could look something like this:

/lessons
--/1- Selectors
--/2- CSS
--/3- Events
--/4- Ajax

To note you can create files and folders inside your lessons folders which will be served by the browser-lessons server. For instances you might want to create an images folder inside your /1- Selectors lesson folder. It would simply look like this /1- Selectors/images/someImage.jpg.

index.md or index.html

In this file you should write information about what you're trying to teach. This file can be markdown or html both will render just fine.

practice.js and solution.js

There might be cases where you want to keep the users generated /practice and /solution files very clean and keep things like "testing" the users solution in an external file. This is when you'd define a practice.js file in the root of your lesson. This file will require in the users /practice/index.js file. Your practice.js file might look something like this:

var usersExport = require('usersExport');

usersExport( function(value) {

  // the user did it right
  if(value == '10') {

      console.log('you got it right');
  // the user did it wrong
  } else {

      console.log('you got it wrong');
  }
});

/practice

In this folder you should create practice files for the user to attempt to program something you're trying to teach in the case of our jQuery lesson on Selectors we might want to create and index.html file which contains elements the user will select in the index.js file. The index.js file will be browserified so you don't have to write all your practice logic in one file.

You can also add more files inside this folder which will be served if need be just like inside the lessons folders.

/solution

The solution folder should mirror your /practice folder but should contain the completed solution.

var testOut = require('browser-lessons/test-out')

This is a module which can be used when writing practice files for lessons. It watches tap/tape output to console.log intercepts it and renders in a box in the bottom left of the users screen.

It looks like this: require('browser-lessons/test-out')

Usage example

var usersExport = require('usersExport');
var test = require('tape');
var testOut = require('browser-lessons/test-out');

test('test if value was correct from users practice file', function(t) {
  
  usersExport( function(value) {
    t.equal(value, 10, 'the value returned was 10');
    t.end();
  });  
});

Most of the time you'll simply just require require('browser-lessons/test-out') and write tap/tape based tests.

License

MIT, see LICENSE.md for details.