Posts Tagged ‘html’

Create a “when I am busy” calendar

Monday, September 12th, 2016

Here’s how to create a public calendar on your website that shows when you are busy. For example, mine

\1. To set up sharing go to your calendar on http://calendar.google.com, select Sharing from the drop down on the left side:

dropdown google calendar

\2. Make sure that it’s public but only showing busy:

calendar busy checkbox

\3. Then go to “Calendar Details”, copy the <iframe ... HTML tag:

calendar iframe embedding

\4. On your website, create a calendar.html page with the following contents (replacing the <iframe ... tag appropriately):

“`

<!DOCTYPE html>
<html>
  <head>
    <title>Alec's Busy</title>
    <style>
html {margin: 0;padding 0;}
body { margin: 0;position:fixed; left:0; width:100%; top:0; height:100%; }
iframe { margin: 0;display: block; width:100%; height:100%; }
    </style>
  </head>
  <body>
      <iframe src="https://www.google.com/calendar/embed?title=Alec&#39;s%20Busy&showCalendars=0&mode=WEEK&src=alecjacobson%40gmail.com&ctz=local" style=" border-width:0 " width="100%" height="95%" frameborder="0" scrolling="no"></iframe>
  </body>
</html>

“`

Finally, if you’re logged into your google account and you visit your calendar.html page, you might be freaked out because you see all of your events (instead of busy). But to verify that it’s really hidden, use an “incognito”/private window to see that it just shows “busy”.

Remove prince annotation from pdf

Tuesday, November 10th, 2015

Here’s a little perl script to remove the prince watermark note from a pdf:

perl -p -e '!$x && s:/Annots \[[0-9]+ 0 R [0-9]+ 0 R ?([^\]]+)\]:/Annots [\1]: && ($x=1)' input.pdf > output.pdf

Update:

So, unfortunately the simple perl hack will “damage” the pdf. It seems that most viewers will ignore this, but I was alerted that a popular ipad reader “GoodReader” produces an ominous “This file is damaged” warning (though it then renders OK).

I couldn’t quite reverse engineer why, but here’s a temporary albeit heavy-handed fix. After running the perl script, also repair the pdf with ghostscript:

gs -o output.pdf  -sDEVICE=pdfwrite -dPDFSETTINGS=/prepress input.pdf

Note that output.pdf cannot be the same as input.pdf or it quietly creates an empty pdf instead.

Update:

Even better you can directly remove the specific Annotation from prince:

perl -i -p -e 's:/(Rect \[572\.0000 716\.0000 597\.0000 741\.0000\]|Contents \(This document was created with Prince, a great way of getting web content onto paper.\))::' input-and-output.pdf

Update:

Or even even better better:

  perl -i -pe 'BEGIN{undef $/;} s:/Rect.*?Contents \(This document was created with Prince, a great way of getting web content onto paper.\)::smg' input-and-output.pdf

Drop-in replacement header for switching from MathJax to KaTeX in markdown

Friday, November 7th, 2014

I wanted to try out switching to KaTeX from MathJax for our libigl tutorial. KaTeX needs a little bit of javascript besides the including the script to know to iterate over all class=math tags and render the latex code.

