teleren/devto huggingface dataset:
React vs Angular 2020
Tags: javascript, react, angular
Published: 2020-10-09 09:56:38

Hello guys this is Satyam,again back with another awesome blog and in this blog I am going to compare React and Angular on the basis of my experience while working with these two awesome frameworks.

React was introduced by Facebook which is a very popular social media platform,now why the developers of Facebook created React,before React,we used plain JavaScript in different application and the problem was that whenever you try to visit any section of the page from another then the entire page is actually refreshed that resulted in more time consumption and the problem was solved by React's virtual DOM and now many big application such as Facebook,Instagram and WhatsApp uses React.React is basically a frontend framework and whenever you try to build a large application in it you will need to use another tool or library that is called Redux.On the other hand Angular was Introduced by Google and hence it is popular as a Google Product.Now the story of angular is very confusing,the first version of angular was termed as AngularJS and in the second version of Angular things were drastically changed and altogether it's a new Framework so AngularJS and Angular are two different things.AngularJS is also a frontend framework but it also supports MVC which is a modern pattern of web app development.So Angular is used for creating both the frontend applications or end to end applications.React is actually easy to learn and use than Angular as React has only the concept of Components replaced by the all the major concepts which is really good according to me.Companies like Google and General Motors uses it as their main component.


React is just a simple library and you need other libraries to achieve even some common task like adding routes, writing API calls etc but this is not the case in Angular. Angular comes packed with all basic functionalities. To be honest, it comes down to personal preference and use case. I personally like opinionated frameworks so I liked Angular (even heard good words about Ember) and I like it more than React. In the end I can say that both are good, it's just personal preference.

Buy Siteground Web hosting:
https://www.siteground.com/index.htm?afcode=4bbbeb6048f7d8fd1efec76817755662

Teestring Merchandise:
https://teespring.com/get-coder-s?pid=328&cid=6277&sid=front

