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 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.
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.
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
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:
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.
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.
Note that it’s safe to do that on a running install, you will just need to log back in.
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);
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);
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>
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; } }
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.
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?
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.
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!
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:
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 });
.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); }
<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.
Copyright © 2021 VBlog
Theme by Anders Noren — Up ↑