teleren/devto huggingface dataset:
Which programming language should you learn?
Tags: programming, codenewbie, computerscienc, webdev
Published: 2021-07-14 06:32:20

If you're a newbie in coding then I think you will definitely came across with this question.

One of the most common question one ask or search before entering the world of programming.

Which programming language should I start with?
So here is the answer of your question with pros and cons of top programming language in 2021.

![SWIFT programming language logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bdo446205psjtqtr7o3k.png)

1 SWIFT --
This is the only and best language you can use to develop apps on Apple devices. Wheather it's a Apple watch, iPad,Macs or even Apple TV's.

Now we will discuss Pros and Cons of it--

Pros --
Well optimized,
Big Community,
Fast.

Cons --
You should have Mac book,
Lack of support for older ios versions,
Released in 2014 so Tools and libraries are limited.

![Python programming language logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yatjgl4k7youbwvrdh67.png)

2 PYTHON --
Python does not need any introduction it's one of the most beginners friendly programming language ever.It is one of the most popular language and widely used by every organization from Data science to AI.
So for beginners it is best language to start.

Pros --
Easy syntax,
Tons of resources,
Open-source.

Cons --
Slow,
Not mobile device friendly,
Memory-hungry.

![JAVASCRIPT logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zdmnzw0dwaoba5y6axd1.png)
3 JAVASCRIPT --
Scripting language, if you are interested in web development or in cyber security than my friend this language is for you. It is often considered as the brain of website.

Pros --
Popularity,
Tons of libraries,
Versatility.

Cons --
Hard to master,
Security issue,
Cross-browser issue.

![kotlin programming language logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/neyq20zp5se5afkgldm3.png)
4 KOTLIN --
Same as SWIFT but for ANDROID.
This is probably the best language you use to develop APPS for any Android devices.

Pros --
Easily maintainable,
Interoperability with JAVA,
Clean Syntax.

Cons --
Not many resources,
Resources-hungry,
Long compile times.

So that's it hope you find this useful.
If you want to know the best resources to learn any of the above language comment below.

Thank you.
Update from old Java version to OpenJDK 16 windows
Tags: java, opensource, windows, tutorial
Published: 2021-07-14 06:27:12

---
canonical_url: https://cybeartron.hashnode.dev/how-to-update-java-8-to-16-for-free
---
#Hwlo There!!!! So do you want to update your JAVA/JDK version for whatsoever reason? This is the right place!!!!


![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ycdi4ta2joefsttcl34x.png)
 
So I will teach you how to Do that now! We will use OpenJDK for this (cuz its free and open source) 
##

1) We need to mess with the system environment variables! To do that follow the link : This one

2) Remove the java path from PATH variable for both user and system. If there is a JAVA_HOME var then remove the value.

3)Download Open JDK 16 from This site

4)Extract the zip at any place

5)Go to the bin folder. It will be something like this (the_path_before)/openjdk-16.0.1_windows-x64_bin\jdk-16.0.1\bin

6)Copy the path and then go to your system variables

7)Add the path to the PATH variables in both places (user and system) and to the JAVA_HOME variable. If you dont have it there, create one and add the same path value to it!!

8)Click ok and close the tab.

9)In cmd or other terminal type the following command
```
java -version
```
Then if you get the below given result then congrats you jus installed java 16
```
openjdk version "16.0.1" 2021-04-20
OpenJDK Runtime Environment (build 16.0.1+9-24)
OpenJDK 64-Bit Server VM (build 16.0.1+9-24, mixed mode, sharing)
```
Cheers? POGGERS!!! https://hwlo.tk/java-update-openjdk-16
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kpgtqq2rnjwy5aaoz625.png)
Weekly web development resources #80
Tags: weekly, webdev
Published: 2021-07-14 06:26:16



______