Programming Tutorial:https://bestpythontutorials.com
My blogs:https://devtipsntricks.com
Instagram:https://instagram.com/skvprogrammer
Twitter:https://twitter.com/skvprogrammer
Facebook:https://facebook.com/satyam.varman.12
My Portfolio:https://skv.netlify.com
My YouTube Channel - [https://www.youtube.com/channel/UC_pPPgwvndi8f2RkbkbvOIA]


> Thanks for Reading
react-infotips and react-reducer-table
Tags: react
Published: 2020-10-09 09:55:17

Hi all,

I am releasing two new libraries for the react ecosystem

- [react-infotips](https://www.npmjs.com/package/@ulgaal/react-infotip) is a library to add sticky notes and tooltips to react applications
- [react-reducer-table](https://www.npmjs.com/package/react-reducer-table) is a library to implement fast paged data grids with an emphasis on the useReducer design pattern

These two libraries have been developed for an internal project at my employer and I have been allowed to release them as open source (Apache 2.0 licence).

Both libraries use the latest react idioms (ES6, hooks, lots of examples in storybook format) and provide advanced features, like:

- react-infotip
  - custom tip shapes
  - automatic tip placement to maximize visiblity
  - draggable and pinnable tips
- react-reducer-table
  - column autosizing
  - fast column-resizing using CSS rule manipulation
  - spreadsheet-like cell range selection

The internal project consisted in porting a large web app from jquery-ui + jqgrid + qtip2 to React. I originally turned to external components (react-data-grid, then react-table) but for different reasons (features not available, ignored bug reports and pull requests, performance problems, unstable APIs), it turned out to be simpler to actually write my own. Both libraries have reached a level of features and stability which enabled switching the new React app in production at our sites.

I will continue upgrading these libraries on a regular basis as I add more features and fix bugs. I hope these libraries will be of interest to other React developers with similar needs and that can work together on these libraries for our mutual benefit.

Regards

Ulrich
How Can I Access Environment Variables in My Static Website?
Tags: devjournal, javascript, node, help
Published: 2020-10-09 09:54:15

_This post was originally published on October 9, 2020 on [my blog] (https://alexlsalt.github.io/blog)._

Good morning and happy Friday! I've run into a bit of an issue - that I know I've solved before by putting a sort of band-aid solution on it - but I want to solve it fully now and I'm running into a bit of a wall.

Essentially, I have a static website running on simple HTML, CSS, and JavaScript. I'm currently fetching data from my podcast host API so that I can display podcast episodes without having to hardcode all of the podcast data into my own JS files.

Now, where I'm running into my issue is that I want to use an environment variable for my API access key in a .env file, but I can't use the 'require' function in my JS page because 'require' isn't available in the browser (I think that's what the issue is).

From where I stand now, I'm going to need to incorporate Node *or* I can rebuild the website as a React app and then install dotenv as a package and simply import it and the environment variable into my app.

I'd like to figure out the steps for adding it to my static HTML/CSS/JS site, if possible - but I'm not sure how to or even really how to phrase the question when I try to look it up.

Any guidance or insights appreciated!


----------


P.S. Did you know I have a podcast with new episodes each Wednesday? Go listen [right over here >>] (https://www.ladiescodecollective.com/podcast)

![The Ladies Code Collective Podcast cover art](https://dev-to-uploads.s3.amazonaws.com/i/e9bnxljvfrdjeti7fvbr.png)
Remove unused npm modules in less than 30 seconds!
Tags: node, tutorial
Published: 2020-10-09 09:30:23

In this quick tutorial, I'll tell you how you can find the unused npm modules in your project and remove them.

Go to the project's root folder and run the below command,

```bash
npx depcheck
```
It will display all the unused packages in your project.

To uninstall a module simply run the below command

```bash
npm uninstall <package>
```

or

```bash
yarn remove <package>
```
Challenge : Optimizing a little Javascript script...
Tags: javascript, beginners
Published: 2020-10-09 09:09:51

Dear fellows,

For the ones among you who loves doing things in plain Javascript, how would you optimize this code while keeping it very simple ?

I don't mean performance optimizations, only suggestions to avoid memory leaks..

You can test it here : [challenge](https://flems.io/#0=N4Igxg9gdgzhA2BTEAucD4EMAONEBMQAaEAMwEskZUBtUKTAW2TQDoALAF0fmPSk6IBqEAB585AG4ACcvgC8AHRATJcnNmUA+UQHpVWvniRhO5aNTQAGFAEYALCAC+RekxYhWAK2olIAoU4RfxhOaVDMQWl5aWBFKGlpSABXARRpK3inePiQsMxTc1ho2PjE8igwdIAKAEporVKExPDOSMRWFIFpAGoY2wBuMpa1RAB3OqHm7KgZ3IswvE5k7ABRSUCYErqGpsT8CDBk5gFhxNYAR2TEACcATwBlRBNOCBvq5QAjZM5XqABiLqCG7KWpnaSsTD4fDrQIAGXIoSEtw+4Hg5DAAGtlERpAUzBZWBUwLUpnNKgtpKMxtt6vJGsBpMNVOpsNgiVAoLcABIAFQAsnCSsMAAbg0TsWxaADCEFSwOkABJgBFBJ05QInHpJVpxd9ftBZAplEDbtoAJIAOWlACU9Pq-rrmmLmksVrCBDBJlkclBqd6oEZnohChYRAAmABsKAA7ABaGxWZyuEAMZgiTowXz8QTCNDOAC6TiAA)

```js
const state = {
  count: 0
}

const actions = {
  inc: () => {
    state.count += 1;
    view();
  }
}

const setupEvents = () => {
  document
    .querySelector("button#counter")
    .addEventListener("click", actions.inc);
}

const view = () => { 
  dividapp.innerHTML = 
  `
    <h1>Counter ${state.count}</h1>
    <button id="counter">INCR</button>
  `
  setupEvents();
}

view();
``` 
Crédits : the image is from [BlendSwap](http://www.blendswap.com/blends/view/67726)
Proxy your Backend API to the Parcel Development Server
Tags: parcel, proxy
Published: 2020-10-09 09:00:38

When working with Parcel, I missed the option to proxy the backend API to the frontend development server.

Parcel runs on `localhost:1234` and my API backend server runs on `localhost:1337`. I would like to have both the API server as well as the frontend server on the same site, this way you don't have to deal with CORS and you can use secure settings for cookies, like `SameSite=Strict`.

In a production environment, you would setup some kind of reverse proxy for that. This could be achieved with [NGINX](https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/), for example.

In your development environment, you will still like to have the features of Parcel, like Hot Module Reloading. 

I've built a node.js express script using the `parcel-bundler` as an express middleware, together with `http-proxy-middleware`:

```js
const proxy = require('http-proxy-middleware').createProxyMiddleware;
const Bundler = require('parcel-bundler');
const express = require('express');

const bundler = new Bundler('src/index.html');
const app = express();

app.use(
  '/api',
  proxy({
    target: process.env.API_SERVER || 'http://localhost:1337/'
  })
);

app.use(bundler.middleware());

app.listen(Number(process.env.PORT || 1234));
```

In package.json, I replaced the start script that used the parcel script with `node server`.

As a demo project, I have created a clone of https://yesno.wtf
It provides a node.js express backend and a react application.

https://github.com/terabaud/yesno-clone

Do you have questions or feedback? Feel free to leave a comment.
Trunk 0.5.0 | Proxy System
Tags: rust, webassembly, webdev
Published: 2020-09-23 13:21:01

---
title: Trunk 0.5.0 | Proxy System
published: true
description: Build, bundle & ship your Rust WASM application to the web. 
tags: rust, wasm, webdev
---
Build, bundle & ship your Rust WASM application to the web.

- [Github repo](https://github.com/thedodd/trunk)
- [Release notes](https://github.com/thedodd/trunk/releases/tag/v0.5.0)

Trunk now ships with a built-in proxy which can be enabled when running `trunk serve`. There are two ways to configure the proxy, each discussed below. All Trunk proxies will transparently pass along the request body, headers, and query parameters to the proxy backend.

### proxy cli flags
The `trunk serve` command accepts two proxy related flags.

`--proxy-backend` specifies the URL of the backend server to which requests should be proxied. The URI segment of the given URL will be used as the path on the Trunk server to handle proxy requests. E.G., `trunk serve --proxy-backend=http://localhost:9000/api/` will proxy any requests received on the path `/api/` to the server listening at `http://localhost:9000/api/`. Further path segments or query parameters will be seamlessly passed along.

`--proxy-rewrite` specifies an alternative URI on which the Trunk server is to listen for proxy requests. Any requests received on the given URI will be rewritten to match the URI of the proxy backend, effectively stripping the rewrite prefix. E.G., `trunk serve --proxy-backend=http://localhost:9000/ --proxy-rewrite=/api/` will proxy any requests received on `/api/` over to `http://localhost:9000/` with the `/api/` prefix stripped from the request, while everything following the `/api/` prefix will be left unchanged.

### config file
The `Trunk.toml` config file accepts multiple `[[proxy]]` sections, which allows for multiple proxies to be configured. Each section requires at least the `backend` field, and optionally accepts the `rewrite` field, both corresponding to the `--proxy-*` CLI flags discussed above.

As it is with other Trunk config, a proxy declared via CLI will take final precedence and will cause any config file proxies to be ignored, even if there are multiple proxies declared in the config file.

The following is a snippet from the `Trunk.toml` file in this repo:

```toml
[[proxy]]
rewrite = "/api/v1/"
backend = "http://localhost:9000/"
```
Set JAVA_HOME and ANDROID_HOME properly on macOS Catalina
Tags: testing, environtmentsetup, macos, automation
Published: 2020-10-09 08:58:57

Hello DEV community! This is my first post here 🚀

A couple of days ago, I've switched from Windows to macOS. It was a little bit painful.

I was trying to set up an environment for mobile test automation. From the beginning, everything was going OK. But the environment variables were reset automatically.

I've searched and tried to fix the issue. And finally, I did it.

Couse macOS Catalina uses `~/.zprofile` instead of `~/.bash_profile`, using an old standard was misleading.

So, I've used `~/.zprofile` to set the environment and the result was a reliever.

So, the content of `~/.zprofile` file for `JAVA_HOME` and `ANDROID_HOME` is shown below:

```bash
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_271.jdk/Contents/Home
export PATH=$JAVA_HOME/bin:$PATH

export ANDROID_HOME=/Users/$(whoami)/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools
```
> `jdk1.8.0_271.jdk` would be different. Check the directory before typing.

After saving the file, you must run `source ~/.zprofile` to apply changes to the environment.

Think, it'll be helpful for someone 🙃
Docker Compose Demo Example with Angular, Spring Boot & PostgreSQL
Tags: docker, techtter, techtalks, angular
Published: 2020-10-09 08:49:37

Docker Compose example with 3-tier application that are composed as Microservices using Docker-Compose running on 3 different containers and communicating each other to handle the request from Angular->Spring Boot-> PostgreSQL. Check the link below. 
https://youtu.be/ZZ2Llh4NhaY

{% youtube ZZ2Llh4NhaY %}
This is How I cleared DP-900....
Tags: azure, database, beginners, cloudcomputing
Published: 2020-10-09 08:44:39

Hello, 

I have attempted DP-900 Exam on 05th October 2020. and cleared the exam with 850 marks. Here is my preparation guide. The below-provided materials are enough to clear this exam with a flying score.

You have to be clear in below topics

i)  Data, visualization, Types of charts

ii) Relational Database

    * SQL on Virtual Machine
    * Azure Managed instance
    * Azure SQL database
    * Azure Mysql database
    * Azure Postgres database
    * Azure MariaDB 

iii) Non-Relational Database (NoSQL)

     *  Azure Cosmos DB
     *  Azure Table Storage
     *  Azure Document DB
     *  Graph Database
     *  Column Database
     *  Blob Storage

iv) OLTP vs OLAP

v)  Azure synapse database, Azure DataLake

vi) Data factory, Databricks

vii) PowerBi (just an overview of it and its services) 

**Preparation path:**

1) Microsoft Learning Path for DP-900

https://docs.microsoft.com/en-us/learn/certifications/exams/dp-900/

2) Scott Duffy DP-900 course on udemy 

