From the same WHATWG document:

&gt; For historical reasons, the icon keyword may be preceded by the
&gt; keyword &quot;shortcut&quot;. If the &quot;shortcut&quot; keyword is present, it must be
&gt; come immediately before the icon keyword and the two keywords must be
&gt; separated by only a single U+0020 SPACE character.

Update:
According to this page https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types

&gt; The *shortcut* link type is often seen before icon, but this link type
&gt; is non-conforming, ignored and web authors must not use it anymore.

Also, I don&#39;t see any references of *shortcut* in the W3Schools documentation, so I think it&#39;s better to leave it out. https://www.w3schools.com/tags/att_link_rel.asp

Although it is still in its experimental stage (because HTML5 dev is ongoing), the
&lt;a href=&quot;http://validator.w3.org/#validate_by_uri+with_options&quot;&gt;w3.org HTML5 Markup Validator&lt;/a&gt; 
is a good online tool you can check out. I used it extensively about 6 months ago and it always gave back accurate HTML5 syntax reports. 

I have tested this code on Google Chrome, Mozilla Firefox, Internet explorer, and Microsoft Edge, and the only browser that didn&#39;t work was Edge. When add Favorite from a page made on harddrive ex c:\temp\test.html

    &lt;html&gt;
    &lt;head&gt;
    &lt;meta http-equiv=&quot;expires&quot; content=&quot;0&quot;&gt;&lt;!-- Never caches the page --&gt;
    &lt;link id=&quot;favicon&quot; rel=&quot;shortcut icon&quot; href=&quot;icon_32.ico&quot;&gt;
    &lt;/head&gt;
    &lt;body&gt;
    ...
    &lt;/body&gt;
    &lt;/html&gt;

