Convert Figma logo to code with AI

dept logohighway

Highway - A Modern Javascript Transitions Manager

1,424
89
1,424
4

Top Related Projects

🤗 Transformers: the model-definition framework for state-of-the-art machine learning models in text, vision, audio, and multimodal models, for both inference and training.

93,668

Tensors and Dynamic neural networks in Python with strong GPU acceleration

191,921

An Open Source Machine Learning Framework for Everyone

40,283

DeepSpeed is a deep learning optimization library that makes distributed training and inference easy, efficient, and effective.

14,559

Distributed training framework for TensorFlow, Keras, PyTorch, and Apache MXNet.

8,812

A PyTorch Extension: Tools for easy mixed precision and distributed training in Pytorch

Quick Overview

Highway is a modern and lightweight JavaScript library for creating smooth page transitions. It provides an easy-to-use API for managing navigation and animating content changes, enhancing the user experience of single-page applications and static websites.

Pros

  • Lightweight and performant, with minimal dependencies
  • Flexible and customizable, allowing for complex animations and transitions
  • Easy to integrate with existing projects and frameworks
  • Well-documented with clear examples and API reference

Cons

  • Limited browser support for older versions (IE11 and below)
  • May require additional setup for complex routing scenarios
  • Learning curve for advanced features and custom transitions
  • Potential conflicts with other JavaScript libraries that manipulate the DOM

Code Examples

  1. Basic usage:
import Highway from '@dogstudio/highway';

const H = new Highway.Core();

This code initializes Highway and sets up the core functionality.

  1. Creating a custom transition:
import Highway from '@dogstudio/highway';

class FadeTransition extends Highway.Transition {
  in({ from, to, done }) {
    from.remove();
    gsap.fromTo(to, { opacity: 0 }, { opacity: 1, duration: 0.5, onComplete: done });
  }

  out({ from, done }) {
    gsap.to(from, { opacity: 0, duration: 0.5, onComplete: done });
  }
}

const H = new Highway.Core({
  transitions: {
    default: FadeTransition
  }
});

This example creates a custom fade transition using GSAP for animation.

  1. Adding event listeners:
import Highway from '@dogstudio/highway';

const H = new Highway.Core();

H.on('NAVIGATE_IN', ({ to, location }) => {
  console.log(`Navigated to: ${location.href}`);
});

This code adds an event listener for the "NAVIGATE_IN" event, which fires when a new page is loaded.

Getting Started

To get started with Highway, follow these steps:

  1. Install Highway using npm:

    npm install @dogstudio/highway
    
  2. Import and initialize Highway in your main JavaScript file:

    import Highway from '@dogstudio/highway';
    
    const H = new Highway.Core();
    
  3. Add the data-router-view attribute to your main content container:

    <main data-router-view="main">
      <!-- Your page content here -->
    </main>
    
  4. Create a basic transition:

    import Highway from '@dogstudio/highway';
    
    class Fade extends Highway.Transition {
      in({ from, to, done }) {
        from.remove();
        to.style.opacity = 0;
        to.style.transition = 'opacity 0.5s';
        setTimeout(() => {
          to.style.opacity = 1;
          done();
        }, 50);
      }
    
      out({ from, done }) {
        from.style.opacity = 0;
        setTimeout(done, 500);
      }
    }
    
    const H = new Highway.Core({
      transitions: {
        default: Fade
      }
    });
    

Now your website is set up with smooth page transitions using Highway!

Competitor Comparisons

🤗 Transformers: the model-definition framework for state-of-the-art machine learning models in text, vision, audio, and multimodal models, for both inference and training.

Pros of Transformers

  • Extensive library of pre-trained models for various NLP tasks
  • Active community with frequent updates and contributions
  • Comprehensive documentation and tutorials

Cons of Transformers

  • Larger codebase and more complex architecture
  • Steeper learning curve for beginners
  • Higher computational requirements for training and inference

Code Comparison

Transformers:

