teleren/devto huggingface dataset:
Introduction to React.js 
Published: 2020-04-26 22:38:29

Today is officially the first day in my attempt to document my process of learning to program and I’m starting with my React.js journey.

What is React?

The official documentation simply defines React as a JavaScript library for building user interfaces. It is responsible for  presenting HTML to the user and handling how the user interacts with your application or website. React was created by Facebook a few years ago and has continuously increased in popularity to become one of the most popular JavaScript libraries.


What are the Unique features of React?

React is particularly useful in creating Single Page Applications (SPA) and works on the concept of re-usable class or function based components. It works to create interactive user interfaces that re-render automatically whenever a component is changed without having to reload the web page. This feature helps to promote a better user experience and reduces run time when ever the user loads up the page in a browser. 

How to create a new React App

The first step in creating a new React App  is to install Node.js®  which is a JavaScript runtime built on Chrome's V8 JavaScript engine. This can be gotten from “nodejs.org”. After installing it, open up the terminal which on a MacBook can be found by pressing Command - spacebar to launch Spotlight and type "Terminal," . In order  to check if node.js was successfully installed , type the command prompt ‘npm -v’ into the terminal. This should bring up the version you currently have installed. 


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


Next, find the directory you want to create a new React app in by using the command line “cd ..” to go up a directory. Then create a new React app by typing the command “npx create-react-app name-of-app” and wait a few minutes for the meta data and extension for your new app to be downloaded. Once you see the prompt “happy hacking” , open up the app by using the command line “cd name-of-app” followed by “npm-start” and grant permission for the terminal to open up your browser. 


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


Congratulations! You have created your first React Application 😊😊
Day 3 of #100DaysOfCode: Create transitions with React-transition-group
Tags: javascript, react, transition, 100daysofcode
Published: 2020-04-27 04:29:11

## Introduction
It looks better if we add transitions when adding or removing items on the page. Today I tried to use React-transition-group for transitions.

## Steps to use React-transition-group
1. Install package or include CDN
```
https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/4.3.0/react-transition-group.js
```
2.Import package to the React Component
```javascript
const { CSSTransition, TransitionGroup } = ReactTransitionGroup;
```
3.Wrap the component with **TransitionGroup** and **CSSTransition**
```javascript
return (
        <div className="container menu-container">
            <div className="row">
                products.map(product => (
                    <TransitionGroup>
                        <CSSTransition key={product.id} timeout={500} classNames="item">
                            <MenuItem product = {product} />
                        </CSSTransition>
                    </TransitionGroup>
                ))}
             </div>
        </div>
)
```

That's it!

## Implementations

