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.

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.

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!

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.

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.