VBlog

Category: Front End Development (page 1 of 2)

A quick overview of the new hype thing in the Frontend ecosystem that is Yarn. What is it? Is it meant to replace npm? How is it different? Should we use it? I try to answer those questions in this post on Medium.

 

A video by Disney talking about the laws of animations, and how things move in real life and how we should emulate the properties of physics in real life when we are animating things digitally.

Component (or pattern) libraries are a way of designing and building websites in a modular fashion, breaking up the UI into small, reusable chunks that can then later be assembled in a variety of ways to build anything from larger components right up to whole pages.

From the Fractal.build introduction page

Interesting talk by @Jack_Franklin about the State of JavaScript in 2016 and beyond.

 

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

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.

Olderposts

Copyright © 2018 VBlog

Theme by Anders NorenUp ↑