Dear fellas, it looks like the lockdown is coming to an end, at least in some countries. To celebrate this (oh yes, coding), I would like to share an article where we explain how to recreate the Ubuntu Login using only CSS and semantic HTML. It is a cool exercise for those who are starting with CSS or wanna refresh some concepts. We will simulate a click event as well but remember that you can use your own OS login or even give your personal touch. Hope you like it ^^
Dear fellas, now that we have extra time at home thanks to coronavirus, I would like to share an article where we explain how to recreate the Linux terminal using only CSS and semantic HTML. It is a cool exercise for those who are starting with CSS or wanna refresh some concepts. We will follow the Adwaita-dark theme appearance but you can use any other or even give your personal touch. Hope you like it ^^
In this tutorial I’m going to explain you step by step how I make phone apps using Cordova (Phonegap/Ionic) and Ubuntu.
For those who don’t know anything about Cordova, it is an opensource platform for building multiple platforms applications using HTML, CSS and JavaScript. The main different between Cordova and Phonegap is that the second one gets the Cordova code and redistributes with some Adobe rights, now it’s free but maybe tomorrow who knows, my recommendation is to use Cordova that apart of this is always more updated!
So, first step you have to install Cordova, open a shell in Ubuntu and type:
$ sudo npm install -g cordova
Any problems? See the Cordova documentation.
After that you need to install a platform, in this example we are going to develop an Android app so you have to install the Android SDK.
I recommend you to install Android Studio that brings you the SDK and many extra tools in an user friendly access. Get Android Studio.
Once you download it and unzipped it, you have to run it the first time to install everything. If you set android-studio in your home folder, it will create an Android folder with the SDK.
Make Android SDK accessible in your environment (system)
Open a shell and type:
$ nano ~/.bashrc
Then you need to add to your “PATH” variable where your SDK and Gradle are.
export ANDROID_SDK_ROOT=~/Android/Sdk
export PATH=${PATH}:~/Android/Sdk/tools:~/Android/Sdk/platform-tools:~/android-studio/gradle/gradle-5.1.1/bin
After that, reload bashrc, if not it will not have any effect.
$ source ~/.bashrc
Note: you need to set your own path and names for the Android SDK, I used my “home” folder and default Android Studio’s folders.
Use the one you feel more confortable, my favorites are: Atom and VSCodium.
$ cordova create myApp $ cd myApp $ cordova platform add android $ cordova run --debug --device
Now you can start programming! HTML, CSS and JavaScript files are in the “www” folder.
Remember you need to activate developer options in your Android phone.
If you have any access problem (EACCES) to your android-studio folder.
$ chmod 777 -R ~/android-studio/
Enjoy 🙂
Here if you want you can download my Cordova logo and use it for free: Cordova logo