Coronavirus COVID-19 Global Cases Webapp

During the past few days, I worked on a new project related to the current outbreak of the Coronavirus disease because I was not happy with the existing websites showing similar data.

After the initial testing, bug fixing, and collection of feature requests I am now ready to officially go live.

Features:

  • Real-time updates. Data is collected every 30 minutes and pushed to the client
  • Option to display and compare historical data
  • CFR calculation per country or globally
  • Country and global view
  • Country and global charts with an option to export as CSV, JSON or PNG
  • Built on top of Vue and Vuetify, ES6 with WebPack and NodeJS and PHP back-end
  • Fully mobile-friendly PWA
  • Theme and color scheme switcher
  • GeoIP detection. Visitors are redirected to their country of residence

 

Screenshot (click to open webapp)

My First Album “Theophagÿst”

Recently I finished the recording, mixing and mastering of my first album, titled “Theophagÿst“. After so many years of playing the guitar, I finally found the time to record some music and I am pretty happy with the result.

Enjoy listening and sharing! In case you would like to support me, you can buy the album from my Bandcamp page!

Pie Chart VueJs Component with CSS Conic Gradients

VcPiechart is a simple, yet powerful VueJs component for creating pie charts that came out from an experiment I made with the relatively new CSS conic gradients utilizing minimal markup and simple calculations.

The package is available as an ES6 module on NPM and the repo is on BitBucket in case you feel like forking it. All of the properties are described in the readme file. Firefox and Edge still do not support conic gradients, but you can use Lea Verou’s awesome polyfill to further extend VcPiechart.

Parallax Component for VueJs

A couple of years ago, when HTML5 WebComponents were new, Polymer was just conceived and I was still experimenting, I created a nice Parallax component based on Mozilla X-Tag – one of the first libraries/framework, built on top of the WebComponents API.

The component came out to be pretty popular and as time passed by I was asked to build versions for React, Angular, Aurellia or Vue, but I never had the time as I was pretty busy, virtually abandoning blogging and major pet projects for more than a year. Recently, however, I decided to try to rebuild that component with VueJs and the result is here. It is available as an npm and yarn package and the source code is on Bitbucket, in case you feel like forking.

Have fun and enjoy the week!

Online HDR Photo Editor

It’s been a while since I last posted here because I’ve been quite busy with daytime projects and I did not have much time for my pet projects, but finally I accomplished an idea that I had for a while.

Presenting CSS HDR – an online HDR photo editor, built on top of VueJs, ES6, HTML5, and CSS3. The app is running completely on the client, with no server-side processing whatsoever.

The main idea was to use only CSS filters and mix-blend-mode rather than canvas and complex manipulations. The images created with CSS HDR can be saved locally as .jpg files or exported as .json and can be imported back for additional editing. Below are a few images processed with the app.

Vue Ribbon 2.0 for VueJs is Out

I am happy to announce that one of my favorite VueJs projects – VueRibbon has just received a major update. I’ve reworked the component entirely abandoning Vuetify for the well-known modern Microsoft Office ribbon look and feel, introduced a few new events and fully reworked API and tools.

What’s new

  • Vuetify UI library is no longer a dependency; instead, it has the well-known modern Microsoft Office ribbon look and feel
  • Ships with three themes – “blue” (à la MS Word), “green” (à la MS Excel) and “orange” (à la MS PowerPoint). The creation of new themes is easy and streamlined
  • Fully reworked set of tools
  • Fully reworked custom events and event binding plus two new custom events
  • Fully reworked and improved API with 30+ methods, allowing total control over the ribbon
  • New API tester
  • More concise, improved and easier to use documentation
  • NPM installation
  • CDN support

CSS Gradients Editor Built on Top of VueJs and Vuecidity

Here’s a small project, based on VueJs and Vuecidity I’ve just accomplished you can use to generate, edit, preview, copy and get permanent link CSS gradients. Currently, it supports linear and radial gradients, but I am planning to add support for conic gradients, enabled by the excellent CSS conic gradients polyfill by Lea Verou.

Vuecidity – UI Component Library for Vue.js

Inspired by Material Design and Bootstrap and from a few other takes on modern UI, I just finished Vuecidity – a UI component library for Vue.js and a free, open source project.

Vuecidity provides developers with a huge set of 30+ UI components, 24-column responsive layout grid system, styles and colors, beautifully crafted form elements and a couple of useful Vue directives, which allows them to concentrate on the functionality of the web, iOS, Android and desktop apps they build. Powered by Vue, Vuecidity can be used to simultaneously develop amazing responsive websites, PWAs, desktop applications (through Electron) or mobile apps (through Cordova) using the same codebase written in ES6. SSR as well as many more components are on the roadmap and will be available in upcoming versions as Vuecidity is in constant development and improvement. The library is available for installation via npm and adding it to your project is quick and easy.

Icons.io Font Icon Search Service

Icons.io is a new font icon search service project I’ve just finished. It enables instant search in several icon font providers – Google Icons, Google Material Design and Font Awesome and the list will continue growing. Built with VueJs on top of Vuetify it is fast, reliable, mobile-friendly with nice Google Material Desgin inspired UI.