DEV Community: Alexey Okhrimenko

There is one more Google Developer Expert in the world! :)

Alexey Okhrimenko — Sat, 29 Aug 2020 11:23:40 +0000

I am pleased to share with you the news that I have received the official title of Angular GDE. This gives new opportunities, but with it comes with even greater responsibility.

What is GDE? Google Developers Experts is a global network of tech experts, influencers, and influencers who actively support developers, businesses, and tech communities by speaking at events and posting content. These professionals actively contribute to and support developer and startup ecosystems around the world, helping them create and launch innovative applications.

About 700 experts represent 18+ Google technologies around the world! In my case, this technology is Angular. The GDE title does not mean that I work with Google or that Google gave me money :) It just means that Google recognizes my expertise in Angular.

GDE is getting:
1) Google Recognition
2) Ability to communicate with Angular developers and other Google teams
3) Access to closed groups of GDE experts
4) Invitations to events (aka a trip to Google I / O)

Here are some of the things that Google noted in my work:

I have worked with the earliest versions of Angular (2.x) (before it became popular)
Created one of the largest Russian-speaking Angular community with more than 5 thousand developers https://t.me/angular_ru
Together with Tinkoff, organized more than 17 Angular meetups in Moscow and the regions. I helped people with the preparation of talks https://www.youtube.com/channel/UCpDTAtunmHBcI6CsJoUV7ww/videos
Co-organized the first in Russia NgGirls https://ng-girls.org/moscow-2019/
In collaboration with JetBrains, has awarded over 20 licenses for InteliJ products among Angular developers.
Gave more than 30 talks (including talks on Angular) https://github.com/Semigradsky/events/blob/master/speakers.md#by-the-count-of-talks-more-than-one
Made (with the help of the community) the Russian-language Angular documentation https://angular24.ru/
Developed a fairly popular plugin (more than 1700 developers have already installed it) for automatic refactoring of Angular components https://marketplace.visualstudio.com/items?itemName=obenjiro.arrr
Author of Russian-language articles on Medium https://medium.com/@obenjiro
Author of Russian-language articles on Habr https://habr.com/ru/users/obenjiro/posts/
The author of the Russian-language Telegram channel https://t.me/obenjiro_notes
Author of the English-language Twitter blog https://twitter.com/obenjiro
Author of English-language articles on dev.to https://dev.to/obenjiro

But I do not plan to stop there. Already now I am actively working on improving the quality of the Russian-language Angular documentation, developing Granula (an alternative Runtime for Angular) and Reagain (a tool for static analysis of the code base). I will also do my best to enlarge Angular community and make it soft and fluffy for everyone :)

Subscribe to my (RU) Telegram channel https://t.me/obenjiro_notes or (ENG) Twitter blog https://twitter.com/obenjiro to always keep abreast of my latest developments and articles;)

ARRR or how to refactor components automatically

Alexey Okhrimenko — Tue, 18 Aug 2020 10:11:41 +0000

🛠 Have a bunch of legacy code written in Angular and React? Decided to decompose a component and tired of just thinking about it?

Try ARRR (Angular) and Glean (React) - VSCode plugins that allow you to export a piece of code into a new component with its own HTML, CSS, TS and spec files.

☠️ Let's refARRRctor it!

For Angular (ARRR)
[link] [repo]
For React (Glean)
[link] [repo]

HTML to Angular/React app in single command

Alexey Okhrimenko — Mon, 03 Aug 2020 16:24:07 +0000

Having a large chunk of HTML and want to convert it to app?

Just augment it with data-component attribute and run a single cli command:

For Angular (link)

npx create-angular-components ./index.html

For React (link)

npx html-to-react-components ./index.html

🧙🏻‍♂️ Magic :)

PifuHD: 3D avatar from 1 image (well... almost)

Alexey Okhrimenko — Tue, 07 Jul 2020 08:08:00 +0000

Recently, GDG DevParty Russia was held at which, in addition to talk on MagicString library, there was a report by Vasilika Klimova on the possibilities of WebGL in the browser “Let's dance?”. In it, she talked about how to create a 3D avatar, and then animate it directly in the browser. The problem is that the avatar is created using a huge device called "Shapify Booth". Cool if you have access and some extra money for this kind of entertainment, but what if not? :)

Thanks to the achievements of Machine Learning, we have an alternative. Facebook Research published a work called PifuHD. Using it, we can create a 3D avatar from single image 😱
To do this, find 1 full-body-length photograph of yourself.

