Author Archives: Alvar

The best Front-End frameworks 2022

React developer desk

It’s 2022, and it’s that question again which frontend framework to use? Are they maintained, production-ready, good learning curve vs benefit balance and active community? Let’s do a quick recap for the best of the best out there.

Photo by Oskar Yildiz on Unsplash

React
https://reactjs.org/
https://nextjs.org/
https://reactnative.dev/

I will put React in the number 1. The best of the best, and there are many reasons for that. First, because it has a vast community, simple structure, modular, component-based, and they also care about the world. They are a big supporter of Ukraine and the free world. That’s already alone is something.

What’s also very important with React and all the JavaScript (JS) based frameworks is that the learning curve and commons are very similar between the backend and the frontend. Also, React will let you build native mobile apps using React Native. So fewer code paradigms, similar codebase and a better understanding of each other’s code for various roles. Even though most of the developers are becoming full stack over time, thanks to these frameworks listed here, they can handle both backend and frontend code.

Also important to mention that React has Next.js for the backend. Quote from their web —

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Honourable mention is also React alternative Preact. They still hold a strong position, but I’m taking it as an alternative and would still go with React. But they have done an outstanding job there https://preactjs.com/. Preact also supports Ukraine.

To read the full article, please go to my Medium post. There are more of that form the top 4.

This helpful article sums it up nicely to read more about last year’s trends.
https://2021.stateofjs.com/en-US/

To finish it up, I also wanted to mention some deployment and static web options that are important to be aware of on 2022.
https://vercel.com/
https://www.gatsbyjs.com/
https://www.netlify.com/

And of course, if you need marketing automation tools for 2022, then Mockup API from Mediamodifier is the best on the market. I’m affiliated with that one.

Mockup API
Mockup API

Oh my terminal extension

Now, already a lot of time back I’m using that wonderful terminal extension on my Mac I wanted to share with others who might not have found it yet. It’s OhMyZsh – https://ohmyz.sh/

Oh My Zsh is a delightful, open-source, community-driven framework for managing your Zsh configuration. It comes bundled with thousands of helpful functions, helpers, plugins, themes, and a few things that make you shout…

“Oh My ZSH!”

Also, be sure to check out their cheat sheet for pro usage 😉
https://github.com/ohmyzsh/ohmyzsh/wiki/Cheatsheet

FOMO Taastusravi podcast

That’s where it all started. One weekday evening, in the heart of Tallinn, the Bermuda Triangle, two crypto engineers met. Thanks to their life experience, of course, they had in their pockets a holistic “burnout” treatment plan, and another long evening was about to start.

