    
|
|
|
We’re all looking for ways to insert some cool into our designs, and you’d have to go some way to be cooler than this week’s deal from our sister-site MightyDeals.com; a great vintage typeface from Yellow design studio.
The Veneer font is a lovingly rendered, all-caps, typeface with multiple distress options. It’s ideal for inserting a bit of organic texture into your designs, whether they be flat or not.
Based on early 20th century advertising sans-serifs like Monotype Grotesque, the lowercase has been dropped, the corners rounded and distress reminiscent of the imperfections in wood block prints have been added.
Veneer is a bold, but friendly, typeface with regular spacing and minimal detail so that nothing is lost in the distress. Speaking of the distress, the typeface is actually several fonts with three levels of distress: there’s Veneer One, regular and italic; Veneer Two, regular and italic; and Veneer Three, regular and italic. What’s more, for alphabetic characters each font has an additional distress level in the lowercase slot giving you a total of 6 levels of distress.
Also included is Veneer Extras, a set of 38 icons designed to compliment the typeface. There’s a moustache, a couple of revolvers, some weather effects, a nice bird — a great alternative to the standard Twitter icon — even a charming (if slightly incongruous) alternative ampersand.
Great for adding a vintage touch to T-shirt designs and even posters, the high levels of detail in the distress means the fonts look good even at high resolutions.
Desktop versions come with opentype language support, webfont versions have been subset for optimal file size.
Normally this set of fonts sells for $39, but for a limited time, you can get them for just $9. But why not think about increasing your savings? You can get the desktop and webfont versions together for just $16! Head over to MightyDeals.com to grab this bargain.
Have you used Veneer in a project? What uses can you envisage for it? Let us know in the comments.
| Beginners Guide to Building WordPress Plugins – only $29! |  |
|
|
There have been a couple of good articles lately on improving the Sass/CSS workflow by using 1) Source Maps so Chrome knows what's up with your Sass files and partials 2) Telling Dev Tools to save changes back to disk 3) Ensuring those changes get automatically re-compiled 4) Using the LiveReload browser extension to ensure those changes are injected onto the page.
Ben Frain's Faster Sass debugging and style iteration with source maps, Chrome Web Developer Tools and Grunt and Tim Lucas' Getting started with CSS sourcemaps and in-browser Sass editing.
Source Maps requires Sass 3.3 which is in Alpha and and doesn't work with Compass yet.
Direct Link to Article — Permalink
Sass + Dev Tools Workflow is a post from CSS-Tricks
]]>Action hooks are one my favorite features WordPress has to offer. Today we’ll get acquainted with how to make use of the default hooks in in themes and plugins and even how to create our own.
wp_head() and wp_footer()
If you’ve done any custom WordPress theme development, odds are you’ve run across wp_head() and wp_footer() before. They’re the two most common and essential action hooks in the WordPress ecosystem. Since they’re primary used to insert code just above </head> and </body> respectively, most plugins that have anything to do with the front-end will usually break without them.
Below, we’ll look at how to make use of them ourselves.
Hooking into an action hook is easy. Let’s say we’re creating a plugin that allows users to upload a custom favicon from the admin panel. Obviously, that entire process is a bit outside the scope of this tutorial, but let’s focus on just the part that inserts the favicon code into the document <head>. First, we’ll create a function that echos out the favicon code.
function myplugin_favicon_head_code() {
echo '<link rel="icon" type="image/png" href="path/to/favicon/file">';
}
Next, we’ll hook into the wp_head() action hook.
add_action('wp_head', 'myplugin_favicon_head_code');
And there you have it! We’ve inserted code into our document <head> without ever touching our template files. As you can see, the first parameter is the action hook you’re hooking into and the second is the function you’re referencing.
wp_head(), wp_footer and the rest of the gang are nice and all, but what if we want to create our own hooks? Thankfully, WordPress makes this really easy with do_action(). Simply put it wherever you want your custom hook to display in your theme files.
<?php do_action('my_custom_action_hook'); ?>
This hook is now available to be used using add_action() just like the rest of the WordPress default action hooks.
add_action('my_custom_action_hook', 'my_really_cool_function');
Let’s say I do a lot of WordPress client work and I’ve decided I want to create a simple, parent-theme framework to start my sites with. I can be fairly certain that a few things will be the same from site-to-site. Each page will have a header with a page navigation, a main content section and a footer.
Here are my three major parent-theme files.
<!DOCTYPE html>
<html>
<head>
<title><?php wp_title(); ?></title>
</head>
<body>
<header>
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
<nav>
<?php wp_list_pages(); ?>
</nav>
</header>
<?php get_header(); ?>
<!-- The Loop goes here. -->
<?php get_footer(); ?>
<footer>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></footer>
</body>
</html>
I won’t cover creating Child Themes here as it’s been well-documented in the WordPress Codex. If you aren’t familiar with the process or haven’t done it in a while, I’d highly recommend you head over and read up on it. It’ll take five minutes flat. Don’t worry, I’ll wait. 
We’ve got a solid base here, but what if we need additional markup in the end project? Perhaps our designer has included a small section in the design below the footer with contact info. How are we going to do that?
Typically would create a second footer.php in the child theme, overriding our parent theme’s footer.php and thus giving us the ability to add our additional markup. But not today. Instead, we’ll create a custom action hook in the parent theme and hook into it in the child theme.
Let’s take this one step at a time.
I’ll add two action hooks to the parent theme footer.php - one for above the <footer> and one for below it:
<?php do_action('parenttheme_above_footer'); ?>
<footer>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?></footer>
<?php do_action('parenttheme_below_footer'); ?>
</body>
</html>
Now, in our child theme’s functions.php file, we’ll add something similar to this:
function childtheme_contact_info() {
echo 'You can contact us via email at <a href="mailto:us@example.com">us@example.com</a>';
}
add_action('parenttheme_below_footer', 'childtheme_contact_info');
Voilà! Now, without having to touch a line of code in our parent theme or override the entire parent theme footer.php in our child theme, we’ve added additional markup to our page.
We’ve just scratched the surface of the power of action hooks. For additional reading, I’d highly recommend the following resources.
The post Getting Acquainted with WordPress Action Hooks appeared first on Treehouse Blog.
]]>"Grace Hopper was a totally exceptional experience. I had the opportunity for three on-site interviews, which offered great practice with technical interviews." -- Emily Scheerer, Computer Science
"It was great meeting a bunch of new people from all around the country at the conference as well as networking with many of the biggest names in technology, like Facebook, Twitter, Apple, and Microsoft. I know getting to meet these recruiters in person was a huge opportunity and I am very optimistic in my chances of getting an internship on the west coast, which is one of my dreams." -- Alec Pulianas, Computer Engineering
Registration costs $290 until 7/26, then goes up to $310 from 7/27 until the deadline of 9/25.Nice writeup by Marc Hinse. It's similar to Uncle Dave's Ol' Padded Box, except the percentage padding-bottom is moved to a pseudo element where it doesn't need to be adjusted when the width value changes.
Direct Link to Article — Permalink
Easier Aspect Ratio Elements is a post from CSS-Tricks
]]>|
|
|
|
|
|