from transformers import pipeline

classifier = pipeline("sentiment-analysis")
result = classifier("I love this product!")[0]
print(f"Label: {result['label']}, Score: {result['score']:.4f}")

Highway:

import highway

model = highway.load("sentiment")
result = model.predict("I love this product!")
print(f"Sentiment: {result.sentiment}, Score: {result.score:.4f}")

The Transformers library offers a more extensive range of models and tasks, while Highway focuses on simplicity and ease of use for specific use cases. Transformers provides greater flexibility and customization options, but Highway may be more suitable for quick implementations or projects with limited resources.

93,668

Tensors and Dynamic neural networks in Python with strong GPU acceleration

Pros of PyTorch

  • Larger community and more extensive documentation
  • Broader range of applications beyond highway networks
  • More frequent updates and active development

Cons of PyTorch

  • Steeper learning curve for beginners
  • Larger codebase, potentially more complex to navigate
  • May include unnecessary features for specific highway network implementations

Code Comparison

Highway:

class Highway(nn.Module):
    def __init__(self, size, num_layers, f):
        super(Highway, self).__init__()
        self.num_layers = num_layers
        self.nonlinear = nn.ModuleList([nn.Linear(size, size) for _ in range(num_layers)])
        self.linear = nn.ModuleList([nn.Linear(size, size) for _ in range(num_layers)])
        self.gate = nn.ModuleList([nn.Linear(size, size) for _ in range(num_layers)])
        self.f = f

PyTorch:

class Linear(Module):
    def __init__(self, in_features: int, out_features: int, bias: bool = True,
                 device=None, dtype=None) -> None:
        factory_kwargs = {'device': device, 'dtype': dtype}
        super().__init__()
        self.in_features = in_features
        self.out_features = out_features
        self.weight = Parameter(torch.empty((out_features, in_features), **factory_kwargs))
        if bias:
            self.bias = Parameter(torch.empty(out_features, **factory_kwargs))
        else:
            self.register_parameter('bias', None)
        self.reset_parameters()
191,921

An Open Source Machine Learning Framework for Everyone

Pros of TensorFlow

  • Extensive ecosystem with robust tools and libraries
  • Strong community support and regular updates
  • Flexible deployment options across various platforms

Cons of TensorFlow

  • Steeper learning curve for beginners
  • Can be resource-intensive for smaller projects
  • More complex setup and configuration

Code Comparison

TensorFlow:

import tensorflow as tf

model = tf.keras.Sequential([
    tf.keras.layers.Dense(64, activation='relu'),
    tf.keras.layers.Dense(10, activation='softmax')
])

Highway:

import torch
import torch.nn as nn

class HighwayLayer(nn.Module):
    def __init__(self, size):
        super(HighwayLayer, self).__init__()
        self.H = nn.Linear(size, size)
        self.T = nn.Linear(size, size)

Summary

TensorFlow is a comprehensive machine learning framework with a vast ecosystem, while Highway appears to be a more specialized project focusing on highway networks in PyTorch. TensorFlow offers more features and broader applicability but may be overkill for simpler tasks. Highway likely provides a more streamlined experience for its specific use case but with less overall functionality and community support compared to TensorFlow.

40,283

DeepSpeed is a deep learning optimization library that makes distributed training and inference easy, efficient, and effective.

Pros of DeepSpeed

  • Offers advanced optimization techniques for large-scale deep learning models
  • Provides extensive documentation and tutorials for ease of use
  • Supports distributed training across multiple GPUs and nodes

Cons of DeepSpeed

  • More complex setup and configuration compared to Highway
  • Steeper learning curve for beginners in deep learning

Code Comparison

DeepSpeed:

import deepspeed
model_engine, optimizer, _, _ = deepspeed.initialize(
    args=args,
    model=model,
    model_parameters=params
)

Highway:

from highway import Highway
model = Highway(input_size, output_size)
output = model(input)