https://www.udemy.com/course/dp900-azure/

3) Exam topics practise tests.

These 3 resources are enough to excel in your exam.

Good Luck and all the very best!!
9 Proven Strategies to get Entry Level Data Science Job
Tags: datascience, job, python, machinelearning
Published: 2020-10-09 08:40:39

Hi Folks,

For a fresher getting a job as a Data Scientist is sometimes difficult but not impossible. All you need to do is put some extra effort. And these efforts should be smart and strategic.

That's why I have listed 9 Proven Strategies to get Entry Level Data Science Job. If you follow these Strategies, then definitely you will get your first job as a "Data Scientist".
Read this article, and follow these strategies- https://www.mltut.com/proven-strategies-to-get-entry-level-data-science-job/

All the Best!

Happy Learning!
Can Office 365 really do all I wanted?
Tags: discuss, microsoft, writing
Published: 2020-10-09 08:35:10

Which includes

- Offline working
- Font changing
- Programmability, and accuracy
- Backward compatibility

I mean, Windows 10 doesn't make it easy to install a real desktop app, redirecting to the web version; if I don't search hard enough (which is Office 2019, for local version).

Makes me really want to migrate to LibreOffice, where I know what I am doing. (And of course, backward compat is ensured, although not perfect.)
Review: IBM Data Science Professional Certificate
Tags: datascience, machinelearning, computerscience
Published: 2020-10-09 08:33:56

