teleren/devto huggingface dataset:
Weekly Challenge 133
Tags: perl, theweeklychallenge
Published: 2021-10-09 07:14:27

[Challenge](https://theweeklychallenge.org/blog/perl-weekly-challenge-133/), [My solution](https://github.com/manwar/perlweeklychallenge-club/tree/master/challenge-133/sgreen)

## TASK #1 › Integer Square Root

### Task

You are given a positive integer $N.

Write a script to calculate the [integer square root](https://en.wikipedia.org/wiki/Integer_square_root) of the given number.

Please avoid using built-in function.

### My solution

So that wikipedia page has enough formulas to get a math nerd very excited. For me it looks a little to complex to understand. So I took a very simple approach. Start from one, and keep counting upwards while the square of the next number is equal or less to the input value.

This seems reasonably efficient for what we are doing. Even finding the integer square root of 10,000,000,000,000,000 only takes a few seconds.

### Examples

```
$ ./ch-1.pl 10
3

$ ./ch-1.pl 27
5

$ ./ch-1.pl 85
9

$ ./ch-1.pl 101
10

```

## TASK #2 › Smith Numbers

### Task

Write a script to generate first 10 [Smith Numbers](https://en.wikipedia.org/wiki/Smith_number) in base 10.

### My solutions

This turned out to be a bit more complicated than I thought. I'm glad the Wikipedia page had examples, otherwise I would have submitted a faulty solution.

I have two functions for this task. The `_digit_sum` function takes a number, and calculates the sum of the digits. So 265 is 2 + 6 + 5 = 13. The second function is `_prime_factor_sum`. This gets the prime factors that make up the number. If the number is a prime, we return -1 to ensure equality is not matched. Once we have the primes we get the sum of the sum of the digits of the prime multipled by its factor. So 265 is 5¹ × 53¹. This results in 5 × 1 + (5 + 3) × 1 = 5 + 8 = 13.

Like with the first task, I have a counter that starts at 2 and keeps adding until I have found the first 10 Smith numbers. Once found, I display the numbers.

### Examples

```
$ ./ch-2.pl 
4, 22, 27, 58, 85, 94, 121, 166, 202, 265
```
Default Admin User | Laravel 8
Tags: laravel, webdev, html, php
Published: 2021-10-09 07:00:29

###Step-1: 
Update .env file with the below code. It will also be helpful to create .README file with the same info.

```
ADMIN_NAME=Admin
ADMIN_EMAIL=admin@domain.com
ADMIN_PASSWORD=p@55word
```

###Step-2: 
Create new file for e.g. **admin.php** under **app/config/** folder and assign credentials from **.env**. 

```
<?php
return [

    /*
    |--------------------------------------------------------------------------
    | Default admin user
    |--------------------------------------------------------------------------
    |
    | Default user will be created at project installation/deployment
    |
    */

    'admin_name' => env('ADMIN_NAME', ''),
    'admin_email' => env('ADMIN_EMAIL', ''),
    'admin_password' =>env('ADMIN_PASSWORD', '')
    ];
```

###Step-3: 
Create new seeder file: 
`php artisan make:seeder AdminUserSeeder`

and update the seeder file with the structure of your users table, 

```

<?php
use Illuminate\Database\Seeder;
use App\Models\User;

class AdminUserSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        if(config('admin.admin_name')) {
            User::firstOrCreate(
                ['email' => config('admin.admin_email')], [
                    'name' => config('admin.admin_name'),
                    'password' => 
                     bcrypt(config('admin.admin_password')),
                ]
            );
        }
    }
}

