How do we prevent the flash of unrendered content (FOUC)? We don't want to simply hide the unrendered content from the user since the user may think that the app is broken, especially if they're on a slow connection. The browser will start to render elements as soon as it encounters them, we can use this to our advantage to display a full-screen block of HTML while the page is loading, i.e. a splash screen.
Let's start with the markup, I've added a splash div at the top of the body-tag and the css is loaded inline in the head-tag. This way, when the browser starts parsing the body-tag it will lay out the splash screen elements and style them before it starts to load any other files.
We want to make sure that the splash screen goes away after the page is loaded, we can do this using the ngCloak directive. The ngCloak directive will add a CSS class that sets a display: none !important on the element and then remove the display: none once the page has been loaded. We can hijack this ngCloak directive for the splash screen and invert the style for the splash element only.
Finally, I've manually bootstrapped angular to simulate slow loading.
It's as simple as that, hope it helped, cheers!
I've been looking for a nice mobile UI framework that plays well together with angular for quite some time now. When I started developing golf-caddie.se jQuery Mobile was pretty much the only competent framework out there and it was quite cumbersome to get it to play nice with angular. So every now and then I try out new UI frameworks, hoping to find a replacement for jqm. By the way, did I mention that I want it to work well on WP8? Yup, proud owner of a lumia 920.
A couple of months ago I gave
ionicframework a go, don't remember the details but it was awful on WP8. Yesterday I came across an open source project,
mobile-angular-ui, seemed to be exactly what I've been looking for.
You may wonder, why not just use bootstrap? Simple answer - because it doesn't give the same look and feel as a native app, my web app is intended to be used on the golf course and on mobile devices only, plain bootstrap just doesn't cut it. The user controls isn't designed with mobile first in mind even if the layouting mechanism is.
Anyways, before I started a massive refactoring to replace jqm I put together a little "hello world"-app with a simple slide in menu and some page navigations. I've hosted it on
http://mobile-angular-ui-test.towfeek.se/.
Really simple stuff, a sidebar and two partials. Seemed to work fine until I added an animation when navigating between pages. Boom, page doesn't render! Ok that's fine, not a deal breaker, who needs animations anyways? I just
reported a bug and went on with it.
The ultimate test - how does it look on my WP8?
- Page renders a bit slow, I can see the default title before the partial updates it.
- Slide menu actually slides in, sweet!
- Navigation works fine without animations.
- Page only renders the content that fits the screen initially, scrolling doesn't work. Deal breaker!
The project is still in an early stage, and it definitely gots potential. I'll try to contribute to the project if time allows but I wont refactor
golf-caddie to use it just yet
.
Cheers!
Added some functionality to store meetings, everything still lives in the browser and local storage but now we have something meaningful to store and sync with the server that we'll implement in the next session.
Live demo @ http://meetometer.azurewebsites.net/
Source code @ https://github.com/ajtowf/meetometer/
Until next time, have a nice day!
Keywords : VS2013, Azure, HTML5, JavaScript, AngularJS, jQuery Mobile, AmplifyJS
Got some great feedback on my first screencast, which is awesome! I mentioned that I usually use typescript in my previous post and one viewer picked up on that and requested a screencast converting the app to use typescript. Excellent idea, so here it is! Once again I underestimated the time it would take though, my est. was ~20 minutes, it ended up taking 35 minutes. Speaking, thinking, motivating decisions and writning code just takes a bit longer than what I'm used to. ;-)
Live demo @ http://meetometer.azurewebsites.net/
Source code @ https://github.com/ajtowf/meetometer/
I'm thinking server side coding for the next sitting. Until then, have a nice day!
Keywords : VS2013, Azure, HTML5, JavaScript, AngularJS, jQuery Mobile, AmplifyJS
Got some alone time and decided to spend an hour on coding. I recorded my coding session, making this my first official screencast! The idea is to share my thoughts when I write code and perhaps get some constructive criticism / feedback. The task was to create an app to keep track of how much meetings cost for companies. I started from scratch and managed to get a prototype up and running in windows azure in ~50 minutes or so.
Live demo @ http://meetometer.azurewebsites.net/
Source code @ https://github.com/ajtowf/meetometer/
The video is unedited and shot in one take. I hadn't approached the task more than giving it a thought the night before. With the result in hand I'm pretty satisfied with how it went. Sure I got some errors due to typos but that's part of the day to day work for a developer. I also encounterd some bugs due to framework incompatibilies which I managed to tackle as well.
If I do a second sitting the roadmap is to implement a server side solution. Perhaps make it a multi-tenant site and store all meetings to get an overall cost per month for instance. Sounds like a plan? ;-)
Happy holidays!
Keywords : VS2013, Azure, HTML5, JavaScript, AngularJS, jQuery Mobile, AmplifyJS