Jonathan Snook

Your approach is essentially the 'module pattern'. This article describes some other reasons you might not want to use it: http://snook.ca/archives/javascript/no-love-for-module-pattern I lead a somewhat large (~10000 sloc) project which uses the module pattern everywhere. I think the best argument against the module pattern is the difficulty of debugging. I can no longer just pop open a console and inspect objects. Responses to your individual points: >> * you cannot use previous OOP experience While unfortunate I believe this is largely unavoidable. Javascript's object system is not 'classical' inheritance. The module pattern, however, is also not 'classical' inheritance. Regardless of OOP technique, the New Javascript Programmer must learn about the object system. >> * there are MANY ways to do OOP using prototypes There are also many forms of the module pattern. You just showed me another one I hadn't seen before. Then there's immediately invoking function expressions, which some people like to do like this (function () { var exports = {}; return exports; })()); and others like to do like this !function() { var private = 4; return { getPrivate: function () { return private; }; }(); >> * 'this' has different meanings depending on context Can't argue against this one. >> * prototypes make existing objects unreliable -> requires prior knowledge about libraries and APIs (leaky abstraction) I'm not sure I see the argument here. >> * building an object…

>And I mean, it's not like SOAP+WSDL actually worked well either, it was always unreliable. I don't think it ever worked. See this [0]. It's pretty crazy that people build one of the most complex and verbose data exchange formats in the world and then it turns out that duplicating the open and close tag and including the parameter name and type in the attributes bought you nothing, because implementations are treating your SOAP request as an array of strings. [0] https://snook.ca/archives/other/soap_request_pa

1. Rem does not need a fallback [1] 2. Rem works awesome for making default font sizing. (like a normalize in a way) [2] 3. Rem allows us to use a sort of centralized sorta relative sizing that percentage and em just do not fulfill. Rem is awesome, I think this guy just can't get passed the "it's new and so I don't like it" problem. [1] https://caniuse.com/#search=rem [2] https://snook.ca/archives/html_and_css/font-size-with-rem

I really want to check this out, but my eyes hurt reading the page because the contrast of gray on black is so low. A vision-impaired person might not be able to read it at all. Please consider using this tool to pick a text color that provides sufficient contrast: https://snook.ca/technical/colour_contrast/colour.html#fg=909090,bg=20…

This doesn't seem like such an egregious example to me - I tried it in a colour contrast checker and it passes WCAG AA but fails WCAG AAA for normal size text (but passes for larger text): https://snook.ca/technical/colour_contrast/colour.html#fg=5A5A5A,bg=FF… I will admit I don't find the letter spacing on that font to be particularly pleasant, and if you turn the "Cantarell" declaration off, it does become easier to read (better letter spacing and thicker strokes, which latter contributes positively to the contrast).

I find these tools to be really useful in evaluating designs and emphasizing to stakeholders where designs fall according to standards: - http://www.checkmycolours.com/ - https://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=33… --- edit: adding extra lines to get proper line breaks

Very nice! If anyone else was unfamiliar with "rem"s (root em), this short article helps: http://snook.ca/archives/html_and_css/font-size-with-rem It also expands on the comment in skeleton.css on how font-size: 62.5% skales 1 em to be 10 px (it would appear 16 px is the default).

lower contrast is not bad, I don't want all text to be #000 and #fff, but the contrast on DuckDuckGo is too low. As it says here your text should be as readable as #333 on #fff: http://ia.net/blog/100e2r/ There are also some WCAG guidelines on contrast. Here are some contrast checkers: http://snook.ca/technical/colour_contrast/colour.html http://webaim.org/resources/contrastchecker/ http://www.checkmycolours.com/

We spent time juggling between em and px before but from few months we are using "rem" unit. It works nicely as we are also using font-icons everywhere. See: http://snook.ca/archives/html_and_css/font-size-with-rem

em or relative font-sizing seems like a good choice. Also see rem [1] which was introduced with CSS3 to combat issues with font size compounding. Use pt for print stylesheets [2]. For a bit of ancient internet history: http://style.cleverchimp.com/font_size/points/font_wars.GIF [1] http://snook.ca/archives/html_and_css/font-size-with-rem [2] http://www.w3.org/Style/Examples/007/units.en.html

No, it doesn't, the foreground color is #57534a and background is #ffffff which gives a ratio of 7.7:1 WCAG 2.0 requires a contrast of 7:1 to reach AAA levels. [1] you can test it yourself with a bunch of tools but I couldn't find link to results on any of them [2][3][4]. [1] http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast7 [2] http://webaim.org/resources/contrastchecker/ [3] http://snook.ca/technical/colour_contrast/colour.html [4] http://contrastchecker.com/

Do you have any sources for this, or is it just anecdotal? The W3C states a minimum of 4.5:1 contrast ratio[0] for body copy, or 7:1 for users with poor eyesight[1]. If Snook's calculator[2] can be relied upon, this makes #444/#fff a contrast of 9.74:1. Even a darker bg of #eee yields 8.39:1. This also depends on the font weight, stroke, and size. [0]: http://www.w3.org/TR/WCAG/#visual-audio-contrast-contrast [1]: http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contra… [2]: http://snook.ca/technical/colour_contrast/colour.html

