Code Monkey home page Code Monkey logo

devbanner_frontend's Introduction

UPDATE

Before you build the project, you must edit the launchSettings.json file under devRantBanner/Properties.


Create your own banner now! https://devbanner.center


About

devBanner is a collaboration project first started in devRant. It's aimed at creating personalized banners for everyone without using photo manipulation software. It currently creates personalized banners including your own subtext for devRant members using the devRant API.

Current Features

  • Your own subtext. You can write some lengthy subtext as well!
  • Lightweight. Almost all banners are under 500KB, so no problem downloading and using anywhere!
  • Banner size selection (width)

Upcoming Features

  • Ability to edit banner component styles (position, font, colors)
  • Social media export
  • Improved banner designs
  • Wallpaper support

I want one!

Looks like you are interested in creating your own banner, aren't you?

Well, it is easier than you think.

  1. Open up your FAVORITE browser.
  2. Head up to https://devbanner.center .
  3. You will be greeted by the new beautiful, colorful frontend by Skayo.
  4. Fill in the form. You just have to type your devRant username and your own subtext. You can even write some nerd-y subtexts. (But we don't support xalgo..... Sorry)
  5. After a few seconds, the generated banner will appear below. Press the download button. (In older browsers, it may open in another tab. To save, right-click and click Save As... button)
  6. Use it everywhere!

(Based on the frontend in 10th Jan 2018)

(Non-paid) Hire

We are looking for a front-end developer who can improve the overall designs and responsibility of our current frontend. Please join the Gitter Chat by clicking the Chat on Gitter button above.

Useful Links

https://devbanner.center - Create your own devRant banner here
https://github.com/devBanner/devBanner_Frontend - Front-end development repository
https://github.com/devBanner/devBanner - Back-end development repository
https://gitter.im/devbanner/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link - Gitter chat
[email protected] - Contact me directly

Credits (Back-end)

  • Contributors

  • devRant API

  • And many others who provides suggestions. Thanks!

License (GPL 3.0)

    Create your own devRant Banner
    
    Copyright (C) 2017-2018 The devBanner Project

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.

Different implementations by other people

https://gist.github.com/alberto98fx/f90d29cfaf8013aa0de44e7dbe6e6fef - JS with Canvas

devbanner_frontend's People

Contributors

cozyplanes avatar ewpratten avatar jonasgeiler avatar kimmax avatar logans1 avatar mitch528 avatar r15ch13 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

devbanner_frontend's Issues

Generating Feedback

We need to show the user that the image is loading. Currently, the generate button is pressed, and then behind the scenes the "banner" img's src is being changed, which leaves the image remaining the same until the server responds. Maybe we can change to:

  1. example banner is deleted
  2. a loading img is displayed in place of example banner
  3. create new img
  4. set its src to server query
  5. place it off the page (or just invisible)
  6. test every 1/2 second(?)
  7. when naturalwidth/height are no longer zero replace loading img

Is there any better ways of doing this?

Only allow specific characters in subtext

Is there a way to prevent creating the banner when any character not included in Comfortaa is being used?
This are the characters included in Comfortaa:

A​‌B​‌C​‌Č​‌Ć​‌D​‌Đ​‌E​‌F​‌G​‌H​‌I​‌J​‌K​‌L​‌M​‌N​‌O​‌P​‌Q​‌R​‌S​‌Š​‌T​‌U​‌V​‌W​‌X​‌Y​‌Z​‌Ž​‌a​‌b​‌c​‌č​‌ć​‌d​‌đ​‌e​‌f​‌g​‌h​‌i​‌j​‌k​‌l​‌m​‌n​‌o​‌p​‌q​‌r​‌s​‌š​‌t​‌u​‌v​‌w​‌x​‌y​‌z​‌ž​‌А​‌Б​‌В​‌Г​‌Ґ​‌Д​‌Ђ​‌Е​‌Ё​‌Є​‌Ж​‌З​‌Ѕ​‌И​‌І​‌Ї​‌Й​‌Ј​‌К​‌Л​‌Љ​‌М​‌Н​‌Њ​‌О​‌П​‌Р​‌С​‌Т​‌Ћ​‌У​‌Ў​‌Ф​‌Х​‌Ц​‌Ч​‌Џ​‌Ш​‌Щ​‌Ъ​‌Ы​‌Ь​‌Э​‌Ю​‌Я​‌а​‌б​‌в​‌г​‌ґ​‌д​‌ђ​‌е​‌ё​‌є​‌ж​‌з​‌ѕ​‌и​‌і​‌ї​‌й​‌ј​‌к​‌л​‌љ​‌м​‌н​‌њ​‌о​‌п​‌р​‌с​‌т​‌ћ​‌у​‌ў​‌ф​‌х​‌ц​‌ч​‌џ​‌ш​‌щ​‌ъ​‌ы​‌ь​‌э​‌ю​‌я​‌Α​‌Β​‌Γ​‌Δ​‌Ε​‌Ζ​‌Η​‌Θ​‌Ι​‌Κ​‌Λ​‌Μ​‌Ν​‌Ξ​‌Ο​‌Π​‌Ρ​‌Σ​‌Τ​‌Υ​‌Φ​‌Χ​‌Ψ​‌Ω​‌α​‌β​‌γ​‌δ​‌ε​‌ζ​‌η​‌θ​‌ι​‌κ​‌λ​‌μ​‌ν​‌ξ​‌ο​‌π​‌ρ​‌σ​‌τ​‌υ​‌φ​‌χ​‌ψ​‌ω​‌Ă​‌Â​‌Ê​‌Ô​‌Ơ​‌Ư​‌ă​‌â​‌ê​‌ô​‌ơ​‌ư​‌1​‌2​‌3​‌4​‌5​‌6​‌7​‌8​‌9​‌0​‌‘​‌?​‌’​‌“​‌!​‌”​‌(​‌%​‌)​‌[​‌#​‌]​‌{​‌@​‌}​‌/​‌&​‌\​‌<​‌-​‌+​‌÷​‌×​‌=​‌>​‌®​‌©​‌$​‌€​‌£​‌¥​‌¢​‌:​‌;​‌,​‌.​‌*

If this isn't possible in the html / js , I should implement somehow in the backend

@skayo @Kimmax

Exception handling should show the exception that is thrown out by server

Currently, the exception shown in the frontend is Cannot generate banner. Username correct?

However, you can't generate banner if there is no avatar.
Generating a banner with an account without avatar throws this exception. Could not find avatar for USERNAME_HERE

Is there a way to display the server thrown exception in the frontend?

If you can create an awesome logo, please make a PR!

Please make a PR or contact us at : [email protected]


Hey @devBanner/frontend Team!
We need a logo for this project. I thought about something like the devRant logo (No copy-pasta please), something that seems familiar, but is still our own.
You're the design gurus of course, if you think you have a better idea - no problem!
Looking forward to see your ideas :)

Problems with subtext right padding

In the image below:

"This is a long text that apparently hit the right border of banner and it just looks ugly given that the image on the left has quite some padding from the left border!"

image

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.