Hi Folks,

Are you planning to enroll in IBM Data Science Professional Certificate?… If yes, then you should definitely read my experience with IBM Data Science Professional Certificate before enrolling in the course.

I hope my review will help you to take your final decision. To read the full review visit here- https://www.mltut.com/ibm-data-science-professional-certificate-review/

All the Best!

Happy Learning!
Best Data Visualization Courses Online- You Need to Know!
Tags: datascience, machinelearning, career
Published: 2020-10-09 08:24:16

Hi Everyone

In Data Science, you have to showcase your findings in a visual form, so that stakeholders can understand it properly. This is an important step in Data Science.

That’s why the knowledge of Data Visualization is important...

So if you want to learn Data Visualization and looking for some Best Data Visualization Courses Online, read this article- https://www.mltut.com/best-data-visualization-courses-online/

Have a Nice Day!

Happy Learning!
Code in 60 sec videos - JS Object Destructuring
Tags: javascript, codenewbie, tutorial, webdev
Published: 2020-10-09 08:01:47

My first post in DEV :tada: 
I'm exploring short silly doodle videos, to talk about coding concepts or features, in a bitesized, ~60 seconds format.
This is my first attempt, would love to hear some feedback, good or bad to make this better. 
Thanks folks, happy watching! 

{% youtube 8ythg69XAOY %}
100 DaysOfCode | Day 51
Tags: challenge, 100daysofcode, beginners, python
Published: 2020-10-09 08:22:54

