Stunning examples of CSS loaders

CSS Loaders


A nice collection, with demos and source code, of 8 different loader styles.
More info/View sources

Spinkit loaders


10+ pure CSS loaders, easy to integrate in any kind of site.
More info/View sources

Loaders and Spinners


An extensive collection of loaders and spinners, some pure CSS and some CSS/jQuery. Awesome in any case!
More info/View sources

CSSLoad


Probably the most complete library of the genre available on the internet, cssload.net is an entire website dedicated to loaders of all kind.
More info/View sources

Loaders.css


Delightful and performance-focused pure css loading animations. Over 25 different styles to choose from.
More info/View sources

Text Spinners


This project tries to mimic command line spinners like those from cli-spinners (where most of them are taken from) and bring them to the web.
More info/View sources

SpinThatShit


SpinThatShit is a set of SCSS mixins for single element loaders and spinners.
More info/View sources

Cleanest CSS spinner, ever


An oldie, but goldie: In this short tutorial you’ll learn how to easily create a clean CSS spinner. Tested in Chrome, Firefox, Safari, IE10. Should degrade gracefully on IE9 (spinner should look fine, just no animation).
More info/View sources

7 types of HTML codes every novice WordPress user should know

What Is HTML?

HTML stands for Hypertext Markup Language. It’s a system—or “language”—used for formatting digital documents. HTML codes—also called markup tags—make it possible for browsers to translate plain text into formatted headers, bold text, paragraphs, and more.

HTML tags are sets of keywords placed between angle brackets. Most tags comes in pairs, and then the text you want formatted is placed between these tags. There is a start tag, which uses the keyword between angle brackets, and an end tag, which is the same except with a slash preceding the keyword.

Let’s take an example. The markup tag for emphasis (which most browsers translate into italics) begins with <em> and ends with </em>. In your document, it will look like this:

<em>This text is emphasized.</em> 

When translated by the browser, site visitors see this:

This text is emphasized.

Note: Some tags are non-container tags, meaning they stand alone without content. They don’t need to be closed in an end tag.
Although WordPress isn’t as simple for the novice as website builders are, an understanding of HTML basics can help WordPress users in customizing their site. For example, if something seems strange in your blog post, WordPress allows you to toggle between the visual editor and the text editor. The text editor displays your post in HTML format, and by understanding the basics, you’ll be able to see what’s going wrong so you can deal with the issue.

Now, here’s 7 types of HTML codes every novice WordPress user should know:

1. Skeletal Tags

Skeletal tags provide the layout for your entire document. You might see these tags if you go into your theme’s code and try to edit it. Word of advice: Don’t try editing your theme’s code unless you know what you’re doing. If you must, then create a child theme first so you don’t risk screwing up your theme’s code.
It’s unlikely that you’ll use these codes as a novice WordPress user, but you may need to find them from time to time. For example, if you’re working with Google’s range of tools, it often requests that you paste an authorization code in the “head” section of your site. Knowing the HTML code that defines this will help you find where to place the authorization code. A few codes to be familiar with include:

  • <html> This is a section placed in the beginning that describes your document.
  • <head> The head section is used for behind-the-scenes information.
  • <title> This tag simply defines the document title, which should differ from page to page on your site.
  • <meta> The meta tag provides background information for the browser, such as keywords, descriptions, or copyright information.
  • <body> The content contained within the body of the document is what users will see on the page.

2. Block Level Tags

Block level tags show how text should be grouped together. Examples include:

  • <p> This defines a paragraph.
  • <blockquote> This formats a long quotation. It will appear differently to the user based on your site’s theme and the user’s browser.
  • <address> This defines contact information, such as if you place the author’s email at the end of a blog post.
  • <pre> This tag defines preformatted text.

3. Heading Tags

Heading tags are a type of block level tag that show document hierarchy for both search engines and users. Though your site’s theme may format them all with different fonts and font sizes, it’s important to be aware of how you’re using each tag.
Heading 1 is used for the title of your document, such as your blog post’s title. In this case, our files would show “7 Types of HTML Codes Every Novice WordPress User Should Know” encased in the h1 tags. Heading 2 is meant for your main subheadings. If you have sub-subheadings, you’ll use the Heading 3, or h3, tag. This continues down through the document up to h6.

These tags appear as:

  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>

Remember that each tag needs to close with an end tag. For example, our document would show the following for this section:
<h3>3. Heading Tags</h3>

4. Inline Text Tags

Inline text tags are used to format words within block level tags like the paragraph tag. Some common examples include:

  • <em> This provides emphasis, most commonly in italics form. You can also use <i> for non-emphasized italic text.
  • <strong> This emphasizes text strongly, usually as bold text. You can also use <b> for non-emphasized bold text.
  • <q> This tag marks short quotes within paragraphs.
  • <del> This tag creates a horizontal line through text to show deleted text.
  • <br> This is a non-container tag that creates a single line break within a paragraph.

5. Link Tags

Link tags define where a link should be placed and which page it should point to. It starts with a tag formatted like this:

<a href="URL"> 

Simply replace “URL” with the web address you want to send readers to. Do not remove the quotation marks.

Next comes your anchor text, or the text that is being linked. Then you’ll end with </a>. Together, it all looks something like this:

<a href="http://www.catswhocode.com/">Cats Who Code</a> 

It will appear like this on the page:
Cats Who Code

6. Image Tags

Image tags are just what they sound like. They define an image and its source. These are non-container codes, meaning you don’t need the end tag for it to work. The image tag looks like this:

<img src="THE IMAGE URL> 

Simply replace “THE IMAGE URL” with the location of the photograph you want to insert into the document. Be sure you don’t remove the quotation marks.

