SitePoint News: We’ve partnered with UX Mastery

We’re thrilled to announce our partnership with UX Mastery. This enterprising group have been educating developers worldwide about the importance of building great user experiences, and we’re pleased to welcome them as our latest publisher partner.

At SitePoint, we’re all about building incredible — and beautiful — Internet things, which should by definition be free of awkward interfaces and confusing interactions. We’ve been supportive for a long time of UX Mastery’s message that people are more important than technology, and we're proud to offer their insightful ebook range to our members.

From today, UX Mastery’s three ebooks will be available on Learnable, our online learning platform. All Learnable members will be able to access the ebooks online, and annual members will also given the option to download them. If you’re not a member yet, we suggest you join to access these great titles, as well as the extensive SitePoint library. The UX Mastery titles are also available for individual purchase through Learnable.

Developers of all backgrounds and levels of experience can gain invaluable insight into the importance of UX with these brilliant books. Welcome to the SitePoint family, UX Mastery!

Find Out More

Continue reading %SitePoint News: We’ve partnered with UX Mastery%

by Ophelie Lechat via SitePoint

Basic Performant Sharing Buttons

This is a lightweight, simple solution for adding sharing buttons to your site. Like many things, there are many ways to achieve this but the main goal of this solution is performance.

Every major social network provides an easy way to add sharing buttons to your site, but the downside of many of these is each button loads various scripts and stylesheets increasing the page weight. Generally speaking, say you wanted to have 4 sharing buttons (Twitter, Facebook, Google+ and LinkedIn) it’s more than likely you will be loading 8+ extra resources.

Using the provided solutions from the major networks is convenient, but less then ideal if performance is a main priority.

A few things to keep in mind with this basic solution is you won’t get the full pop-up experience which has become a common pattern for most sharing buttons. But adding the _blank value to the target attribute to open the links in the new tab kinda gives you the same effect in my opinion.

So our goal is to share the current page and not bloat the page. Thankfully, each major social network provides a URL that we can pass in some arguments to archive just this.

For the last few years Brad Vin has been keeping an up to date list of the most useful Sharing URL’s. Brad has 12+ URL which you might find helpful but for this article we are only going to explore 3. Facebook, Google+ and Twitter.

Facebook

http://ift.tt/1d2xeZT}

Google+

http://ift.tt/NzFl4g}

Twitter

https://twitter.com/share?url={url}&text={title}&via={via}

To kick things off you will see the above require some arguments.

• URL (dynamic)
• Title (dynamic)
• Via (static)

---

There are a few ways to dynamically pass values into the URL. It really depends on how your site is built. The examples below will utilise WordPress’s built in functions.

Creating the Twitter share URL using WordPress’s built in functions:

https://twitter.com/share?url=<?php echo get_permalink(); ?>&text=<?php echo get_the_title(); ?>&via=wdweekly

The above uses get_permalink(), which gets the current page URL and get_the_title() which gets the title of the article. Also the passed in via argument is the Web Design Weekly twitter handle wdweekly.

So the next thing we need to do is add this in the desired location within our site and create the appropriate markup like so:

<a href="https://twitter.com/intent/tweet?text=<?php echo get_the_title(); ?>&url=<?php echo get_permalink();?>&via=wdweekly" target="_blank" title="twitter"> Twitter</a>

---

To take the links to the next level all we need to do is add some SVG icons within our link markup and we have our super speedy sharing buttons.

Twitter SVG Icons added

<a href="https://twitter.com/intent/tweet?text=<?php echo get_the_title(); ?>&url=<?php echo get_permalink();?>&via=wdweekly" target="_blank" title="twitter">
    <svg width="56" height="56" viewBox="0 0 56 56" xmlns="http://ift.tt/nvqhV5"><title>Twitter</title><g fill="none" fill-rule="evenodd"><path d="M.106.183h55.127V55.31H.106V.183z" fill="#00ACED"/><path d="M37.09 21.016c-.728.352-1.504.58-2.325.685.837-.538 1.48-1.387 1.784-2.404-.784.497-1.65.852-2.575 1.06-.735-.85-1.79-1.38-2.95-1.38-2.234 0-4.045 1.946-4.045 4.354 0 .338.035.673.102.988-3.355-.174-6.34-1.914-8.336-4.544-.346.642-.545 1.388-.545 2.19 0 1.506.714 2.848 1.8 3.617-.663-.026-1.287-.21-1.832-.54v.06c0 2.105 1.395 3.862 3.245 4.27-.34.097-.698.143-1.07.143-.258 0-.505-.018-.755-.078.513 1.737 2.008 2.998 3.777 3.023-1.385 1.174-3.128 1.864-5.023 1.864-.328 0-.65-.02-.966-.06 1.79 1.24 3.912 1.964 6.2 1.964 7.44 0 11.51-6.638 11.51-12.39 0-.186-.004-.372-.013-.558.79-.623 1.476-1.39 2.018-2.262" fill="#FFF"/></g></svg>
</a>

Facebook SVG Icons added

