teleren/devto huggingface dataset:
Your keyboard is disgusting!
Tags: watercooler
Published: 2020-02-05 17:01:36

In 2016 research revealed that the average computer keyboard not only has hundreds of times more bacteria than a toilet, but also disturbingly aggressive bacteria.

## Interesting facts

Now, underestimating our smartphone's and keyboard's potential to cause illness is one thing. But not without being amazed by some findings:

Statistically, women's office keyboards are dirtier than men's. Unfortunately, the study by the University of Arizona did not provide any guesses of why. It is, however, an interesting finding.

Hospital keyboards are most critical. It makes sense, but we rarely think about it: A study at the Chicago Memorial Hospital found two deadly and drug resistant types of bacteria prone to sticking to the hospital's keyboards. Something that doesn't affect our personal work environment, but certainly something I will have in mind at the next doctor visit.

## What to do?

Well, it is suggested to wash your hands prior and after using a keyboard.
As for the cleaning: make sure you clean between the keys! Unplug your keyboard and turn it around to get rid of debris. Then, with a qtip and alcohol, carefully clean between the keys. Use a damp (not wet!) cloth with cleaner to go about the surface of your keyboard.

With mechanical keyboards, you normally can remove the caps easily.
Is there an accessible way to have buttons that are kinda links in a select list?
Tags: html, ux
Published: 2020-02-05 19:01:21

I need to have a select list (or something that looks just like it) where users can choose their language. When they make the selection the site is translated. This code shows the idea: 

https://codepen.io/_j_i_m_fb_/pen/gOpOYGV

```
<select>
  <option>English</option>
  <option>French</option>
</select>

const SELECT = document.querySelector('select');

const changeLanguage = language => {
  console.log('Language is now ', language)
}

SELECT.addEventListener('change', (e) => changeLanguage(e.target.value));
```

Can something like this be made accessable? I feel that really the languages text should be buttons or links, but I don't think those are valid in a select list. I could style a `ul` with CSS but then you'd lose the native controls on mobile, so for at least some users it would be worse UX.

Also as a side note, why is there no "accessibility" tag?
Youtube Video Released 
Tags: html, css, javascript
Published: 2020-02-05 18:51:49

Hey guys, just released my first video on Youtube, where I create an animated Sign in/up Form using HTML, CSS and JS. You can check it out here: https://www.youtube.com/watch?v=8VYnHCAcun8&t

Please leave your thoughts in the comment section and if you liked the video don't forget to subscribe and give it a like.
New Job? Do these 8 things!
Tags: career, productivity
Published: 2020-02-05 18:22:38

We have all been there before, you are starting a new job this week, month, even year. How do you make sure you set yourself up for success? I have curated 8 tips for getting started in a new role that I hope will help you get comfortable and ready to kick some butt in your new gig! 

1. Learn/understand the business of your company
Learn why the company is paying you to do what you do. Having a solid understanding of how your business/product works will be extremely valuable as an engineer. Knowing why you are adding this if statement or why this logic needs to be added will allow you to not only build a better product but will also give you the confidence to make suggestions and impact the business. Any company worth working for would love for an engineer to make a business or product recommendation. 

2. Get your machine set up for success. 
Some companies have a pretty heavy duty technical onboarding process with mandated technologies/tools like IDEs, others don't. The key is to set up your machine in a way that will make you the most productive and successful. Take setup seriously and ask questions if you need help. Nobody likes the new person who can't get their machine setup, it's not a good look. 

3. Dig In
You don't need to understand the entire codebase (nor should you be expected to), but spend some time digging around. Look for general patterns, understand the high-level architecture, spend some time with the data models to understand the main "domains".

4. Find a low priority bug or //TODO 
This is a great way to get an understanding of the codebase and get your feet wet. A lot of tech companies have a badge of honor of sorts for getting a PR in your first day. I am not saying this is a must, but finding something that can be easily tackled will be a great way to make an awesome first impression. My goal was to get to PR in my first day in my current job, I failed, took me three days. Some companies have expectations of not even writing any code for days to weeks, feel out your new org.

5. Write some unit tests
This will help you familiarize yourself with the code and could potentially be an easy way to knock out your first PR. Also, everyone loves an engineer who places emphasis on testing. 