With this tag, you can also use extra attributes, though they’re not necessary. For example, you might add alternative text, which are keywords that give search engines an idea of what your photograph is about. That tag would look like this:

<img src="THE IMAGE URL" alt="IMAGE ALT TEXT"> 

7. List Tags

List tags simply create numbered and bullet lists. The <ul> tag defines an unordered list and will appear on the page as a bullet list. The <ol> tag is for ordered lists that use numbers. Use the <li> tag to define an element within a list. Here’s an example for an unordered list:

<ul> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
</ul> 

Readers will see it as:

  • Item 1
  • Item 2
  • Item 3

Whether you’ve just created a WordPress blog or have been navigating the CMS for a while, knowing these basic HTML codes may prove useful in formatting your site. Now that you’re slightly familiar with them, feel free to try these codes out on your own site for practice. Don’t forget to come back and let us know how it goes!

This is a guest post by Robert Mening

WordPress Themes for web development and design blogs

Singl


Singl is a free, one-column theme with a slick and professional look. This theme is extremely easy to customize according to your needs and is, in my opinion, one of the best current options if you are looking for a free theme to start a web development or web design blog.
More info, demo, etc

Insight


Big images, beautiful typography, packed with features: Insight is definitely a great choice if you’re looking for an impressive theme for a coding or design oriented blog.
More info, demo, etc

Newsrack


Lots of features (integrated newsletter sign-up form, infinitive single post load, sticky menu, etc…) for bloggers who are serious about what they do. A great theme to take your blog to the next level.

More info, demo, etc

Extra


Great looks, clean code, mobile friendly… if I got a new theme right now for CatsWhoCode, it would most probably be this one. Brought to you by ElegantThemes, premium WordPress Themes veterans, Extra is a top-notch choice for tech, design, and coding bloggers.
More info, demo, etc

Electus


Electus is a clean, modern and totally responsive theme loaded with great features like HTML5 and CSS3 effects. The theme is beautiful out of the box, but one thing that I really like with it is how easy it is to customize it. Its price is also very interesting as Electus is priced half of the average theme price on ThemeForest.
More info, demo, etc

Hyperpress


Another clean looking and clean coded theme for serious bloggers. My favorite feature of it is definitely the possibility of using a huge image on single posts. Perfect for design blogs!
More info, demo, etc

Corporate


Corporate is a professional-looking multi-purpose theme that is based on the Themify.me site. Both responsive and Retina ready, Corporate is built for businesses, web apps and freelancers. The theme is packed with multiple features such as video background, animations, social icons, and animated progress bars.
More info, demo, etc

Next steps

Congratulations on making your blog better by using a quality theme! Now that you have been completing a crucial part of your site, here is a few more steps you should take in order to make a better blog:

Learn how to make your blog faster: the speed of a website is a very important thing to care about, especially since it’s a known fact that Google is incorporating website speed as a factor of how the site will rank. Google has developed a tool called PageSpeed Insights, which allows you to check the speed of your website based on several factors. I checked mine, and it ranked poorly, so I fixed it. This article displays the detailed process of what I’ve done.

Learn the best practices of displaying code in WordPress: if you’re blogging about programming languages, chances are that you often need to display chunks of code in your blog posts. It might seem easy, but unfortunately, sometimes it can become very tricky. In this article, I have compiled my own tips and tricks to easily display code snippets on your WordPress blog.

Learn how to optimize images for the web: in 2016, all modern websites are media rich. Amongst other media, images themselves represent over 60% of the average byte per content type downloaded when a web page is loaded. This is why, in your quest of an optimized, fast loading website, image optimization must be on your priority list. Here are the most common mistakes made by developers and designers when it comes to handling images, and how to solve them.

5 easy ways to embellish your WordPress posts

Using a featured image as background


A super easy, yet efficient, way to decorate your posts is to use the “featured image” function to display a custom background image. This technique creates many possibilities and will make each of your posts to look different.

To apply this tip, edit the single.php file from your theme, and add the following code. Once done, simply set backgrounds using the “featured image” WordPress feature.

<div class="image-thumbnail" style="background-image; url(<?php echo get_the_post_thumbnail_url() ?>)"></div>

Source/additional information

Make sure WordPress is written with its capital P


It’s not wordpress… It’s WordPress! Especially if you’re blogging about technology, web design or coding, that widespread spelling mistake is gonna make you look unprofessional. So if you have a hard time remembering the correct spelling, you’ll be happy to know that there’s a function made for that purpose. Have a look below to see how it works:

<?php capital_P_dangit( "I have a hard time remembering the correct spelling of wordpress" ); ?> 

Source/Additional information

Display code nicely


When you’re writing code on your blog, things can turn ugly really quick: encoding problems, unexpected line breaks, and so on. Sadly, many free and commercial themes aren’t fit to display code properly.

There’s a whole bunch of plugins that can help you to display code on your blog, and also this post I wrote a few weeks ago. In a hurry? Here’s the exact CSS code I use on my blog to display code:

pre{                     
	background:#f5f5f5;
	border:1px #eee solid;
	border-top:20px #eee solid;
	font-family:Consolas, courier;   
	font-size:0.9em;        
	white-space:pre;
	overflow-x:auto;
}  

Additional information

Pay attention to typography


When it comes to the visual aspect of a blog post, typography is at least 80% of it. Make sure your text is readable (also on mobiles!) by using different headline sizes, blockquotes, indentation…

Although there are no written rules in terms of typography, here’s a few guidelines that I tend to use every time I design a website:

  • When it comes to fonts, less is more: 3/4 different fonts is a good balance for your website.
  • Always make sure that the contrast between the font color and the background makes it readable.
  • Make use of different font sizes, font colors, etc, for different sections of text (ex: quotes, subtitles, excerpts…)
  • Make sure that your font size is big enough to be read by everyone, on any kind of device.

