ROS3BUD - The simple movie list
As I've mentioned in one of my earlier posts, a few weeks ago, I couldn't remember whether I've seen a particular movie or not and couldn't find a simple, clean app to list the movies I've seen and wanted to create one. Well... it's done! :)
Dude, what's with the "3"?
First off, I don't think I need to explain what the word "Rosebud" means. If you don't know or think it has something to do with a rose... and its bud... please watch the movie "Citizen Kane". However, why is there a "3" instead of an "e"? To make it "cooler"? Is it some kind of haxXxorZ sp33ch? Not really. The reason is very simple - the domain Rosebud.com is taken... by a porn site. Which isn't really bad, I mean... they sell movies there, so it's on topic. Sure, these movies aren't really too artsy, the dialogues are flat (which is a good thing - we all know you shouldn't speak with a full mouth) and the ending is very predictable, but a movie is a movie, right ;) Anyway, I've been looking for a different name for a long time, I didn't wanted to keep it within the VarHyid.com domain, I couldn't find a good name and since the "working title" was already Project Rosebud and the 3 is right above the e on the keyboard, I though... what the hell.
The best app ever written... on my keyboard
...and also the first app ever written on my keyboards, but then... who's counting? ;) Unlike my previous sites, this one wouldn't really work as a static website where I would insert my movies directly through the database, this would be too much hassle and it would defeat the purpose of being easy to use so I've made it fully dynamic and to raise the bar even higher, it's publicly available for anyone to use. Anyone can register an account and have their own nice, clean list. Therefore, it truly deserves the name "web app".
The first thing you'll notice when you revisit the app, you will always been to log in. There is no "Remember me" function yet, but there's a good chance one will be implemented in the future. For now, since the login/password boxes are visible on the hope page, you can just let your browser to remember your credentials or use a password manager and you'll log in with one click.
Let me see! Let me see!
OK, before I go into further technical details, here it is - Ros3bud.com - The simple movie list:
Isn't it beauuuuutiful? :) I could just look at the home page for hours without logging in ;) As it says on the home page, it allows you to:
- create a complete catalog of all movies you've ever seen on one simple and clean list,
- easily rate each movie and change your grades with one click (more details below),
- sort all your movies by title, year, grade, genre or the 'last seen' date,
- add movies you own to your Blu-ray and/or DVD collection (also with one click),
- share your list with your friends.
But how? Where? Why? For whom?
Basically, you just click on Add movie or hit the Insert key and the input box opens up. Now, you can simply add the movie title and... that's it - the title is the only required field to add a movie. Everything else can be edited later. However, if you already know the other details of this movie, click Tab to move from one field to the other and dill out the form with the year the movie has been released at, it's genre (you can easily just hit "T" to jump to "Thriller", for example), grade (1-10), the most recent date you've seen this movie on and define whether you own it on Blu-ray, DVD or both (or none).
Once you do, you can easily save it with the Enter key (or use the Save button) and continue adding another movie. Once you're done, either use the Cancel button or just hit the Esc key to close the input box. Each entry can be edited - quickly or partially. You can quickly rate a movie or change its current grade just by clicking on one of the stars. To add it to your Blu-ray or DVD collection - click on the BD or DVD icon. To enter full edit mode, click on the small pencil icon on the left side of the movie title (visible on hover). This mode allows you to change all parameters of this entry as well as delete it. If you choose to delete it you will be asked to confirm and if you "accidentally" click on delete and then "accidentally" confirm and then suddenly remember that you didn't want ed to delete it and email me how you can bring it back, the answer is - YOU CAN'T!
Finally, there's the Settings button which, as the name might have already suggested, shows the settings. Here, you can:
- set your list to "private" or "public" - all lists on a newly created account are private by default, so you need to change it if you want to share your list, but note - it will mean that your list will be visible to literally everyone on the internet who just adds your username to the URL,
- get the link to share your list - if set to public, you can give this link to anyone you'd like to show off your list to,
- change the default sort - this will set how your movies are sorted each time you refresh the page, log in or access your public list, you can sort by any property in ascending or descending order,
- change your email address - right now there are no newsletter or anything like that so don't worry about getting spammed and if any notifications will be introduces in the future, you'll have an option to choose to receive them or not,
- change your password - needs to be typed in twice to make sure you really remember it and won't make a typo while setting it.
Note - EVERY change in the setting, or rather, every time you click "save", requires a confirmation with your current password. I understand that this should usually only be used when changing sensitive data, but actually... it's almost all sensitive data. The only option that wouldn't really do much harm if changed accidentally is the default sort mode. All the rest is important - you wouldn't want to accidentally make your list public, change your password or email address.
JAX or AJAX: that is the question!
The problem is - how do I know the ID? When you open your account, I could guess, that the first added item is going to be 1, the next one - 2 etc. but what if you're already at 200, then delete items 190 - 199, then log in later and the last one will be 189 and I'll "guess" that the next should be 190 while in reality the AUTO_INCREMENT is already at 201? The answer is pretty simple - I can just use $mysqli->insert_id as the returned value in the PHP function responsible for adding the item to the database and it will give me the ID it just used. Unfortunately, this means that I need to WAIT for the response. Therefore, the trade-off of having an option to easily edit recently added stuff without having to reload the page is this ~1 second of waiting for the server response. A trade-off I was willing to make.
This is the first actual web-app I've made and it's made primarily for my own use. I don't want to invest in any huge dedicated server structures for something that no one else except me will use. Frankly, I don't really care that much if someone does yet alone are going to desperately try to make a business out of it and huge investments in hosting or marketing or anything. If somehow the need would arise - I would reconsider it, but for now, it's running on a small server with not-so-fast response times and I don't think that this should be a huge issue. Why? Well... this isn't an app that you're going to use extensively all the time every day and add tons of stuff quickly. If it was some kind of a to-do list then it surely would be necessary to let the user add stuff super-fast, preferably instantly, but this is more like a catalogue. You fill it out once, you add much more data (year, genre, grade etc.) and then you just either change the last seen date, review the grade, add it to your collection or just add 3-4 movies you've seen recently. There's only a limited amount of movies you can watch in one day anyway ;) so I think for this purpose, super-fast performance isn't the highest priority.
Hi, I am a PC
So what would Internet Explorer want instead? It would like (and again ONLY it, this is not a problem in any other browser) all developers to use the "beauty" of the DOM to "manually" create a new element (a table row, cell or another new table), append it, get it, create another one, append it, get it until you reach the point where its innerHTML would just be a div or span or something that's not part of a table. Now, this might be OK if you're just making a new row, in fact, I've used it a couple of times in the code, if it was necessary and made sense, but rewriting the complete structure for each function and stretch the whole code by MANY MANY lines just so that IE can understand it is something I'm not going to do at this point.
I've checked the statistics of my other sites. These aren't millions of hits I've had, but it's been ~10,000 in total so I'd say it's a statistically valid result which says that only about 15% of all users use IE. I'm willing to sacrifice them for now (again, keeping in mind that this is an app for my OWN use which no one may even hear about ;) ). Apparently, though, Internet Explorer 10 in the upcoming Windows 8 WILL fully support the innerHTML and theoretically, the app should work fine there. I haven't had a chance to try it yet, but it would solve the issue. At least with regards to what I consider solving ;)
How to become a millionaire
I've finally managed to make the Tic-Tac-DOM game communicate with the server and update the XML file each time a round has been finished :)
So how can this help you become a millionaire? Well, here's how you can achieve it - write a programming tutorial for normal people (NOT programmers!). That's it. If someone does that and would charge just $1 for it or add some advertisement on his page - he would be the first person in the world explaining how to program stuff so that everyone can understand it and would most likely become a very rich man.
So the bottom line is - if you know something about programming and wouldn't mind becoming very rich, but aren't a programmer, meaning - you still have at least some control over the communication parts of your brain, you can become a millionaire by writing a basic tutorial showing how to actually do stuff using a programming language and not just explaining the syntax. The first one gets the biggest money. On your marks...
In the early days, a website was a document filled with text and images formatted with HTML in order to look good… or whatever its author called "good". Today, pages are more dynamic. Things change when you click on something or not even that, hovering over stuff can change other stuff, the whole page can change with a single click. So if you can change not just the content, but also the style of a page with one click... why not make a game? I mean… how hard can it be?
As I might have mentioned already, I'm not a programmer so obviously the "game" I thought of won't be advanced. It will be a simple game everybody knows and probably played at least once in their life. I'm talking about Tic-Tac-Toe. 9 fields, 2 figures and whoever manages to put 3 Xs or Os in a horizontal, vertical or diagonal line - wins. We all know this game, but if you'd ask any random person what do they think would be necessary to create this game on a computer, they'd probably say you'll need a team of game developers and expensive tools (sometimes one would equal the other), but I'm about to prove you wrong.
Woks like a charm :) And here's how it works in a nutshell:
- All fields get a background image of a black square with a transparent X cut out of it.
- On hover, the new background color backlights the image making an illusion that there's an actual X element there (which there isn't).
- On click, the table cell changes its class to a static (non-hover...able) color and gets "locked", all still unlocked elements get a black square with an O cut out of it as a background and the "Player" indicators switch styles.
- If any combination of certain classes occur in any of 8 possible rows, the player wins, the score gets updated and all fields become unlocked again and filled with the background image of the player whose turn it is.
- Else, if all fields get locked and there are no 3 same classes in any row, it's a draw, no score update and all fields get unlocked.
Pretty simple. To check whose turn it is, the script increments a numeric variable by 1 after each click and whether the number is even or odd decides what next.
The dark side of the moon
There is one problem, though. Obviously, this game is just another small playground for me to try stuff out while working on Project Owl and it supposed to have one more feature - a counter at the bottom showing how many rounds have been played. Unlike the temporary "wins" counters which reset upon page reload, this one was supposed to stick.
I wanted to use a very simple XML document to store just this one number and each time a game ends, which means either Xs or Os win or there's a draw, apart from resetting the game field, the script was supposed to update the node value of the counter within the XML file. Sounds simple and easy. Again, I would have no problem doing it with PHP and a MySQL database - just UPDATE one cell in one table and that's it. The problem is, we're at the front end here so anything you do in this game happens only within your browser and the server doesn't do anything when you play it.
Now, the bigger problem is that today I've actually spent the whole day looking on how to do it and I still couldn't find the answer. If you're reading this and you see a "The whole world has played ## rounds" line at the bottom of the Tic-Tac-DOM page, it means I've found a way, otherwise I'm still looking. That's the most frustrating part of programming for me. I want to add one ridiculously simple feature and not only I can't, but there doesn't seem to be one source which would explain it.
Ever since I have an internet connection which is, as far as I remember, about 10 years ago, I'm using a certain "system" to improve my browsing experience. I'm using it every day and I can't imagine not having it. The problem is, it's not a tool, but rather a product of a tool. The tool itself, however, doesn't exist. What I'm using can be done without it, but it requires certain knowledge which the "average Joe" may not have and therefore may not be able to improve his browsing the way I do.
There's bad news, though. Today, after doing some further research, I've found out that such tool has already been created :( It doesn't really surprise me. What surprises me that it was made merely 3 years ago and for some reason it's still not something that everybody uses and considers as an obvious part of their daily browsing. Maybe that's because the author does a lousy job at marketing it or maybe because... it's not perfect. And it isn't. I've tried it out today and yes, it's a nice attempt, it covers pretty much my idea (as far as I can claim that it's my idea, I bet many people are using it already, but no one made a public tool for it), but it's just not as good as I would've imagined it. It's mostly because of its UI – even though it is easy to use and clean and simple, it could be much better and it feels like it's a bit incomplete. It allows the user to... use it (yes, you can use this genius quote in your websites/blogs/profiles ;) ), but then it lacks something that I think should be a part of it from the start and it's just.... not what I've had in mind.
Still, the fact that it's already there unfortunately makes me reconsider attempting to do it :( It's not that I don't want to compete with this guy (or these guys, I think there are more of them behind the curtain), but... it was supposed to be just for my own use because, as mentioned before, it's inconvenient for me to use it "manually" (short – I'm THAT lazy) and maybe IF I would have published it, it would have been a success because I would be the first one to introduce it and now I already know that I won't be the first. It doesn't change the fact that I'm still too lazy to bother adjusting my "system" manually and that I definitely won't use the already available solution as I think it's... well, I don't want to say it's crap, although... OK, it's a bit crappy indeed, but it does pull my motivation a bit down so I'm not sure whether to bother doing it or not.
Today someone shared a nice saying on Google+
"When you have to make a hard decision, flip a coin. Why? Because when that coin is in the air, you suddenly know what you're hoping for."
Source: ...some random person on Google+
That's exactly what I'm going to do now. I have a coin. So...
- TAILS = I'm going to develop this tool.
Oh dear, I hope it'll be tails. Throwing... aaaand... what the hell is that? Heads? What the fuck? The coin is screwed. All Polish coins are crap. Besides, it's not even a head on the obverse, it's a bloody bird. And it has a tail. Fuck this. I'm calling it tails. End of story. I'm starting... Project Owl.
It's a boy! ...and a girl?
Finally! It's here! It's simple, it's fast, it's pretty... and it's not at all inspired by the new Windows 8 Metro look. I promise ;) It's MY BLOG! And when I say my blog, I don't mean some popular blog script available on the internet in which I'm going to post, but a blog that I wrote completely from scratch :)
So why didn't I just choose PHP which I already know and like? Why not put the data in a MySQL database which I also know how to handle? Well:
- it wouldn't be a challenge,
- I wanted something very light and stuff like Wordpress is very heavy,
- I wouldn't learn JS in the process and
- I have to learn JS in order to make... something I'm going to talk about very soon.
- clicking within the lighted boxes – which is the preferred method and will dynamically generate content without reloading the page or
- clicking on the text links – which will link to also partially dynamically generated content, but it will reload the page as the server will pull the content and not your browser.
Here are the benefits of such combination:
- Thanks to PHP and standard A-links, my blog is visible for search-engine crawlers who can't usually follow onclick events. If you only generate the page on the front-end, a crawler will NOT see its contents as when he reads the page – it's won't be there. Standard links, however, can be followed and since the server will serve the content along with the template of the page before it reaches the crawler, everything will be indexed in his search-engine.
The elements where only PHP-based navigation has been implemented are the tags attached to each post. Of course you can go to the Tags section and choose tags from there as they have a large enough clickable area, but within posts, I wanted to keep them small and therefore since you'll always going to hit the text link there, there are no onclick events there.
So here it is – my hybrid child. Of course I can't really tell if it's really as gorgeous as I think it is because it's mine... or have you seen a mother who just gave birth to her child, took a look at it and said: "Is there a refund policy on it"?
I hope you'll enjoy reading it, it will be full of irrelevant crap and probably lots of "controversy" or, as I call it, free speech.
If you have any questions, suggestions or comments, please do keep them to yourself. There's no commenting function here anyway. Besides, 99% of my readers will probably be spam-bots and I won't case about the opinion of the rest. Still, if you can't hold back, you're welcome to insult me by writing to the Insult Box.