search

andamira / medula

Starter Theme & Plugin for WordPress
MIT License
8 stars 0 forks source link

Boilerplate needs an update #38

Closed YemSalat closed 8 years ago

YemSalat commented 8 years ago

I haven't checked on HTML5 Boilerplate in a while and I just downloaded the latest version of it. It turns out they have removed a lot of junk from it that I was complaining about.

Look at the new head section:

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <script src="js/vendor/modernizr-2.8.3.min.js"></script>
    </head>

That's it. No more old IEs, no more weird meta tags. Every developer-oriented starter theme should do the same in my opinion.

[EDIT] They do include modernizr (sorry, looked right through it first time) Which as I said before I don't think is necessary, maybe the best approach would be to put it into the /js/vendor folder, but not include it in HTML, so any developer can just add (or uncomment) a <script> tag if they need it, without having to download the library, at the same time the majority of developers who don't use it - won't be running any scripts in the <head> section.

joseluis commented 8 years ago

Yes I like it clean. And that title tag could be stripped out too.

The correct way to include any of this 3rd party libraries is through gulp. Right now Modernizr is concatenated at the beginning of the main script. (And normalice is concatenated at the beginning of the main css).

If Modernizr was to disabled, the no-js class would have to be gone too.

Related: #39

joseluis commented 8 years ago

I'd like to review these headers:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="theme-color" content="#ffffff">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">

It may make sense to leave them most of them commented.

jan-dh commented 8 years ago

I think you can get rid of the following since they are a bit outdated: <meta name="MobileOptimized" content="320"> <meta name="HandheldFriendly" content="True">

I would comment out this line because it's only used for blogs: <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">

I would remove this line because I feel you would adjust this together with your favicon and icons for windows and IOS: <meta name="theme-color" content="#ffffff">

These lines I would include as a standard: <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

YemSalat commented 8 years ago

I agree with @jan-dh on almost everything, but I think this line: <meta name="theme-color" content="#ffffff"> should only be commented out, not removed, as this allows to change the frame colour on latest Android (and hopefully other OSes will implement this soon as well) - I think it can be useful.

<meta http-equiv="X-UA-Compatible" content="IE=edge"> <- AFAIK this line should always be the first in the <head> section in order to work reliably (it makes all IE versions lower then 9 default to latest rendering engine)

jan-dh commented 8 years ago

I know that implementing the theme-color-tag is important but most of the time, people make favicons now using one of the generator-websites ( http://realfavicongenerator.net/ for example). If I make a favicon there I get an output like this:

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">

As you can see you, you adjust the theme-color based of the favicon you generate. That's why I don't think it's good practice to keep the standard color in the head-section, since it gets overwritten every time.

joseluis commented 8 years ago

Ok, let's move the favicon discussion to it's own thread #41

jan-dh commented 8 years ago

Made a new thread regarding the standard use of og:tags in the header #42

joseluis commented 8 years ago

Regarding pingbacks. I think it may be nice to disable self-pingbacks by default like shown here:

function no_self_ping( &$links ) {
    $home = get_option( 'home' );
    foreach ( $links as $l => $link )
        if ( 0 === strpos( $link, $home ) )
            unset($links[$l]);
}
add_action( 'pre_ping', 'no_self_ping' );
joseluis commented 8 years ago

Yes. HandheldFriendly and HandheldFriendly will be removed

Info on stackoverflow

joseluis commented 8 years ago