If you’d like to explore this interesting topic more, here’s a very interesting article by WPmudev.

Make it display quickly


The look of a blog post is definitely an important thing, but even more important is your loading speed. If your page takes 10 seconds to load, never mind how pretty it is, 95% of potential visitors won’t wait and will simply visit your competitor’s site instead of yours.

Use Google PageSpeed Insights to check how fast your website or page displays on desktops and mobiles. You’ll get a handful of pointers on what to fix to make your site faster. If you need more help, check this article out, which contains step-by-step fixes for the most common speed problems on a WordPress blog.

vim cheat sheet for 2016

Basics

:e filename Open filename for edition
:w Save file
:q Exit Vim
:q! Quit without saving
:x Write file (if changes has been made) and exit
:sav filename Saves file as filename
. Repeats the last change made in normal mode
5. Repeats 5 times the last change made in normal mode

Moving in the file

k or Up Arrow move the cursor up one line
j or Down Arrow move the cursor down one line
e move the cursor to the end of the word
b move the cursor to the begining of the word
0 move the cursor to the begining of the line
G move the cursor to the end of the file
gg move the cursor to the begining of the file
L move the cursor to the bottom of the screen
:59 move cursor to line 59. Replace 59 by the desired line number.
20| move cursor to column 20.
% Move cursor to matching parenthesis
[[ Jump to function start
[{ Jump to block start

Cut, copy & paste

y Copy the selected text to clipboard
p Paste clipboard contents
dd Cut current line
yw Yank word
yy Copy current line
y$ Copy to end of line
D Cut to end of line

Search

/word Search word from top to bottom
?word Search word from bottom to top
* Search the word under cursor
/\cstring Search STRING or string, case insensitive
/jo[ha]n Search john or joan
/\< the Search the, theatre or then
/the\> Search the or breathe
/\< the\> Search the
/\< ¦.\> Search all words of 4 letters
/\/ Search fred but not alfred or frederick
/fred\|joe Search fred or joe
/\<\d\d\d\d\> Search exactly 4 digits
/^\n\{3} Find 3 empty lines
:bufdo /searchstr/ Search in all open files
bufdo %s/something/somethingelse/g Search something in all the open buffers and replace it with somethingelse

Replace

:%s/old/new/g Replace all occurences of old by new in file
:%s/onward/forward/gi Replace onward by forward, case unsensitive
:%s/old/new/gc Replace all occurences with confirmation
:2,35s/old/new/g Replace all occurences between lines 2 and 35
:5,$s/old/new/g Replace all occurences from line 5 to EOF
:%s/^/hello/g Replace the begining of each line by hello
:%s/$/Harry/g Replace the end of each line by Harry
:%s/onward/forward/gi Replace onward by forward, case unsensitive
:%s/ *$//g Delete all white spaces
:g/string/d Delete all lines containing string
:v/string/d Delete all lines containing which didn’t contain string
:s/Bill/Steve/ Replace the first occurence of Bill by Steve in current line
:s/Bill/Steve/g Replace Bill by Steve in current line
:%s/Bill/Steve/g Replace Bill by Steve in all the file
:%s/^M//g Delete DOS carriage returns (^M)
:%s/\r/\r/g Transform DOS carriage returns in returns
:%s#<[^>]\+>##g Delete HTML tags but keeps text
:%s/^\(.*\)\n\1$/\1/ Delete lines which appears twice
Ctrl+a Increment number under the cursor
Ctrl+x Decrement number under cursor
ggVGg? Change text to Rot13

Case

Vu Lowercase line
VU Uppercase line
g~~ Invert case
vEU Switch word to uppercase
vE~ Modify word case
ggguG Set all text to lowercase
gggUG Set all text to uppercase
:set ignorecase Ignore case in searches
:set smartcase Ignore case in searches excepted if an uppercase letter is used
:%s/\<./\u&/g Sets first letter of each word to uppercase
:%s/\<./\l&/g Sets first letter of each word to lowercase
:%s/.*/\u& Sets first letter of each line to uppercase
:%s/.*/\l& Sets first letter of each line to lowercase

Read/Write files

:1,10 w outfile Saves lines 1 to 10 in outfile
:1,10 w >> outfile Appends lines 1 to 10 to outfile
:r infile Insert the content of infile
:23r infile Insert the content of infile under line 23

File explorer

:e . Open integrated file explorer
:Sex Split window and open integrated file explorer
:Sex! Same as :Sex but split window vertically
:browse e Graphical file explorer
:ls List buffers
:cd .. Move to parent directory
:args List files
:args *.php Open file list
:grep expression *.php Returns a list of .php files contening expression
gf Open file name under cursor

Interact with Unix

:!pwd Execute the pwd unix command, then returns to Vi
!!pwd Execute the pwd unix command and insert output in file
:sh Temporary returns to Unix
$exit Retourns to Vi

Alignment

:%!fmt Align all lines
!}fmt Align all lines at the current position
5!!fmt Align the next 5 lines

Tabs/Windows

:tabnew Creates a new tab
gt Show next tab
:tabfirst Show first tab
:tablast Show last tab
:tabm n(position) Rearrange tabs
:tabdo %s/foo/bar/g Execute a command in all tabs
:tab ball Puts all open files in tabs
:new abc.txt Edit abc.txt in new window

Window spliting

:e filename Edit filename in current window
:split filename Split the window and open filename
ctrl-w up arrow Puts cursor in top window
ctrl-w ctrl-w Puts cursor in next window
ctrl-w_ Maximize current window vertically
ctrl-w| Maximize current window horizontally
ctrl-w= Gives the same size to all windows
10 ctrl-w+ Add 10 lines to current window
:vsplit file Split window vertically
:sview file Same as :split in readonly mode
:hide Close current window
:­nly Close all windows, excepted current
:b 2 Open #2 in this window

Auto-completion

Ctrl+n Ctrl+p (in insert mode) Complete word
Ctrl+x Ctrl+l Complete line
:set dictionary=dict Define dict as a dictionnary
Ctrl+x Ctrl+k Complete with dictionnary

Marks

m {a-z} Marks current position as {a-z}
' {a-z} Move to position {a-z}
'' Move to previous position

Abbreviations

:ab mail [email protected] Define mail as abbreviation of [email protected]

Text indent

:set autoindent Turn on auto-indent
:set smartindent Turn on intelligent auto-indent
:set shiftwidth=4 Defines 4 spaces as indent size
ctrl-t, ctrl-d Indent/un-indent in insert mode
>> Indent
<< Un-indent
=% Indent the code between parenthesis
1GVG= Indent the whole file

Syntax highlighting

:syntax on Turn on syntax highlighting
:syntax off Turn off syntax highlighting
:set syntax=perl Force syntax highlighting

Displaying code in WordPress: Tools, plugins and best practices

wpcode

Encoding your code

HTML has special handling for characters like < and > symbols, which can lead to some weird effects – blocks of text not appearing, broken formatting, and generally just not seeing what you expect to see.

This can all be fixed by “escaping” those characters. This process involves scanning the text for those characters, and replacing them with a special character-code that browsers can interpret as the correct symbol.

Depending on which kind of code you want to display, you might have to encode it so it won’t get “eaten” by WordPress. Basically, the characters leading to display problems are < and >, as those characters are used to open and close HTML tags.

Unless you’re using a plugin that takes care of encoding your code, you need to do so manually. Otherwise, the HTML tags such as <div> will be rendered as HTML by your browser, and will mess up your layout.

I’m using a handy tool called HTML Encoder to convert HTML special characters into escaped characters which will display correctly with a WordPress blog post.
wpcode

Displaying code in your blog posts

There’s basically two ways to display code: the first one is to display a short snippet such as a HTML tag or a PHP function name. In that case, you should use a <code> tag, as shown below:

This is a paragraph and some PHP <code><?php echo "test"; ?></code>

Some other times, you want to display a block of code, as I often do on some of my posts. In those cases, you should embed your code within <pre> and </pre> tags:

This is a block of text/code embed within <pre> and </pre> tags.

If you’d like more information about using the aforementioned tags to display code in your blog posts, check out the page dedicated to the WordPress Codex.

Styling the <pre> tag

In order to make sure that your code will display nicely when embedded within <pre> and </pre> tags, there’s a few of things to consider:

  • Always use a monospaced font. Popular monospaced with good browser compatibility are Consolas, Monaco and the widespread Courier.
  • Avoid line breaks: your code won’t be readable if the lines are breaking all the time. To do so, use white-space:pre; in your CSS code.
  • Make your <pre> horizontally scrollable, using the overflow-x:auto; CSS property.

Here’s, for example, how the <pre> tags are styled on my blog:

article pre{                     
	background:#f5f5f5;
	border:1px #eee solid;
	border-top:20px #eee solid;
	font-family:Consolas, courier;   
	font-size:0.9em;        
	white-space:pre;
	overflow-x:auto;
}  

WordPress plugins to display code

When displaying lots of code on a WordPress blog, a plugin can be an option to consider. The main feature of code display plugins is generally syntax highlighting, which provides a way more readable code to your readers. But another very interesting aspect is the automatic encoding of HTML characters.

That being said, I’ve used that kind of plugins in the past and I always ended up using the good old “manual” way to display my code as many plugins are either too slow or demanding on resources, or require you to manually update your existing content. However, I’ve briefly tested three fresh plugins which seemed quite promising, so here’s the list:

  • Code Prettify is a handy and lightweight plugin that uses the Prettify library. It doesn’t require you to use shortcodes, class names, or such. It fully supports the display of code snippets within both <pre> and <code> tags.
  • Crayon Syntax Highlighter: Built-in PHP and jQuery, this plugin supports customizable languages and themes. It can highlight code from a URL or within a WordPress post. Definitely powerful and highly customizable, although not the fastest plugin around.
  • WP-GeSHi-Highlight has been around for quite a while and is an interesting plugin with tons of features. It supports 240 languages, is fast and mobile friendly, and the outputted HTML is clean and valid.

Giveaway: Win free WordPress help courtesy of WPKitchen.com

keycdn-featured-image

About WPKitchen

WPkitchen.com is a new company aiming to provide urgent WordPress help. Getting in touch with them is very simple, just check out WPkitchen.com and launch the chat to get in touch with a developer that will solve your issue in 60-80 minutes. As they are launching the service, the price for the first 50 subscribers is only 19 USD.
Also, in order to help you test the service, I installed WPkitchen‘s chat on CatsWhoCode for a limited amount of time.

WPkitchen.com can help you with:

  • CSS/HTML/PHP/JavaScript changes
  • Fixing CSS layout issues
  • Fixing small plugin issues
  • Fixing small theme issues
  • Adding contents/images
  • Reviewing website speed
  • Upgrading WordPress or plugins
  • WordPress Installation
  • WordPress Migration
  • WordPress Logo & Favicon Insertion
  • WordPress Contact Form Creation
  • WordPress Commercial Theme & Plugin Install
  • WordPress Social Integration
  • Google Analytics setup
  • WordPress SSL (HTTPS) Setup

How to enter the giveaway

Feeling lucky? Then enter our giveaway and try to grab a single-time free resolution of an issue.
All you need to do is to like WPKitchen’s Facebook page and like and comment the pinned post.

Bi-weekly, on mondays, the WPKitchen staff will randomly pick up two lucky winners who’ll get 60 minutes of WP help for free. Good luck everybody!

Fresh and useful WordPress hacks and snippets

wphacks

Track post views without using a plugin

A few plugins can help you tracking post views, but you actually don’t need a plugin to do that.

Here’s a set of functions that needs to be pasted in your theme’s functions.php file:

function getPostViews($postID){
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
        return "0 View";
    }
    return $count.' Views';
}
function setPostViews($postID) {
    $count_key = 'post_views_count';
    $count = get_post_meta($postID, $count_key, true);
    if($count==''){
        $count = 0;
        delete_post_meta($postID, $count_key);
        add_post_meta($postID, $count_key, '0');
    }else{
        $count++;
        update_post_meta($postID, $count_key, $count);
    }
}
// Remove issues with prefetching adding extra views
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);

Once done, you need to tell WordPress to track the views using the aforementioned functions. Paste the line below within the single.php file, inside the loop.

setPostViews(get_the_ID());

To display the view, use this function within the loop:

echo getPostViews(get_the_ID());

Source: WP Snipp

Capture users’ last login date

Some WordPress-based websites allow users to register. If your site allows user registration, you might want to know when was the last time a specific user logged in.

You first need to append the code below to your functions.php file:

// set the last login date
add_action('wp_login','wpsnipp_set_last_login', 0, 2);
function wpsnipp_set_last_login($login, $user) {
    $user = get_user_by('login',$login);
    $time = current_time( 'timestamp' );
    $last_login = get_user_meta( $user->ID, '_last_login', 'true' );
    if(!$last_login){
    update_usermeta( $user->ID, '_last_login', $time );
    }else{
    update_usermeta( $user->ID, '_last_login_prev', $last_login );
    update_usermeta( $user->ID, '_last_login', $time );
    }
}
// get last login date
function wpsnipp_get_last_login($user_id,$prev=null){
  $last_login = get_user_meta($user_id);
  $time = current_time( 'timestamp' );
  if(isset($last_login['_last_login_prev'][0]) && $prev){
          $last_login = get_user_meta($user_id, '_last_login_prev', 'true' );
  }else if(isset($last_login['_last_login'][0])){
          $last_login = get_user_meta($user_id, '_last_login', 'true' );
  }else{
    update_usermeta( $user_id, '_last_login', $time );
    $last_login = $last_login['_last_login'][0];
  }
  return $last_login;
}

Then, here’s how you display the latest login of a user:

// show last login date
global $current_user;
get_currentuserinfo();
echo '<p>Previous: Login date: ' . date("Y-m-d h:m:s", wpsnipp_get_last_login($current_user->ID,true)) . '</p>';
echo '<p>Current: Login date: ' . date("Y-m-d h:m:s", wpsnipp_get_last_login($current_user->ID)) . '</p>';

Source: WP Snipp

Automatically move JavaScript files to the footer

In order to improve the loading time of your WordPress blog, it is recommended that you move JavaScript files to the bottom of your HTML documents. Unfortunately, it isn’t always as easy as it seems, especially when using some plugins that inject code in the header. Here’s a simple solution to automatically move all JavaScript files to the bottom.

First, open your functions.php file and paste the following code in it:

/**
 * Filter HTML code and leave allowed/disallowed tags only
 *
 * @param string 	$text 	Input HTML code.
 * @param string 	$tags 	Filtered tags.
 * @param bool 		$invert Define whether should leave or remove tags.
 * @return string Filtered tags
 */
function theme_strip_tags_content($text, $tags = '', $invert = false) {

    preg_match_all( '/<(.+?)[\s]*\/?[\s]*>/si', trim( $tags ), $tags );
    $tags = array_unique( $tags[1] );

    if ( is_array( $tags ) AND count( $tags ) > 0 ) {
        if ( false == $invert ) {
            return preg_replace( '@<(?!(?:'. implode( '|', $tags ) .')\b)(\w+)\b.*?>.*?</\1>@si', '', $text );
        }
        else {
            return preg_replace( '@<('. implode( '|', $tags ) .')\b.*?>.*?</\1>@si', '', $text );
        }
    }
    elseif ( false == $invert ) {
        return preg_replace( '@<(\w+)\b.*?>.*?</\1>@si', '', $text );
    }

    return $text;
}

/**
 * Generate script tags from given source code
 *
 * @param string $source HTML code.
 * @return string Filtered HTML code with script tags only
 */
function theme_insert_js($source) {

    $out = '';

    $fragment = new DOMDocument();
    $fragment->loadHTML( $source );

    $xp = new DOMXPath( $fragment );
    $result = $xp->query( '//script' );

    $scripts = array();
    $scripts_src = array();
    foreach ( $result as $key => $el ) {
        $src = $result->item( $key )->attributes->getNamedItem( 'src' )->value;
        if ( ! empty( $src ) ) {
            $scripts_src[] = $src;
        } else {
            $type = $result->item( $key )->attributes->getNamedItem( 'type' )->value;
            if ( empty( $type ) ) {
                $type = 'text/javascript';
            }

            $scripts[$type][] = $el->nodeValue;
        }
    }

    //used by inline code and rich snippets type like application/ld+json
    foreach ( $scripts as $key => $value ) {
        $out .= '<script type="'.$key.'">';

        foreach ( $value as $keyC => $valueC ) {
            $out .= "\n".$valueC;
        }

        $out .= '</script>';
    }

    //external script
    foreach ( $scripts_src as $value ) {
        $out .= '<script src="'.$value.'"></script>';
    }

    return $out;
}

Once done, edit your header.php file. Replace the wp_head() tag by this:

<?php
ob_start();
wp_head();
$themeHead = ob_get_contents();
ob_end_clean();
define( 'HEAD_CONTENT', $themeHead );

$allowedTags = '<style><link><meta><title>';
print theme_strip_tags_content( HEAD_CONTENT, $allowedTags );
?>

And finally, place the code below into your footer.php file, just before the closing </body> tag.

<?php theme_insert_js( HEAD_CONTENT ); ?>

Source: WPRecipes

Display a disclaimer on older posts

If you blog about technology, some articles that may have been useful 5 years ago can be totally outdated today. If a post is very old, it can be a good thing to warn your readers about it so they’ll know that the information they’re reading might be out of date.

Paste the following code in your single.php file, within the loop. Edited the text on line 7 as desired.

<?
$ageunix = get_the_time('U');
$days_old_in_seconds = ((time() - $ageunix));
$days_old = (($days_old_in_seconds/86400));

if ($days_old > 365) {
  echo '<div class="disclaimer">DISCLAIMER: this post is older than one year and may not be up to date with latest WordPress version.</div>'; 
} 
?>

Source: WPRecipes

Pre-populate editor with default content

If you often publish lists, reviews or any other kind of articles with a specific layout, this tip can be a great time saver, as it pre-populates your WordPress editor with the default content of your choice, and supports various post types.

Here’s the code to paste into your functions.php file. Save the file after modifying the values of the $content variables, and you’re done.

add_filter( 'default_content', 'pu_default_editor_content' );

function pu_default_editor_content( $content ) {
    global $post_type;

    switch( $post_type ) 
    {
        case 'post':
            $content = 'Default content for blog posts.';
        break;

        case 'page':
            $content = 'Default content for pages.';
        break;

        case 'portfolio':
            $content = 'Default content for your portfolio pages.';
        break;

        case 'products':
            $content = 'Default content for blog posts.';
        break;
    }

    return $content;
}

Source: Paulund

Creative uses of the CSS :target pseudo class selector

What is :target?

Simply said, :target is a pseudo-class that represents the unique element with an id matching the fragment identifier of the URI of the document.

Consider an URI like this one:

http://example.com/example.php#references

Now, let’s say your stylesheet contains the following:

:target {
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}

If a user access the http://example.com/example.php#references url, the element having the references id will be the target, so the styles defined above will be applied to that element.

Regarding browser compatibility, :target is fully supported by Chrome 4+, Firefox 3.5+, IE 9+, Opera 9.5+ and Safari 3.2+.

Enough theory for now, let’s have a look at what :target can do for you.

Modal Popup


Modal Popups are almost on every website: showing offers, offering to sign in for a mailing list, and so on. Did you know how easy it is to create a modal popup using pure CSS and the :target pseudo class selector? Check this article and demo to find out, you won’t be disappointed!
View demoRelated article

Summary with :target selector


Pretty much the most widespread use of the :target pseudo class selector. A good example is Wikipedia, which uses it to highlight the targeted reference.
View demoRelated article

Pure CSS animated slideshow


Remember the time when creating an image slideshow was a long task involving the mandatory use of JavaScript? Now with CSS3, it’s totally possible – and easy – to make a beautiful slideshow with no JavaScript. Here’s an impressive example of what you can do with :target.
View demoRelated article

Slide-Out Navigation Drawer


Slide-Out menus are very popular, mainly on mobile websites. In fact, they offer a simple and compact way to navigate on a given website. Using :target, those menus can be achieved in pure CSS. Definitely an interesting technique to check as every developer has to do those kind of menus nowadays.
View demoRelated article

Pure CSS3 Lightbox


Wow, here is an example of the full power of CSS3: a lightbox with multiple effects, done with no JavaScript and an interesting use of :target.
View demoRelated article

8 amazing and free webfonts for all your webdesign needs

Novecento


Wow, I love this one! Novecento exists in two different versions, wide and narrow. The “wide” version, pictured here, is 100% free in both desktop and webfont versions. The “narrow” version will cost you $16 per font.
Download: Novecento

Nexa


Nexa is a commercial font ($17/font) but the two versions pictured here (Nexa Light and Nexa Bold) are totally free, so you definitely have no excuse if you don’t grab them for your collection!
Download: Nexa

Work Sans


Brought to you by Google Fonts, Work Sans is a very beautiful font that will perfectly fit most websites, blogs and apps.
Download: Work Sans

League Gothic


Not really new, but still extremely relevant. League Gothic is an amazing font, especially for headlines and titles.
Download: League Gothic

Oswald


Another one I couldn’t recommend enough for all your headline needs. I’m using this beautiful font on CatsWhoCode menu.
Download: Oswald

Roboto


Roboto is another Google Font with an outstanding popularity amongst designer and developers. Used by many sites and WordPress Themes, Roboto is definitely a good choice when looking for a clean and readable font with a modern feel.
Download: Roboto

Tikal Sans


Tikal Sans is a beautiful font that you can freely use. A great choice for both headings and texts for those looking for a readable but fancy font.
Download: Tikal Sans

Australia


If you’re looking for a fancy, all caps font, then you should definitely have a look at Australia, a beautiful and modern font.
Download: Australia

SuperSpray – One of A Kind Image Spray Add-On for Photoshop – only $9

A word about SuperSpray

SuperSpray is a unique Photoshop plugin. It lets you spray transparent png images on your canvas. It has some built-in objects to spray, but the real flexibility of SuperSpray is, you can use your own .png images as well.

Superspray is Updated and works with Photoshop CC 2014 – CC 2015. Here’s the full specs:

  • A Paintbrush of Images: with SuperSpray, you can spray transparent PNG images onto your canvas. Forget simply drawing with colors, now you can draw with images themselves!
  • True Word Art: make your projects truly unique with SuperSpray. Take a basic letter or word and instead of just drawing it in black, spray it with photos of leaves or candy or whatever you’d like. The result is a beautiful and original work of art, sure to captivate your audience.
  • Complete Control: with SuperSpray, you’ll get pinpoint control of your actions. You’ll be able to spray objects exactly where you want them. No need to manually spray objects; instead just paint your spray area black and let SuperSpray take over!
  • Big Time Saver: manually placing random images on your canvas takes up a lot of time. Let SuperSpray do the heavy work for you. Just a few clicks and your blank canvas is transformed into a gorgeous image-filled spray area.
  • Use Your Own Images: as long as they’re in a PNG format, you can use any image you’d like to spray. Just think of the possibilities! Sports teams. Food. Nature. Animals. Logos. The sky really is the limit (and you can even use the sky if you’d like!)
  • 22 Built-In Objects: besides using your own PNG images, SuperSpray comes with 11 sample objects in its library. Beautiful leaf and flower images are included with the application courtesy of Plaintextures.com.
  • Customizable Settings: there are a ton of flexible options for you in SuperSpray. Set the number of objects to be sprayed, the minimum and maximum object sizes and more!
  • Preview Changes: don’t worry about making mistakes. With just a click, you can view the final results of your efforts in a preview window.

Pricing and info

SuperSpray normally sells for $20, but today is the only day that you can get this amazing Photoshop Plugin for only $9 from MightyDeals! See how it works and see the results.

And if you want to save even more money on SuperSpray or any other deals from MightyDeals, you can get an extra 15% off anything with our exclusive coupon CATSWHOCODE.

JavaScript without jQuery: Tips and practical examples

Listening for Document Ready

A page can’t be manipulated safely until the document is “ready”. For that reason, we developers have taken the habit to wrap all of our JS code inside the jQuery $(document).ready() function:

$( document ).ready(function() {
    console.log( "ready!" );
});

The same result can be achieved easily using pure JavaScript:

document.addEventListener('DOMContentLoaded', function () {
    console.log( "ready!" );
});

Adding event listeners

Event Listeners are a very important part of JavaScript development. jQuery has a very easy way to handle them:

$(someElement).on('click', function() {
    // TODO event handler logic
});

You don’t need jQuery to create event listeners in JavaScript. Here’s how to do so:

someElement.addEventListener('click', function() {
    // TODO event handler logic
});

Selecting elements

jQuery makes it super easy to select elements using an ID, a class name, tag name, etc:

// By ID
$('#myElement');

// By Class name
$('.myElement');

// By tag name
$('div');

// Children
$('#myParent').children();

// Complex selecting
$('article#first p.summary');

Pure JavaScript features various way to select elements. All of the methods below work on all modern browsers as well as IE8+.

// By ID
document.querySelector('#myElement');

// By Class name
document.querySelectorAll('.myElement');

// By tag name
document.querySelectorAll('div');

// Children
$('#myParent').children();

// Complex selecting
document.querySelectorAll('article#first p.summary');

Using Ajax

As most of you know, Ajax is a set of technologies allowing you to create asynchronymous web applications. jQuery have a set of useful methods for Ajax, including get() as shown below:

$.get( "ajax/test.html", function( data ) {
    $( ".result" ).html( data );
    alert( "Load was performed." );
});

Although jQuery makes Ajax development easier and faster, it’s a sure thing that you don’t need the framework to use Ajax:

var request = new XMLHttpRequest();
request.open('GET', 'ajax/test.html', true);

request.onload = function (e) {
    if (request.readyState === 4) {

        // Check if the get was successful.

        if (request.status === 200) {
            console.log(request.responseText);
        } else {
            console.error(request.statusText);
        }
    }
};

Adding and removing classes

If you need to add or remove an element’s class, jQuery has two dedicated methods to do so:

// Adding a class
$('#foo').addClass('bold');

// Removing a class
$('#foo').removeClass('bold');

Without jQuery, adding a class to an element is pretty easy. To remove a class, you’ll need to use the replace() method:

// Adding a class
document.getElementById('foo').className += 'bold';

// Removing a class
document.getElementById('foo').className = document.getElementById('foo').className.replace(/^bold$/, '');

Fade In

Here’s a practical example of why jQuery is so popular. Fading an element only takes a single line of code:

$(el).fadeIn();

The exact same effect can be achieved in pure JavaScript, but the code is way longer and more complicated.

function fadeIn(el) {
  el.style.opacity = 0;

  var last = +new Date();
  var tick = function() {
    el.style.opacity = +el.style.opacity + (new Date() - last) / 400;
    last = +new Date();

    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    }
  };

  tick();
}

