News for December 2016

JapanesePod101 Holiday Countdown Deals extended26 December 2016
The Holiday Countdown Deals over at JapanesePod101 are extended until Dec 27th. Check out the remaining offers here (incl. 47% off Basic/Premium, 55% off 24-Month Premium, and the once-a-year Lifetime Premium access).

The mobile / responsive update is a lot of work! Last week I've been racking my brain setting up webpack 2, VueJS 2 and other things in the website's build process. This is pretty exciting for me as I can start making better UI across the site, with less code than I used to write. I'm also getting up to speed with modern Javascript (ES2015) and learning quite a lot recently. One of the things that I'm looking forward is using more CSS3 transitions and animations to create a more appealing interface, especially on mobile.

All in all this update is about much more than mobile. I'm completely upgrading the front end part of the website, and being able to use modern Javascript and Vue components will benefit both desktop and mobile!

Some challenges I needed to solve are using VueJS inside a non-SPA application. It's easy enough to use the provided "scaffolding" templates when you create a new site, but how do you make this work in a non-SPA (single page application) website that also has a lot of older Javascript dependencies?

Turns out the compiled VueJS library plus a few components is currently sitting at ~90kb (30kb gzipped), while the completely outdated old YUI 2 library is a whopping 177kb (50kb gzipped). While both sit under 100kb gzipped for now... it gives an idea of how much code there is in the old YUI 2 framework that had to deal with old browsers as well as a bunch of things that are now native in the browser.

So another challenge for me over the months will be to gradually remove old code, so I can get rid of the unnecessary dependencies and reduce the total page load cost. For some time after the mobile / responsive update, the pages will include both new and old Javascript. The website page load is not heavy to begin with so it will be ok, but it does add one extra bundle on every page (VueJS).

Right now the mobile site is pretty usable I think, based on feedback I've received so far. It doesn't look very nice though, in particular the top navigation I used. I still need to fix some obvious broken layouts, and I think I will be using a "sliding" navigation pane (sliding in from the left side), which is also animated.. and makes for an overall nicer experience.

So all in all the main challenge and decision making going forward is to find a good compromise between desktop and mobile. For example, do I want to use nice checkboxes like these ; which can be a little larger and usable on touch ; or do I want to use a specially adapted on / off toggle like this? Both are Vue JS components which I can now use on the website!

What's interesting here is while the "Switch" component is definitely better for mobile users it also responds to mouse clicks on desktop. But... it doesn't feel consistent with the desktop environment and the way checkbox tend to look. With the direction I'm going, I need to pick some kind of a compromise because I am not building a mobile native app. So for example in this case, I may end up going for the "Switch" because that feels great on mobile. The key here I think is to be consistent throughout the website, even if it's not consistent with the desktp or even the mobile device UI (eg. Android and iOS).

PS: I am looking for a solution to effectively gather feedback once I make the mobile site a "public beta". For this I need the lowest "barrier to entry" for people to be able to tell me what works, what doesn't. Please send me suggestions for services I could use if you know any! Some of things I considered are : forum threads (not ideal since it's kinda off topic), creating an empty repo on github and using their "issues" system which is great.. but quite bad to gather feedback straight from mobile. Maybe I should just put a built in "feedback" button somewhere... but I would rather people can comment on one another's issues which is a big limitation of receiving individual feedback via emails.

Mobile / Responsive update *early* Preview Gallery18 December 2016
Work continues on the mobile responsive update. Here is a short gallery on imgur. There is still plenty of work to do as you can see but it's getting there!

The top navigation is rather crude, but I've got to prioritize work. Feedback suggests that it is already more effective and convenient to use than the dropdown navigation. The most significant change of course, being that all the pages are made to fit the screen instead of looking like they are scaled down from desktop.

I'm super excited about these changes because I am also finally getting up to speed with modern Javascript, and the development tools like Webpack and Babel. The most exciting for me though is Vue. At some point I will have to refactor the Flashcard Review page with Vue and it will make so much more sense.

