teleren/devto huggingface dataset:
Human Readable Sizes
Published: 2023-01-05 22:49:49

---
title: Human Readable Sizes
published: true
date: 2021-03-15 23:11:35 UTC
tags: 
canonical_url: https://brandonrozek.com/blog/human-readable-sizes/
---

When playing with large and small values, it is useful to convert them to a different unit in scientific notation. Let’s look at bytes.

```
size_categories = ["B", "KB", "MB", "GB", "TB"]

```

You can figure out how to best represent it by seeing how many of the base (in this case 1000) fits into the value. $$ category = \lfloor \frac{\log{(size\_{bytes})}}{\log{(base)}} \rfloor $$ You’ll want to make sure that you don’t overflow in the number of categories you have

```
category_num = min(category_num, len(size_categories))

```

You can then get its category representation by $$ size = \frac{size\_{bytes}}{(2^{category})} $$ We can wrap this all up info a nice python function

```
def humanReadableBytes(num_bytes: int) -> str:
    base = 1000
    
    # Zero Case
    if num_bytes == 0:
        return "0"
    
    size_categories = ["B", "KB", "MB", "GB", "TB"]
    category_num = int(math.log(num_bytes) / math.log(base))
    
    # Make sure it doesn't overflow
    category_num = min(category_num, len(size_categories) - 1)
    
    return "{:.2f} ".format(num_bytes / (base ** category_num)) + \
			size_categories[category_num]

```
Ansible EC2 dynamic inventories
Tags: ansible, aws, devops
Published: 2021-03-15 22:56:12

---
title:  Ansible EC2 dynamic inventories
published: true
description: 
tags: ansible, aws, devops
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqe46hpbsgphjz2srldt.png
---

One of the steps of creating and testing ansible roles is verifying that the role does what it was intended to do in real EC2 instances. 

To automate this workflow I usually launch 5 instances (`centOS 7`, `centOS 8`, `Ubuntu 18`, and `Ubuntu 20`) using python and boto3. 


### LAUNCH EC2

