Archive for the ‘CSS’ Category
Hobbyist at Heart
Fifteen years ago when I dove into JavaScript friends called me a hobbyist and said I was wasting my time. They had some basis in what they said because most of my work is server side with the database or operating system. However, they haven’t said that I wasted my time with the advent of NoSQL solutions, like Cassandra and MongoDB; or frameworks like node.js. Now writing JavaScript is mainstream and an invaluable skill set, and they’re trying to catch up. While David Flanagan’s JavaScript: The Definitive Guide is comprehensive, I recommend my students start with David McFarland’s JavaScript & jQuery: The Missing Manual. I also strongly suggest they use jQuery first and write JavaScript when jQuery isn’t suitable.
I really liked David McFarland’s CSS: The Missing Manual when it came out in 2009, and I’ve recommended it for several years. However, he’s got a new version – CSS3: The Missing Manual that came out in late January 2014. It’s an improvement over his first volume and I’d recommend you upgrade if you’re writing, modifying, or maintaining Cascading Style Sheet or if you just want to learn more about CSS.
Fortunately for me, CSS3: The Missing Manual is available through iTunes for Apple users, Naturally, it’s also available on Safari and Kindle formats. As an Apple user, I opted for the iBook format for my iPad Air. Unfortunately, it’s $27.99 as an iBook compared to $15.49 on Kindle, and that almost makes me opt to use the Kindle App. 😉
Embedding Gists
Several years ago, I decided hosting my own blogs made sense because WordPress didn’t allow me to leverage plug-ins to format code blocks with GeSHi formatting. That was fine to a point. Although, the GeSHi formatting plug-in had some limits that I didn’t like and didn’t want to take the time to fix. The future was moving reusable code artifacts to a GitHub Gist repository.
I created this https://gist.github.com/maclochlainn Gist repository for the blog and implemented in this Common Lookup post from yesterday. As time allows, I’ll start shifting the reusable artifacts to the Gist repository from my blog. The change will be virtually unnoticeable because I’m leveraging a sweet piece of JQuery written by my son Joseph that lets you embed Gists in a web page.
There was just a little housekeeping to get Joseph’s JQuery to work smoothly with my WP-Syntax (contributed by Ryan McGeary – kudos for great work). More or less, beyond Jospeh’s instructions, I needed to add these into the WordPress theme’s style.css file when it was a relative reference. The JSON no longer requires this CSS modification, and it’s here in case somebody wants to do something different on their own.
/* Added for Gist code highlighting */ .gist{color:#000; font-size:13px} .gist .gist-file{border:1px solid #dedede;font-family:"Menlo", Consolas, "Liberation Mono", Courier, monospace;margin-bottom:1em} .gist .gist-file .gist-data{overflow:auto;word-wrap:normal;background-color:#f8f8ff;border-bottom:1px solid #ddd;font-size:100%} .gist .gist-file .gist-data .line_data{padding:.5em !important} .gist .gist-file .gist-data pre{font-family:Consolas, "Liberation Mono", Courier, monospace;background:transparent !important;border:none !important;margin:0 !important;padding:0 !important} .gist .gist-file .gist-data .gist-highlight{background:transparent !important} .gist .gist-file .gist-data .line_numbers{background-color:#ececec;color:#aaa;border-right:1px solid #ddd;text-align:right;padding:.5em} .gist .gist-file .gist-data .line_numbers span{clear:right;display:block} .gist .gist-file .gist-data .gist-line-numbers span{clear:right;display:block} .gist-syntax{background:#ffffff} .gist-syntax .c{color:#999988;font-style:italic} .gist-syntax .err{color:#a61717;background-color:#e3d2d2} .gist-syntax .k{color:#000000;font-weight:bold} .gist-syntax .o{color:#000000;font-weight:bold} .gist-syntax .cm{color:#999988;font-style:italic} .gist-syntax .cp{color:#999999;font-weight:bold} .gist-syntax .c1{color:#999988;font-style:italic} .gist-syntax .cs{color:#999999;font-weight:bold;font-style:italic} .gist-syntax .gd{color:#000000;background-color:#ffdddd} .gist-syntax .gd .x{color:#000000;background-color:#ffaaaa} .gist-syntax .ge{color:#000000;font-style:italic} .gist-syntax .gr{color:#aa0000} .gist-syntax .gh{color:#999999} .gist-syntax .gi{color:#000000;background-color:#ddffdd} .gist-syntax .gi .x{color:#000000;background-color:#aaffaa} .gist-syntax .go{color:#888888} .gist-syntax .gp{color:#555555} .gist-syntax .gs{font-weight:bold} .gist-syntax .gu{color:#aaaaaa} .gist-syntax .gt{color:#aa0000} .gist-syntax .kc{color:#000000;font-weight:bold} .gist-syntax .kd{color:#000000;font-weight:bold} .gist-syntax .kp{color:#000000;font-weight:bold} .gist-syntax .kr{color:#000000;font-weight:bold} .gist-syntax .kt{color:#445588;font-weight:bold} .gist-syntax .m{color:#009999} .gist-syntax .s{color:#d14} .gist-syntax .na{color:#008080} .gist-syntax .nb{color:#0086B3} .gist-syntax .nc{color:#445588;font-weight:bold} .gist-syntax .no{color:#008080} .gist-syntax .ni{color:#800080} .gist-syntax .ne{color:#990000;font-weight:bold} .gist-syntax .nf{color:#990000;font-weight:bold} .gist-syntax .nn{color:#555555} .gist-syntax .nt{color:#000080} .gist-syntax .nv{color:#008080} .gist-syntax .ow{color:#000000;font-weight:bold} .gist-syntax .w{color:#bbbbbb} .gist-syntax .mf{color:#009999} .gist-syntax .mh{color:#009999} .gist-syntax .mi{color:#009999} .gist-syntax .mo{color:#009999} .gist-syntax .sb{color:#d14} .gist-syntax .sc{color:#d14} .gist-syntax .sd{color:#d14} .gist-syntax .s2{color:#d14} .gist-syntax .se{color:#d14} .gist-syntax .sh{color:#d14} .gist-syntax .si{color:#d14} .gist-syntax .sx{color:#d14} .gist-syntax .sr{color:#009926} .gist-syntax .s1{color:#d14} .gist-syntax .ss{color:#990073} .gist-syntax .bp{color:#999999} .gist-syntax .vc{color:#008080} .gist-syntax .vg{color:#008080} .gist-syntax .vi{color:#008080} .gist-syntax .il{color:#009999} /* End gist highlighting */ /* To resolve Geshi plug-in conflict. */ td.line-numbers {background:rgb(236,236,236)!important; border-right: 1px solid rgb(170,170,170)!important;text-align:right!important;padding:6px!important;color:rgb(170,170,170)!important;} td.line-data {padding:6px!important;} |
Also, Joseph and I discovered that there was a problem with changing style sheets on the github.com site. Joseph added the following but may not update his blog right away, so here’s the JavaScript for your WordPress header:
After completing this, I noticed that there’s a WordPress Plugin for embedding gists. Naturally, it’s probably simple to use it but I like the control and performance of this solution. I hope this make the pages load a bit faster, and readers use code that they’d like to test.
Hybrid iPhone Development
A colleague of mine just dropped by his new book on Developing Hybrid Applications for the iPhone. He covers Dashcode, Xcode, JavaScript, and Objective-C. He also covers how to use WebView and native SQLite database access from the iPhone.
It looks interesting. By the way, his blog is here.
CSS Books Recommendation
David McFarland’s CSS: The Missing Manual is a great reference on my book shelf. Next to it is Pro CSS and HTML Design Patterns book. The latter is a quick reference to those pesky things you want to do now that you may have forgotten, or not yet encountered with CSS. While the why is better in the McFarland’s book, the immediacy of solutions in Bowers’ book is fantastic. Together they’re an awesome set.
Subscribe via RSS