Amped about Web Standards http://www.ampedwebstandards.com Discussion, code examples, and tutorials on web standards and web programming. Fri, 02 Aug 2013 07:40:27 +0000 en-US hourly 1 https://wordpress.org/?v=4.6.1 1078934 How to add a weather watchface to your Pebble synced with a standard iPhone http://www.ampedwebstandards.com/2013/08/02/how-to-add-a-weather-watchface-to-your-pebble-synced-with-a-standard-iphone/ http://www.ampedwebstandards.com/2013/08/02/how-to-add-a-weather-watchface-to-your-pebble-synced-with-a-standard-iphone/#respond Fri, 02 Aug 2013 07:32:26 +0000 http://www.ampedwebstandards.com/?p=170 read more]]> Tired of the Android – Pebble watch owners having all the fun?91 | My Pebble Faces

Thanks to a couple of awesome developers in the community – iPhone – Pebble watch owners can deploy a watchface that has some pretty slick features on it. And no, it won’t require a jailbroken iPhone. Thankfully, this process has recently got a lot easier than when I first found a watchface showing current local weather a few months ago. However, its still enough off the beaten path that I thought I would walk thru the steps for anyone that is interested, but hasn’t found or tried it yet.

Requirements:

  • iPhone 3GS/4/4s/5
  • Pebble App 1.0.6 or later
  • httpebble App 1.0 or later
  1. Step 1 – install httpebble on your iPhone. (I’ll assume you probably already have the Pebble app installed)This app is what allows your Pebble to access the internet for other sources of information – such as the weather! A very hard working and smart developer in the Pebble community named Katherine is responsible for this most useful app.It’s free and can be found here: https://itunes.apple.com/us/app/httpebble/id650174711?mt=8
  2. Download watchface 91 Weather Moonphase from My Pebble FacesMake sure your Pebble is currently connected to your iPhone via Bluetooth.Start at the download page.  

    (http://www.mypebblefaces.com/view?fID=4029&aName=Novo&pageTitle=91)

    Important note: In the “select a version” area to the right of the watchface graphic, switch to 91 Weather Moonphase (iOS/ENU). The current latest version is 0.3.1.

    If you have not installed custom watch faces before, the easiest way to do this is to navigate to mypebblefaces.com website via your iPhone, search for this watchface, and click the Download Watchface link. You will see a page with the .pbw file that has an option to “Open in Pebble”.

  3. Confirm the installation of the watchface via the Pebble App and it will be loaded on to your Pebble watch. Navigate to your new watchface!It will automatically find the local weather, sunrise, and sunset, and current state of the moon.The only minor issue I have with my favorite watchface is the date format, which is DD.MM.YY.

The watchface is fairly stable but from time to time it will lose connectivity and display a broken iPhone icon in the top section instead of the temperature. Usually, just restarting the httpebble app will resolve the problem and you’ll see the temperature again.

Enjoy, and please feel free to comment if you have any issues with these instructions. Better yet, share if you know of another favorite watchface!

]]>
http://www.ampedwebstandards.com/2013/08/02/how-to-add-a-weather-watchface-to-your-pebble-synced-with-a-standard-iphone/feed/ 0 170
Pebble Watch – my 2 Month Review http://www.ampedwebstandards.com/2013/06/10/pebble-watch-my-2-month-review/ http://www.ampedwebstandards.com/2013/06/10/pebble-watch-my-2-month-review/#comments Mon, 10 Jun 2013 10:14:59 +0000 http://www.ampedwebstandards.com/?p=162 read more]]>

Pebble watch

Pebble on iOS, with live weather!

In two days, I will have had my Pebble watch for 2 months.

Other than two complaints and one minor nitpick (see below), I absolutely love this watch.

Let’s start with the positives. This watch can do amazing things, even with the more-than-a-little restrictions placed on it by linking it to an iPhone running iOS. It can display text messages and incoming phone calls. It can now even queue multiple messages thanks to a recent firmware update. Mainstream app store app integrations are starting to appear, such as RunKeeper and FreeCaddie. I’ve had the chance to put RunKeeper thru its paces, and the fact that my pace, running time, and other important info all appear on my Pebble via the bluetooth connection is quite useful. With a published 2-way SDK, I even have the opportunity to write my own apps for it – something I plan to do in the very near future. Even the customizable watchfaces are a lot of fun – I currently have 10 installed and with a bit of work and an extra app (httpebble) I was able to get live weather working on my Pebble talking to my non-jail broken iPhone 5.

