Blog

URL Structure FTW – Pretty and Readable Permalinks

Posted on by Evan Mullins

I noticed that the clearleft.com site has very clever url structure. You can read the urls like a sentence. Like their about section is “/is” and their capabilities is ‘/does’, and their portfolio section is “/made” , so clearleft.com made code for america. Check the urls listed here and you’ll notice that they read like a sentence. These urls were made intentionally for humans!

Screenshot 2015-07-31 14.15.00

 

Although they are missing an opportunity I think, their blog is clearleft.com/thinks/, but then they just use a post id for the url. http://clearleft.com/thinks/298, I was hoping it’d be clever. If it had the title of the post, it’d make more sense.

Something to think about as we create sites.

I then looked around a bit and found a talk about some of this, here it is and the relevant bits:

If you really want to take this content-first approach to its ultimate limit, something I like to do, if I ever get the chance to do this on products is I like to start with the URLs; really bring it down to the most basic webiness of what you’re building is, what is the URL structure, which is something I think people don’t think about enough. And yet, URLs are so, so important. Some people treat them like an implementation detail of the web, like, “oh yeah, we’ve got native, we’ve got the web, web has URLs, whatever,” whereas I think it’s the most powerful part of the web. In fact, once you have the name of something and once you have the address that you can pull up on any device, as long as it’s connected to a network, that is amazing. That immediately makes it part of this huge, big, chaotic mess of a web. It was Tim Berners-Lee who said, when you have a URL, it’s part of the web, it’s part of the discourse of humanity, this giant Library of Alexandria that we’re all collectively building.

URL design as a skill is something I feel we’re losing, which is a real shame because I will admit, I’m a URL fetishist. I love a good URL. But I think, rightly so, because they are this fundamental unit of the web. Kyle Neath who works at GitHub—where they have beautiful URLs—he said:

URLs are universal. They work in Firefox, Chrome, Safari, Internet Explorer, cURL, wget, your iPhone, Android and even written down on sticky notes, they are the one universal syntax of the web.

That’s so important to remember: written down on sticky notes, written on a Post-it. They’re for humans. URLs are for humans. Yes, they’re used by machines to fetch a resource, but they’re very much for humans to use. URLs should be hackable, guessable, readable.

 

Adactio: Journal—Instantiation

Posted on by Evan Mullins

There needs to be a cultural change in how we approach building for the web. Yes, some of the tools we choose are part of the problem, but the bigger problem is that performance still isn’t being recognised as the most important factor in how people feel about websites (and by extension, the web). This isn’t just a developer issue. It’s a design issue. It’s a UX issue. It’s a business issue. Performance is everybody’s collective responsibility.

Source: Adactio: Journal—Instantiation

Great article (as always) by Jeremy Keith about why the web is so slow and painful to use… hint, because we built it that way!

human_time_diff « WordPress Codex

Posted on by Evan Mullins

Determines the difference between two timestamps.The difference is returned in a human readable format such as “1 hour”, “5 mins”, “2 days”.

Source: Function Reference/human time diff « WordPress Codex

Used this little known, but nice gem today. It’s a core WordPress function that gives human relative time from any other datetime in “U” format. Like so:

human_time_diff( date("U", strtotime($twitter_data[$i]->created_at)) );

Cyclomatic Complexity: Logic in CSS – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

Posted on by Evan Mullins

I recently hit upon a way of thinking that made me realise that CSS does include logic, and the fact that it’s rarely viewed as such is probably also why we end up with such poor CSS at all.I found myself explaining compound selectors to a client as being made up of the subject—the thing we’re actually interested in—and its conditions.

Source: Cyclomatic Complexity: Logic in CSS – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts

Great article discussing how CSS does in fact contain some login based on your selectors, don’t overcomplicate it. Use as much specificity as you need and no more. I also like the reference to the Inception Rule.

Add Links to Twitter Mentions, Hashtags, and URLs with PHP

Posted on by Evan Mullins

This gem helped me out today as I was working with the Twitter API to create a custom WordPress widget. I was about to do exactly this and was not looking forward to it, luckily I did a quick search and found this webtips post. Thanks!

If you’re using the Twitter v1.1 API to fetch a user’s statuses from their timeline, then you’ve likely come across the fact that user mentions, hashtags, and urls do not have links in the “text” node of the JSON response the API returns. There is no element to follow the link, and there are no links to follow to check out a mention or hashtag on Twitter site. This can easily be overcome using PHP and parsing some of the data in the JSON response and wrapping the entities in the desired elements.

Source: Add Links to Twitter Mentions, Hashtags, and URLs with PHP

CSS Dig

Posted on by Evan Mullins

A chrome extension for analyzing your CSS. Check your properties (and reuse – are they following DRY principles?) and your CSS selectors (and their specificity).

Analyze your CSS in a new way. Consolidate, refactor, and gawk at the 37 shades of blue your site somehow ended up with.

Take a look at all your CSS properties, their frequency and variations. Have too many shades of blue? Inconsistencies often means confusion for your developers and irregularities for your end users.

Are your selectors long? Using lots of IDs? Specificity wars are frustrating and piling on new CSS will only make the situation worse. Find potential problem areas and make a plan to fix.

via CSS Dig.

How to use solid web principles to justify what you were going to do anyway | A List, A Fart

Posted on by Evan Mullins

Imitation may be the sincerest form of flattery, but mockery must be the biggest sign of mainstream… And this is a good thing, alistapart.com, the de facto web publication for web professionals, now has a parody site: alistafart.com. Tongue in cheek, and sarcastic, but sadly, sometimes not very far from the truth…

In this era of the web, there are generations of designers and programmers who have gone before us. Web design is being taught formally in schools and universities, and we draw knowledge from centuries of art, industrial design, and typography. Like never before, there is a wealth of great web principles that we can use to justify doing whatever it is we already wanted to do.

via How to use solid web principles to justify what you were going to do anyway | A List, A Fart.

Add Shortcode with Add Media Button

Posted on by Evan Mullins

This code snippet really helped me today and since the post doesn’t have commenting enabled, I wanted to say thanks here! Working on building a WordPress plugin that generates shortcodes and wanted an interface for the user to create their own with a wizard of sorts, so using a media button, shortcode and thickbox all together wasn’t very documented anywhere that I could find until I came across this one and I was happy to be able to lift what I needed from this snippet and see my code working like a charm now. The plugin I’m working on is for the Greenhouse Recruiting site and pulls in a job board onto your site via their API. The shortcode wizard will be included in a release soon so you can see it in action.

add shortcode to a page or post without remembering the shortcode itself… choose the shortcode parameters and then have it automatically place itself in the editor

via Add Shortcode with Add Media Button.