A Week of Dev #4

A bit early !

I have to step away from keyboard this week end, so don’t expect any news until next week. But I promise, the next A week of dev will be plenty of good news, full of suprises, and, as my birthday arrives the 24th, I’m going to roll out the best upgrades so far until then.

Themes

The 0.3 introduced themes in a very primitive way, but since then, I’ve worked a lot on improving their management.

Starting from the 0.3.13 version of Cyca, themes got a whole lot better ! They now can inherit from other themes, which greatly simplifies building new ones. And this is recursive, meaning theme A can inherit from theme B, which can inherit from theme C. In other words, and for instance, if theme C uses a custom font, theme A will automatically use it as well, without the need to declare it.

I didn’t forget the “user experience”. Themes now have a dedicated page on user’s account, from which you can see the list of installed themes. Each theme is presented in a convenient card displaying a screenshot of the theme, theme’s author and URL, and a very convenient link to preview the theme.

After another quite large update, themes are now provided independently from the main code base. Each theme has now its own repository, which will greatly enhance theme-making and maintenance. It means Cyca is not provided with any theme anymore, and themes can be installed from the command-line.

After all these changes, I felt it was the time to release the 0.4 version of Cyca, along with a themes database repository. I let you read the post for more details. To roughly sum-up, I’ve improved the themes browser:

It looks better than the first screenshot above, isn’t it ?

Account pages

I’ve improved the account pages a bit. While these modifications might not be evident on first sight, it’s a preparation for what’s coming next, and it was the perfect oportunity to fix some little things like forgotten translations, routes and styles.

I added an about section, visible from the account page, where you can find things like links and licenses, and application version as I added version tracking from this nice package.

Javascript

I worked on optimizing the javascript by splitting files in appropriate location. Now, on the root javascript folder (resources/js), there are only the main javascript files used in the app, meaning the ones directly called by pages. Everything else resides now in the modules directory. This allows me to load only what’s necessary: until then, the import and themes browser pages needed to load all the Vue components, which was both useless and resources consuming.

Now, when a page needs javascript, it only loads what it needs.

Final javascript file for the “main” page was reduced by almost 50KB, and now weights just a bit more than 308KB. Honestly, it will be hard to squeeze it more than that. We’ll see in a future update if Vue 3 can do better with its brand new tree-shaking paradigm. The other compiled scripts weights around 216KB, which is more than I anticipated. At this point, I don’t think I can do better, but I do believe that 300KB for a javascript file and 12KB for a stylesheet file is light enough, especially considering that there is only one JS file and one CSS file for the browser to load, when other popular applications uses multiples files.

More work can be done on frontend optimization, but now it’s time to work on something else ๐Ÿ˜‰

Official website

I did some work on the official website as well, like improving blog posts list and documentation page. I really like Hugo: while the first contact with it might be intimidating (compared to full WYSIWYG solutions) it doesn’t take long to feel comfortable with it, and the more you discover, the easier you found it.

Tiny bits

I don’t know if I’m going to keep the “tiny bits” section: there are just too many of them this week ! Essentially, multiple updates to the French translation, various fixes, adding missing stuff like routes or icons, etc.

The commits history of GitHub would probably give you a more straight idea of everything I did during the week that doesn’t worth mentionning here ๐Ÿ˜™

What’s not done

I wanted to build a new theme to go with the dark and the light ones, but instead, I built a whole themes manager, so… I’m going to pass on that this week !

What’s next

Now the CSS and the javascript are optimized, there are two things I would like to do next week:

  • improve the HTML code base, make it simpler if possible, maybe generate SVG markup in javascript, which would allow some themes to totally ignore icons - I’ve already began working on that by merging the layouts into just one, but I want to remove some markup that’s not absolutely necessary, and ultimately, make use of HTML semantic markup, which will help me to…

  • …improve Cyca’s accessibility, mainly by overhauling keyboard navigation, and by using aria attributes, where they are appropriate. Ideally, my goal is to be able to browse Cyca from lynx, for instance.