Skip to content

Latest commit

 

History

History
525 lines (433 loc) · 17.9 KB

README.md

File metadata and controls

525 lines (433 loc) · 17.9 KB
Raw





Hi


  • badge 2 'type:web-app'
  • badge 2 'birth:Date()'
  • badge 2 'name:badge for git(hub)'
  • badge 2 'support:all modern browsers'


prerequisite

⚪ create ⚫ prerequisite ⚪ how-to ⚪ feature ⚪ troubleshooting ⚪ color-guide ⚪ dynamic-version ⚪ bottom ⚪ top


should have:

  1. A font of monospace family. Default is: 'DejaVu Sans Mono', 'Source code variable', monospace
  2. Modern Browsers which can support SVG and CSS Animation, also copy to clipboard

assumption:

  1. You are familiar with Terminal and with basic commands like: ls, cd, cat, etc.
  2. You know how to use/apply colors in Hex value like: #CB0000 or #434343

if:

  1. you are a user/member of Stack-overflow then first visit: badge-for-stackoverflow
  2. you are not familiar with Hex Color then read the color-guide at the bottom or just visit w3schools-color-reference
  3. you have any questions, suggestions, ideas, doubts, critical they are welcome :) raise an issue


how to

⚪ create ⚪ prerequisite ⚫ how-to ⚪ feature ⚪ troubleshooting ⚪ color-guide ⚪ dynamic-version ⚪ bottom ⚪ top


You will open the app, try generating a badge based on a style that is available and its command. For example:

  • badge 10 "made-with:for-you"

based on style 10 will generate a SVG file and you will see it on the screen as well. Meanwhile the last SVG file you have created, its source-code will be copied to your clipboard and that is it. It is ready to use. Then you can go to your own repository and create a new file with svg extension. like: for-you.svg Paste the code there and save it. It is ready to use on/in your README.md file.

step 1 generate code:


step 2 create new file:


step 3 commit new file:


step 4 (optional) click on the SVG file:


step 5 copy its link:


step 6 add that link into your README file:


and here is the result:



feature

⚪ create ⚪ prerequisite ⚪ hoe-to ⚫ feature ⚪ troubleshooting ⚪ color-guide ⚪ dynamic-version ⚪ bottom ⚪ top


  • diversity
  • speed (= fast and straightforward SVG generation) try badge 1..10 "bfg:bfg"
  • simplicity (= based on constant-width font, so no <scale>, <transform>, <textLength>, <rotate> )
  • 0% mouse requirement
  • auto-copy source-code to your clipboard
  • log everything to console (for developers)
  • unlimited/flexible suffix repetition (regular or empty)
  • unlimited/flexible change-size
  • unrestricted background/foreground-color
  • prefix/suffix separation for make it even more beautiful
  • unlimited new ideas (you can create your own style just by adding a single function in JS)

Why is that?

In January 18th 2018 in the shields.io chat-room

Hi. Is there any one help me about dynamic badge? I always get: invalid resource ...


diversity


style command result suffix-repetition separation
1 badge 1 "prefix:suffix ✔ ✔
2 badge 2 "prefix:suffix ✕ ✕
3 badge 3 "prefix:suffix ✔ ✔
4 badge 4 "prefix:suffix ✕ ✕
5 badge 5 "prefix:suffix ✔ ✔
6 badge 6 "prefix:suffix ✔ ✔
7 badge 7 "prefix:suffix ✔ ✔
8 badge 8 "prefix:suffix ✔ ✔
9 badge 9 "prefix:suffix ✔ ✔
10 badge 10 "prefix:suffix ✕ ✕

unlimited/flexible suffix repetition (regular or empty)


  • badge 9 'one:two:three:four:five:six:seven:eight:nine:ten'
  • badge 9 'one::two::three::four::five'
  • badge 9 '::::::::::::::::::::'
  • 'DLM=10'
  • badge 9 '::::::::::::::::::::'

unlimited/flexible change-size


  • bfs 5
  • badge 10 'made-with:for-you'
  • bfs 99
  • badge 10 'made-with:for-you'

unrestricted background/foreground-color


  • badge 3 '#CB0000:#434343' #CB0000:#434343
  • BTC=#FF0
  • badge 3 '#CB0000:#434343:and text color is #FF0'

prefix/suffix separation


  • for styles: 1, 3, 5, 6, 7, 8, and 9
  • DLM=5
  • badge 5 'platfrom:Linux:Windows:Mac'
  • DLM=30
  • badge 5 'platfrom:Linux:Windows:Mac'
  • DLM=10
  • badge 9 'do::::::you::::::like::::::this'
  • DLM=5
  • badge 8 'do::::::you::::::like::::::this'

