Forem: Natesh M Bhat

react-profiles deployed !

Natesh M Bhat — Sat, 15 Aug 2020 06:57:54 +0000

My Workflow

github actions makes Publishing packages to various package managers easier than ever before.

I am using "Node.js Package" workflow to build and publish my npm package into npm and github packages when i create a new release in my codebase.

Submission Category:

DIY Deployments

Yaml File or Link to Code

nateshmbhat / react-profiles

A set of Profile UI components like Github , Stackoverflow , hackerrank with automatic api calls to get the profile data of a user.

react-profiles

A collection various Profile components with auto data retrieval using public APIs and auto cache management of profile data. You wanna showcase your profile ? Style it up with react-profiles :)

Features :

Profile components for lot of common sites.
Compressed SVG icons for scalability.
Uses public APIs to fetch data based on given username
Manages caching of API data automatically with appropriate refresh frequency.
Material ui components for visual treat.
Tooltip customization.

Usage :

npm install react-profiles

import { GitHub, HackerRank, Facebook, StackOverflow, LinkedIn, Instagram, GooglePlus, Youtube, Yahoo, Twitch, Twitter, Skype } from 'react-profiles';

NOTE : DONT FORGET to include fontawesome css in your index.html

<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"  type='text/css'>

Profile Bars :

GitHub (auto fetch data) :

<GitHub username="nateshmbhat" />

StackOverflow

…

View on GitHub

Automate your web pages with "webbot 🤖" without much code 🚀🔥

Natesh M Bhat — Thu, 21 May 2020 17:19:39 +0000

What is webbot ?

webbot is a web automation library in Python. To be more descriptive , it a library used for web browser automation and to some extent can be used for ui automation and end to end testing. But why should you use this when clearly there are other alternatives 😄

Why you may want to use webbot ?

Here are some of the features that I have listed on my github page which I am directly quoting here :

Use any combination of selectors like id, name, text, css etc to perform actions on elements with one line of code.
Automate and test pages loaded dynamically by javascript.
Click any button or link without having to worry about finding the element first or knowing css_selectors , xpath etc
Smart scoring algorithm which finds the best matching elements on which you want to perform the action .
Automation designed to work even in case of webpages with dynamically changing id and classname
Immensely minimises the code required for performing input actions like clicks and keyboard actions.
Get webpage source , cookies , total tabs , webpage title etc..
Simulate key presses and special key combinations
Bidirectional scrolling
Perform an action on webpage elements by applying various filters to select the elements .
Perform action on multiple elements at once.
If certain elements don't have text or visible property , then use either their id , class , css_selector , xpath , tag etc.
The entire automation process can be made without having to open the browser window i.e in the background as a console process (see docs for more details)

Link to Code

nateshmbhat / webbot

Web automation library for simple and easy end to end testing and web browser automation that offers super charged features while keeping it simple to use and master

🤖 Crazy Smart Web automation and testing library for python

webbot provides a much feature rich automation than selenium for all kinds of automation of webpage. Since the major portion of web automation is to perform actions like click and type into webpage elements , webbot automatically handles finding the right elements to perform the actions.

Buy me a coffee 😇

Features :

Click any button or link without having to worry about finding the element first or knowing css_selectors , xpath etc
Automate and test pages loaded dynamically by javascript.
Smart scoring algorithm which finds the best matching elements on which you want to perform the action .
The entire automation process can be made without having to open the browser window i.e in the background as a console process (see docs for more details )
Use any combination of selectors like id, name, text, css etc to perform…

View on GitHub

Here's a sample code snippet of webbot under action 🥳

The below code will first go to google.com and search for the song "hello its me" and then come back to google and signs in with the provided email and password.

from webbot import Browser 
web = Browser()
web.go_to('google.com') 
web.type('hello its me')  # or web.press(web.Key.SHIFT + 'hello its me')
web.press(web.Key.ENTER)
web.go_back()
web.click('Sign in')
web.type('mymail@gmail.com' , into='Email')
web.click('NEXT' , tag='span')
web.type('mypassword' , into='Password' , id='passwordFieldId')
web.click('NEXT' , tag='span')

If you wish to use some lower level "find_element_by..." functions yourself , you are still covered 😁. Just get the underlying selenium driver object like this : web.driver