On to the two complaints:

  • No easy way to track the battery life on the pebble. Usually when I see the low battery indicator on the watch, it only lasts 2-3 more hours. A future update to the Pebble software to take advantage of the latest Bluetooth protocol 4.0 should help improve the overall battery life soon. 
  • Could really use a “night” profile that automatically turns off vibrations, notifications, and the light when in this mode. Would help avoid any further marital stress that the Pebble has caused a few times when my watch has received a notification even when my iPhone is two stories below in the basement, charging.

The nitpick would be the fact that incoming phone calls don’t have any caller ID associated with them. I suspect this is yet again due to the crippled information caused by pairing with iOS, and I hope this is something that can be worked out in the future.

I am hopeful that both of these complaints I have with the watch can be resolved by enterprising app developers or further firmware updates. That is one of the strengths of this watch – it can continue to evolve and grow over time.

]]>
http://www.ampedwebstandards.com/2013/06/10/pebble-watch-my-2-month-review/feed/ 1 162
New Theme! http://www.ampedwebstandards.com/2013/01/14/new-theme/ http://www.ampedwebstandards.com/2013/01/14/new-theme/#respond Mon, 14 Jan 2013 11:08:32 +0000 http://www.ampedwebstandards.com/?p=157 read more]]> I realized with many of my long-standing blogs where I was using custom themes, that they were no longer very optimal with all of the recent changes to WordPress. Comments weren’t working well, a lack of support for newer widgets was a pain, and my website looked pretty bad on mobile devices.

So, today I upgraded to a great new theme – Montezuma that is up to date, and provides a responsive and adaptable framework to start over from.

There will need to be further changes to the look and feel in the coming weeks, but I hope all future visitors find it a welcome change!

]]>
http://www.ampedwebstandards.com/2013/01/14/new-theme/feed/ 0 157
Explaining Browsers and the Web to Everyone Else http://www.ampedwebstandards.com/2010/12/10/explaining-browsers-and-the-web-to-everyone-else/ http://www.ampedwebstandards.com/2010/12/10/explaining-browsers-and-the-web-to-everyone-else/#respond Fri, 10 Dec 2010 20:04:07 +0000 http://www.ampedwebstandards.com/?p=148 read more]]> For most people that find and read this blog, this new website created by Google will not be that useful (although its still a fun visit for their use of CSS3 and Javascript) as you probably already know most if not all of the content.

However, with the holidays coming up, you will find yourself surrounded by many family members and friends that “don’t quite get it” or really don’t have a clue as to what you do, and how the “Internets” provide them with pretty pictures when they click on that “Blue E” on their desktop.

When that happens, grab your laptop and show them this:

20 Things I Learned about Browsers and the Web

What you will find is an immersive (it’s navigation is setup like a book) engaging, and informative website covering a wide variety of subjects ranging from Cloud Computing to HTML5 to How Modern Browsers can Protect you from Malware and Phishing.

Enjoy, and wishing all of you a safe and happy holiday season!

]]>
http://www.ampedwebstandards.com/2010/12/10/explaining-browsers-and-the-web-to-everyone-else/feed/ 0 148
2010 Web Advent Calendars http://www.ampedwebstandards.com/2010/12/07/2010-web-advent-calendars/ http://www.ampedwebstandards.com/2010/12/07/2010-web-advent-calendars/#respond Tue, 07 Dec 2010 20:15:12 +0000 http://www.ampedwebstandards.com/?p=139 read more]]> December 1st – 24th has become an especially rewarding time for web developer geeks.

I believe “24 Ways” was the first, starting up in 2005, but several more have popped up in other areas such as PHP, HTML5, and performance. Check in on each of the links below, once a day til the end of the advent season for useful web related tips, tutorials, and inspirations!

http://24ways.org/ — The original, and covers a wide range of web related topics – 6 years running!

http://html5advent.com/ – new this year, a visual treat with links to some fun HTML5 examples

http://phpadvent.org/ – PHP, a server side language

http://calendar.perfplanet.com/2010/ – web technology performance tips

If you know of any that I haven’t listed, please leave a comment.

Enjoy, and Happy Holidays!

]]>
http://www.ampedwebstandards.com/2010/12/07/2010-web-advent-calendars/feed/ 0 139
Blank Post Editing Screen (WSOD) in WordPress 2.8 http://www.ampedwebstandards.com/2009/11/23/blank-post-editing-screen-wsod-in-wordpress-2-8/ http://www.ampedwebstandards.com/2009/11/23/blank-post-editing-screen-wsod-in-wordpress-2-8/#comments Mon, 23 Nov 2009 07:38:39 +0000 http://www.ampedwebstandards.com/?p=122 read more]]> Since, it took me over an hour to diagnose and fix this issue in one of my own WordPress installations, I thought I would write up a quick how-to on the solution to this issue to hopefully save others in wasting their own time.

