Great idea! I took it and implemented it, now there is a toggle button to turn on “Blind Mode”
Try it out!
573 karma · joined December 5, 2014
Try it out!
I rely heavily on good search in other API sites like vue.js reference website. It makes the learning curve flatter. So I made a third-party API site with search function for paper.js, check it out: https://paper-api.wentin.co/
____
I am working on a monospaced typeface design, working name "CSS Mono". Unlike other monospaced fonts, it is a humanist serif, wider (more extended) than most fonts used in code editor. It is named CSS Mono because I design it with the typesetting of CSS(cascading stylesheet) in mind.
All programming languages are different, typesetting-wise. Similar to German to English, CSS is different from, say, Javascript. The letter arrangement defines the typesetting character. We have typeface just designed for German because the upper case is more frequently used in German, therefore the typeface will make upper case lighter to compensate that. The same delicacy should apply to coding language. Instead of using the same monospaced font for all language, CSS is its own unique flower and I treat it with love and care.
Different from most other programming languages, CSS code break lines very early. We don't have long lines in CSS. In result, we end up with half of our screen on the right side empty, unused. Those space can be claimed by using a wider typeface, then the users will be able to set the code to a smaller size and still make it legible, then the users can read more lines of code on the same screen real estate.
-- wentin
Beyond that I have positioned it as an CSS learning tool. I spent more time making the web app than doing the icons, with angular.js, so that one can click on any icon and inspect and learn these css tricks within 10 mins or so. The easiest way to learn any programming language is to do a hands-on project, and I find cssicon is bite-sized project that give the learner some learning satisfaction within the ideal short time span. I hope this helps someone
this is just not true. using svg you can have a single string describe an arbitrarily complex path.
reply: unless you count code by lines, but that single line of string for paths feels really really long and not readable. see below
> the code is more editable
<svg id="beard" data-name="beard 1" xmlns="http://www.w3.org/2000/svg" width="14.096" height="4.063" viewBox="0 0 14.096 4.063"><title>Untitled-1</title><path d="M10.529,0.563a2.245,2.245,0,0,0-2.972,0,1.806,1.806,0,0,0,0,2.716c1.8,1.643,4.343.514,6.539-1.63C13.461,2.269,12.136,2.032,10.529.563Z" fill="#fff"/><path d="M3.567,0.563a2.245,2.245,0,0,1,2.972,0,1.806,1.806,0,0,1,0,2.716C4.741,4.922,2.2,3.793,0,1.649,0.635,2.269,1.959,2.032,3.567.563Z" fill="#fff"/></svg> vs. in css http://cssicon.space/#/icon/mustache-solid
to change its shape you need to use illustrator for SVG vs. in css just some property change. Yes they are just text, but are you really smart enough to edit the above SVG code by hand?
> and managable
managable as you can have clean html, all you need is a div, vs. svg you have to insert the whole chunk of svg code in your html.(Using <img/> won't give you flexibility, svg has to be inline) you can have package tool to insert svg programmatically but when you just prototyping, not gonna do that whole process to just get some icon showing up. CSS ICON is grab and go icons.
> arguably better performance (because i haven't tested it)
It is not true rendering time wise, as someone else analyzed CSS need more rendering time. But you have less HTTP request comparing to icon fonts or external SVG files. Download time is faster
The shortcoming is that you can't do any icon in the world with css. But if you already find this is equivalently appearance wise, the performance and code hygiene is much better than SVG or icon fonts.
also icon fonts are the worst way to do icon, here is the article about why: https://github.com/blog/2112-delivering-octicons-with-svg
I haven't tested it but I am guessing it has better rendering time, it has much less code than SVG (with their path, it is often quite long) and you can style it (such for hover state) and animate it more easily.
With SVG, you can do the same, but it has to be inline in HTML, no img tag embed SVG and such, so if you have 2 of the same icons on the same page, the code has be to repeatedly inserted twice in the html, but with css it just share the same classname.
in the intro youtube video I said more about that. But to be honest, I just had a lot of fun dealing with the constraints that comes with css and loved the creating process, I spent a few weekends keeping designing and coding those tiny icons and skipped a lot of sleeping and still had fun.
So I thought, if you guys want a custom designed resume, please contact me at wtzdesign@gmail.com, I will work with you to create a resume for you, I will give you the design source file in exchange of you allow me to use it for promotion material (key info like name and company info will be substituted with fake info if desired.)
I will pick one to work on first
for 2, ideally, it would support revert by cmd+z for those changes, what do you think? Confirming each time could be too windows-y
Thanks so much!