fadeIn(el);

Source: Stack Overflow

Hiding and showing elements

Hiding and showing elements is a very common task. jQuery offers the hide() and show() methods for modifying the display of an element.

// Hiding element
$(el).hide();

// Showing element
$(el).show();

In pure JavaScript, showing or hiding elements isn’t more complicated:

// Hiding element
el.style.display = 'none';

// Showing element
el.style.display = 'block';

DOM manipulation

Manipulating the DOM with jQuery is very easy. Let’s say you would like to append a <p> element to #container:

$("#container").append("<p>more content</p>");

Doing so in pure JavaScript isn’t much of a big deal either:

document.getElementById("container").innerHTML += "<p>more content</p>";

Further reading

To complete this article, I’ve compiled five very useful blog posts and websites dedicated to using JavaScript without jQuery. All links below feature many practical examples.

KeyCDN Giveaway – Turbocharge your Website

keycdn-featured-image

KeyCDN is a high performance Content Delivery Network (CDN) which will speed up your website. It integrates with over 25 different CMS and developer frameworks such as WordPress, Drupal, Joomla!, Laravel, Ruby on Rails, and Zend Framework. They also have their own lightweight WordPress CDN plugin, CDN Enabler which allows you to deploy your CDN in minutes. Scroll down to the bottom of this post to enter the giveaway!

