Once I had a solid grasp of the brand style I began creating the design in Figma. Guided by my sketches and wireframes I began creating the outlines of a design. At this stage, I also created additional colors for the UI based on the original color palette.

I like to start my designs with a desktop view first and then go down to the tablet and mobile viewports. That way I can make sure that mobile device users aren’t missing out on any content. It’s also important for me to test the design on my smartphone and tablet with Figma prototyping features to ensure that all the buttons are clickable and the site is clean, concise and user-friendly.

While this is a relatively small project, I still tried to ensure that the basic HTML for the page follows best semantic practices and norms.

The BEM (Block-Element-Modifier) naming system and the organization of files into base and layout files, components and mixins ensures that the project is extensible and can be easily extended by another developer.

The use of SASS along with gulp.js greatly increases productivity and allows for the use of mixins, functions and includes. The folder structure follows the commonly known 7-1 pattern and all the elements are divided into modules for greater versatility.

In general, I always try to think of the future while coding, because no one likes to work with rigid, messy and error-prone code.

If you ever bought a premium WordPress theme you are most likely familiar with the tribulations of actually installing it. There are often tens of plugins and extensions that you need to install, one by one, just so your website resembles the demo page. Most of them, are from 3rd party developers and won’t integrate fully with your theme, leaving you to deal with all the updates, notifications, advertising and nagging to buy the PRO version. Yuck!

What’s worse, after you’ve installed the theme, you can’t just start blogging, every theme developer has a different way of customizing the features of your theme. Some of the options are in the WP’s native customization panel, some options are available in the settings page or even some other theme generated settings page.

So you have two options. You can either, read the documentation (which in most cases is outdated and not maintained after new features are added) or download the pre-made demo that the theme author provides. For the sake of time, most people choose the latter and download the demo content, which will flood their site with random stock images and sample content that will have to be later excruciatingly removed.

Since this is a side-project, I can only manage to devote so much time to its development. To automatically create flashcards I first wanted to use a dictionary API. I have quickly realized though, that this way, I would constantly have to deal with updating my code to fit new APIs but also, traditional dictionaries don’t have definitions for some of the slang words that are commonly used in English.

What I decided to do instead is to use the Google search engine. Adding the word “define” before any word in Google will quickly pull up its definition along with other links to more niche dictionaries specializing in slang, idioms or etymology.

To get sentence examples, I created a little PHP web scalper app that retrieves sentence examples from the web and saves them inside a PHP database. The app then retrieves this data and presents it in a nice UI, where practiced sentences can be marked green.

This app heavily relies on AJAX, PHP technologies and WordPress to store and cache the data. In the future, I plan to replace this solution with more modern technologies like MongoDB, Node and Express.js.

I always like to learn new things from different domains of tech. I enjoy the process of learning, hacking and tinkering with new and promising tools very much indeed and I think this app reflects that.