theme


Github (default)

  • theme G
  • badge 5 'theme:G:github'

Stack-overflow

  • theme S
  • badge 5 'theme:S:stack-overflow'

Twitter

  • theme T
  • badge 5 'theme:T:twitter'

Facebook

  • theme F
  • badge 5 'theme:F:facebook'


troubleshooting

⚪ create ⚪ prerequisite ⚪ hoe-to ⚪ feature ⚫ troubleshooting ⚪ color-guide ⚪ dynamic-version ⚪ bottom ⚪ top


old browser

  • if the code is NOT copied to your clipboard, then use shc command (= show-clipboard) it appears at the top-right corner
  • if you want to see the source-code, hit alt-v (= verbose) and then open your console (in you browser). source-code is logged there

inaccurate result

  • run df command and you should get a nice and clean output (not messy)
  • make sure you have the correct font, see the prerequisite section above
  • hit alt-l and open your console (in browser) and see if everything is logged appropriately or not
  • do NOT zoom in/out, instead use fs (= font-size) and bfs (= badge-font-size) commands
  • change your browser. Different browsers handle character height/width differently.

funky mouse movement

  • change your browser. Different browsers handle character height/width differently.


color guide

⚪ create ⚪ prerequisite ⚪ hoe-to ⚪ feature ⚪ troubleshooting ⚫ color-guide ⚪ dynamic-version ⚪ bottom ⚪ top


This is a very compact and brief tutorial that you can quickly learn and memorize hex-color-value important:

  1. do NOT think of these values (e.g #FF0000) as a single number or single quantity
  2. ignore the leading symbol #. It is not important
  3. separate them in your mind and when you see #FF0000, think about FF, 00 and 00

Now, since we can represent any colors by mixing the red, green and blue color, each of this value is for representing one of these main color.

  • FF,__,__ is for representing color or in binary 11111111,00000000,00000000 or in decimal 255,0,0
  • __,FF,__ is for representing color or in binary 00000000,11111111,00000000 or in decimal 0,255,0
  • __,__,FF is for representing color or in binary 00000000,00000000,11111111 of in decimal 0,0,255

You should (have to) memorize these three colors and the position of each, which comes in this order:

  • red,green,blue or FF,FF,FF or 255,255,255

Now instead of trying to memorize a number from 0 to 255 or to FF, divide 255 by 25 which we get 11 values and then we can memorize these, easily. Here is a table and these 11 values which I memorized them. Even if you forgot them you can use the hex value equivalent of

  • (decimal) 0, 25, 50, 75, 100, 125, 150, 175, 200, 225 and 250 which we can round it up to 255 which can be
  • (hex ) 0, 19, 32, 4B, 64, 7D, 96, AF, C8, E1 and FA which we can round it up to FF

Now it is easier to memorize these eleven, other than 255 values (e.g 0 to 255).

  • need bright red, use FF
  • need dark red use C8 or AF

hex (= decimal) red: #XX0000 green: #00XX00 blue: #0000XX mix: #XXXXXX
0 (= 0)
19 (= 25)
32 (= 50)
4B (= 75)
64 (= 100)
7D (= 125)
96 (= 150)
AF (= 175)
C8 (= 200)
E1 (= 225)
FF (= 255)

Even if these 11 values seem hard for you can divide 256 by 64 and only memorize 5 numbers

  • (decimal) 0, 64, 128, 192, 255
  • (hex ) 0, 40, 80, C0, FF

if you are wonder/curious about other colors like yellow and orange, they are just created by combing these three red, green and blue

  • yellow: full-red and full-green = #FFFF00
  • cyan: full-green and full-blue = #00FFFF
  • purple: full-red and full-blue = #FF00FF
  • orange: full-red and half-green = #FF8000 (= FF and 80 and 00) or (= 255, 128, 0)



dynamic-version

⚪ create ⚪ prerequisite ⚪ hoe-to ⚪ feature ⚪ troubleshooting ⚪ color-guide ⚫ dynamic-version ⚪ bottom ⚪ top




license

⚪ create ⚪ prerequisite ⚪ hoe-to ⚪ feature ⚪ troubleshooting ⚪ color-guide ⚪ dynamic-version ⚫ bottom ⚪ top

badge-for-git copyright © 2018 Shakiba

▒█▀▄▀█ ▀█▀ ▀▀█▀▀
▒█▒█▒█ ▒█░ ░▒█░░
▒█░░▒█ ▄█▄ ░▒█░░