```
*Note:* Don't forget to include **User** model on top. 

###Step-4: 
Add below command on database\seeders\DatabaseSeeder.php

```
public function run()
{
    $this->call(AdminUserSeeder::class);
}
```

###Step-5: 
Final step, You'll just need to run `php artisan db:seed --class=AdminUserSeeder` or `php artisan db:seed --force`artisan command on the app deployment.
Set UP Tor as local proxy
Published: 2021-10-09 06:59:45

sudo apt install tor

Apt through Tor
Going off of the apt-transport-tor Github README, to get apt to work through Tor:

Back up /etc/apt/sources.list and all .list files in /etc/apt/sources.list.d
Open a terminal by pressing Ctrl+Alt+T
Run the following:

sudo -i
apt update
apt install apt-transport-tor
sed -i 's/ http/ tor+http/g' /etc/apt/sources.list /etc/apt/sources.list.d/*.list
apt update
exit
Make sure to fix any error messages that appear (if needed, restore the files you backed up)

Note: Be aware that some programs, like Google Chrome, will modify their .list file, so those programs may automatically switch back to trying to connect directly when checking for updates instead of going through Tor.


Tor is running when you try to connect using it. You can run sudo netstat -plnt | fgrep :9050 and see if you get a line saying tor is running. 

ss -nlt

test connection
wget -qO - https://api.ipify.org; echo
147.232.135.100
torsocks wget -qO - https://api.ipify.org; echo
162.247.74.200

https://linuxconfig.org/install-tor-proxy-on-ubuntu-20-04-linux
Challenge of day #21 - Split a String in Balanced Strings
Tags: beginners, programming, tutorial, codenewbie
Published: 2021-10-09 06:53:31

Hello!

It's day 21 of [my coding diary](https://pankajtanwar.in). Yesterday, [vercel](https://vercel.com/) was having some issues with their build system. Well, it's up and working smooth now. Let's directly move to the problem of the day.

**Problem of the day** - [Split a String in Balanced Strings](https://leetcode.com/problems/split-a-string-in-balanced-strings/)

**Tag** - Easy 

**Balanced** strings are those that have an equal quantity of `'L'` and `'R'` characters.

Given a **balanced** string `s`, split it in the maximum amount of balanced strings.

Return _the maximum amount of split **balanced** strings_.

**Example 1:**

**Input:** s = "RLRRLLRLRL"
**Output:** 4

<hr/>

This is the worst problem statement, I have ever seen. It's really confusing man, all the example test cases are not clear. I spent time unnecessarily, building some dynamic programming logic for this dumb question.

So, the problem says, to find the maximum amount of split balanced strings. It does not clearly talk about the order of `L` & `R`. 

Mentioning `splitting gives an idea of considering one sub-string having multiple balanced sub-strings as one only.  but still, initially, I got confused with logic for considering all corner cases.

It turned out to be the simplest problem with just tracking count of `L` & `R`, that's it.

**Here is my solution**

```cpp
class Solution {
public:
    int balancedStringSplit(string s) {
        int res = 0;
        int balance = 0;
        
        for(int i=0;i<s.length();i++) {
            balance += s[i] == 'L' ? 1 : -1;
            if(balance == 0) res++;
        }
        return res;
    }
};
```

Not to mention, run time 0ms and faster than 100%. Honestly, I am not happy. Such uncleared problems make me less excited about solving more problems.

Well, I will try some good medium problems tomorrow!

<hr/>

Thanks for being part of my daily-code-workout journey. As always, if you have any thoughts about anything shared above, don't hesitate to [reach out](https://twitter.com/the2ndfloorguy).

<hr/>