Key Differences

  • DeepSpeed focuses on large-scale model training and optimization
  • Highway is primarily used for creating highway networks in neural architectures
  • DeepSpeed offers more comprehensive features for distributed training
  • Highway is simpler to implement and integrate into existing models

Use Cases

  • DeepSpeed: Training large language models, distributed deep learning
  • Highway: Improving information flow in deep neural networks, creating skip connections

Community and Support

  • DeepSpeed has a larger community and more frequent updates
  • Highway has fewer contributors but is easier to understand and modify

Performance

  • DeepSpeed excels in training efficiency for large models
  • Highway can improve model convergence in certain architectures
14,559

Distributed training framework for TensorFlow, Keras, PyTorch, and Apache MXNet.

Pros of Horovod

  • Designed for distributed deep learning, supporting multiple frameworks (TensorFlow, PyTorch, MXNet)
  • Highly scalable, with efficient performance on large clusters and GPUs
  • Active development and support from a large community

Cons of Horovod

  • Steeper learning curve, especially for those new to distributed training
  • Requires additional setup and configuration compared to simpler libraries

Code Comparison

Highway (simplified usage):

from highway import Highway

highway = Highway(input_size, num_layers)
output = highway(input_tensor)

Horovod (basic example):

import horovod.tensorflow as hvd

hvd.init()
config = tf.ConfigProto()
config.gpu_options.visible_device_list = str(hvd.local_rank())

Highway focuses on providing a simple implementation of highway networks, while Horovod is a comprehensive distributed deep learning framework. Highway is more suitable for quick experimentation with highway networks, whereas Horovod is designed for large-scale, distributed training across multiple GPUs and nodes.

8,812

A PyTorch Extension: Tools for easy mixed precision and distributed training in Pytorch

Pros of Apex

  • Offers advanced mixed precision training techniques for faster and more memory-efficient deep learning
  • Provides CUDA-aware PyTorch extensions for optimized GPU performance
  • Supports a wider range of NVIDIA GPUs and has more extensive documentation

Cons of Apex

  • More complex setup and installation process
  • Requires NVIDIA GPUs, limiting its use on other hardware
  • Steeper learning curve for beginners due to its advanced features

Code Comparison

Apex example:

model, optimizer = amp.initialize(model, optimizer, opt_level="O1")
with amp.scale_loss(loss, optimizer) as scaled_loss:
    scaled_loss.backward()

Highway example:

model = Highway(input_size, num_layers)
output = model(input_tensor)

Key Differences

  • Apex focuses on mixed precision training and CUDA optimizations, while Highway is a specific neural network architecture
  • Apex is more comprehensive and feature-rich, whereas Highway is simpler and more focused
  • Apex requires NVIDIA GPUs, while Highway can run on various hardware platforms

Use Cases

  • Apex: Large-scale deep learning projects requiring optimized performance on NVIDIA GPUs
  • Highway: Projects needing a specific network architecture for improved information flow, especially in natural language processing tasks

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Highway

npm npm GitHub issues bundlephobia NpmLicense


⚠️ ⚠️ ⚠️

This repository is no longer maintained.
The v2.2.1 release will be the last one and no more updates will be done on Highway from now on.

Thanks to all the contributors, maintainers and to the community that motivated us to make Highway one of the best transition manager so far. Highway and its Slack will remain available. As long as the community keeps enjoying the library in its current state, there is no reasons for us to archive the repository.

⚠️ ⚠️ ⚠️


Banner

Highway is a lightweight (2.5ko compressed & gzipped), robust, modern and flexible library that will let us create AJAX navigations with beautiful transitions on our websites. It's been a while we were trying to build this kind of library to fits our needs at Dogstudio and we now finally released it!

Banner

Table of Content

Browser Support

Highway is supported by all recent major versions of the following modern browsers.

  • Google Chrome
  • Firefox
  • Edge
  • Safari

With polyfills

