Category: HTML5

Do you need HTTPS for your Website?

The answer is both yes and no depending on the purposes you keep your site.

The URL:
https://secure1584.sakura.ne.jp/spinorlab.matrix.jp/
is not very cool, but it is a cost-effective solution in my current environment.

I just started to use Sublime Text.

I also use other editors, Atom, Brackets, and even some IDEs, such as Eclipse and Xcode, but I spend most of time with good old vi.

If the screen width is relatively large, it looks better to have the sidebar width fixed rather than incremented proportionally to the screen size.

@media screen and (min-width: 1000px) {

.wrap {
    overflow: hidden;
}

    .has-sidebar:not(.error404) #primary {
        float: right;
        width: 94%;
        margin-left: -360px;
        padding-left: 360px;
    }
  
    .has-sidebar #secondary {
        float: left;
        padding-top: 0;
        width: 360px;
    }

}

Defining the version number of a sytel.css file with UNIX time is not very user friendly, so here comes a code;

function my_update_styles( $styles ) {
    $mtime = filemtime( get_stylesheet_directory() . '/style.css' );
    $styles->default_version = date("Y-m-d-D-H:i:s", $mtime);
}
add_action( 'wp_default_styles', 'my_update_styles' );

The sad part is that with Chrome DevTools the version number that is too long is not fully displayed unless mouse overed.

Now, it became a one column layout again. I should have written my own style.css including media queries, for example:

@media screen and (min-width: 1000px) {
    .has-sidebar:not(.error404) #primary {
        float: right;
        width: 58%;
    }
 
    .has-sidebar #secondary {
        float: left;
        padding-top: 0;
        width: 36%;
    }
}

With the above code, the sidebar should appear on the left side only if the screen width is more that 1000px.

This is when the width is 768px.

And this, with 1000px.

Twenty Seventeen is a theme for WordPress and is “responsive”, providing you with the one column layout when your device’s screen width is too narrow to accommodate two colums.

The figure above is with Twenty Seventeen in its original form. See that there is only one column. (The bottom half of the screen is just one image, as you will see in the next figure.)

This is after I did some modifications to the theme. See that the image is displayed with shadow, and the sidebar is on the left rather than on the right. Bt, wait! Why do we have two columns!? Something must be wrong with Media Queries, I suppose.

@media screen and (min-width: 20em)
@media screen and (min-width: 30em)
@media screen and (min-width: 48em)
@media screen and (min-width: 67em)
@media screen and (min-width: 79em)
@media screen and ( max-width: 48.875em ) and ( min-width: 48em )

Sidebars can appear either on the left or on the right. Which do you prefer?

.has-sidebar:not(.error404) #primary {
    float: right;
    width: 58%;
}

.has-sidebar #secondary {
    float: left;
    padding-top: 0;
    width: 36%;
}

Navigation links to the next and previous pages are often found at the bottom of the page (see the blue box), but I do not like it, because you need to scroll all the way down even if you are not interested in the article.

I much prefer the links being at the top of the page (see the red box). You can just keep clicking without moving your mouse until you find the one which seems interesting.

In many cases, just refreshing the page is not enough to load the latest version of the CSS files, thus failing to show you the pages with the latest (and intended) style.

There are various ways depending on your OS and browsers to do a cache refresh. One example is:

But, it seems that we do not have a simple procedure if you are using iOS or Android.

One method, which I use here, is to give a new version number to the CSS files each time they are rewritten. In the figure, the file modification time, represented in UNIX time, is used as a version number. The line highlighted in yellow reads:

<link rel="stylesheet" id="child-style-css" href="https://spinorlab.matrix.jp/en/wp-content/themes/twentyseventeen-child/style.css?ver=1501038874" type="text/css" media="all">

A short PHP program hooked to your WordPress will take care of the things automatically.