Plausible Thought

Creating new blog posts with an Alfred Workflow

Mon, 01 Apr 2013 14:55:00 +0000

One of my favourite new features of Alfred v2 is the new Workflows framework. It allows you to chain together scripts and actions based on a trigger. I've created a Workflow that makes creating a new blog post quick and easy. I use Kirby so all my blog posts are stored in text files. I can now open Alfred, type post followed by the slug of the post I want to create and it will automatically do the following: create a new directory with a name generated from the slug and blog post number create a post.txt file within the directory created above, populated with my blog post structure It works by running the following bash script: # cd to blog folder cd ~/Sites/plausiblethought/content/blog/ # count files COUNT=$(ls | wc -l) # make folder (e.g. 10-test) mkdir $COUNT-{query} # cd to folder created above cd $COUNT-{query} # get the date DATE=`date "+%a, %d %b %Y %X"` # create post.txt and fill it with blog post structure echo "Title: ‐‐‐‐ Date: $DATE ‐‐‐‐ Text: " > post.txt You can download the Workflow here. Note: You'll need to modify the blog path in the bash script. Hopefully you find it useful. I'm no bash expert, so I'd to love to hear feedback or suggestions. I'm on Twitter: @marcjenkins. Update (03/04/13): Matthew Guay has tweaked the Workflow above and added some extra features. Check out his post: Publish to Kirby from Alfred.

How to add favicons to bookmarklets in Chrome

Sun, 31 Mar 2013 09:21:41 +0000

