Josh BetzMade with 🧀 in Madison
Github has styleguides for CSS, HTML, JavaScript, and Ruby. I generally agree with most of the stuff here. Remember that this is all specific to Github so you may not be able to apply everything directly, but good guidelines nonetheless. It makes me want to write my own styleguide and put it up here.
If you’re logging into a website or posting to the web unencrypted, you’re doing it wrong. I use WordPress and it’s pretty secure, but there’s nothing they can do about unencrypted traffic between your browser and the server.1 WordPress has a feature to force encrypted logins and administration pages, but that’s not going to do you much good if you don’t have a SSL certificate.
Self-signed certificates can be perfectly safe, but there are a couple things you should know.
Since you are the only one logging into your WordPress site, you don’t have to worry about scaring away readers with a self-signed SSL certificate. If you’re running an e-commerce site, you’re going to want to go ahead and pay for a certificate that’s not going to generate warnings. It’s possible to tell your browser to ignore the warnings, but you’ll still scare away most potential customers.
The first thing we need to do is generate a server key. From there we’ll generate the certifiate signing request and then the certificate. Last, we’ll need to generate a version of the key that doesn’t require a password or you’ll have to enter the password on the console every time Apache restarts.2
openssl genrsa -des3 -out server.key 4096
openssl req -new -key server.key -out server.csr
openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt
openssl rsa -in server.key -out server.key.insecure
mv server.key server.key.secure
mv server.key.insecure server.key
As I’ve mentioned already, make sure you guard server.key with your life. Ideally you would’ve used a secure password to protect the key at the beginning, so server.key.secure should be safe, but guard that too. You’ll want to make sure you get a copy of server.crt on your local machine. If you’re on a Mac, you can add it the the Keychain so you won’t be bugged every time you visit the site with your self-signed certificate.
In this case, I’m going to install the certificate on an Ubuntu server running Apache, but the process will be similar for any Unix environment. Assuming you already have Apache running, we’re going to move the key and the certificate to the place where they’ll be served from, and enable mod_ssl.
cp server.key /etc/apache2/ssl
cp server.crt /etc/apache2/ssl
a2enmod ssl
Then we’ll need to configure the virtual host. Look in /etc/apache2/sites-available for default-ssl. There you’ll need to configure the host just as you did when you initially set up the server, being sure to change the DocumentRoot and Directory from /var/www if need be. Then, enable the virtual host and restart Apache.
a2ensite default-ssl
service apache2 restart
If everything was configured correctly, you should now be able to visit your site with the https protocol.
On a WordPress site, you can force SSL logins and administration by adding the following lines to your wp-config file.
define('FORCE_SSL_LOGIN', true);
define('FORCE_SSL_ADMIN', true);
It has been pointed out by a few people that training people to ignore security warnings isn’t the right approach. I never meant to suggest training people to ignore the warnings. If you’re going to self-sign an SSL certificate for your website, you have to install the certificate locally or you’ll have no way to verify that you’re actually connected to the right host and not a victim of a man-in-the-middle attack.
I actually applied for a position at Automattic not too long ago — before this internship was announced. I still have another year at the UW before I can take a full time position anywhere. This internship would be perfect though. I would love to work at Automattic. Currently they seem to be holding submissions in moderation; presumably so new entrants can’t look at the older comments for ideas. I have no idea when there will be any word on this or how many people will apply.
Version 10 of this site is back to a minimal type design. I go back and forth between wanting to design fun stuff and wanting the design to get out of my way. Obviously, I’m back in the mode of wanting my writing to stand out and look as good as possible. I spent a decent amount of time looking at typefaces for this design, which I’ve never really put a whole lot of thought into — at least not from the beginning like this. I decided to go with Chaparral Pro for the headings (which is scary close to being a Serif face) and FF Meta Pro for the body type. Some of the smaller, uppercase headings are Helvetica. The download buttons like those on the Network Favicons post are also Helvetica. The typefaces are being provided by Typekit, naturally.
There’s still stuff that needs to be finished. I’ve got an entire list on a piece of 11×17 poster board in my apartment. The design is mostly finished. I need to look at the single pages of the portfolio again, but other than that I’m pretty happy with this. Most of the changes I need to make are administrative things, like figuring out how to track my short domain with Google Analytics.
It’s fully responsive. When it’s really small you lose the logo, but other than that it’s all there. A branding expert would probably tell me it’s important to put the logo in people’s faces on mobile as well, but it didn’t fit and I’m not really interested in pushing the content down any more than it already is. I’m using min-height along with the standard min-width for the media queries because of the height of the sidebar. The portfolio is always in “mobile” mode because I wanted to show thumbnails in the full width of the browser, which meant moving the sidebar.
This is the first project that I use LESS start to finish and it was a dream. First, if you have problems keeping your CSS organized like I usually do, LESS (or SASS) forces you to fix that — not in a way that’s more work, but just because of how nesting works. Second, apps like CodeKit1 automatically compile & compress your CSS and reload your browser window when you save. Sometimes it doesn’t even have to reload, the CSS just gets injected into the page.
I introduced link posts, which I introduced last week. The CF Post Format Plugin is awesome for managing post formats. I plan to use this to post some of the links that I find around that web that are particularly interesting.
I’m pretty happy with how this design has turned out, but I’d love to hear any thoughts or suggestions.
For those familiar with Daring Fireball, or Tumblr sites like MG Siegler’s parislemon, or Marco Arment’s website, link posts are probably pretty familiar. I’ve noticed this trend more and more. Maybe I was missing something before – they’ve been on Daring Fireball as long as I can tell. I’ve always shared links that I find interesting on Twitter, but 140 characters isn’t usually enough to add my thoughts and Twitter doesn’t feel permanent at all.
A link post is literally just a link attatched to an article. The heading is usually linked to the link that’s attached to the post instead of a permalink. They let you comment on another article in longer form than you would normally want to write in a comment. And, if the author of the site you’re linking to has pingbacks turned on, they’ll be notified of your post in the comments. It’s a useful way to share interesting links with your readers and let them know your thoughts as well.
Since I’ve implemented this feature for the next gernation of this site, and I’m running the new site internally, I decided to add the feature to the current generation theme. I’ve already posted some links, so you can check it out. This implementation isn’t necessarily exactly how it will be when the new version launches, but at least nobody is left wondering about any of the articles here. Currently, link posts are linked directly to the source article in the headline of the homepage and on the single post page. Both pages also have an arrow (→) at the end of the title, indicating that the link is going to take you to an external page.