• This repository has been archived on 17/Feb/2021
  • Stars
    star
    4,230
  • Rank 9,643 (Top 0.2 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created almost 11 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A framework to make it easy for developers to add product tours to their pages.

🚨 UNMAINTAINED 🚨

This project is no longer used by LinkedIn and is currently unmaintained.

Hopscotch Build Status

Hopscotch is a framework to make it easy for developers to add product tours to their pages. Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress.

To learn more about Hopscotch and the API, check out linkedin.github.io/hopscotch.

Example Hopscotch tour

What's Here?

  • /archives contains .zip and .tar.gz files of prior and current distributions of Hopscotch.
  • /demo has a simple demo page with a Hopscotch tour. Much of the content duplicates what's on the github.io page.
  • /dist includes compiled files for the current version of Hopscotch. This folder gets zipped up into an archive when a new release is published.
  • /src contains source files for Hopscotch, including JavaScript and Less. If you're making changes to contribute back to the core repository, this is where you'll want to make them.
  • /test is our testing suite for the core framework, written using Jasmine.

How do I get started with Hopscotch?

The Hopscotch files included in /dist is a good starting point for working with Hopscotch. Out of the box, Hopscotch includes the core JavaScript for running and interacting with tours, a default template for rendering bubbles, and a default CSS file to provide a basic look and feel for your tours. To get started, simply include these files on your page, then use the Hopscotch API to start a tour. While Hopscotch will use YUI or jQuery if they're present, they're not required.

Check out linkedin.github.io/hopscotch for usage examples and a live sample tour. If you'd like to tweak some of the default assets included with Hopscotch to best suit your project's needs, read on for details about how to modify and rebuild a custom version of Hopscotch.

How do I build Hopscotch?

Hopscotch is built using Grunt.js. Learn more about how to get started with Grunt. Running grunt will build Hopscotch (publishing artifacts to /tmp) and run the test suite against the newly built artifacts.

How do I test Hopscotch?

Testing is done as part of the build process using the Jasmine testing framework. You can run grunt test to verify changes.

Continuous integration is run against every pull request using Travis CI. Please verify your changes against the test suite before submitting a pull request! We also recommend adding new tests for any new features or bugfixes as feasible.

How do I tweak Hopscotch to meet my project's requirements?

Depending on your use case, you might want to modify and/or rebuild some of the basic components included with Hopscotch. Some moddable options include...

  • CSS tweaks: The Hopscotch stylesheet is written in and compiled using LESS. If you make changes to your local copy of these stylesheets, they'll be recompiled when building Hopscotch.
  • Bubble markup: The internal markup for Hopscotch bubbles are rendered using templates. See the README.md file in /src/tl for details. Any templates in /src/tl will be compiled into JavaScript using JST when building Hopscotch and included at the bottom of Hopscotch.js.
  • Callbacks & Page Interactivity: See linkedin.github.io/hopscotch for details about the Hopscotch API and what tour/callout events you can register events with. Use callbacks to integrate Hopscotch with other libraries and/or presentational elements you might have on your page.

I want to contribute! How can I help?

Note: We're currently in the midst of refactoring Hopscotch into a newer module-based format that should help make readability and maintenance a lot easier. While this work is in progress, we'll be halting changes to the master branch of Hopscotch, apart from major maintenance fixes. Please feel free to continue submitting bug reports, though do keep in mind that they not be addressed in the current iteration of the library. Thanks!

See CONTRIBUTING.md for details on how to contribute back to the public Hopscotch repository on GitHub.

More Repositories

1

LayoutKit

LayoutKit is a fast view layout library for iOS, macOS, and tvOS.
Swift
3,157
star
2

camus

LinkedIn's previous generation Kafka to HDFS pipeline.
Java
880
star
3

indextank-engine

Indexing engine for IndexTank
Java
843
star
4

LIExposeController

Expose style navigation for iOS apps
Objective-C
744
star
5

Selene

iOS library which schedules the execution of tasks on a background fetch
Objective-C
643
star
6

datafu

Hadoop library for large-scale data processing, now an Apache Incubator project
Java
585
star
7

cleo

A flexible, partial, out-of-order and real-time typeahead search library
Java
559
star
8

sensei

distributed realtime searchable database
Java
539
star
9

inject

AMD and CJS dependency management in the browser
JavaScript
464
star
10

indextank-service

The API, BackOffice, Storefront, and Nebulizer for IndexTank
Python
382
star
11

venus.js

where bugs go to die
JavaScript
299
star
12

Fiber

Lightweight JavaScript prototypal inheritance model
JavaScript
279
star
13

sepia

Sepia is a VCR-like module for node.js that records HTTP interactions, then plays them back exactly like the first time they were invoked
JavaScript
278
star
14

JTune

A high precision Java CMS optimizer
Python
271
star
15

scanns

A scalable nearest neighbor search library in Apache Spark
Scala
253
star
16

Cubert

Fast and efficient batch computation engine for complex analysis and reporting of massive datasets on Hadoop
Java
248
star
17

naarad

Naarad is a highly configurable system analysis tool that parses and plots timeseries data for better visual correlation. Naarad was built to help in performance analysis and investigations.
Python
239
star
18

white-elephant

Hadoop log aggregator and dashboard
Java
191
star
19

simoorg

Failure inducer framework
Python
191
star
20

nginx-config-builder

A python library for building nginx configuration files programatically
Python
169
star
21

Zopkio

A Functional and Performance Test Framework for Distributed Systems
Python
160
star
22

fossor

A plugin-oriented tool for automating the investigation of broken hosts and services.
Python
158
star
23

api-get-started

LinkedIn REST API Getting Started Tutorial
Java
158
star
24

dustjs-helpers

Helpers for dustjs-linkedin
JavaScript
115
star
25

archetype

Archetype is a Compass/Sass based framework for authoring configurable, composable UI components and patterns.
Ruby
102
star
26

Isaac

This library parses data from JSON objects into NSObject models without needing to write parsing code for each model.
Objective-C
97
star
27

linkedin-utils

Base utilities shared by all linkedin open source projects
Java
88
star
28

rest.li-api-hub

API Hub is a web UI for browsing and searching a catalog of Rest.li APIs.
Scala
73
star
29

jaqen

Jaqen - Simple DNS rebinding
Go
70
star
30

lafayette

Lafayette is a system to store various email abuse reports sent in ARF.
Python
70
star
31

Backbone.TableView

Backbone View to render collections as tables
CoffeeScript
70
star
32

linkedin-zookeeper

This project provides utilities and wrappers around ZooKeeper
Java
64
star
33

sometime

A BurpSuite plugin to detect Same Origin Method Execution vulnerabilities
Java
61
star
34

RookBoom

A web application for creating meetings.
Scala
45
star
35

datacl

A collection of efficient utilities for a data scientist.
C
40
star
36

mobster

Mobster is a tool that can help you get deeper understanding into the performance of mobile web applications on real mobile devices
Python
38
star
37

dmarc-msys

This set of scripts in Lua implements DMARC policy checking and reporting for the Message Systems MTA products, a popular extendable commercial MTA.
Lua
37
star
38

vagrant-autodns

Vagrant plugin for automagically managing guest DNS
Ruby
36
star
39

talkin

TalkIn is an interface providing safe and easy unidirectional cross-document communication.
JavaScript
31
star
40

play-testng-plugin

TestNG runner for the Play Framework 2.4
Java
24
star
41

sin

JavaScript
24
star
42

insframe

Central hub for distributing web apps to multiple browsers on multiple environments
JavaScript
22
star
43

Tachyon-iOS

Tachyon provides configurable UI components for iOS that are commonly used in calendar features and applications.
Objective-C
21
star
44

postcss-lang-optimizer

PostCSS plugin to extract language specific CSS rulesets to their own CSS files to optimize stylesheet delivery.
JavaScript
21
star
45

bowser

Extensible language parser with Python-like syntax. Written in Java and antlr.
Java
18
star
46

adfullssl

AdFullSsl is a tool that can automatically detect SSL non-compliant ads and fix them
Python
16
star
47

dustjs-filters-secure

extend dustjs-linkedin to enhance the filters methods
JavaScript
15
star
48

gradle-plugin-insight

Automatic, effortless, accurate documentation for any Gradle plugin
Groovy
13
star
49

timingz.js

Measure code execution in the browser and derive statistical data
JavaScript
13
star
50

Idiomatic-JSLint

JavaScript
12
star
51

streaming

10
star
52

custom-gradle-plugin-portal

An example implementation of a gradle plugin portal.
Java
9
star
53

sbt-restli

A collection of sbt plugins providing build integration for the rest.li REST framework
Scala
9
star
54

PTYHooks

Python
9
star
55

MTBT

Java
9
star
56

inject-bower

Please use linkedin/inject
JavaScript
6
star
57

rest.li-skeleton.g8

Rest.li tool for generating skeleton rest.li projects.
Shell
5
star
58

naarad-examples

Example logs and configs for naarad
3
star
59

html5-presentation

Code for the "Building a Performant HTML5 App" presentation at http://www.meetup.com/SF-Web-Performance-Group/events/71651452/
2
star