It’s quick. It’s dirty. But it’s counting. Enough said. Good night.
It’s already after midnight and I’m too tired for some screen capture action. But it would be definitely worth it, because it’s much cooler when you can see the Live Editing …. live, you know. I created an editing pane on the left and a bigger preview pane on the right side. I’m using the power of AngularJS to bind the input elements to DOM-elements in the preview section. As soon as I changed stuff in the form, the big preview window refreshes immediately. I love it. Here are some screenshots of what I’ve done.
The preview window does not look really cool yet, but I’ll not spend too much time on that. Perhaps I’ll ask somebody with more talent when it comes to design. Perhaps a little screen capture will follow tomorrow or at the weekend.
Today I spent a lot of time working on the details, meaning that I have basically nothing new to show. For those familiar with AngularJS, here are some things I was considering:
Code reduction, reusable code, etc.
The view and logic to add a new countdown is pretty much the same as the one to edit an existing countdown. At first I created two controllers (AddCtrl & EditCtrl) as well as two views straight forward. But when I realized that there is a lot of copy & paste involved, I tried to put it into one controller and one view instead. That lead to some conditional constructions I was not really happy about also … Still not sure what’s the best approach, but I stick to one controller for now.
Also in the frontend there is some recurring code (those fancy countdown panels). I thought about creating directives and play around a bit. But it’s still not working as it should. May spending some more time the next days. I’ll stick on copy & paste on this one.
Strange effect on deletion
I had a strange effect deleting countdowns. In some cases I clicked on the trash bin of Countdown#1, but Countdown#2 got deleted or other way round. As with most “strange” effects, they become pretty obvious once you realize what’s exactly happening. In this case, of course, it was my own fault:
- To delete a countdown I passed the $index of ng-repeat to a controller function delete(index). AngularFires $firebaseArray offers remove(index), which removes objects by its index as expected. Worked fine.
- But then I had the idea to add a standard AngularJS filter to order the countdowns by their expiration date
- Let’s see what happened, when the date ordered countdowns did not match the order they were added to Firebase:
Countdowns with firebase indices
I inserted the “New Year’s Eve” first being #1, and “Finish Countdown” afterwards receiving #2.
|#1||New Year’s Eve||2015-12-31|
Countdowns with ng-repeat indices
After ordering by date in the view, “Finish Countdown” get’s index #1 because 31.03. is reached before 31.12.
|#2||New Year’s Eve||2015-12-31|
The button to delete “New Year’s Eve” invokes function delete(#2), because it uses the ng-repeat index. But in original $firebaseArray #2 belongs to “Finish Countdown” and this object gets deleted. Taadaa. Strange behavior evoked. The fix was easy, but research took some time.
Conclusion of the day
I’m not quite sure if this day was worth the effort, because looking top-down shows actually no further improvement. Time is short and perhaps I should waste too many times on too many details. But another goal of OneMonthOneProject is to learn. And I learned a lot about AngularJS and Firebase yesterday. So I think it’s ok
Today I was sick of just doing backend stuff. If you only see unformatted text as output, it sometimes feels as if you did not accomplished anything at all. I wanted to try out some of my front end ideas. In fact I’m no designer at all, but I think I’m ok as a copy cat. I read some blog posts about material design, gathered some ideas here and there and started coding. The result is far from being perfect, but at least it looks much more happily right now :-). I created a single page application with just two views a the moment. The featured image is a screenshot of the current main screen with an overview over all your existing countdowns, without actually anything counting down. It’s all static. I could include the countdown feature to this overview, and I did so once, but it just made me nervous to see that many moving numbers. I think it’s too much.
The second view is a form to add and edit the countdowns. It does not look as fancy as the overview, because it just uses the standard elements of Twitters Bootstrap. But additionally there is a nice animation when switching between those two views (Thx to the great tutorial of AngularJS … the guys at Google are doing a great job).
Tomorrow I will spend some more time to beautify this form, but not too much I guess. As there is now an acceptable frontend to get a feel for the web app, I’d like to add some more functionality (for example the editing does not work as it should yet )
- get editing to work properly
- build a third view that shows a single Countdown full screen, actually counting down
- Setup Environment
- Install node, npm, bower
- Install Webstorm trial
- Create Firebase Account
- Study best practices to Bower
- Start coding
- Getting used to AngularJS: Controllers, Services, Views, Routing, Directives, …
- Creating first countdown functionality
You can see most of the results of my first coding session in the screenshot above. Does not look like a lot of stuff, but there’s a plenty of magic in there. This little piece of JS does all of the following: Creating, Showing, Editing, Deleting Countdowns AND it stores all information server-side in Firebase. Thanks to AngularFires awesome three-way-bind. Great stuff. Makes life that easy.
Due to some other obligations, not as much as expected happened today. Mainly brain-word and investigations regarding different tools and service. Tomorrow I will finally getting my hands dirty and start coding.
But let me tell you today what’s going to be the technical foundation for the Countdown besides a standard apache webserver.
I’d like to target the Web, Android and iOS. As the functional requirements of a countdown are pretty small, hybrid app development seems to me a perfect fit. No complex graphics, no performance issues, no need of fancy phone functions. Just a modern, clean and simple frontend. Buzzwords Flat-Design and Material-Design come to mind. I chose to use the Ionic Framework for this task. It’s becoming more and more popular and seems to cover many features out of the box.
The Ionic Framework is based heavily on AngularJS. I’m going to use it for the Webfrontend aswell to create a Single Page Web Application. In the ideal world I’d write most of the code just once and reuse it across all 3 platforms. We’ll see how this works out.
Backend-wise it was a hard choice. As I was sure I wanted to use any cloud provider as backend data store to get this thing up and running as quickly as possible, it was hard to decide which one to take. As I already have some experience using Parse.com, I favored it in the first place. But after I found out Firebase is backed by Google and has some nice bindings to AngularJS, I changed my mind and decided to give Firebase a shot. Although their key feature aka live-sync is probably not needed.
I don’t know where I stumbled across Auth0, but it makes web2.0 life much easier. It handles most of the authentication mess with Facebook, Google, Twitter, etc. for you. Combined with code examples for every platform you can imagine, connecting to other services never has been that smooth.
You: You just started this thing and you’re already on delay. Come on, what’s about this countdown thingy?
Me: PATIENCE YOU MUST HAVE my young padawan!
In fact this whole idea shaped last weekend, so I spent the last to 2 days with setting up this blog, cleaning my webspace and writing the first 2-3 articles. Not too bad, I think.
Now that this baby is ready to roll, I’ll start to concentrate on my “real” first project. In case you missed it out, check it here.
WTF – a countdown?!? Every smartphone has it.
When my last project as a freelancer came to an end, I was looking for a stylish countdown app or website. Sure, if you google “countdown” it will return loads of results of all kinds. But none of those I tried could satisfy just half of my needs. So, let’s have a look at the features I wished for:
When I thought about starting this blog, one of the first questions that came up: Should I write in German or in English. At first glance the pros and cons are pretty clear:
“German is my first language. Writing is much faster and hopefully the texts are much better.”
“On the other hand, if I try to write in English it might improve my English skills and has the potential to reach a much wider community.”
But things get out of hands quickly …
“But do I actually care for a broader community or is this blog just meant to be a personal thing for me to keep my motivation up?”
“Good question. But there are also lots of German speaking people. Isn’t that enough of a community?”
“Hm, who needs the community that early? Make it just a personal thing. But why the heck did you register some domain names for it?
“I don’t think I get any further. Let’s start from the beginning … what do I actually want to achieve? …”
You see what’s happening there? Fuck that. It’s exactly the opposite of the subtitle of this blog. “Stop thinking, start doing“. *Coinflip* … English it is. Deal with it.
For the next several month the following will happen: I will start one web/app project every month and bring it to the end within this time frame.
For the last ten years (oh shit, I’m getting old) I worked as IT-Consultant in the Data Warehouse industry for big companies like BASF, T-Systems, Vodafone, ePlus and Lidl. The first 5 years as employee and afterwards 5 years as a freelancer. During that time I constantly had several private project ideas (most of them in the field of IT, Web, Apps, etc.), which I did not follow. Due to lack of time, due to lack of motivation or due to using my work as an excuse to not do anything else. On top of that, I could not decide where to start. I jumped from one idea to the other but never followed anything really seriously. I just did not get anything started besides my actual job. In fact it’s not that big of a deal regarding that I spent often times 10+ hours in the office and made quite a lot of money out of it. The big deal was: I had no fun and constantly blamed myself for not at least trying to start one of my project.
So, when my last project assignment ran out I finally decided to end my status quo: I will not extend the assignment and I’ll reject every other offer in 2015. That’s it. Pretty easy. I take a break from my “real” work, I concentrate on doing stuff I wanted to do for months or years. This includes concrete projects, but also founding a start-up is a big dream. My priority for the next months is not to make money. My priority is to learn. To learn about new technologies. To learn about starting a business. To learn about myself. Hello 2015. Here I am. No excuses.