Why and How I made it ?

Well , honestly it was mostly about writing too much code when using selenium for web automation.

I was using selenium for some of my projects and it felt like I was writing way too much code than what was necessary. I realised that the reason this happened was not because of any inefficiency or bad api of selenium but it was just because of the way in which the interaction with the web was modelled upon.

What ? What do I mean by this ?

The web automation code first requires that the element is first found before we perform any action.
This means that we end up writing too much "find_element_by_..." code rather than focusing on just doing what we wanted : i.e just click that damn button which just said "click me".
So basically we first find the element which we were looking for and then perform the action. The action could be a click or a keyboard keypress , scroll etc
But what we as developers want is to just perform the action on some element not worry about finding it all by ourselves.
In a nut shell , what we want is an action centric approach rather than an element centric approach.

With webbot , that's the approach I am taking. An action centric approach rather than the usual element centric approach. You tell webbot what action you wanna do rather than trying to worry about all those css selectors , xpath , etc. Depending on the type of action you perform , whether it is click , type , keypress etc , it has a scoring algorithm that will find appropriate elements based on the action.

So for example , if you are trying to run web.click( 'sign in' ) , then it gives a scoring to all elements containing the 'sign in' text and the clickable elements (buttons , anchor tags , elements with onPress) etc take appropriate scores and the best scoring element from the lot is chosen to perform the click action.

Additional Thoughts / Feelings / Stories

I made this project during my college days. This is my graduation year. Loads and loads of memories to cherish. Now, when I look back , I realise that these were the best days of my life. These were the days where I lived more than I had ever ! Will miss all this so damn much. Anyway I am writing this article because I got an email from GitHub regarding a "graduation" ceremony for 2020 graduates. I am more than happy to take part in this :)

Thanks guys :)

You can check my other post on dev I wrote earlier here where I talk about using electron with react and typescript support :

Terminal Tweaker : An electron-react project to tweak the new windows terminal to heart's content ❤.

You can check me out on :
Github : https://github.com/nateshmbhat
LinkedIn : https://www.linkedin.com/in/nateshmbhat
Instagram : https://www.instagram.com/nateshmbhat
Facebook : https://www.facebook.com/profile.php?...
Twitter : https://twitter.com/nateshmbhat

Thank You for reading till this last line 😍 !!! You are amazing 😎!

Terminal Tweaker : An electron-react project to tweak the new windows terminal to heart's content ❤.

Natesh M Bhat — Sun, 28 Jul 2019 08:33:08 +0000

Hey guys, Good day. Before I talk anything about this project, I am happy to say that this is my first post on the dev community and I'm so very excited to share whatever small things I have cooked up on my pc to this wonderful community. With this, let's get some electron stuff up our brains.

If all you want is to check out the app and the project , here's the link to the repository and the binaries:
Terminal Tweaker executables

nateshmbhat / windows-terminal-tweaker

Tweak your windows terminal to heart's content with this app using its beautiful interface to configure everything about the terminal.

Terminal-Tweaker

Tweak your windows terminal to heart's content with this app using its beautiful interface to configure everything about the terminal.

With the provided material themed color pickers , it becomes super simple to configure all those cute little colors you see in the terminal. See the tweaks reflect on the terminal in real time.

The app gives control over creation , deletion and updation for all of your profiles and color schemes and much more.

Download the tweaker here :

Screenshots :

View on GitHub

When I saw the new windows terminal trailer, damn it looked hot. But little did I know that configuring it would be a bit of pain before I installed it. So I rolled out a tweaker of my own for the terminal which does the configuration parsing and editing through the tweaker UI that's shown to the user.

This app reduces the tediousness of manual configuration through file editing and provides options to configure everything that about the terminal with material color pickers and others UI elements for customization.

Coming to the UI it's built using react with the semantic UI style components and state management is done using redux. Since I've been using React for a while, the best tech right now (as of 2019) to roll out desktop apps would be electron.

Well, after using electron I have mixed thoughts about it. Here's a rundown.

Type Safety and Auto Reloading :

