Twitter

Web Dev Notes

By day, I am a mild-mannered web developer. These are related notes.

Sunday
Jan082012

Basics of an HTML5 visual editor

Visual or WYSIWYG editors are commonplace now online. So, this morning for fun, I decided to try making one in HTML5.

The HTML file below is a really basic version, not optimized but working. One feature I would like to include is suggested words, for creative writing. The Big Huge Thesaurus looks like a good option.

visual editor v0.1

Wednesday
Jan042012

How to automatically update the copyright year on Squarespace

Question

It's 2012 and your copyright year still reads 2011. You vaguely remember that computers allegedly save time. So, you wonder if there might be an easy way to automatically display the current year and save yourself a few clicks and minutes each year.

Answer

There is! And it's easy. JavaScript 101 easy. No, jQuery 101 easy!

Note: This assumes you have jQuery installed. If not, see this post. Also, this solution basically applies to any site with jQuery.

Step 1: Add container element

  1. Go to Website Management > Structure > Website Settings > Header & Footer Website Footer / Licensing Notice
  2. Paste this:
    Copyright &copy; <span class="current-year"></span>
    

Step 2: Add jQuery

  1. Go to Website Management > Structure > Website Settings > Code Injection
  2. Paste this:
    <script type="text/javascript">
    $(function(){
      $('.current-year').html((new Date).getFullYear());
    });
    </script>
    
Thursday
Dec292011

Presentation on modern web development

This presentation offers a quick and not remotely comprehensive overview of modern web development, and that means mostly front-end web development.

Thursday
Dec292011

How to play Keynote full-screen

It's simple to display Keynote presentations full-screen. But, since I'm new to the program, it took me a minute to find the option. Here's how to do it.

Instructions

  1. Go to the Keynote menu.
  2. Go to Preferences.
  3. Go to the Slideshow tab.
  4. Check "Scale slides up to fit display."

Screenshot

screenshot of Slideshow scale option in Keynote

Note: This applies to Keynote '09.

Wednesday
Dec142011

Automator workflow to download specific files from URL

I've finally returned to the saving grace of Macs after over a decade and I love it! One useful app is Automator, which, as the name implies, automates tasks. This is potentially very helpful, although, after looking at all the options one night, I have to confess that I walked away wondering how I would practically use it.

Well, today, at a conference, I finally found a great use: downloading specific files, in my case .pdf and .zip files, from a URL.

Instructions

  1. Open Automator.
  2. Make a new workflow.
  3. Add these actions, in this order:
    1. Get Specific URLs
    2. Get Link URLs from Webpages
    3. FIlter URLs
  4. In the "Get Specific URLs" action, set your URL.
  5. In the "FIlter URLs" action, add your filter(s). (e.g., Name contains .pdf)
  6. Run, to test results.
  7. Add the "Download URLs" action and choose a download folder.

Wait for it to finish, which could take a while depending on total file size.