What is a CDN?

A Content Delivery Network (CDN) can be one of the fastest and easiest ways to speed up your website or project without a lot of work or even configuration. A CDN basically copies all of your content, such as CSS, JavaScript, and images to servers (also known as POPs or edge servers) around the world and then they are delivered to your visitors from the closest location. Beside the obvious performance advantages there are many other benefits to using a CDN such as security, scalability, reliability, and SEO benefits (Google ranking factor).

About KeyCDN

KeyCDN is dedicated to providing high performance solutions while still being affordable. Some of their primary features include:

  • Pay-As-You-Go: KeyCDN doesn’t have any monthly commitments. Simply pay for what you use.
  • Free Security: Other competitors charge for features like origin shield, custom SSL, DDoS protection, KeyCDN includes it for free. They also include free SSL with Let’s Encrypt and two-factor auth.
  • Pricing: KeyCDN has the lowest global price at $0.04/GB. Including Asia and Australia.
  • POPS: Over 25 POPs around the globe to deliver your content faster.
  • Performance: Highly optimized TCP stack and 100% SSD coverage with HTTP/2 support, Gzip and Huffman Encoding.
  • Supporting WP Community: Maintain three WordPress performance plugins: Optimus Image Optimizer, [Free] Cache Enabler, and [Free] CDN Enabler.
  • Compatibility: No matter what platform you are using, you can speed it up.