I thought the same. If this is true (it finds <a> elements then looks for the id), I've been writing a lot of poor-performing selectors. Edit: I found that it does work this way, and the reason is because browsers process content and apply CSS top to bottom as it renders, they do not first load all the content and then apply CSS rules. From http://snook.ca/archives/html_and_css/css-parent-selectors If you have a rule like body div#content p { color: #003366; } then for every element—as it gets rendered to the page—it'll first ask if it's a paragraph element. If it is, it'll work its way up the DOM and ask if it's a div with an ID of content. If it finds what it's looking for, it'll continue its way up the DOM until it reaches the body.

Interesting link, but you're missing the point. The website even misses on their points. Most of the bad examples fit under an acceptable contrast ratio, by the standards given in their research, and even their good examples are not pure #000 or #fff. The w3c states that a minimum level of 3:1 works for people with 20/20 vision and 7:1 achieves the Triple-A standard. To show you what it looks like. http://cl.ly/0J3Q210X142x1h2m1G2v for reference http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contra… and contrast tool http://www.snook.ca/technical/colour_contrast/colour.html

Feel free to bump the text size up. The site's layout will adjust accordingly :) And, for the record, the background is white, and #333333 meets the criteria of both the W3C and the WCAG (http://www.snook.ca/technical/colour_contrast/colour.html?fg=333&b… Thanks for reading!

The red (such as in "Send a private...") is hard to see. Needs more contrast. Same with the footer text. Use this to check for compliance: http://snook.ca/technical/colour_contrast/colour.html

You can use multiple backgrounds in CSS3: http://snook.ca/archives/html_and_css/multiple-bg-css-gradients Lots of details here and some catches to look out for (mostly browser support).

Since this article doesn't have much substance, if you're looking to do something similar, check out this article on CSS rotation transformations. http://snook.ca/archives/html_and_css/css-text-rotation

You might also really enjoy Snook.ca. The Six Revisions font-face-guide reminded me of this article (http://snook.ca/archives/html_and_css/becoming-a-font-embedding-master… that Snook wrote, and which I have declared to be the most complete guide on font embedding whatsoever. It might focus more on 'front-end development' than design per se, but much of what he offers is invaluable.

Here's blog post that runs down about a dozen services: http://m.snook.ca/archives/html_and_css/html_css_services/

Actually, you DO have Firebug and in a very powerful way: http://labs.findsubstance.com/2008/02/26/firebugs-console-log-flash-de… http://snook.ca/archives/quick_links/quick_link_debug_flash_with_fireb…

I'm not too familiar with CakePHP, but there's also CodeIgniter. I found this fairly detailed comparison when I did a bit of searching: http://snook.ca/archives/php/codeigniter_vs_cakephp/ If you want a bit of templating functionality without using an entire framework, I sometimes use a less-well-known PHP templating system called Smarty (http://www.smarty.net), which is very easy to get the hang of, and it's just as fast as using pure PHP (because Smarty actually converts your templates to plain PHP code).

>Classes should therefore describe what something is, not how it's supposed to be presented. That's what we used to think when Semantic CSS was the big buzzword, lots of articles from '08-'11 preached it as the gospel. Turns out when a language is based on customizing presentation, presentation is semantic. > I had a number of locations that I highlighted with a blue background and rounded corners. I called it `location` since it highlighted each of the locations > When I opened the online store, I had a list of products and wanted to highlight each product using the same design pattern. Problem was, they weren’t locations. They were products. Being the lazy developer I was, though, I just reused the `location` class and applied it to my products. Clearly not ideal (but hey, it worked)! > The design function was, of course, to highlight something. That was what I should’ve called it! https://snook.ca/archives/html_and_css/semantic-css

I'm also about to publish my first book (about a guy called Elon Musk). Here are some links I've saved that were interesting to read: Selling my e-book on Amazon (http://snook.ca/archives/writing/selling-ebook-on-amazon) How you can make a million writing your own e-book (http://www.dailymail.co.uk/home/moslive/article-2040044/Kindle-How-mak… How to Write and Promote New York Times Bestsellers: Tim Ferriss and Jack Canfield (http://www.fourhourworkweek.com/blog/2012/09/01/how-to-write-and-promo… How to (Really) Make $1,000,000 Selling E-Books – Real-World Case Studies (http://www.fourhourworkweek.com/blog/2013/04/04/how-to-make-1000000-se… How I Used Hacker News to Sell My eBook (http://rubysnippets.com/2013/04/26/how-i-used-hacker-news-to-sell-my-e… An eBook pricing model that resulted in $100,000 in sales (http://blog.asmartbear.com/selling-ebook.html) 5 rules to sell thousands of copies of your ebook (http://mir.aculo.us/2012/10/20/5-rules-to-sell-thousands-of-copies-of-…

a bunch of useful color links I've accumulated over the years: tools * https://dtrejo.com/colorslice/ - I made this b/c i wanted multi-color picking and good schemes from images and husl and multiple editable color formats * http://speculo.co/ - preview colors on layouts * http://tools.medialab.sciences-po.fr/iwanthue/ - colors for data scientists * https://color.hailpixel.com/ - fun color picker * http://tristen.ca/hcl-picker/#/hlc/6/1/20313E/EFEE68 - hcl picker formats * http://www.hsluv.org/ - human friendly hsl a11y * https://www.randoma11y.com/#/?_k=nm2tko - check color a11y * https://snook.ca/technical/colour_contrast/colour.html#fg=33FF33,bg=33… - contrast checker