teleren/devto huggingface dataset:
Angular vs React vs Vue: Which JavaScript framework to choose for your next project?
Tags: angular, react, vue, javascript
Published: 2021-04-02 11:13:26

JavaScript has remained a preferred programming language for building desktop and mobile applications globally As technology advances, the JavaScript frameworks also get evolved, which can make developers confused. Out of many frameworks available, Angular, Vue, and React have gained a lot of popularity in the developer’s community in a short time. In this blog, we are going to compare these three platforms from various aspects.

Before comparing them, let’s have a brief introduction to React.js, AngularJS, and Vue.js.

Introduction of React, Angular, and Vue

React.js- Build High Traffic Websites with Ease

Facebook released this framework back in 2013. It was designed to address the issues related to high online traffic on Facebook ads. It also resolved coding and maintenance issues effectively. Today, React.js is used for developing high-traffic websites and interactive user interfaces. Glassdoor, PayPal, and Instagram are a few of the big brands that rely on React.

Angular- Robust Framework for Advanced Web Solutions

Angular is the oldest framework among these three frameworks. Google released it in 2010, and it is based on TypeScript. The JS suffix was dropped from [AngularJS](https://www.suriainternational.com/angularjs-development-company/) in the year 2016. Popular websites like Wix and Google itself are powered by the Angular framework. It is a robust and reliable framework for building advanced web apps and mobile apps.

Vue- Newest Member of JavaScript Family

Evan You, an ex-engineer at Google, has launched Vue in the year 2014. Since its inception, [Vue](https://www.suriainternational.com/vuejs-development-company/) has gained ground in the developer’s community. It has made the software developer’s life easy by eliminating the shortcomings of other similar frameworks. Today, Alibaba and GitLab are two big names that use Vue for their websites.

Comparing Angular vs React vs Vue

Popularity

As per the Stack Overflow survey, React is the most preferred framework and Vue.js follows it closely. However, Angular seems to lose ground due to the growing popularity of Express, Spring, and ASP.NET. However, Google Trends says a completely different story. From the perspective of search terms, React is on the top and closely followed by Angular for the last 12 months. Here, Vue is way behind both these frameworks. All these stats reveal that React is by far the most popular framework, but we need to compare other factors to get the real picture of comparing three JS frameworks.

Read More: https://www.suriainternational.com/angular-vs-vue-vs-react/
CSS Sprites
Tags: css, sprites
Published: 2021-04-02 14:16:32

---
title: CSS Sprites
published: true
date: 2021-04-02 11:13:19 UTC
tags: CSS,Sprites
canonical_url: https://blog.jws.app/2020/css-sprites/
---

CSS sprites is a method where you take multiple images and combine them into one single image so that you can use to reduce the number of assets that are loaded when someone visits the webpage.  I don’t think that it does anything for the total download size of the images but it does reduce the number of assets that are loaded.  When I went looking for an example to show, I found a project on github that uses [CSS sprites to show international flags](https://github.com/flarik/css-sprite-flags).  Let’s take a looks at it.

{% codepen https://codepen.io/steinbring/pen/oNLqvvg %}

As you can see, this method sets the image as the background for the element and then uses a defined height and width and a background-position value in order to determine what part of the image to display.  The only downside of the above example is that you need to include more content than you probably need.

So, let’s try to do this from scratch.  I took a 54kb picture of my cat and a 63kb image of my dogs and combined them into a 763kb image that contains both pictures (somehow going WAY over the sizes of the individual images).

{% codepen https://codepen.io/steinbring/pen/JjKLQwr %}

As you can see above, implementation is fairly straightforward.  In fact, there is [a web app](http://www.spritecow.com/) that you can use to determine the coordinates necessary and generate your CSS classes.

Have a question, comment, etc?  Feel free to drop a comment, below.

 

[Cover photo by [Anthony Tran](https://unsplash.com/@anthonytran?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/fairy?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) ]

The post [CSS Sprites](https://blog.jws.app/2020/css-sprites/) first appeared on [Blog.jws](https://blog.jws.app/).
How to Add SSL Certificate?
Published: 2021-04-02 11:00:37

Here you discover splendid 10 stages how to add SSL declaration through IIS (Internet Information Service). Assume, we don't have board to send our application empowered with SSL then we need IIS complete information to deeply our application with SS authentication.

Step 1: Open your IIS (Internet Information Services) from start windows or with hotkeys (ctrl + R then type inetmgr).
Step 2: On the home you will see features of IIS (Internet Information Services)   then click on the “Server Certificates”, you are now in server certifcates menu.
Step 3: Now click on right side pane Under “Actions”, click on “Create Self Signed certificate”, now you will pop up a new window “Specify Friendly Name”. Type your desired name here and click on “OK” button.
Step 4: Now you will see “Website4” certificate is now listing in certificate lists.
Step 5: Now go to your “Sites” and click on specific website for which do you need to install certificate. Now click on “Edit Bindings…”.
Step 6: Now click on “Add” button to add signed certificate to your website.
Step 7: Now you are on “Add Site Binding” windows, here you have to select type “https” & enter IP Address & also defined Port no for your respective website, now at the end on “SSL Certificate”, set your certificate which is created in our earlier steps.
Step 8: Here you can see your certificate click on certificate.
Step 9: Here you can see your website “Site Bindings”, now you can click on “Browse” button and it will navigate to view your website in browser explorer.
Step 10: Here you can see that your web address has included “https”. Now SSL certificate has been installed successfully in your website.
Above key steps will help to work out on how to add SSL Certificate.
How to Add FTP Site in IIS?
Published: 2021-04-02 10:55:43

Now find the complete process of Add FTP Site in IIS.

Step 1
Open your Control board, presently find "Uninstall or change a program" highlight. Snap on left sheet "Turn Windows includes on or off". Presently grow "Web Information Services". Presently grow "FTP Server" and check all under this hub.

Step 2
Open your IIS (Internet Information Services) through shortcut key (Ctrl + R then type “intermgr”). Now right click on “Sites” then click on property “Add FTP Site…”.

Step 3
Now a popup window "Add FTP Site" will open "Webpage Information", type "FTP website name" at that point click on "Actual way", select your site to transfer, at that point click on "next" catch to follow subsequent stages.

Step 4
Now on next window, a new window “Authentication and Authorization Information” will open, here you can tick check boxes for “Authentication” i.e. Anonymous, Basic. Now drill down “Authorization” allows access to specific user. You can provide access to all users, anonymous users but it is highly recommended “Specific users” due to security reason.

Step 5
In this window, user name is entered “ftp_user”  to allow upload website stuff.

Step 6
Now you are on “Binding and SSL Settings” where you can enter your IP address, Port No etc.

Step 7
Now you can provide security concerns Read, Write, Read & Execute, Modify, Full Control etc.

Step 8
Now you can enter your IP address (host name), User name and password. In this window, you can see that website directory is displayed when you entering correct (host name, user name & password) login detail to access website stuff.

Find the complete video of How to Add FTP Site in IIS now. Just visit the site
Simple demo of Android reverse /hook
Tags: android, xposed
Published: 2021-04-02 10:51:51

### what is xposed
Xposed is a special Android application. By replacing the files such as app_process witch under system\bin\Process to control the zygote process, so as to control all the app processes on the mobile phone; the disadvantage is that it can't hook the functions in the so application

### how to install xposed
refer to [Install xposed for Android phone](https://dev.to/yuyalei/installation-of-xposed-framework-for-android-phone-5ei8)

### a demo for xposed
1. create a new Android project
2. modify(alter, change? I dont konw..)the AndroidManifest,xml
```
<!-- Whether it is an xposed module. Xposed judges whether it is a module based on this
        <meta-data
            android:name="xposedmodule"
            android:value="true" />

        <!-- The module description -->
        <meta-data
            android:name="xposeddescription"
            android:value="xposed demo" />

        <!-- The minimum version supported is 30-->
        <meta-data
            android:name="xposedminversion"
            android:value="30" />
```
3.add dependency
open buile.gradle (module:app)File, add the following code in it:
```
 compileOnly 'de.robv.android.xposed:api:82'
 compileOnly 'de.robv.android.xposed:api:82:sources'
```

4. IXposedHookLoadPackage
Create a new Java class(MainIntercept) and implements Ixposedhookloadpackage and override the handleloadpackage method

5. xposed_init
Create an assets under Src/Mian, add xposed_init under it,, the code inside is your hook class package name + class name

6. Rewrite the Mainactivity code as follows:
  ```
 public class MainActivity extends BaseActivity

    private TextView textView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        ............
        textView.setText(getText());
        ............
    }
 
    private String getText(){
          return "-----ha ha !!-----";
    }
 
}
  ```

6.change the code in MainIntercept:
```
public class MainIntercept implements IXposedHookLoadPackage {
 
    @Override
     public void handleLoadPackage(XC_LoadPackage.LoadPackageParam lpparam) throws Throwable {
    if(!lpparam.packageName.equals("com.xxx.xxx")) return;
 
  XposedHelpers.findAndHookMethod("com.xxx.xxx.xxx.MainActivity", lpparam.classLoader, "getText", new XC_MethodHook() {
 
            @Override
            protected void afterHookedMethod(MethodHookParam param) throws Throwable {
                super.afterHookedMethod(param);
                param.setResult("----I was changed-----");
            }
 
        });
 
    }
}
```
7.Rebuild, **select the app in xposedinstaller and restart it**

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fmi0rrax5kw5osincw4.png)
 ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8m1jap4rdqrehctk677.png)
 ![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h6jgoafphowuzpomgzh2.png)

8.after restart the app,When this method is executed，you will see the result is '----I was changed-----' instead of '-----ha ha !!-----'
HAP: What is HTML Agility Pack C#?
Published: 2021-04-02 10:47:57

Being an eager C# developer, it may intrigue you a ton to extend a similar coding language into the universe of web programming yet it is very chaotic to do everything without any preparation. In such sort of examples, there are a few offices from advances to facilitate your work and one of them is the HTML Agility Pack. Subsequently, it would be ideal and important to realize what is HTML deftness pack or what is HTML Agility pack C# as this is an incredible apparatus that would prove to be useful to utilize.

HTML Agility Pack: Preface
In a web programming arena, the development work is divided into the server-side and client-side. On the client-side, there are things such as HTML, CSS, Javascript, and others while on the server side there are many options such as PHP, Java, C#, and Python. C# combined with ASP.NET framework has been vividly used by many large scale and medium scale organizations on the server side.

HTML Agility pack C#: Your Coding Friend
After the preamble, now exactly what is HTML agility pack and why it is used? Many times, it becomes a requirement to read or what is technically called as parse an HTML document where the source could be a file, or a string or another web source. Thus, what is HTML agility pack c# is that it is one of the .NET libraries that gives the C# developer to read and write the DOM (Document Object Model) and has explicit support for plain XPath or XSLT and the bonus is, you don't even have to know about these terminologies? The library is so forgiving that it won't trouble much with its functionality even if the source of HTML is malformed in standards. Thus, it's the best choice to rely on this library instead of writing up the parsing code all by yourself.
List of #mustToKnow concepts in React/Redux ??
Tags: react, redux, discuss
Published: 2021-04-02 10:28:43

I'm not sure if we can ask questions in here. But here we go. I have started with React a month ago. What are some of the key concepts that every React developer must know?. Any React dev here that could help me in my learning by giving me a good roadmap? Thanks in advance :) I think this post might help others who are also getting started with React too :)
How to find the name of the package which includes your missing header file
Tags: linux
Published: 2021-04-02 10:20:57


![error.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617009441530/467xPEI5g.png)

While I was installing  [my dwm](https://github.com/igaurab/dwm) build, i got a couple errors like the one shown in figure above. The header files which the dwm build needed were missing. The problem here is different linux distributions contains these header files under different package names. This solution works for debain or apt package manager.

## Solution

The `apt-file` can be used to search for the package name where the header file is located. `apt-file` is not installed by default. 

`sudo apt install apt-file`

![finding.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617009736727/43-Xijn8I.png)

Once we have installed the `apt-file` we can simply look for the name of the package where the header file is located. The name of the package I needed to install was `libxinerama-dev` Once we have the name of the package we can simply install it using apt.

`sudo apt install libxinerama-dev`


![done_installed.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617009997547/eEXOa9CH1.png)

After that try to compile the file again and repeat the process until you are done.
Creating a Sudoku Solver and Generator with Python
Tags: python, algorithms, computerscience
Published: 2021-04-02 10:17:06

# Introduction

I recently created a 3-part tutorial on medium on how to create a sudoku engine which was capable of solving and generating sudoku's. A sudoku which has been generated can also be saved as a string, this makes it easier for the exportation of sudoku's. Bear in mind that the algorithms I show you in the tutorial are very [greedy](https://www.freecodecamp.org/news/what-is-a-greedy-algorithm/) since a lot of recursion is used. [Here](https://github.com/1Blademaster/sudoku_engine) is a link to the Github repo as well if you wanted to browse through the code.

Since this is a 3-part series, I've added links to all the 3 parts below:
1. [Introduction and creation of the solver](https://kushm.medium.com/building-a-sudoku-solver-and-generator-in-python-1-3-f29d3ede6b23)
2. [Starting the generator 1](https://kushm.medium.com/building-a-sudoku-solver-and-generator-in-python-2-3-5eef3141702c)
3. [Finishing the generator 2](https://kushm.medium.com/building-a-sudoku-solver-and-generator-in-python-3-3-cac73d340973)

# Example Usage

You can use the tutorial to create a Board class which can further be imported into any of your scripts/programs as shown:
{% gist https://gist.github.com/1Blademaster/1dd9f5ede4711c5370fe09e0c85662c3 %} 

# Final Thoughts

If you have any suggestions, advice or questions then please feel free to leave a comment and I shall answer everything.

Thank you for reading! 💖
React Smooth Scroll Effect
Tags: react, javascript, smoothscroll, npm
Published: 2021-04-02 10:09:39

React Provider Component to add a smooth scroll effect 

Live demo: [https://react-smooth-scroll-effect.netlify.app/](https://react-smooth-scroll-effect.netlify.app/)

## Install

```bash
npm install --save react-use-smooth-scroll
```

## Usage

```jsx
import React from 'react'

import { UseEffectScroll } from 'react-use-smooth-scroll'
import 'react-use-smooth-scroll/dist/index.css'

const App = () => {
  return (
    <UseEffectScroll>
      <section className='bgGreen'>
        <h1>Section 1</h1>
      </section>
      <section className='bgOrange'>
        <h1>Section 2</h1>
      </section>
      <section className='bgBlue'>
        <h1>Section 3</h1>
      </section>
      <section className='bgGrey'>
        <h1>Section 4</h1>
      </section>
    </UseEffectScroll>
  )
}

export default App
```

Follow Me On Github : 
https://github.com/saidMounaim
The Most Important HIDDEN Skills in Software Engineering
Tags: webdev, 100daysofcode, beginners, python
Published: 2021-04-02 10:03:19

When it comes to learning to code, most of our attention goes into learning things like programming languages and frameworks, but those are not the only required skills.

In this video I am going to talk about some hidden skills that cannot be ignored, without these skills you will find it very difficult not only to learn to code but to work as a developer.

{% youtube ff5EGdZUoaI %}

Please subscribe on YouTube if you like this sort of content:
[The Most Important HIDDEN Skills in Software Engineering](https://youtu.be/ff5EGdZUoaI?sub_confirmation=1)
Design 
Tags: mlhgrad, lhd
Published: 2021-04-02 09:34:07

you have to agree that without design, the world would be less impressive and colorful. Designs generate buzz and provoke interest. When executed well, it makes anything an apple to the eye. Therefore, designing has seen itself become a pursuit and a love for many to the extent of professionalization.

The design space is also evidently getting more creative by the day. In light of that, we have several best blogs and bloggers out there who continue to make design content available to creatives and creative wannabes. The world of design is so extensive because different designers draw their inspiration from unconventional wells.


The design blogs and bloggers have content that covers a wide array of spheres that range anywhere from interior décor, food, lifestyle, fashion, photography, graphics design, web design, and everything in between.
✔||🤢 Commit or Vomit | Switch(true)
Tags: discuss, programming, javascript, webdev
Published: 2021-04-02 09:32:27

In my recent post I questioned the use of a switch instead of an if else statement. This gave me the idea of an recurring item for dev.to: Commit or Vomit! Would you commit this code or not. 

It's going to be code snippets that are going to be evaluated here. Not posts because I don't want people to feel/be judged by this, only code!

So this first ✔||🤢 is from the post that started it all.

{% post jmdejager/if-all-else-is-complicated-switch-to-switch-3hli %}

```Typescript
switch(true){
	case userMissedAppointment:
		return 'nope';
	case userHasAngularExperience:
	case userHasReactExperience:
	case userHasVueExperience && userCanStartInstantly:
		return 'hire';
	default:
		return 'maybe'
}
```
This is just an example but the question is about the switch(true). What do you think? ✔||🤢



❤: Commit 
🏷: Vomit (we all know unicorns don't vomit)
🦄: Like your post please continue this series!

Looking forward to your reactions! 😎
Introducing Hasura Monitoring with New Relic
Tags: newrelic, observability, hasuracloud
Published: 2021-04-08 09:58:22

---
title: Introducing Hasura Monitoring with New Relic
published: true
date: 2021-04-02 09:27:30 UTC
tags: NewRelic,Observability,HasuraCloud
canonical_url: https://hasura.io/blog/integrating-new-relic-with-hasura-cloud/
---

 ![Introducing Hasura Monitoring with New Relic](https://hasura.io/blog/content/images/2021/04/newrelic_hasura.png)

We are excited to announce the latest in our APM integrations with the release of New Relic. Available for Hasura Cloud's Standard Plan and with Hasura Enterprise for on-prem or private cloud deployments, this feature expands our support for logging and metrics to even more teams.

Integrating New Relic with Hasura Cloud is a matter of copy-pasting your access tokens into the Hasura project configuration. Taken directly from the New Relic website, New Relic lets you "instrument, analyze, troubleshoot, and optimize your entire software stack."

### Why add New Relic to Hasura

Observability is a critical component to building resilient tech-stacks, and having a native integration for tools that can ingest your logs and metrics simplifies your APM infrastructure and logging infrastructure in general.

### What data gets sent to New Relic

You can read much more about the integration in our [in-depth documentation](https://hasura.io/docs/latest/graphql/cloud/metrics/integrations/newrelic.html#view-metrics), but in brief, we send logging events across _http_ and _ws_ with the following 5 metrics:

1. Average number of requests
2. Average request execution time
3. Success rate of requests
4. Active subscriptions
5. Number of websockets open.

Additional metrics will be added in the future. If you have a specific measurement need, let us know!

### How to get Started

You can reference the documentation above, or view the following guide that shows how to quickly add New Relic to your Hasura projects and view the exported logs.

{% youtube PQgRRXitbAg %}