How to enter the giveaway

Feeling lucky? Then enter our giveaway and try to grab one of the three 1TB KeyCDN accounts! Simply leave a comment on this post to let us know that you’re in. In one week, I will randomly pick three lucky winners who will receive their prize directly from KeyCDN staff, by email.

Good luck everybody!

Best WordPress plugins to customize the admin area

Ag Custom Admin


Ag Custom Admin is probably the most complete solution available to customize your WordPress dashboard.

With this free plugin, you can change almost everything: admin menu and pages, login page, admin bar etc. Another very interesting option is that the plugin lets you apply admin panel themes. Though most of them aren’t free and not especially beautiful, in my opinion.
Free download: Ag Custom Admin

Admin menu editor


If you need to customize WordPress admin menu, then Admin menu editor is definitely a plugin to consider.

Admin menu editor allows you to manually edit the Dashboard menu via drag and drop. You can rearrange it, delete unnecessary items, and create custom menus/submenus.
Free download: Admin menu editor

Adminize


When using WordPress to create a website for a client, there are lots of things in the admin area that you don’t want the client to mess with. Based on user roles, Adminize makes it easy to remove items from view.
Free download: Adminize

White label CMS


White label CMS is a free plugin which gives you the ability to give the admin area a more personalized and less confusing look and feel. A great solution for those using WordPress to build sites for clients.