Symptom:

Accessing the Edit screen via WordPress Admin showed a blank screen in several versions of WordPress 2.8. The rest of the Admin was working fine.

Cause:

I use Subversion to automate the update/upgrade to new versions of WordPress. This has worked great for me for awhile without incident. In the most recent update, the post.php file was updated and the Subversion update command changed the ownership of the file to the user root, which my script was running as.

This permission changed caused a subtle PHP error, and since the recent version of PHP 5 on my server has the default behavior of not displaying errors – a blank white screen was being shown in WordPress.

Fix:

Reset the permissions recursively on your entire WordPress install.

For example, if your user and group were joesmith and users, run the following command at the root of your WordPress install folder:

chown -R joesmith:users *

You should then be back in business!

So the moral of this story is, if you update your WordPress blog via Subversion – fix your file permissions afterwards.

]]>
http://www.ampedwebstandards.com/2009/11/23/blank-post-editing-screen-wsod-in-wordpress-2-8/feed/ 2 122
Tutorial: Dynamic slideshow with PHP & JQuery http://www.ampedwebstandards.com/2009/03/16/tutorial-dynamic-image-slideshow-with-php-jquery/ http://www.ampedwebstandards.com/2009/03/16/tutorial-dynamic-image-slideshow-with-php-jquery/#comments Mon, 16 Mar 2009 08:39:25 +0000 http://www.ampedwebstandards.com/?p=95 read more]]> When I set out to add database driven player info at NuggetsHoops.com, I knew that I wanted to include code that would display some of the many images that I had set aside for each NBA player. I also knew that I would continue to add new pictures. Application code that could easily display old and new images, without additional effort for each added image would work best.

I had already written PHP code that could look at a folder and create a list of images to be displayed. When I ran across the powerful jQuery Cycle Plugin, I had found a great way to display them.

Let’s get coding. This tutorial depends on PHP 5, jQuery 1.2.3 or later, jQuery Cycle Plugin version 2.51 or later.

Add the following Javascript to your PHP/HTML to enable and call the Cycle Plugin:



Note that there are many options and styles of animation provided by the powerful Cycle plugin.

Add the following PHP to iterate over any folder and dynamically generate img tags using any images found in the folder:
$directory = 'images/players/' . $row['imageName'];
try {
// Styling for images
echo "

";
foreach ( new DirectoryIterator("../" . $directory) as $item ) {
if ($item->isFile()) {
$path = "/" . $directory . "/" . $item;
echo "";
}
}
echo "

";
}
catch(Exception $e) {
echo 'No images found for this player.
';
}

Any img tags within an HTML element of class ‘myslides’ (or whatever you initialized the Cycle plugin with in the Javascript) will have the slideshow behavior added to it. The $row array on line 1 is referencing a database query result, but could be set in a number of ways for your specific needs. The DirectoryIterator reference on line 5 is a builtin class in PHP5.

Here’s the CSS to style the images being displayed in the slideshow:

#myslides {
width: 340px;
float: right;
padding: 0;
margin: 0 auto;
margin-top: 20px;
}

#myslides img {
padding: 10px;
border: 1px solid rgb(100,100,100);
background-color: rgb(230,230,230);
width: 320px;
top: 0;
left: 0
}

So, there’s a very quick walk thru a working example to generate a dynamic slideshow from any folder of images. If you’d like a full download of the code, or any further explanation, please leave a comment!

You can see this code in action by just clicking on any player’s name at the NuggetsHoops.com Roster page.

New – download the code for this Tutorial

[download#WithImage id=”1″]

Demo

]]>
http://www.ampedwebstandards.com/2009/03/16/tutorial-dynamic-image-slideshow-with-php-jquery/feed/ 101 95
Merry Christmas and Happy Holidays! http://www.ampedwebstandards.com/2008/12/24/merry-christmas-and-happy-holidays/ http://www.ampedwebstandards.com/2008/12/24/merry-christmas-and-happy-holidays/#comments Wed, 24 Dec 2008 12:50:59 +0000 http://www.ampedwebstandards.com/?p=58 read more]]> One of the best presents a web developer can receive thru-out the year has arrived in December each of the last four years. 

If you have been a web developer during that span, you most likely are already aware, but just in case, I will share with you:

2008 24 Ways

Each year, a new web themed tip is posted each of the 24 days leading up to Christmas, in a fun holiday themed format. These tips are individual gems, all coming from internet industry super-stars and difference makers.

So do yourself a favor this holiday season and grab your laptop, another glass of eggnog, and head over to 24 Ways and bask in the generously shared ideas and knowledge.

Happy Holidays to All from AmpedWebStandards.com!

]]>
http://www.ampedwebstandards.com/2008/12/24/merry-christmas-and-happy-holidays/feed/ 2 58
Evernote rocks! http://www.ampedwebstandards.com/2008/10/30/evernote-rocks/ http://www.ampedwebstandards.com/2008/10/30/evernote-rocks/#comments Thu, 30 Oct 2008 13:15:11 +0000 http://www.ampedwebstandards.com/?p=45 read more]]> Evernote is a free service that allows you to “remember everything”.

Think of it as a backup for your brain. With desktop, mobile, and web based interfaces, along with state-of-the-art OCR capabilities, it is literally possible to record nearly anything you see each day and have it automatically cataloged so that is is accessible and searchable later.

Evernote has been around for a few years, but has steadily improved its available interfaces (started out as Windows only) by adding Mac and mobile. (including a free iPhone/iPod Touch application)

I’ve only recently started using it, but the possibilities already have my mind reeling:

  • Capture website snapshots instead of just a text link filed away in delicious
  • Save an image of each online purchase receipt page, instead of having to print it out
  • Take a picture of that great bottle of wine you just drank at a restaurant and you’ll be able to find it again later
  • Digitize all of your receipts
  • Capture those brilliant ideas you write down on dinner napkins
  • Convert your hand-written notes and throw them away

Hopefully I’ve piqued your interest enough to check it out for yourself. Stop taking my word for it, and go read more about Evernote today – it could change the way you backup your brain! As with most free services, if you find yourself really making use of it, there is a pro version for $40/yr that will let you capture more and do more.

If you’re still not convinced, or still don’t get what all the fuss is about, check out the Lifehacker article about it. Lifehacker is a great website dedicated to helping you get more out of life.

Please drop a comment below if you already use Evernote, or if you give it a try and have something to share!

]]>
http://www.ampedwebstandards.com/2008/10/30/evernote-rocks/feed/ 3 45
Progressive Enhancement with jQuery http://www.ampedwebstandards.com/2008/08/29/progressive-enhancement-with-jquery/ http://www.ampedwebstandards.com/2008/08/29/progressive-enhancement-with-jquery/#respond Fri, 29 Aug 2008 08:28:18 +0000 http://www.ampedwebstandards.com/?p=30 read more]]> While I work on finishing up an overdue post on the amazing An Event Apart San Francisco conference I attended last week, I thought I would at least write about one of the many new concepts that was discussed.

Progressive Enhancement (PE) is the concept of adding functionality or enhancements to the presentation and behavior of a webpage, using modern technologies such as CSS and Javascript. The PE approach adds the additional features thru externally linked files in order to avoid forcing older/less capable browsers to process data they don’t understand or can’t handle. In other words, the strategy demands that the basic content always be available, then add the fancier layout and features for browsers that can show it.

I’m going to show a quick but usable example of PE using jQuery. In this example, I am going to show how you can dynamically add an “external link” icon – to links inside a specific area of your webpage.

1. download the current release of jQuery (at this writing – 1.2.6) and add it to your webpage in the tag.

2. Next, we will utilize the jQuery approach of executing Javascript code when the Document is loaded and the DOM is ready to be manipulated.

$(document).ready(function() { });

3. Now, if we want to add an image after each external link, we can use the jQuery filter function which will addall elements that match a specified expression.

In the section above, we'll add:

$("a").filter(".selected")

4. The expression will be another function that tests the hostname property of the link to see if it is different that the current page’s hostname.

Try this:

function() { return this.hostname && this.hostname !== location.hostname; })

5. Lastly, we’ll use jQuery to insert the image after the link that matches the test expression – namely an external link!

.after(' <img src="/images/ext.png" alt="External Link">');

6. Let’s put it all together!

Here’s the sum of the Javascript that we’ve written:

$(document).ready(function() {
$('#extlinks a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).after(' <img src="/images/ext.png" alt="External Link">');
});

put that code in a Javascript file and include it after your jQuery code in your page’s :

That’s it! Now go give it a try for yourself.

]]>
http://www.ampedwebstandards.com/2008/08/29/progressive-enhancement-with-jquery/feed/ 0 30