teleren/devto huggingface dataset:
I created few shapes in Jetpack compose / Gist included
Tags: android, compose
Published: 2021-07-09 18:32:34

---
## Common
title: I created few shapes in Jetpack compose / Gist included
tags: [android, compose]
# description: 
published: true

## Github pages
layout: post
# image: 
sitemap: false
hide_last_modified: false
no_break_layout: false
categories: [Android, Compose]


## Dev.to
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4vnm4mj847llrnylpmj.png
canonical_url: https://mahendranv.github.io/posts/compose-shapes-gists/
# series:

---

Sharing few of my jetpack-compose shapes here. Did path tracing and formed outline path.

## Heart

![heart](https://user-images.githubusercontent.com/6584143/125109896-8e16ae00-e101-11eb-99ee-4d4a7696c667.png)

🚀 - [Gist](https://gist.github.com/mahendranv/794e9584cc003c83f1790c8badac262f)



---


## Tag
![Tag](https://user-images.githubusercontent.com/6584143/125108986-63782580-e100-11eb-9438-19e5594f4fea.png)

🚀 - [Gist](https://gist.github.com/mahendranv/87de70694221bd28446910ce25ab5c24)


---


## Polygons

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cb6ug4p16hpllo27lwke.png)

![rick](https://user-images.githubusercontent.com/6584143/125115323-cf5e8c00-e108-11eb-8ebb-d4ee63bedfa2.gif)

🚀 - [Gist](https://gist.github.com/mahendranv/c8fb2d846e2b9000ea51b4979f5cdff3)


---

## Car

![image](https://user-images.githubusercontent.com/6584143/125117669-2fa2fd00-e10c-11eb-825b-6767ced48799.png)

![image](https://user-images.githubusercontent.com/6584143/125119234-6e39b700-e10e-11eb-9513-951b99d1e33e.png)


🚀 - [Gist](https://gist.github.com/mahendranv/10074cecc74d9a7997ff9b1ad99468c2)


---


## 👷 Tool set

- Figma for path tracing : [steps here](https://vimeo.com/manage/videos/569544993)
- [SVG path editor](https://yqnn.github.io/svg-path-editor/)
- Read about [polar coordinates here](https://varun.ca/polar-coords/)
Biyete: Parse Bank Emails and send it to Google Sheets
Tags: javascript, money, fintech, gmail
Published: 2021-07-09 18:13:14

---
title: Biyete: Parse Bank Emails and send it to Google Sheets
published: true
description: A small Google Script for your Gmail
tags: javascript, money, fintech, gmail
cover_image: https://user-images.githubusercontent.com/292738/87846952-fdb4dd00-c8a1-11ea-8dbe-57f3c43b46c3.png
---

This was a small project I created some time ago, but never really took off. But maybe is interesting to you on how to integrate Gmail with Google Sheets.

It parses bank emails and send the information to a Google Sheet or a REST endpoint so you can track your finances.

{% github ninjascl/biyete %}
I made a terminal game in Python
Tags: python, gamedev, tutorial
Published: 2021-07-09 18:06:58

I created Snake and Tetris with [curses] 
(https://docs.python.org/3/howto/curses.html) in Python.

[Repo](https://github.com/tingwei628/pytg)
[Live Demo](https://www.youtube.com/watch?v=irQpzvLx0f4)
Screenshot
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wt11cx7yvjx2zcrxpy8.png)

Enjoy it :P
How to build minimal angular 12 app with esbuild
Tags: angular, esbuild, javascript
Published: 2021-07-09 18:05:27

Are you curious about building your angular application with [esbuild](https://esbuild.github.io/)? esbuild is a new build tool in js land, mostly know for it's speed.

# The application

We will migrate to esbuild the demo application that I presented in:

{% post marcinwosinek/how-to-build-minimal-angular-12-application-with-webpack-4laa %}

If you are interested in the code, you can check the article above, or directly the repository:

{% github marcin-wosinek/webpack-angular no-readme %}

The application is simplified to the point of being not much more than just a proof-of-a-concept. One of the risks I see, is if dependency injection will work as expected with all options of specifying dependencies. Let me know here in comments is you have any troubles. Besides, in future articles I'll take a look on more complicated angular application build with esbuild.

# Build script
The main difference with webpack example is build script in `package.json`:
```
  "build": "esbuild src/index.ts --bundle --outfile=dist/main.js"
```

for it to work we need to install esbuild as dependency:
```sh
$ npm install --save-dev esbuild
```

# Head to head comparisons with webpack

Let's compare the build speed with webpack. First, the esbuild:
```
$ time npm run build

> esbuild-angular@1.0.0 build
> esbuild src/index.ts --bundle --outfile=dist/main.js


  dist/main.js  1.7mb ⚠️

⚡ Done in 166ms

real    0m0,416s
user    0m0,606s
sys     0m0,070s
```

Key figures for us to focus are:
* `0.4s` - real time as returned form `time` command - the clock difference between starting a command & finishing it. It's slightly longer then what was returned by `esbuild`, as it's system command, we can assume it similarly skewed for both esbuild & webpack.
* `1.7mb` - dist/main.js size

When we add `--minify` flag to the build script, we get as follow:
* `0.4s` - build time
* `773.9kb` - dist/main.js size

Similar values for webpack, with:
* `mode: "development" - minimization off:
```sh
$ time npm run build
...
asset main.js 3.22 MiB [emitted] (name: main)
...
real    0m4,088s
user    0m7,025s
sys     0m0,251s
```
about ten times a long as esbuild & almost twice as big as non-minified esbuild run
* `mode: "production" - minimization on:
```sh
$ time npm run build
...
asset main.js 811 KiB [emitted] [minimized] [big] (name: main) 1 related asset
...
real    0m15,648s
user    0m25,688s
sys     0m0,530s
```

The size is comparable, but the build is almost 40 times slower.

{% asciinema 424764 %}

# Links
* [my course about esbuild](https://bit.ly/esbuild-course)

# Summary
In this article we have seen esbuild in action building simply angular application. You can see the 'application' [here](https://marcin-wosinek.github.io/esbuild-angular/), and codebase here:

{% github marcin-wosinek/esbuild-angular no-readme %}

If you are interested in other aspects of esbuild, please let me know in comments.
How to Install Drush Globally on Windows 10
Tags: drush, drupal
Published: 2021-07-09 17:52:31

I am assuming that you already have installed PHP and Composer on your system and set them to system's path and verified them whether PHP and Composer both are working properly. 

This post will help you install Drush globally on your system, I'll be demonstrating Drush installation on my Windows 10 but if you have PHP and Composer installed on Linux or MacOS; you can installed Drush globally with the same command on any system.

{% youtube Oyf7YDsbfAo %}

### You Might Like
* [How to Install Composer on Ubuntu](https://tubemint.com/install-composer-on-ubuntu/)
* [How to Install Composer on Windows 10](https://tubemint.com/install-composer-windows-7-8-10/)
* [How to install Magento on Ubuntu with Composer](https://tubemint.com/install-magento-2-with-composer/)
What IDE Most Used By Python Developers?

Published: 2021-07-09 16:21:07

Python is the world's most popular and preferred programming language among programmers of all ages. This is the language that you should learn initially if you are a beginner. Well, we all know how important code editors and IDEs are for writing and executing programs in programming, but deciding on the finest code editor or IDE is always a difficult task. 

Understand that the ideal code editor or IDE is determined by a variety of factors, including programming language, project type, project size, OS support, and a variety of other factors. If we're talking about Python, it's clear that this language isn't an exception. Let’s have a look at the various <a href="https://codersera.com/blog/best-python-ides-and-code-editors/">Python IDE </a>that are being used by the developers.

<b>PyCharm:</b> It is being used by seasoned developers and is one of the best python IDE. It has two versions, a community version and a professioal version wherein the latter is paid. 

<b>Spyder:</b> It is an open-source and cross-platform python IDE. It is mainly used by data scientists who can integrate with Matplotlib, SciPy, NumPy, Pandas, Cython, IPython, SymPy, and other open-source software.

<b>PyDev:</b> It is primarily used for analysis of code, debugging in the graphical pattern, refactoring etc and is also quite popular amongst the developers.

<b>IDLE:</b> It is a Python IDE that is suited for beginners who want to practise python development. It is lightweight and easy-to-use that may be used to create small projects like web browser game automation, web scraping program, and office automation. 

<b>Wing:</b> Wingware's Wing IDE is a cross-platform Python IDE that is faster, more stable, and exceptionally light. This IDE has a powerful debugger and a smart editor that make dynamic Python development quick, accurate, and enjoyable.

<h3>To Sum Up…</h3>

These are the top best and most popular python IDEs available in the market that is being loved by the developers from all around the world.
Discovering the niche
Published: 2021-07-09 17:32:59

Hey there everyone 👋,

I am a full stack developer with 5 years of experience primarily in web technologies. I am working at an e-mobility technology company and at the present we are focusing our efforts into building an electric motor bike.

I am currently learning and working in Android with Kotlin. I love learning more about improving developer happiness and productivity.

Dev.to is new to me. I am still figuring out how to write and format articles in an easily readable way. I hope I can share content in a meaningful way and connect with you all.

Hope everyone has a great weekend.💙
Give it time to sink
Tags: productivity
Published: 2021-07-09 17:27:10

I was talking to one of my colleagues the other day, and we discussed about "mental models" and about upgrading our "Brain OS". As the conversation progressed, the discussion came around to our frustrations about making these stick. This is a common problem and I am sharing my solution in this short article.

---

I am a huge fan of the blog called [farnam street](https://fs.blog). They have a collection of well written articles about mental models (the way the world works, and how we can make effective decisions). It is a lot of content, and very insightful too. I'm sure you would have come across similar golden nuggets on the internet. We tend to go through the different articles and feel very productive in the moment, but that soon fades away as we come back into reality and we remember none of it in practice.

> Quite often, we look for the quick and easy way to do things. We crave the 1 hour crash course on React or other framework or technology.

I have been frustrated by this process for a long time, but couldn't figure out what the issue was, until I came across the book called Deep Work by Cal Newport. The author suggests that in order to make the most meaningful progress, or to produce the most productive output, we need to be free of distractions. We should focus on the task at hand for a long stretch of time. With our never ending social media notifications interrupting us every 20 minutes, this felt far from our reality and it made sense why we couldn't do "Deep Work".

Thinking along similar lines, I felt that this could be the reason for me not being able to grasp and implement the mental models and productivity concepts that I came across. I was always in a rush going through different concepts and never spent any deep time on each concept individually - which resulted in me being "distracted" (not just by social media lol), but by the very same thing that would help me improve myself!

From there out I tried a slower and more deliberate attempt at learning about mental models. This involved me picking a few and only looking at one model per day. I would spend maybe half an hour (and sometimes, multiple days) understanding the ins and outs of that specific mental model. And each new idea that I understood about it, I documented into my Notion app. This slow and focused learning helped me  understand and imprint each concept into my life at a deeper level.

And that's it! There is no quick fix or magic video or article that will make you a 100x person overnight. It is all about spending deliberate focused time on understanding simple concepts. In short, give it time to sink!
What's your morning routine?
Tags: discuss, lifeskills, watercooler, coffee
Published: 2021-07-09 17:27:10

---
title: What's your morning routine?
published: true
description: I'd like to know what you do in the morning to get your body and mind started
tags: discuss, lifeskills, watercooler, coffee
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uxl2d9bl89uure1d088i.jpeg
---

*Cover image by AcombesFR, CC BY 4.0, via Wikimedia Commons*

Being at home for 15 months forced me to figure out the morning routine that actually helped me, as I tried to enter a mental state where work felt easy.

I did everything from 'roll out of bed and immediately open my laptop' to 'two hours of self care before I even touch my phone' and have settled into something that works okay. For me the essentials are:

* shower
* light exercise
* make a cup of coffee (I froth the milk with a [cheap device](https://www.amazon.com/Miroco-Stainless-Automatic-Cappuccino-Chocolates/dp/B07HH9BHL1/ref=asc_df_B07HH9BHL1/?tag=hyprod-20&linkCode=df0&hvadid=242019256550&hvpos=&hvnetw=g&hvrand=14187248414928926185&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=9061081&hvtargid=pla-575341920861&psc=1) that, 9 months later, is my favorite pandemic purchase)
* drink coffee sitting in the back yard while the dogs run around
* space out looking at TikTok for half an hour
* sit down at my desk
* realize an hour later that I didn't eat anything

And that's how it goes! What's your morning routine?
bitsize #1: What is an asynchronous operation?
Tags: beginners, programming, async, webdev
Published: 2021-07-09 17:05:54

![Asynchronous Programming #1 - Facebook@3x](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o66nqmv533m1kmkr735v.png)

There is already tons of awesome articles and guides explaining asynchronous programming, one more is probably only going to contribute to the mess, instead I want to try a different approach: the image above gives you a bitsized explanation that might be a good starting point to fully understand other in deep guides, or probably a good finalizer that makes everything you already know fit harmoniously 🤞

## Personal Recommendations

And also, these are the related posts (of tons I have read) that I personally liked a lot, you will definitely learn a lot from them:

1. [A gentle introduction to multithreading — Internal Pointers](https://www.internalpointers.com/post/gentle-introduction-multithreading)

2. [Asynchronous programming in C# | Microsoft Docs](https://docs.microsoft.com/en-us/dotnet/csharp/programming-guide/concepts/async/)

3. [General asynchronous programming concepts — Learn web development | MDN (mozilla.org)](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Concepts)

4. [⭐️🎀 JavaScript Visualized: Promises & Async/Await — DEV Community 👩‍💻👨‍💻](https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke)

5. [Concurrency, Parallelism, Threads, Processes, Async, and Sync — Related? 🤔 | by G. Abhisek | Swift India | Medium](https://medium.com/swift-india/concurrency-parallelism-threads-processes-async-and-sync-related-39fd951bc61d)

---

If you liked this post and want to show you support to build more on these, follow me [@huunab](https://twitter.com/huunab), thanks!
Amazing Music Card Using HTML & CSS
Tags: html, css, webdev, beginners
Published: 2021-07-09 16:05:29

Hello Guys,

Today I created a Amazing Music Card Using HTML & CSS. this simple music card using gradient colors and flex also I added font awesome icons to create the controls also added some box-shadow for image. I hope you like this also comments about your thoughts.

{% post https://dev.to/nikhil27b/glassmorphism-sign-in-form-using-html-css-3a2a %}

For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you!

{% codepen https://codepen.io/NikhilBobade/pen/WNjxqKQ %}
Codecademy CS101 Final Project: Blackjack
Tags: codecademy, python, codenewbie
Published: 2021-07-09 15:58:05

#Introduction

I have been taking the Codecademy CS101 course in the past month or so. Prior to this, I had no background in Python.

Codecademy requires us to make a basic terminal program using Python in order to complete its CS101 course. The objectives of the project are as follows:

    * Build a terminal program using Python
    * Add at least one interactive feature using input()
    * Use Git version control
    * Use the command line and file navigation
    * Write a technical blog post on the project

Blackjack was the first suggestion listed by Codecademy in the project write-up. I was leaning towards an original idea, but my mind started wondering what kind of logic I would write for a Blackjack program. I ended up writing the code in about a day.

The code can be found [here at Github](https://github.com/xiaowenyuan/cs101_blackjack.git). 

#Design

I made a `Card` class that takes in the following parameters for its constructor: `self, id, name, suit, value, visibility = True`. Using a `for` loop, I generated a deck of 13 cards for each of the four suits (Diamond, Club, Spade, and Hearts).

The deck of cards is randomly shuffled using `random.sample()`.

When the game starts up, the user is prompted to play by typing "Hit me" into the terminal. The user's input prompts
a `deal_card` function that pops the first card of the deck into the user's hands. 

The user has two options from then on: to continue receiving cards ("Hit me") or to stand ("stand"). 

##Adding the Dealer

After writing the basic logic of the game for a single user, I added a Dealer, which is played by the computer. The Dealer will be dealt a single card after the player's initial choice to be hit. The next card the Dealer receives is the Hole--it is hidden from the Player. Only at the end of the game does the Dealer reveal the Hole.

The logic behind the Dealer's decision to deal to itself or to stand is very simple--no card counting involved! The Dealer simply calculates if its hand is equal to or more than 18--if so, the Dealer stands.

#The Rules of the Game

I personally have never played "official" Blackjack played in casinos. For the purposes of this game, I have stuck to the following very simple rules:
 
* The user/Dealer is dealt a card, and can choose to continue playing and having a card dealt to them, or stand, which holds on to the current hand. 
* The value of the card follows the number on the card (ie 8 of hearts has a value of 9=8, and 5 of spades have a value of 5). Face cards (Jack, Queen, King) all have a value of 10. Ace has a value of either 1 or 11.
* If the value of the user's or Dealer's hand sums up to 21, the user or Dealer wins.
* If both players stand, the player with the bigger hand value wins.

#Future improvements

There are many different outcomes that currently are somewhat clumsily rendered in a dozen or so `if` statements. This should be refactored. 

It would be great to have a more intelligent AI for the Dealer. This is however out-of-scope in my study syllabus for now and the near-future.
Hidden Stars School
Published: 2021-07-09 15:55:45

Hello everyone we are Hidden Stars school and we offer one of the best playschool pre-school facility for students here in Guntur. This is a place renowned all over India but in case you are not aware, we would like to clarify that it is located in the state of Andhra Pradesh.  Hence, if you live close by and seeking the best school atmosphere for the kid, you can contact. You must be quick because right now we are enrolling students for first class admission 2021-22 Guntur.  We are surly not the only school facility in Guntur and there are plenty. However, we can proudly say that our facility stands out amid the other schools in Guntur. Here are some reasons why our facility is different from other Guntur schools.
Vue Academy #2: V-model directive
Tags: vue, javascript, webdev, typescript
Published: 2021-07-09 15:25:06

Welcome to the second vue academy ! It will be a list of lot of article on vue! I have 2.5 years of experience in this and I can teach a few thing about this !

For this course we will focus on v-model directive !

### Let's start

First problematic, how do we **manage** an input value in `<input>` ?

We could do the next :

```javascript
<script>
export default {
  name: "HelloWorld",
  data: function () {
    return {
      message: '',
    }
  },
  methods: {
     updateMessage(event) {
         this.message = event.target.value
     }
  },
};
</script>

<template>
<div>
    <input
        :value="message"
        @input="updateMessage"
        >
</div>
</template>
```

We need to bind value of input to our current data `message` and handle event from this input in order to update our current data `message`.

It's not really friendly and we have to do this for every <input> component...

### v-model 

You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type.

So we can replace the code above by

```javascript
<script>
export default {
  name: "HelloWorld",
  data: function () {
    return {
      message: '',
    }
  },
};
</script>

<template>
<div>
    <input v-model="message">
</div>
</template>
```

We can remove the method that update value ! Since v-model will directly update it.

It's very useful ! 

---

I hope you like this reading!

🎁 You can get my new book `Underrated skills in javascript, make the difference` for FREE if you follow me on [Twitter](https://twitter.com/code__oz) and MP me 😁

Or get it [HERE](https://codeoz.gumroad.com/l/RXLYp)

🎁 [MY NEWSLETTER](https://www.getrevue.co/profile/code__oz)

☕️ You can [SUPPORT MY WORKS](https://www.buymeacoffee.com/CodeoZ) 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : [https://twitter.com/code__oz](https://twitter.com/code__oz)

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!