It also allows you to add custom logos to the header and footer as well as the all important login page, giving your client a better branded experience of their new website.
Free download: White label CMS

WP Total Hacks


A nifty plugin which gives you control over 20 different settings related to WordPress admin area. Among other things, it allows you to add a favicon, change admin header logo, deactivate selected meta boxes for posts & pages, limit the number of allowed revisions, block pingbacks, and a lot more.
Free download: WP Total Hacks

Bonus: hacks


To complete this article, here is a list of hacks and code snippets that you can use to take control of your WordPress admin area. In this article, I’ll show you how you can keep logged in for a longer period, programmatically remove admin menu items, change WordPress dashboard colors, provide custom help messages to your users, and a lot more!

Bootstrap Business Themes

The Good Book


The Good Book Website Template is for those people who are searching for comprehensible recommendations for developing their own business. These recommendations will make a lot of business terms clear and show how to cope with a business. Sites created with the help of it are considered to be fully responsive. They may look through your news, products, services, etc. using any device they possess as your data will be displayed in the same way with any laptop and any mobile phone. This template offers font icons which can be displayed properly in different browsers in the same quality. It takes less time to render these font icons on a screen. This template possesses a dropdown menu and a website slider which make your site more competitive than other sites. You might make use of some images or photos at no charge. If you face any disturbance, you can be in contact with the qualified managers any time.
More info & demo