There are several bookmarklets that I use everyday: Instapaper, Gimmebar and Pinboard. One thing that always bugged me about bookmarklets in Chrome is that they don’t have a favicon. By default, my bookmarks bar looked like this: I’ve discovered a way to add favicons to bookmarklets, so now my bookmarks bar looks like this: (Note: In the screenshot above, I've deleted the link name to make it look neater.) The first thing you need to do is find a favicon. The easiest way to do this is visit the site (for example, Instapaper.com) and add it to your bookmarks next to the bookmarklet. You should then have the bookmarked site, followed by the relevant bookmarklet: Then, while in Chrome, go to Bookmarks > Bookmark Manager. Now export your bookmarks by clicking Organize > Export Bookmarks to HTML File. Save the file to your Desktop. At this point, it will be worth backing up your exported bookmarks file. Just in case. Next, open the file in your text editor of choice. In the file you'll see a list of links. Notice that all links are a hrefs but not all have an ICON attribute. All you need to do is copy the relevant ICON attribute to the correct bookmarklet (i.e. instapaper.com to the Read Later bookmarklet). Then, once you've gone through them all, save the file and head back to Chrome to import it: Organize > Import Bookmarks from File. That's it, your bookmarklets will now have favicons!

Stop "fixing" WebKit font smoothing

Tue, 20 Nov 2012 21:12:00 +0000

Dmitry Fadeyev of UsabilityPost: So here is yet another plea for designers to stop “fixing” WebKit font smoothing by disabling subpixel rendering. Feel free to use it on light text on dark backgrounds, feel free to use it to fix custom font rendering on Windows or to style specific bits of text on the page to make it look more slender, but for main portions of text where readability is paramount please leave the default setting alone and let the operating system handle the smoothing. Dmitry also has an article on the use of text-rendering: optimizeLegibility: Basically, setting the value of “optimizeLegibility” for the “text-rendering” property lets you enable things like ligatures and more accurate kerning (the spacing between letters), which, as the name of the value implies, leads to improved legibility and an overall better appearance of the text as unnecessary spaces are eliminated where possible.

Drop down Terminal with iTerm2

Thu, 15 Nov 2012 20:42:00 +0000

I'm a recent convert to using the Terminal. I use it all day, every day. From pushing changes in Git, to creating files and directories, to downloading sites using wget, Terminal has worked its way into my workflow. I recently found a great tool called iTerm2. It allows you to assign a hotkey which then drops a Terminal window down, as shown below. It allows me to quickly commit and push changes and get straight back to work. It's easy to setup, just follow these steps: Download and install iTerm2. Open Preferences and click on the 'Profiles' tab. Create a new profile, give it a name and set it as default. Click on 'Window'. Slide the transparency slider to the right. Set Rows to '25'. Style should be set to 'Top of Screen'. Finally you just need to set a hotkey - click on the 'Keys' tab, select the 'Show/hide hotkey' tickbox and enter a hotkey. Restart iTerm for the changes to take effect and you're done. My settings are below for reference:

A new microsoft.com

Wed, 03 Oct 2012 21:13:00 +0000

Trent Walton (who, along with the team at Paravel, helped design & buid the new Microsoft homepage) wrote a great piece on the redesign of microsoft.com. I particularly like this bit: This week's launch marks a momentous step for Microsoft and for responsive web design. Rather than waiting for the greater web community to clearly hash out best RWD practices, Microsoft has jumped in early, joining us in the trenches with an abundance of resources and zeal. Thank you, Microsoft—for demonstrating that RWD is the future of the web and that businesses of any size are capable of adopting the approach. Are we going to see more large corporations join the responsive web movement? Currys also went responsive recently.

.htaccess in multiple Wordpress environments

Mon, 01 Oct 2012 21:32:00 +0000

Dan Eden recently wrote a great post called changing my ways in which he discusses the recent changes in his Wordpress development workflow: moving away from FTP and live editing on a server to Git. It's a process I've been through recently too. Working in Git has many benefits (which I won't go into here) but because the same code base is deployed on multiple environments, it can throw up some issues. One of those issues is how to handle .htaccess on multiple environments. I usually have 3 environments—local, staging and production—and quite often these environments have different subfolders. Below are two techniques I use. Using one htaccess file This is my favourite solution which works 90% of the time. In the example below, I have 3 environments: My local environment: localhost/plausiblethought/ My staging environment: staging.plausiblethought.co.uk/ plausiblethought/ My production environment: plausiblethought.co.uk Simply create a .htaccess file with the following code: RewriteRule . - [E=rwbase:/] RewriteCond %{HTTP_HOST} localhost$ RewriteRule . - [E=rwbase:plausiblethought/] RewriteCond %{HTTP_HOST} staging.plausiblethought.co.uk$ RewriteRule . - [E=rwbase:plausiblethought/] RewriteEngine On RewriteBase /%{ENV:rwbase} RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /%{ENV:rwbase}index.php [L] It's a clever snippet of code which works by setting a variable called rwbase depending on the URL. First, it checks to see if it is on 'localhost' and adds the folder 'plausiblethought'. It does the same for 'staging.plausiblethought.co.uk'. If your site is in the root of your staging domain, you can just delete the relevant lines. We don't need to add anything for the production environment because it's not in a subfolder. Using multiple htaccess files and symbolic links This solution is a bit more fussy and requires SSH access to your server. First, delete the .htaccess file (if there is one). Then create a htaccess file for each environment and name it accordingly e.g. .htaccess-local, .htaccess-staging and .htaccess-production. You'll need to use the default htaccess code and add the relevant folder paths. Next is the fun bit where we create a symbolic link. A symbolic link is a fancy term for creating a reference to another file. To do this, open Terminal and cd to the correct directory. Then type the following: ln -s .htaccess-local .htaccess ln -s is the magic we need to create the symbolic link. .htaccess-local is the file we created above and .htaccess is the file it creates. You should now see a .htaccess file on your local environment with the same contents as .htaccess-local. You'll then need to repeat this process using SSH on your remote server. Again, cd to the correct directory and then type: ln -s .htaccess-production .htaccess That's it. I'd love to hear your thoughts on how you work with Wordpress on multiple environments. I'm on Twitter: @marcjenkins.

Microsoft's new logo

Sat, 25 Aug 2012 13:10:00 +0000

A month back, I wrote that I really liked Microsoft's new design language. It was a comment in response to their new website preview. The design felt modern, fresh and that Microsoft was still a company that mattered. The new website design used the Metro aesthetic (or "Windows 8 style UI" I should say). Large tiles, based on a grid, with considered typography and bright, youthful colours. Fast-forward to today. Two days ago, Microsoft unveiled a new logo - the first time they have done so in 25 years. And, for me, the promise that the Metro design aesthetic brought, the promise that Microsoft was still relevant, has gone. Let me explain. Recognise anything in the logo above? The Windows logo. Windows, of course, being Microsoft's flagship product. I think that aligning the companies branding with their flagship product is a mistake. It seems short sighted of Microsoft to push the Windows brand so strongly. This has long been a critism of CEO Steve Ballmer: that he is too attached to Windows and that they should be creating new brands. Especially when many people still associate Windows with negative connotations. To then align that brand with the company? Microsoft = Windows. That's it. This was Microsoft's opportunity to show that they are more than just a computer operating system provider and that they want to innovate. I think they failed on that opportunity.

Scratch: a quick-input notepad for iPhone

Sat, 21 Jul 2012 22:04:00 +0000

I've been using Scratch for a couple of days and I love it. It has replaced PlainText as my main writing app. Scratch is a quick-input notepad for your iPhone. At £1.99, it's a premium priced app, but deservedly so — it's fast and solid. The app is focused around a cleverly designed toolbar which snaps to the top of the keyboard. Using the toolbar, you can quickly create a new note or go to your history of previous notes. Slide the toolbar along and you have a custom shortcut bar allowing you to insert commonly used characters or emoticons. Slide the toolbar along again and you have markdown shortcuts — ideal for writing blog posts. Notes can be saved to Dropbox but here lies my only gripe with the app: you have to specify which folder you would like to save in each time. I'd love it you could set a default folder (all my notes are stored in the 'Notes' directory). You can also 'Append to a Dropbox file', a feature that I haven't found use for yet but seems like an interesting idea. This post was written using Scratch and I hope to write a lot more with it. I recommend you give it a try.

Code Club: Inspire kids to learn to code

Tue, 17 Jul 2012 21:54:00 +0000

Code Club is an after school coding club for children aged 10-11. Like the two co-founders, I also share the belief that it is essential that children are introduced to coding at an early age and shown how much fun it can be. Spread the word: you can follow Code Club on Twitter (@codeclub) and your local school can sign up on their website.

Why you should pay too much for things

Sat, 14 Jul 2012 10:34:00 +0000

Allen Tucker: Have you ever inherited something that’s really old? When you held it, did you notice that it’s different than what you can buy at the store today? Chances are your grandparents saved up for quite some time to buy it, and that’s why it’s lasted until now. Often something that costs twice as much doesn’t perform twice as long, it lasts ten times longer. Having worked in a web design agency, I know this principle remains the same. Those that pay what the project is worth get a great end product. Those that force the price down and pay as little as they can do not.

Testing websites using the iOS Simulator

Sat, 11 Feb 2012 20:11:00 +0000

As iPhone and iPad sales continue to rise, it's becoming increasingly important to test websites on the iOS platform. Here is a quick and easy way to test your website on both the iPhone and iPad using the iOS Simulator. These instructions work with OS X Lion. You can also use the iOS Simulator if you are using OS X Snow Leopard, you will just need to download Xcode from Apple's Developer website. First, download Xcode from the App Store. It's free but might take a while to download. Then run the installer. Once installed, you will have access to the iOS Simulator. Search spotlight for iOS Simulator to launch it. When you open it you should see a fully functional iPhone. Click the Safari tab and navigate to any website you want to test. You can also use localhost if you are working locally. Use Cmd and left or right arrows to change orientation. To change device, click Hardware > Device > iPad. It's that easy!

Huffduffing

Mon, 23 Jan 2012 19:40:00 +0000

I love a good podcast. There is a wealth of knowledge out there waiting to be listened to. For over a year I've been using Instacast to sync my favourite shows (mostly 5by5, it has to be said). I found that I was listening to the same old shows. What I needed was something new and fresh. Recently I've started using Huffduffer. It's a tool that allows you to put together your own podcast of audio files. You can do this by using the Huffduff it bookmarklet or by exploring audio files other users have been listening to. For a better explanation of how Huffduffer works, check out this screencast. The way I use it is simple: I collect the podcasts I want to listen to, either by using the bookmarklet or by browsing audio files from my collective. I then subscribe to my podcast RSS feed using Instacast which automatically downloads the audio files straight to my iPhone. That way, I always have an up to date collection of interesting stuff to listen to.

Helvetica

Sun, 18 Dec 2011 11:13:00 +0000

Helvetica is an extraordinarily well-made documentary film by Gary Hustwit about ‘typography, graphic design and global visual culture’. It’s a wonderful look at the typeface and explores just how ubiquitous it has become. It’s well worth a watch if you are interested in design and typography. I watched it via iTunes, but it’s also available on Amazon. Helvetica is Gary Hustwit’s first film in the ‘design trilogy’. There’s also Objectified, which focuses on industrial design/product design and the relationship with the manufactured objects that surround us. And Urbanized, which looks at the issues and strategies behind urban design. Both of which are on my list of films to watch.

Hello world

Sat, 17 Dec 2011 20:12:00 +0000

Plausible Thought is my new home on the web. A place where I hope to share links and write short articles. It will be focused around my interests of design, technology, web design and science. We'll see how it turns out!