Wednesday, February 17, 2016

Validating HTML and CSS

It seems like my validation methods change every semester.  Sigh.

Here's what I'm currently doing.

For HTML, I use Firebug Add-on for Firefox with the Validator extension.
Launch Firebug by clicking the bug icon.

In the console at the bottom of the page, Click Validator and Start Validation

To Validate CSS, I like the Web Developer toolbar add-on.
Web Developer toolbar puts handy tools at the top of your browser window. Start by browsing to your web page (NOT the css file), then click the Tools menu to validate CSS.  You can also use the Web Developer toolbar for html validation, but it doesn't work for some versions of Firefox.

Saturday, January 30, 2016

Internship opportunity:
You need experience with JavaScript. Internship is with RevCult (Revenue Culture)? Contact Jodi Reed if you are interested.

Wednesday, November 18, 2015

useful browser add-ons

Here are some of the browser add-ons I use:

Tuesday, September 29, 2015

Embedding a responsive Google Calendar within Bootstrap

So -  I'm a Google Calendar fan.  One of the things I love is that I can create different calendars for different parts of my life (personal, work, etc.) and I can easily embed those calendars within a web page by copying and pasting the HTML code (see below for screen shots).  The problem is that the code uses iframe and you have to specify a fixed width, so that doesn't work well for responsive pages.

If you are doing your own coding, you can go ahead and create several divs with large, medium, and small options and just hide and show the divs depending on the size.

Bootstrap actually makes this pretty easy with its responsive utilities.  To make this work, just put 3-4 versions of the embedded calendar on the page and surround each option with a div with the class for the proper viewport class.

For example, for the large viewport size (>1200 px), I set the calendar width to >1100 px and the div looks like this:

<div class="visible-lg text-center">

I like to use weekly or agenda view for the calendar since it looks better than the monthly view on smaller devices.

Embedding the calendar

Start by going to settings for the calendar you want to embed.

Then just copy and paste the code into your html where you want it to display.