2014-11-18 22:15:01 +01:00
<!doctype html>
< html >
< head >
2016-01-16 12:14:03 +01:00
< title > Programming Fonts - Test Drive< / title >
2014-11-20 20:54:20 +01:00
< meta charset = "utf-8" / >
2014-11-20 20:50:03 +01:00
< meta name = "viewport" content = "width=device-width" / >
2014-11-18 22:15:01 +01:00
2014-11-19 09:41:29 +01:00
<!-- Favicons -->
< link rel = "apple-touch-icon" sizes = "57x57" href = "favicons/apple-touch-icon-57x57.png" >
< link rel = "apple-touch-icon" sizes = "114x114" href = "favicons/apple-touch-icon-114x114.png" >
< link rel = "apple-touch-icon" sizes = "72x72" href = "favicons/apple-touch-icon-72x72.png" >
< link rel = "apple-touch-icon" sizes = "144x144" href = "favicons/apple-touch-icon-144x144.png" >
< link rel = "apple-touch-icon" sizes = "60x60" href = "favicons/apple-touch-icon-60x60.png" >
< link rel = "apple-touch-icon" sizes = "120x120" href = "favicons/apple-touch-icon-120x120.png" >
< link rel = "apple-touch-icon" sizes = "76x76" href = "favicons/apple-touch-icon-76x76.png" >
< link rel = "apple-touch-icon" sizes = "152x152" href = "favicons/apple-touch-icon-152x152.png" >
< link rel = "apple-touch-icon" sizes = "180x180" href = "favicons/apple-touch-icon-180x180.png" >
< link rel = "icon" type = "image/png" href = "favicons/favicon-192x192.png" sizes = "192x192" >
< link rel = "icon" type = "image/png" href = "favicons/favicon-160x160.png" sizes = "160x160" >
< link rel = "icon" type = "image/png" href = "favicons/favicon-96x96.png" sizes = "96x96" >
< link rel = "icon" type = "image/png" href = "favicons/favicon-16x16.png" sizes = "16x16" >
< link rel = "icon" type = "image/png" href = "favicons/favicon-32x32.png" sizes = "32x32" >
< meta name = "msapplication-TileColor" content = "#5b6268" >
< meta name = "msapplication-TileImage" content = "favicons/mstile-144x144.png" >
2014-11-18 22:15:01 +01:00
<!-- YUI reset -->
< link rel = "stylesheet" type = "text/css" href = "http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css" >
2014-11-19 09:41:29 +01:00
<!-- CodeMirror -->
2014-11-18 22:19:59 +01:00
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/codemirror.min.css" >
2014-11-19 09:41:29 +01:00
<!-- CodeMirror Themes -->
2014-11-18 22:15:01 +01:00
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/3024-day.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/3024-night.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/ambiance.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/base16-dark.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/base16-light.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/blackboard.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/cobalt.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/eclipse.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/elegant.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/erlang-dark.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/lesser-dark.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/mbo.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/mdn-like.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/midnight.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/monokai.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/neat.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/neo.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/night.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/paraiso-dark.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/paraiso-light.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/pastel-on-dark.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/rubyblue.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/solarized.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/the-matrix.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/tomorrow-night-eighties.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/twilight.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/vibrant-ink.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/xq-dark.min.css" >
< link rel = "stylesheet" href = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/theme/xq-light.min.css" >
<!-- CodeMirror JS -->
< script src = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/codemirror.min.js" > < / script >
< script src = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/mode/javascript/javascript.min.js" > < / script >
< script src = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/addon/selection/active-line.min.js" > < / script >
< script src = "//cdnjs.cloudflare.com/ajax/libs/codemirror/4.7.0/addon/edit/matchbrackets.min.js" > < / script >
<!-- ProgrammingFonts @font - faces -->
<!-- Compiled (using less on node) with "lessc fonts.less > stylesheet.css" -->
2014-11-18 23:28:58 +01:00
< link rel = "stylesheet" href = "fonts/stylesheets/stylesheet.css" >
2016-01-16 17:32:03 +01:00
< link href = "//cloud.webtype.com/css/7e544c5e-55dc-4b41-a8d3-c13f7e0a13d3.css" rel = "stylesheet" type = "text/css" / >
2016-01-16 12:14:03 +01:00
< link href = 'http://fonts.googleapis.com/css?family=Lato:400,700' rel = 'stylesheet' type = 'text/css' >
2014-11-18 22:37:57 +01:00
2014-11-18 22:15:01 +01:00
<!-- Google/Typekit Web Font Loader: https://github.com/typekit/webfontloader -->
< script src = "//ajax.googleapis.com/ajax/libs/webfont/1.5.6/webfont.js" > < / script >
< style type = "text/css" >
2016-01-16 12:14:03 +01:00
html {
min-height: 100%;
2016-01-16 17:52:30 +01:00
background: #F5F0E6;
2016-01-16 12:14:03 +01:00
}
2014-11-18 23:23:15 +01:00
body {
2016-01-16 12:14:03 +01:00
color:#444;
font-family: "Lato", sans-serif;
2014-11-18 23:23:15 +01:00
font-size: 16px;
line-height: 2;
}
2016-01-16 17:32:03 +01:00
h1 {
font-family: 'Input Mono', serif;
font-weight: bold;
font-size: 64px;
line-height: 64px;
2016-02-29 22:39:46 +01:00
margin: 0 0 16px 0;
2016-01-16 17:32:03 +01:00
text-align: center;
padding-top: 64px;
}
2016-02-29 22:39:46 +01:00
h1 + p {
2016-01-16 17:32:03 +01:00
font-weight: bold;
text-align: center;
2016-02-29 22:39:46 +01:00
margin: 0 0 48px 0;
2016-01-16 17:32:03 +01:00
font-size: 20px;
}
article {
max-width: 90%;
width: 800px;
margin: 0 auto;
margin-bottom: 64px;
background: white;
border: 0;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
2016-02-29 22:39:46 +01:00
article p {
2016-01-16 17:32:03 +01:00
text-align: center;
padding: 0 32px 16px 32px;
}
article p:last-child {
2016-02-29 22:39:46 +01:00
padding-bottom: 36px;
}
#font-info p {
display: none;
padding-bottom: 36px;
2016-01-16 17:32:03 +01:00
}
article form {
margin-bottom: 32px;
}
select {
margin-right: 32px;
}
footer {
max-width: 90%;
width: 800px;
text-align: center;
margin: 64px auto;
}
footer form {
margin-top: 8px;
}
a,
a:link,
a:visited,
a:hover {
color: #44cc9a;
text-decoration: none;
}
a:hover {
opacity: .8;
transition: opacity .5s;
}
pre,
textarea,
.CodeMirror {
font-family: "Input Mono";
}
.CodeMirror {
border: none;
font-size:16px;
background: transparent;
box-shadow: none !important;
}
.CodeMirror-gutters {
background: transparent;
}
@media screen and (max-width:800px) {
.select {
display: block;
text-align: right;
margin: 0;
2014-11-20 20:50:03 +01:00
}
2016-01-16 17:32:03 +01:00
}
@media screen and (max-width:640px) {
h1 {
font-size: 48px;
line-height: 48px;
padding-top: 48px;
margin-bottom: 48px;
}
}
2014-11-18 22:15:01 +01:00
< / style >
< / head >
< body >
< div class = "background" > < / div >
2016-01-16 12:14:03 +01:00
< h1 > Programming Fonts Tester< / h1 >
2014-11-18 23:23:15 +01:00
2016-01-16 12:14:03 +01:00
< p class = "description" > What font looks best? Try over 40 free programming fonts and find out!< / p >
2014-11-18 23:23:15 +01:00
2014-11-18 22:15:01 +01:00
< article >
< form >
< textarea id = "code" name = "code" >
2014-11-19 08:49:20 +01:00
# Type some code:
2014-11-18 22:15:01 +01:00
function findSequence(goal) {
function find(start, history) {
if (start == goal)
return history;
else if (start > goal)
return null;
else
2016-02-29 22:39:46 +01:00
return find(start + 9, "(" + history + " + 9)") ||
2014-11-18 22:15:01 +01:00
find(start * 3, "(" + history + " * 3)");
}
2016-02-29 22:39:46 +01:00
return find(1, "I");
2014-11-23 21:02:38 +01:00
}
< / textarea >
2014-11-18 22:15:01 +01:00
< / form >
2014-11-18 23:23:15 +01:00
< p > < span class = "select" > Select a theme
2014-11-18 22:15:01 +01:00
< select onchange = "selectTheme()" id = "select" >
< option > 3024-day< / option >
< option > 3024-night< / option >
< option > ambiance< / option >
< option > base16-dark< / option >
< option > base16-light< / option >
< option > blackboard< / option >
< option > cobalt< / option >
< option > eclipse< / option >
< option > elegant< / option >
< option > erlang-dark< / option >
< option > lesser-dark< / option >
< option > mbo< / option >
< option > mdn-like< / option >
< option > midnight< / option >
2014-11-18 23:23:15 +01:00
< option selected > monokai< / option >
2014-11-18 22:15:01 +01:00
< option > neat< / option >
< option > neo< / option >
< option > night< / option >
< option > paraiso-dark< / option >
< option > paraiso-light< / option >
< option > pastel-on-dark< / option >
< option > rubyblue< / option >
< option > solarized dark< / option >
< option > solarized light< / option >
< option > the-matrix< / option >
< option > tomorrow-night-eighties< / option >
< option > twilight< / option >
< option > vibrant-ink< / option >
< option > xq-dark< / option >
< option > xq-light< / option >
2014-11-18 23:23:15 +01:00
< / select > < / span >
< span class = "select" > Select a font < select onchange = "selectFont()" id = "select-font" >
2016-02-29 22:39:46 +01:00
<!-- filled from json -->
2014-11-18 23:23:15 +01:00
< / select > < / span >
2014-11-18 22:15:01 +01:00
< / p >
2016-02-29 22:39:46 +01:00
< dix id = "font-info" > < / dix >
2014-11-18 22:15:01 +01:00
2014-11-20 20:42:48 +01:00
< / article >
< footer >
2016-02-29 22:39:46 +01:00
< p > < a href = "http://programmingfonts.org/list" rel = "external" > Download your favourite fonts< / a > , or use < a href = "http://atom.io/packages/fonts" rel = "external" > this package< / a > in < a href = "http://atom.io" > Atom< / a > < / p >
2014-11-20 20:42:48 +01:00
< p >
2016-01-16 12:14:03 +01:00
Contribute on < a href = "https://github.com/braver/programmingfonts" > Github< / a >
2014-11-20 20:42:48 +01:00
< / p >
< p >
2016-01-16 12:14:03 +01:00
< a href = "http://programmingfonts.org" > Back to the blog< / a > - © 2016 < a href = "http://koenlageveen.nl" > Koen Lageveen< / a >
2014-11-20 20:42:48 +01:00
< p >
< / footer >
2014-11-18 22:15:01 +01:00
2016-02-29 15:44:56 +01:00
<!-- Some jquery to make life easier -->
2014-11-20 20:42:48 +01:00
< script src = "http://code.jquery.com/jquery-2.1.1.min.js" > < / script >
2014-11-18 22:15:01 +01:00
<!-- The business -->
< script >
// CodeMirror
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
styleActiveLine: true,
2014-11-18 23:23:15 +01:00
matchBrackets: true,
theme: "monokai"
2014-11-18 22:15:01 +01:00
});
// CodeMirror theme selector
var input = document.getElementById("select");
function selectTheme() {
var theme = input.options[input.selectedIndex].innerHTML;
editor.setOption("theme", theme);
}
var choice = document.location.search & &
2016-02-29 22:39:46 +01:00
decodeURIComponent(document.location.search.slice(1));
2014-11-18 22:15:01 +01:00
if (choice) {
input.value = choice;
editor.setOption("theme", choice);
}
// ProgrammingFonts font selector
function selectFont() {
var font = $("#select-font").val();
2016-02-29 22:48:24 +01:00
if (font === "input") {
2016-03-01 09:46:50 +01:00
$("pre").css({ fontFamily: "Input Mono" });
$("textarea").css({ fontFamily: "Input Mono" });
$(".CodeMirror").css({ fontFamily: "Input Mono" });
2016-02-29 22:48:24 +01:00
} else {
2016-03-01 09:46:50 +01:00
$("pre").css({ fontFamily: font });
$("textarea").css({ fontFamily: font });
$(".CodeMirror").css({ fontFamily: font });
2016-02-29 22:48:24 +01:00
}
2014-11-18 22:15:01 +01:00
2016-02-29 22:39:46 +01:00
$("#font-info p").hide();
$("." + font).show();
2014-11-18 22:15:01 +01:00
}
$(document).ready(function(){
2016-02-29 22:39:46 +01:00
var font_aliases = [];
$.getJSON("fonts.json", function(data) {
$.each(data, function(k,v) {
font_aliases.push(v.alias);
$("#select-font").append("< option value = \"" + v . alias + " \ " > " + v.name + "< / option > ");
$("#font-info").append(
"< p class = \"" + v . alias + " \ " > " + v.name +
" - " + v.author +
" (" + v.year + ")" +
"< br > < a href = \""+ v . website + " \ " rel = \"external\" > " + v.website + "< / a > " +
"< / p > "
);
});
// configure the webfont loader
WebFont.load({
custom: { families: font_aliases }
});
$("#select-font").val('input'); // default to this awesome font
selectFont();
});
2014-11-18 22:15:01 +01:00
});
2014-11-19 09:41:29 +01:00
// Google Analytics
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-56825926-1', 'auto');
ga('send', 'pageview');
2014-11-19 23:01:41 +01:00
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-56825926-1']);
2014-11-20 20:42:48 +01:00
_gaq.push(['_setDomainName', 'programmingfonts.org']);
2014-11-19 23:01:41 +01:00
_gaq.push(['_trackPageview']);
2014-11-18 22:15:01 +01:00
< / script >
2014-11-19 09:41:29 +01:00
2014-11-18 22:15:01 +01:00
< / body >
2014-11-18 22:04:07 +01:00
< / html >