Giter VIP home page Giter VIP logo

fontah's Introduction

Font-ah!

Quickly prototype a text using random settings. Use it to find a font/color/size combination for a text in a single place, with a little help from... fate.

Just:

  • enter the text
  • use the buttons in the header to change colors, size and typeface
  • copy font and color params from the footer
  • send the link and share changes in realtime

Supported fonts sources:

  • Google Fonts (downloaded locally to avoid sharing API-KEY)
  • Typekit
  • other sources? Issue please!

How it's made

Made with hyperapp, V2 branch.

What's next

Here are some idea on how to improve the project:

  • increase/decrease font size instead of random size
  • use hyperapp subscriptions for saving on Firebase
  • mobile-friendly (more or less)
  • share your work (url) and collaborate with a unique link (Firebase backed)
  • notify page viewers
  • Work without firebase backend in case of quota expiration -- Let's see if it works
  • error management on effects (firebase quota, font load failure) -- Let's see if it works
  • tune firestore settings
  • upvote combination
  • bookmarks, w/ local storage persistence
  • combinations history
  • copy css
  • use hyperapp subscriptions for media-change in JS
  • PWA
  • couchdb backend?

How to run it locally

Clone the repo:

git clone https://github.com/ddmng/fontah.git
cd fontah/

File src/fbconfig.js contains the Firebase API key, in order to save the application state. You can find yours in your Firebase console.

If you can't setup Firebase, use the nobackend tag that does not have the "share" feature.

Build it:

npm run build

Then serve it:

npm start

fontah's People

Contributors

ddmng avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

fontah's Issues

Add list of viewers for current page

There should be a small list (on the right-hand side?) containing the users that are currently looking at the page. See if firebase provides something or find a way with timers and raw JS backed by a Firebase collection.

No page reload on hash change

If you manually enter a page hash, the page is not reloaded until you forcefully reload it by F5 or pressing enter twice on the URL.

There should be a unmanaged event HashChange issued in this case

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.