Seafood Restaurant


Seafood restaurants are quite popular among people worldwide. It is a good idea to set up a one-of-a-kind site to show your seafood restaurant and consequently to attract more guests. A successful site might be created due to Seafood Restaurant Responsive bootstrap themes. It has a lot of benefits over other templates. It is very easy to attach a menu to the top of the page. The technology Parallax gives an opportunity to render photos of your dishes as vivid as it is possible. Coherence with Google Maps will help your non-guests to find your company. Your visitors will be supplied with a contact form to keep in touch with your managers, to get more information, to book a table or even to complain. This template is also known for its responsiveness and convenient slider. Moreover, you are provided with several photos and pictures at no cost. The usage of this template is a complete satisfaction.
More info & demo

Grand Vector


If you have to create several sites in different business areas, you had better make use of Grand Vector – Design Studio Multipurpose Website Template. It is completely responsive. That is very convenient for your customers. Online store might be opened without effort. It is very easy to run and modify this template and to adjust it to your goals. Your visitors will be supplied with the live chart module which is considered to be a convenient option. The technology Parallax will make your site lively and unforgettable. This template brings forward a lot of elaborate pages and handy live search. You will be surprised by the combination of user-friendly functional code and remarkable design.
More info & demo

This post is a guest post by Tanya K.