After using javascript and typescript for a while, I felt insecure to not use typescript when I can. Though using electron was fun, it did come along with some issues when integrating create-react-app with typescript and making auto-reloading to work right.
As I ended up with many bugs and issues along the way, I decided to make a starter pack with all bug fixes, sweet auto-reloading, and typescript support to make testing during development pain-free. Here's my repo of this pack.

nateshmbhat / electron-react-ts-starter

A solid :) boiler plate starter pack when starting an electron project which uses create-react-app with typescript.

electron-react-ts-starter

( Has Auto Reloading and Works with Create-React-App )

This is a boiler plate starter pack when starting an electron project which uses react with typescript. The code contains some bug fixes that are found when using react with electron and typescript and has auto monitoring of typescript changes to reload the electron app for faster development.

Why this electron-react-ts-starter :

Run electron app with create-react-app without ejecting.
Auto reloads the electron app when the typescript source file changes. (This is missing in a lot of tutorial articles which only have an electron.js file and not a electron.ts file )
Provides the required npm scripts and folder structure for simple to complex projects.
Includes a very simple bundling process.
Auto reloads app for changes in both main process files and react files.
With the provided folder structure , main and renderer process codebase can be maintained independently.

Usage :

…

View on GitHub

Startup Times :

Electron makes use of chromium's rendering engine and this means more startup time than all those other apps out there. Though there are minor tweaks that you can do to speed it up, there's only so much you can do.

React :

Well, this is the shiniest part of the project for me. Enjoyed using the new hooks API to the fullest with all the new juicy hooks along with pretty damn useful custom hooks. Using react with redux was fun and nothing short of satisfying.

Building and packaging :

One of the scariest things that happen when using techs like this is an issue during building and release. Thankfully I was able to fix some of the issues that occur during packaging of the app for release and the starter pack above includes those fixes to make packaging easier. For building, I used electron-builder. I didn't have to worry about cross-platform issues since this tweaker is meant for windows 10 and above versions only.

Things you have to bear in your final app :

High memory consumption.
Slightly higher startup time.
If your application is a basic one, then packaged executable sizes could seem too much since electron itself takes somewhere around 80 MB of space (rough estimate) in the packaged app.

Worth it or Not?

For me, it was. Other than the fact that the executable size is more, the ability to make your web app as a desktop app is not a small thing to have given the upsurge of web frameworks and technologies nowadays.

Efforts to fix electron's limitations :

Here's some notable work that's done to reduce electron app size and memory usage: https://medium.com/dailyjs/put-your-electron-app-on-a-diet-with-electrino-c7ffdf1d6297

Forem: Natesh M Bhat

react-profiles deployed !

My Workflow

Submission Category:

Yaml File or Link to Code

nateshmbhat / react-profiles

A set of Profile UI components like Github , Stackoverflow , hackerrank with automatic api calls to get the profile data of a user.

react-profiles

Features :

Usage :

NOTE : DONT FORGET to include fontawesome css in your index.html

Profile Bars :

GitHub (auto fetch data) :

StackOverflow

Automate your web pages with "webbot 🤖" without much code 🚀🔥

What is webbot ?

Why you may want to use webbot ?

Link to Code

nateshmbhat / webbot

Web automation library for simple and easy end to end testing and web browser automation that offers super charged features while keeping it simple to use and master

🤖 Crazy Smart Web automation and testing library for python

Features :

Here's a sample code snippet of webbot under action 🥳

Why and How I made it ?

Additional Thoughts / Feelings / Stories

Thank You for reading till this last line 😍 !!! You are amazing 😎!

Terminal Tweaker : An electron-react project to tweak the new windows terminal to heart's content ❤.

nateshmbhat / windows-terminal-tweaker

Tweak your windows terminal to heart's content with this app using its beautiful interface to configure everything about the terminal.

Terminal-Tweaker

Download the tweaker here :

Links :

Screenshots :

Well, after using electron I have mixed thoughts about it. Here's a rundown.

Type Safety and Auto Reloading :

nateshmbhat / electron-react-ts-starter

A solid :) boiler plate starter pack when starting an electron project which uses create-react-app with typescript.

electron-react-ts-starter

( Has Auto Reloading and Works with Create-React-App )

Why this electron-react-ts-starter :

Usage :

Startup Times :

React :

Building and packaging :

Things you have to bear in your final app :

Worth it or Not?

Efforts to fix electron's limitations :