Thoughts, articles and tutorials about web and design.



Poedit Pro Adds Direct Support for WordPress Themes and Plugins

We’ve previously shown how to properly translate WordPress themes and plugins using Poedit. One of the steps is setting up the project with the right keywords and paths which can (due to the fast amount of keywords in WordPress) take a little time, especially if you do it often.

Now, Poedit has released a Pro version, that, in addition to supporting the development, comes with a quick WordPress theme/plugin mode that inserts all of these by default when you create a new project for a theme/plugin through the app.

Personally, I think the $19.99 is worth it just for this time saving feature and for supporting the Poedit development, seeing as it is an app that I personally use quite a bit.

To get it, just update the Poedit app to the latest version and you’ll be prompted to sign up, or visit their Pro page.


Create a Cascading Grid using Masonry.js

When you design a layout using floats, there is typically one problem. Each item needs to be as tall as the next one or your layout will break in one of a number of different ways. To solve this and create a true cascading grid, or masonry type pattern, you need to turn to jQuery.

Luckily, there is a good jQuery library available called, simply, Masonry that turns your standard floated layout into this cascading grid with very little markup necessary. It plays nice with framework such as Foundation too and is responsive-friendly as it reflows nicely when you scale your browser.

Just because it isn’t instantly doable in CSS, don’t shy away from creating this type of a design. It can be a really nice way of showing data on a site, where items typically are not the same height.

Learning to Embrace Code

Learning to Embrace Code – Why should and how can designers learn to code?

My other session at D2WC this year is one aimed to help designers learn to love code. As a designer, you can benefit a lot from knowing code.

Are you a designer? Do you live to create gorgeous designs? Having some trouble getting into coding? Designers benefit greatly from knowing how to work HTML and CSS in their workflow with developers. We’ll talk about effective ways to get comfortable with coding and learning how to embrace it and thus becoming a better designer.

Read More…


Source Code Pro – Beautiful Code Editor Font from Adobe

I’ve always been a big fan of the fonts that Adobe has made and when they released a new one, specifically for code editors last week, I was overjoyed. The new font is called Source Code Pro and is based on their also recently released, open source font, Source Sans. The difference is that Source Code is made to work best with code editors.

Since the release, I’ve been using Source Code Pro in all my editors (Coda 2 and Sublime Text 2 if anyone is wondering) since the release and I must say that it is looking very nice  indeed! Check it out.


Adding a Separator to the WordPress Admin Menu

Custom Post Types in WordPress are superb! More often that not, websites that we build for clients have more than one custom post type which inevitably will clutter up the admin menu slightly. The solution to the problem is one that WordPress itself employs: De-clutter the meny by inserting a separator in between sections.

Doing this requires just a couple of simple PHP functions that you can add to your functions.php file. One to create the separator, one to add  any number of separators at any position in the menu and finally an action hook into the menu to add it. Read More…

Supercharged Coda Workflow UI

For most web development, Coda 2 from Panic is the main application of choice. The reason I favor Coda for site development is a combination of all of its features but mainly its ability to organize sites and handle publishing of edited files. A benefit is the ability to set up the user interface for super quick development, which is what I wanted to share with you guys today.

The way I set up Coda when starting the development of a site is to take advantage of the columns feature, splitting the window up in three columns on my 27″ screen. One for the HTML code, one for the CSS and a final for a browser preview. The browser preview is automatically updated when you change something in the CSS or HTML views. This way, you get instant references from your HTML code (when coding CSS) and get the instant update in the browser too.

Interface from Panic Coda 2

5 Snippets To Speed Up Your CSS Coding

Speeding up coding is not always by typing faster or saving frequently used snippets so that you can reuse them (even though this is a brilliant idea). It is also about reducing repetitiveness by creating objects that you can paste into your stylesheet for elements you use over and over again in the same way.

In this article I want to share with you ten CSS snippets that will save you from having to write the same code over and over again in the same project.

Read More…

Show Content Only To Visitors Coming From a Search Engine

Displaying a message to visitors coming from search engines can sometimes be beneficial. It can allow you to show them targeted links on where to go to next or perhaps increase the call to action on the page that they land on. Either way, it allows you to more specifically build a website based on the nature of the users that visit it. Read More…