Also, it seems that markdown translates \\(x+y\\) into <span class=math>\(x+y\)</span> and the \( parenthesis throw off the KaTeX. You get an error like:

ParseError: KaTeX parse error: Expected 'EOF', got '\(' at position 2: \(x+y

So my header to switch from mathjax simply iterates over all math tags on document load using jquery and strips these parenthesis (which I expect on all tags):

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.1.1/katex.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$(function(){
  $(".math").each(function() {
    var texTxt = $(this).text();
    texTxt =  texTxt.slice(2,-2);
    el = $(this).get(0);
    if(el.tagName == "DIV"){
        addDisp = "\\displaystyle";
    } else {
        addDisp = "";
    }
    try {
        katex.render(addDisp+texTxt, el);
    }
    catch(err) {
        $(this).html("<span class='err'>"+err);
    }
  }); 
}); 
</script>

I didn’t invest much more into bulletproofing this because it seems like KaTeX is still in its infancy in terms of LaTeX support. It doesn’t support unicode characters (e.g. ∑, ∆, π) or common tags like \mathbf or \begin{cases}. Hopefully it will eventually, it is much faster than MathJax for the simple equations.

Continuously refresh markdown output

Tuesday, June 17th, 2014

I had a hard time finding a chrome plugin for a rendering markdown which supported LaTeX equations. Instead I’m using multimarkdown which supports equations with mathjax. However, to render the html output I need to open it in Chrome and refresh it when anything changes. So my pipeline looks like:

repeat
  edit .md files
  run multimarkdown command
  open/refresh .html file in chrome
end

I found this nice ruby/applescript script.
I’ve modified it to support markdown files and to run a command when a file changes:

#!/usr/bin/env ruby
# watch.rb by Brett Terpstra, 2011 <http://brettterpstra.com>
# with credit to Carlo Zottmann <https://github.com/carlo/haml-sass-file-watcher>

trap("SIGINT") { exit }

if ARGV.length < 2
  puts "Usage: #{$0} watch_folder keyword command"
  puts "Example: #{$0} . mywebproject"
  exit
end

dev_extension = 'dev'
filetypes = ['css','html','htm','php','rb','erb','less','js','md']
watch_folder = ARGV[0]
keyword = ARGV[1]
command = ARGV[2]
puts "Watching #{watch_folder} and subfolders for changes in project files..."

while true do
  first = true
  while true do
    files = []
    filetypes.each {|type|
      files += Dir.glob( File.join( watch_folder, "**", "*.#{type}" ) )
    }
    new_hash = files.collect {|f| [ f, File.stat(f).mtime.to_i ] }
    hash ||= new_hash
    diff_hash = new_hash - hash
    if not diff_hash.empty?
      if first and not command.empty?
        val=`#{command}`
        first = false
      else
        break
      end
    else
      sleep 1
    end
  end


  unless diff_hash.empty?
    hash = new_hash

    diff_hash.each do |df|
      puts "Detected change in #{df[0]}, refreshing"
      %x{osascript<<ENDGAME
            tell application "Google Chrome"
    set windowList to every window
    repeat with aWindow in windowList
        set tabList to every tab of aWindow
        repeat with atab in tabList
            if (URL of atab contains "#{keyword}") then
                tell atab to reload
            end if
        end repeat
    end repeat
        end tell
ENDGAME
}
    end
    sleep 1
  end

end

Save this in a file watch.rb and then call with something like:

watch.rb . readme "multimarkdown readme.md -o readme.html"

Open IEEE pdf without banner

Tuesday, February 11th, 2014

The IEEE Xplore library has a very annoying way of serving up PDFs. The page has two frames, one’s a small banner at the top and the bother is the PDF. Both Safari and Chrome keep the banner in focus so when I try to zoom I’m just zooming the banner. Here’s a javascript bookmarklet to open that second frame as a proper page:

javascript:(function(){window.location.href=document.getElementsByTagName("frame")[1].src;})()

Buttons inside forms are default type submit

Thursday, July 18th, 2013

I was frustrated that my undo button was submitting my form. My HTML code looked something like:


<form action="." method="GET">
...
<button onclick="undo();">Undo</button>
<button onclick="redo();">Redo</button>
...
</form>

At first I thought it was a javascript problem and some how my undo() function was submitting the form erroneously. But lo and behold this is the default behavior of a button inside of a form.

So, I needed to change my HTML to:


<form action="." method="GET">
...
<button type=button onclick="undo();">Undo</button>
<button type=button onclick="redo();">Redo</button>
...
</form>

Flushing php output on Safari with php scripts (hosted by Bluehost)

Thursday, June 13th, 2013

There are many, many posts about getting php to flush its output while a script is executing. No one solution worked for me, but I finally found a combination of things that did.

First of all my default php.ini shows these two relevant lines:


output_buffering = On
zlib.output_compression = Off

Then I put an .htaccess file in the directory that I’d like to have my buffering script with the following line:


SetEnv no-gzip dont-vary

Finally here was my small test php file:


<?php  // not in table tags for IE                         
    @ini_set('zlib.output_compression', 0);
    @ini_set('implicit_flush', 1);
    //for ($i = 0; $i < ob_get_level(); $i++) { ob_end_flush(); }
    ob_end_flush();
    ob_implicit_flush(1);
?>
<html>
<body>
<?php
echo str_pad('',1024);  // minimum start for Safari
for ($i=10; $i>0; $i--) {
  echo str_pad("$i<br>\n",8);
  // tag after text for Safari & Firefox
  // 8 char minimum for Firefox
  usleep(100000);
}
?>
</body>
</html>

Php generate html select options from array

Tuesday, November 8th, 2011

Here’s a super obvious php snippet that generates a list of options for a “select” html form tag on the fly:


<select id="tf_select" name="tf_select"
onchange="update(this,document.getElementById('tf'));">
  <option value="">Select...</option>
  <?php
$a = array("New Haven","Rochester","New York","Washington D.C.","Seattle","Zurich");
foreach($a as $e)
{
  echo "<option value='".$e."'>".$e."</option>";
}
  ?>
  <option value="Other...">Other...</option>
</select>

Combined with the javascript from an earlier post, it should be very easy to generate selectors for php based forms.

Set up virtual host on mac os x

Tuesday, September 6th, 2011

We’re using SVN to version control our group’s webpage which is all php scripts. If everything were html files then making edits on a locally checked out copy would be easy since I can just open the files in a browser and check my edits. But, being PHP scripts, to properly see the sites I need a php server running which can host the local copy of the site and I can see the edits I make live. Then finally when I’m sure everything looks and executes correctly I can check in the edited version and update the version on the real server. Here’s how I constructed my local setup.

Check out svn to some directory, from now on referred to as “path/to/htdocs-igl”:


svn co https://private.svn.server.com/trunk/htdocs-igl path/to/htdocs-igl

Be sure that no apache servers are not running. The following in order should to do that:


sudo apachectl stop

Use ps and grep to determine if they really stopped. This should return nothing:


ps -ef | grep httpd | grep -v grep

If it returns some lines, then kill each replacing [PID] with each row’s process ID:


sudo kill [PID]

If the process didn’t really die then try:


sudo kill -9 [PID]

And after you think you’ve done enough killing, issuing this again for good measure:


sudo apachectl stop

Now that we’re sure no apache servers are running. Start one:


sudo apachectl start

To check that it’s working browse to http://localhost/. You should see something fully load other than “Not found, blah blah”.

Now, add the following as a new line at the bottom of the file /etc/hosts:


127.0.0.1       localigl

Now you should be able to go to http://localigl/ and see the same thing as you did with http://localhost/.

To have http://localigl/ point to your checked out version of the website, you need to edit the file /etc/apache2/users/[your mac username].conf:


NameVirtualHost *:80

<Directory "/Users/[your mac username]/Sites/">
    Options Indexes MultiViews Includes
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>

<VirtualHost *:80>
    ServerName localhost
    DocumentRoot /Users/[your mac username]/Sites/
</VirtualHost>

<Directory "/absolute/path/to/htdocs-igl/">
    Options Indexes MultiViews Includes
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>

<VirtualHost *:80>
    ServerName localigl
    DocumentRoot /absolute/path/to/htdocs-igl
</VirtualHost>

Replacing, in the file name and the file contents, [your mac username] with, uh, your mac username.

You must give execute access to parent directory and the root directory of the checked out website:


chmod 755 path/to/htdocs-igl/..
chmod 755 path/to/htdocs-igl

Finally, restart the server with:


sudo apachectl graceful

If you now go to http://localigl/ you should see a listing of the checked out website’s root directory contents (or if you’re using index.html, you’ll see that rendered file). Since we’re using PHP for everything we must enable php scripts.

Uncomment the following line in /etc/apache2/httpd.conf to look like this:


LoadModule php5_module        libexec/apache2/libphp5.so

And again restart the server:


sudo apachectl graceful

Now when you go to http://localigl/ you should see your php scripts executed and rendered.

Source This document is well written but did not enough stress that you must stop all servers (that you may have accidentally started when fooling around) before starting the steps. And it’s nice to repeat his steps with exact names closer to my current set up.

Fullscreen, blank homepage

Saturday, September 3rd, 2011

I usually use a blank or empty page as my homepage. This makes for quick browser start up and minimal waiting when making new tabs/windows.

I find myself often opening a new browser window resizing it to fill the whole screen and then browsing. This goes against how apple wants me to use my mac. The little green plus sign button on the top left corner of the screen is supposed to be smart enough to always maximize the current window only as much as it needs to/should. But what is the correct maximization of a blank page? Apparently its a full height window with some arbitrary width. Why not make it a full height and full width window. To do this for my browsers (Safari, Firefox, Chrom(e|ium)) I made a little html file that displays a blank, fullscreen-able page. Save the following in a file on your computer called fullscreen-homepage.html:


<html>
  <head>
    <title>Fullscreen Homepage</title>
  </head>
  <body style="min-width:10000px;overflow:hidden">
  </body>
</html>

Open the file with your browser and copy the address at the top (starting with file:// to your browser’s preferences as your homepage for new tabs and windows. Here’s what to change in the Safari preferences:
safari preferences local fullscreen homepage