Older browsers or versions can be supported by Highway by combining it with polyfills. Please follow this example to have more information. Once the polyfills are configured, Highway should be working on most of the browsers and versions. However, be aware that the oldest browsers or versions might still be unsupported. So, be reasonable before opening an issue...

  • Google Chrome
  • Firefox
  • Edge
  • Safari
  • Internet Explorer 11

Roadmap

  • More Unit Tests
  • More Examples
  • More Demos

Releases

2.2.x

  • :lock: Update dependencies for security purposes
  • :tada: Add new websites in the Hall of Fame
  • :tada: Add Polyfills example to documentation
  • :sparkles: Reduce bundle size significantly with microbundle
  • :art: Update browser support in documentation
  • :art: Update browser support in README.md
  • :bug: Fix Slack URL in documentation
  • :bug: Fix Slack URL in README.md
  • :bug: Fix #77

2.1.x

  • :lock: Update dependencies for security purposes
  • :tada: Add trigger information in transitions and events
  • :tada: Add contextual transitions
  • :tada: Add overlapping transitions
  • :sparkles: Add Prefetch example to documentation
  • :sparkles: Improve transitions and events parameters for destructuring
  • :sparkles: Improve documentation website
  • :sparkles: Improve Core.redirect(href, transition) method
  • :sparkles: Improve Core.attach(links) method
  • :sparkles: Improve Core.detach(links) method
  • :art: Invert from and to parameters of the NAVIGATE_END event
  • :bug: Fix issue #44

2.0.x

  • :tada: Add documentation website
  • :tada: Add Core.redirect(href) method
  • :tada: Add dynamic import for renderers
  • :art: Update informations sent with events
  • :art: Rename Core.bind() into Core.attach()
  • :art: Rename Core.unbind() into Core.dettach()
  • :art: Rename Renderer.root into Renderer.view
  • :art: Replace Renderer.page by Renderer.properties
  • :bug: Fix pushState location in the process
  • :bug: Fix CMD/CTRL + click behavior of browsers
  • :bug: Fix NAVIGATE_IN event that was fired too early
  • :bug: Fix the view swapping that causes so issues
  • :bug: Fix page caching with queries
  • :bug: Fix issue #9
  • :bug: Fix issue #12
  • :sparkles: Improve overall code
  • :fire: Remove NAVIGATE_ERROR event
  • :fire: Clean up README.md

1.3.x

  • :tada: Add ES5 version in dist/es5 folder
  • :tada: Add the Basic Anchor example
  • :tada: Add the Basic Polyfill example
  • :tada: Add unit tests
  • :fire: Remove modes that weren't convincing
  • :sparkles: Improve code and weight with ES2016+ features
  • :sparkles: Improve events
  • :sparkles: Improve transitions
  • :sparkles: Improve documentation
  • :art: Rename renderers init method to setup method
  • :bug: Quick fix for URLs with parameters
  • :bug: Fix events
  • :bug: Fix helpers
  • :bug: Skip link with javascript: in href

1.2.x

  • :tada: Add NAVIGATE_CALL, NAVIGATE_IN, NAVIGATE_OUT events
  • :tada: Add more variables available in Highway.Renderer
  • :sparkles: Improve renderers
  • :sparkles: Improve documentation

1.1.x

  • :tada: Add modes
  • :sparkles: Improve documentation

1.0.x

  • :tada: Add Highway.Transition

0.0.x

  • :rocket: First release

Contributors


Anthony Du Pont

💬 💻 📖
🤔 🚧 👀

ThaoD5

💬 💻 📖
🤔 🚧 👀

Josh Kirk

💻 📖 🤔
🚧

Mike Wagz

📖 🚇


Suyash Purwar

💻 🐛


Davide Lanfranchi

🖋


Fabio Quarantini

💻 🐛


Quentin Neyraud

💻 🐛


Harvey Zack

💻


Stijn de Jong

💻 🐛

License

See the LICENSE file for license rights and limitations (MIT).

NPM DownloadsLast 30 Days