A little something about everything

internet marketing and website development made simple..

How to solve: Page content blank when printing but works in InPrivate/Incognito view

This is an odd one and actually stumped me for a bit, in order to solve I used f12 developer tools to uncheck specific css attributes and tested the print function again. It ended up being a font-family attribute in the all css style.

Once removed the page printed all of the content on all browsers once again. I also tried adding a second font but that also did not solve the problem. It seems that the font was not being imported correctly or was corrupt. Replacing the font using the @media print solves the issue.

For example:

How to solve the F12 Developer Console Error net::ERR_INCOMPLETE_CHUNKED_ENCODING error.

So you open up F12 and see this obscure error:

What now?

In some cases this is caused by browser updates or perhaps server changes like adding gzip support to IIS.

This error in most cases is to to some code not properly closing before another script is executed thus chunking the response.

You should review the code for the page and look for Response.Close(); method. Something like this:

and replace it with a proper Response.End(); method instead.

Now save and reload your page.

Vertical alignment of a menu using pure css

Many methods for this are workarounds or hacks that break other elements or don't work on some browsers. However, you can do this quite simply using flex.

For example:

html

<body>
 <div id="menubox">
  <ul id="menu">
   <li>menu item 1</li>
   <li>menu item 2</li>
   <li>menu item 3</li>
  </ul>
 </div>
</body>

css

#menubox {
 position:absolute;
 display:flex;
 flex-direction: column;
 width:15rem;
 height:100%;
}
#menu {
 list-style:none;
 margin: auto 0;
}

 

Staggered Animation in CSS for Slideshow

Concept:

Staggered animation to create a slideshow from pure CSS and HTML5

Demo

The CSS:

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
  -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
  animation: mymove 5s infinite;
  animation-delay: 2s;
}
div#two {
	animation: mymove 5s infinite;
  animation-delay: 5s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
  from {left: 0px;}
  to {left: 200px;}
}

@keyframes mymove {
  from {left: 0px;}
  to {left: 200px;}
}

And the HTML:

<div id="one"></div>
<div id="two"></div>

 

How to disable popup tips in Visual Studio Code

Visual Studio Code is a great stand alone code editor that is free from Microsoft. However, it does have a few annoying functions out of the box. The worst of them is the constant tool tips which can get in the way of code and in some cases open browser windows as you accidently click on these tool tips.

Here is how you can remove these tool tips

In all methods you will need to open the User Settings editor. To do this:

  • Click File > Preferences > Settings
  • Now expand "Text Editor"
  • Click on "Suggestions"
  • Click "Edit in Settings.json"

Now you will have the "{} User Settings" tab open. The pane on the left is the defaults and the pane on the right is where you can edit these settings. You will need to place the updates inside of the "{ code here, }" then click save. 

Method 1, update the suggestion delay so you can still have tips but they don't appear unless you hover over the element for some time.

  "editor.quickSuggestionsDelay": 1000,

Method 2, disable the hover function. You will still be able to use CtrlR + K and CtrlR + I as needed.

"editor.hover.enabled": false,

Method 3, disable completely. You don't want or need these tips and you want them to go away forever.

"editor.parameterHints": false,

 

That's it, your done!