teleren/devto huggingface dataset:
Preview of My New Portfolio Page
Published: 2019-08-10 17:21:48

For accountability purposes, I am going to post about my progress on my portfolio page. I am not expecting nor want advice on how to improve it. Though if you do feel obligated to comment on something that I didn't think about I may take that advice.
 
##Home
I started on a portfolio page about a year ago but I didn't know how to make it my portfolio page. It had my old headshot on it and I am glad that mess got updated.

I used the design from my old website (this was before the controversial Squarespace site that this site is replacing.) I decided my home page would be a hero page.

This site is by no means done and could take me a few weeks to do it. Here are more screenshots and descriptions of where I want them to go.

##About
![](https://thepracticaldev.s3.amazonaws.com/i/x8rn290tsd2tld2snhhw.png)

The about page is simple. I don't expect anything fancy except links to be added to it. I will be linking my school even though it closed (unless it's a dead link by now) along with Philly Tech Sistas, my home Toastmasters club, among others.

![](https://thepracticaldev.s3.amazonaws.com/i/iq14u7dwvmbwaun661gb.png)

It is also the only page right now that is responsive. I plan for all pages to be responsive, this one just easier to make responsive.

##Resume
This page is very much under construction and will be going last being built. I am thinking of linking my PDF of my resume once it gets improved. Right now it's a white page and screen capping a blank page is not necessary.

##Profile
![](https://thepracticaldev.s3.amazonaws.com/i/yblleailm7vz55xqdrd6.png)

I am trying to replicate what I did on Squarespace. I might have to implement bootstrap for this part. So far it looks like a hot mess and I look forward to having it look a lot better. What I want it to look like is below.

![](https://thepracticaldev.s3.amazonaws.com/i/kl68idkx9nwptrst6pmp.png)

##Contact
![](https://thepracticaldev.s3.amazonaws.com/i/7rbrzh7qq2by53lkaslb.png)

I want this page to be simple. Not as simple as this. I do want my twitter and Instagram feed on the page and I also understand if it's not professional if I include it. I might put the font awesome as a consistent footer. 

##How I am Building It?

Right now, I am using simple HTML and CSS since I am working off files from a year ago. This is so I can have a good structure to go off of. However, I plan to switch to GatsbyJS since I am realizing that I have a component as a header and footer. I have created the Gatsby page so I can move some of the code in there.

![](https://thepracticaldev.s3.amazonaws.com/i/xpys2a7i9dof556vt8wc.png)
String based question.
Tags: replit, java
Published: 2019-08-10 16:53:25

Question  :- Encoding Three Strings: Anand was assigned the task of coming up with an encoding mechanism for any  given three strings.He has come up with the following plan.
Step ONE :- Given any three strings,break each string into 3 parts each.
For example- if the three strings are below:
Input 1: “John”
Input 2: “Johny”
Input 3 : “Janardhan”
“John” should be split into”J”,”oh”,”n,” as the FRONT ,MIDDLE and END part repectivly.
“Johny” should be spilt into “jo”,” h”, “ny” as the FRONT ,MIDDLE and END respectively.
“Janardhan” should be split into “Jan” ,” ard” ,”han” as the FRONT ,MIDDLE and END part respectively.
i.e. If the no. of characters in the string are in multiples of 3 ,then each split –part will contain equal no of characters , as seen in the example of “Janadhan”.
If the no. of characters in the string are NOT in multiples of 3 ,and  if there is one character more than multiple of 3, then the middle part will get the extra character ,as seen in the example of “john”.
If the no. of characters in the string are Not in multiples of 3 and if there are two characters more than multiple of 3, then the FRONT and END parts will get one extra character each, as seen in the example of “Johny”.
Step  TWO : Concatenate (join) the FRONT  ,MIDDLE and END parts of the string  as per the below specified concatenation – rule to from three Output strings.
Output 1: FRONT part of input 1 + MIDDLE part of input 2 +END part of input 3
Output2:- MIDDLE part of input1+ END part of input2 + FRONT part of input3
Output3:  END part of the input1+FRONT part of input2 +MIDDLE part of input3
For example , for the above example input strings:
Output1 = “J” +”h”+han”=”jhhan”
Output2 =”oh”+”ny”+”Jan”=”ohnyjan”
Output3=”n”+Jo”+ard”+=“njoard”

Step THREE :-
Process the resulting output strings based on the output-processing rule .After the above two steps, we will now  have three output string. Further processing  is required only for the third output string as per below rule-
“Toggle the case of each character in the string “ ,i.e. in the third output string, all lower-case characters should be made upper-case and vice versa.
For example  , for the above example strings ,output3 is “nJoard”, so after applying the toggle rule. Output3 should become “NjOARD”.

Final Result – The three output strings  after applying the above three steps  i.e. for theabove example .
Output1 =”Jnhan”
Output2=”ohnyJan’
Output3 = “NJOARD”
Help Anand to write a program that would do the above.



{% replit @VikasTomar/Important-Question-for-amcat %}
Storing an array of elements using the useRef hook
Tags: reactrefstutorial, react, javascript
Published: 2020-07-26 15:23:17

---
title: Storing an array of elements using the useRef hook
published: true
date: 2019-08-10 15:59:51 UTC
tags: reactrefstutorial,react,javascript,reactjs
canonical_url: https://medium.com/@mattclaffey/adding-react-refs-to-an-array-of-items-96e9a12ab40c
---

Storing an array of elements using the useRef hook
React refs are useful for when we have to set focus to an element after the user has interacted with it. In my case, I needed to use refs for setting focus to the correct accordion item when I selected/used arrow keys.

The problems I faced while doing this was a mixture of having issues with passing down refs into my components but also having one ref that represented an array of items just as you would in a none react app using document.querySelectorAll().

## The problem

When there is only one ref we tend to simply assign our ref value with the variable that creates the useRef function.

```javascript
const item = useRef(null)

<div ref={item}/>
```
In my use case I could not simply assign my ref to the element because the ref was being assigned within a map during the render. This would mean that the very last item in the array would be the element assigned to item.current.

## The solution

The ref prop gives us the element as a parameter which allows us to assign the element however we want. In the example, we push that element into the itemsEls.current array so it can be used further down the line.

```javascript
const itemEls = useRef(new Array())

{items.map(item => (
 <p key={item} ref={(element) => itemEls.current.push(element)}>{item}</p>
))
```

Note: The same approach applies for an object with ids as a key.

```javascript
const itemEls = useRef({})

{items.map((item, index)) => (
 <p key={item} ref={(element) => itemEls.current[index] = element}>{item}</p>
))
```

And thats it! We can now store an array of refs in one variable to use when the use case crops up.

Note: this example of assigning a ref to a p tag is purely for simplicity of the code. A good use case for this is when building things that need focus applying to them when the user interacts with the component like an Accordion/Tabs/Modal.

```javascript
import React, { useRef, useEffect } from 'react'
export const Component = ({ items }) => {
  const itemsEls = useRef(new Array())
  
  return (
    {items.map((item) => {
      const getRef = (element) => (itemsEls.current.push(element))
      return <p key={getRef}>{item}</p>
    })}
  )
}
```

Thank you for reading.
Introducing `Rocketman`, a gem to help you do Pub/Sub code in Pure Ruby. No Rails needed!
Tags: ruby, rails, showdev
Published: 2019-08-10 15:52:55

Publishing my second Ruby gem here with the community, introducing `Rocketman`!

## Description

Rocketman is a gem that introduces Pub-Sub mechanism within Ruby code.

As with all Pub-Sub mechanism, this greatly decouples your upstream producer and downstream consumer, allowing for scalability, and easier refactor when you decide to move Pub-Sub to a separate service.

Rocketman also works without Rails.

{% github https://github.com/edisonywh/rocketman %}

## Usage

emitting events look as easy as this:

```ruby
emit :hello, payload: {"one" => 1, "two" => 2}
```

and listening for events look like this:
```ruby
on_event :hello do |payload|
  puts payload
end
```

There’s more information on the `Usage` section and `Roadmap` if you’re interested in the project, otherwise, feel free to comment here too!
Google sheets to json (Open Source)
Tags: vue, node, api, javascript
Published: 2019-08-10 15:30:35

---
title: Google sheets to json (Open Source)
published: true
description: GSON converts your sheets to json, without storing anything
tags: vuejs, nodejs, api, Javascript
---

I wanted a quick way to use Google sheets as api, since marketing teams love to work on Excel.

[Gson](https://gson.netlify.com/) is open source tool, just paste your csv url and get a api in no time, I am not storing the data, not storing your CSV urls, just parsing it and responding it back in a different format, the backend script is hosted publicly on now.sh

[Source code](https://github.com/fayazara/Gson)

##Why I built this?
I was looking for a service which did the same, but didn't want them to use any of my data. I couldn't find anything hence built my own
detecting Python version in a script
Tags: python
Published: 2019-08-10 15:26:53

---
title: detecting Python version in a script
published: true
description: 
tags: python
---

Recently I needed to know if a program I was running was using Python2 or Python3.

There are a couple of ways to do this inside the Python interpreter.

The most obscure way (IMO) is probably the most reliable

```python
import sys
major_version = sys.version_info[0]
print(major_version)
```

This method is reliable but how did I know to look at position 0 in sys.version_info? That looks odd and feels like magic.

In Python 2.6 sys.version_info was a tuple. It was not a class so sys.version_info[0] is the major number (aka 2). In Python 2.7 and up the sys.version_info became effectively a class and this type of code became valid

```python
print(sys.version_info.major)
```

That code above will fail in an older Python so the safe way to check your version is the ugly way :(
Bottom Sticky Music PlayerJavaScript
Tags: javascript
Published: 2019-08-10 15:01:37

The Bottom Sticky Music Player JavaScript is providing a JavaScript file and a CSS file using which you can easily create your own music player. Get the source code from this GitHub page - https://github.com/CodeSpeedy/Bottom-Sticky-Music-Player---JavaScript-and-CSS.Learn how to use it from https://www.codespeedy.com/bottom-sticky-music-player-javascript-css/ .
Using this item is very easy. All you need is just to add the JavaScrip file and put the HTMLcode.
TPP Topic 15: Estimating
Tags: thepragmaticprogrammer, book, programming, education
Published: 2019-08-10 14:46:37

---
categories:
- The Pragmatic Programmer
published: true
tags:
- The Pragmatic Programmer
- book
- programming
- education
title: 'TPP Topic 15: Estimating'
---

> This post originally appeared on [steadbytes.com](https://steadbytes.com/blog/the-pragmatic-programmer-20th/topic-15-challenges/) 
<div></div>
> See the [first post](https://dev.to/steadbytes/the-pragmatic-programmer-20th-anniversary-edition-series-1e2l) in The Pragmatic Programmer 20th Anniversary Edition series for an introduction.

## Exercise 9

> You are asked "Which has a higher bandwidth: a 1Gbps net connection or a person walking between two computers with a full 1TB of storage device in their pocket?" What constraints will you put on your answer to ensure that the scope of your response is correct? (For example, you might say that the time taken to access the storage device is ignored.)

Assume the following are _known_ quantities:

- Distance between the two computers
- Walking speed of the person

Assume the following are _true_:

- Time taken to set up the storage device such that data can be accessed is negligible
- The full 1Gbps bandwidth of the network connection is utilised _constantly_
- Time overhead _storing_ the data is approximately equal to the time overhead of _sending_ data over
  the network

## Exercise 10

> So, which has the higher bandwidth?

1TB = 8x10<sup>12</sup>b
1Gbps = 10<sup>9</sup>bps

Time to transfer 1TB at 1Gbps:
8\*10<sup>12</sup> / 10<sup>9</sup> = 8000s = **~2.2hrs**

Assuming an average walking speed of 5.4Km/hr (expertly sourced from [Wikipedia](https://en.wikipedia.org/wiki/Walking#Difference_from_running)) the person will have a higher bandwidth **up to a distance of 5.4\*2.2 = 11.88Km** - after which the network connection has the higher bandwidth.
Using grep and history command to find previous commands in Linux
Tags: linux, productivity, webdev, beginners
Published: 2019-08-10 14:23:18

You input command in your linux terminal which is very long and hard to remember. It is needed to input the command again to the terminal. You find it hard to search for the command that is needed. You keep pressing up arrow again and again until the required command is found. Time is wasted during this process.

This is where `history` command comes in. Go to your linux terminal and type the command history. You will find the list of commands you previously used like this.
![Use of history command]
(https://i.imgur.com/NTRz40S.png)

In the above image you can see all the previous commands you have used along with their respective numbers. Now let's assume you have to use the command `git clone https://github.com/asimdahall/wethanks/` which is number `56`. Now you can execute the command by typing ```
asims-MacBook-Pro:~ !56
```
which will execute the command on number 56.
Now let'say we have to search the previous command that we have used. For that, we can combine grep with the history command. Let's take a case here. I have to search for the command 
```xcrun simctl shutdown all ``` which I have used before but I don't remember the full command and only remember `xcrun`. So for searching the command, we can combine the `history` and `grep` command like this:
```
asims-MacBook-Pro:~ asim$ history|grep xcrun
```
after that you will get the following output
```
  422  xcrun simctl shutdown all 
  452  xcrun simctl shutdown all 
  454  xcrun simctl shutdown all 
  502  history|grep xcrun

```

you get all the commands where `xcrun` command is used with their respective numbers. Now you can execute the command like this:
```
asims-MacBook-Pro:~ asim$ !422
``` 
which will then execute the needed command.

 I am sorry for the bad grammar. Feedbacks and suggestions are kindly welcome. Thank you. 


You can follow me on [Twitter](https://twitter.com/asimdahall)
Playing youtube videos on smplayer through smtube using the mpv player
Tags: video, linux, slackel
Published: 2019-08-10 14:15:54

* Playing youtube videos on smplayer through smtube using the mpv player

I have tried vlc, mplayer, smplayer tried to play youtube videos in ubuntu, slackel and other distributions as well. 
But upon moving the time slider to a new location within the video Smplayer crashes. Log file message reads...

MPlayer interrupted by signal 11 in module: seek
ID_SIGNAL=11

I found that smtube and smplayer using mpv media player can play youtube videos without crashed. 

In slackel 7.2 can install smplayer, mpv and latest smtube plus libass which is a dependency.

        sudo slapt-get -u
        sudo slapt-get -i smplayer libass mpv smtube

then run smplayer and check from options in menus that mpv player is default player.
Selenium WebDriver wrapper Framework in Java, which supports Automation of most of the web browsers.
Tags: java, selenium, testing
Published: 2019-08-10 13:58:33

## :question: What is this Framework about?

This is a Selenium WebDriver wrapper Framework which enables robust, maintainable and easy to write test scripting. _**It supports latest Selenium WebDriver 4.0 (Alpha)**_ and is ready for main Selenium upgrade.

## :bulb: What features does this framework offer?

Nobody uses anything without knowing what it offers. Some of the key features which this framework offers are as follows:

- Latest Selenium WebDriver 4.0 (Alpha 2).
- Supports Chrome, Safari, Firefox, IE and Edge
- Supports execution on BrowserStack and Selenium Grid.
- On-demand highlighting of Elements.
- On-demand delay of test execution by allowing predefined delays.
- On-demand headless mode.
- Supports all major test frameworks like TestNG, JUnit, Cucumber, etc.
- Supports logging of events to Log file.
- Extensible framework which allows extending the framework as required.
- Parallel execution of tests on different browsers.
- Inline verification of elements.

Checkout the following link for more details and examples as how to use the framework and write tests:
https://github.com/WasiqB/coteafs-selenium
Slackel Hellenic Linux Distribution
Tags: slackel, linux, distribution
Published: 2019-08-10 13:39:56

Slackel 1.0 version was released on 2005 and it was a KDE edition. It was based on slackware 10.2 stable. It was reconfigured with greek language and applications i needed. Then i created a live iso with linux-live scripts 5.1.8 from slax. So i could install it without having to configure it again from the beginning.

Slackel is now based on Slackware current tree and also use Salix tools for maintaining the system.

Slackel can be used as a testing environment where new features can be tested which later can be used when current tree will become the next stable release of slackware.

Slackel Live iso images are created with http://www.slackel.gr/repo/source/slackel-source/slackware-live-0.5/0.5.4/ forked Slackware-Live scripts from LiNomad. 
The SLI gui live installer, of LiNomad further http://www.slackel.gr/repo/source/slackel-source/slackware-live-installer-1.2.5/ developed adding new features to easily install the system to hard disk or make a Live USB.
There is also the http://www.slackel.gr/isos/slackel-live/install_on_usb.sh]install_on_usb.sh script to create a Live USB and a persistent file. 
make sure you read the respective instructions in this file:  http://www.slackel.gr/isos/slackel-live/README_INSTALL_ON_USB.TXT README_INSTALL_ON_USB.TXT

Slackel means Greek Slackware. Slackware + Hellenic (Greek).
Slackel's goal is to be a stable, fast and light distribution. Slackel is multilingual.
You can help in artwork. Develop new tools for system. Add more features to gui installer. Create a startup guide. Help in supporting other users. Create packages. Or whatever you think is useful.

Forum is free and everyone can register and also send an email to dijemos@gmail.com to activate the account because of many spam fake registrations.

Everyone is welcome to use Slackel for free. Slackel is a project that offers everything for free and is developed in free time. No income is generated by Slackel releases or support.
Latest Slackel version on http://www.slackel.gr/forum/viewtopic.php?f=3&t=564
or Distrowatch https://distrowatch.com/?newsid=10622

Dimitris Tzemos
Slackel Founder http://www.slackel.gr
Salix core team developer https://docs.salixos.org/wiki/Salix_OS:Team
Daily Challenge #38 - Middle Name
Tags: challenge
Published: 2019-08-10 12:44:27

---
title: Daily Challenge #38 - Middle Name
published: true
description: 
series: Daily Challenge
tags: #challenge
---
Your [challenge](https://www.codewars.com/kata/5768a693a3205e1cc100071f) today is to initialize an individual's middle name (if there is any). 

> Example: 
> 'Jack Ryan'                 => 'Jack Ryan'
'Lois Mary Lane'              => 'Lois M. Lane'
'Dimitri'                     => 'Dimitri'
'Alice Betty Catherine Davis' => 'Alice B. C. Davis'

Good luck!

***
_This challenge comes from manonacodingmission on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge for a future post?  Email **yo+challenge@dev.to** with your suggestions!_
PHP - Elegant method call
Tags: php, codequality, webdev
Published: 2019-08-10 12:22:46

Often I find myself in a situation where I have a class in which I only have one public method and want to call it. Let's imagine we have a class to send mails to a specific user

```php
class SendMail
{
    public function handle(User $user)
    {
        //
    }
}
```

Now we can call the method as follows

```php
(new SendMail)->handle($this->user);
```

but I don't like the noise for initiating a new object. Is there perhaps a better solution? 🤔

What if we include a tiny bit PHP-Magic ✨ and add a static function that creates the object for us and calls the method? Like this

```php
class SendMail
{
    public function handle(User $user)
    {
        //
    }

    public static function execute(User $user)
    {
        (new static)->handle($user);
    }
}
```

With the new static method we can call it like this now

```php
SendMail::execute($this->user);
```

Hooray 🙌 this looks much cleaner in my eyes. But why are we going to all this trouble now? 🙄

```php
(new SendMail)->handle($this->user);
// vs
SendMail::execute($this->user);
```

Both lines do the same thing and readers with a trained eye would now ask why not just execute the code in the static method instead of creating a new object. Depending on the functionality it is not necessary to do it. However in my experience most functions are not as simple like in our example.

Have I sparked your interest? Just give it a try. Maybe you also like it 😉

Edit:
Thank you all for the feedback 👌 dev.to is really great 😁

I have taken a very simplified example in this article and added further explanation when to use this pattern in the following comment https://dev.to/suddenlyrust/comment/e58i
Thanks for the response
Tags: career, beginners
Published: 2019-08-10 00:55:20

When I wrote that post I was frustrated and I received a lot of support. Thank you so much for that. 

In the next few months, I will stop payments on my Squarespace account and I will move my domain over to Github pages and create a site myself. I hate writing technical blogs due to my perfectionism and I will try to write something about it. I know that is required as somebody going into tech to do it.

As far as the advice I was given, I cannot follow all of it that would be impossible, I am going to find common ground with all of it. It was a lot of advice for me and very overwhelming. I am also going to work with my mentor on how to get the interview since I only been on 3 interviews since finishing the Bootcamp. We are going to move our appointments to weekly rather than biweekly.

I am going to delete my LinkedIn, somebody gave me this awesome advice. I realized how broken my LinkedIn is and that it cannot be salvaged since it already has a negative digital footprint.

I do have a job and other obligations so having a green everyday GitHub is not something I can realistically do. What I can do is push something every week. I will also repin some of my projects.

I am going to continue to attend meetups. I have 3 within the next 10 days.

I also am joining another Code For Philly project since the one I was apart of is inactive. I don't want to say which one since I realized how public this site is and I don't want to reveal a lot of information about the project. This will keep me busy and provide a project I can have on my resume. It is an open-source project something that I have been afraid to get into.

I am not going to lie in order to get a job. If people don't think I am a good fit, that is on them. I can only control the skills and grow from them.

Again thank you for all of your advice. I really appreciate it.