VBlog

Author: Vincent Ballut (page 2 of 4)

Using front-end frameworks come with all sorts of side effects if used incorrectly. This post looks into the pros and cons of using Bootstrap but is also applicable to other frameworks. Nice simple educational read.

WordPress Security 101

There are literally hundreds of plugins promising to improve the safety of your shiny but vulnerable WordPress site. However, as a wise coworker of mine once said:

more code = more bugs = more security breach possibilities

@Schadock29

So instead of adding more code, let’s take a few simple measures to drastically improve any WordPress install. We will have 2 goals here:

  1. Change the default settings so that our config is less predictable
  2. Put all critical resources on lockdown

1.  MySQL table prefix

Imagine a world where all the websites would use the exact same names for their MySQL tables. Wouldn’t that be heaven for a hacker? So yeah, the first step is to switch from wp_ to something different. It can be the name of your website, or even better, something totally random like 9iugHYt9y7_

This is preferably done when configuring database access before installing WordPress, in wp-config.php:

$table_prefix  = '9iugHYt9y7_';

If you already have a running install, you can always migrate, but it’s kind of risky. Here’s a complete tutorial on how to do so.

2. Secret Salt Keys

Salt keys are a set of random variables that improve encryption of information stored in the user’s cookies. Long story short, it makes your password a lot more difficult to crack. Setting unique salt keys isn’t required for WordPress to install properly, so a lot of wp-config.php files have default salt keys in them.

Setting secret salt keys is easy. Just go to https://api.wordpress.org/secret-key/1.1/salt/ to generate random and unique keys, then open your wp-config.php file and paste those generated keys in the appropriate section.

wpconfig-salt-keys

Note that it’s safe to do that on a running install, you will just need to log back in.

3. Disable debug messages

Debug messages usually contain sensitive information, like the full path to your WordPress install. This is why it’s highly recommanded to turn debugging off. Once again this is done in wp-config.php:

define('WP_DEBUG', false);

It’s also recommended to disable PHP errors entirely, by adding the following lines at the very begining of your wp-config.php:

error_reporting(0);
@ini_set(‘display_errors’, 0);

 

4. Disable the theme and plugin editor

WordPress allows its privileged users to edit a file directly from the administration interface. If your administrator account is hacked, it will be an open door to your code base. That’s why it’s also recommended to disable this feature, again in wp-config.php:

define('DISALLOW_FILE_EDIT', true);

5. Protect wp-config.php

As you probably noticed, a lot of WordPress security settings are controlled from one single file: wp-config.php. Your database connexion information are in there too. That would be a shame if you set everything up correctly but allow anyone to read or edit that file… This is probably the most important action to do: secure wp-config.php.

To do so, log in to your server via FTP or command line, and change the file permission settings to 400. It means that the file owner can only read it, but won’t be able to edit it or delete it. Everyone else than the file owner won’t even be able to read it.

chmod 400 wp-config.php

For extra precaution, you can also forbid anyone to access the file from their browser. This is not absolutely necessary as the PHP code in the file won’t actually be displayed by the browser, but better safe than sorry!

To do that, open the .htaccess file at the root of your install, and add the following lines:

<files wp-config.php>
order allow,deny
deny from all
</files>

6. Hide the administrator

A WordPress account is protected by 2 things: the username, and the password. Let’s not give half of it to hackers. Knowing who is the administrator is super easy: just add ?author=1 to your home URL and voilà, you are redirected to the first user’s profile page, who usually is the admin.

To address this issue, WPMU has a drastic solution: redirect author archive pages to the homepage. If you don’t bother getting rid of author pages, then copy paste the following code to your functions.php file:

add_action(‘template_redirect’, ‘bwp_template_redirect’);
    function bwp_template_redirect()
    {
        if (is_author()) {
            wp_redirect( home_url() ); exit;
    }
}

Wrapping up

That’s all I got for now, but I’ll be sure to add new security related tips in here as I run into them. Also feel free to share your best practices in the comments section.

Offset a background image from the right or the bottom

Until recently, if you needed to offset a background image from the right, there was no easy road. One of the most common tricks was to use the calc() function of CSS and do something like background-position: calc(100% - 10px) top. That worked like a charm, but there must be a way to achieve this more easily, right?

Right! Meet Background Position Edge Offset.