Next, open Google Colab (via the link) (better to do this in Google Chrome) and follow the instructions. If you get confused, watch the video.

Literally in 5-10 minutes you will have your own 3D avatar from the picture.

But that is not all! Stitching 2 photos into one (front & back), thereby preparing the texture for our avatar

and watching a couple of videos about an easy way to texture a 3D model in Blender

We can create a textured model.

Having exported all this in FBX format and creating an archive in which the fbx file and texture file will lie, we can import this archive into Mixamo

In which we can choose the appropriate animation to poison it in Adobe Aero where we are already substituting our model in a suitable environment to get just such an animation 😅

Well, after a bit of training, I’ll finally deal with my inner self.

Of course, the quality of the models leaves much to be desired and sometimes even an obvious picture gives a huge number of artifacts. PifuHD is especially bad with hands.

And texturing/animating will take you more than 10 minutes, especially for the first time (it took me 6 hours), but with a little training you can make a lot of cool animations and maybe even a simple game :)

What a time to be alive! (c)

Subscribe to my twitter https://twitter.com/obenjiro and Telegram chat TensorflowJS to always be up to date with the latest ML https://t.me/tensorflowjs_en

The silence of the FANS - part #1 - Google Colab Javascript QuickStart

Alexey Okhrimenko — Mon, 17 Feb 2020 18:12:49 +0000

Google have awesome service called Google Colab. It is a free (with some limitations, so you can't use it for production) cloud service, based on Jupyter Notebook. It provides a service for machine learning and free-of-charge access to a blazingly fast GPU and TPU.

With this service, you can easily train your model within seconds. It dose supports Python2 and Python3 out of the box, so everything should be good right?

No! I want JavaScript

But there is one problem. There is no native support in Google Colab for javascript. Thankfully I was able to hack it. Thanks to the research done in this thread (https://github.com/googlecolab/colabtools/issues/13) and some mad javascript science we can actually use Google Colab, TensorflowJs and JavaScript together

QuickStart

I have created a template that will help you to start, just open this link

https://tinyurl.com/tf-js-colab

And clone it to you Google Drive with "Save a copy in Drive..." command

Now you have your own copy of this Jupyter Notebook on your Google Drive. Execute first cell and hit F5. And thats it! 🎉🎉🎉

Troubleshooting

You will probably see this message "Unrecognized runtime javascript; defaulting to python". Don't panic! This is happening because our template uses "javascript" kernel for Jupyter notebook, but since you just created this notebook your instance (your computer/server) that is assigned to you simple doesn't have it installed.

Let's fix this by running the first cell



!npm install -g npm@latest
!npm cache verify
!npm install -g --unsafe-perm ijavascript
!ijsinstall --install=global
!jupyter-kernelspec list

You should see this at the bottom of cell output



...
added 64 packages from 62 contributors in 3.604s
Available kernels:
  ir            /usr/local/share/jupyter/kernels/ir
  javascript    /usr/local/share/jupyter/kernels/javascript
  python2       /usr/local/share/jupyter/kernels/python2
  python3       /usr/local/share/jupyter/kernels/python3
  swift         /usr/local/share/jupyter/kernels/swift

Now just hit F5. And thats it! 🎉🎉🎉

Your runtime will be reloaded and your Google Colab instance will now be running under ijavascript kernel (you can read more about it here https://github.com/n-riesco/ijavascript). Now you can write javascript for Node.js version 8 and use power of Google Colab.

If you don't see



  javascript    /usr/local/share/jupyter/kernels/javascript

Check formatting of the code. For some reason Google Colab tends to add/remove spaces and this brakes everything.

And if you have problems with NPM request limit "npm ERR! 429 Too Many Requests", just add Chinese NPM server to every npm install command



!npm install -g --unsafe-perm ijavascript --registry=https://registry.npm.taobao.org

Known problems

But before you go and experiment. There is two more things I need to warn you about:

1) ijavascript kernel doesn't have clean and simple way to execute shell commands, so I made a helper function for you (you can find it in template)



var { spawn } = require('child_process');
var sh = (cmd) => {
    $$.async();
    var sp = spawn(cmd, { cwd: process.cwd(), stdio: 'pipe', shell: true, encoding: 'utf-8' });
    sp.stdout.on('data', data => console.log(data.toString()));
    sp.stderr.on('data', data => console.error(data.toString()));
    sp.on('close', () => $$.done());
};

With it you can init package.json, install dependencies and run some commands.



sh('npm init -y');
sh('node -v; npm -v');
sh('npm install @tensorflow/tfjs-node-gpu');

2) Do not use let, const. Use oldschool var instead. This is really important because of Jupyter Notebook workflow suggest that you can run code in any order you want, and run multiple times. You won't be able to do that with let or const

3) To run asynchronous code you should use $$.async(), $$.done() helpers. Otherwise you will lose cell output. To make this process easy I made another helper function



