teleren/devto huggingface dataset:
Why Learn Javascript
Tags: javascript, beginners, vue, react
Published: 2019-10-09 08:45:41

JavaScript has clearly become one of the most popular languages in the 21st century ever since the introduction of the server-side JavaScript [NodeJs](https://nodejs.org/en/). A lot of frontend frameworks have popped up which means you can become a full-stack developer with one language and of course, you need a bit of HTML5 and CSS3 skills to sexy up your frontend.

Being a JavaScript developer doesn’t mean you are just a web developer you can also become a cross-platform mobile web application developer with the help of frameworks like [react-native](https://facebook.github.io/react-native/) , [ionic](https://ionicframework.com/) to mention but a few. You can also do some machine learning and implement some machine learning models using [TensorFlow.js](https://www.tensorflow.org/js) this means your web applications will be smarter using just JavaScript.

Game development is also now possible with JavaScript using frameworks like [p5.js](https://p5js.org/) there are some [YouTube Videos](https://www.youtube.com/redirect?redir_token=y6mR6od3kaBawCMu66lyr90G2yN8MTU2ODU3NjE5NkAxNTY4NDg5Nzk2&event=video_description&v=AaGK-fj-BAM&q=http%3A%2F%2Fthecodingtrain.com%2FCodingChallenges%2F003-snake-game-p5.html) with examples for this.

The JavaScript ecosystem and community has become one of the biggest programming communities on the internet. This is because of its popularity and the node package manager ([npm](https://www.npmjs.com/)). The package manager accesses over a million repositories of open source code packages that mostly simplify your development process. If you want to manipulate time and dates there is [momentjs](https://momentjs.com/), if you want to hash your passwords and secrets for security and authentication there [bcryptjs](https://www.npmjs.com/package/bcryptjs), if you want a series of utility functions to help manipulate strings, arrays, objects and many more there is [lodash](https://lodash.com/). Long story short with npm there is no need to rewrite code if common fixes there is a high probability that there is a npm package that does exactly the same so you just have to utilize it.

In conclusion, JavaScript is a language just like any other mainstream language out there it is no longer bound to the browser like the old days so I would recommend it as a starting point if you are new to development and programming. To get started take the JavaScript Algorithms and Data Structures course from [FreeCodeCamp](https://freecodecamp.org/). If you haven’t written any JavaScript and you are now a good developer with some other language I recommend you get started with a few JavaScript.

These three are popular JavaScript front frameworks to look into and I have personally tried them

* React
* Vue
* Angular (TypeScript Involved Another Story)
Keep motivation to work on personal projects outside of work?
Tags: programming, tips, productivity, watercooler
Published: 2019-10-09 08:45:22

---
title: Keep motivation to work on personal projects outside of work?
published: true
description: Tips from the community (hopefully) to get the motivation and keep on working for personal growth 
tags: programming, tips, productivity, watercooler
---

I wanted to have a small thread where (hopefully) the community can put their tips and tricks on how to stay motivated after a full day of work (in a programming industry or not).

I personally suffer from this quite a lot, especially as I've gotten older, the procrastination side of me or the mental block kicks in quite frequently.

Now I'm not saying if you have had a hard day at work and are mentally drained you should force yourself to work on personal stuff, don't do that! That's a fast track to burnout!

My tip to keep focused on personal projects is to try working in/with a community. You don't need to work on a group project but just being in a community that can help you, inspire you, show off too or even hold you accountable for watching Netflix for 5 hours straight instead of spending at least an hour programming.

Anyone else got other tips? please share, as I'd personally love some new tips and also think we'd all benefit​ from it.
Save your links from phishers.
Tags: railssecurity
Published: 2019-10-09 08:26:58

 While [Pull Request](https://github.com/rails/rails/pull/28035/commits/9e363e0e770c5784c43ea68b74a29f58a41f15fd) fixing issue with [OWASP Tabnabbing](https://www.owasp.org/index.php/Reverse_Tabnabbing) is still open... since Feb 16, 2017, our shiny Rails applications are in danger. But wait no longer! Just put code like this:
```ruby
# frozen_string_literal: true

module ActionView
  module Helpers #:nodoc:
      module UrlHelper
      # Same as #link_to, but also adds rel="nofollow" and rel="noopener" if target="_blank"
      #   rel='noopener' is added to mitigate OWASP Reverse Tabnabbing
      #
      #   external_link_to "External link", "http://www.rubyonrails.org/", target: "_blank"
      #   # => <a href="http://www.rubyonrails.org/" target="_blank" rel="nofollow noopener">External link</a>
      def external_link_to(name = nil, options = nil, html_options = nil, &block)
        html_options, options, name = options, name, yield if block_given?
        html_options ||= {}
        html_options.stringify_keys!

        html_options['rel'.freeze] = "#{html_options['rel'.freeze]} nofollow".lstrip
        html_options['rel'.freeze] = "#{html_options['rel'.freeze]} noopener".lstrip if html_options['target'.freeze] == '_blank'.freeze
        link_to(name, options, html_options)
      end
    end
  end
end
```
into one of initializers and enjoy bit of safety. This will add new url helper `external_link_to` to your disposal, that will mitigate Reverse Tabnabbing endangering your application.

Or, if you feel adventurous today... lets patch `link_to` itself!

```ruby
# frozen_string_literal: true

module ActionView
  module Helpers #:nodoc:
    module UrlHelper

      def link_to(name = nil, options = nil, html_options = nil, &block)
        html_options, options, name = options, name, block if block_given?
        options ||= {}


        html_options = convert_options_to_data_attributes(options, html_options)

        html_options['rel'.freeze] = "#{html_options['rel'.freeze]} nofollow".lstrip
        html_options['rel'.freeze] = "#{html_options['rel'.freeze]} noopener".lstrip if html_options['target'.freeze] == '_blank'.freeze

        url = url_for(options)
        html_options["href".freeze] ||= url

        content_tag("a".freeze, name || url, html_options, &block)
      end
    end
  end
end
```

Even better! Now all your existing links with `target="_blank"` gonna be safe from nasty fishers.

Happy coding and stay safe.
Generation of pieslice without using library function in C.
Tags: c, computerscience, beginners
Published: 2019-10-09 08:04:21

I was given an assignment to make a "pieslice" using the "graphics.h" header file of the BGI library of C,but without using the built-in function "pieslice()" of that header file.
I used the parametric equation of circle,but unable to generate the figure using the graphics.h function. Some help would be nice. Thank you in advance.
My code so far:

#include<stdio.h>
#include<graphics.h>


static const double PI =3.141592

int main()
{
    int gd=DETECT,gm;
    initgraph(&gd,&gm,NULL);
    int xc,yc,r,st_angle,ed_angle,k;
    printf("Enter the centers of pieslice:\n");
    scanf("%d %d",&xc,&yc);
    printf("Enter the radius:\n");
    scanf("%d",&r);
    printf("Enter the starting angle:\n");
    scanf("%d",&st_angle);
    printf("Enter the end angle:\n");
    scanf("%d",&ed_angle);


    for(k=st_angle; k<=ed_angle;k++)
    {   
        double radians =(PI /180.0) * k;
        int X = xc+ cos(radians) * r;
        int Y = yc+ sin(radians) * r;
        putpixel(x,y,WHITE);
        delay(5000);

    }
void wait_for_char()
{

    //Wait for a key press
    int in = 0;

    while (in == 0) {
        in = getchar();
    }
}
getch();
}

While running the code[i am using gcc compiler of Ubuntu 16.0.4],i am encountering these errors:
[xcb] Unknown sequence number while processing queue
[xcb] Most likely this is a multi-threaded client and XInitThreads has not been called
[xcb] Aborting, sorry about that.
a.out: ../../src/xcb_io.c:274: poll_for_event: Assertion `!xcb_xlib_threads_sequence_lost' failed.
[xcb] Unknown sequence number while processing queue
[xcb] Most likely this is a multi-threaded client and XInitThreads has not been called
[xcb] Aborting, sorry about that.
a.out: ../../src/xcb_io.c:274: poll_for_event: Assertion `!xcb_xlib_threads_sequence_lost' failed.
Aborted (core dumped)
Rails Seed tasks
Tags: todayilearned
Published: 2019-10-09 08:02:36

---
title: Rails Seed tasks
published: true
description: 
tags: #todayilearned
---

A few tasks will load your seed data

```
rails db:setup
rails db:reset
```

This surprised me. I had thought they were only loaded when `db:seed` is run specifically.
Token vs Session Authentication
Tags: webdev, security, javascript, token
Published: 2019-10-09 07:52:05

Originally published at https://www.codespot.org


## HTTP (HyperText Transfer Protocol)

HTTP is a protocol for communication between the client and the server. HTTP is stateless, which means each request doesn't know of any previous actions. For example, when a user logs in, and then navigate through the app, the server will not know that we just logged in without session or token authentication. 

<br>

## Session Authentication

In session authentication, the server is responsible for creating a session for the particular user when the user log's in, after that the id of the session is stored in a cookie on the user browser. For every request sent by the user, the cookie will be sent too, where the server can compare the session id from the cookie with the session information stored on the server so the user identity is verified.

<br>

## Token Authentication

In token authentication, the server creates a JSON Web Token (JWT) and sends the token to the client. The JSON Web Token usually is stored in a local storage or in the cookie, and it is included in every request made by the user. The server will validate the JSON Web Token. The JSON Web Token authentication is a more modern approach used in newer web applications and for mobile devices. The user state is not stored on the server with this approach instead it is stored in the token. 

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

## Scalability
Generally, the JSON Web Token scales much better with the size of the application because it is stateless, there is no need user information to be stored, on the other side sessions can use a lot of the server resources if the application has a lot of traffic.

<br>

## Security
The JSON Web Token usually is either stored in local storage or cookies, and JavaScript has the access to the storage, this simply means that JSON Web Tokens might be vulnerable to XSS (Cross-site Scripting), that's why very sensitive data should not be stored in the Local Storage. I case when the JSON Web Tokens are stored in the cookies are vulnerable to CSRF (Cross-site Request Forgery) attacks. One way to prevent the CRSF attack is to be sure that the cookie is accessible by only your domain. The JWT also should be with short expiration times and HTTPS/SSL should be used for safe client and server transmission.

<br>

## Which Is Better?

While sessions and JSON Web Tokens are both viable options, in some situations one is better to be used over the other. For smaller and medium websites, when we got just user login session authentication is usually good. For larger web sites and applications, when we need to handle a lot of requests, JSON Web Token is much better because of scaling.
What conventions & widely-accepted libraries exist for building complex backend Node.js apps?
Tags: node
Published: 2019-10-09 07:24:35

---
title: What conventions & widely-accepted libraries exist for building complex backend Node.js apps?
published: true
description: 
tags: #node
---

I'm starting to build a new app this month. It will be highly relational with many models like organizations, contacts, conversations. The codebase will grow quickly and in a year it will have more than a hundred models and controllers.

The frontend web and backend API components will be logically separate from the outset as there will be multiple front-ends, a public API, and a complex React app that will need to fetch and update a lot of data.

For the initial frontend, we're planning to use Next.js. The server-side rendering will be important to serving dynamic data quickly to users. I don't want to show someone a loading spinner just because they refreshed the page.


Next has some nice conventions: pages go in `/pages` and API routes go in `/pages/api`. In our case, the Next.js app will just call our API to get data and it won't have to contain all our models, business logic, and data access code. It doesn't have opinions about that stuff anyway.

Which brings me back to my main question - how is today's backend Node.js world building complex apps with models, business logic, and data access?

I've mostly built apps like this in Ruby and Rails before. This is the sweet spot for Rails and I've never felt more productive building and testing apps than with Ruby & Rails.

But I at least want to consider alternatives and see what the Node world's answer is to these questions in 2019.

Here are a few things I'm curious about:

- Where do you put your code? How is the codebase organized?
- On average, how many lines of code do your models have? Controllers?
- Do you have different types of objects than models and controllers? What are they and how much code lives in there?
- How "custom" is your setup? Does it look similar to codebases at other companies? How long does it take to get new engineers up-to-speed?
- How good is your test coverage? How easy or painful is writing tests? Do you see engineers cutting corners? Do engineers TDD or is testing an afterthought?
- How do your debugging tools work? Are you just doing console.log or do you use a real debugger?
- What are the most helpful dependencies you are using? For things like authentication, i18n, data access / ORM, testing, test mocks and fixtures, model validations, sending email, receiving email, rendering views, building JSON, logging, backend jobs, pubsub
- How mature are the dependencies you're using? How many times have you had to throw one out and build your own?
- Does your ORM or data access layer work on the console? If you want to read or manipulate data outside your server process, how do you do it?
- Are you using REST, GraphQL, or both?
- Are you using TypeScript?

That's a huge list of questions so I'll stop there. Sharing your perspective on just on or two of them would be really helpful.
How I started contributing to open source
Tags: hacktoberfest, opensource, github, javascript
Published: 2019-10-09 07:15:22

> Photo by Dino Reichmuth on Unsplash

## I'm going to do it! 💪

It's now been more than 3 years since I started my career as a javascript developer and it's been a while since I wanted to start contributing to open source. 

Why didn't I start before? Because like many I think, I was a victim of the imposter syndrome. A very good article on the subject that I found [here] (https://dev.to/lewismenelaws/the-imposter-syndrome-why-you-feel-like-a-fake-34f3). A feeling that some people should know but nevertheless powerful. 😰

The hacktoberfest was an opportunity for me to start (or an excuse? 🤭).Small contributions to start like on the [Yvonnick Frin](https://github.com/frinyvonnick) repository on [gitmoji-changelog](https://github.com/frinyvonnick/gitmoji-changelog) where I did for example: 

a PR on the addition of .editorconfig file

{% github https://github.com/frinyvonnick/gitmoji-changelog/pull/124 %}

a PR on updating the README file to include instructions for use with npx.

{% github https://github.com/frinyvonnick/gitmoji-changelog/pull/123 %}

thank you for validating them 🙏 

And that's not all, on the [carloscueta](https://github.com/carloscuesta) repository where I proposed 2 PRs on adding gitmoji. 

addition of the emoji 💂

{% github https://github.com/carloscuesta/gitmoji/pull/339 %}

addition of the emoji 💫

{% github https://github.com/carloscuesta/gitmoji/pull/340 %}

which are still awaiting validation.


That being said, contributing, seeing your work validated and integrated into different products, gives you a sense of pride 🤩 A sense of belonging to a caring community with which I know I will continue to learn a lot. It pushes me to go further in side-project (which I would put in public on Github of course) and to continue to contribute and to be able to bring my paw!

This hacktoberfest is only the beginning of the journey!🥳

![hackatoberfest successful](https://thepracticaldev.s3.amazonaws.com/i/4cb40kd3qkqnjnedzg4q.png)
Css Gradients Generator
Tags: css, javascript, react
Published: 2019-10-09 07:09:34

## **I have created this small web app for generate cool css gradients. hope you like it.**

### *Stack*

- React (Create-React-App)
- Try the [live demo](https://gradients-generator.netlify.com)

![screenshot](https://raw.githubusercontent.com/Mister-maker/gradient-generator/master/screenshot.png)
Executing BASH script on Multiple Remote Server
Tags: bash, linux
Published: 2019-10-09 06:38:57

Check out my latest post on the devdojo.com website!

It is a quick guide on how to execute a BASH script on multiple remote Linux servers.

Link to the post:

https://devdojo.com/tutorials/executing-bash-script-on-multiple-remote-server

I strongly encourage everyone to go ahead and check out the devdojo.com website, there's a lot of valuable content there.
400,000 ephemeral containers: testing entire ecosystems with Docker
Tags: docker, ruby, techtalks
Published: 2019-10-09 06:10:34

A couple of years old but still a great introduction to Docker and a testing methodology that can be readily translated to other languages and ecosystems. Delivered at Linux Conf AU, 2017, by [Daniel Axtens](https://twitter.com/daxtens?lang=en).

The talk is on [YouTube](https://www.youtube.com/watch?v=v7wSqOQeGhA), and the PDF of the slides on [Github](https://github.com/daxtens/400000-ephemeral-containers/blob/master/talk.pdf).
What is Programming
Tags: programming
Published: 2019-10-09 05:51:26


Programming is the process of instructing computers to do tasks by creating alorithmns and converting them into lines of code. It is a lucrative but unforgiving field of work that requires the zen of a monk and the stubborness of a donkey. You will run into many syntax errors, parse errors and functional errors.

Most scholars consider Ada Lovelace to be the first programmer. Ada Lovelance was one of the assistants of Charles Babbage, the man responsible for developing the concept of the Analytical Engine.
Cross Browser Testing in Selenium Using Lambdatest
Tags: selenium, java, automationtesting, lambdatest
Published: 2019-10-09 05:49:24

Lambdatest is an online platform which allows you to perform Automated and Live Interactive Cross Browser Testing on 2000+ Browsers and Operating Systems on real time. 
Using Lambdatest you can test both public websites and locally hosted applications. You just need to connect with Lambda Tunnel and you are all set to test your local webpages.
This is very useful specially for scenarios where you are supposed to perform testing with multiple combination of browsers and operating systems. This will reduce overall execution time drastically, as we are going to perform parallel cross browser distributed testing.
They do support Screenshot testing, Responsive testing and Smart UI testing. One click bug logging to bug tracking tools and integration with amny 3rd party tools like Jnekins, Teamcity, Gitlab, Jira, Github, Bitbucket etc.

More details here: https://www.lambdatest.com/
I made a GitHub repo for data structures and algorithms in Python to help in interview prep
Tags: python, contributorswanted, hacktoberfest
Published: 2019-10-09 05:33:12

Visit the repo here - https://github.com/prabhupant/python-ds

I have been using open source software in my daily life for over 2 years now. The open source community has helped me in my studies, interview preparations and in general to become a better software engineer. The community has given a lot to the world and because of open source, softwares and computers have become so pervasive in our daily lifes. This is the time for me to give something back to the community.

While preparing for my interviews, I did many Leetcode, HackerRank and GeeksForGeeks problems in Python and felt that if there was a GitHub repo where I could find implementations of all data structures and algorithms, it would help many students. So I set out to compile all the problems I did in a single place. Hence I created the [python-ds](https://github.com/prabhupant/python-ds) repo.

Feel free to raise issues, file PR and contribute to this repo :smiley:

And don’t forget to fork and star :wink:
Day 2
Tags: codenewbie, selftaught, beginners
Published: 2019-10-09 05:26:51

Today I completed my lesson on CSS Grid. I was following a tutorial on a newsgrid website.

This time, I decided to watch the videos first and go back and attempt it myself. I normally code along but I felt that I was not taking in what was going on as much as I could. When I code along, I feel like I am only trying to complete it quick. Whereas, if I watch the video first, I understand better what I am doing.

I always type out the code instead of copying and pasting and one of the things that tends to happen is that I make a typo and suddenly something doesn't work. There is always a moment where I panic and think "OMG, I am copying this and I still can't get it". Then I go back and follow the logic to see where it breaks.

This happened again earlier. I was doing a grid that had 3 columns and each cell had a combination of text and image or just text. I could see the rows but I could not see the second and third columns. I was looking into the Developer tools on Chrome and Mozilla and could see that the grid-template-columns was applied. I then started looking at the result on the screen and noticed that the images were larger than they should be. I looked back in the CSS file and I had made a typo when setting the width. The images were still in their current sizes and pushing the other columns.

One of the biggest things that I learned with this project is the concept of containers. As we work with Flexbox and Grid, we need to understand the relationship between the container and the child items. I will research and write something regarding container and how to use them in HTML. 

This is the result of one of the pages of the project.

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

Tomorrow I will attempt to do one on my own.


On the next one!
15 Common JavaScript Questions
Tags: javascript, webdev, beginers
Published: 2019-12-26 09:04:12

*[15 Common JavaScript Questions](https://blog.soshace.com/15-common-javascript-questions/) was originally published at [Soshace.com](https://soshace.com/). Soshace is a hiring platform for web developers: [hire a developer](https://soshace.com/developers) or [apply for a remote job](https://soshace.com/jobs).*