{% codepen https://codepen.io/JenHsuan/pen/xxwRoKZ %}  

## Articles
There are some of my articles. Feel free to check if you like! 
* My blog-posts for software developing: https://medium.com/a-layman
* My web resume: https://jenhsuan.github.io/ALayman/cover.html
* Facebook page: https://www.facebook.com/imalayman
How to get Cypress working on windows
Tags: todayilearned, cypress
Published: 2020-04-27 04:03:21

##Introduction

This article is about how to get cypress in working state on windows.

Cypress is the new standard in front-end testing that every developer and QA engineer needs.

So, I thought of digging into learning what cypress is. But, the installation wasn't smooth. Earlier, I thought as per the official doc it would be just the basic command **npm i cypress --save-dev**. But it wasn't.

While doing so ,I bumped into this
```javascript
Installing Cypress (version: 4.4.1)

 ✖  Downloading Cypress
   → Cypress Version: 4.4.1
    Unzipping Cypress
    Finishing Installation
The Cypress App could not be downloaded.

Please check network connectivity and try again:
----------

URL: https://download.cypress.io/desktop/../../4.4.1?platform=win32&arch=x64
Error: self signed certificate in certificate chain
```

Even after setting corporate proxy it didnot work. Did search about it and found that it is marked as bug in their github repo.

Then, as per few suggestions went for direct download from cypress.io.

## steps which I followed:
1. Download zip file from [Cypress](https://www.cypress.io/)
2. In vscode terminal run, **setx CYPRESS_INSTALL_BINARY C:\path-to\Downloads\cypress.zip**
3. *Don't be in a hurry* restart vscode.
4. Now run **  npm i cypress --save-dev ** in vscode terminal
5. You would see something like this:
```javascript
> cypress@4.4.1 postinstall C:\react-project-path\node_modules\cypress
> node index.js --exec install

‼ Warning: Forcing a binary version different than the default.

  The CLI expected to install version: 4.4.1

  Instead we will install version: C:\path-to\Downloads\cypress.zip

  These versions may not work properly together.

  √  Unzipped Cypress

You can now open Cypress by running: node_modules\.bin\cypress open

https://on.cypress.io/installing-cypress

```

In your **package.json** file, find the *scripts* section and add a new entry.
```javascript
"scripts": {
      .....
      "cypress:open": "cypress open"
  },
```

In your project terminal, execute **npm run cypress:open**

```javascript
> react_project@0.1.0 cypress:open C:\path-toproject\
> cypress open

It looks like this is your first time using Cypress: 4.4.1

  √  Verified Cypress! C:\...\AppData\Local\Cypress\Cache\4.4.1\Cypress

Opening Cypress...
```

It would open up a cypress window and then you can begin your learning in cypress framework.

**Note:** With direct download you will not be able to use dashboard service and that is a shortcoming of this approach.

Cheers !!!
Which book should I pick up to learn JavaScript as a complete novice?
Tags: javascript, books, beginners, node
Published: 2020-04-27 03:31:57

I was looking for a physical book (paper) to learn JavaScript. I did a number of Google searches and read reviews but most books seem to presume that the reader knows at least the fundamentals of JavaScript and has some experience tinkering with it. Could you please list some books to learn JavaScript from the ground-up (starting with fundamentals), the book teaches from ground-up and assumes no previous knowledge on the reader's part except HTML and CSS? In addition, while I will practice writing JavaScript along with reading the book, the book, while starting with basics, should be packed with enough information so that I can build a cool web app by the end of reading it. Furthermore, if possible could you link a webpage with a good list of books to learn JavaScript for a complete novice, to both programming and JavaScript, having never written code except HTML and CSS. If possible, the book should teach ES6. Please do not suggest Eloquent JavaScript and You Don't Know JS Yet by Kyle Simpson because I have already taken a look at it and it is a more 'intermediate' book in my opinion. The author himself notes - "If you are new to programming or JS, be aware that these books are not intended as a gentle "intro to JavaScript." This material is, at times, complex and challenging, and goes much deeper than is typical for a first-time learner. You're welcome here no matter what your background is, but these books are written assuming you're already comfortable with JS and have at least 6–9 months experience with it." . Thank you for your help!
How can a Next.js application grow your business online?
Tags: nextjs, now, cms, development
Published: 2020-04-27 03:31:55

---
title: How can a Next.js application grow your business online?
published: true
date: 2020-04-25 11:47:28 UTC
canonical_url: https://chandan.dev/best-next-js-developer-for-designing-and-developing-your-nextjs-website
---

Single Page Applications like React, Angular, and many frontend frameworks render the page content dynamically with JavaScript and Search engine bots - mainly Googlebot will have a hard time crawling the content of our pages resulting in lower SEO performances. This is where Next js comes to the rescue. It has all the core features of React and comes with Server-side rendering (SSR) and Static Site Generation (SSG) support for excellent SEO to increase your website visibility on Google.

This means the page can be rendered on a webserver and returned to the browser as easily readable HTML. This kind of webpage is treated as "icing on the cake" by GoogleBot because it doesn't have to use resources for rendering the page using javascript. So, happier the GoogleBot is, the higher your web page will rank in Google searches.

Additionally Next js has a comprehensive list of features that include hot code reloading and splitting, automatic routing, prefetching, typescript support but one feature you should be most excited about is the support for Headless CMS.

Headless CMS is a backend Content Management System that does not worry about how and where your content gets displayed rather a headless CMS focuses on only two things: storing your structured content and delivering it. So, do you need a developer for [Next js development](https://chandan.dev/best-next-js-developer-for-designing-and-developing-your-nextjs-website) and every time to edit and update posts? Absolutely No, you just need an awesome Next js developer like me to set up and integrate your preferred Headless CMS for the first time. Post setting up you can simply log in to CMS provider's dashboard and publish as many blog posts and incredible content you want on the website.

This was just a quick round-up on Next.js. If you interested to know more about my experience with Next.js and web development in general and more detailed tech articles refer to the blog on my [website](https://chandan.dev) or check out my medium profile [here](https://medium.com/@chandan.reddy)
Check In: Twilio April 2020 Hackathon
Tags: twiliohackathon, javascript, postgres
Published: 2020-04-27 03:28:45

---
title: Check In: Twilio April 2020 Hackathon
published: true
description: My submission to the Twilio x DEV Hackathon!
tags: twiliohackathon, javascript, postgres
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zrkvefazvkj9fdze1tdn.png
---

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project.)

[Reminder]: # (Make sure you've submitted the Twilio CodeExchange agreement: https://ahoy.twilio.com/code-exchange-community)

[Important]: # (By making a submission, you agree to the competition's terms: https://www.twilio.com/legal/twilio-dev-hackathon-terms)


## What I built
Check In: An app to keep friends and family up-to-date with each other's lives.

You can think of Check In as a monthly holiday newsletter. With Check In, you can create a group of people in which you would like to stay in contact with. First, you create a group name and add the emails of the people you would like to correspond with. Next, Check In will send an email to all of the group members asking for an update in their lives. Recipients can reply to the email with an update. Within a few days, Check In will compile the responses into one newsletter that will be sent out to the group. After a month, Check In will start the cycle over.

![Groups page](https://dev-to-uploads.s3.amazonaws.com/i/48tf2p34we7zejxt22zw.png)

### Category Submission: 
I feel Check In falls under the COVID-19 Communications category. Check In allows those friends and family to keep in touch. Where Check In really shines is that there is no requirement for users to learn a new system. For most users, all they will need to do is reply to an email, which many people may already know how to do.

## Demo Link
Feel free to use the instance hosted at https://checkin.corymortimer.com. Otherwise, feel free to spin up an instance yourself!

## Link to Code
{% github CoryMortimer/check-in %}

## How I built it
- PostgreSQL
- Express framework with Node.js
- React framework with JavaScript

I learned a lot about SQL. I feel more comfortable on the frontend but I was able to get something up an working on the backend, which I am proud of.

For hosting, I am using [Netlify](https://netlify.com/) and [Heroku](https://www.heroku.com/). I originally wanted to use Azure Functions, but there is an issue with [setting multiple cookies from a function](https://github.com/Azure/azure-functions-host/issues/2737) that I could not (and did not want to spend any more time on to) get around. I do use an Azure Function for the daily trigger to check to see if emails need to be sent.

## Additional Resources/Info
Make sure to check out my Github for screenshots and diagrams of the system!
How to get glibc version - C Lang
Tags: c, linux
Published: 2020-04-27 02:42:54

Here we list 3 methods to get glibc version:

## Method 1, ldd

The easiest way is to use `ldd` command which comes with glibc and in most cases it will print the same version as glibc:

```bash
$ ldd --version
ldd (Ubuntu GLIBC 2.30-0ubuntu2.1) 2.30
```
Here "2.30" is the version.

## Method2, libc.so

We can also use the libc.so to print out version. First we need to find out the path of libc.so. You can use ldd to a binary to find out the libc.so:

```bash
$ ldd `which ls` | grep libc
	libc.so.6 => /lib/x86_64-linux-gnu/libc.so.6 (0x00007f918034d000)
```

From where we can see the libc.so path is /lib/x86_64-linux-gnu/libc.so.6.

Then simply run:
```bash
$ /lib/x86_64-linux-gnu/libc.so.6
GNU C Library (Ubuntu GLIBC 2.30-0ubuntu2.1) stable release version 2.30.
```

WE get the versin "2.30".

## Method 3, programmatic way

We can also write a program to print the version out. There are 3 ways we can do this programmatically.

```c
#include <gnu/libc-version.h>
#include <stdio.h>
#include <unistd.h>

int main() {
    // method 1, use macro
    printf("%d.%d\n", __GLIBC__, __GLIBC_MINOR__);

    // method 2, use gnu_get_libc_version 
    puts(gnu_get_libc_version());

    // method 3, use confstr function
    char version[30] = {0};
    confstr(_CS_GNU_LIBC_VERSION, version, 30);
    puts(version);

    return 0;
}
```

Compile and run:
```bash
$ gcc main.c -o main
$ ./main
2.30
2.30
glibc 2.30
```
Web Components!
Published: 2020-04-27 02:21:46

Web Components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. If you are familiar with building components in libraries like React or Angular, Web Components should feel similar. Thanks to them, developers are no longer limited to the existing HTML tags that the browser vendors provide.

The three main building blocks of Web Components:

Custom Elements
    Create custom HTML tags
    Create Custom Class
    Lifecycle methods available

Shadow DOM
    Used for Self-Contained components
    Encapsulates styles and markups
    Create with element.attachShadow({ mode: open})
    Creates a ShadowRoot that can be referenced and interacted with

HTML Templates
    Define the encapsulated markup of our web component
    Template tag stores markup on a page
    Include both HTML and CSS in templates
    Use slots to add custom text


HTML Templates are supported in Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, and Opera. Support for an early version of Custom Elements and Shadow DOM, known as "v0", is present in some Blink-based browsers like Google Chrome and Opera and is in Mozilla Firefox (requires a manual configuration change). The newer Custom Elements and Shadow DOM "v1" APIs are implemented in Safari, Google Chrome, and Mozilla Firefox and are in development for Microsoft Edge. Backward compatibility with older browsers is implemented using JavaScript-based polyfills.

Web Components are amazing. It is a great addition to the coding world! A business could really benefit from adding them to their webpages. 

Youtube Video: https://youtu.be/1ic4ERh7F00
MongoDB 3 Steps guide to quickly get started.
Tags: mongodb, cheatsheet, node
Published: 2020-04-27 01:59:19

I started learning MongoDB a while ago. There are plenty of resources out there to get you started. However, the ideas in them are scattered across websites and blog posts. So, I decided to write this guide to help those who can quickly get up and running with MongoDB. 

I divided the guide into 3 steps:
- Setting up the environment, MongoDB Server
- Seeding Sample dataset 
- MongoDB shell cheat sheet, to Start Practicing the commands.

Just follow the steps in the repository that I created to accomplish this:
{% github planetapex/mongo-db-cheatsheet no-readme  %}

The cheat sheet is as following

[MongoDB Shell Cheat Sheet](https://gist.github.com/planetapex/4e7560f2f01ea9cb62784ccee58c310c)
Python Zero to Hero - Ep.4 - Python Control Flow (if, else, loop)
Tags: python, tutorial, beginners, video
Published: 2020-04-27 01:53:52

---
title: Python Zero to Hero - Ep.4 - Python Control Flow (if, else, loop)
published: true
description: We got one step closer to writing a Python program. Learning how to branch out which path for the program to take base on conditions using if-else, we also learn writing loops so the program can do things over and over again with slight variation.
tags: python, tutorial, beginner, video
---
We got one step closer to writing a Python program. Learning how to branch out which path for the program to take base on conditions using if-else, we also learn writing loops so the program can do things over and over again with slight variation.

You can get the slide deck [here](https://bit.ly/PyControlFlow) and the example code and homework form [GitHub here](https://github.com/Cheukting/python02hero). Ask questions at my [Twitch channel](https://t.co/7sqvTilzF1?amp=1)

Also, check out Naomi Ceder's [Twitch channel](https://t.co/hXhTu0ZIG8?amp=1) for more beginner's (slightly more advance) tutorial.
29 : No More Vanilla JavaScript  
Tags: javascript
Published: 2020-04-27 01:36:29


Vanilla JS is important, But, Why, Do I have my own hypothesis? It was literally a Hypothesis. And, there are numerous type of learning JavaScript. I have been struggling which direction I should follow, What if I want to follow the alternative way to make vanilla JS projects first of all, and growing problem solving skills by algorithms? 

This means that I am not going to be passionate about the traditional way to learn. 

---
As long as I can write my code with my solution and know how to control the program, there is going to be a proper output, and, sometimes, I felt a huge pressure to please everyone, including the mentor, It was not good for me. 


Vanilla JavasScript was about respecting the fundamentals, of Structure AND how it works, But do you know that it does not work on it depending on the browsers? Then, I realized I want to be more open minded to learn libraries and change, People say, JavaScript is evolving, But, I have never looked on my eye, I was stuck in Vanilla JS, I thought that is my everything, 

Somehow, I think learning React.Js is also important, I discovered prioritizing the vanilla JS is adjusting to navigate the other path to go JavaScript. You know, there is python, Ruby, and the other awesome languages. 

Well, It is like learning C language, It is difficult, uncomfortable, and might be useless. Rather than focusing on Vanilla JS, I chose learning Pure Mathematics, and want to apply to my code to encode the computer exactly. 

--- 
I have my purpose, to become a mathematician, I WANT TO FIGURE OUT what is wrong with math education, and want to open the new math education door. I had a big trauma because of the math teacher. Now, I completely overcame, became a math newbie. 

Who wants to join the new journey?!
Tikz example
Tags: latex, tikz
Published: 2020-04-27 01:32:07

---
title: Tikz example
published: true
description: I tried to draw a complex diagram in Tikz.
tags: LaTex, Tikz
---

Suppose you want to draw a diagram like this.

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

package to be used

```latex
\usepackage{tikz}
\usetikzlibrary{intersections, calc, arrows}
```

I drew the code for two blacked-out triangles side by side.
CALC was used for the calculations.

# command definition

I created a command to draw a triangle. I define the coordinates, define the relationship between the coordinates, and then paint it with a fill.

```latex
\newcommand{\myTriangle}[1]{
\coordinate (myA) at ($#1+(0,0)$);
\coordinate (myB) at ($#1+(1,1)$);
\coordinate (myC) at ($#1+(2,0)$);
\fill (myA)--(myB)--(myC)--cycle;}
```

# Tikz body

I draw various instructions in the begin and end of the tikzpicture.

```latex
\begin{tikzpicture}
...
\end{tikzpicture}
```

# Defining vectors
Define a vector and define a triangle as a place by adding the vectors

```latex
\coordinate (R) at (2,0);
\coordinate (U) at (0,1);
\coordinate (LD) at (-1,-1);
\coordinate (RD) at (1,-1);

\coordinate (A) at (0,0);
\coordinate (B) at ($(A)+3*(R)$);
\coordinate (C) at ($(A)+3*0.5*(R)+4*(U)$);
```

# Drawing a triangle
command to draw a triangle.

```latex
\myTriangle{(A)}
\myTriangle{(B)}
\myTriangle{(C)}
```

# Drawing legs.
Specify the coordinates of the legs by adding and subtracting vectors, and draw a line.

```latex
\draw ($(A)+0.5*(R)+1*(U)$) -- ($(C)$);
\draw ($(B)+0.5*(R)+1*(U)$) -- ($(C)+(R)$);
\draw ($(A)$) -- ($(A)-0.5*(R)-4*(U)$);
\draw ($(A)+(R)$) -- ($(A)+(R)+0.5*(R)-4*(U)$);
\draw ($(B)$) -- ($(B)-0.5*(R)-4*(U)$);
\draw ($(B)+(R)$) -- ($(B)+(R)+0.5*(R)-4*(U)$);
```

If you define it well, you will be able to do complex drawings.
First Profile Site
Published: 2020-04-27 01:30:50

Today I finished a profile site for myself.  This was the final project for freeCodeCamp's Responsive Web Design course, and I hope to use this site moving forward (and update it with better features).

Link: <a href="https://aaronmccollum.github.io/" target="_blank">My Site</a>

What are things I could improve?
What are things I can add or remove?

This week, I'll be working on a media query for mobile phones.

Open to your thoughts!

Cheers y'all.