teleren/devto huggingface dataset:
✏️ Drawing sketchy shapes in JavaScript using RoughJS
Tags: html, javascript, beginners, roughjs
Published: 2019-11-28 23:00:46

[RoughJS](https://github.com/pshihn/rough) is a cool library to draw sketchy or hand drawn stuff on the canvas or in svg. For the example I chose svg.

Every time you reload the page, the drawing will look a bit different. This is a very simple example using lines, arcs, circles and rectangles.

I'll post some more examples using RoughJS in the future. So please consider following me to not miss any of the future articles.

```html
<html>
  <head>
    <title>RoughJS</title>
    <script src="https://rawgit.com/pshihn/rough/master/dist/rough.js"></script>
    <style>
      body {
        background: #000;
      }
      svg {
        display: block;
        width: 600px;
        height: 600px;
      }
    </style>
  </head>

  <body>
    <!-- the element we work with-->
    <svg id="svg"></svg>

    <script>
      // get the svg element
      const svg = document.getElementById('svg');
      // we tell roighJS which element we want to use
      const rc = rough.svg(svg);

      // draw the c using lines
      svg.appendChild(rc.line(40, 40, 40, 100, { stroke: 'white' }));
      svg.appendChild(rc.line(40, 40, 60, 40, { stroke: 'white' }));
      svg.appendChild(rc.line(40, 100, 60, 100, { stroke: 'white' }));

      // the o - using a circle of course
      svg.appendChild(
        rc.circle(120, 70, 60, {
          stroke: 'white',
          strokeWidth: 2,
          fill: 'yellow',
          hachureAngle: 60,
          hachureGap: 10,
        })
      );

      // draw the D using an arc
      svg.appendChild(
        rc.arc(180, 70, 60, 60, -Math.PI / 2, Math.PI / 2, true, {
          stroke: 'white',
          strokeWidth: 2,
          fill: 'blue',
          fillStyle: 'solid',
        })
      );

      // draw an E using lines
      svg.appendChild(rc.line(220, 40, 220, 100, { stroke: 'white' }));
      svg.appendChild(rc.line(220, 40, 260, 40, { stroke: 'white' }));
      svg.appendChild(rc.line(220, 100, 260, 100, { stroke: 'white' }));
      svg.appendChild(rc.line(220, 70, 260, 70, { stroke: 'white' }));

      // and putting a border around our artwork using a rectangle
      svg.appendChild(rc.rectangle(10, 10, 280, 120, { stroke: 'white' }));
    </script>
  </body>
</html>
```

Thanks for reading!
[C#] including 3rd DLL file to nuget package
Tags: csharp, nuget
Published: 2019-11-28 13:07:17

In one IOT solution with c#, I have to use nuget package instead of .Net Standard library project reference. In library project, my c# code provide methods to call 3rd dll file to manipulate device, other projects don't know the dll, just call methods of my library project. 
It works well using project reference, but after generating nuget package from library package and replacing all package reference by nuget package, the program throws exception that dll file doesn't found. After checking the nuget package, I found the 3rd dll not included in nuget package.

Before we could do this by writing a .nuspec, but it's not necessary for .Net standard library, just need to add some setting to .csproj.

- setup Build Action to Content ( I have tried embedded resource, but not work)
- add \<Pack/>\<PackagePath/>

ps: after building nuget package, dll file complied from c# code locates under lib\(targetframework) folder,  so we have to place the 3rd dll file together.

```c#
<Project Sdk="Microsoft.NET.Sdk">

  <PropertyGroup>
    ................
  </PropertyGroup>


  <ItemGroup>
    <Content Include="3rdParty.dll">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
      <Pack>true</Pack>
      <PackagePath>lib\$(TargetFramework)</PackagePath>
    </Content>
  </ItemGroup>

</Project>
```

It takes me more than one day to solve it. Hope this note can help someone.
problems occurred when i try to do a discord bot autoVoiceChannel
Tags: discord, bots, javascript, node
Published: 2019-11-28 22:21:57

Hello i try to create a Auto Voice channel .
When you join a channel (New channel)
the bot gonna create a new channel like (First-Channel)
and when you leave he gonna delete him

To create a new channel i need the 

bot.on('message', async msg => {

msg.guild.createChannel('First-channel', "voice")

}



But i want to do
 

bot.on('voiceStateUpdate', async (oldMember, newMember, ) => {

let newUserChannel = newMember.voiceChannel
  let oldUserChannel = oldMember.voiceChannel


  if (oldUserChannel === undefined && newUserChannel !== undefined) {

// here is when you join a channel and i want to put the 
msg.guild.createChannel('First-Channel', "voice") 

  here  but is not possible can you help me ?

  } else if (newUserChannel === undefined) {
    
// Here is when you leave channel

  }


})

Thanks you and sry for my  bad english
My experience in Boot camp so far.
Published: 2019-11-28 22:00:41

As the journey in the week 1 of the boot camp is reaching its end, a lot has transpired, a lot has acquired. In the beginning, I did know that I can make it even to the interview level because of what I called difficult challenges I had to complete. I have gone through that, and now I can say that was a drop of water in the ocean.  My first sight to the first paragraph of the challenge for the boot camp, I was excited to go back to coding, scrolling down to the front end part and then back-End part, I paused.  This line got my attention “You are expected to create a set of API endpoints defined in the API Endpoints Specification section and use data structures to store data in memory (don’t use a database).” that is where I am going to start my experience in the boot camp as for now. This is what I am going to discuss in today’s blog.

I had been preparing for boot camp to come, working on the challenges before join the 2 weeks boot camp. I was hoping to finish learning and doing all those projects, unfortunately I did not. Because no one ever briefed me about how it looks like to do a project with andela, I had no clue. I always did things my way and then in the end some members of the boot camp told me my work flow should look like. That is where I started struggling. Struggling with codes and learning new things was not probably fair to me until I realized ow I should start with creating stories on the pivotal tracker which is a tool to manage the progress of the project, creating a branch, working under that branch and then pushing on the getting.  I knew about these two days before the boot camp, and I had to correct that.

Working on the feedback given by the LFA (Learning Facilitation Assistant) plus the daily activities everyone has to accomplish was never easy.  There is a quote which says “you don’t have to be great to start, but you have to be start to be great”. I reflect on this quote because there are many applicants who failed to try may be because they thought they are not great fits for this, but what I can assure you is that if you have not tried something, you cannot understand the joy of being able to work things out and learn something to make your things work out. 

Now, four days of the boot camp week 1 have passed, and I await the demo part of the week one. Even if I do not have everything complete, I believe I put my all efforts in this project and I can assure myself that I learnt a lot in little time.  My experience in the boot camp was full of adventure around technology world. I worked with many people in the boot camp in order to make it a success.

All in all, it was all about learning and experiencing the tech world. I would like to thank everyone for support in this boot camp week one. If you do not hear from me soon about Andela, know that I did not make to week. I learnt a lot and I am going to implement everything in my personal projects.
 
Thank you for reading, good luck from Andela boot camper cycle 13.
My experience in Bootcamp so far.
Published: 2019-11-28 21:46:37

It's been four days at the Andela bootcamp, and it has been quite a challenging journey so far. There has been a lot of learning, as high expectations were set for us.

From what I have noticed, the bootcamp is not only about learning but also about learning fast. You don't have to be technically gifted, but the ability to learn quickly is what might help you progress.

Speaking of progress, learning fast or being technically skilled does not guarantee advancement to the next stage of the bootcamp or even making it to the Stack Up program. Good communication skills are also essential.

Having good communication skills, technical expertise, and embracing Andela's EPIC values are key to making it into the Stack Up program.
What's the ideal number of weeks in an agile sprint?
Tags: discuss
Published: 2019-11-28 21:22:42

Hello everyone,

So, what's a good length of Agile Sprint in terms of weeks? Since we are working in small projects, we are trying to use 1 week, but this seems to fast. What do you think?

I am developing small projects like [Memocards](memocards.net) and [Stackfolio](stackfolio.co) , they are quite simple, but since our sprints are too short, it seems we are focusing too much in small details instead of doing a major improvement.
I can't find where is error . SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Tags: javascript, darksky, api, help
Published: 2019-11-28 21:08:06

This is my code :



window.addEventListener('load', () => {
    let long; //longitude:
    let lat; //latitude;
    let temperatureDescription = document.querySelector('.temperature-description');
    let temperatureDegree = document.querySelector('.temperature-degree');


    //if location exist in browser
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(position => {
            long = position.coords.longitude;
            lat = position.coords.latitude;


            let proxy = 'https://cors-anywhere.herokuapp.com/';

            //Dark Sky API --- api key is in api address after forecast/
            //on the end of api change numbers for longitude & latitude in variable
            const api = '${proxy}https://api.darksky.net/forecast/09e239664b0eb3d9ee3f2e5e9463217a/${lat},${long}';

            // fetch extract info from const api
            fetch(api)
            // return fetch data to Json 
            .then(response => {
                return response.json();
            })
            .then(data=>{
                    const {temperature, summary } = data.currently;
                });
        });
    }
});
Using a single for each loop or map to go over multiple arrays
Tags: javascript
Published: 2019-11-28 21:06:36

---
title: Using a single for each loop or map to go over multiple arrays
published: true
description: A second parameter that I didn't know about on these methods makes them even more useful!
tags: javascript
---


This is a quick read but I just wanted to jot it down since I haven't seen it talked about much. In Javascript, the .forEach method and the .map method both have a second parameter that you can add that makes it so you can actually get both the item and its index.

<code>
const arr1 = [1, 2, 3, 4, 5];
const arr2 = [2, 3, 4, 5, 6];
arr1.forEach( (a, i) => console.log(a + arr2[i]) );
// alternatively, if you want to store it;
const arr3 = arr1.map( (a, i) => a + arr2[i] ); 
</code>


I do know that there are some flaws in the way I implemented the above code since if the arrays aren't the same length you will get NaN at the point where the shorter array ends. There are ways to guard against this such as using a ternary operator to check against the shorter array. Here is a working example of [that](https://repl.it/@bfuller123/IroncladCoralInfinity).

In the code above, that little i makes a wonderful addition to the language. This feature is one that I often wish I could have in other languages because the amount of times I wish I had been able to get the index of the item I was using while being able to use forEach instead of for loop has been through the roof lately. I understand why languages like C# don't have it (it is enumerating over it in a way that has no concept of indices), but man would it be nice to have this syntactical sugar.
Do you delete Git branches?
Tags: git, workflow, discuss, jira
Published: 2019-11-28 20:33:04

At my place of employment we use Jira ticket numbers in our git branches so that we can take advantage of the ticket-to-code-linking magic.

But as a projects grows, the number of remote branches gets kind of insane. I suppose this doesn't affect performance or anything. It's just a little unsightly and makes it difficult when you need to go hunting for remote branches. 

What are best practices here? 

Delete local branches and keep the remotes?

Delete remote branches and lose the Jira link on historical tickets?
What do you miss about this Website Screenshot API service?
Tags: php, javascript, saas
Published: 2019-11-28 20:18:31

Hi guys, 
I am one of the programmers, who wrote this simple website capturing service named **[Screenshot Machine](https://www.screenshotmachine.com/)**. 

![homepage](https://thepracticaldev.s3.amazonaws.com/i/6ia002vkcstw89q80vkc.png)


Users can capture any online website using form-based generator located at home page, or by calling HTTP GET based [website screenshot API](https://www.screenshotmachine.com/website-screenshot-api.php). Couple weeks ago, we added a new API for [capturing web pages as PDF](https://www.screenshotmachine.com/website-to-pdf-api.php).

I would like to know, what do you think about this service. Any ideas for new features are appreciated.

Many thanks.
My experience in Bootcamp so far
Published: 2019-11-28 19:48:24

Before talking about my experience the Bootcamp so far, I first want to reflect on the days before starting the Bootcamp, all the challenges and assessments that were given to us have been of a big value and importance to me. I was able to learn lots of things and many other tools and technologies as I had mentioned in my previous blog.

My experience so far has been one of the amazing and most challenging since I started the journey of becoming a software engineer. I was inspired by some friends about Andela and they would tell me how it would be of a big benefit to me. So when the Bootcamp started, I got to realize how focused you have to be to handle the work environment, in other words, you have to get adapted to flexibility, multitasking and many other more that we got to experience as the days kept moving. Today is the fourth day of the Bootcamp in the first week and indeed the work has been hectic, I had to quickly adapt to the change. To become successful in life you must learn how to be very flexible in any situation you find yourself in. Ok, let's try to put it this way, you need to be like a bulldozer. Quoting from the google definition, a bulldozer is known to be one of the most powerful machines, no matter the obstacle on its way, nothing can be able to stop it. So as software developers, that is something that we need to look at and it really helps the way we think and process over things and this is something about Andela, in here your way of thinking and processing will be truly tested, how fast can you think, how fast can you adapt yourself in times of change, are you able to multitask, do <em>you own your own</em>(<strong>yoyo</strong>)? etc... In my opinion, the benefit of the Bootcamp is that you get to learn all these things ahead of time, in other words, I believe we are being trained by the best to be the best. That's why when I look at people that have passed from the Bootcamp phase, there is a whole lot that they grasp in that short period of time compared to someone who would have been in coding programs that don't really help out and may not have an impact to an individual's learning experience.

I would conclude by saying that my experience has been so far the best and of course yes the most hectic one. I never thought I would spend endless nights working on feedback and other things to do, but all in all, this has been the best experience for me. I would encourage anyone reading this blog that you need to work hard if you want to get to the top, and you cannot do that without working up a sweat. You must learn how to own your own and seek always the desire of becoming the best version of yourself, therefore, you will end up becoming like that bulldozer I mentioned above, no matter the challenge, the stress, the environment, the sleepless nights, etc... it will definitely pay off, you will see the best result at the end of the day. Your success will say it all.
Recording a terminal session
Tags: tutorial, cli, learning, showdev
Published: 2019-11-28 19:17:27

---
title: Recording a terminal session
published: true
description: Create a file containing what you've done in a terminal
tags: tutorial, cli, learning, showdev
canonical_url: https://gabac.blog/posts/terminal-session-recording/
---

Whether you are writing a tutorial post on some blog, willing being able to reproduce a set of commands, just taking personal notes, or whatever the reason, it is helpful to record your terminal session, with all its commands and outputs.    

For such a task, I've come across the `script` command, which according to its man page, just makes a typescript of terminal session.

You can start with a minimal expression, such as 

```
script pepe
```

Where `pepe` will be the output file. 

Once you are done recording your terminal work, you can stop recording with `exit`. 

Then you can `cat pepe` and see how it went. 

You might find unwanted text and keystrokes as `Script started, output file is pepe`. I recommend seeing the man pages (`man script`) to learn how to improve the expected result and adapt it to your needs and taste.

In my case, I'm writing complementary material for an online course I'm working on, so it is helpful to record the terminal, instead of copying and pasting as I go, so I can quickly create guides. The form of the command I'm more frequently using is based on: 

```
script -q -k pepe 
```

The `-q` option suppress messages such as the script started and the script finished.  

The `-k` option logs keys sent to the program as well as output, omitting the datetime stamp. 

Super interesting thing: you can record sessions with a particular format and reproduce them with `scriptreplay`. Still thinking of ways this can help me create course material.
Understanding WebPack and Babel
Tags: webpack, babel
Published: 2019-11-28 19:04:11

### WebPack

According to the official documentation: 
``
Webpack is an open-source JavaScript module bundler primarily for JavaScript, but it can transform front-end assets like HTML, CSS, and images( if the corresponding loaders are included).
``
Let's understand in simple terms. 

Nowadays, we build web applications consisting of hundreds of javascript modules, lots of CSS to design our webpages and images. 

Do you know what happens when a web page loads? Let' see a snapshot of the network tab when I hit enter on ``amazon.com``

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/o1ii4eadb6gxdmgvw0aa.PNG)


The application has to literally load all the `JS`, `CSS`, `SASS` and `image` files. Thus, the load time of application will increase with an increasing number of dependency modules. 

To solve this problem, WebPack is used which basically bundles all the javascript dependency to one static asset, all CSS module to one and similar images to other assets thus reducing the load time of application and improving the app performance. 


**Advantages**

- It makes the application load faster.

To know how to configure WebPack for your web application, please check out this [link](https://dev.to)

----


### Babel 

Babel is a javascript compiler that converts `ES6( ES2015 )` JS code to `ES5` JS code. 

You must be wondering why there is a need for this conversion. Well, ES6 is a modern and fancy syntax which browsers don't understand. Now you can say if it was not browser supported why did we even build this syntax. The answer is 'Simplification' i.e doing more things by writing less. 

Thus, we can simply say Babel is transpiler which translates ES6 JS code to ES5 JS code. 

Let's see an example : 

ES6 CODE

```
const a = [1, 2, 3, 4, 5];

a.map(i => i*2);

RESULT : [2, 4, 6, 8, 10]
```

ES5 CODE ( Converted Code )

```
var a = [1, 2, 3, 4, 5];

a.map(function(i){ return i*2});

RESULT : [2, 4, 6, 8, 10]
```

To configure Babel for your React project, check out this [link](https://github.com/dipakkr/react-starter-kit)

Please give some :love: if you liked the article.
Programmer Challenges 
Published: 2019-11-28 18:44:22

Programmer Challenges | Coding
🚀 Test your coding knowledge with daily challenges about Python, Java, JavaScript, PHP and C++

Programmer Challenge is a website where you can store any text online for easy sharing. The idea behind the site is to make it more convenient for people to share large amounts of text online.

Live : http://programmerchallenge.in/  
Github : https://github.com/aryasoni98/programmerchallenge
What'sApp Group : https://chat.whatsapp.com/CRoMVodjftKDrI1tatMUAE
A Big Thanks to All DEV Mods
Tags: gratitude, meta
Published: 2019-11-28 17:56:14

---
title: A Big Thanks to All DEV Mods
published: true
description: Appreciation for DEV Mods
tags: gratitude, meta
---

I'd like to extend a big thank you to all the [DEV Mods](https://dev.to/community-moderation) out there helping to foster a kind and inclusive community. ❤️ 

Also, a special thanks to the [Tag Mods](https://dev.to/tag-moderation) who are focused on keeping the site well organized and highlighting our best articles. 🙏

I feel incredibly lucky to work alongside such an awesome team of volunteers!
A huge thank you to our 2019 Gold sponsors!
Tags: meta, gratitude
Published: 2019-11-28 17:48:06

---
title: A huge thank you to our 2019 Gold sponsors!
published: true
description: Thanking the 2019 Gold Sponsors for the DEV Community
tags: meta, gratitude
---

On this Thanksgiving, I want to offer a note of gratitude to our 2019 Gold sponsors.  These benefactors and partners provide critical support to the DEV Community.

In particular, I want to highlight **DigitalOcean**, which has continued to be an amazingly consistent and massive supporter of the DEV Community.  It was wonderful collaborating closely for this year's Hacktoberfest celebration.

And now, a huge thank you to:

{% organization digitalocean %}
{% organization gocd %}
{% organization triplebyte %}
{% organization cloudbees %}
{% organization raygun %}
{% organization squaredev %}
{% organization educative %}
{% organization frontendmasters %}
{% organization scoutapm %}
{% organization codestream %}