var run_async = async (pf) => {
  $$.async();
  await pf();
  $$.done();
};

You can use it to run async code



var data;
// may take a lot of time to download files for the first time
run_async(async function () {
  data = new MnistDataset();
  await data.loadData();  // async code that fetches MNINST dataset

  console.log(data.getTrainData());
})

4) After some time your instance (computer/server) will be destroyed and when you attempt to execute any javascript you will see parse error messages. To fix them just execute first cell ones more and hit F5.

Why javascript

Well there is a some of reasons why I prefer JavaScript (TensorflowJS) for Machine Learning:

Javascript is most used language in the world. According to Github and StackOverflow
TensorflowJS is on par and some times even faster then Tensorflow (python) version
- https://blog.tensorflow.org/2020/01/run-tensorflow-savedmodel-in-nodejs-directly-without-conversion.html?m=1 // Detect dark theme var iframe = document.getElementById('tweet-1228077414560878597-271'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1228077414560878597&theme=dark" }
With JavaScript I can get clean 20-30 fps for Face detection and share it with everyone in the world without buying $$$ hardware
- https://twitter.com/TensorFlow/status/1214290578374041600?s=20
We have awesome Russian and English speaking TensroflowJS communities here in Telegram chat-app with 400 people and growing
- https://t.me/tensorflow_js
- https://t.me/tensorflowjs_en
Javascript is awesome!

So what's the benefit?

Why should we suffer, use all this helpers. Why not use your MacBook? The reason is that even for small dataset like MNIST and simple CNN model you can get 3-7x performance improvements. Nice! :)

And with this, finally, you can achieve Silence of the FANS...

PS: On the next article I will tell you how to download and upload data to Google Colab

Escape plan (from JS to TS) - Simple project - PART #1

Alexey Okhrimenko — Sun, 01 Sep 2019 11:17:54 +0000

Here is a simple escape plan that will help you to move from old code base to modern TypeScript. This plan may not work for your project, but at least you can use it as a good starting point.

1) Move .js files to src folder (if not already)

2) For really old code base (ES3/ES5), apply Lebab (https://lebab.unibtc.me/). Lebal is an awesome tool to modernize your code base ES3/ES5 => ES2015/2016 automatically.

npx lebab --replace src/ --transform let,class,arrow,arrow-return,commonjs,template,obj-method,obj-shorthand ,for-of,for-each,arg-rest,arg-spread

3) Rename extension of JS files to TS files

for file in src/**/*.js; do mv "$file" "${file%.*}.ts"; done

4) Create webpack config with Webpack CLI. Don't forget to choose TS when asked

npx webpack-cli init

5) Create tsconfig.json in root of your project. It's a loose config that will help you to start quickly. It will do for now.

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "downlevelIteration": true,
    "lib": ["es2015", "dom"],
    "module": "es6",
    "target": "es5",
    "allowJs": true,
    "strict": false
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

6) If your code base doesn't have any import/require statements (you where using global scope and file concatenation). Add export to all top level function and classes, it will help us with the next step.

find src/ -name "*.ts" -exec sed -i '' "s/^function/export function/g;s/^class/export class/g" {} \;

7) Use modern IDE (WebStorm, VSCode). Fix missing imports and property declarations. In any other hard to solve case use any. Do not worry. We will fix that later, in next post. Repeat until npm run build stops reporting errors.

8) PROFIT!

Realworld example

I used this plan to modify a game called unicorn-runner. If you interested on how code based changed thanks to that plan:

This is code before https://github.com/obenjiro/unicorn-runner/tree/fccc2f57470dde0f76850522c3e7e6abe8157789

This is after https://github.com/obenjiro/unicorn-runner/tree/88157915758c4c270fa64ccd4fd2427a68bcba7a

About PART #2

In the next part I will tell you how to add missing types automatically and make your tsconfig.json little bit stricter :)