##[Copy & Paste CSS](https://copy-paste-css.com/)
[![Copy & Paste CSS](https://wweb.dev/weekly/content/80/copypaste.jpg)](https://copy-paste-css.com/)
Inspiration for buttons, box-shadows and color-palettes with easy copying.

______

##[Front-End Boilerplates](https://www.smashingmagazine.com/2021/06/useful-frontend-boilerplates-starter-kits/)
[![Front-End Boilerplates](https://wweb.dev/weekly/content/80/boilerplates.jpg)](https://www.smashingmagazine.com/2021/06/useful-frontend-boilerplates-starter-kits/)
An article with a bunch of useful front-end boilerplates and starter kits.

______

##[UI Snippets](https://ui-snippets.dev/)
[![UI Snippets](https://wweb.dev/weekly/content/80/uisnippets.jpg)](https://ui-snippets.dev/)
A small collection of hover effect UI Snippets.

______

##[Nextra](https://nextra.vercel.app/)
[![Nextra](https://wweb.dev/weekly/content/80/nextra.jpg)](https://nextra.vercel.app/)
A  Next.js based static site generator, with no coding involved.

______

##[use-color](https://github.com/junhoyeo/use-color/)
[![use-color](https://wweb.dev/weekly/content/80/use-color.jpg)](https://github.com/junhoyeo/use-color/)
A powerful color hook that includes parsing, stringifying and  type checking at compile time.

______

##[Difftastic](https://github.com/wilfred/difftastic)
[![Difftastic](https://wweb.dev/weekly/content/80/difftastic.jpg)](https://github.com/wilfred/difftastic)
An experimental structured diff tool that compares files based on their syntax.

______

##[Modern Unix](https://github.com/ibraheemdev/modern-unix)
[![Modern Unix](https://wweb.dev/weekly/content/80/modern-unix.jpg)](https://github.com/ibraheemdev/modern-unix)
A collection of modern/faster/saner alternatives to common unix commands. 

______

##[Indiepen](https://indiepen.tech/)
[![Indiepen](https://wweb.dev/weekly/content/80/twitter-card-indiepen.jpg)](https://indiepen.tech/)
An independent and privacy-friendly solution to present your code examples. 

______

##[WiFi Card](https://wificard.io/)
[![WiFi Card](https://wweb.dev/weekly/content/80/wifi-card.jpg)](https://wificard.io/)
Generate a a simple card with your WiFi login details for printing.

______

##[maildog](https://github.com/edmundhung/maildog)
[![maildog](https://wweb.dev/weekly/content/80/maildog.jpg)](https://github.com/edmundhung/maildog)
Host your own email forwarding service on AWS and manage it with Github Actions.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
Use multiple layouts at multiple pages in next.js
Published: 2021-07-14 06:25:01

## Next.js
https://nextjs.org/

## Layout
https://en.wikipedia.org/wiki/Page_layout

## How to use in next.js
```js
// pages/_app.js

import LayoutDefault from '../components/LayoutDefault'

export default function MyApp({ Component, pageProps }) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout || ((page) => <LayoutDefault>{page}</LayoutDefault>)

  return getLayout(<Component {...pageProps} />)
}
```

#### Change layout on another page
```js
// pages/any_thing.js

import AnotherLayout from '../components/AnotherLayout'

export default function Page() {
  return {
    /** Your content */
  }
}

Page.getLayout = (page) => (
  <AnotherLayout>
{page}
  </AnotherLayout>
)
```
HTML tags | header
Tags: html, tags, header
Published: 2021-07-14 06:19:16

It is used to **include introductory content or a set of links to navigate**. Usually includes a header (`<h1>`-`<h6>`), a logo, a search form, information about the author, etc.

Can be repeated within the same document but cannot be used within `<footer>`, `<address>` or another `<header>`.

It does not contribute to the outline of the document.

It has an **implicit ARIA role** `banner`, or `generic` if it is a descendant of an `<article>`, `<aside>`, `<main>`, `<nav>` or `<section>` or of an element with an `article`, `complementary`, `main`, `navigation` or `region` role.

- Type: *block*
- Self-closing: *No*
- Semantic value: *Yes*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header) | [Support](https://caniuse.com/mdn-html_elements_header)
Trick the Github contribution graph and get more green squares.
Tags: github, githunt, opensource, javascript
Published: 2021-07-14 06:18:42

## Introduction
Hey developers, today I am sharing a cool javascript script which you can use to get more green squares on your Github profile, even in the past days, weeks, months or even years, even if you have zero contributions on your profile, you can make it to as much as possible in just seconds with this script.
Not even this, you can also make contributions for future dates, and then just see them rolling on your profile as green squares on those dates. 
It is all possible with this cool script.
<em>Before:</em>![From ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqg5rm81a5ubepxwoqwi.png)
<em>After:</em>![To](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/td0l1l808schwrng4np3.png)
## How does that work?
Every activity you do from your account like creating a repo, commenting, pulling, merging, etc as a contribution. It does not matter if you do it on your repos with only you contributing, or a repo with 100k stars, its a contribution in Github's eyes.
So we are just going to make use of this feature and create a new repo(private) on our profile and then write a JS script which will automatically change the content of a file(temporary JSON file) as much times as we want in just few seconds. And voila, we should get the magical green squares as reward.
(note: You might wanna enable the 'show private contributions on profile' in your Github contribution chart options as shown below.)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gsyy41igiytg5mbcwukc.png)
## The Project
Here is the <a href="https://github.com/thesmartdeveloperr/Github-Bot">
Link to Github Repo
</a>, feel free to clone or fork it and try it out for yourself. Do give me a follow if you like the project.

## Credits
This idea is inspired from a youtube video i came across recently. Here is the video link, it contains step by step coding and explanation plus demo.
<a href="https://www.youtube.com/watch?v=2q--gA97caM">Youtube Video</a>

## Caution
<b>This article is only for educational purposes</b>.
I don't encourage anyone to use this to your unfair advantage over others. However you are free to just try it and learn.
Need help regarding Responsive layout for a portfolio project.
Tags: html, css, ui, javascript
Published: 2021-07-14 06:00:46

I am currently working on a portfolio project and I have used some background images for styling.

[This](https://www.awesomescreenshot.com/image/10604235?key=00f771a8e60ee437f8675f846a9f8fc1) is what the website looks on my device. But when I switch to responsive mode then everything just gets messed up. I can do this with media queries but since it just gets messed up by every pixel, is there any other solution for this.

I have used multiple background images for this. If there is any more efficient way to achieve this kind of layout then please do let me know.

You can check out the code from this [link](https://github.com/koolkishan/purple-portfolio).
Javascript  conditional operator
Tags: javascript, condition, operator, clean
Published: 2021-07-14 05:31:39

Let's implement a simple function that takes two parameters " width" and " height" of a picture, and suppose to return true if our picture is a landscape and return false if it isn't.

we can handle it with this simple code 
```
if(width > height) return true
return false
```

but we can write it in a better way if we use a conditional operator
```
return width > height ? true : false
```

we can improve it even further more like this
```
return width > height
```
Putting Things Together
Published: 2021-07-14 04:46:25

We've been working on the 'Cow List' sprint this week. I'm in a pretty good place having made a solid connection between the database and a React component that consumes queried data.

This is the part of learning that I really enjoy. Using the tools and building the muscle memory of making small things work. It feels like weeks since we last handled React but that was only seven or eight days ago. Sure, I remembered a bunch, but I feel like I forgot even more. This project is a great refresher and makes me want to continue the repetition of building these React components to become super fluent in the framework. I want to revisit the last React project (Movie List) and, as my classmate put it, speed run it. (It'd be a *slow walk* the first time, but after a couple reps it'd be run.)

Another classmate said:

>I'd rather have as much muscle memory as I possibly can with getting the structure of the app going.

I fully agree.

I can feel callbacks coming along. Same with Express. They're all related. Practice, practice, practice.

###A few things I picked up today:

* `npm run watch` to get babel to transpile. The command runs `webpack.config.js`. I'm not exactly what sure what goes on but it's a worthy note nonetheless.

* `import` in the frontend, `require` in the backend (Node).

* Time to learn 'lifecycle' stuff in React. Used `componentDidMount` for the first time to make an .ajax call. It was good practice with callback style functions, too.
Quick Way to Download Putty in 2021
Tags: putty, windows, linux, mac
Published: 2021-07-14 04:44:38

Puttykey is a <a href="https://www.puttykey.com/">Key Generator Tool</a> for creating pairs of public and private SSH keys. It is one of the components of the open-source networking client PuTTY. 

Although originally written for Microsoft Windows operating system, it is now officially available for multiple operating systems including macOS, Linux.

Puttykey.com is the graphical tool on Windows OS. While on the other side, Linux OS has the only command-line version could be accessible using SSH commands.

The aforementioned public-key cryptosystems principally focus on secure data transmission and digital signatures.

Although PuTTYgen collects keys in its native file format i.e. .ppk files, the keys can easily be converted to any file format. 

For Windows, the software interface is PuTTYgen.exe, whereas, for Linux OS the command-line adaptation is available using SSH commands.

<h2>History of Putty Key Generator Tool</h2>
PuTTYgen being a component of the terminal emulator PuTTY does not have to be downloaded separately, hence, comes with the PuTTY .msi installation package.

You can follow the simple steps to download PuTTYgen software for your system. That is the reason why you don’t need to download PuTTYgen separately.

Once you download PuTTY software, you will be able to install and run PuTTYgen easily in no time. Below is the complete instruction about how to download and install PuTTY on <a href="https://www.microsoft.com/en-in/windowsWindows">Windows</a>.

Apart from that, it is also integrated into third-party programs such as WinSCP installation package. Below you can find a complete PuTTYgen download and installation guide for all operating systems.

<h2>Download PuttyKey on Windows</h2>
 <img src="https://www.puttygen.com/wp-content/uploads/2018/06/puttygen-run.png" width="400" height="1000" alt="Download Putty"/>

To download PuTTYgen the primary requisite is to acquire the copy of PuTTY installation package.

For the 64-bit operating system, one must install the 64-bit version of PuTTY, i.e. putty-64bit-<version>
installer.msi.Similarly, for the 32-bit operating system, the respective 32-bit version of PuTTY, i.e. putty-<version>-installer.msi needs to be installed.

<h2>Conclusion</h2>
To get PuTTY, go to PuTTY Installation Download page, whereby the complete installation package will be available with setup instructions, installation guide, and download links to all other components of PuTTY such as putty.exe, pscp.exe, psftp.exe, puttytel.exe, plink.exe, pageant.exe and putty.zip.
Feathers or Express?
Published: 2021-07-14 04:44:27

I've recently come across something called Feathers https://feathersjs.com/ and really like it alot. I'm about to start a project and currently evaluating the stack to use and can't decide whether to use Feathers or Express. Building it with Express would be great for showcasing skillset, but if not for that I'd probably go with Feathers.

Thoughts?
Create disposable development environment in remote server using Docker
Tags: aws, ubuntu, vscode, remotecontainers
Published: 2021-07-14 04:20:55

Its easy to create development container using remote containers extension of VS Code, but what if we want to create such disposable development server in remote server using docker? In this article I will show you how to create user in ubuntu container runing on docker, also i will provide steps to connect that disposable container to VS Code.

Firstly connect to remote server using remote ssh extension in VS Code.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lfexi64ft13pmx50e4zs.png)

I assume you already installed Docker and added user into docker group, to create disposable development environment we will use ubuntu:focal image from docker registry.

Run this command to create detached interactive ubuntu server

docker run -dit ubuntu:focal /bin/bash

To create container with bind mount, run this command in any folder

docker run -dit -v $(pwd):/root — name test5 ubuntu:focal /bin/bash

In Docker section of VS Code check where your server and right click it (Incase you don't have docker features in VS Code, Install Docker extension)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6484t4i2osg3yw1f3h9.png)

Select Attach Visual Studio Code, now VS Code will connect to the docker container running in remote server.

You can use development container as a root user

To create user in container follow below steps:
firstly we have to add sudo package to give admin previleges to the user

apt update

apt install sudo

adduser tejas
(tejas is the name of user)
(Create password for user and add details)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vtluz1ysjaj67p8shmbz.png)

after that add user in groups to get admin previleges.

adduser tejas sudo

adduser tejas tejas

groups tejas ( to check user’s is groups)

now switch to user from root

su - tejas

to automatically open terminal in user folder

install zsh, oh-my-zsh

change default shell of vscode terminal to zsh

and add these commands in .zshrc config file

su tejas

cd /home/tejas

If you have any questions ask me on twitter: https://twitter.com/tejasc0
How to Add Legends to the React Charts of Syncfusion
Tags: reactnative, charts, webdev, component
Published: 2021-07-14 03:34:30

Learn how easily you can add legends to Syncfusion [React Charts](https://www.syncfusion.com/react-ui-components/react-charts "React Charts"). This video explains how to align the legends, customize the legends and their icon sizes, select a series on clicking the legends, and enable animations.

Download the example from GitHub: 
https://bit.ly/3jONwM8

Refer to the following documentation to add legends in the Syncfusion React Charts:
https://bit.ly/2UsWGmQ

Check out this online example of legend in the Syncfusion React Charts: 
https://bit.ly/2UngOa6

{% youtube 7VYeN4W_wMc %}
Code Smell 83 - Variables Reassignment
Tags: oop, webdev, programming, codenewbie
Published: 2021-07-14 03:06:23

*Variable reuse is something we see in big chunks of code.*

> TL;DR: Don't reuse variable names. You break readability and refactor chances and gain nothing but laziness.

# Problems

- Readability

- Refactor chances

- Missed Optimization

- Mutability

- Garbage Collection Missed Opportunities

# Solutions

1. Define, use and dispose variables.

2. Keep your Definition, Usage and Destroy variables short.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/f97b6362fcfa4018e75d1d2ce9fc9169)
```python
class Item:
  def __init__(self, name):
    self.name = name
  def taxesCharged(self):
    return 1;
class Money:
  pass 

lastPurchase = Item('Soda');
# Do something with the purchase

taxAmount = lastPurchase.taxesCharged();
# Lots of stuff related to the purchase
# I drink the soda

# I cannot extract method from below without passing
# useless lastPurchase as parameter

# a few hours later..
lastPurchase = Item('Whisky');
# I bough another drink

taxAmount += lastPurchase.taxesCharged();
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/d5f970273099100449221f600cd7612f)
```python
class Item:
  def __init__(self, name):
    self.name = name
  def taxesCharged(self):
    return 1;
class Money:
  pass 
  
def buySupper():
  supperPurchase = Item('Soda');
  # Do something with the purchase
 
  # Lots of stuff related to the purchase
  # I drink the soda
  return supperPurchase;

def buyDrinks():
  # I could extract method! 

  # a few hours later..
  drinksPurchase = Item('Whisky');
  # I bough another drink
  
  return drinksPurchase;

taxAmount = buySupper().taxesCharged() + buyDrinks().taxesCharged();
```

# Detection

Many linters can warn us from reusing variables

# Tags

- Readability

# Conclusion

Reusing variables is a non-contextual copy and paste hint.

# Relations

{% post https://dev.to/mcsee/code-smell-03-functions-are-too-long-4hji %}

# More Info

- [The Evil power of Mutants](https://dev.to/mcsee/the-evil-powers-of-mutants-1noo)

- [Stack Exchange](https://softwareengineering.stackexchange.com/questions/115520/should-i-reuse-variables)

- [Wikiversity](https://en.wikiversity.org/wiki/Software_Design/Don%27t_reuse_a_variable)

# Credits

Photo by <a href="https://unsplash.com/@mybbor">Robby McCullough</a> on <a href="https://unsplash.com/s/photos/spiral">Unsplash</a>

{% twitter 1414832436547133440 %}  

* * *

> Either way you look at it (DRY or laziness), the idea is the same: make your program flexible. When change comes (and it always does), you'll have a much easier time changing with it.

_Chris Pine_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}

*Last update: 2021/07/14*