Updating with Bootstrap 2
I wasn’t feeling well today thanks to a major head cold.
I hate it when that happens.
So, I spent the day at home. After downing a couple pots of coffee I mustered up some ambition and decided to update my projects with Bootstrap 2 from Twitter.
Besides the fact that they’ve added some pretty cool stuff I haven’t even started using, they’ve changed some things. I recommend reading through that document because there are some fairly significant changes.
Read MoreThe Supermarket API app
Image by .shock @ photoxpress
I recently started a small app – or at least the beginnings of an app that I may decide to add additional functionality to – and deployed it to my projects domain. It’s still pretty rough around the edges and I may or may not keep it and add to it. For now I’ve named it Django Supermarket.
The application uses an external API – the Supermarket API.
It’s not 100% fully featured. Right now it does a few things, but not everything you’d expect if it were a fully featured supermarket-cart-shopping-checkout kind of application.
For me, it fulfilled some curiosity behind using an external API, Bootstrap from Twitter and Django. For the most part I’d say that it turned out pretty well. I built it pretty quickly and I’d like to revisit it and do a few things differently, make a few things better and add a few things here and there to achieve some general improvements overall.
The application does the following:
- First it allows you select your location using either Zip Code or State and City.
- Then, you select the grocery store you would like to use.
- After you’ve chose your location and store, you can start shopping for items and add them to your basket.
Data Storage
Keep in mind, I don’t really save much data in this app. I do store the States. Every time a new user enters the app I call for a fresh list of States served up by the API and store those in the event a new one might be added. I also use this call to make sure the external API is live.
The only other thing I store is the user’s preferences ( location and store info ) and items added to the cart – unless the items are removed from the cart.
The things I’d like to be able to change:
Facelift
Yep. It needs to be prettier. I do, in fact, know this.
Location
Overall I’d like to provide more a much more rich location selection feature – maybe add some intelligent location detection or some kind of HTML 5 location awareness. However, one thing the API does not provide is Longitude / Latitude. It’s either Zip Code or State and City. I imagine I could build something to be more region aware, but it would be nice if the API was better tuned to provide something by Lat/Lon.
Better Product Shopping Selection
The “shopping” screen never really has anything to display unless the user actually searches for something.
Something that would really be nice from the API is a “Recommended Items” method. For example, if I could provide a keyword in my request and the response provides a list of recommended items, that would be a nice addition. This could be done when the user has selected their store and moves to the “shopping” screen.
If there was an API call like this, another parameter could potentially be the storeid. The response could either send “recommended” items or items “on sale.”
Autocomplete
That doesn’t work very well, does it? Seems kind of weird to me that it always returns the same chunk of data regardless of what the user enters.
Pricing
Seriously? I have to pay to get the prices of items? Since I don’t intend to pay just to work on an app that I really have no intention of selling – this is just for fun – I need to make up my own prices.
Checkout
I may build this – I may not. Probably not. Most likely I will have moved on to the next app that’s interested me.
If you’ve had a chance to use it, please let me know what you think.
Read MoreThe weekend in which everything gets changed
Image by dinostock @ photoxpress
It’s been a pretty productive weekend so far.
I’ve made a significant number of changes to the site that badly needed done. Luckily this weekend is a three-day weekend and that provides me with a generous chunk of time to do all the stuff I need to get it done.
I’ve wanted to make a bunch of changes since the first of the year. First off, I wanted to change the theme I’ve been using. There’s nothing wrong with the previous theme, I just wanted something new to look at. I also wanted to change the way I was putting project stuff out there.
Now I can say I have made those changes and I am ( for the time being ) happy with the outcome.
Previously I was using the Yoko theme. I like the theme for the mobile capabilities it has right out of the box. Using a child theme I created based on it, I was happy for quite some time. However, as every WordPress user does, after a while you decide that there’s something else you would like your theme to do or you just want a fresh look. For me it was the latter. I just wanted a fresh look – something new, something different.
Personally, I’d really like to do something else along the lines of the site’s look and feel. But, a guy’s gotta pick his battles and I decided to knock this one out early because the real meat of the change was ahead of me. WordPress theme changes, as easy as they are, were the least of my worries.
This year is really about change for me. For years I’ve been a software developer. I like it. It feeds, houses and clothes my family and I. I’m not attached to any one language, framework or technology. But, as I said, this year is about real change for me. I feel as if I’ve been stagnant – doing the same repetitive tasks for too long expecting the outcome to be different each time.
I remember hearing somewhere that that is the definition of psychotic behavior. I hope not! I don’t think I’ve achieved that just yet.
A while back I applied for an internal position where I work to do front-end development. I was “hired” for it. The caveat being that my position was replaced first before it would become official. Well, I’ve been waiting for quite a while. Although it’s not “official” at work yet, in my mind it’s official and it’s part of the way I define who I am now.
The job change also brought about a change in the way I do my work. Previously I was kind of a Linux guy. I’m no uber-console-jockey, but I’ve always preferred using a Linux box as my workspace/development machine. Now that has become a Mac – and I love it. I used to make fun of all those Apple fanboys, but now I will most likely join their ranks.
The other change to the site I made follows one of the goals I set for this site and why I chose to use Webfaction. At home I generally use Django for project development. Although there are a couple reasons why, I’m not going to espouse the virtues of Django development – that’s for another post entirely. I do a lot of stuff at home. Some of it I finish, some of it I don’t. That needed to change. My goal was to put the projects I do at home “out there.” It’s one thing to work on stuff and talk about it in a blog post, but it’s another to have it where people can see it. I want people to see it – that’s why I do it.
Previously I had my little project stuff ( which was predominantly non-application stuff ) out there in a sub-directory that consisted primarily of static html. Now all my projects are at projects.blinkray.com. I created a Django project to house everything. This, as I see it, benefits me in a big way since I can now add a heck of a lot more functionality to the apps I create, deploy the stuff much easier and maintenance is much easier. What’s more I’m no longer tying anything to WordPress.
So, I migrated all the projects to the Django project and I have a mini-app in there which was a bit of experimentation for me. A few weeks ago I was trying out Bootstrap from Twitter ( which is pretty stinking cool ) and I wanted to put together an app using it. However, I wanted to use an external API that would provide the data I needed for the app. I follow Programmable Web and saw the Supermarket API. I thought it might do nicely.
The app isn’t full featured. It’s still a work in progress. Some things are not available to me ( like product pricing ) since I have no desire to pay to use the API, but it’s a good start. I may build on it and I may not. I’m already beginning to think about another project that interests me using another API.
That’s it so far. Check out the projects and the new site.
Read MoreQuintessential show/hide elements with JavaScript
Add some pieces of flair
Even if you are making a plain old HTML page to serve as nothing more than a FAQs page you add a piece of flair to the page by using just a sprinkling of JavaScript.
Let’s say, for example, that your FAQ page largely consists of an un-ordered list of questions. Each question is hyperlinked. Within each list item, there exists a paragraph that is the answer.
Perhaps the paragraph is going to be invisible. The desired result is that when the visitor clicks on the hyperlink the paragraph becomes visible. Alternately, when the hyperlink is clicked when the paragraph is visible, the paragraph becomes hidden.
This is easy enough to achieve without any special additional libraries.
The first piece of code I’m going to post is the layout for the HTML. As I said it essentially consists of an un-ordered list with a hyperlink and a paragraph within each list item:
<ul>
<li><a href="javascript:showAnswer('hide1')">Do you know the way to Santa Fe?</a>
<p id="hide1" style="display: none;">Yes, head NE from Albequerque</p>
</li>
<li><a href="javascript:showAnswer('hide2')">What is the meaning of life?</a>
<p id="hide2" style="display: none;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</li>
</ul>
Pretty simple, eh?
As you might guess, we’re going to create a JavaScript function named showAnswer that will take an argument of the paragraph that has a specific id. Each paragraph must have a unique id in order for this to work. Additionally, make sure that each paragraph is initially set to display:none.
Now for the javaScript:
function showAnswer(which) {
if( document.getElementById( which ) ) {
if( document.getElementById( which ).style.display == 'none' ) {
document.getElementById( which ).style.display = 'block';
}
else {
document.getElementById( which ).style.display = 'none';
}
}
}
Not exceptionally verbose . . .
The script, when called, simply checks to see if, in fact, an element with the passed-in id exists. It then checks to see what the value of the CSS style “display” happens to be. If it is “none” then it will set it to “block” so the element will be visible. If it is anything other than “none” it will set the display to “none” so it is no longer visible.
If you would like to see this script working, you can see it here.
So, that’s one way of doing it right?
What if you want another way to do it using JQuery? That’s a pretty simple thing to do as well. It’s simply a matter of converting this to JQuery. Not much will have to change in your HTML.
What if you don’t want to use ids? What if you wanted to handle this with classes only? This is something I wanted to try. Here is the result. There might be a little more work to do, it was late and I was watching the movie, Unknown, at the same time:
The HTML:
<ul> <li><a href="#" class="showControl">Do you know the way to Santa Fe?</a> <p class="hid" style="display: none;">Yes, head NE from Albequerque</p> </li> <li><a href="#" class="showControl">What is the meaning of life?</a> <p class="hid" style="display: none;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </li> <li><a href="#" class="showControl">There is no p</a> <span class="hid" style="display: none;">Yes, head NE from Albequerque</span> </li> </ul>
So, if you’re following along you’ll see that I removed the ids from the paragraph elements. They now have a class of “hid.” Each hyperlink element has a class of “showControl.” Notice on the third list item there is no paragraph – instead there is a span.
Here’s the JQuery:
$('.showControl').click( function(e) {
if( $(e.target).parent().children('p.hid').length > 0 ) {
if( $(e.target).siblings("p:first").css('display') == 'none' ) {
$(e.target).siblings("p:first").show('slow');
}
else {
$(e.target).siblings("p:first").hide('slow');
}
}
});
We’re doing, for the most part, the same thing we did with the previous script – with a few modifications. The script checks to see ff the parent of the target element of the event that triggered the click has any children that happen to be paragraphs. If there are, and they are hidden, it will show them. Vice-versa if the paragraphs are visible.
Also, instead of just altering the CSS style, I’m using the show or hide which throws in a little animation – extra pieces of flair.
You can see this working on this page.
However, the best way to achieve this is by not even inspecting the display attribute at all. Let jQuery handle it. There’s a handy function, slideToggle(), you can use to handle this:
$('.showControl').click( function(e) {
if( $(e.target).parent().children('p.hid').length > 0 ) {
$(e.target).siblings("p:first").slideToggle().animate({'backgroundColor' : '#F2DCE2'});;
}
});
It works simply and efficiently without you having to do the extra work. For extra flair the animate function is used to highlight the paragraph. See it in action here.
I haven’t fully tested it all in a wide array of browsers. So, if you find anything, have any thoughts or comments please be sure to add to the discussion.
Read MoreChanges and Updates and Indecision
So I made changes to the customization of the site. I planned on going all out from scratch, but that process is going to be a longer undertaking than I had originally contemplated.
So, for now I’m customizing the Yoko Theme. The same rules apply from my first post. The only difference is that I copied the entire style.css file as I customize several entries to get the layout you see.
I’ve also customized, so far:
- content-single.php
- footer.php
- header.php
- searchform.php
- sidebar.php
- single.php
See, Yoko has two sidebars set to the right of the main area. I’ve never been big on two thin sidebars. To get rid of them you have to edit the sidebar.php and style.css file.
The really cool thing about the theme, however, besides the commitment to HTML 5 is that the theme is ready for mobile using media queries right out of the box. The site shows up pretty good on my Android G2. I don’t have any other devices right now. If you happen to browse using an iPad or tablet let me know.
Questions? Comments? Feel free to share.
Read More
Recent Comments