I was trying new things

André Baldeweg
Jan 19 · 5 min read

If you develop each day chances are you solve problems the same way as many times before. Its thrilling to be a web developer, because you can try and use new things every day. There is so much you see all day long. So much you would like to try out. Technique is changing rapidly! Perhaps, there is a tool that makes your life easier or makes things better!

The tech is changed fast, and so we devs should also. We should learn new thinks instead of sticking with the old stuff. I recommend to take the time for experimenting — it's worth it.

I will encourage you to just experiment! And I hope the following will inspire you!

Database

I started my journey with SQLite. Every time I needed a database I chose MySQL, but there is so much more out there. SQLite is much like MySQL, instead having not such strong types and not that much data types.

Making a small app did great for me, bit when I will develop bigger projects I will stick to the good old MySQL.

Now I had a database for books with SQLite and a Backend written in JavaScript an running on NodeJS. I missed a tool like Doctrine is for PHP Indeed, there are some tools for JavaScript.

https://medium.freecodecamp.org/a-comparison-of-the-top-orms-for-2018-19c4feeaa5f

NodeJS on the server

Then I moved a NodeJS script to a server that carried only the database app. And I found my foundation works quite well in installing a new server und setup the basics, because I have some meta packages for Ubuntu. The work I did afterwards was app specific and should be work more automatically in the future. Despite it the current status makes me happy.

Yes, that’s the way to go. I know that I am currently very old-fashioned using only one machine…

Using more machines is important and of course best practice.

In future I would not again write a NodeJS Backend. I am not content with the code quality of my script. Also I needed some additional configuration in Apache. I had to use a proxy like you can see in my example.

vHost example config

<VirtualHost *:443>  # [...]  <Directory /var/www/public/>    Options -Indexes +FollowSymLinks -MultiViews    AllowOverride All    AuthType Basic    AuthName "Restricted Content"    AuthUserFile /etc/apache2/.htpasswd    Require valid-user    # [...]  </Directory>  # [...]  ProxyPreserveHost On  ProxyPass /api/ http://localhost:3000/  ProxyPassReverse /api/ http://localhost:3000/  <Proxy *>    AuthType Basic    AuthName "Restricted Content"    AuthUserFile /etc/apache2/.htpasswd    Require valid-user  </Proxy>  # [...]</VirtualHost>

Growing in Vue

I learned how easy it is to implement an infinite scroll. I never needed it. It was just important to reload the list for an interval. Now I know it's super easy to build. Perhaps I will use it in existing projects too.

https://alligator.io/vuejs/implementing-infinite-scroll/

Also there is a relatively new @vue/cli package. I do like it, nice GUI and it simplifies the work for you, though it does not need my striving to understand whats going on under the hood.

https://cli.vuejs.org/guide/

Visualize

D3js looks like a very powerful, yet complex tool. I built something very simple, basically I used this tutorial and fitted the code to my needs.

https://scrimba.com/p/pEKMsN/cast-1953

Perhaps I will later build upon the code I implemented in my testing project. Looking at the API reference I am a bit overwhelmed. But I am also sure there is much I could use in later projects.

Testing

So, testing, huh? In JavaScript I try to avoid it, but this is even worse. I tried to integrate Jest into a Vue project, and I was about to cry. The .babelrc was supposed to look different then in the docs, because I use Babel 7 and Jest.

After that was done the actual test files could be written. It works really well in my case. The struggles to get it work were worth it.

The guides explains you which packages to install.

https://jestjs.io/docs/en/getting-started

https://vue-test-utils.vuejs.org/guides/testing-single-file-components-with-jest.html

You should also install jest-transform-stub.

https://github.com/eddyerburgh/jest-transform-stub

My .babelrc differs from the docs and looks like:

{  "presets": [    [      "@babel/preset-env",      {        "modules": false      }    ]  ],  "plugins": [    "@babel/plugin-syntax-dynamic-import",    "@babel/plugin-syntax-import-meta",    "@babel/plugin-proposal-class-properties",    "@babel/plugin-proposal-json-strings"  ],  "env": {    "test": {      "plugins": [        "transform-es2015-modules-commonjs"      ]    }  }}

Next to the unit tests I wanted End-to-end testing. For that I had to decide whether to use Cypress or NightwatchJs, looking at The State of JavaScript I concluded to go with Cypress.

https://2018.stateofjs.com/testing/other-libraries/

Yes, its easy and simple to learn, it shows a good looking UI in a new window and if you run it in headless mode it renders a video for you.

yarn cypress run

Though I don't want it to. Just run the tests and show the report on the CLI.

Make server easier

I decided to implement Ansible in my workflow.

Guides for installation can be found on the Ansible docs.

https://docs.ansible.com/ansible/latest/installation_guide/intro_installation.html#latest-releases-via-apt-ubuntu

https://docs.ansible.com/ansible/latest/user_guide/intro_getting_started.html

Another tutorial I found helpful:

https://serversforhackers.com/c/an-ansible2-tutorial

In case you get an error, like ‘/usr/bin/python: not found’, this can help: https://stackoverflow.com/questions/32429259/ansible-fails-with-bin-sh-1-usr-bin-python-not-found

https://docs.ansible.com/ansible/latest/reference_appendices/python_3_support.html

To be honst, I like this tool very much. I don't know why I haven't used it before. Now it’s fitting perfectly into my workflow and makes provisioning easier. I have and still use a meta package for Ubuntu, though much stuff was done manually. That will know done by Ansible, especially deploying the configs will be a job for Ansible. It complements my workflow and changes how I move config to the servers.

Another test

Something else I tried: just writing an article on medium.com with their great editor. It’s fun writing over here!

A new beginning

What comes now after finished experimenting? My tests were based on an app I developed further while trying new stuff. Incwadi will mange the warehouse of book stores. It’s now open source and and will be developed further on, the app is currently at a very early stage.

The Repo can be found here: https://gitlab.com/incwadi