Here is a snippet of my script, you can find the complete script [here](https://gist.github.com/libert-xyz/e7e60c04f695ad9ca77de5ff61359bc2)

The script adds the tags `env: ansible` and `distro: AMI['distro']` to the instances. This comes handy for grouping the ansible dynamic inventories

```
    instances = ec2.create_instances(
        ImageId = AMIS[i]["ami"],
        MinCount = 1,
        MaxCount = 1,
        InstanceType = 't3.micro',
        KeyName = KEY,
        SecurityGroupIds=[SG],
        SubnetId=SUBNET,
        TagSpecifications=[
            {
                'ResourceType': 'instance',
                'Tags': [
                    {
                        'Key': 'Name',
                        'Value': AMIS[i]["os"]
                    },
                    {
                        'Key' : 'env',
                        'Value': 'ansible'
                    },
                                        {
                        'Key' : 'distro',
                        'Value': AMIS[i]["distro"]
                    }
                ]
            }
        ]
    )
```


### DYNAMIC INVENTORY

Once the instances are running instead of updating the `inventory` file manually we can use the ansible `plugin: aws_ec2` to make our inventory dynamic.

Here you can see the inventory file that groups our EC2 instances by their tags, in this case, `distro`.

The name of the file is important and needs to be `inventory_aws_ec2.yml`

```
plugin: aws_ec2
boto_profile: default
regions:
  - us-east-1
filters:
  tag:env:
    - ansible
keyed_groups:
  - key: tags.distro
    separator: ''

hostnames:
  - network-interface.association.public-ip

```
### OUTPUT

Notice that the output groups the distribution name with the public IP address assigned to the EC2 instance.

You can use this command to list the dynamic inventory:

`ansible-inventory -i inventory_aws_ec2.yml --list`

The output is going to look something like this:

```
{
    "aws_ec2": {
        "hosts": [
            "18.232.x.x",
            "34.228.x.x",
            "34.230.x.x",
            "54.226.x.x",
        ]
    },
    "centos": {
        "hosts": [
            "18.232.x.x",
            "34.228.x.x"
        ]
    },
    "ubuntu": {
        "hosts": [
            "54.226.x.x",
            "54.234.x.x"
        ]
    }
}

```


### RUN THE PLAYBOOK

And finally, you can run your playbook using the dynamic inventory:

`ansible-playbook -u ubuntu play.yml`


```
---
- hosts: ubuntu
  become: true
  roles:
    - ansible-role-update

```

Don't forget to terminate your instances after testing.
Promote your app
Tags: app
Published: 2021-03-15 22:43:55


If you're not new to the game of creating one way links to your app, you most likely already know that submissions are very important in helping you improve the popularity of you app. The submission, basically, is a way that you can establish one way links to your app without having to make large investments of money and time.
The way to be successful with this is to submit to as many directories as you can. However, the most challenging thing is creating a list of search engine friendly directories to submit to since there are so many to choose from. This is where a directory submission service plays a role. If you're new to the concept of submitting to directories, the first, thing you're probably wondering is, how does a service like this work?

Well, it's just as it sounds. A directory submission service has a team of people that'll do all the work for you. The only thing that you have to do is pay the fee and let them submit for you and develop quality links to your app. This type is service is an ideal solution if you're a very busy person; however, there are some things that you should keep in mind before you make a final decision on a service.

It's important that yourapp be submitted to the directories slowly, in order, to ensure that your one way links appear to be natural to the search engines. Search engine like for link popularity to be created naturally. Hence, if there are too many back links that appear in a short period of time, there's a good chance that they'll be ignored and then the money and time that you've spent is wasted.

Therefore, it's very important that a directory submission service, submit your app to directories over time, maybe a couple of weeks or maybe a few months, and not a few days. This way, when the search engines notice your app https://app-promotion.net/, it won't be ignored since your links appear to be built in a more natural manner and your link popularity of your app will be improved.

Another, issue to keep in mind is that the majority of directory submission service offers a guarantee on the number of successful listings. So you want to check out whether or not the service provides a kind of guarantee concerning the amount of successful listings that they'll secure for you. The reason, this is important is because the majority of the services will only guarantee that you app will be listed and not that they'll be accepted.

So, there's a possibility that you can be wasting your money and not get a results if you don't research this issue. Once you pick the right service, then it's your job to make sure that the service is improving the popularity of your links the right way.
Web Development Tools Part 1
Tags: html, css, webdev, beginners
Published: 2021-03-15 22:28:30

Hello Friends 👋🏾,
Today I want to share with you some helpful web development tools. I have been a 'web developer' for a few months now. I would not consider myself a pro but I am definitely not a beginner.

1. [Glitch.com](https://glitch.com) - 
Glitch is the perfect place to code and host a website for free. Glitch supports languages such as HTML, CSS, Javascript, Python, PHP and more. One of my personal favourite features in Glitch is how when coding, the program automatically finishes off tags and brackets for you. Glitch also has a fantastic format button to make your code look sexy. You even get a free subdomain (yourtitle.glitch.me).

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

2. [Eggradients](https://eggradients.com) - 
Eggradients is an awesome place to find beautiful gradients for backgrounds and texts. You can easily browse through hundreds of eggs and find the one you like. Then, you can press the 'copy CSS' button and paste it in to your file.

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

3. [Screely](https://screely.com) - 
Screely is a browser mockup tool. What you do is take a screenshot and then upload it to screely. it then takes your image and puts it inside a window. The thing that sets screely aside from other browser mockup tools is its customisability. You can change light and dark mode, resize, change window type and change the icons. Infact, all of the screenshots you see are made by screely.

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

Part Two coming soon

I hope you guys liked The Grapey Blog. If you did please share it to your friends and family. Have a great day!
Revisiting past projects
Published: 2021-03-15 22:11:34

Revisiting old projects is a great way to improve your skills and reaffirm and contribute to your overall progress as a coder.

A previously completed project that fulfilled its purpose at the time it was finished but has since remained untouched can be a goldmine for improvement. Re-assessing old code after some time has elapsed can help you see places where there is room for improvement, whether in structure, approach, or a different approach to a problem. 

It's easy to make mistakes early on as a beginner (because there ie still so much to learn), but these missteps are easy to spot later on when you have more experience. Taking a fresh look at an old project gives you an opportunity to update it with solutions and gain confidence in applying the coding concepts you employed as part of the fix.

As a developer, supplying and responding to constructive criticism - whether your own or others' - is a valuable ability, and practicing on your past projects is a great way to show you have the focus and self awareness to do so. 

By reworking old code that worked but wasn't ideal to be more compatible with your language (Swift should be Swifty, which means no reliance upon hard-coded values, etc) to be DRYer, more efficient, and better structured, you demonstrate an ability to look at your work objectively and see where it requires improvement. 

As developers we always strive to learn something new, and putting that knowledge into action by integrating it into an existing project is also a great way to demonstrate it. For example, I have reworked two projects from an original MVC (Model View Controller) design pattern into MVVM (Model View ViewModel) over the past few months, in order to cement MVVM into my mind and simply the two apps I worked on.

If you have old projects that are sitting around gathering dust, you may want to consider revisiting a few of them as well - they are a great opportunity to demonstrate your progress, practice self-critique, and put new knowledge into practice.
Flutter Web Quickstart
Tags: flutter, flutterweb
Published: 2021-03-17 12:00:52

---
title: Flutter Web Quickstart
published: true
date: 2021-03-15 22:00:00 UTC
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/108qyij6m224rk324q5c.png
tags: 
  - flutter
  - flutterweb
canonical_url: 'https://mukhtharcm.com/flutter-web-quickstart/'
---

Flutter Engage was an Awesome Event. It brought us a lot of News, but particularly interesting ones were the availability of All 6 Platforms on the Stable Channel. While I don’t think All of those are production-ready, It’s still amazing to see the ability to build to 6 platforms from **1** Codebase.

I had tried all of them except the ones in the Apple Ecosystem even before that. The cause of me not trying macOS or ios was the fact that I don’t own any of those 😆. So let’s get into the main content.

### Prerequisites

Before the Announcement of `Flutter 2.0` in **Flutter Engage** we had to switch to the `beta` channel to use Flutter Web. But Since the release of `Flutter 2.0`, the only thing we wanna do is to upgrade Flutter to the latest. Because Flutter WEB comes pre-enabled in the latest version of Flutter.

```
flutter upgrade
```

This should update our Flutter version to anything beyond `Flutter 2.0`. That means we have completed the minimum requirements for using Flutter Web.

### Creating Project

The next thing we are gonna do is to create a new Flutter project.

```
flutter create flutter_web_testing
```

This should create all the necessary things for our Flutter App. If you’re a keen observer, you’ll notice the difference between the current result of this command and the result before we upgrading Flutter.

Now we have a new `web` folder at the root of our project!😀

![There's a web folder after creating a new Project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0uy1rv1ixvuxc3zxcwpf.png)

### Running on Web

To run this project on Flutter web aka. Google Chrome, we have to first confirm it is shown in the Flutter devices menu. To find out, run `flutter devices`

![Flutter Devices result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2q9rgwffm4ri769htdyl.png)

As we can see the device `chrome`, we can assure that Flutter web is working Fine.

So to run our project on chrome, run

```
flutter run -d chrome
```

After some time, we should be able to see our Application running on Google Chrome.

![Flutter Default counter App Running on Google Chrome](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5smej6huh3mki81offux.png)

### Releasing

So after we have completed building our perfect web-app, we can continue to build it. To Build a Flutter web application, one has to run,

```
flutter build web

```

This command should make a release version of your Web app in `build/web` directory.

You can just upload this directory to any hosting services such as [Netlify](https://netlify.com) or [Github Pages](https://pages.github.com) for hosting them free of charge 😊.

As always, If you have any suggestions, or you found a mistake, please feel free to contact me through my [Twitter](https://twitter.com/mukhtharcm) 😊
100 Bytes Of Wisdom: Day 26
Tags: career, journey, advice
Published: 2021-03-15 21:41:16

---
title: 100 Bytes Of Wisdom: Day 26
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, journey, advice
//cover_image: https://direct_url_to_image.jpg
---

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


Novice managers and junior developers can fall into a trap that one on one catch ups just become an update on sprint work. This isn't the time for that - other ceremonies such as stand up exist for that. Your one on one time with your manager is your time to talk about your career, teamwork, soft skills, goals. You should be talking to your manager about all of these such that you become a better developer.

#Software #SoftwareDeveloper #SoftwareDeveloperAdvice #Programmer #ProgrammerAdvice #Coder #Code #CodeAdvice #wisdom #journey #learning #selfimprovement #education #learning #selfdevelopment #succes  #positivity #motivation #growth #career

Heads up: As with any terse bit of advice, there will be exceptions of course, and subtleties and nuance that can't possibly be captured in a Byte of Wisdom. This has been what I've experienced, I'd love to hear yours in the comments too!
Day 329 : Principle
Tags: hiphop, code, coding, lifelongdev
Published: 2021-03-15 21:35:55

_liner notes_:
- Saturday : Had a really good productive day. Got a good amount of coding on my side project in. Then had a really good radio show. It was a really good day. The recording of this week's show is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of Breonna Taylor posing with her certificate and flowers with the words Mar 13th 2021 Medal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ko91v9lwsltre54muoz.jpg)

- Sunday : Really chill day. Got the post radio show promo work done. Worked on my side project. Watched "The Walking Dead". Not bad.

- Professional : So, Daylight Savings happened over the weekend in the US. Got ready to do the livestream at the normal time, but the show wasn't set to go. Forgot that the UK doesn't change their time for another couple of weeks, so the show actually happened an hour later. Kind of through me off for the rest of the day. haha Did the show, had a couple of meetings, took a training and worked on my demo application. Pretty productive.

- Personal : Last night, I really went into the structure of the data that will be sent to the database and how to show them on the pages. Not so much coding, but more thinking things through and I think it's coming together. This is the biggest project I've done so far.

![Orange sand dunes in Huacachina, Peru at sunset](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfo6myy6khxt08gurix8.jpg)

Going to work on getting the information coming back from the database to display on some pages. There's a checklist where the people who are assigned to tasks can upload the files and that will check them off. Trying to make everything consistent and easy to follow is a core principle of what I'm looking to build. After working on that, I'm going to watch the new episode of "Attack on Titan". Such a good show!

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube eojLBrL5EHs %}
Django Tutorial Adventure Part 2
Published: 2021-03-15 21:30:00

What happens when you take a novice web developer and put him in front of an audience equipped with the [Django tutorial](https://docs.djangoproject.com/en/2.1/intro/tutorial01/) only? That's what we did at Python Frederick. The conversation and learning that resulted was awesome. Check out the video on YouTube to see what you can learn too!

{% youtube R733F2emni4 %}

Our presenter was [Patrick Pierson](https://twitter.com/pierson_pat/). Patrick works for IronNet Cybersecurity as a Senior Software Engineer. He uses Python daily to deploy AWS resources and test the IronNet platform. He is also the organizer of [AWS Frederick](https://www.meetup.com/AWS-Frederick-Meetup/).
Dabbling with React
Tags: react, portfolio
Published: 2021-03-15 20:54:09

## Ever notice that you can be in a bookstore, myriad books at your fingertips, and you'll still not know what to read next? 

I am currently grinding through some introductory React and, when tasked with creating my first portfolio-worthy project, decided to address a pervasive (at least per my bookworm friends) annoyance for those locked-down at home. What should I be reading? My fiancée struggles with this question. Heck, everyone I know struggles with it. 

When I came across an API for the New York Times' best-sellers list, I figured that it would be pretty useful to gain experience to honing-in on some of my React weak-points all while working with a third-party API and, perhaps somewhat idealistically, finally figuring out what to read on a Sunday afternoon!

## Judging a book by its cover?
[My Rendered App!](https://nyt-best-sellers.herokuapp.com/#)
{% github mgtz505/nyt_bestsellers %}

The Heroku-deployed first-pass at my app can be found at the link above, or you can head directly to my repo. 

I think from the onset I had a pretty clear vision of how I envisioned this app developing. I wanted my components to be simplistic and for my rendered results to be responsive to click events. I used CSS grid to display the results of my API pulls.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfzbrk12zacz4pko7szg.png)
 Each rendered image tag passes state to the ResultDetails component once a user clicks on a book cover. In the ResultDetails component, details about that selection render. 

## Writer's Block (of Code)

This wouldn't have been a true project experience if I hadn't gone through some issues along the way. An embarrassing (albeit, probably relatable) number of these mistakes were simple bugs, mostly those pesky misplaced curly brackets and clappers. A more daunting structural issues I had to tackle involved filtering my API data. It was easy enough to make a call to the API and pull a single category of data, say hardcover fiction, but being able to build a component that allowed the user to select the category gave me a little more hassle. I came across an [awesome tutorial](https://letsbuildui.dev/articles/building-a-dropdown-menu-component-with-react-hooks) that walked me through building an AirBnB-inspired drop down menu. After I had properly formatted my URL variations I was able to incorporate them into the dropdown.

## What about the second edition? 

It's clear to me that there's still work to be done on this application. I think that the UX could use some cleaning-up. The first addition I'd like to tackle for this project would be to incorporate a scroll animation upon a user clicking on one of the rendered book covers. I also think that dynamic stying would be a great addition to my CSS. Currently, a lot of my div containers flow into each other unless the browser is maximized. Hopefully this isn't a one-hit wonder and I can take another pass at this idea once I get some React Native abilities under my belt.
Yet another way to structure React Project.
Published: 2021-03-15 20:05:32

I adopted the structure [recommended by React](https://reactjs.org/docs/faq-structure.html#grouping-by-features-or-routes) and improved it a little bit. At least, I think it was improved :)

### The improved structure.
```
./src
├── App.css
├── App.js
├── App.test.js
├── README.md
├── apps
│   └── account
│       ├── components
│       │   ├── SignInDialog
│       │   │   └── index.js
│       │   ├── SignInForm
│       │   │   └── index.js
│       ├── hooks
│       │   └── useCreateUserWithEmailAndPassword.js
│       ├── pages
│       │   ├── SingIn
│       │   │   ├── index.js
│       │   │   └── styles.js
│       │   └── User
│       │       └── index.js
│       └── routes.js
├── index.js
└── routes.js
```

I am going to locate together pages that are related to some entities in a project.
In the example above:
* `account` - is the project entity
* `components` - components that are common for pages in this entity
* `hook` - custom hook for encapsulating some business logic
* `pages` - components that are used in React Router [Route](https://reactrouter.com/web/api/Route)
* `routes.js` - route config for `account` entity.

The `routes.js` in the root `./src` directory is the main URLs config containing all apps' routes. [Read more details about URL config](https://dev.to/ihormaslov/reverse-patterns-to-url-react-router-config-2gb8).

This structure will be easy to scale by adding new project entities in the `apps` directory.
The above structure does not represent the entire project structure. A project can contain a lot more directories for shared components, hooks, assets, and others.

Feedback is welcome!
Moving Tooltip on Mousemove
Tags: 100daysofcode, html, css, javascript
Published: 2021-03-15 19:45:13

the day 85 of challenge #100DaysOfCode

Moving Tooltip on Mousemove Using HTML5, CSS3 & JS

Demo : https://moving-toolip.netlify.app/

Code : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day85
Open-source TypeScript Tutorial
Tags: codenewbie, beginners, webdev, typescript
Published: 2021-03-15 19:30:37

[Here's a simple, Open-source repo to learn and practice TypeScript](https://github.com/shashankkatte/ts-playground). 

Instead of creating a long article on all the basics of TypeScript, I have created a [GitHub Repo](https://github.com/shashankkatte/ts-playground) with the combination of README and source files to help us learn and refresh our TypeScript skills right in our code editor.

It's a growing open-source repo, where you can collaborate and enhance it with your knowledge, practice code snippets, sample apps and best practices.

Beginners, experts and curious minds all are welcome.