6. Build rapport with your colleagues
Learn about their work, what are they working on? How long have they been on the team? Are there anythings you should know about their work? Also, and perhaps more importantly, learn about them as a person. Where did they work before this? Where are they from? Any hobbies? Ask about their family, people like talking about themselves. These are now the people you will spend ~33% of your life with.  

7. Ask questions! 
Now is the only time you have an official license to ask anything you want. Take advantage of that. 

8. Stay grateful
Congrats on your new job, you are going to do awesome! Stay grateful and curious. In no-time, you will be a jaded engineer :) 



Did I miss anything? If so please let me know! 

Thank you very much and good luck!
Monitor Ember apps errors with Rollbar
Tags: javascript, ember, rollbar
Published: 2020-02-05 18:03:22

One fact that I've come to accept as an experienced developer is that errors *will* happen.  Guaranteed.  The reasons for this situation are vast.  Perhaps there are quirks in a browser you didn't test.  Or perhaps the user did something that you didn't plan for.  You can't anticipate every situation.  Knowing that errors will happen means you have two choices.  You can ignore this fact and let your users suffer (at the risk of losing them).  Or, **you can record these errors and fix them to improve your application.** I recently set up Rollbar for [College Conductor](https://www.collegeconductor.com/) and wanted to share my experience.

[Rollbar](https://rollbar.com/) is a service that let's you record your errors *wherever* they happen.  Error information is stored with your Rollbar account so you can examine a problem and decide how to fix it.

If you're developing an Ember application, you can quickly integrate your app with Rollbar. Let's see how.  Begin by installing an Ember CLI addon for Rollbar:

```bash
$ ember install ember-cli-rollbar
```

Once the addon is installed, it needs to be configured to communicate with Rollbar.  In your `config/environment.js` file, add a section like this:

```javascript
var ENV = {
  rollbar: {
    accessToken: 'your post_client_item token'
  }
};
```

Rollbar has a few different tokens available on your access tokens settings page.  The correct one to use with Ember is the `post_client_item` token.

With that configuration done, you're ready to go!  When the Ember app is not in `development` mode, errors will be reported to Rollbar.

Good luck with your app.  I hope this information helps you improve your project for your users.  In a few mere weeks of use, Rollbar has already helped me track down a number of problems.  I'm sure it can do the same for you.

This article first appeared on [mattlayman.com](https://www.mattlayman.com/blog/2017/ember-rollbar/).
Functions - JavaScript Series - Part 16
Tags: javascript, tutorial, codenewbie, beginners
Published: 2020-02-05 18:01:46

Function is a block of code where we write some tasks or a single task to do. Function run only when we call it. Sound confusing ?

If no then just skip next two slide/lines.

Do you remember using console.log ? What do you think this is ? When we pass something on the “” in console.log then we can see it is printing on the console right ? How this happens?

Actually there is some native parts of JavaScript. Where there is function and we call it using it and pass the value to show in the console. So we are already using the function right ? Do you understand now ?

Now writing function in JavaScript is really easy. Just start with function keyword. This is reserve keyword for initialing a function like we initial variable using var.

It is like giving name of variable. We’ll give a name after function keyword. Then function need some parameter to pass. We can leave it blank for now and our code will be –

```
function nameOfFunction() {
//Block of code
}
```

Now lets write a function –

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

See the result in browser console

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

Can you write some basic functions now ?

You can see the graphical version here
{% instagram B8MaV1GAg03 %}

Source Codes - { Check commits }
{% github nerdjfpb/javaScript-Series %}

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/javascript-part-16/). You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/)!
HTML form input to nested JSON objects?
Tags: javascript, help
Published: 2020-02-05 17:37:18

```javascript
{
   "main-field":"value",
   "main-nested":{
      "nested-field":"value",
      "nested-array":[
         {
            "item-1":"value"
         },
         {
            "item-2":"value"
         }
      ]
   }
}
```

How can I convert an HTML form to such JSON structure?

I thought I would find an straight forward answer, but I haven't.

I'm not a front-end developer, but my co-workers do use JavaScript and jQuery, if that's needed. (sadly we do not use React or Angular)
A classic interview question
Tags: codenewbie, javascript, career
Published: 2020-02-05 17:10:56

Hey everyone! Welcome back to Code Review, a series of coding interview challenges and career related content released weekly exclusively on Dev.to. I’m Elisabeth Gross and you might know me from the work I do on Coderbyte.com, a site dedicated to helping developers of any level get their next engineering job. Or, you may have heard of me via [Breadwinnerss](https://dev.to/coderbyte/how-to-build-a-side-project-that-will-impress-future-employers-nl2), a tool that helps users request intros for whichever roles they're interested in across dozens of companies. You might just be part of this awesome Dev.to community of passionate coders. Regardless of where you came from, welcome! If you like content like this - be sure to sign up for our [newsletter here](https://coderbyte.typeform.com/to/fb7Yk8). Stand up’s over - lets get into the article!

## The challenge

Given two strings, return true if they are anagrams of each other. Remember, an _anagram_ is a word, phrase, or name formed by rearranging the letters of another, such as cinema, formed from iceman.

## The less optimal approach
 
### The sort function

This solution takes advantage of the built in `sort` function that comes with the javascript language. Many languages have a sort function but it’s important to know what the sort implementation is under the hood, especially when it comes to the overall time complexity of your algorithm. The [V8 engine](https://v8.dev) (the engine that powers the javascript that runs in the Chrome browser and Node.js) implements array sort using the [MergeSort](https://medium.com/javascript-in-plain-english/javascript-merge-sort-3205891ac060) algorithm and has a time complexity of `O(nlog(n))`. It’s really important to demonstrate to your interviewer that you understand that using a built in method isn’t “free”, it’s just someone else’s code :)

## The solution

Once you sort the strings, you can just compare them! If they are equal, they are anagrams. If they aren’t, return false. This is relatively straightforward in code.

```javascript
function anagram(str1, str2) {
  
  // replace all whitespace in string, split into arrays, sort and rejoin as strings
  sorted1 = str1.toLowerCase().replace(/\s+/g, '').split('').sort().join()
  sorted2 = str2.toLowerCase().replace(/\s+/g, '').split('').sort().join()
  
  return sorted1 === sorted2
}
```

Try and come up with a more optimal solution for next week. Happy coding!
Easily Switch AWS Profiles with Tab Completion
Tags: showdev, aws, devops
Published: 2020-02-05 17:02:36

I am constantly moving between AWS profiles and wrote a bash function to help me hop between what I need. 

Hopefully, someone else finds it useful

```bash
#!/bin/bash 

_getprofiles() {
	COMPREPLY=($(compgen -W "$(sed -n 's#^\[\(.*\)\]#\1#p' ~/.aws/credentials | sort -u)" -- "${COMP_WORDS[1]}"))
}


aps () {
	if [ -z "$1" ]; then
		echo $AWS_DEFAULT_PROFILE
		return
	fi
	
	export AWS_DEFAULT_PROFILE=$1
}

complete -F _getprofiles aps

```

Just put that function into your `~/.bash_profile` or something that is sourced when a terminal session starts.

This will add the command `aps` and you can tab complete any of the existing profiles in your aws config.
BaseCS: Working with Binary
Tags: computerscience, basecs
Published: 2020-02-05 16:55:57

---
title: BaseCS: Working with Binary
published: true
description: 
tags: computerscience, basecs
series: BaseCS Season 2 
---

Today's episode of BaseCS continues our exploration into binary, and dives deeper into some of the ways to work with this counting system.

In this episode, we learn how to write and count when we only have two digits (0 and 1) to work with. Along the way, we also see how to convert between base 10, the counting system that we're all familiar with, and base 2, the number system for binary. We also do some math to prove how this conversion works under the hood!

Learn more about the concepts covered in this post here:

{% link https://dev.to/vaidehijoshi/bits-bytes-building-with-binary %}

This whole series is sponsored by Heroku. A special thank you to Heroku for their ongoing support!

{% organization heroku %}
My Botman app don't postback a replay to Facebook messenger!
Tags: botman, laravel, facebook, api
Published: 2020-02-05 16:54:15

Hello Everyone!

i've an issue using facebook api messenger,

I'm using Laravel with Ngrok to deploy my application, Also using Botman to to communicate with my page facebook.

When i send a message from Facebook messenger i receive a JSON
But my application didn't postback to Facebook app.
Why You Don't Need Types in JSDoc when Documenting TypeScript
Tags: typescript, documentation
Published: 2020-02-05 16:53:27

---
title: Why You Don't Need Types in JSDoc when Documenting TypeScript
published: true
description: Documenting TypeScript code can be done with JSDoc but there are some practices you don't need to do that will make your documentation last longer, quicker to write, and more maintainable.
tags: TypeScript, documentation
---

I work with many folks who are coming from native JavaScript and learning TypeScript and I've noticed one small thing during code reviews that can save some time. Here's a quick tip if you're used to writing "regular" JSDoc!

One huge benefit of using TypeScript and documenting with JSDoc syntax is that **you can avoid having to specify JSDoc types in your docs**! If you want to read the full specification check out Microsoft's standard, [tsdoc](https://github.com/microsoft/tsdoc).

Here's an example of a native JavaScript function with JSDocs:

```js
/**
 * Clamps a `value` between a `min` and `max` inclusive
 *
 * @param {Number} value The value to clamp between `min` and `max`
 * @param {Number} min The minimum number of the range
 * @param {Number} max The maximum number of the range
 *
 * @returns {Number} The clamped value
 */
export function clamp(value, min, max) {
  return Math.min(Math.max(min, value), max);
}
```

In TypeScript, you're already statically typing your arguments and return type so there's no need to repeat them in the JSDoc. Lose 'em!

```ts
/**
 * Clamps a `value` between a `min` and `max` inclusive
 *
 * @param value The value to clamp between `min` and `max`
 * @param min The minimum number of the range
 * @param max The maximum number of the range
 *
 * @returns The clamped value
 */
export function clamp(value: number, min: number, max: number) {
  return Math.min(Math.max(min, value), max);
}
```

Bonuses:

- A refactor-rename (`F2` in Visual Studio Code) of a param will sync the JSDoc param names for you
- VS Code has autocomplete suggestions for parameter names as you type your JSDocs
- VS Code and many other tools support Markdown in JSDoc

Here's what you'll see in your editor now:

![Visual studio code showing JSDoc on popover](https://dev-to-uploads.s3.amazonaws.com/i/o2073t682qoiohovl0qd.png)

[View in TypeScript playground](http://www.typescriptlang.org/v2/en/play#code/PQKhCgAIUhhAbAhgWwA4GdKMgAwG6LwCuApjpAEYkAuA7iSQHZa7ICWj5ijAJq4gA9yHAMbF0bPCSgRokAAKpEAJxSQCxEpAAqACy0bSkagHtIYlKko16TVhy69+QmQqWrkkdsz1bvbZCJPRiCqZUgTADNjfUhVRgBzaTlFFTVkQR1YjIEAoMgQ5DCI6OpY+KSZV3llGiJlRkxfcyQ0Ej5DZJBgcBIBVBNlakhIokYRajYTZgs0AApOgC4C0JJlABovDmXCsM2cndXlAEpIAG8oOLqGyABZRDKAOm85+6ecue9NzuP9wWOANzgAC+QA)
What is #devdev?
Tags: devdev
Published: 2020-02-05 16:53:09

---
title: What is #devdev?
published: true
description: 
tags: #devdev
---

John Sonmez is a the (original) Tim Ferriss of software engineering imho
he blends self development with software development and is a living example of what he preaches.

So my moniker that I use for this type of combination of self development and software development is:
                                 

                                 devdev


The combination seems to help me out in problems in both fields. As I get better in self control and self management and self care etc I also get to program/push more code. As I do push-ups, Wim Hof Method breaths I also improve in the number of my insights. And so on ...
On the other hand, as I get better at programming I also learn about the various technologies and since the field is constantly self-developing new technologies, there is plenty more to learn every decade. In fact "I have to run just to stand still" seems like a fair phrase to push here.

Development of development could also be a self-referential or recursive method for refining software development by exploration, experimentation and exclusion.
Don't wait till you are ready
Tags: podcast, motivation
Published: 2020-02-05 16:39:56

> You will never be

# We weren't ready

We had a lot of un-figured-out stuff that could keep us from starting [our](http://learningcurve.dev) [podcast](https://dev.to/learningcurvepod) last year in December. *But it didn't.* We recorded and published 6 episodes till now and are going to keep doing it.

*Yeaaaaaa* 🤸‍♂️

[Brittik](https://twitter.com/brittikbasu) and I decided to start a podcast and we began by recording the episode instead of figuring out things like publishing and creating a website for it first. 

We decided on the topic and started recording it the next day. Mic's were not proper. My audio was bad. *But this is the episode with highest listens!*

# But we could figure things out

We did not know anything about publishing audio. Luckily, Brittik knew a thing about editing, so at least that was in place. 

After we recorded the first episode, we had 4 days to figure out things like publishing and creating a landing page, and this deadline helped us put in the work and launch. **We wouldn't have launched if we had to get everything ready before we recorded.** Yes, the first episode wasn't perfect, the audio wasn't clear but guess what, we launched. The website had a single page with a form to collect mail id of interested people.

[Anchor](http://anchor.fm) app made it easy for us to upload audio and publish it across platforms, which was great. It handles all the distribution now and gives us good analytics on how the audience is. We didn't know about Anchor earlier.

I used Gatsby to build our website, which was a single page, and it is hosted on [Netlify](http://netlify.com). It has a form, handled by Netlify Forms to collect mail id's of people interested and we promised to send a mail the podcast launches. We used [Buttondown](http://buttondown.email) for it where we manually imported subscribers from the Netlify form responses to Buttondown.

# After launch

We published, sent out mails and tweeted about it. People listened to it and a few gave us feedback. Personally, I learnt a lot in this process. We improved episode by episode.

I now use Blue ice mic, which I borrowed from my friend, and its better than having nothing. The quality improved a lot. I record in Garageband (or Audacity sometimes). Brittik made a good intro music and we include it from the 3rd episode onwards. It's a great start to the episodes now. We record in the mornings these days because it's mostly silent and audio is better.

It's fun to talk about things we love and be able to share it to people. We are looking forward to publish more this year.

I'm really happy to share these stats
![podcast stats](https://dev-to-uploads.s3.amazonaws.com/i/0k56jj0cq2lgct3dn24v.png)

# What are you waiting for?

Yes you.

~~Go listen to out podcaaasst! Haha no, that’s not the point.~~

Start what you were waiting to start. There is no perfect time than now. And you don't have to be ready. You will never be 100% ready 💯 

Let me know what you start/launch/started with a comment here.

*Take care!*
THE FUTURE OF APPS: Real-time & offline with GraphQL
Tags: graphql, webdev, aws, techtalks
Published: 2020-02-05 16:36:04

> This video is a talk from *Byteconf GraphQL 2020*, a free, live-streamed GraphQL conference that aired on January 31st, 2020. [Visit our website](https://www.bytesized.xyz/graphql-2020) to sign up for the Byteconf GraphQL "swag bag", a free downloadable resource with everything you need to get started with GraphQL, as well as info about future Byteconf events!

**Complexity, and the consistent attempts to reduce complexity, is at the core of the evolution of technology.** 

As technology evolves, we then find harder problems to solve and are presented with new challenges. In the client space, we've seen innovation that has addressed how we deal with modern application concerns like real-time and offline data while GraphQL has continued to gain in market share. 

What happens when we take the advancements that GraphQL has introduced as a paradigm and combine them with a mental model that all data should be local and offline first, with eventual consistency to your database as a second thought? 

In this talk, I'll talk about a data store paradigm that allows developers to work with a single, local database and source of truth, and the idea that you should not have to make more than one write action to have (eventual) consistency across the client and server.

Thanks to [Nader Dabit](https://twitter.com/dabit3), who presented this talk at [Byteconf GraphQL 2020](https://www.bytesized.xyz/graphql-2020)!

{% youtube yd10m_YMP1g %}

If you enjoyed the video, give it a thumbs-up, and [subscribe to our channel](https://www.youtube.com/channel/UC046lFvJZhiwSRWsoH8SFjg?sub_confirmation=1) for more web dev content every week. We also have a newsletter where we send out what's new and cool in the web development world, every Tuesday – [join here](https://www.bytesized.xyz/newsletter)!