▄█ █▀█ █▀█ █▀▄ ▄▀█ █▄█ █▀ █▀█ █▀▀ █▀▀ █▀█ █▀▄ █▀▀
░█ █▄█ █▄█ █▄▀ █▀█ ░█░ ▄█ █▄█ █▀░ █▄▄ █▄█ █▄▀ ██▄
Hey everyone, I took a break for a week in this challenge!
I know that this challenge must be continuously but sometimes taking a break and having some rest is neccessary for keep moving forward, As I did.

Anyway, I'm starting the rest of my journey so strong, more powerful and energetic.
I need your words in my way, if you have any suggesstion just lemme know and leave a comment below.


#Keep Moving Forward ツ

##Enjoy Your Journey 👊

##Code with 💛

__🅑🅐🅝🅙🅘__
Benefits of Continuing SEO Efforts through COVID-19

Tags: webdev
Published: 2020-10-09 07:30:41

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

It Has Taken The Online World By Storm, and It Has Turned It Upside Down And Significantly Changed Consumer Shopping Behavior. Of Course, Covid-19 Has Increased Internet Usage Exponentially. It's taken the internet world by storm and has turned it upside down and significantly changed consumer buying behavior. Obviously, Covid-19 has improved internet usage exponentially. But, it has also caused traffic to company sites to plummet, irrespective of the business. Does that mean that you need to stop your electronic marketing at this time? Indeed, no! SEO is more important than ever as it can help to combat the impact generated by the pandemic.

**Continuing your SEO efforts offers a plethora of benefits and here are they-**

**Capitalize On Internet Shopping**

As a result of this health crisis, users are changing to online purchasing than ever before. Everybody is at home and looking at what they need. Even should they desire a service, they are assessing online to discover the hours of operation along with other details on the internet. Thus, it makes sense why you need to focus on organic search when you have a physical store. Ensure your site is SEO friendly since this is how Google indexes sites now. Assess your page loading rate, layout, and articles.

**Cost-effective**

In comparison to other marketing choices, working to maximize your search results through SEO is cheap. Now that you're in a fiscal crisis because of Covid-19, it's tough to spend on other advertising methods. Yes, there is no cost involved if you are already doing this.

**Build Trust**

In a crisis like this, building trust with your clients and prospects is crucial. SEO helps to attain that confidence because individuals think Google gives authentic outcomes. Obviously, Google aims to give the best results to these users. For your company, this usually means that ranking high gives confidence in the eyes of the customers.

**Track Audience Metrics**

By assessing the trending keywords or which of your website pages are spending for the efforts you've put on your SEO strategy, you can understand what your audience is looking for. You may be surprised to learn that pages you've ignored are getting the most traffic. The knowledge that you gain is invaluable since you're able to correct and provide the relevant content, improvise your service, and try to offer a trusted item.

Covid-19 has impacted every company around the globe. Bearing this in mind, today it is the right time to focus on a detailed strategy to boost your earnings. Start small if you're fresh or retweak your plan if you are already into. Utilize [search engine optimization services](https://www.propelguru.com/search-engine-optimization/) to attain your digital marketing objectives.
Dark-Light Theme (react-redux)
Published: 2020-10-09 07:18:47

Logic : The logic is simple, we have a switch button which have 2 stats true and false, false is for white theme and true is for dark theme , we ll have a key of toggleTheme in redux, (you can name it any) , we have a reducer or update its state and action function for dispatch the reducer type for update state, we have a config file where you ll define the theme properties for LIGHT and DARK theme, like textColor, backgoundColor, borderColor, and etc, i also attach my basic theme objects for both ,

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

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

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

these are files for redux toggleFlag we have state in reducer and switch case for update state, we have action for dispatch type to reducer,

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

here it all , hope you learn from this, support me on my youtube channel if you like this artical.