A very simple functionality I wanted to add to kanji flashcards, for example, is to be able to add vocabulary. You'd pick something from the example words, and customize flashcards as you go. A simple idea, but if I implemented it the usual way with DOM manipulation , no matter how well you code it with object oriented patterns, event delegation and so on.. you'd still end up as a solo developer spending weeks on it.

The BEST case scenario in my opinion before modern MV like React / Vue was to use those massive UI frameworks. The problem with those is that it works for you when you already knew from day one what you were doing. When you're making a site like me as a personal project, and you keep adding bits and pieces over the years, and you've been doing this for ten years ( ! ) ... it doesn't work.

You can't just change a library or framework. You have bits and pieces written 1 year ago, 3 years ago... 7 years ago... I wouldn't be surprised if there are still some left overs from the site inception in 2006. In fact while working on this mobile update, I've ditched rounded buttons that were made with the oldschool "sprite" image technique!

That's another fantastic thing about Vue. I just plugged it in the SRS page for the Leitner bar chart in one afternoon, replacing the old SVG graph. Since I no longer needed the Raphael library (I use a simple chart with CSS / HTML) .. it doesn't even add to the page load. The isometric bars are gone, but I wouldn't be surprised if you can implement them with fancy CSS tricks.

I'm also looking for employment and I definitely need to get up to speed with Javascript. I used to love "slicing" html web pages and spending time in Photoshop, but these days I reconnect to my roots as a developer and I much prefer to write front end than arguing about the semantics of HTML 5. ;-)

I also just love Javascript; I'm not sure why since it gives me plenty of headaches with the silent errors! I think it's the lean syntax and expression of the language. Javascript is just so easy to read, and if you are careful with what you do you can make very elegant things because it's so flexible. And these days it's quite insane to see full 3D games in the browser.

More testers needed for mobile / responsive update14 December 2016
Would you like to help out improve the website for mobile (smartphone & tablets)? Or even the responsive desktop? Send me a message with your device name and model. I will invite you to a Google Group discussion. You can chose to subscribe to the discussions once a day or at your convenience. You can reply to messages straight from your inbox.

There is quite a bit of work left to do. I am in fact redesigning the main navigation to a side nav based on feedback. I am also looking at the overall structure of the site. This is a chance for Koohii users to influence some of that process. All I'm asking if you apply is a minimal effort to give some input mostly in response to questions and updates I provide. For example I may ask to test a html page, and let me know if something's wonky. Or I may discuss some idea to improve a page, adding a button here, removing a link there... and I would like some input on that.
Fun with Vue.js (developer post)10 December 2016
Today I created a proof of concept Leitner bar chart with Vue.js. It was a great exercise for learning Vue, and it made me realize just how useful this view / model approach can be. The underlying data with the number of cards in each box can be used as the model to represent the chart. The way Vue works, by changing the model, the bar chart updates automatically!

Try it in this codepen : add a column, remove a column, randomize the values. The bar chart immediately adapts to the new data. Pretty neat. Here is the full page as a gist if you'd like to experiment with it.

For as long as this bar graph existed on Koohii, it was implemented in SVG with the Raphaël library. SVG is actually pretty awesome and with an abstraction library like Raphaël to cover the browser quirks, it actually worked all the way down to Internet Explorer 6. Unfortunately SVG is a bit more tricky to make responsive. You can scale down the SVG container, but it doesn't look quite right.

Of course we don't actually need to change the bar chart after it has been loaded. What we could do... is to draw two charts: one for desktop, and a smaller one for mobile. Better yet, we can also include the "Review New Cards" and "Review Due Cards" buttons as part of the template. That way we can automatically count the total of cards and put it inside the button label. Easy to do in Vue, and less templating headache in php !

What I think I'll be doing is create two views of the same data, and use a media rule so that either one is shown depending on the size of the screen. The other solution is to update a single view, for example showing more or less bars but I feel like doing two views is just easier to maintain and allows to present the data in a more customized way. Performance wise it barely makes any difference.

There are of course already made, and quite powerful data chart solutions with Vue. The point here was to practice Vue and also to find a solution for the existing bar chart on Koohii. It's quite simple too, so there is no use in including a big library.

