Using LaTeX Fonts on Webpages

The LaTeX font is called "Computer Modern". You can include this css file in your css and then set the font family to Computer Modern. A good @font-face generator is font-squirrel.

favicon.ico using ImageMagick

Based on favicon.ico using imagemagick convert, the following script takes as parameter an image file and creates a favicon.

#!/bin/bash
 
if [ `which convert` == "" ]; then
  echo "You need ImageMagick for this tool."
fi
 
convert $1 -resize 256x256 -transparent white favicon-256.png
 
convert favicon-256.png -resize 16x16 favicon-16.png
convert favicon-256.png -resize 32x32 favicon-32.png
convert favicon-256.png -resize 64x64 favicon-64.png
convert favicon-256.png -resize 128x128 favicon-128.png
 
convert favicon-16.png favicon-32.png favicon-64.png favicon-128.png favicon-256.png -colors 256 favicon.ico
rm -rf favicon-16.png favicon-32.png favicon-64.png favicon-128.png favicon-256.png

Optimize Images

Using the tools pngout, optipng and advdef, you can batch-optimize PNG images using the following short script:

for i in `find . -name '*.png'`; do 
  pngout $i -c6 -f3 -b128 -kbKGD -v | true 
  optipng -o7 -zm1-9 $i
  advdef -z -4 $i
done

which will traverse all directories in the current path and optimize all the PNG files it finds.

Reload An Image Every Second

The page needs a file named jquery.js to be placed where the document resides. The trick is to use Math.random() to prevent the browser from caching the image.

cam.html
<html>
<head>
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript">
     $(document).ready(function() {
       setInterval('reload()', 1000);
     });
     function reload() {
       $('#cam').attr('src', 'cam.jpg?' + Math.random());
     }
   </script>
   <title>Cams</title>
</head>
<body>
  <img src="cam.jpg" id="cam" border="1" />
</body>
</html>

Social Media Icons

The following file is a ready-made HTML file that can be included where you want Google+, Twitter and Facebook to appear as icons along with the box count. You will have to change the appId for facebook:

298259421963158

using Facebook's like button generator.

socialmedia.html
<!-- Social Buttons Start -->
<!-- Facebook -->
<div id="fb-root"></div>
<script type="text/javascript" async defer>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=298259421963158&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- Google +1 -->
<script type="text/javascript" async defer>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'http://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- Twitter -->
<script type="text/javascript" async defer>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<!-- Reddit -->
<script type="text/javascript">
  reddit_url = document.URL;
  reddit_title = document.title;
</script>
<!-- LinkedIn -->
<script src="//platform.linkedin.com/in.js" type="text/javascript" async defer>
  lang: en_US
</script>
<!-- Tumblr -->
<script type="text/javascript" src="//platform.tumblr.com/v1/share.js"></script>
<!-- Pinterest -->
<script src="//assets.pinterest.com/js/pinit.js"></script>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<div class="socialbuttons" style="max-width: 700px; margin: 1em auto; padding: 0.5em 0 0.5em 0; background-color: rgba(253, 252, 218, 1); border: 1px solid #c2b59b;">
        <ul style="list-style:none; height: 20px; margin: 0 auto; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content;">
            <!-- Facebook Like+Send -->
            <li style="float: left; margin-left: .1em; margin-right: .1em;">
                <fb:like colorscheme="light" expr:href="data:post.canonicalUrl" layout="button_count" send="true" show_faces="false"/>
            </li>
            <!-- Twitter -->
            <li style="float: left; width: 75px; margin-left: .1em; margin-right: .1em;">
                <a class="twitter-share-button" expr:data-url="data:post.canonicalUrl" expr:data-text="data:post.title" data-count="horizontal" data-lang="en" href="https://twitter.com/share">Tweet</a>
            </li>
            <!-- Google +1 -->
            <li style="float: left; width: 56px; margin-left: .1em; margin-right: .1em;">
                <g:plusone annotation="bubble" expr:href="data:post.canonicalUrl" size="medium"/>
            </li>
            <!-- Reddit -->
            <li style="float: left; margin-left: .1em; margin-right: .1em;">
                <script type="text/javascript" src="http://www.reddit.com/static/button/button1.js"></script>
            </li>
            <!-- LinkedIn -->
            <li style="float: left; margin-left: .1em; margin-right: .1em;">
                <script type="IN/Share" expr:data-url="data:post.canonicalUrl" data-counter="right"></script>
            </li>
            <!-- Tumblr -->
            <li style="float: left; margin-left: .1em; margin-right: .1em;">
                <a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:129px; height:20px; background:url('//platform.tumblr.com/v1/share_3.png') top left no-repeat transparent;">Share on Tumblr</a>
            </li>
            <!-- Pinterest -->
            <li style="float: left; margin-left: .1em; margin-right: .1em;">
                 <a data-pin-config="beside" data-pin-do="buttonBookmark" href="//pinterest.com/pin/create/button/"><img src="//assets.pinterest.com/images/PinExt.png" /></a>
            </li>
        </ul>
</div>
<!-- Social Buttons End -->

The code loads all the necessary javascript and aligns the buttons in a row:

as well as sending the URL of the current page.

Cascading Stylesheets Box Model

For CSS elements such as padding and margin, the parameters follow the box model below:

+--a--+
|     |
d     b
|     |
+--c--+

where properties can be specified in one go like:

p {
    padding: a b c d;
}

which is equivalent to the named properties:

p {
    padding-top: a;
    padding-right: b;
    padding-bottom: c;
    padding-left: d;
}

with a, b, c, d being the sides of the box.

Centring a List of Buttons Horizontally

The following will centre three list elements horizontally on a page.

The HTML part is the following:

<div class="container">
  <ul class="navigation">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Projects</a></li>
  </ul>
</div>

and the CSS part uses the CSS3 fit-content directive:

#container { 
    max-width: 600px; 
    margin: 0 auto; 
}
#navigation { 
    list-style:none; 
    margin: 0 auto; 
    width: -webkit-fit-content; 
    width: -moz-fit-content; 
    width: fit-content; 
}
li { 
    float: left; 
}

Delete History from Way Back Machine (archive.org)

Create a file robots.txt in the root of your web-server with the following contents:

User-agent: ia_archiver
Disallow: /

The history will disappear from archive.org within 24 hours but in case the lines in robots.txt are removed, then the history shows up again.

Blank HTML5 Template

<!doctype html>
 
<html lang="en">
<head>
    <meta charset="utf-8">
 
    <title>Blank HTML5 Template</title>
    <meta name="description" content="Blank HTML5 Template">
    <meta name="author" content="Wizardry and Steamworks">
 
    <link rel="stylesheet" href="css/style.css?v=1.0">
 
</head>
 
<body>
 
</body>
</html>

Textarea Auto-Scroll

Using jQuery, the textarea with the id chat will be autoscrolled whenever the following animate command is executed:

$("#chat").animate({
    scrollTop:$("#chat")[0].scrollHeight - $("#chat").height()
},1000);

Power of Two Textures

Hardware is frequently optimised to use textures whose resolutions follow the power of two rule. The power of two rule states that textures should either:

  • have result of the width divided by height be divisible by 8
  • a width and height that can be doubled or divided by 2.

This includes images with resolution values such as: 8, 16, 32, 64, 128, 256, 512, 1024, 2048, etc…

The resulting textures will have 1:1 resolutions such as 64x64 or 256x64 etc…


fuss/web.txt · Last modified: 2017/02/22 18:30 (external edit)

Access website using Tor Access website using i2p


For the copyright, license, warranty and privacy terms for the usage of this website please see the license, privacy and plagiarism pages.