teleren/devto huggingface dataset:
Flutter debugging wirelessly!
Tags: flutter, wifi
Published: 2020-09-27 15:17:33

I hate wires. As simple as that. So if you are one among those people who do, follow this. 

I use VSCode to debug my flutter apps. And lately, it has become too hectic with more and more wires coming up on the table. So here is what you do - 

1. Install adb platform tools. I have a Ubuntu 20.04 running hence I downloaded them from https://developer.android.com/studio/releases/platform-tools
2. Add the adb file to your $PATH if you are on linux.
3. Connect your device using a wire and run adb devices to see if it's detected.
4. If not restart the adb by running adb kill-server and adb start-server.
5. Remember to have USB Debugging on in your device. 
6. Run adb tcpip 5555. Your device will ask for permissions to connect. 
7. Once done, remove the USB. 
8. Connect your device to the same network as your machine.
9. Find the IP address of your phone in the network. You can find it in "About Phone" usually. 
10. run adb connect "phone-ip":5555
11. Done. 

P.S. Throw away that wire.

Happy coding!
How Did You Get Into Programming?
Tags: discuss, beginners, community, quick
Published: 2020-09-27 15:00:05

Hey guys!
I'm sure this question has been asked many times before, but how did you get into programming? I've explained my story [here](https://dev.to/bramleydev/hello-world-2k1d) already, but now I want to hear yours.
Some potential response points:
- How old you were when you started
- How much it affected the rest of your programming career

That's all I got! Make sure you check my account again on Wednesday for another discussion post!

*Follow me here and on [Twitter](https://twitter.com/bruhmley)*
Work with me - a 25 Minutes Pomodoro Video Session
Tags: productivity, motivation, workstations, webdev
Published: 2020-09-27 14:53:42

Need to get some work done? Let's be productive together!

You can use this video as a timer for your Pomodoro sessions.

The idea behind the Pomodoro sessions is to separate your tasks into small 25 minute blocks and take 5-minute breaks after each session. 

Here's how my sessions usually go:

1. I make a to-do list for the day. In the base case scenario, each task in the to-do list is not longer than 25-30 minutes
2. I then choose a single task
3. After that I start a 25-minute timer or lay the video 
4. For those 25 minutes, I only focus on that one specific task
5. After the 25 minutes are over I would take a 5-minute break
6. Then after the break I would start a new 25-minute session by replaying the video

In this 25 minute session, I'm working on a new tutorial.

{% youtube jLz--SlurFQ %}

Hope that you find this useful!

Let me know what tools or methods you use to be more productive.
Optional chaining in javascript (?.)
Tags: javascript, react, tutorial, showdev
Published: 2020-09-27 14:43:52

`?.` is known as the chaining operator in javascript. This operator is so usefull that after reading this article you will start using this operator right away.


## What does this optional chaining operator does?
The `?.` operator functions similarly to the `.` chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined.
Let's discuss some details so that it's more clear to you.

Consider

```
const person = {
  a: {
    b: 'c'
}
};
```



## What will happen if you will try to 
```
console.log(person.a.b)
``` 
??

You are correct... It will definitely print 'c' in the console.

But what if you try to 
```
console.log(person.d.e)
```
??

Hmmm...Tricky one?? Not at all... It will give you an error.
```
Uncaught reference error: Cannot read property e of undefined.
```
It's because 'b' is not a property of object 'a'. So here's a big question.

## Why on Earth would you try to print a property that you know does not exist??

The answer is pretty straight forward. You want to print some data which will be in the object soon but is not available yet (e.g. fetching data using http requests). In ususal cases what you could have done is just apply if else condition that if the value exists only then print the data but using optional chaining operator it will become very simple. See below

```
if (person.d) console.log(person.d.e)
```

VS
```
console.log(person.d.?e)
```

The second one will not give an error even if the data is not fetched. It will just print undefined.
That's really an awesome thing if you literally love js. I always love to teach the concept in as easy as possible way.

Thank you for reading

Happy javascripting....
Free 1st mo + $5/mo LIFETIME hosting for select websites
Tags: offers
Published: 2020-09-27 14:12:35

I am a representative for a private exclusive web hosting company that is offering free first month + $5/mo thereafter hosting for a limited number of websites. If interested, please respond to this post with your current website URL or idea and it will be considered. More details will be discussed with chosen candidates, but our hosting setup is a drop-in replacement for Apache, yet significantly higher performing. As every website has different needs, if a website is chosen a subsequent technical screening will be conducted to ensure we will be able to provide sufficient resources for it to fulfill its mission. Providing known technical requirements in your reply will help streamline the technical screening, but is not required for consideration.

A few websites are explicitly excluded from participation: 
* websites promoting sexually explicit material or violence
* any website whose content would be a violation of dev.to's community guidelines (our company has pretty much the same guidelines)

All others are welcome to apply. Websites whose content, in our exclusive discretion, are particularly beneficial to the Internet at large will be more likely to be chosen.
Day 7 - launching a sci-fi book
Tags: scifi, ai, machinelearning
Published: 2020-09-27 14:07:41

Day 7 Stats: 
- fb spend - $ 11.56
- fb clicks - 9
- reddit spend - $5.31
- reddit clicks - 21
- website views - 30
- email signups - 0
- sales - 0


Lessons: 
- I originally wanted to target devs for the scifi book, but I'm not sure that's the right audience. I'm expanding it beyond devs. 

- I moved the landing page to the website instead of to Github. The book is on github but I think that it was confusing for most people to land on a github repo from an ad.

Feel free to [follow along and read it for free](https://wrannaman.com)!
Why using a website builder is 'shooting yourself in the foot'
Tags: webdev, codenewbie
Published: 2020-09-27 14:03:26

I started learning web development late last year.Becoming a self-taught developer is quite easy contrary to popular opinion,(if you know where to start😉,and what to understand ).In my case I started with reading alot of 'how to get started in web dev' articles from this I slowly noticed a trend,then I made my own syllabus and got started.So,6 months after that  started spreading the word among my friends that I develop websites.That's how I got my first 4 gigs.
I built the first 3 website with html and CSS,they were simple blog websites,and JavaScript was a huge pain in the ass to understand 🤦.The forth one I just downloaded a template and customized it.So,my fifth website as a freelancer ,I was dead broke and a client approached me with a small offer.I told myself I will just take the money and build the website on wordpress and it will take me less than an hour (and lesser cups of coffee😂) .Long story short,a week later the website got hacked by some Turkey guy,after restoring,I again ran into another bug,it took ages to load.After that it went down,took me hours googling to find out the issue.All this while the websites I developed from scratch using html,css and js and in some case Django had no issue and were loading at light speed.
Another bad experience with website builders is when I tried wix.You see,for less than Ksh 4,000 ($40) I can host my website with Truehost compared to Wix which will charge you Ksh 2,400 ($24) a month!Woaa!Maybe that's pocket change in your country,but in kenya that's alot of money.
Flexibility is very important when building a website.You need to have total control over your website.It's a huge bummar when you get complaints from website visitors that your website has a bug yet you don't know where to start to fix it.In addition,you competency will be doubted when you tell your client or manager that you can't reduce the image size because the website builder has a min of 500*500pxs.
I learned my lesson.
Making Type effect using pure javascript
Tags: html, javascript, css
Published: 2020-09-27 13:59:13

If You are reading this then u might be Having Basic math and javascript knowledge so here i am going to teach you how to make a simple typewriter effect using pure javascript no external libraries.

so lets get started with it 
lets first make the element we want to add the effect/animation to

```html
<h1 id="type"></h1>
```
here i am using a `<h1>` tag with a `id="type"`
now lets get to the javascript code first we define our variables
```js
var i = 0 //no of words which will be 0 at first
var txt = "the text u want to display" 
var speed = 50 // try changing this to experiment ;)
```
now lets get real here
```js
function typeWriter() {
  if (i < txt.length) {
    document.getElementById("type").innerHTML += txt.charAt(i);
    i++;
    setTimeout(typeWriter, speed);
  }
}
```
now let me tell you what i did here we made it show the each character at the speed we feeded until the final length is satisfied which makes our type effect :)
now we call the function when we want to run it you can call in many ways but some simple ones are `onclick` or `onload`
here is how i used it 
```html
<body onload="typeWriter()">
  <h1 id="type"></h1>
</body>
```
[**Here is a code for those who will skip all the above thing and just want the code**](https://pastebin.com/44vpjd30)
Edaqa's Room: Sound and Music using WebAudio
Tags: stream, gamedev, webdev
Published: 2020-09-27 13:50:45

---
title: Edaqa's Room: Sound and Music using WebAudio
published: true
description: DevBlog video for how I do sound and music in my escape game
tags: stream, gamedev, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/3ym9ah3lwgeauiukind3.png
---

{% youtube _c7ome6YjFU %}

Today I show you how I use Web Audio to add sound effects and music to my game.

- Creating AudioContext
- Loading sounds with XMLHttpRequest and decodeAudioData
- Creating and playing buffers with createBufferSource
- Using the Audio element for music
- Fade in/out

[Edaqa's Room: Dev.to Special](https://edaqa.link/EdaqasRoom-DEVSpecial)

[Twitch Channel](https://twitch.tv/mortoray/)
[YouTube Channel](https://youtube.com/c/EdaqaMortoray/)

-- 

All about the development of technology, graphics, and puzzles for my online escape and puzzle games. I'll show you how all the pieces work, how I design the games, and likely lots of poking fun at the Web.
Bootstrap Collapsing Menus without jQuery
Tags: html, css, javascript
Published: 2020-09-27 13:49:33

Having to use jQuery to enable Bootstrap to do one small thing like a collapsing menu can be a bit overkill. Luckily, however this can easily be worked around.

You can use the same HTML as for any other Bootstrap collapsing navbar, except with a click handler on the navbar-toggler and an ID on the div wrapping the collapsing section.

```html
<nav class="navbar navbar-light bg-white navbar-expand-md">
    <div class="container col-12">
        <a class="navbar-brand" href="/">
            <b>TestSite</b>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list"
            aria-controls="navbarNav" aria-expanded="true" aria-label="Toggle navigation"
            onclick="displayMenu(event)">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar-list">
            <ul class="nav navbar-nav ml-auto ">
                <li class="nav-item">
                    <a class="nav-link" href="/blog">Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/tools/">Tools</a>
                </li>

            </ul>
        </div>
    </div>
</nav>
```

Then simply put this function in a script tag or in a fille and the navbar will work perfectly.
```js
function displayMenu(event) {
    if (document.getElementById("navbar-list").classList.contains("show")) {
        document.getElementById("navbar-list").classList.remove("show")
    }
    else {
        document.getElementById("navbar-list").classList.add("show")
    }
}
```

If you found this useful, my article <a href="https://dev.to/ara225/how-to-use-bootstrap-modals-without-jquery-3475">How to Use Bootstrap Modals Without jQuery</a> may be interesting to you also.
Team Collaboration
Tags: testing, opensource, csharp, dotnet
Published: 2020-09-26 00:48:31


### Collaboration

C# is the language that I want to focus on in this term. I am lucky that I met one classmate who is also doing C# in the open-source class in the first week. We talk about projects that we're interested in and the reason why we like C#. After finishing our link-checker projects respectively, we decided to do code testing for one another.


### Being a tester


I had few experiences of being a tester. I've seen some meme about how brutal of tester treating developer's code, though. I started by running the tool on my machine and trying all kinds of scenarios. It was not too hard for testing small projects since there are not so many features to test. However, I believe testing requires organizing and planning just like coding. A good tester is supposed to find the issues that weren't considered by the programmer while developing the project. 

When I was doing the testing, I don't have the tool to test the project. My operating system is Linux Mint, but the project is a .exe file. Therefore, I needed to install Wine to run the .exe file. I realized that preparing appropriate tools for testing is critical. 

This is the issue in my partner's project that I filed. https://github.com/abuZayed15/check-link/issues/8 This issue was found when I test this tool with different possible arguments.

### Being tested

It was sort of embarrassing about code being tested. I'm not confident in my project because I know it is not a mature project. However, keeping this kind of negative attitude is not helpful for development. Having the project being tested and reviewed is a huge help for finding my blind spots. We all have the experience that, we try so hard and spend so much time finding the answer, but, it takes only one look for a random stranger to find the answer. "Lookers-on see most of the game", as long as we participate and focus on one thing, we tend to miss the issues even if they are right in front of our faces.

My partner helps me to find out some bugs in my project. They are obvious but I just neglected to see them before publishing it. Moreover, my partner gives me some enhancement suggestions. I've fixed the bugs and republished new versions and will include the enhancement issue in future development. https://github.com/yuanLeeMidori/OSD600.GoodLinkOrBadLink/issues

It was a great and special experience to be a tester and being test. Lots of thanks to my partner and this intriguing course!
UI Dev Newsletter #23
Tags: html, css, javascript
Published: 2020-09-27 13:23:11

- [Optimizing CSS for faster page loads](https://bit.ly/3kE94IN)
Tomas Pustelnik shows a series of techniques on how to optimize the CSS code for performance.

- [Enforcing performance budgets with webpack](https://bit.ly/2ZQLBfa)
Ayooluwa Isaiah describes how to set limits to code using webpack performance budgets.

- [Publish/Update NPM packages with GitHub Actions](https://bit.ly/33KuKvN)
Carl-W. Igelstroem describes how to use GitHub Actions to push new releases on NPM.

- [Stop Using React](https://bit.ly/3iM30NC)
Ender Minyard explains why you should stop using JavaScript frameworks. There is a quality discussion in comments, too.

- [Why I Don’t Have Time For Your Coding Challenge](https://bit.ly/2RFShIP)
Michelle Barker shares thoughts on why coding challenges might not be a good idea.

- [Visualize Data Structures in VSCode](https://bit.ly/3hMaDCo)
Addy Osmani shows how to use VSCode extension to visualize data structures.

- [Editing HTML Like A Boss In VS Code](https://bit.ly/3hNuelF)
Caleb Porzio shows how to use VS Code to supercharge HTML editing.

- [BGJar](https://bit.ly/3hTZtMc)
Free SVG background generator for your websites, blogs and app.

Happy coding!

[Subscribe to the newsletter here!](https://mentor.silvestar.codes/reads#newsletter)
QuickSort
Tags: javascript, algorithms, sorting, arrays
Published: 2020-09-27 13:08:01

It's been a while since I posted, today we will discuss QuickSort.

Before that, if you haven't seen my last post. Click on the below link.

{% link https://dev.to/sudharsanansr/merge-sort-4dj1 %}

The topic for today is QuickSort!

* Quicksort is a divide & conquer algorithm.
* It uses recursion to sort the elements.
* It considers pivot element as a base value and sorts rest of the elements.

#Pseudocode

1. _Base condition:_ Return the array as it is if the array length is equal to 1.
2. Identify the pivot value
3. Get all the elements less than the pivot value on one side.
4. Get all the elements greater than the pivot value on another side.
5. Repeat steps 2,3 & 4
6. Return final sorted array

Click below link to view the pictorial representation of how the algorithm works

![Geeks For Geeks reference](https://dev-to-uploads.s3.amazonaws.com/i/7y644x649ajo38xcdw78.png)

Source: https://www.geeksforgeeks.org/

#Implementation in JavaScript

![QuickSort implementation in JS](https://dev-to-uploads.s3.amazonaws.com/i/kmbttwj1ys46hggutmgg.png)

below is the result

![Result](https://dev-to-uploads.s3.amazonaws.com/i/vtqz76fctvquiu9dwlz7.png)

Hope this is useful, will catch you soon on my next post!

Happy learning!

Thanks,
Sudharsanan Ravichandran
The Weekly Challenge 079
Tags: perl, theweeklychallenge, perlweeklychallenge
Published: 2020-09-27 13:02:56

So after three months of doing [The Weekly Challenge](https://perlweeklychallenge.org/), I decided it was also about time to doing blogging properly rather than just write a `README.md` file. I didn't want to host my own blog, so after reading Dave's [Blogging for Perl](https://perlhacks.com/2020/09/blogging-for-perl/) post mentioning dev.to, I'm using this.

On to the tasks.

# TASK #1 › Count Set Bits

Following Perl's [TIMTOWTDI](https://perl.fandom.com/wiki/TIMTOWTDI) philosophy I presented two solutions.

The [first solution](https://github.com/manwar/perlweeklychallenge-club/blob/master/challenge-079/sgreen/perl/ch-1a.pl) goes through the numbers, converts each value to a binary value (using `sprintf '%b'`) and counts the number of ones (using `tr///`) in the string.

The [second solution](https://github.com/manwar/perlweeklychallenge-club/blob/master/challenge-079/sgreen/perl/ch-1b.pl) has a binary counter that starts at 1, and doubles each run. I then go though the numbers, and add to the counter if `value & binary` is true.

It turns out that the first number is significantly faster. In counting to 10 million on my i7 NUC, the first solution took 19s while the second solution took 79s seconds.

I'm not really sure why we needed to calculate the modulus of 1000000007, but I did that anyway.

## Examples

```
» ./ch1a.pl 3
4 % 1000000007 = 4

» ./ch1a.pl 4
5 % 1000000007 = 5

» time ./ch1a.pl 100000000
1314447116 % 1000000007 = 314447109

real    0m19.881s
user    0m19.878s
sys     0m0.000s

» time ./ch1b.pl 100000000
1314447116 % 1000000007 = 314447109

real    1m19.270s
user    1m19.251s
sys     0m0.005s
```

# TASK #2 › Trapped Rain Water

[Solution](https://github.com/manwar/perlweeklychallenge-club/blob/master/challenge-079/sgreen/perl/ch-2.pl)

This is very similar to the second task in [Challenge 075](https://perlweeklychallenge.org/blog/perl-weekly-challenge-075/#task-2--largest-rectangle-histogram) in fact I copied the printing histogram code from that task, and added to it to display the fills with `·`s.

The logic is also similar to the previous task too. For this task, I worked through each column, except the first and last ones (any water in those would fall off the side). For each column, I calculated how many units of water it could hold using the following method:

1. Calculate the maximum of the columns to the left.
2. Calculate the maximum of the columns to the right.
3. Take the minimum of the above two values.
4. Subtract the height. The units of water is the solution (if > 0)

## Examples

```
» ./ch2.pl 2 1 4 1 2 5
5           #
4     # · · #
3     # · · #
2 # · # · # #
1 # # # # # #
- - - - - - -
  2 1 4 1 2 5

Result is 6

» ./ch2.pl 3 1 3 1 1 5
5           #
4           #
3 # · # · · #
2 # · # · · #
1 # # # # # #
- - - - - - -
  3 1 3 1 1 5

Result is 6
```
BackwardJs - KoaJS based FaaS (Function as a service) inspired web framework
Published: 2020-09-27 12:22:28

Text is cheap.. watch the Gif :D 

![preview](https://dev-to-uploads.s3.amazonaws.com/i/8j3419z1v5kmhihrx2y5.gif)

[read more on github](https://github.com/negati-ve/backwardjs-koa-function-as-a-service)
Daily Developer Jokes - Sunday, Sep 27, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-09-27 12:00:22

---
title: "Daily Developer Jokes - Sunday, Sep 27, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Sep%2027%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259082460c.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why do kayakers make bad programmers?

___A:___ Because they're afraid of waterfall.
 -->
User Experience
Published: 2020-09-27 11:59:49

User Experience which is commonly known as UX is an important factor in the design and development industry. Everyone expects a good user experience from an app or a website. How do you create a good user experience? You create a good UI(User Interface) there's a good UX. Bad UI(s) often leads to bad UX.   

                             BAD UI = BAD UX
Why use pointers at all.
Tags: beginners, c, explainlikeimfive
Published: 2020-09-27 11:58:50

I am very rusty with c, I do try to learn it but every time I get stuck on something. I need to know something that's bugging me. Not what is a pointer, but why? I can have a value but why use it as a pointer? What is the reason and benifits?
How to append element to HTML document via JS
Tags: javascript, html
Published: 2020-09-27 11:53:07

So, I'm trying to make a search-engine-like HTML file using JavaScript, and I am aware of the `document.write()` function, but is there a way to use it to append an element like a heading or an image?
`sys.exit()`
EDIT: I'm stupid. Didn't realise you could put elements in the `document.write()` function.