<a href="http://ift.tt/1cFNY44 echo get_permalink(); ?>" target="_blank" title="Facebook">
    <svg width="56" height="56" viewBox="0 0 56 56" xmlns="http://ift.tt/nvqhV5"><title>Facebook</title><g fill="none" fill-rule="evenodd"><path d="M.32.183h55.127V55.31H.32V.183z" fill="#3B5998"/><path d="M32.446 24.287h-3.108V22.25c0-.766.507-.945.865-.945h2.192V17.94l-3.02-.01c-3.352 0-4.114 2.508-4.114 4.114v2.243h-1.938v3.467h1.94v9.81h4.076v-9.81h2.75l.358-3.467" fill="#FFF"/></g></svg>
</a>

Google+ SVG Icons added

<a href="http://ift.tt/IIZSQS echo get_permalink(); ?>" target="_blank" title="Google+">
    <svg width="56" height="56" viewBox="0 0 56 56" xmlns="http://ift.tt/nvqhV5"><title>Google+</title><g fill="none" fill-rule="evenodd"><path d="M.5.18h55.127v55.127H.5V.18z" fill="#DD4B39"/><path d="M28.49 29.307c-.54-.38-1.57-1.31-1.57-1.855 0-.64.18-.954 1.144-1.707.986-.77 1.685-1.855 1.685-3.115 0-1.5-.67-2.963-1.924-3.446h1.89l1.336-.965h-5.966c-2.674 0-5.19 2.026-5.19 4.372 0 2.4 1.822 4.335 4.543 4.335.19 0 .372-.004.552-.017-.176.338-.303.72-.303 1.113 0 .667.358 1.208.81 1.65-.342 0-.673.01-1.032.01-3.314 0-5.864 2.11-5.864 4.297 0 2.155 2.796 3.503 6.108 3.503 3.777 0 5.863-2.143 5.863-4.298 0-1.728-.51-2.763-2.086-3.878zM25.3 26.32c-1.537-.047-2.998-1.72-3.263-3.74-.266-2.017.765-3.562 2.3-3.517 1.538.047 3 1.665 3.264 3.684.265 2.02-.765 3.618-2.302 3.572zM24.7 36.53c-2.29 0-3.944-1.45-3.944-3.19 0-1.707 2.052-3.128 4.342-3.103.534.006 1.032.09 1.484.238 1.243.864 2.134 1.352 2.386 2.338.047.2.073.405.073.615 0 1.742-1.12 3.1-4.34 3.1z" fill="#FFF"/><path d="M34.846 26.494v-2.322h-1.87v2.322h-2.32v1.87h2.32v2.322h1.87v-2.322h2.323v-1.87h-2.324" fill="#FFF"/></g></svg>
</a>

All going well you should now have some nice looking buttons.

To see a working example just click on the sharing icons at the end of this article.

---

If you are still not convinced and are still keen to use the provided code snippets from the major networks, Nicolas Gallagher and Mathias Bynens have worked together to create a handy async script that could be helpful.

The post Basic Performant Sharing Buttons appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Modify footer text in WordPress Admin area

If you happen to develop sites for your clients in WordPress it is worth taking a few extra steps to customise the WordPress admin. Thankfully WordPress comes with lots of built in hooks to make this super easy.

With a fresh install, you will be greeted with the following footer text in the footer admin:

Thank you for creating with WordPress.

To adjust this text, add the following snippet in your functions.php file.

function modify_footer_admin () {  
  echo 'Site developed by <a href="http://ift.tt/1DD1ilh">Web Design Weekly</a>. Powered by <a href="http://ift.tt/eFdXkB">WordPress</a>';
}
add_filter('admin_footer_text', 'modify_footer_admin');

You can dig into the source code a little more here.

The post Modify footer text in WordPress Admin area appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Remove / disable textarea resize image

If you are a little OCD or have the need to stop your <textarea> from being able to be resized thankfully there is a super easy way to achieve this with the CSS resize property.

<textarea class="my-textarea-class></textarea>

.my-textarea-class {
  resize: none
}

The post Remove / disable textarea resize image appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Linking to an image folder within a WordPress theme

During WordPress theme development you will more then likely need to display some images that are located within your theme directory.

The location of the images folder can vary greatly. It really comes down to how you like to set things up.

Generally speaking if you were to have an images folder in the root of your theme you can link to it like so from your php files:

<img src="<?php bloginfo('stylesheet_directory'); ?>/images/your-image.png">

The post Linking to an image folder within a WordPress theme appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Force up and down arrow for number input

Those with a keen eye will notice that the up and down arrows for the number input doesn’t show up in Chrome (and some other WebKit based browsers) until you hover or are focused on the input.

To force the arrows to be visible we just need to change the opacity of the inner and outer spin button.

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
   opacity: 1;
}

The post Force up and down arrow for number input appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly

Better PHP Logging

If you are doing any kind of PHP development you will no doubt need to log out some values. Unlike JavaScript, logging out to the browser developer tools isn’t possibly as PHP is a server side language.

Thankfully with a tiny bit of markup wrapping your var_dump or print_r statement you can easily read information about the variable.

<?php

echo "<pre>"; 
var_dump($your_variable); 
echo "</pre>";

?>

Or

<?php

echo "<pre>"; 
print_r($your_variable); 
echo "</pre>";

?>

The post Better PHP Logging appeared first on Web Design Weekly.

by Jake Bresnehan via Web Design Weekly