You might like previous editions of [my coding diary](https://pankajtanwar.in/coding-diary)

- [Day #20 - To Lower Case.](https://pankajtanwar.in/code/to-lower-case/)
- [Day #19 - N-Repeated Element in Size 2N Array.](https://pankajtanwar.in/code/n-repeated-element-in-size-2n-array/)
- [Day #18 - Count Negative Numbers in a Sorted Matrix.](https://pankajtanwar.in/code/count-negative-numbers-in-a-sorted-matrix/)
- [Day #17 - Sum of Unique Elements.](https://pankajtanwar.in/code/sum-of-unique-elements/)
- [Day #16 - Best Time to Buy and Sell Stock.](https://pankajtanwar.in/code/best-time-to-buy-and-sell-stock/)
- [Day #15 - Count Number of Pairs With Absolute Difference K.](https://pankajtanwar.in/code/count-number-of-pairs-with-absolute-difference-k/)
- [Day #14 - Minimum Number of Operations to Move All Balls to Each Box.](https://pankajtanwar.in/code/minimum-number-of-operations-to-move-all-balls-to-each-box/)
My First Flutter Application
Tags: flutter, beginners
Published: 2021-10-09 05:51:29

Continuing with my love for development, I have decided to learn flutter. I have also started building apps and here's first of the few apps I have built :

{% youtube MRgsh0RlJi8 %}


GitHub repo link [here](https://github.com/tannudaral/FlutterTask2.git) !

"Flutter is a free and open-source mobile UI framework created by Google and released in May 2017. In a few words, it allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create two different apps (for iOS and Android).

Flutter consists of two important parts:

An SDK (Software Development Kit): A collection of tools that are going to help you develop your applications. This includes tools to compile your code into native machine code (code for iOS and Android).
A Framework (UI Library based on widgets): A collection of reusable UI elements (buttons, text inputs, sliders, and so on) that you can personalize for your own needs."

<hr>

From what I have heard from people in tech, flutter documentation is one of the best resource to learn [flutter](https://flutter.dev/docs). I personally have been referring to it whenever I get stuck and I have mostly been successful in debugging the code till now, hope this keep going haha.

<hr>

From next week onwards, I'll be writing blogs about different data structures that I'll be learning each week and some development related blogs, here and there.
Elixir mix + fzf = 💜🧪
Tags: elixir, terminal, bash, fzf
Published: 2021-10-09 06:49:12

[![asciicast](https://asciinema.org/a/441041.svg)](https://asciinema.org/a/441041) 

[`fzf`](https://github.com/junegunn/fzf) is such a powerful tool when it comes to make your terminal experiences so much better. One thing I like about it is how easy it is to extend it's features and one could make auto completions [work for any command with bare minimum code](https://github.com/junegunn/fzf/#custom-fuzzy-completion).

For today's snippet I'd like to share, here's how to integrate Elixir's build tool `mix` with it. Just paste it on your friendly neighborhood dotfiles (.bashrc, .zshrc...) and git it a go by writting `mix **` then hitting `<Tab>`.

```sh
_fzf_complete_mix() {
  _fzf_complete --reverse -- "$@" < <(
    mix help | \
        grep "^mix [a-zA-Z]" --color=never | \
        sed "s/^[^ ]* //" | \
        sed "s/#.*//" 
  )
}

_fzf_complete_mix_post() {
  awk '{print $NF}'
}
```
Series Intro: Data Visualization With Svelte and D3
Tags: svelte, javascript, datavisualization
Published: 2021-10-09 06:41:32

Curran Kelleher's  [Data Visualization With React and D3 ](https://www.youtube.com/watch?v=2LhoCfjm8R4) is probably the most comprehensive course on D3 on the Internet. For some time I have been curious about  [D3](https://d3js.org/) and data visualization in general. While I have worked with Python libraries like  [Matplotlib](https://matplotlib.org/) ,  [Seaborn](https://seaborn.pydata.org/)  and [Plotly](https://plotly.com/)  and they are fantastic for most kinds of exploratory and scientifc plots they have limitations on the web particularly in terms of interactivity. D3, for the uinitiated is the library which powers the bulk of all the interactive and SVG based plots on the web. It also acts as underlying low-level library for a lot of higher level libraries including Vega(For a more comprehensive list look  [here](https://github.com/wbkd/awesome-d3#charts) ).

In the series Curran uses D3 with React. However I personally find React impenetrable magic. 

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1633413509758/45ycwVDrS.png)
Its also not very convenient to use with D3 as both access the DOM and accessing DOM directly in React is always a risky business. I found  [Svelte's ](https://svelte.dev/) style of thinking really refreshing and intuitive. Svelte is a radical new approach to building user interfaces. Its essentially a compiler which takes `.svelte` files , which are components including HTML, CSS and JS required for the component to run and turns them into fast, lighweight code which can be executed in the browser.

So I am using Svelte instead of React for building the components. Also this series is not a tutorial on either D3 or Svelte. At best this can be thought of as course notes for my self to follow along with Curran's course. The only reason this is a series is because Hashnode allows to organize as series. 
As the series progress and more articles get added I'll add them to the end of this post.

P.S. I am not very good at either D3 and Svelte (Coming to think of it not very good at JS either 😢). The code will probably be full of errors, atrocious bad practices and horrible inefficiencies. Be kind enough to point out in the comments if you notice any such in a constructive manner.

That's all now. Hope you have a good day!
How to Easily Add Google Map to Your Webpage
Tags: javascript, react, codenewbie, node
Published: 2021-10-09 06:39:03

On most of the company websites, you will find locations or contacts page that displays that company location in that country or state in a google map along with the company address.

This is a pretty common requirement even for food or hotel business-related websites.

So in this article, we will see how to add a google map with the preferred location on your website.

## Initial Setup

Create a new folder with the name `google-map-location-demo` and create an `index.html` file inside it. Now, type ! (exclamation mark) in the file and press tab, so the default HTML code will automatically be added by emmet.

If you're not aware of emmet and its useful shortcuts, check out my [this article](https://dev.to/myogeshchavan97/speed-up-your-coding-using-emmet-a-really-powerful-tool-46nj).

![emmet_trick.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1633691524400/HIU4-_tKi.gif)

You can change the title tag content as per your choice.

## Displaying Google Map Location on Webpage

For this demo, we will show the Eiffel tower's location on the map.

So follow the below steps.

- Navigate to [https://maps.google.com/](https://maps.google.com/) and search for Eiffel Tower in the search box
- Now, click on the `Share` icon and select the `Embed a map` option
- Click on the `COPY HTML` button to copy the iframe tag into your clipboard
- Now, open the `index.html` file, and inside the body tag, add the copied content

![embed_map.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1633699007746/uxFcrQaMB.gif)

- Now, If you open the file in the browser, you will see the map displayed

![open_live.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1633699354689/FKFZmwUDO.gif)

### Thanks for reading!

That's it about this short tutorial.

Check out my recently published [Mastering Redux](https://master-redux.yogeshchavan.dev/) course.

In this course, you will build 3 apps along with a food ordering app and you'll learn:

* Basic and advanced Redux
* How to manage the complex state of array and objects
* How to use multiple reducers to manage complex redux state
* How to debug Redux application
* How to use Redux in React using react-redux library to make your app reactive.
* How to use redux-thunk library to handle async API calls and much more

and then finally we'll build a complete [food ordering app](https://www.youtube.com/watch?v=2zaPDfCKAvM) from scratch with stripe integration for accepting payments and deploy it to the production.

[<img src="https://gist.github.com/myogeshchavan97/98ae4f4ead57fde8d47fcf7641220b72/raw/c3e4265df4396d639a7938a83bffd570130483b1/banner.jpg">](https://bit.ly/3w0DGum)

**Want to stay up to date with regular content regarding JavaScript, React, Node.js? [Follow me on LinkedIn](https://www.linkedin.com/in/yogesh-chavan97/).**

[<img src="https://cdn.buymeacoffee.com/buttons/default-yellow.png" >](https://www.buymeacoffee.com/myogeshchavan97)
The Intricacies of Remote Repos
Tags: osd600
Published: 2021-10-09 06:29:54

This week, it was time to work on another classmate's repo and contribute to their SSG, with more knowledge on how remote repos work.

I got the pleasure to work on an [SSG](https://github.com/AmasiaNalbandian/static-site-generator) created by Amasia Nalbandian (check her [GitHub](https://github.com/AmasiaNalbandian), too!). It wasn't by pure coincidence. After mentioning that nobody worked on my project a few weeks ago on the Slack channel for the OSD600/DPS909 students, Amasia decided to offer her help for the next time. As a way to thank her, I decided to work on hers. You can view the filed issue on her project [here](https://github.com/AmasiaNalbandian/static-site-generator/issues/20).

## Setting the project

This week, cloning the repo went a little bit differently. 

Normally, I would forked the project so I can have read and write access to the remote repo, and then cloned it into my local environment and start working with it.

However, our professor taught us about the concept of remote repos, and the intricacies behind it. He told us that, when forking a repo and cloning it locally, we have a reference to that remote repo, usually named `origin`. He also recommended that, if we forked the project, we should add another remote reference to the original remote repo, and call it `upstream`, for convenience.

Thus, I ended up having two remote repo references, `origin`, referencing mine, and `upstream`, referencing Amasia's GitHub repo.

## The New Feature

This week, the feature to add was support for accepting configuration files, formatted as JSONs. These configuration files would accept some options that the command line interface also supports, such as `input`, `lang`, etc.

The first step was to figure out where to put the new feature. I asked Amasia some guidance, and she recommended me where to start reading the configuration file.

After that, I added the code I needed to read the file. It was very straightforward, since the project is in JavaScript, and I could use the integrated JSON parser to deal with the parsing of the file.

After finishing the feature, I committed the changes, push them to my fork, and submitted my [PR](https://github.com/AmasiaNalbandian/static-site-generator/pull/21).

## Conclusion

While I didn't make use of the `upstream` remote reference in this lab, there are real purposes for this, such as testing another person's changes without merging.

Amasia has not accepted the changes yet. I will follow up and update this post when she does.
Search for finding my portfolio website style
Tags: portfolio
Published: 2021-10-09 05:56:41

Here I'm trying to help folks like me who still trying to select the perfect layout for the portfolio website. Let's say it all depends on how you want the viewer to see you.



I guess if you want to be seen as someone who took care of their time and is always busy doing new stuff, maybe it is good to keep the website simple.

This can be a good example: 

https://www.suchipi.com/



But if you want to know as a creative person, you need to go crazy, I don't suggest using already made templates, but try to get inspired from them and jump into Figma and show yourself.

I can see really cool templates available on colorlib to get inspired with.

Check this link

https://colorlib.com/wp/cat/portfolio/



Hope it was useful.
3 Sites that make CSS easy!
Tags: webdev, productivity, css, uiweekly
Published: 2021-10-09 05:32:22

_Save for later._
<br/>

###[csslayout.io](https://csslayout.io/)
>Popular layouts and patterns made with CSS.

![layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yasyhygpbccfrwr1who.png)


###<br/>[purecss.io](https://purecss.io/)
>Set of small, responsive CSS modules that you can use in every web project.

![pure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8rknaz74norfjyj9dp0y.png)


###<br/>[griddy.io](https://griddy.io/)
>Learn the CSS Grid!

![griddy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/90n38xpu8ilmxr2j9bu4.png)

<br/>
Thank you for reading. Please leave a like if you enjoyed the post and follow for upcoming articles!

<br/>P.S. Want the next post to be something specific? Do let me know in the comments.

🤘🏻
<br/>
Connect with me : [Github](https://github.com/deyRupak)
Support me : [Buy me a coffee!](https://paypal.me/deyrdx?locale.x=en_GB)
How to use Python to generate a Captcha | Source Codes Breakdown
Tags: python, codenewbie, 100daysofcode, codereview
Published: 2021-10-09 05:12:54

✨New video up✨ In this video, we will use Python language to generate a Captcha. 🤓 Now let's breakdown the codes 😎


## What is Captcha?
A CAPTCHA is a type of challenge–response test used in computing to determine whether or not the user is human. 


## How do we use codes to generate a Captcha?

Watch below 5 minutes video for codes breakdown:

{% youtube DoB5my7Ar8U %}
See below for source codes:
```python
#Import the following module
from captcha.image import ImageCaptcha

#Create an image
image = ImageCaptcha(width=500, height=200)

#The text you want to use for captcha
captcha_text = "happycodingwithpython"

#Generate the captcha image of the given text
data = image.generate(captcha_text)

#Output the image with given name
image.write(captcha_text, "CAPTCHA.png")
```
Here is the Replit File: 
https://replit.com/@CoderOlivia/Generate-a-captcha


## ❤️ Like, Share, Comment ❤️ Subscribe to my YouTube channel for More 🤟
=============================================
🔗 Social Media 🔗 
🎬Vlog YouTube Channel: https://www.youtube.com/channel/UC16VVd4AZ8o-xcVz9nPQkbQ
🎬Coding YouTube Channel: https://www.youtube.com/channel/UCVsTRoPxG_YDr6ajy7i7CTw
📸 eat_with_oliviazhou Instagram: https://www.instagram.com/eat_with_oliviazhou/
📸 travel_with_oliviazhou Instagram: https://www.instagram.com/travel_with_oliviazhou/
📸 code_with_oliviazhou Instagram: https://www.instagram.com/code_with_oliviazhou/
📱 Twitter: https://twitter.com/OliviaZ26244128
[Free Workshop] Build Clubhouse like app for iOS 
Tags: ios, programming, hacktoberfest, tutorial
Published: 2021-10-09 05:04:50

Join 100ms October developer meet-up where we cover - Building a Audio app like Clubhouse for iOS using 100ms SDK on October 13th, 2021 | 9:00 PM IST 

Join Now - https://community.100ms.live/developer-community-meetup-october

Workshop Host - Dmitry Fedoseyev & Yogesh Singh, iOS developers at 100ms

Agenda - 
-> The killer idea behind Clubhouse and its working
-> Setting up & creating roles for the app.
-> Understanding terminology - HMS SDK, rooms, etc.
-> Integrating the HMS SDK to create an audio room from scratch
-> QnA with 100ms team