That evening in 2021, summer showed itself for the first time and there was light electricity in the air. Time was late at the cosy office — microphones and other devices, not yet known, to them were found (https://www.youtube.com/watch?v=ePN5z-6MSoI).
A little later, after researching these devices and realizing again that the price of Bitcoin had fallen again, many of them needed to be “comforted” with a good word, and it was decided to create a podcast FOMO Taastusravi. This will reach many and quickly.

Read more from Medium article

TypeScript 4.0 is here!

TypeScript 4 features

Microsoft continues to make developers feel great using new technologies. Now they announced the availability of TypeScript 4.0! It’s better in all areas – productivity, stability, and scalability.

Developers love to work with clean, well structured, readable, and functional code. This is exactly what TypeScript is for. Together with their IDE Visual Code it’s a strong and convenient combination for almost any web developer.

No more ‘undefined’ errors, better structure, and easier refactoring, mixed types of black magic. If needed create your own composite types for complex situations.

There’s a great article on TypeScript blog https://devblogs.microsoft.com/typescript/announcing-typescript-4-0/ on what’s added and how to get started right away.

Start hacking and learn something new!

npm install -D typescript

TypeScript 4 features

Running Obyte wallet on headless RaspberryPi 3+

RaspberryPi 3+

Let’s build and run headless Obyte wallet on RaspberryPi 3+. We’re going to run Obyte light node. Running full node is too slow to sync and the first database buildup can take weeks-months to complete Raspberry Pi 3+.

I also tried to do the full node syncing on another computer and then copied that DB into the Raspberry. Still, keeping it in sync was too much for Raspberry so it didn’t work out even then.

Prepare image on to the SD card

Go with the Raspbian Stretch Lite image from here https://www.raspberrypi.org/downloads/raspbian/. Raspian is based on Debian Linux.

Raspbian Stretch Lite

Next, download balenaEtcher (https://www.balena.io/etcher/) for burning that image onto the SD card. If you haven’t used it yet then the balenaEtcher is a very easy, convenient way to burn OS images into the SD & USB drives.

Note that I have 16GB SD card in my example, 8GB is more than enough.

balenaEtcher

Configure SSH & Wifi (if needed)

Now, enable SSH so you could connect into your Raspberry Pi without a need for a screen and keyboard. I’m going to use cable LAN and therefore don’t need to setup Wifi connection at the beginning.

To setup SSH you need to create the file ssh into the boot folder. Basically, there are two volumes – boot and rootfs. Create empty file names ssh and validate that it’s there.

For Wifi setup create a file named wpa_supplicant.conf again into the boot folder with the following content:

network={
ssid="YOUR_SSID"
psk="WIFI_PASSWORD"
}

This file will be copied on the first boot into the /etc/wpa_supplicant/wpa_supplicant.conf folder.

Find your Pi and log in

Now it’s time to put SD card into the Raspberry, connect LAN and power up.

You need to find your device IP address. One option is to assume that it has default hostname. In that case, you could ping raspberrypi.local to get it. The easiest way!

Other ways are to use arp -a, nmap (more info here https://www.raspberrypi.org/documentation/remote-access/ip-address.md) or get IP addresses list from your router and find it from there.

Log in using SSH using IP or ssh raspberrypi.local. The default username is “pi” and password “raspberry”. Change your password after login.

Update and configure

When logged in, first update its system.

sudo apt update
sudo apt upgrade

Then check Raspberry configuration tool to setup Wifi (if needed and you didn’t do this before) and extend file system. Run raspi-config.

For the menu “Advanced Options” choose “Expand Filesystem”. This will make Raspberry use the whole SD card.

To be sure that system is updated you could also run “Update” from there.

Voila!

Install NodeJS, Git, Tor and Screen

curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash -
sudo apt install nodejs git screen tor

I also like to use vim and sysv-rc-conf, but there’s no need to install these for this setup.

“Screen” will be used to run wallet on the background while remaining overview of the situation. This is totally optional.

Clone and configure wallet

Now clone “headless-obyte” from Github. 
https://github.com/byteball/headless-obyte

git clone https://github.com/byteball/headless-obyte.git obyte
cd obyte
npm install

Create the user configuration file into ~/.config/headless-obyte/conf.jsonand enter the following.

{
"socksHost": "127.0.0.1",
"socksPort": 9050,
"socksLocalDNS": true, "control_addresses": [""], "bLight": true,
"bFaster": true
}

Don’t set socksHostsocksPort, and socksLocalDNS if you don’t wish to use TOR.

Also, you can also define control_addresses (array) with your Obyte wallet device address, so you can control your wallet remotely or payout_address, to restrict, which addresses the wallet can withdraw funds.

Run & enjoy

screen
node start.js --max-old-space-size=2048

It will ask to set the passphrase. Later on every run it also asks that. This is used to protect your wallet private keys.

When you run the node, “my pairing code” is the code that you can use to connect headless wallet with your Obyte wallet.

====== my pairing code: *****************@obyte.org/bb#randomstring

When everything work you can “Ctrl + a + d” to detach that screen. And with command screen -r go back into it. “Ctrl + d” or `exit` to terminate.

An issue to be dealt with will be handling growing log file size. One option is to disable the log, but it won’t suggest doing that.

For now, if everything runs without errors turn logs off by adding the following line into the conf.json file.

{
“LOG_FILENAME”: “/dev/null”
}

References:
https://developer.obyte.org/writing-chatbots-for-byteball/setting-up-headless-wallet
https://www.raspberrypi.org/documentation/configuration/wireless/headless.md
https://www.raspberrypi.org/documentation/configuration/wireless/wireless-cli.md
https://medium.com/coinmonks/run-raspberry-pi-in-a-true-headless-state-cfb3431667de

Android apk keystore signing for store

Keystore

First think you need to do is to generate keystore file for project. Store apps needs to be signed with that and its always good to have separated keystore for each app. Keep that securely cause you need this everytime youre updating your app on store.

You can generate also using various IDEs like NetBeans, Eclipse, Android Studio and so on, but in this time we’re using command line.

user@host:~/home $ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

Signing

After you have built your apk (unsigned) you need to use following command to sign this with previously generated keystore.

user@host:~/home $ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore my_application.apk alias_name

Validate signed apk:

user@host:~/home $ jarsigner -verify -verbose -certs my_application.apk

Align

Finally align you apk to optimize it and after that it’s ready to be submitted into store.

user@host:~/home $ zipalign -v 4 my_application.apk my_application_aligned.apk

 

Add custom fields under wp general settings

To add custom fields under wordpress general settings without hacking core code use this as example. Of course you can make it better and write some fancy class for doing this.

add_filter('admin_init', 'my_general_settings_register_fields');

function my_general_settings_register_fields()
{
	register_setting('general', 'my_field', 'esc_attr');
	add_settings_field('my_field', '<label for="my_field">'.__('My Field' , 'my_field' ).'</label>' , 'my_general_settings_fields_html', 'general');
}

function my_general_settings_fields_html()
{
	$value = get_option( 'my_field', '' );
	echo '<input type="text" id="my_field" name="my_field" value="' . $value . '" />';
}

Do something when user click somewhere outside of wrapper

To close or do something when users clicks outside of some element following few lines of code can be helpful.

$(document).click(function(event) {
	if ($(event.target).parents().index($('#first_wrapper')) == -1 &&
		$(event.target).parents().index($('.second_wrapper')) == -1) {
		// Run something
	}
});

WordPress custom menu display

Just a small example of how to build custom menu output in WordPress.

$menu_args		= array('menu' => 'Main menu', 'echo' => 0) ;
$menu_string	= wp_nav_menu($menu_args);
$xml	= new SimpleXMLElement($menu_string);
$out	= false;

foreach ($xml->ul[0] as $li) 
{
	$classes = array('current-page-ancestor', 'current-menu-item', 'current-menu-parent');
	if (strstr($li['class'], 'current-page-ancestor') || 
		strstr($li['class'], 'current-menu-item') || 
		strstr($li['class'], 'current-menu-parent')) 
	{
		$out = $li->ul;      
		$i = 0;
		if (isset($out->li) && !empty($out->li))
		{
			$out['id']		= 'sub_menu';
			$out['class']	= 'clear';
			foreach ($out->li as $li_sub) 
			{      
				if (!strstr($li_sub['class'], 'current-page-ancestor') && 
					!strstr($li_sub['class'], 'current-menu-item') && 
					!strstr($li_sub['class'], 'current-menu-parent')) 
				{
					unset($out->li[$i]->ul);
				}
				$i++;
			}
		}
		break;;
	}
}
if (!empty($out)) {
	 echo $out->asXML(); 
}