Here is my query using fluent query builder.

 

		$query = DB::table(&#39;category_issue&#39;)
		    -&gt;select(&#39;issues.*&#39;)
			-&gt;where(&#39;category_id&#39;, &#39;=&#39;, 1)
			-&gt;join(&#39;issues&#39;, &#39;category_issue.issue_id&#39;, &#39;=&#39;, &#39;issues.id&#39;)
			-&gt;left_join(&#39;issue_subscriptions&#39;, &#39;issues.id&#39;, &#39;=&#39;, &#39;issue_subscriptions.issue_id&#39;)
			-&gt;group_by(&#39;issues.id&#39;)
			-&gt;order_by(DB::raw(&#39;COUNT(issue_subscriptions.issue_id)&#39;), &#39;desc&#39;)
			-&gt;get();

As you can see, I am ordering by a count from the joined table. This is working fine. However, I want this count returned with my selections. 

Here is the my raw sequel query that works fine.

 

  

    Select issues.*, COUNT(issue_subscriptions.issue_id) AS followers 
    FROM category_issue JOIN Issues ON category_issue.issue_id = issues.id 
    LEFT JOIN issue_subscriptions ON issues.id = issue_subscriptions.issue_id
    WHERE category_issue.category_id = 1
    GROUP BY issues.id
    ORDER BY followers DESC

How would I go about this select using Laravel&#39;s fluent query builder? I am aware I can use a raw sql query but I would like to avoid that if possible. Any help would be appreciated, thanks in advance!



How to select count with Laravel&#39;s fluent query builder?

I&#39;d like to generate an SQL Script that contains the SQL to create all of the triggers that exist in our database.  The triggers were added directly via the SSMS query pane so, there is currently no source other than the trigger on the database itself.  

I have already tried the method where you right-click the database, select `Tasks-&gt;Generate Scripts` and used the &quot;Script Entire Database and All Objects&quot; option.  While this does create a SQL script for the tables and constraints, it does not generate SQL for the triggers.  

I also understand that I can right click on each trigger in the database and select the Generate SQL Script option but, there is currently 46 tables under audit (For Insert, Update, and Delete).  

Rather manually generate an insert, update, and delete trigger script for each of the 46 tables, is there an easier way to do this?  Or, should I start clicking, copying, and pasting?

How to Generate Scripts For All Triggers in Database Using Microsoft SQL Server Management Studio

The [WHATWG document](http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-rel) for HTML5 says that the `rel` attribute must contain values that are space-separated, and then it gives a table of allowed values.

&gt; The attribute&#39;s value must be a set of space-separated tokens. The [allowed keywords and their meanings](http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#linkTypes)...

The list of allowed keywords for the `link` element does not include `shortcut`, but it does include `icon`. So I&#39;m looking at the all-too-well-known tag

    &lt;link rel=&quot;shortcut icon&quot; href=&quot;/favicon.ico&quot; /&gt;

and wondering if it is HTML5-compliant. Should I remove the keyword `shortcut` from this tag throughout my Website?

HTML5 `&lt;link rel=&quot;shortcut icon&quot; /&gt;`

The <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#attr-hyperlink-rel" target="_blank" rel="noopener noreferrer">WHATWG document</a> for HTML5 says that the <code>rel</code> attribute must contain values that are space-separated, and then it gives a table of allowed values.
> The attribute's value must be a set of space-separated tokens. The <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#linkTypes" target="_blank" rel="noopener noreferrer">allowed keywords and their meanings</a>...
The list of allowed keywords for the <code>link</code> element does not include <code>shortcut</code>, but it does include <code>icon</code>. So I'm looking at the all-too-well-known tag
<pre><code class="hljs language-ini">&#x3C;link rel="shortcut icon" href="/favicon.ico" />
</code></pre>
and wondering if it is HTML5-compliant. Should I remove the keyword <code>shortcut</code> from this tag throughout my Website?

Why don&#39;t the HTML `&lt;input&gt;` tags get a closing tag like other HTML tags and what would go wrong if we do close the input tag?

I tried to Google and I found the standard to write a input tag like this `&lt;input type=&quot;text&quot; name=&quot;name&quot;&gt;`  not closing it with a `&lt;/input&gt;`.

I personally felt the problem when I created an input tag for `Radio` buttons using

    var DOM_tag = document.createElement(&quot;input&quot;);

This though created a radio button, but the `TextNode` I appended to the radio button with

    document.createTextNode(&quot;Radio Label&quot;);

does not work. It simply shows the radio button with no `Radio Label` as in this case.

Though I can see the complete code:

    &lt;input id=&quot;my_id&quot; type=&quot;radio&quot; name=&quot;radio_name&quot;&gt;Radio Label&lt;/input&gt;

What is explanation?

**P.S.**

The main problem that occurred to me is the automatically closing of input tag as I mentioned in the question as I am using `var DOM_tag = document.createElement(&quot;input&quot;);`  which automatically creates a closing tag. What should I do about that?




Closing HTML &lt;input&gt; tag issue

I&#39;m looking to use an SVG logo for a website — to make it look great on a responsive design for all devices. 

But since [there are issues][1], I want to support as many devices and browsers as possible. Load speed is also an important consideration. How do export settings in Adobe Illustrator fit into all this?

In Illustrator, there are several options for SVG export. Firstly, **which SVG profile is best?**

![enter image description here][2]

I assume SVG Tiny has a lower file size? Do many devices support SVG Tiny? What are the most important differences? (Without having to read [this W3 monster][6].)

Secondly, I assume that the best option for image location is &quot;link&quot;? (See description after exclamation mark.)

![enter image description here][3]

Alternatively, how is browser support for the &quot;embed&quot; option?

![enter image description here][4]

Thank you!

&gt; P.S. There will be a fallback alpha-PNG option, but I want the SVG to
&gt; be supported as best as possible. (Come to think of it, a fallback
&gt; option — like a JPG — would probably be the best served in this case since alpha-PNG itself needs a solution for older IE.)

**Update:** There are also more options that can be configured. I am not working with text, so the only relevant one I see is the decimal places. For logos, something to be displayed as maximum 200x200px (so 400x400px on Retina displays), is &quot;3&quot; the best setting? Or &quot;2&quot; to minimize file size?

![enter image description here][5]




  [1]: http://caniuse.com/#search=svg
  [2]: http://i.stack.imgur.com/6DguE.png
  [3]: http://i.stack.imgur.com/rAHmN.png
  [4]: http://i.stack.imgur.com/3znoL.png
  [5]: http://i.stack.imgur.com/yvylr.png
  [6]: http://www.w3.org/TR/SVGMobile/

Optimal settings for exporting SVGs for the web from Illustrator?

Apple&#39;s iPad Mini is a smaller clone of the iPad 2 in more ways than we&#39;d want. In JavaScript, the `window.navigator` object exposes the same values for the Mini and iPad 2. My tests so far to detect the difference have not lead to success.

Why is this important? 

As the iPad Mini and iPad 2 screens are identical in pixels but vary in actual size (inches / centimeters), they vary in [PPI][1] (pixels per inch).

For web applications and games to offer a friendly user interface, certain elements are adjusted in size relative to a user&#39;s thumb or finger position, thus, we may want to scale certain images or buttons to provide for that better user experience.

Things I have tried so far (including some pretty obvious approaches):

 - `window.devicepixelratio`
 - CSS element width in cm unit
 - CSS media queries (such as `resolution` and `-webkit-device-pixel-ratio`)
 - SVG drawings in similar units
 - Doing all sorts of CSS webkit transforms for a set time and counting rendered frames with `requestAnimFrame` (I was hoping to detect a measurable difference)

I&#39;m fresh out of ideas. How about you?

**Update**
Thanks for the responses so far. I would like to comment on people voting against detecting iPad mini versus 2 as Apple has uhm, one guideline to rule them all. Okay, here&#39;s my reasoning why I feel it really makes all sense in the world to know if a person is using an iPad mini or a 2. And do with my reasoning what you like.

The iPad mini is not only a much smaller device (9.7 inch versus 7.9 inch), but its form factor allows for a different usage. The iPad 2 is usually held with two hands when gaming unless you&#39;re [Chuck Norris][2]. The mini is smaller, but it is also much lighter and allows for gameplay where you hold it in one hand and use another to swipe or tap or whatnot. As a game designer and developer myself, I&#39;d just like to **know** if it&#39;s a mini so I can choose to provide the player with a different controlscheme if I want (for instance after A/B testing with a group of players). 

Why? Well, it&#39;s a proven fact that the majority of users tend to go with the default settings, so leaving out a virtual thumbstick and putting some other tap-based control on the screen (just giving an arbitrary example here) when the player loads up the game for the first time is what I, and probably other game designers, would love to **be able to** do.

So IMHO this goes beyond the thick fingers / guidelines discussions and is just something Apple and all other vendors ought to do: allow us to uniquely identify your device and **think different** instead of **following** guidelines.

  [1]: http://en.wikipedia.org/wiki/Pixel_density
  [2]: http://en.wikipedia.org/wiki/Chuck_Norris_facts


Detect iPad Mini in HTML5

I have search a lot of topics for a usable solution.&lt;br&gt; But dont found something. Most scripts are just too cluttered for my purposes.&lt;br&gt; Seeking a solution based only on Javascript. &lt;b&gt;In my project it is not possible to use jQuery.&lt;/b&gt; &lt;br&gt;I need a jump or scroll to id.
&lt;br&gt;

    &lt;head&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
    //here has to go function
    &lt;/script&gt;
    &lt;/head&gt;

&lt;br&gt;&lt;br&gt;MY call is:

    &lt;a onclick=&quot;function_call+targetname&quot;&gt;&lt;img src=&quot;image1&quot; alt=&quot;name1&quot;&gt;&lt;/a&gt;
    &lt;a onclick=&quot;function_call+targetname&quot;&gt;&lt;img src=&quot;image2&quot; alt=&quot;name2&quot;&gt;&lt;/a&gt;
    &lt;a onclick=&quot;function_call+targetname&quot;&gt;&lt;img src=&quot;image3&quot; alt=&quot;name3&quot;&gt;&lt;/a&gt;

So i have to use onclick event in my navigation.

Now onclick i want to jump or scroll to a div id in my page:

    &lt;div id=&quot;target1&quot;&gt;some content&lt;/div&gt;
    &lt;div id=&quot;target2&quot;&gt;some content&lt;/div&gt;
    &lt;div id=&quot;target3&quot;&gt;some content&lt;/div&gt;

It is very important: html anchor not work unfortunately. Otherwise everything would be pretty easy. &lt;br&gt;&lt;br&gt;I have use bevore simply:

    onclick=&quot;window.location.hash=&#39;target&#39;;&quot;

 But i have restrictions in eBay. They dont allow this simple code.
 
 Also I cant call an external javascript (only use JS in head area). Furthermore, it is not possible to use : &quot;cookie.&quot;, &quot;cookie&quot;, &quot;replace (&quot;, IFRAME, META or includes) and base href.

It can not be hard with a bit of JS jump to a specific point. 
I do not need special effects.

Does anyone have a slim and helpful solution?

&gt; I Have found a solution by my self and thanks to Oxi. I follow your
&gt; way.
&gt; 
&gt; For all those interested in my solution:
&gt; 

    &lt;head&gt; &lt;script type=&quot;text/javascript&quot;&gt; function scroll(element){   
    var ele = document.getElementById(element);   
    window.scrollTo(ele.offsetLeft,ele.offsetTop); } &lt;/script&gt; &lt;/head&gt;

&gt; 
&gt; Navigation Call:
&gt; 

    &lt;a onclick=&#39;scroll(&quot;target1&quot;);&#39;&gt;&lt;img src=&quot;image1&quot; alt=&quot;name1&quot;&gt;&lt;/a&gt;

&gt; 
&gt; Now you can jump to a div with called ID
&gt; 

    &lt;div id=&quot;target1&quot;&gt;CONTENT&lt;/div&gt;


Scroll / Jump to id without jQuery

The Instagram app has a nice sticky header that pushes the current one up in place of the new one. I found a great tutorial on how to do this natively for Android, but I&#39;m looking to do it with JavaScript and CSS. 

I was able to get my header to switch out for a new one, but I can&#39;t seem to find a way to mimic the way Instagram does it. Any help is greatly appreciated. 

****Edit:** I was able to get the header to stick to the top of the page when scrolling using waypoints as Cj in the comments pointed out. ([link to waypoints][1]).
The main issue I&#39;m having is getting the &quot;push up&quot; effect that instagram uses in their mobile app for iPhone. I would link to an example but I&#39;ve never seen it used before.** 

****Edit 2:** Using parts of the codepen that @Chris provided I was able to get the headers to stick. I then added a .slideUp effect. My issue now is getting the .slideUp effect to only happen when the next header is reached. Right now the effect activates on scroll.

Here is the code:

    (function() {
    function stickyTitles(stickies) {
        this.load = function() {
            stickies.each(function(){
                var thisSticky = jQuery(this);
                jQuery.data(thisSticky[0], &#39;pos&#39;, thisSticky.offset().top);
            });
        }
        this.scroll = function() {      
            stickies.each(function(){           
                var thisSticky = jQuery(this),          
                    pos = jQuery.data(thisSticky[0], &#39;pos&#39;);
                if (pos &lt;= jQuery(window).scrollTop()) {
                    thisSticky.addClass(&quot;fixed&quot;);
                    // added this 
                     $(&quot;.followMeBar:parent&quot;).slideUp();

                } else {
                    thisSticky.removeClass(&quot;fixed&quot;);
                }
            });         
        }
    }
    jQuery(document).ready(function(){
        var newStickies = new stickyTitles(jQuery(&quot;.followMeBar&quot;));
        newStickies.load();
        jQuery(window).on(&quot;scroll&quot;, function() {
            newStickies.scroll();

        }); 
    });

})();


  [1]: http://imakewebthings.com/jquery-waypoints/sticky-elements/

Getting a sticky header to &quot;push up&quot;, like in Instagram&#39;s iPhone app using CSS and jQuery

I am making a HTML page and one of the things I wanted was a favicon appearing next to the title.

I&#39;m using Google Chrome, I see favicons working on other websites, but the favicon on my website won&#39;t show up.  The site is in a folder on my desktop named site.

The `favicon.ico` file is 16x16, and I used an online generator to make it.

This is the code: 

    &lt;!DOCTYPE html&gt;
    &lt;html&gt; 
        &lt;head&gt;
            &lt;title&gt;&lt;/title&gt;
            &lt;link rel=&quot;shortcut icon&quot; href=&quot;/favicon.ico&quot; /&gt;
        &lt;/head&gt;
        &lt;body&gt;
        &lt;/body&gt;
    &lt;/html&gt;

 

HTML Favicon.ico won&#39;t show on Google Chrome

According to the **Internet Assigned Numbers Authority** (IANA), all .ico file falls under the MIME type `image/vnd.microsoft.icon`. ([Source][1])

E.g.
`&lt;link rel=&quot;icon&quot; type=&quot;image/vnd.microsoft.icon&quot; href=&quot;favicon.ico&quot; /&gt;`

However, savvy internet guru, **Paul Irish**, claims this is wrong, and that it would actually be `image/x-icon`. ([Source][2])

E.g.
`&lt;link rel=&quot;icon&quot; type=&quot;image/x-icon&quot; href=&quot;favicon.ico&quot; /&gt;`

I know you can get away with not including a &quot;type&quot; for .ico files, but if you were going to include one, which should it be? Are there actually any problems with serving it as official IANA type?


  [1]: http://www.iana.org/assignments/media-types/image/vnd.microsoft.icon
  [2]: https://github.com/paulirish/html5-boilerplate/commit/37b5fec090d00f38de64b591bcddcb205aadf8ee

Correct MIME Type for favicon.ico?

I recently started working in Node.js and in the app.js file there is this line:

    app.use(express.favicon());

Now, how do I set up my own custom favicon.ico?

How to set custom favicon in Express?

How do I add image in title bar?

I have title- &quot;Webnet&quot; 

Merging it with a FontAwesome Glyphicon&#39;s icon images as-

    &lt;title&gt;&lt;i class=&quot;icon-user icon-black&quot;&gt;&lt;/i&gt;Webnet&lt;/title&gt;

And I tried it replacing with image source-

    &lt;title&gt;&lt;img src=&quot;assests/img/user-Hermosillo.png&quot; &gt;&lt;/img&gt;Webnet&lt;/title&gt;

But title shows innerHTML instead of showing image there.

Any help?


Add image in title bar

I have a favicon icon which isn&#39;t showing up in Chrome (I&#39;m not sure about other browsers as I only use Chrome) but the strange thing is if I type the path to the icon in the URL bar it shows up!

Why doesn&#39;t the icon appear?

Favicon not showing up in Google Chrome

While doing the HTML for my new template, I stumbled across a new meta tag

    &lt;link rel=&quot;profile&quot; href=&quot;http://gmpg.org/xfn/11&quot; /&gt;

What&#39;s this for? I found it linking to this [page][1], and through Google I found this [Microformat][2] but I didn&#39;t get it.


  [1]: http://gmpg.org/xfn/11
  [2]: http://microformats.org/wiki/rel-profile

Content Type	Original Author	Original Content on Stackoverflow
Question	chharvey	View Question on Stackoverflow
Solution 1 - Html	Alohci	View Answer on Stackoverflow
Solution 2 - Html	Pablo Santamaria	View Answer on Stackoverflow
Solution 3 - Html	Josh Campbell	View Answer on Stackoverflow
Solution 4 - Html	user4565320	View Answer on Stackoverflow

HTML5 `<link rel="shortcut icon" />`

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Solution 3 - Html

Solution 4 - Html

How to Generate Scripts For All Triggers in Database Using Microsoft SQL Server Management Studio

How to select count with Laravel's fluent query builder?

Attributions