This new(ish) feature of CSS3 allows you to position the background relative to the specified edge, like so:

background-position: right 10px top;

Or:

background-position: right 100% bottom 5px;

The support is solid, with all browsers implementing it, even Internet Explorer starting from IE11.

 

Pure CSS image filter effects

I just (re)discovered all the amazing effects you can apply to images purely in CSS. We rarely use them in our designs and code, while they are now quite strongly supported by major browsers (only IE doesn’t, but Edge does).

Here’s a list of each effect. And they can be combined too!

Continue reading

Here’s a great step-by-step interactive tutorial on how to go from a basic unstyled page to a nice content-first and typography optimized page.

A Gulp task to easily generate and use Sprite images

Using sprites can significantly improve a webpage’s performance, we should definetly use them in all of our projects… But building sprites can be a pain.

This small Gulp task is meant to make it a lot easier to both build and use sprites. It does two things:

  1. Combine all the image contained in a folder into a unified sprite PNG file
  2. Generate CSS rules to easily include those images in a webpage.

The task:

gulp.task('sprite', function () {
    var spriteData = gulp.src('source_img/*.png') // Source images
        .pipe(spritesmith({
            imgName: 'sprite.png', // Name of the final sprite
            imgPath: 'sprite.png', // Path to the final sprite
            cssName: 'sprite.css', // Name of the CSS file that will be generated
            cssTemplate: 'sprite.mustache' // Path to the mustache template (used to build the CSS file)
        }));

    var imgStream = spriteData.img
        .pipe(gulp.dest('.')); // Path to the final sprite

    return cssStream = spriteData.css
        .pipe(gulp.dest('.')); // Path to the generated CSS file
});

Example of generated sprite:

sprite

Example of CSS rules generated by the task:

.sprite {
    background: url("sprite.png") top left no-repeat;
    display: inline-block;
    vertical-align: middle;
    background-size: calc(512px/2) calc(384px/2);
}

.sprite-box {
    background-position: calc(-128px/2) calc(0px/2);
    width: calc(128px/2);
    height: calc(128px/2);
}
.sprite-browser {
    background-position: calc(-256px/2) calc(-128px/2);
    width: calc(128px/2);
    height: calc(128px/2);
}

Example of HTML using those classes to include images:

<div class="sprite sprite-box"></div>
<div class="sprite sprite-browser"></div>

This Gulp task has proven very useful to our team, it’s now included by default in all of our projects. If you’d like to grab the entire code or contribute to it, it’s available on my Github.

For most of the web, poor network connectivity destroys the user experience. We can do better.

From cache manifest, to Web Workers and the Stream API, we do have a lot of techniques to prevent our apps from miserably failing when the network is down or low.

In this video from the Progressive Web App Summit 2016, Google’s Jake Archibald will take an online-only site and turn it into a fully network-resilient, offline-first installable progressive web app.

The Pramod Brothers on their blog shared a very in deep analysis and case study of the current state of chat applications and some ideas to improve them. Awesome job!

An expert is a person who has made all the mistakes that can be made in a very narrow field.
Niels Bohr, Danish physicist and Nobel Prize winner

What is AMP and how can it help your articles to perform better on Google?

AMP is an open source project started by Google, and announced on february 2016. The aim of this initiative is to make the mobile web a lot faster by using several techniques and caching solutions.

Here is, in very short, how it works:

  1. You develop a simplified version of your articles using the AMP specifications, that you host on your domain next to your normal articles.
  2. Both articles, the normal one and the AMP one, are linked to one another via meta tags.
  3. Google will then find your AMP enabled articles thanks to their search robots, and host a cached version of those directly on their infrastructure.
  4. Users searching on Google on mobiles will eventually see your AMP enabled articles at the very top of the search results.

f0787-amp_v6_phone_cropped-mov

Creating AMP enabled pages

If you are using WordPress or Drupal, AMP support only requires you to install a plugin. However, the AMP version will be very basic and you will need some code customization to include things like web analytics, SEO or branding. If you’re on Marfeel, even better, AMP support is built-in.

If you don’t, no worries. Enabling AMP support is quite simple and should only require a few hours of development. There’s a nice tutorial on the AMP website explaining how to do so.

Note that this article you’re reading is available in its AMP version.

Olderposts Newerposts

Copyright © 2018 VBlog

Theme by Anders NorenUp ↑