Hope you enjoyed this post. I am sad to see the isometric bars go though! I have to prioritize, so no fancy isometric bars or animations for now. That said, if you'd like to experiment with it, I'd love to get some ideas. If you can make the bar chart nicer, or if you have an idea to present the data on small screens ( < 480px ) I'd love to see what you come up with!

Testers wanted for mobile update + JapanesePod101 Deals8 December 2016
JapanesePod101 Holiday Countdown! check out the thread for the coupons like 47% OFF Basic & Premium and 1-Year Premium for $99 (until Dec 16th).

Mobile / responsive site update : it's taking a bit longer than I hoped.. but for the better! I'm looking into VueJs and I realized I just can't continue to write Javascript the way I used to some years ago. A framework like Vue will save me a TON of time. I figured I may as well start using it, probably for the site-wide search bar and perhaps some mobile navigation elements.

Looking for testers! Would you like to help me improve the website for mobile / smartphone / tablet users? (basically, touch interface). I need a few active users who are looking forward to a responsive / mobile optimized version of Kanji Koohii. You can help me simply by using the site, and send me some feedback. For example, are there links / buttons in some places that are too small, how is the navigation; etc. Then send me a message briefly indicating what device / model you have.

It would be motivating for me and if I have at least three applications I will put up a "test" copy of the site with the responsive update I'm working on. It is furthermore helpful because believe it or not, I don't have a smartphone. Most of the testing I do is on some kind of emulator.

The main difference you'll find is that the site is not scaled. Everything is made to fit on the device screen without zooming. The top navigation has been redone and is hopefully easier to use on small screens. I still need to find a solution for the Study page layout, and the Review page Leitner graph. But with some feedback I can already tweak the navigation while I work on the rest.

The test site will be connected to exactly the same database, so you could use it already if it's usable enough. Your account will work on the test site. Some things will be broken, but usually it's visuals. No significant logic is changed anywhere so flashcards and stories will work as expected.

Working on mobile / responsive navigation (part 2)2 December 2016
Work is advancing on the responsive update. All the pages are being worked over; I'm using Bootstrap to refresh even the basic things like the sign in form... which end up much more usable on a small screen.

The navigation is working. I spent a lot of time thinking about what kind of navigation to use but eventually I've settled on making my own. A relatively simple dropdown. One on the left for the main navigation, and one on the right, for the account options, with the Koohii logo center (working as the "home" button).

There are some pretty cool "slideout" navs out there... but who knows how it behaves when I have more interface on screen like the flashcards? And if something doesn't do what I need it to do, updating the code will be a headache.

The main difficulty though was to figure out how to support both desktop and mobile. If you look at some big websites out there, you'll notice often times their site is not actually very responsive. The reason for that is that they have mobile apps already. For example, Facebook, Twitter. On Kanji Koohii, I decided to go for the best compromise, and the website is actually going to be fully responsive. The pages actually serve two navigations but since they are just basic HTML, it barely has any impact on the total download of the page. This is great, because it means I can customize everything for mobile. If a label like "Spaced Repetition" is too long, I can just name it "SRS" and be done with it. With a lot of solutions out there, I am stuck with a very rigid way of switching between large and small screens.

Desktop users will benefit too! I'm thinking about how to improve the layout of the Study pages.. It would perhaps make sense on Koohii, to have a search field available at ALL times directly from the navigation. So both desktop and mobile users could click a "search" icon , and enter a kanji or keyword to go to the corresponding Study page.

There is some more work to do with the layout of the Manage and Account pages. Here you have a side navigation that represents "sub navigation". For example from Manage you can then go into "Add", "Remove", etc. The way I plan to handle this for mobile is that the sidebar goes on top, and collapses into a expandable menu. It's pretty neat as it is a reusable component implementation wise, and it behaves one way or another depending on the viewport size.

I can't wait also to update the site with the redesigned homepage. This is really needed to signal to new visitors that the website is usable on mobile.

I genuinely hope I can finish this in December. I's hard to evaluate because there are so many small things. But it's looking good so far!

PS: Oh I almost forgot the most important for mobile users. I will try to get the "mobile webapp capable" feature working, so that once you add a shortcut to homescreen, the browser disappears.. and it will feel much more like an app.