teleren/devto huggingface dataset:
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2020-09-01 20:01:23

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---

Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

---

### Fun with Animations

@hamzashahab1610 walks us through a few CSS animations with the goal of captivating and delighting visitors to your website. Check it out!

{% link https://dev.to/zenveus/web-animations-2n8a %}

### Define Node in Your Own Words

A super valuable exercise brought to you by @lisahjung!

{% link https://dev.to/lisahjung/beginner-s-guide-to-creating-a-node-js-server-3d0j %}

### Bots, Bots Everywhere!

@ayushi7rawat shared a tutorial on automating Instagram activities with the help of an Instagram bot. Fun! 🤖

{% link https://dev.to/ayushi7rawat/how-to-make-an-instagram-bot-with-python-1ggb %}

### Configuring an AWS EC2 Server to Host Your React-Express App

@rmiyazaki6499 gives us a look under the hood of deploying a JavaScript app from start to finish using AWS EC2.

{% link https://dev.to/rmiyazaki6499/deploying-a-production-ready-react-express-app-on-aws-62m %}


### Creating a Beautiful Scroll-Bar Doesn't Need to Be Hard!

@emmabostian shows us how to build a beautiful gradient progress bar that fades in from zero opacity to full opacity as you scroll — without a ton of CSS!

{% link https://dev.to/emmabostian/creating-a-custom-scroll-bar-in-24-lines-of-css-4gg0 %}

### Breaking Down a Fancy JS Term

@heytulsiprasad took it upon themself to gain a true understanding of an often complex term in JavaScript-land: Currying.

{% link https://dev.to/heytulsiprasad/what-the-heck-is-currying-anyway-p83 %}

### The Pros and Cons of Various React Patterns

@alexi_be3 shared a list of straightforward React component patterns, including the benefits and tradeoffs for each!

{% link https://dev.to/alexi_be3/react-component-patterns-49ho %} 



_That's it for our weekly wrap up! Keep an eye on DEV this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
How to add a new feature to Dark
Published: 2020-09-01 19:53:28

On Saturday, we had our third contributor meetup, this one was organized by [Shahriyar Nasir](https://twitter.com/ShahriyarNasir) (thanks Shah!). This time, we did mob coding to add a Tuple type to Dark, and we recorded the whole thing.

{% youtube HZk4yCF8DWQ %}

A tuple looks like this:

```ocaml
let x = (somevar, "a string", 567)
```

A tuple allows you to combine multiple values of different types. In the video, we added Tuples to the editor and frontend, including in particular the keystrokes to add, update, and delete tuples. Shah followed up later to [add backend support](https://github.com/darklang/dark/pull/2787). We hope to get this merged soon.

The video is about two hours, which is about how long it takes to add a language feature to the frontend (it probably takes a similar amount of time to add a feature to the backend). This was straightforward as Tuples have a very similar interaction model to Lists - hopefully other language improvements won't take too much longer.

Note that if you're interested in contributing other language features, the issues have [a good list](https://github.com/darklang/dark/issues?q=is%3Aopen+is%3Aissue+label%3Alanguage-feature) of what we need.

Now that tuples exist in the language, we still have make them more usable. We need functions to get the contents, such as `Tuple2::getFirst`, `Tuple2::getSecond`, etc. This also highlights that we need to support destructuring: while we currently support destructuring some expression types in pattern matches, we don't support that in let statements. We support:

```ocaml
match someNumber
  Ok 5 -> 6
  Ok 6 -> 7
  Ok num -> num + 1
  Err msg -> 0
```

But we don't support:

```ocaml
let Ok num = someNumber
```

There are quite a lot of functions in Dark that could return Tuples, where we've hacked support using other methods. For example, `request.headers` uses a dictionary (as does the header parameter in `HttpClient::get`), `DB::getAllWithKeys_v2` returns a dictionary, and `List::zip` returns a list of two-element arrays. These would much more naturally use tuples.

Overall, this is part of fleshing out the language, in order to allow us to build new features without having to hack around an incomplete language. We'll be doing more of this in the next few months.

---

You can sign up for Dark [here](https://darklang.com/signup), and check out our progress in these features in our [contributor Slack](https://darklang.com/slack-invite) or by watching our [GitHub repo](https://github.com/darklang/dark). Follow Dark on [Twitter](https://twitter.com/darklang), or follow [the blog using RSS](https://blog.darklang.com/rss/).
Matt's Tidbits #80 - A mind-blowing Rx revelation
Tags: mattstidbits, android, rxjava, tidbittuesday
Published: 2020-09-01 19:51:07

[Last time, I wrote about why you should stop using RxLifecycle.](https://medium.com/@matthew.b.groves/matts-tidbits-79-rxlifecycle-woes-abfb1b401937) This week, I have an earth-shattering Rx revelation to share!

Forgive my excitement if you already knew this, but did you know that the `zip()` function does not run commands in parallel?

This article does an amazing job of explaining what is happening and how to solve it:
https://medium.com/rxjava-tidbits/rxjava-tidbits-2-parallelism-with-observable-zip-6ef3c5a61a22

In the app I’m working on, we were using a `timeout()` to emit an error if the Observable (in this case, coming from a Bluetooth-connected device) did not respond. However, we found that sometimes these commands were timing out unexpectedly. We thought this might be because we were zipping so many things together (10), and BLE is slow that it was exceeding our timeout. However, writing a unit test confirmed that while adding these additional `subscribeOn` calls helps overall performance (since commands are run in parallel), it doesn’t help with the timeout issue — because the timeout was set for each individual command, and the timer does not begin until the observable is subscribed to. So, in our case, we eventually discovered one command that really was timing out, unrelated to it being zipped with so many other commands.

This was a big eye-opener for me, and I have since audited our app for other large `zip()` statements that can be parallelized to improve performance.

I hope you learned something helpful! Have you had other “aha!” moments with Rx? I’d love to hear about them in the comments! And, please follow me on Medium if you’re interested in being notified of future tidbits. I'll be on vacation next week, but will be back later on in September with more tidbits!

*This tidbit was discovered on August 26, 2020.*
Stumped about Rails Connection Limit Error
Tags: rails, postgres, help
Published: 2020-09-01 19:32:14

Over the last year I have been getting random ActiveRecord::ConnectionTimeoutError errors, where the application could not obtain a connection from the pool within 5 seconds. But I'm stumped as to what the actual issue is...

* we're using an AWS RDS instance that can handle hundreds of connections, which we never even come close to by the RDS connection log (max use is ~30).
* I have been over forums that talk about using Thread.new... but we don't spin any of our own threads.
* I've seen forums that talk about workers using more pool connections than necessary, but I haven't set up any puma workers, we just use web instances!
* There is no consistency in which controller#action throws the error, and no consistency on time of day or week.
* Sometimes the error will not show up for weeks, and then I'll get 15 instances of it in a few days

I'm at a loss as to where to even start looking...
Getting Started with sim-C
Tags: c, programming, compiler, opensource
Published: 2020-09-01 19:25:14

We really appreciate the support we received towards sim-C. If you’ve landed here and want to know more about sim-C, do check out our previous post [here](https://dev.to/cimplec/writing-code-in-c-simplify-your-life-with-sim-c-2dkj).

In this post, we will see the various methods of installing sim-C and a handful of examples to get you familiarized about this amazing tool. So let’s simplify programming in C with sim-C.

-------------------

### **Installing on Mac/Linux/Windows**
1. Run the following command
```
$ pip install git+https://github.com/cimplec/sim-c
```
--------------------

With sim-C installed on your system, it’s time we get started with it. You can check out the [documentation](https://cimplec.github.io/docs/doc.html) to get familiarized with the high-level syntax of sim-C.

### **Steps to run**
1. Open any text editor of your choice.
2. Write code using the sim-C high-level syntax.
3. Run the file using sim-C compiler.

```
$ simc test.simc
```
The C code file is generated with the same name as the simc file, but with extension .c

---------------------

Here are a few examples of sim-C in action.
The code below is written in the syntax of sim-C.
```
MAIN
// A single line comment
/*
and this
is a
multi-line comment
*/
for a in 1 to 10 by +1 {
    if (a%2==0){
        print(a)
    }
    else {
        print("Odd")
    }
}
END_MAIN

```
This sim-C code gets converted to —
```
#include <stdio.h>
int main() {
// A single line comment
/*
and this
is a
multi-line comment
*/
for(int a=1; i<=10; i++) {
    if (a%2==0){
        printf("%d", a);
    }
    else {
        printf("Odd");
}
return 0;
}
```
Here’s another example:
sim-C code —
```
def interest(x, y, z) {
    si = (x*y*z)/100
    return si
}
MAIN
var p= input(“Enter the principal amount: “, “f”)
var r= input(“Enter the rate: “, “f”)
var t= input(“Enter the time period: “, “f”)
var interest_amount = interest(p, r, t)
print(interest_amount)
END_MAIN
```
Equivalent C code —
```
#include <stdio.h>
float interest(float x, float y, float z) {
float si = (x*y*z)/100;
return si;
}
int main(){
float p;
printf("Enter the principal amount: ");
scanf("%f", &p);
float r;
printf("Enter the rate: ");
scanf("%f", &r);
float t;
printf("Enter the time period: ");
scanf("%f", &t);
float interest_amount = interest(p,r,t);
printf(interest_amount);
return 0;
}

```
It is evident that sim-C has the capability to increase productivity and reduce development time by reducing the amount of code that needs to be written.

-----------------------

sim-C is still in continuous development and some amazing changes are on the way!! Do check out the [Github repo](https://github.com/cimplec/sim-c) and star it to be in touch with the updates taking place. Do let us know if you have any suggestions for us. Looking forward to hearing back from you.
Merging Changes from another Local Branch
Published: 2020-09-01 19:22:17

<sub>But...officer the ship is still salvagable!</sub>

Scenario:

We make a bunch of changes and commit them only to find out we were on the master branch.  How do we solve this problem? Any attempts to push to master are never allowed.

```
git checkout -b 'NewBranchName'
// should be in that branch now
git merge master
// all the commits on master are brought over to new branch
git push
//all changes are pushed up via the new branch!

```

Ah, yes! We saved the ship from sinking. 

JWP2020
I created Image Sorting Visualizer with Javascript 
Tags: javascript, vue, algorithms, frontend
Published: 2020-09-01 19:20:33

# Hello Community! 👋

For a while now I have been a huge fan of algorithms and data structures. I have been slowly solving problems on leetcode and algoexpert and I wanted to showcase some of my skills. 

Sorting is a staple when it comes to algorithms and one of the first things i learned while studying. There are a lot of easy algorithms, such as **bubble sort** (one all of us are probably familiar, two for loops for the win!), but there are also harder ones, such as **quicksort** and maybe a **heap sort**.

**IDEA**

So the idea I had is just to visualize how the sorting algorithms work (I know there are many apps already doing that, but I wanted to create something on my own). 

The app would be very simple. You just go online, find a picture, copy the image url and paste it in. Additionally you can choose number of rows and cols, which I will use to slice the image into smaller parts. 

Once the image is sliced, I would reshape it so it would look all jumbled. 

And then you simply decide on what sorting algorithm you want to use, and watch how the animation shows the way algorithm solves the problem. 

On the bottom you will get a display saying, how long algorithm ran in the backend, what it's time complexity is and how many animations will processed to get an original image back.

**IMAGES**

*Presorted*

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

*Sorted*

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

**Where you can find the app**

App is hosted on heroku and it's very light and easy to use so feel free to test it out. I would suggest having maybe not more than 10 rows or columns because the number of animations might get too big, and you will probably get bored of watching the whole image reshape itself 😁 

I would love if you can give me a feedback on what do you guys think.

Live demo of the app: https://image-sorting-visualizer.herokuapp.com/ 

Github link of the app is: https://github.com/fvukojevic/Image-Sorting-Visualizer in case any of you kind souls really likes it and decides to star the project 😁
Writing code in C? Simplify your life with sim-C
Tags: c, programming, compiler, opensource
Published: 2020-09-01 19:02:59

If you are working with C or have ever worked with C, then you know how frustrating it can get writing those long and (sometimes) complicated syntaxes, and how time-consuming it can get to debug a code just because of something as simple as a misplaced semicolon. While we wholeheartedly believe that C is one of the most powerful and impactful languages ever created, it sometimes can be tough for non-programmers. In this article, we will tell you about sim-C, a tool that aims to help you simplify your life.

### **sim-C?**
In simple terms, sim-C is a tool that adds a layer of abstraction over the syntax of C, i.e it offers its users to write code in its own syntax and then converts that simple code into C code.

We know some of you will be concerned about your code slowing down as a result of using sim-C, but we assure you that the runtime of your code will not be affected due to it. This is because sim-C’s job is to convert code written in it’s high-level syntax to the syntax of C, hence only affecting the compilation time.

### **What do I need to know to use sim-C?**
If you can write a = b + c in any programming language, you probably have more than sufficient knowledge to get started with sim-C. Since sim-C’s ultimate goal is to convert its simple concise code to C code, we recommend that you have a basic knowledge of the C language, but as we mentioned earlier, it is not a necessity by any means.

### **What does sim-C have to offer?**
sim-C offers a very concise and simple syntax to the users. With sim-C you will surely be able to bring down your time of development. But perhaps the salient feature of sim-C is the ability to infer the datatypes of variables, that means you don’t have to worry about declaring integers/floats/doubles/chars etc, you can simply type ‘var name’ leaving the rest to sim-C.

sim-C is still in development phase (we released v0.1 alpha recently) and we are still adding new features regularly, so even if it is not for you right now, do keep an eye on it.

### **Final Words**
While sim-C is far from being complete, we would really appreciate it if you were to [check it out](https://cimplec.github.io/docs/). Do let us know if you have any suggestions for us. Looking forward to hearing back from you.

Do check out our next post, [Getting started with sim-C](https://dev.to/cimplec/getting-started-with-sim-c-4iek), to know how to install sim-C and run it.

sim-C is still in continuous development and some amazing changes are on the way!! Do check out the [Github repo](https://github.com/cimplec/sim-c) and star it to be in touch with the updates taking place.
INVERT IF STATEMENTS and EARLY RETURNS to improve your code readability
Tags: javascript
Published: 2020-09-01 18:23:52

---
title: INVERT IF STATEMENTS and EARLY RETURNS to improve your code readability
published: true
description:  https://joelnet.keybase.pub/cover-early-return.png
tags: javascript
---

Inverting if statements and early returns are two techniques that can be applied that can improve your codebase.

When used properly it can reduce indentation and complexity.

links in video:
https://refactoring.com/catalog/replaceNestedConditionalWithGuardClauses.html
https://www.jetbrains.com/help/resharper/InvertIf.html

Be sure to [subscribe](https://www.youtube.com/c/JoelCodes?sub_confirmation=1) for more videos like this!

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xb6e84yj8yc2gqelz4op.png)](https://www.youtube.com/c/JoelCodes?sub_confirmation=1)
How I Automated My github Code to Gatsby Posts
Tags: gatsby, automation, javascript, react
Published: 2020-09-01 18:01:34

- My previous situation
- Goal
- Action
- Outcome

## My previous situation

As I moved my blog to Gatsby, I started adding more content to my site.
So "normal" blog posts just like this one, its fine to manually upload as I need to write it down first.
The problem was that I was solving algorithm exercises either on LeetCode, HackerRank or other.
I would upload the code my github repo and then I'll need to go to my blog and write a blog post.
The rate of me solving problems was much faster of me uploading the blog content.

## Goal

I would like to be able to upload my algorithm solutions, add some readme doc and then it will automatically create a new blog post on my blog.

## Action

I would first need to decide on a "template" for my readme page, so I'll know how to build the blog post on my site.
After that I altered my Gatsby site, to load my Github repo files. It will look for readme file with a specific template and if
it find those, it will create a blog post with that content.

## Outcome

Everytime I solve a new exercise and want to have a blog post for it, I just create the readme file.
Push the code and post gets created on my site.

# Actions Steps on Gatsby

- add this config to `gatsby-config.js`
```
{
  resolve: `gatsby-source-git`,
  options: {
    name: `challenges`,
    remote: `https://github.com/tzookb/programming-challenges.git`,
    patterns: [`exercises/**/*.md`]
  }
},
```
- add product creation in `gatsby-node.js`
- I wont share all the page creation as its a bit big
- but the relevant Graphql query is this:

```
  const result = await graphql(`
    {
      allFile(
        filter: { sourceInstanceName: { eq: "challenges" } },
        limit: 10000,
        sort: {order: ASC, fields: [childMdx___frontmatter___date]}
      ) {
        edges {
          node {
            relativePath
            childMarkdownRemark {
              frontmatter {
                title
                url
                desc
                date
                source
              }
              html
            }
          }
        }
      }
  `)
```

I look up all the files (only readmes, from config)
and take the details I need for creating the post page.

just go to the home page and look up any LeetCode or HackerRank exercises :)

Original post on my site:
[Automate Github to Gatsby](https://tzookb.com/how-i-automated-my-github-code-to-gatsby-posts)
MongoDB |> server selection error: server selection timeout Type: ReplicaSetNoPrimary
Published: 2020-09-01 18:00:07

<hr>

Get a wired error message:

```
error connecting to host: could not connect to 
server:server selection error: server selection timeout, 
current topology: { Type: ReplicaSetNoPrimary, Servers: 
[{ Addr: admin:27017, Type: Unknown, State: Connected, 
Average RTT: 0, Last error: connection() : dial tcp: 
lookup admin: no such host }, ] }
```

when using `mongoimport` command.

Fix that by adding argument `--uri`

Example:

``` zsh
mongoimport 
    --uri "mongodb://<username>:<password>@
<ip or domain>:<port>/?authSource=
<authSource>&authMechanism=SCRAM-SHA-1" 
    -d <db> -c <collection> 
    --file=./data.json
```

Maybe also works with `mongo` and `mongoexport`

<hr>

_References_:

- https://stackoverflow.com/questions/59413297/error-connecting-to-host-could-not-connect-to-server-server-selection-error-s
#100daysofCode story of Code in this last 3 years
Tags: php, javascript, html, css
Published: 2020-09-01 17:57:31

Hello :)
so my story began that I've seen a sponsoring post on Facebook  talks about programming and how to start, by curiosity I've read the Post first think learned is **HTML5** AND **Css3** but i was poor on programming and how logics work the types of programming and so on.
after that, I've enrolling into **C** language and it was amazing for me because **C** language Can talk directly with the computer by step 
procedural programming is stressful when the project will be strong, I've read some articles about what are the types of programming language then i discover The **OOP**
starting to learn the **OOP** using JAVA i've made so projects with java calculator,textEditor,games[snake,tic tac toe].
i was so sad because my apps was not dynamic just static one,
by reading some articles i've found that the dataBase can make your app speak, first starting with **MySQL** i'am doing some practices by building a system login and signup in java desktop,
building a system management for the small library, working as freelancer for a student by 15 USD that was my first freelance project.
after that back in web development i was starting with **JS**
learning how to make a template interactive and learning the react library, then learning PHP Basics and **OOP** classes and traits ...
after 7 Days of learning PHP my friend call to work as a freelancer for building System management agency the concept was not hard i've build the System using **PHP** and Firebase realtime database the payment was **274 USD** after continue to practice to use PHP programming, atfer that i'am working also as freelancer for other 3 projects And the result it was fine, i've build a Ecommerce website using procedural programming and by reading about security the procedural programming in PHP by building a website is not safe cannot increase the safety to 20% and when you use this pattern to understand your code it take a time because the project is not structured i've learned the MVC pattern and begain with **laravel framework** by practicing and taking some ideas from laravel  starting to build my own project structure MVC
**what i'm doing in last 3 years ?**
learning : 
-HTML5
-CSS3
-C language
-JavaScript
-PHP
-Laravel framework

-react library 

and still learning today for building best apps  i fell imperfect skills ...
and still increase
my advice love what you do and start 
thank you