teleren/devto huggingface dataset:
Pairing with Community Member Rafi
Tags: devstream, pairprogramming, css, html
Published: 2021-01-22 21:36:29

On <time datetime="2021-01-21">January 21st</time>, DEV Community member Rafi joined Christina and I on the pairing stream to work on improving some accessibility issues in the onboarding for a Forem instance, e.g. DEV onboarding.

{%youtube cVW5sVgouYA %}

Here is the issue that we were working on.

{%github https://github.com/forem/forem/issues/9585 %}

On this stream, we covered:

* accessibility issues currently affecting the onboarding process in a Forem instance
* we figured out why hyperlinks in labels were not focusable. Turns out setting the CSS property [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) with the value `contents` was the culprit. This was in the explanation of the usage of the `contents` value for the `display` CSS property in the Mozilla Developer Network (MDN) docs -- *"Due to a bug in browsers this will currently remove the element from the accessibility tree — screen readers will not look at what's inside. See the Accessibility concerns section below for more details."*
* part of the fix was exploring part of codebase's SASS that was using [@extend](https://sass-lang.com/documentation/at-rules/extend) as well as we were trying to figure out where a `margin-top` was being set.
* We had a bit of a setback with Rafi's web server dying for some reason, but we were still able to make do. That's the beauty of live coding. Unpredictable. 😎

<center>

![Moira from Schitt's Creek saying "One never knows what may hapen"](https://media.giphy.com/media/3ohs4ob5OHiDvF9caY/giphy-downsized-large.gif)

</center>

Thanks again for coming on the stream Rafi!

You can also find the three of us all over the web here:

Rafi:

* [Rafi's Website](https://rafi993.me)

Nick:

* [Twitter](https://twitter.com/nickytonline)
* [Website](https://iamdeveloper.com/)
* [livecoding.ca](https://livecoding.ca)
* [YouTube](https://youtube.iamdeveloper.com)

Christina:

* [Twitter](https://twitter.com/coffeecraftcode)

Looking forward to seeing you on future streams! If you're interested in pairing, fill out [this form](https://iamdeveloper.com/pair). We’d love to tackle an issue with you that the whole community could learn from!

[Follow DEV on Twitch](twitch.tv/thepracticaldev) to be notified when future streams begin.
What was your win this week?
Tags: discuss, weeklyretro
Published: 2021-01-22 21:17:26

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Happy Friday!


**Looking back on your week — what was something you're proud of?**

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Landing a new job
- Planning a fun weekend activity... or whatever else might spark joy ❤️

---

Have a great weekend!

![World's Best Cup of Coffee Buddy the Elf](https://media.giphy.com/media/vmtxnxveVUodG/giphy.gif)
Java: hashMap.keySet()
Tags: java
Published: 2021-01-22 21:07:03

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/54oniopbmk8mmb20tz8d.jpg)

hashMap.keySet() returns a Set view of the keys contained in this map #java. Check out STJ: Java fantasy card game at https://SummonTheJSON.com
Jan 22: DEV Discovery
Tags: discuss, bestofdev
Published: 2021-01-22 20:56:10

Find a DEV post that you think deserves more eyeballs, drop it in the comments. It can be your own, that's fine.

Since I haven't remembered to do this _every day_, I'm removing the word "daily" from the series titles.

```liquid
{% link https://dev.to/devteam/for-empowering-community-2k6h %}
```

Post something below that deserves more broad attention!
Day 22 - Determine if Two Strings Are Close
Tags: leetcode, python, challenge
Published: 2021-01-22 20:53:35

## The Problem

>Two strings are considered __close__ if you can attain one from the other using the following operations:

* Operation 1: Swap any two __existing__ characters.
** For example, `abcde -> aecdb`
* Operation 2: Transform __every__ occurrence of one __existing__ character into another existing character, and do the same with the other character.
** For example, `aacabb -> bbcbaa` (all `a`'s turn into `b`'s, and all `b`'s turn into `a`'s)

>You can use the operations on either string as many times as necessary.

>Given two strings, `word1` and `word2`, return `true` if `word1` and `word2` are __close__, and `false` otherwise.

 

__Example 1:__

```
Input: word1 = "abc", word2 = "bca"
Output: true
Explanation: You can attain word2 from word1 in 2 operations.
Apply Operation 1: "abc" -> "acb"
Apply Operation 1: "acb" -> "bca"
```

__Example 2:__

```
Input: word1 = "a", word2 = "aa"
Output: false
Explanation: It is impossible to attain word2 from word1, or vice versa, in any number of operations.
```

__Example 3:__

```
Input: word1 = "cabbba", word2 = "abbccc"
Output: true
Explanation: You can attain word2 from word1 in 3 operations.
Apply Operation 1: "cabbba" -> "caabbb"
Apply Operation 2: "caabbb" -> "baaccc"
Apply Operation 2: "baaccc" -> "abbccc"
```

__Example 4:__

```
Input: word1 = "cabbba", word2 = "aabbss"
Output: false
Explanation: It is impossible to attain word2 from word1, or vice versa, in any amount of operations.
```

__Constraints:__

* `1 <= word1.length, word2.length <= 105`
* `word1` and `word2` contain only lowercase English letters.

## Tests

```python
import pytest
from .Day22_DetermineIfTwoStringsAreClose import Solution

s = Solution()


@pytest.mark.parametrize(
    "word1,word2,expected",
    [
        ("abc", "bca", True),
        ("a", "aa", False),
        ("cabbba", "abbccc", True),
        ("cabbba", "aabbss", False),
    ],
)
def test_close_strings(word1, word2, expected):
    assert s.closeStrings(word1, word2) == expected
```

## Solution

```python
def count_chars_map(word: str):
    counts = {}
    for c in word:
        if c in counts:
            counts[c] = counts[c] + 1
        else:
            counts[c] = 1
    return counts


class Solution:
    def closeStrings(self, word1: str, word2: str) -> bool:
        w1l = len(word1)
        w2l = len(word2)
        if w1l != w2l:
            return False
        w1_counts = count_chars_map(word1)
        w2_counts = count_chars_map(word2)

        if sorted(list(w1_counts.keys())) != sorted(list(w2_counts.keys())):
            return False

        return sorted(list(w1_counts.values())) == sorted(list(w2_counts.values()))
```


## Commentary

This solution was accepted but didn't perform very well. Publishing this now but plan to come back and improve it later.
Arduino Distance Sensor
Published: 2021-01-22 20:42:04

I finally got my Arduino distance sensors in the mail. This is my first time expanding my knowledge outside of the beginners tutorial book. As I have been working through the tutorial book I was trying to think of what I wanted my first real project to be. As an end goal I want to try and make a robot from scratch that will essentially act like a roomba, but rather than being a floor cleaning slave, my robot will just wonder around the house aimlessly contemplating the finer things in life. Like which walls to not run into. I figured my first step would be figuring out how to give my robot eyes. This landed me on getting a few Ultrasonic Sensors to start playing around with. These sensors work kind of like a bat or a dolphin using echo location in order to determine how far something is from its sensors. The basic goal would be to keep the robot from running into walls by setting a designated minimum distance in which to tell the robot to turn. 

I started off really simple and just set up the sensor on my bread board and moved different objects in front of it to test the sensors reach. I was able to get to about 10 feet away before it started to get a little wonky. So this should work just fine at a small distance of an inch or two. The coding for it was pretty simple. Ill go over that a little more below.

I'll skip all the boring parts like hooking up the power and the ground. The two new pins for me are a trigger pin and an echo pin. Basically the trigger pin will go from off to on to off again. This basically sends off a sonic burst that will travel until it hits something and then it returns back to the sensor. Then the echo pin works its magic by receiving that burst and translating it into the computer to let us know how long it took to travel. There is a little bit of math that gets done with the duration in order to figure out just how far we traveled. You take your duration and multiple that by the speed of sound or 340 m/s ( .034 cm/microsecond) and then divide that by two, since the sound is traveling there and back it actually gives us double the duration we need. The code below will go over how that happened:

```
void loop() {
  digitalWrite(triggerPin, LOW);
  delayMicroseconds(2);
  digitalWrite(triggerPin, HIGH);
  delayMicroseconds(10);
  digitalWrite(triggerPin, LOW);
  duration = pulseIn(echoPin, HIGH);

    distance = duration * .034 / 2;

    Serial.print("Distance: ");
    Serial.print(distance);
    Serial.println(" cm");

}
```

Im very excited to get the next piece of my robot puzzle together. I will probably start to get more into the motors and figuring out how to make the wheels work.
JavaScript Type Conversion
Tags: javascript, html, node, codenewbie
Published: 2021-01-22 20:41:36

{% youtube xNxu2kdMumo %}

---
### Type Conversion
Type conversion is the conversion from one data type to another.

Below are the data type conversions:
#### String Conversion
Conversions from one data type to a string are possible with the `String()` function in use.

For example, conversion from a boolean to a string: 

**script.js**
```js
const bool = true; // try undefined, null, NaN, etc
console.log(typeof bool); // boolean

const toStr = String(bool);
toStr; // 'true'
console.log(typeof toStr); // string
```

#### Number Conversion
Conversions from one data type to a number are possible with the `Number()` function in use.

For example, conversion from a boolean to a number:

**script.js**
```js
const bool = true; // try undefined, null, NaN, etc
console.log(typeof bool); // boolean

const toNumber = Number(bool);
toNumber; // 1;
console.log(typeof toNumber); // number
```

|Data Types               |Numeric Conversion                                                   |
|----------------|--------------------------------------------|
|`true` and `false`|`1` and `0`|
|`string`|`NaN`|
|`' '`|`NaN`|
|`null`, `undefined`, and `NaN`|` number`|

**script.js**
```js
const notNum = NaN; // try undefined, null, NaN, etc
console.log(typeof notNum); // number

const toNumber = Number(notNum);
toNumber; // NaN;
console.log(typeof toNumber); // number
```

#### Boolean Conversion
Conversions from one data type to a boolean are possible with the `Boolean()` function in use.

For example, conversion from a number to a boolean:

**script.js**
```js
const num = 0; // try undefined, null, NaN, etc
console.log(typeof num); // number

const toBoolean = Boolean(num);
toBoolean; // false;
console.log(typeof toBoolean); // boolean
```

|Data Types               |Boolean Conversion                                                   |
|----------------|--------------------------------------------|
|`1` and `0`|` true` and `false`                         |
|` string` and `''`|` true` and `false`|
|`' '`|` true`|
|`null`, `undefined`, and `NaN`|` false`|

**Happy Coding!!!**

---
[![Buy me a Coffee](https://res.cloudinary.com/bizstak/image/upload/v1610317510/ko-fi-trans_fr3su4.png)](https://www.buymeacoffee.com/techstackmedia)

---
### TechStack Media | Bluehost
- Get a website with a free domain name for 1st year and a free **SSL** certificate.
- 1-click WordPress install and 24/7 support.
- Starting at $3.95/month.
-  30-Day Money-Back Guarantee.

<a href="https://www.bluehost.com/track/belloosagienoah/" target="_blank"> <img border="0" src="https://bluehost-cdn.com/media/partner/images/belloosagienoah/430x288/430x288PW.png"> </a>
Python Daily Problems on Edabit: Return a String as an Integer
Tags: python, devops, programming, codenewbie
Published: 2021-01-22 20:33:53

Edabit is a website where you can practice you problem solving skills. I'm using python but they have it for javascript as well


Problem: Create a function that takes a string and returns it as an integer.

Examples
string_int("6") ➞ 6

string_int("1000") ➞ 1000

string_int("12") ➞ 12


Solution:
def string_int(txt):
   return int(txt)
Intro
Tags: intro
Published: 2021-01-22 20:19:37

Hello there. My name is Analikwu Anthony Rex. I am 26 and a self taught web developer 👩‍💻 and user interface designer🖌️🎨.
<br/>
For the past couple of years I have been learning and building up my programming skills. I come from an object oriented programming background and have built a couple of personal projects for mobile and web to test my new found programming super powers 💪. I will probably discuss this in a future post.
<br/>
I am really glad to be a part of this great and supportive community ❤️ and am really inspired by the open source movement.
<br/>
At present, I am currently working on building an insightful, simple, intuitive and privacy first alternative to Google Analytics which I actually want to use. I call it Page Insight https://pageinsight.app and the idea is to make web analytics insightful and accessible to website owners. I know that there are other web analytics alternatives out there, but they all fall short when it comes to the analysis of custom events. For example they lack the ability to create new measurement metrics.
<br/>
I have created multiple projects in the past, but this is the first project which I intend to double down on. I started working on this beginning of this year 2nd January 2021 and have made a lot of progress. In a sense, this feels like a fresh new beginning and I will share my learning, progress and challenges along the way.
<br/>
I am always open to talk and meet new people. You can reach out to on 
<br/>
#####Twitter 
https://twitter.com/rexthony 
<br/>
#####Github
https://github.com/rexthonyy
<br/>
####Website
https://rexanthony.ga
Compiled but with warnings
Published: 2021-01-22 20:11:12

Hello all,
My reactjs website can run but is compiled with warnings. I ignore the warnings or how can I fix the warnings?
1st.js
'React' is defined but never used  no-unused-vars

2nd.js
  Duplicate key 'background'  no-dupe-keys

3rd.js 
Duplicate key 'background'  no-dupe-keys

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before. Thanks!
Reacty Loops : fully web-based music production    
Tags: react, music, sql, algorithms
Published: 2021-01-22 20:00:27

https://www.linkedin.com/posts/keon-w-kim_%3F%3F%3F%3F%3F%3F-%3F%3F%3F%3F%3F-fully-web-based-activity-6758153268351819776-B738

I miss making music ever since I became an SE
I've been thinking it would be easier to make something that makes music than actually make music at this point.

Sad, yea. But I still had fun.
This is for all the musician-coders.
If you like it, gimme a star, like, comment, a kiss on the forehead, or anything really... 
yea I think I need to go outside.
How to add an extra info in a reactjs website?
Published: 2021-01-22 20:00:04

I downloaded a reactjs code and followed the author's way of writing the code for  "A Description" section but the website still can't show "A Detailed Description" section that I want to add below "A Description" even after updating "A Detailed Description" in the Edit Page. Please tell me how to fix the problem. Thank you.
Re-slicing in Golang
Tags: go, slice
Published: 2021-01-22 19:44:53

## What is re-slicing in Golang?
If you create a slice in Golang, you can create another slice from the original slice using `[i:j]` notation that is called re-slicing. The new slice starts from the `i` index going up to the `j` index without including the `j` index.

Re-slicing is so simple:
```go
s1 := []int{1, 5, 7, 12, 9}
reslice := s1[1:3]
```
**Be careful: Slices in Go are always passed by reference.**

So, if you create a new slice by re-slicing a slice and modify it, the original slice also will be charged. Look at the example:

```go
package main

import (
	"fmt"
)

func main() {
	s1 := []int{1, 5, 7, 12, 9}
	reslice := s1[1:3]

	fmt.Println(s1) // [1 5 7 12 9]
	fmt.Println(reslice) // [5 7]
	
	// make some changes
	reslice[0] = 128
	reslice[1] = 256
	
	fmt.Println(s1) // [1 128 256 12 9]
	fmt.Println(reslice) // [128 256]
}

```

As you can see, the original slice also is updated.
My javascript / tech / web development newsletter out later today 23-01-2021
Tags: javascript, tech, webdev, discuss
Published: 2021-01-22 19:41:25

---
title: My javascript / tech / web development newsletter out later today 23-01-2021
published: true
description: 
tags: javascript, tech, webdev, discuss
---
Another edition of my weekly newsletter out later today, lots of great javascript / tech / web development links.

Sign up to have it automatically sent to your email inbox every weekend.

https://markjgsmith.substack.com

I’d love to hear any feedback you have.
Python Variables
Tags: python, beginners
Published: 2021-01-22 19:38:39

**What Are Variables in Python?**

Similar to variables in Javascript and other programming languages variables in Python are the names of containers that store values. 

**Creating a Variable**

Variables in Python do not have a command for declaration, instead a variable is declared once you assign a value to it:

```
x = 15
y = "Tom"
car = 'Honda'

print(x) // 15 # prints 15
print(y) // Tom # prints Tom
print(car) // Honda # prints Honda
```

As you can see above if you want to assign a string to a variable you can use either single or double quotes.

**Changing Variable Values**

To change a variable in Python you assign a new value to the same name:

```
x = 15
print(x) # prints 15

x = "basketball"
print(x) # prints basketball
```

**Variables are Case Sensitive**

Just a quick note variable names in Python are case sensitive:

```
r = 2
R = "Bob"
#R will not overwrite a
```
**Variable Names Rules in Python**

Variable names in Python have the following rules:
* A variable name must start with a letter or underscore character
* A variable name cannot start with a number
* A variable name can only contain alpha-numeric characters and underscores (A-z, 0-9, and _ )
* A variable name must be case sensitive (See example above)
Custom File Upload Input
Tags: codepen, htmlandcss, cssart, webdev
Published: 2021-01-22 19:10:42

## You don't wanna know how long it took me to do this! 😂😩

{% codepen https://codepen.io/morganjay/pen/JjRqdaN %}

_With some help from Google of course_ 😁🧎‍♂️
A simple image test in React
Tags: javascript, typescript, react
Published: 2021-01-22 19:02:47

There isn't much to test in images, when I write a test for an image element (img) in React apps, I just check if img element exists and if img src and its alt is correct.

Here is how.

## Logo

```javascript
import { FunctionComponent } from 'react';

const Logo: FunctionComponent = () => {
  return (
    <img src="/logo.svg" alt="Logo"  />
  );
};

export default Logo;
```

## Logo.test

```javascript
import { render, screen } from '@testing-library/react';
import Logo from './logo';

describe('Logo', () => {
  test('Logo must have src = "/logo.svg" and alt = "Logo"', () => {
    render(<Logo/>);
    const logo = screen.getByRole('img');
    expect(logo).toHaveAttribute('src', '/logo.svg');
    expect(logo).toHaveAttribute('alt', 'Logo');
  });
});
```

Then run `yarn test` or `npm run test`
Results of your tests will be displayed on `console`

### Happy Hacking!
Flutter | Rectangular icons are centred incorrectly
Published: 2021-01-22 14:44:29

I created an app logo in Sketch. Since in my design, it will be always in mono colour. So, embed it in to an icon font along with other app icons is not a bad idea.

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

I followed [Emvolution Germany's post in medium.com](https://medium.com/@emv_tech/add-custom-font-icons-to-a-flutter-project-12bddb841d7), worked fine, but a bit weird:

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

The snippet:

```dart
        ...
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Icon(AwesomeIcons.logo),
              ...
```

Googled, found the same [issue commented by bartektartanus on Github](https://github.com/fluttercommunity/font_awesome_flutter/issues/23). It seems that rectangular icons do have centring problem.

I got a workaround:

```dart
        ...       
              Text(
                "\ue800", // the code point of the logo
                style: TextStyle(fontFamily: 'Howaii2'),
              ),

              ...
```

`e800` is the code point, add `\u` before it.
Result:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wj3kvi5huxr2vh3t11kv.png)

Another workaround according to [jason-simmons's comment on Github](https://github.com/flutter/flutter/issues/24054#issuecomment-439167235):

```dart
final IconData icon = AwesomeIcons.logo;
...
Text(String.fromCharCode(icon.codePoint),
  style: TextStyle(
    fontSize: 24.0,
    fontFamily: icon.fontFamily,
    package: icon.fontPackage)
),
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ia7h3t7g5l3ky1t3h3yx.png)

BTW, don't mess up the indentation of pubspec.yaml.
There should be 2 indentations before `fonts:`

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/673ey42n3c6sg581tn30.png)


#### Hope this helps!
#### So proud to be a coder!
Quick way to see how many times change detection was triggered in Angular
Tags: angular, debugging, performance
Published: 2021-01-22 18:59:43

Do you sometimes need to know how many times change detection is triggered in Angular? Maybe you’re trying to debug a performance issue or want to see whether a button click is triggering too many change detection cycles.

I just came across a really good tip by [Alexey Zuev](https://twitter.com/yurzui) in his article [Simple Angular context help component or how global event listener can affect your performance](https://indepth.dev/posts/1410/simple-angular-context-help-component-or-how-global-event-listener-can-affect-your-performance) where he uses a logpoint in DevTools to log a message every time [ApplicationRef.tick()](https://angular.io/api/core/ApplicationRef#tick) method is triggered.

It looks like this:

![Adding a logpoint in DevTools to log a message when change detection runs](https://dev-to-uploads.s3.amazonaws.com/i/uhrgyuh3rbem8rvx1apv.gif)

In order to add a similar logpoint:

1. Start your Angular app in dev mode
1. Open the browser’s DevTools
1. Open the “Debugger” panel (Firefox) / “Sources” panel (Chrome/Edge)
1. Find the “vendor.js” file in the list of files on the left and open it
1. Search for the `tick()` method
1. Add a logpoint on the line where you want to log your message
1. Trigger a change detection cycle (could be by clicking on a button) and verify that the log message is output in the console

The logpoint doesn’t tell which part of the code triggered the change detection cycle. Whether it was a button click, a `setTimeout()` function, an HTTP request, or another listener on the page, you wouldn’t know for sure. The logpoint will only tell you how often the method was called. But this is still useful when trying to find out if change detection runs too many times without you expecting it to do so.

I hope you can use this tip. I definitely will.

---

<span>Photo by <a href="https://unsplash.com/@pecarrolo?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Paulo Carrolo</a> on <a href="https://unsplash.com/s/photos/circle?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>