DevDiaries 0.4 — Ionic Slides and Someone Leaving

As I mentioned in previous post, our app has been live for quite a while now. We’re working on a major redesign in addition to adding some functionality. My coworker, a frontend wizard, has created templates for it, and I’m taking those and integrating them into our actual functionality.

What I’m working on right now is a screen where the user can see the different plans he or she is signed up for. It was previously a list, and is being redesigned to use cards in a slider with $ionSlides. This is a component that another coworker of mine had tried to use for a component on the previous iteration of the app, and we had eventually abandoned it since it had given us so much trouble — instead of sliding only horizontally, the slide cards would go up and down as well. I’m hoping this time around, with our frontend guy’s expertise in the CSS, we’ll have more success.

Note that this functionality was completely changed between Ionic 1 and Ionic 2. We’re still using 1 because, well, it’s already written in 1 and the idea here is to redesign but not rewrite the entire thing top to bottom.

The Ionic 1 version, at least, is based on the Swiper widget from

What it’s supposed to look like —

The template contains an outer <ion-slides> element with inner <ion-slide-page> elements repeated for each service. Within the controller I have an options object for initializing it. Last week I’d left it as not-yet-working, but this morning I noticed that I’d been binding the options incorrectly, so I changed that. I also put a console.log into the $on of the “$ionicSlides.sliderInitialized” event to catch when it does initialized.

OK honestly I thought the binding was the problem. Now I don’t know why it’s not working. Maybe I need to include a dependency on $ionicSlides, though my coworker’s code doesn’t and his mockup works.

Ah, the binding of the slider was also wrong. Changed that too.

Still didn’t work.

[At this point, someone who works in our sister company came over to tell me goodbye, I won’t be seeing her in the office any more, she quit today. She told me she has another position lined up, though, so at least that’s good, I guess.

I am going to need some time to process this.]

Adding the dependency of $ionicSlides throws me an error of Unknown provider, so that’s not it.

I double check that the template is even loading.

[It’s really sad when people leave. Especially someone as awesome as this person. I wonder if they are even going to be looking for a replacement for her.]

We’ve rolled out our server-side milestone of the week. I update the Trello board to reflect that.

Okay, I see I still have an inconsistency in the binding. Due to Angular’s weirdness of not always correctly processing single-level bindings, we often use an extra data object to hold all the things in the controller. In this case, we have the options object and the slider object. One is bound within data and one is not. I decide to move them both to within data.

Nothing doing — not even my initialization message printed out.

[I knew there had been changes going on in that department for a while now. This person’s primary role had shifted a few months ago.]

I’m going to go read the documentation more carefully. Nope, nothing seems off.

Get ten emails about JIRA tasks that had been updated because we rolled out. Delete them all.

Notice that I’m actually binding the wrong thing within the initialization function — doesn’t help since it isn’t being called (no printout) but would of course break it later. You get a data object and need to bind to data.slider, and I was binding only slider.

[As startups restructure they do tend to have jobs change overnight. A couple of months ago a department was moved to the overseas office and three people were laid off in the middle of a day. Maybe ‘move fast and break things’ shouldn’t be taken quite so literally.]

Aright, let’s try the old copy-the-documentation-example-directly trick and see what happens…because that went so well for me last time…I take the sample code and paste it into my project. Ionic does tend to have good, comprehensive examples.

Nope. This is not how it’s supposed to look.

[OK that’s not really being fair to them. I know that a lot of consideration and thought went into that decision, it wasn’t an off-the-cuff thing.]

Now I’m suspicious. I run a full-text search on my coworker’s mockup project, and find plenty of references to $ionicSlides in his Ionic JS files.

In mine, I find only the references in the component I’m currently working on.

No wonder it isn’t doing anything…what version of Ionic does he have? and which do I have? and since when is it not supported at all?

I do find something else that looks useful though, code for a Slider of some sort.

[I still don’t like people leaving. Doesn’t matter who or why.]

Aright so his mockup was built on Ionic 1.3.3 and I’m on 1.1.0. Let’s see what the changelog says between those two.

Hey cool, they name their changes after places.

Ah. At some point they fixed a bug with container size. I wonder if that is the issue we had when first trying to use this.

Wow, lots of pull requests merged. Open-source is pretty neat. Kudos to all those guys and gals.

Yup, this was added in 1.2.0. I’m too far back. I decide to upgrade to 1.3.3 since that’s what my coworker used for the mockups so it will put us on the same page. Yes, of course I should have done this before. I didn’t realize we weren’t on the same page.

How do I do that?

Like this, apparently — ionic lib update.

I very much hope this works.

Well, I’ve gotten this happy little message:

I run ionic serve and quickly check on the templates I worked on last week. They look okay, except for one place where I had had to edit the CSS (I wasn’t supposed to need to do that). I guess that’s because if I was on the right version, I wouldn’t have needed to edit the CSS to begin with. I’ll put it back to what it was.

Emm…can’t find it.

I discover that if Num Lock is off, my 0 key becomes Insert. Who knew? Also, who thought this was a good idea? There is no legitimate use for Insert today that I know of. If you have one, leave me a comment. I’m curious.

I fix that and go back to the slider page. Hey cool, it works! Actually looks pretty nice too.

I double-check by deploying to a physical device.

[I wonder what job she has lined up. I didn’t ask her, it didn’t seem polite and I was kind of in shock. Her skill set is very cool but also very specific. She lives in the neighborhood though, I’ll probably still see her around and ask her in a few weeks.]

It looks great on mobile too. I’m trying not to post proprietary images or code here so you’ll just have to trust me on that one though ;)

Committed the changes.

Wrote an explanation of embedding PHP in HTML code for our newest developer, a QA guy who’s been teaching himself frontend after hours for more than a year. Very happy for him finally joining the dev team.

Now, breakfast time.

[I’m sure she’ll be fine. And I’m allowed to be sad for her leaving. It’s part of being a sympathetic adult person. It’s okay.]


Gustavvvo Lima, Queen Latifah, Jaejoong, West Side Story, Katy Perry, TVXQ, Michel Telo, Omer Adam, Ethnix, Super Junior, Firefly theme, Grease soundtrack